KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Extract identical code into a function

Browse Source
This commit is contained in:
Nick Nissen
2018-01-31 07:47:09 +01:00
parent b80b07efd8
commit 96adf9eab3
22 changed files with 126 additions and 739 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
src/BaseCharts.js Normal file
View File

@@ -0,0 +1,104 @@
import Chart from 'chart.js'
function generateChart (chartId, chartType) {
return {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: chartId,
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: chartType,
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}
}
export const Bar = generateChart('bar-chart', 'bar')
export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
export const Doughnut = generateChart('doughnut-chart', 'doughnut')
export const Line = generateChart('line-chart', 'line')
export const Pie = generateChart('pie-chart', 'pie')
export const PolarArea = generateChart('polar-chart', 'polarArea')
export const Radar = generateChart('radar-chart', 'radar')
export const Bubble = generateChart('bubble-chart', 'bubble')
export const Scatter = generateChart('scatter-chart', 'scatter')
export default {
Bar,
HorizontalBar,
Doughnut,
Line,
Pie,
PolarArea,
Radar,
Bubble,
Scatter
}

78
src/BaseCharts/Bar.js
View File

@@ -1,78 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'bar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'bar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Bubble.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'bubble-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'bubble',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

81
src/BaseCharts/Doughnut.js
View File

@@ -1,81 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'doughnut-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'doughnut',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/HorizontalBar.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'horizontalbar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'horizontalBar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Line.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'line-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'line',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Pie.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'pie-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'pie',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/PolarArea.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'polar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'polarArea',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Radar.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'radar-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'radar',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

80
src/BaseCharts/Scatter.js
View File

@@ -1,80 +0,0 @@
import Chart from 'chart.js'
export default {
render: function (createElement) {
return createElement(
'div', {
style: this.styles,
class: this.cssClasses
},
[
createElement(
'canvas', {
attrs: {
id: this.chartId,
width: this.width,
height: this.height
},
ref: 'canvas'
}
)
]
)
},
props: {
chartId: {
default: 'scatter-chart',
type: String
},
width: {
default: 400,
type: Number
},
height: {
default: 400,
type: Number
},
cssClasses: {
type: String,
default: ''
},
styles: {
type: Object
},
plugins: {
type: Array,
default () {
return []
}
}
},
data () {
return {
_chart: null,
_plugins: this.plugins
}
},
methods: {
addPlugin (plugin) {
this.$data._plugins.push(plugin)
},
renderChart (data, options) {
this.$data._chart = new Chart(
this.$refs.canvas.getContext('2d'), {
type: 'scatter',
data: data,
options: options,
plugins: this.$data._plugins
}
)
}
},
beforeDestroy () {
if (this.$data._chart) {
this.$data._chart.destroy()
}
}
}

2
src/examples/BarExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar' import { Bar } from '../BaseCharts'
export default { export default {
extends: Bar, extends: Bar,

2
src/examples/BubbleExample.js
View File

@@ -1,4 +1,4 @@
import Bubble from '../BaseCharts/Bubble' import { Bubble } from '../BaseCharts'
export default { export default {
extends: Bubble, extends: Bubble,

2
src/examples/DoughnutExample.js
View File

@@ -1,4 +1,4 @@
import Doughnut from '../BaseCharts/Doughnut' import { Doughnut } from '../BaseCharts'
export default { export default {
extends: Doughnut, extends: Doughnut,

2
src/examples/HorizontalBarExample.js
View File

@@ -1,4 +1,4 @@
import HorizontalBar from '../BaseCharts/HorizontalBar' import { HorizontalBar } from '../BaseCharts'
export default { export default {
extends: HorizontalBar, extends: HorizontalBar,

2
src/examples/LineExample.js
View File

@@ -1,4 +1,4 @@
import Line from '../BaseCharts/Line' import { Line } from '../BaseCharts'
export default { export default {
extends: Line, extends: Line,

2
src/examples/PieExample.js
View File

@@ -1,4 +1,4 @@
import Pie from '../BaseCharts/Pie' import { Pie } from '../BaseCharts'
export default { export default {
extends: Pie, extends: Pie,

2
src/examples/PolarAreaExample.js
View File

@@ -1,4 +1,4 @@
import PolarArea from '../BaseCharts/PolarArea' import { PolarArea } from '../BaseCharts'
export default { export default {
extends: PolarArea, extends: PolarArea,

2
src/examples/RadarExample.js
View File

@@ -1,4 +1,4 @@
import Radar from '../BaseCharts/Radar' import { Radar } from '../BaseCharts'
export default { export default {
extends: Radar, extends: Radar,

2
src/examples/ReactiveExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar' import { Bar } from '../BaseCharts'
import reactiveData from '../mixins/reactiveData' import reactiveData from '../mixins/reactiveData'
export default { export default {

2
src/examples/ReactivePropExample.js
View File

@@ -1,4 +1,4 @@
import Bar from '../BaseCharts/Bar' import { Bar } from '../BaseCharts'
import reactiveProp from '../mixins/reactiveProp' import reactiveProp from '../mixins/reactiveProp'
export default { export default {

2
src/examples/ScatterExample.js
View File

@@ -1,4 +1,4 @@
import Scatter from '../BaseCharts/Scatter' import { Scatter } from '../BaseCharts'
export default { export default {
extends: Scatter, extends: Scatter,

20
src/index.js
View File

@@ -1,14 +1,16 @@
import Bar from './BaseCharts/Bar'
import HorizontalBar from './BaseCharts/HorizontalBar'
import Doughnut from './BaseCharts/Doughnut'
import Line from './BaseCharts/Line'
import Pie from './BaseCharts/Pie'
import PolarArea from './BaseCharts/PolarArea'
import Radar from './BaseCharts/Radar'
import Bubble from './BaseCharts/Bubble'
import Scatter from './BaseCharts/Scatter'
import mixins from './mixins/index.js' import mixins from './mixins/index.js'
import npmCfg from '../package.json' import npmCfg from '../package.json'
import {
Bar,
HorizontalBar,
Doughnut,
Line,
Pie,
PolarArea,
Radar,
Bubble,
Scatter
} from './BaseCharts'
const VueCharts = { const VueCharts = {
version: npmCfg.version, version: npmCfg.version,