qingwei-li/vue-trend

🌈 Simple, elegant spark lines for Vue.js

🔥🔥🔥

More powerful, more flexible chart library for Vue.js 👉 https://github.com/QingWei-Li/laue

🔥🔥🔥

---

Vue Trend

🌈 Simple, elegant spark lines for Vue.js

Installation

npm i vuetrend -S

Usage

import Vue from "vue"
import Trend from "vuetrend"

Vue.use(Trend)

vue template

<trend
  :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
  :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
  auto-draw
  smooth
>
</trend>

Live Demo

Inspired

unsplash/react-trend - 📈 Simple, elegant spark lines

Props

Name	Type	Default	Description	Example
data	Number|Object	undefined	The data accepted by Vue Trend is incredibly simple: An array of y-axis values to graph.	[120, 149, 193.4, 200, 92] or [{ value: 4 }, { value: 6 }, { value: 8 }]
gradient	String	['#000']	Colour can be specified as any SVG-supported format (named, rgb, hex, etc).	['#0FF', '#F0F', '#FF0']
gradientDirection	String	top	Top, Bottom, Left or Right.
width	Number	auto	Set an explicit width for your SVG.	-
height	Number	auto	Set an explicit height for your SVG.	-
padding	Number	8	If you set a very large strokeWidth on your line, you may notice that it gets "cropped" towards the edges.	-
smooth	Boolean	false	Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges.	-
radius	Number	10	When using smoothing, you may wish to control the amount of curve around each point. This prop has no effect if smooth isn't set to true.	-
autoDraw	Boolean	false	Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing.	-
autoDrawDuration	Number	2000	The amount of time, in milliseconds, that the autoDraw animation should span. This prop has no effect if autoDraw isn't set to true.	-
autoDrawEasing	String	ease	The easing function to use for the autoDraw animation. Accepts any transition timing function within the CSS spec (eg. linear, ease, ease-in, cubic-bezier...).	-
max	Number	-Infinity	Specify max value	-
min	Number	Infinity	Specify min value, This is useful if you have multiple lines. See #8	-

SVG Props

By default, all properties not recognized by Vue Trend will be delegated to the SVG. The line inherits these properties if none of its own override them.

This means that, among other properties, you can use:

• stroke to set a solid colour,
• strokeWidth to change the default line thickness,
• strokeOpacity to create a transparent line,
• strokeLinecap/strokeLinejoin to control the edges of your line,
• strokeDasharray to create a dashed line, and
• strokeDashoffset to control where the dashes start.

Development

yarn
yarn dev
# open localhost:4000

TODO

• Unit test

License

MIT

vue-trend's Issues

Baseline is always zero

It'd be nice if you could set any values to the trendline, let's say 5,3,3,5,6,10 and the baseline would be 3 in this case, instead of 0.

And also, if you set the last value to 10, it'll try to draw down to zero, making the chart look weird.

Another interesting feature would be to define a "fill" color to the shape which forms.

Would it be possible to add a point at the end of the line?

Would it be possible to add a point/dot at the end of the line? Ideally the color and size would be customizable.

See https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR for the usefulness of this feature (you may have to scroll down the page)

An additional option could be having the point appear not at the end of the line but at the highest or lowest value.

solved, issue to be deleted

React Trend

Is this a typo all properties not recognized by React Trend [...] or as it should be?

Animation on data change?

Hey guys, love the library, could you please add animation when data changes or new properties are added? Would be very nice, thank you!

[BUG] Error on getTotalLength when testing component with vue-trend component inside

Hello =D.

I'm currently testing one of my custom components, and it uses your lib to render a trendline.
During the tests, when it envolves a chart update, it causes a:

[Vue warn]: Error in nextTick: "TypeError: path.getTotalLength is not a function"

Apparently this error is showed because SVGPathElement.getTotalLength() has been moved to SVGGeometryElement.getTotalLength() from the Web standards.

https://developer.mozilla.org/en-US/docs/Web/API/SVGPathElement/getTotalLength

additional feature show last value, max value, min value

is that possible to display that three information in the tag in the trend line?

Scaling issue

Hi,

there seems to be a scaling issue if you have too similar values. In this case you line is shown: https://jsfiddle.net/o8q2jeu6/1/

If you just replace one data point with a value that differs much more from the average, then the line is shown properly (I replaced the first "22" with "1"): https://jsfiddle.net/o8q2jeu6/2/

Could you please have look into this?

title prop

title prop which set's the SVG <title> https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title#Example

<svg width="220" height="70" xmlns="http://www.w3.org/2000/svg">
  <title>SVG Title Demo example</title>
  <rect x="10" y="10" width="200" height="50"
    style="fill:wheat; stroke:blue; stroke-width:1px">
</svg>

Would you be okay with a PR for this?

Align left

Hey,

I want my line to align to the left of it's container. I can do this manually in dev tools by adding the preserveAspectRatio="xMinYMin meet" property to the SVG. Is there anyway of passing this in as a prop?

Fixed line width

Looking for a way to keep a fixed px value for the path's stroke width. Suggest to add a prop like stroke-width-fixed: <boolean> in order to avoid this:

Seems related to: #21

demo page won't load in chrome

Demo page at https://cinwell.com/vue-trend/ is served over SSL, but JS/CSS are not causing Chrome to refuse executing them.

I'm on Mac OS X, using Chrome 57.0.2987.133 (Official Build) (64-bit)

How to add margins dashed?

Gradient is applied incorrectly

Greetings, it looks like the gradient is not being applied to the data range (min - max) but against the range (min point and max point) of the drawn line. This can cause confusion when the min and max points are set with the gradient articulating the range of the data and not the actual line.

Set "min" and "max" y values

Would it be possible/within the scope of the project to add two new props, min and max, which would create static min and max Y values? I often have datasets which have a minimum value of 0 and a maximum value of 100, and being able to represent this by having the proportionate amount of space above/below the spark line would be really useful.

Example:

<trend
  :min="0"
  :max="100"
  :data="[15, 40, 92, 10]">
</trend>

Add horizontal and vertical axis with values

I do not see any way to generate a diagram with a horizontal or vertical axis with data values printed on the axis - is there no feature for making a complete diagram?

Mouseover shows the value

I hope mouseover show the value ☺️

Documentation code doesn't work.

I copypaste this code and got empty page. Why it is not working? Using vie-cli webpack starter.

<template>
  <div>
    <trend
      :data="[0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0]"
      :gradient="['#6fa8dc', '#42b983', '#2c3e50']"
      auto-draw
      smooth>
    </trend>
    <p>hello</p>
  </div>
</template>

<script>
import Vue from 'vue'
import Trend from 'vuetrend'

Vue.use(Trend)
</script>

Is it possible to have a background under the spark line?

Like this:

Multiple spark lines

Is it possible to draw multiple spark lines, and have then scale accordingly, with this component? I tried using four instances of the component, but unfortunately that won't work as they don't scale relative to one another. That is, if one has values from 1 - 10, and the other 100 - 200, the later won't necessarily scale 10 times larger than the first.

show data when hover

can I show the x/y data when hover

Does this work Vue 3?

I'm getting this error when trying to render:

        <Trend :data="[1,2,3]"
            :gradient="['#5DCA9D', '#ABE1DF', '#9AF6D0']"
            auto-draw
            smooth
            :height="80"
        />

Uncaught (in promise) TypeError: h is not a function

Ability to specify min and max

It would be very useful if you could pass a min and max value to the component so that you can compare between trend lines. The current normalization has two issues:

First, there is issue #5 which means that some graphs will not render correctly.
Second, it is impossible to compare between lines due to each trend line being individually normalized.

vue warning

great lib !

that's my HTML part:
<trend :data="data" :gradient="['#6fa8dc', '#42b983', '#2c3e50']" auto-draw auto-draw-duration='1500' auto-draw-easing="ease-in"> </trend>

I got following warning:
[Vue warn]: Invalid prop: type check failed for prop "autoDrawDuration". Expected Number, got String.
(found in )

anyway it's working - there is effect when i change auto-draw-duration value.

[How] Width 100%

Is there a way to force the trendline to be 100% width?
I would like it to fill out the width of the parent div and then to control the height (also in % of parent)

Passing a height lower than the padding draws graph upwards

Passing a height of 15 and not setting the padding (that default to 8) inverts the graph.

Thanks for your work.

Control trend's thickness

Hey, I've tried to pass the 'SVG Props' but it seems they have no effect on the trend.
Is there a way to control the thickness of the trend?

Thanks!

Error when using Trend in Meteor

W20180124-18:10:58.424(1)? (STDERR) [Vue warn]: Error in nextTick: "TypeError: Cannot read property '$el' of undefined"
W20180124-18:10:58.425(1)? (STDERR)
W20180124-18:10:58.425(1)? (STDERR) found in
W20180124-18:10:58.425(1)? (STDERR)
W20180124-18:10:58.426(1)? (STDERR) --->
W20180124-18:10:58.426(1)? (STDERR)
W20180124-18:10:58.426(1)? (STDERR)
W20180124-18:10:58.426(1)? (STDERR) (node:3903) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 6): TypeError: Cannot read property '$el' of undefined

Error rendering trend - property 'boundary' of undefined

Hi, I am having some trouble with this. Installed and got the following error.

Project created through vue-cli webpack template

main.js

import Trend from 'vuetrend'
Vue.use(Trend)

Template in app.vue as shown in the first example
Thanks

Setting height, triggers console error. Expected Number, got String

Setting height="42" triggers JS-error in Console. Is the height value treated as a number or a string?

[Vue warn]: Invalid prop: type check failed for prop "height". Expected Number, got String.

continuous drawing mode?

I've used your very nice library to make a heartbeat monitor for a remote agent keep alive system and I was wondering if there is some way to have the trend continuously draw. Right now when the data updates it just changes with no animation.