Installation

npm i @ddgll/vue3-trend -S

# or via yarn

yarn add @ddgll/vue3-trend

Usage

// app.js

import Trend from "@ddgll/vue3-trend";

// ...

<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>

Inspired

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

Props

• data : Number | Object: 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 Colour can be specified as any SVG-supported format (named, rgb, hex, etc)
  • ['#0FF', '#F0F', '#FF0']
• gradientDirection: String: Top, Bottom, Left or Right.
• width: Number: Set an explicit width for your SVG.
• height: Number: Set an explicit height for your SVG.
• padding: Number: If you set a very large strokeWidth on your line, you may notice that it gets "cropped" towards the edges.
• smooth: Boolean: Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges.
• radius: Number: 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: Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing.
• autoDrawDuration: Number: 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: 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: Specify max value
• min: Number: Specify min value, This is useful if you have multiple lines.

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:3000

TODO

• Unit test

Credits

• ddgll

This package is based off QingWei-Li/vue-trend's implementation

License

MIT