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