mirror of
				https://github.com/KevinMidboe/vue-chartjs.git
				synced 2025-10-29 18:00:20 +00:00 
			
		
		
		
	Merge branch 'hotfix/minification'
* hotfix/minification: ⬆️ Update npm version 💎 Release new version v2.3.0 📝 Update README ✨ Add mixins to alias ⬆️ Update dependencies Change mixins exports to be seperate
This commit is contained in:
		
							
								
								
									
										50
									
								
								README.md
									
									
									
									
									
								
							
							
						
						
									
										50
									
								
								README.md
									
									
									
									
									
								
							@@ -100,11 +100,58 @@ However you can simply implement this by your own or use one of the two mixins w
 | 
			
		||||
- `reactiveProp`
 | 
			
		||||
- `reactiveData`
 | 
			
		||||
 | 
			
		||||
Both are included in the `mixins` module.
 | 
			
		||||
 | 
			
		||||
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// MonthlyIncome.js
 | 
			
		||||
import { Line, reactiveProp } from 'vue-chartjs'
 | 
			
		||||
import { Line, mixins } from 'vue-chartjs'
 | 
			
		||||
 | 
			
		||||
export default Line.extend({
 | 
			
		||||
  mixins: [mixins.reactiveProp],
 | 
			
		||||
  props: ["chartData", "options"],
 | 
			
		||||
  mounted () {
 | 
			
		||||
    this.renderChart(this.chartData, this.options)
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
### Mixins module
 | 
			
		||||
The `mixins` module is included in the `VueCharts` module and as a seperate module.
 | 
			
		||||
Some ways to import them:
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// Load complete module with all charts
 | 
			
		||||
import VueCharts from 'vue-chartjs'
 | 
			
		||||
 | 
			
		||||
export default VueCharts.Line.extend({
 | 
			
		||||
  mixins: [VueCharts.mixins.reactiveProp],
 | 
			
		||||
  props: ["chartData", "options"],
 | 
			
		||||
  mounted () {
 | 
			
		||||
    this.renderChart(this.chartData, this.options)
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// Load speperate modules
 | 
			
		||||
import { Line, mixins } from 'vue-chartjs'
 | 
			
		||||
 | 
			
		||||
export default Line.extend({
 | 
			
		||||
  mixins: [mixins.reactiveProp],
 | 
			
		||||
  props: ["chartData", "options"],
 | 
			
		||||
  mounted () {
 | 
			
		||||
    this.renderChart(this.chartData, this.options)
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
```javascript
 | 
			
		||||
// Load speperate modules with destructure assign
 | 
			
		||||
import { Line, mixins } from 'vue-chartjs'
 | 
			
		||||
const { reactiveProp } = mixins
 | 
			
		||||
 | 
			
		||||
export default Line.extend({
 | 
			
		||||
  mixins: [reactiveProp],
 | 
			
		||||
@@ -113,7 +160,6 @@ export default Line.extend({
 | 
			
		||||
    this.renderChart(this.chartData, this.options)
 | 
			
		||||
  }
 | 
			
		||||
})
 | 
			
		||||
 | 
			
		||||
```
 | 
			
		||||
 | 
			
		||||
## Available Charts
 | 
			
		||||
 
 | 
			
		||||
@@ -16,8 +16,9 @@ module.exports = {
 | 
			
		||||
    extensions: ['', '.js', '.vue'],
 | 
			
		||||
    fallback: [path.join(__dirname, '../node_modules')],
 | 
			
		||||
    alias: {
 | 
			
		||||
      'vue': 'vue/dist/vue.js',
 | 
			
		||||
      'vue': 'vue/dist/vue.common.js',
 | 
			
		||||
      'src': path.resolve(__dirname, '../src'),
 | 
			
		||||
      'mixins': path.resolve(__dirname, '../src/mixins'),
 | 
			
		||||
      'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,9 @@
 | 
			
		||||
const webpack = require('webpack')
 | 
			
		||||
const base = require('./webpack.base.conf')
 | 
			
		||||
const config = require('../config')
 | 
			
		||||
var env = process.env.NODE_ENV === 'testing'
 | 
			
		||||
  ? require('../config/test.env')
 | 
			
		||||
  : config.build.env
 | 
			
		||||
 | 
			
		||||
base.entry = {
 | 
			
		||||
  lib: './src/index.js'
 | 
			
		||||
@@ -19,9 +22,7 @@ var webpackConfig = Object.assign({}, base)
 | 
			
		||||
webpackConfig.devtool = '#source-map'
 | 
			
		||||
webpackConfig.plugins = (webpackConfig.plugins || []).concat([
 | 
			
		||||
  new webpack.DefinePlugin({
 | 
			
		||||
    'process.env': {
 | 
			
		||||
      NODE_ENV: '"production"'
 | 
			
		||||
    }
 | 
			
		||||
    'process.env.NODE_ENV': env
 | 
			
		||||
  }),
 | 
			
		||||
  new webpack.optimize.UglifyJsPlugin({
 | 
			
		||||
    compress: { warnings: false }
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										34
									
								
								dist/vue-chartjs.js
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										34
									
								
								dist/vue-chartjs.js
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
							
								
								
									
										2
									
								
								dist/vue-chartjs.js.map
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										2
									
								
								dist/vue-chartjs.js.map
									
									
									
									
										vendored
									
									
								
							
										
											
												File diff suppressed because one or more lines are too long
											
										
									
								
							
							
								
								
									
										22
									
								
								package.json
									
									
									
									
									
								
							
							
						
						
									
										22
									
								
								package.json
									
									
									
									
									
								
							@@ -1,7 +1,7 @@
 | 
			
		||||
{
 | 
			
		||||
  "name": "vue-chartjs",
 | 
			
		||||
  "version": "2.2.1",
 | 
			
		||||
  "description": "Vue wrapper for chart.js",
 | 
			
		||||
  "version": "2.3.0",
 | 
			
		||||
  "description": "vue.js wrapper for chart.js",
 | 
			
		||||
  "author": "Jakub Juszczak <jakub@nextindex.de>",
 | 
			
		||||
  "repository": {
 | 
			
		||||
    "type": "git",
 | 
			
		||||
@@ -26,8 +26,8 @@
 | 
			
		||||
  },
 | 
			
		||||
  "dependencies": {
 | 
			
		||||
    "babel-runtime": "^6.11.6",
 | 
			
		||||
    "chart.js": "^2.2.1",
 | 
			
		||||
    "vue": "^2.0.1"
 | 
			
		||||
    "chart.js": "^2.4.0",
 | 
			
		||||
    "vue": "^2.1.6"
 | 
			
		||||
  },
 | 
			
		||||
  "devDependencies": {
 | 
			
		||||
    "babel-core": "^6.10.4",
 | 
			
		||||
@@ -38,14 +38,14 @@
 | 
			
		||||
    "chai": "^3.5.0",
 | 
			
		||||
    "chromedriver": "^2.21.2",
 | 
			
		||||
    "connect-history-api-fallback": "^1.1.0",
 | 
			
		||||
    "cross-spawn": "^4.0.2",
 | 
			
		||||
    "css-loader": "^0.25.0",
 | 
			
		||||
    "cross-spawn": "^5.0.1",
 | 
			
		||||
    "css-loader": "^0.26.1",
 | 
			
		||||
    "eslint": "^3.7.1",
 | 
			
		||||
    "eslint-config-standard": "^6.2.0",
 | 
			
		||||
    "eslint-friendly-formatter": "^2.0.5",
 | 
			
		||||
    "eslint-loader": "^1.3.0",
 | 
			
		||||
    "eslint-plugin-html": "^1.3.0",
 | 
			
		||||
    "eslint-plugin-promise": "^2.0.1",
 | 
			
		||||
    "eslint-plugin-promise": "^3.4.0",
 | 
			
		||||
    "eslint-plugin-standard": "^2.0.1",
 | 
			
		||||
    "eventsource-polyfill": "^0.9.6",
 | 
			
		||||
    "express": "^4.13.3",
 | 
			
		||||
@@ -54,7 +54,7 @@
 | 
			
		||||
    "function-bind": "^1.0.2",
 | 
			
		||||
    "html-webpack-plugin": "^2.8.1",
 | 
			
		||||
    "http-proxy-middleware": "^0.17.2",
 | 
			
		||||
    "inject-loader": "^2.0.1",
 | 
			
		||||
    "inject-loader": "^3.0.0-beta2",
 | 
			
		||||
    "isparta-loader": "^2.0.0",
 | 
			
		||||
    "jasmine-core": "^2.5.2",
 | 
			
		||||
    "json-loader": "^0.5.4",
 | 
			
		||||
@@ -73,18 +73,18 @@
 | 
			
		||||
    "nightwatch": "^0.9.8",
 | 
			
		||||
    "ora": "^0.3.0",
 | 
			
		||||
    "phantomjs-prebuilt": "^2.1.13",
 | 
			
		||||
    "selenium-server": "^2.53.1",
 | 
			
		||||
    "selenium-server": "^3.0.1",
 | 
			
		||||
    "shelljs": "^0.7.4",
 | 
			
		||||
    "sinon": "^1.17.3",
 | 
			
		||||
    "sinon-chai": "^2.8.0",
 | 
			
		||||
    "url-loader": "^0.5.7",
 | 
			
		||||
    "vue-hot-reload-api": "^2.0.6",
 | 
			
		||||
    "vue-html-loader": "^1.2.3",
 | 
			
		||||
    "vue-loader": "^9.3.0",
 | 
			
		||||
    "vue-loader": "^10.0.2",
 | 
			
		||||
    "vue-style-loader": "^1.0.0",
 | 
			
		||||
    "webpack": "^1.13.2",
 | 
			
		||||
    "webpack-dev-middleware": "^1.4.0",
 | 
			
		||||
    "webpack-hot-middleware": "^2.6.0",
 | 
			
		||||
    "webpack-merge": "^0.14.1"
 | 
			
		||||
    "webpack-merge": "^1.1.1"
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										20
									
								
								src/index.js
									
									
									
									
									
								
							
							
						
						
									
										20
									
								
								src/index.js
									
									
									
									
									
								
							@@ -5,8 +5,7 @@ import Pie from './BaseCharts/Pie'
 | 
			
		||||
import PolarArea from './BaseCharts/PolarArea'
 | 
			
		||||
import Radar from './BaseCharts/Radar'
 | 
			
		||||
import Bubble from './BaseCharts/Bubble'
 | 
			
		||||
import reactiveProp from './mixins/reactiveProp'
 | 
			
		||||
import reactiveData from './mixins/reactiveData'
 | 
			
		||||
import mixins from './mixins/index.js'
 | 
			
		||||
 | 
			
		||||
const VueCharts = {
 | 
			
		||||
  Bar,
 | 
			
		||||
@@ -16,8 +15,19 @@ const VueCharts = {
 | 
			
		||||
  PolarArea,
 | 
			
		||||
  Radar,
 | 
			
		||||
  Bubble,
 | 
			
		||||
  reactiveProp,
 | 
			
		||||
  reactiveData
 | 
			
		||||
  mixins
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
module.exports = VueCharts
 | 
			
		||||
export default VueCharts
 | 
			
		||||
 | 
			
		||||
export {
 | 
			
		||||
  VueCharts,
 | 
			
		||||
  Bar,
 | 
			
		||||
  Doughnut,
 | 
			
		||||
  Line,
 | 
			
		||||
  Pie,
 | 
			
		||||
  PolarArea,
 | 
			
		||||
  Radar,
 | 
			
		||||
  Bubble,
 | 
			
		||||
  mixins
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										7
									
								
								src/mixins/index.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										7
									
								
								src/mixins/index.js
									
									
									
									
									
										Normal file
									
								
							@@ -0,0 +1,7 @@
 | 
			
		||||
import reactiveData from './reactiveData.js'
 | 
			
		||||
import reactiveProp from './reactiveProp.js'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  reactiveData,
 | 
			
		||||
  reactiveProp
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user