JarCasting
JarCasting JarCasting

vue-morris

WebJar for vue-morris

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

vue-morris
Last Version

Last Version

0.0.13
Release Date

Release Date
Type

Type

jar
Description

Description

vue-morris
WebJar for vue-morris
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/bbonnin/vue-morris

Download vue-morris

Filename Size
vue-morris-0.0.13.pom
vue-morris-0.0.13.jar 245 KB
vue-morris-0.0.13-sources.jar 22 bytes
vue-morris-0.0.13-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vue-morris/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vue-morris</artifactId>
    <version>0.0.13</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/vue-morris/
implementation 'org.webjars.npm:vue-morris:0.0.13'
// https://jarcasting.com/artifacts/org.webjars.npm/vue-morris/
implementation ("org.webjars.npm:vue-morris:0.0.13")
'org.webjars.npm:vue-morris:jar:0.0.13'
<dependency org="org.webjars.npm" name="vue-morris" rev="0.0.13">
  <artifact name="vue-morris" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='vue-morris', version='0.0.13')
)
libraryDependencies += "org.webjars.npm" % "vue-morris" % "0.0.13"
[org.webjars.npm/vue-morris "0.0.13"]

Dependencies

compile (5)

Group / Artifact Type Version
org.webjars.npm : jquery jar [2.2.4]
org.webjars.npm : babel-runtime jar [6.0.0,7)
org.webjars.npm : morris.js jar [0.5.0,0.6)
org.webjars.npm : raphael jar [2.2.7,3)
org.webjars.npm : vue jar [2.1.0,3)

Project Modules

There are no modules declared in this project.

vue-morris

Vue.js components wrapping Morris.js lib

See http://morrisjs.github.io/morris.js/ for documentation

Depends on Vue.js v2.1.0+

Install

Use npm

npm install vue-morris --save

Do not forget to declare jQuery in your package.json and, if you are using Webpack, you should have something like that in your webpack.config.js

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'jquery': 'jquery/src/jquery.js'
    }
  },

Examples

For a complete example, see files in examples directory or the project: https://github.com/bbonnin/vue-morris-example.

  • Import the component
// Do not forget to import raphael
import Raphael from 'raphael/raphael'
global.Raphael = Raphael

import Vue from 'vue'
import { DonutChart } from 'vue-morris'

new Vue({
  el: '#app',

  data: {
    donutData: [
      { label: 'Red', value: 300 },
      { label: 'Blue', value: 50 },
      { label: 'Yellow', value: 100 }
    ],

    components: {
    DonutChart, BarChart, LineChart, AreaChart
  }
})
  • Use the component in html
<donut-chart 
  id="donut" 
  :data="donutData" 
  colors='[ "#FF6384", "#36A2EB", "#FFCE56" ]' 
  resize="true">
</donut-chart>

  • Bar chart bar chart

  • Line chart line chart

  • Area chart area chart

  • Donut chart donut chart

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Versions

Version
0.0.13