GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → QingWei-Li → Vue Trend

QingWei-Li / Vue Trend

Licence: mit
🌈 Simple, elegant spark lines for Vue.js

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

vuevue-components

Projects that are alternatives of or similar to Vue Trend

Clair
A design system including principles, Vue components and resources
Stars: ✭ 30 (-97.28%)
Mutual labels:  vue-components
Nly Adminlte Vue
vuejs2 AdminLte3 template more than 50 components and 10 directives.such as collapse ,sidebar,container,infobox,breadcrumb,card,grid,dropdown,toast,navbar,timeline,icon,progress
Stars: ✭ 44 (-96.01%)
Mutual labels:  vue-components
Vuestic Admin
Free and Beautiful Vue 3 Admin Template
Stars: ✭ 8,398 (+662.07%)
Mutual labels:  vue-components
Vue Flip
A Vue.js component to flip elements.
Stars: ✭ 37 (-96.64%)
Mutual labels:  vue-components
Language Vue Component
Adds syntax highlighting to Vue Component files in Atom
Stars: ✭ 39 (-96.46%)
Mutual labels:  vue-components
Vue Qr Reader
Vue component to scan QR codes
Stars: ✭ 46 (-95.83%)
Mutual labels:  vue-components
Semantic Ui Vue
Semantic UI integration for Vue
Stars: ✭ 914 (-17.06%)
Mutual labels:  vue-components
Vue Aplayer
🍰 Easy-to-use music player for Vue 2.x
Stars: ✭ 1,087 (-1.36%)
Mutual labels:  vue-components
Vuescroll
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.
Stars: ✭ 1,016 (-7.8%)
Mutual labels:  vue-components
Pure Vue Chart
Simple and lightweight vue chart component without using chart library dependencies
Stars: ✭ 50 (-95.46%)
Mutual labels:  vue-components
Vue Flexboxgrid
Vue components made with Flexboxgrid
Stars: ✭ 37 (-96.64%)
Mutual labels:  vue-components
Vue Emoji
An emoji component for vue2.0
Stars: ✭ 39 (-96.46%)
Mutual labels:  vue-components
Vue Lottie
Render After Effects animations on Vue based on Bodymovin
Stars: ✭ 1,037 (-5.9%)
Mutual labels:  vue-components
Vue Share Buttons
🔗A set of social buttons for Vue.js
Stars: ✭ 34 (-96.91%)
Mutual labels:  vue-components
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (-2.81%)
Mutual labels:  vue-components
Vuetify
🐉 Material Component Framework for Vue
Stars: ✭ 33,085 (+2902.27%)
Mutual labels:  vue-components
Vue Meeting Selector
This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
Stars: ✭ 44 (-96.01%)
Mutual labels:  vue-components
Primevue
The Most Complete Vue UI Component Library
Stars: ✭ 1,085 (-1.54%)
Mutual labels:  vue-components
Vuex Flash
VueJs Flash Message Component within Vuex
Stars: ✭ 54 (-95.1%)
Mutual labels:  vue-components
Vue Image Loader
Vue progressive image loader plugin like Medium
Stars: ✭ 47 (-95.74%)
Mutual labels:  vue-components
View All Similar Projects ➔

🔥🔥🔥

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

🔥🔥🔥

Vue Trend

Vue Trend

🌈 Simple, elegant spark lines for Vue.js


npm vue

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].