From 6675cb031276579bca74fd3bc2e767b76fa6e068 Mon Sep 17 00:00:00 2001 From: Dan Onoshko Date: Thu, 1 Dec 2022 16:30:07 +0400 Subject: [PATCH] feat: fallthrough props to canvas (#955) fallthrough non-chart props to canvas, chart props were renamed BREAKING CHANGE: div wrapper was removed, `chartData` prop was renamed to `data`, `chartOptions` prop was renamed to `options`, `generateChart` was renamed to `createTypedChart` --- .github/ISSUE_TEMPLATE/bug-report.yml | 2 +- sandboxes/bar/index.html | 4 +- sandboxes/bar/{index.js => index.ts} | 0 sandboxes/bar/package.json | 9 +- sandboxes/bar/src/App.vue | 23 ++- sandboxes/bar/src/chartConfig.ts | 28 ++++ sandboxes/bar/src/components/barChart.ts | 91 ------------ sandboxes/bar/vite.config.js | 6 + sandboxes/bubble/index.html | 4 +- sandboxes/bubble/{index.js => index.ts} | 0 sandboxes/bubble/package.json | 9 +- sandboxes/bubble/src/App.vue | 21 ++- sandboxes/bubble/src/chartConfig.ts | 51 +++++++ .../bubble/src/components/bubbleChart.ts | 113 --------------- sandboxes/bubble/vite.config.js | 6 + sandboxes/custom/index.html | 4 +- sandboxes/custom/{index.js => index.ts} | 0 sandboxes/custom/package.json | 9 +- sandboxes/custom/src/App.vue | 32 ++++- sandboxes/custom/src/chartConfig.ts | 18 +++ .../src/components/LineWithLineChart.ts | 31 ++++ .../custom/src/components/customChart.ts | 119 --------------- sandboxes/custom/vite.config.js | 6 + sandboxes/doughnut/index.html | 4 +- sandboxes/doughnut/{index.js => index.ts} | 0 sandboxes/doughnut/package.json | 9 +- sandboxes/doughnut/src/App.vue | 15 +- sandboxes/doughnut/src/chartConfig.ts | 14 ++ .../doughnut/src/components/doughnutChart.ts | 75 ---------- sandboxes/doughnut/vite.config.js | 6 + sandboxes/line/index.html | 4 +- sandboxes/line/{index.js => index.ts} | 0 sandboxes/line/package.json | 9 +- sandboxes/line/src/App.vue | 32 ++++- sandboxes/line/src/chartConfig.ts | 15 ++ sandboxes/line/src/components/lineChart.ts | 86 ----------- sandboxes/line/vite.config.js | 6 + sandboxes/pie/index.html | 4 +- sandboxes/pie/{index.js => index.ts} | 0 sandboxes/pie/package.json | 9 +- sandboxes/pie/src/App.vue | 15 +- sandboxes/pie/src/chartConfig.ts | 14 ++ sandboxes/pie/src/components/pieChart.ts | 75 ---------- sandboxes/pie/vite.config.js | 6 + sandboxes/polar-area/index.html | 4 +- sandboxes/polar-area/{index.js => index.ts} | 0 sandboxes/polar-area/package.json | 5 +- sandboxes/polar-area/src/App.vue | 21 ++- sandboxes/polar-area/src/chartConfig.ts | 36 +++++ .../src/components/polarAreaChart.ts | 97 ------------- sandboxes/polar-area/vite.config.js | 6 + sandboxes/radar/index.html | 4 +- sandboxes/radar/{index.js => index.ts} | 0 sandboxes/radar/package.json | 9 +- sandboxes/radar/src/App.vue | 30 +++- sandboxes/radar/src/chartConfig.ts | 38 +++++ sandboxes/radar/src/components/radarChart.ts | 107 -------------- sandboxes/radar/vite.config.js | 6 + sandboxes/reactive-prop/index.html | 11 -- sandboxes/reactive-prop/package.json | 12 -- sandboxes/reactive-prop/src/App.vue | 14 -- .../src/components/reactivePropChart.ts | 73 ---------- .../src/components/reactivePropPage.ts | 83 ----------- sandboxes/reactive/index.html | 4 +- .../index.js => reactive/index.ts} | 0 sandboxes/reactive/package.json | 9 +- sandboxes/reactive/src/App.vue | 36 +++-- sandboxes/reactive/src/chartConfig.ts | 45 ++++++ .../reactive/src/components/reactiveChart.ts | 121 ---------------- sandboxes/reactive/vite.config.js | 6 + sandboxes/scatter/index.html | 4 +- sandboxes/scatter/index.js | 4 - .../{reactive/index.js => scatter/index.ts} | 0 sandboxes/scatter/package.json | 9 +- sandboxes/scatter/src/App.vue | 22 ++- sandboxes/scatter/src/chartConfig.ts | 65 +++++++++ .../scatter/src/components/scatterChart.ts | 136 ------------------ sandboxes/scatter/vite.config.js | 6 + src/BaseCharts.ts | 117 +++++---------- src/types.ts | 11 +- src/utils.ts | 6 +- stories/bar.stories.ts | 28 ++-- stories/bubble.stories.ts | 28 ++-- stories/custom.stories.ts | 28 ++-- stories/doughnut.stories.ts | 28 ++-- stories/line.stories.ts | 28 ++-- stories/pie.stories.ts | 28 ++-- stories/polarArea.stories.ts | 28 ++-- stories/radar.stories.ts | 28 ++-- stories/reactive.stories.ts | 45 ++++-- stories/reactiveProp.stories.ts | 77 ---------- stories/scatter.stories.ts | 28 ++-- test/Bar.spec.ts | 42 +++--- test/Bubble.spec.ts | 43 +++--- test/CustomChart.spec.ts | 17 --- test/Doughnut.spec.ts | 43 +++--- test/Line.spec.ts | 42 +++--- test/Pie.spec.ts | 42 +++--- test/PolarArea.spec.ts | 45 +++--- test/Radar.spec.ts | 42 +++--- test/Reactive.spec.ts | 17 --- test/ReactiveProp.spec.ts | 20 --- test/Scatter.spec.ts | 43 +++--- test/examples/BarChart.ts | 91 ------------ test/examples/BubbleChart.ts | 113 --------------- test/examples/CustomChart.ts | 119 --------------- test/examples/DoughnutChart.ts | 75 ---------- test/examples/LineChart.ts | 76 ---------- test/examples/PieChart.ts | 75 ---------- test/examples/PolarAreaChart.ts | 97 ------------- test/examples/RadarChart.ts | 99 ------------- test/examples/ReactiveChart.ts | 121 ---------------- test/examples/ReactivePropChart.ts | 73 ---------- test/examples/ScatterChart.ts | 126 ---------------- ...{ChartsTypes.test-d.ts => types.test-d.ts} | 20 +-- website/src/examples/index.md | 22 +-- 116 files changed, 1110 insertions(+), 2908 deletions(-) rename sandboxes/bar/{index.js => index.ts} (100%) create mode 100644 sandboxes/bar/src/chartConfig.ts delete mode 100644 sandboxes/bar/src/components/barChart.ts create mode 100644 sandboxes/bar/vite.config.js rename sandboxes/bubble/{index.js => index.ts} (100%) create mode 100644 sandboxes/bubble/src/chartConfig.ts delete mode 100644 sandboxes/bubble/src/components/bubbleChart.ts create mode 100644 sandboxes/bubble/vite.config.js rename sandboxes/custom/{index.js => index.ts} (100%) create mode 100644 sandboxes/custom/src/chartConfig.ts create mode 100644 sandboxes/custom/src/components/LineWithLineChart.ts delete mode 100644 sandboxes/custom/src/components/customChart.ts create mode 100644 sandboxes/custom/vite.config.js rename sandboxes/doughnut/{index.js => index.ts} (100%) create mode 100644 sandboxes/doughnut/src/chartConfig.ts delete mode 100644 sandboxes/doughnut/src/components/doughnutChart.ts create mode 100644 sandboxes/doughnut/vite.config.js rename sandboxes/line/{index.js => index.ts} (100%) create mode 100644 sandboxes/line/src/chartConfig.ts delete mode 100644 sandboxes/line/src/components/lineChart.ts create mode 100644 sandboxes/line/vite.config.js rename sandboxes/pie/{index.js => index.ts} (100%) create mode 100644 sandboxes/pie/src/chartConfig.ts delete mode 100644 sandboxes/pie/src/components/pieChart.ts create mode 100644 sandboxes/pie/vite.config.js rename sandboxes/polar-area/{index.js => index.ts} (100%) create mode 100644 sandboxes/polar-area/src/chartConfig.ts delete mode 100644 sandboxes/polar-area/src/components/polarAreaChart.ts create mode 100644 sandboxes/polar-area/vite.config.js rename sandboxes/radar/{index.js => index.ts} (100%) create mode 100644 sandboxes/radar/src/chartConfig.ts delete mode 100644 sandboxes/radar/src/components/radarChart.ts create mode 100644 sandboxes/radar/vite.config.js delete mode 100644 sandboxes/reactive-prop/index.html delete mode 100644 sandboxes/reactive-prop/package.json delete mode 100644 sandboxes/reactive-prop/src/App.vue delete mode 100644 sandboxes/reactive-prop/src/components/reactivePropChart.ts delete mode 100644 sandboxes/reactive-prop/src/components/reactivePropPage.ts rename sandboxes/{reactive-prop/index.js => reactive/index.ts} (100%) create mode 100644 sandboxes/reactive/src/chartConfig.ts delete mode 100644 sandboxes/reactive/src/components/reactiveChart.ts create mode 100644 sandboxes/reactive/vite.config.js delete mode 100644 sandboxes/scatter/index.js rename sandboxes/{reactive/index.js => scatter/index.ts} (100%) create mode 100644 sandboxes/scatter/src/chartConfig.ts delete mode 100644 sandboxes/scatter/src/components/scatterChart.ts create mode 100644 sandboxes/scatter/vite.config.js delete mode 100644 stories/reactiveProp.stories.ts delete mode 100644 test/CustomChart.spec.ts delete mode 100644 test/Reactive.spec.ts delete mode 100644 test/ReactiveProp.spec.ts delete mode 100644 test/examples/BarChart.ts delete mode 100644 test/examples/BubbleChart.ts delete mode 100644 test/examples/CustomChart.ts delete mode 100644 test/examples/DoughnutChart.ts delete mode 100644 test/examples/LineChart.ts delete mode 100644 test/examples/PieChart.ts delete mode 100644 test/examples/PolarAreaChart.ts delete mode 100644 test/examples/RadarChart.ts delete mode 100644 test/examples/ReactiveChart.ts delete mode 100644 test/examples/ReactivePropChart.ts delete mode 100644 test/examples/ScatterChart.ts rename test/{ChartsTypes.test-d.ts => types.test-d.ts} (77%) diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml index a48b6430..1d548835 100644 --- a/.github/ISSUE_TEMPLATE/bug-report.yml +++ b/.github/ISSUE_TEMPLATE/bug-report.yml @@ -30,7 +30,7 @@ body: label: Reproduction description: | Please provide issue reproduction. - You can give a link to a repository with the reproduction or make a fork of [this sandbox for Vue3](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/bar) or [this sandbox for Vue2](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bar) and reproduce the issue there. + You can give a link to a repository with the reproduction or make a fork of [this sandbox for Vue3](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/bar) or [this sandbox for Vue2](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/legacy/sandboxes/bar) and reproduce the issue there. validations: required: true diff --git a/sandboxes/bar/index.html b/sandboxes/bar/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/bar/index.html +++ b/sandboxes/bar/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/bar/index.js b/sandboxes/bar/index.ts similarity index 100% rename from sandboxes/bar/index.js rename to sandboxes/bar/index.ts diff --git a/sandboxes/bar/package.json b/sandboxes/bar/package.json index 04224c6f..17f5a5dc 100644 --- a/sandboxes/bar/package.json +++ b/sandboxes/bar/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-bar-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/bar/src/App.vue b/sandboxes/bar/src/App.vue index c5e1c6a4..2cf53cdd 100644 --- a/sandboxes/bar/src/App.vue +++ b/sandboxes/bar/src/App.vue @@ -1,14 +1,29 @@ - diff --git a/sandboxes/bar/src/chartConfig.ts b/sandboxes/bar/src/chartConfig.ts new file mode 100644 index 00000000..514c046d --- /dev/null +++ b/sandboxes/bar/src/chartConfig.ts @@ -0,0 +1,28 @@ +export const data = { + labels: [ + 'January', + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' + ], + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/bar/src/components/barChart.ts b/sandboxes/bar/src/components/barChart.ts deleted file mode 100644 index 0b681094..00000000 --- a/sandboxes/bar/src/components/barChart.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Bar } from 'vue-chartjs' - -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'BarChart', - components: { - Bar - }, - props: { - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bar, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/bar/vite.config.js b/sandboxes/bar/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/bar/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/bubble/index.html b/sandboxes/bubble/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/bubble/index.html +++ b/sandboxes/bubble/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/bubble/index.js b/sandboxes/bubble/index.ts similarity index 100% rename from sandboxes/bubble/index.js rename to sandboxes/bubble/index.ts diff --git a/sandboxes/bubble/package.json b/sandboxes/bubble/package.json index 82719aad..17f5a5dc 100644 --- a/sandboxes/bubble/package.json +++ b/sandboxes/bubble/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-bubble-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/bubble/src/App.vue b/sandboxes/bubble/src/App.vue index 613af078..50693f1b 100644 --- a/sandboxes/bubble/src/App.vue +++ b/sandboxes/bubble/src/App.vue @@ -1,14 +1,27 @@ - diff --git a/sandboxes/bubble/src/chartConfig.ts b/sandboxes/bubble/src/chartConfig.ts new file mode 100644 index 00000000..72d2811f --- /dev/null +++ b/sandboxes/bubble/src/chartConfig.ts @@ -0,0 +1,51 @@ +export const data = { + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [ + { + x: 20, + y: 25, + r: 5 + }, + { + x: 40, + y: 10, + r: 10 + }, + { + x: 30, + y: 22, + r: 30 + } + ] + }, + { + label: 'Data Two', + backgroundColor: '#7C8CF8', + data: [ + { + x: 10, + y: 30, + r: 15 + }, + { + x: 20, + y: 20, + r: 10 + }, + { + x: 15, + y: 8, + r: 30 + } + ] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/bubble/src/components/bubbleChart.ts b/sandboxes/bubble/src/components/bubbleChart.ts deleted file mode 100644 index 155e0818..00000000 --- a/sandboxes/bubble/src/components/bubbleChart.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Bubble } from 'vue-chartjs' - -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - PointElement, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale) - -export default defineComponent({ - name: 'BubbleChart', - components: { - Bubble - }, - props: { - chartId: { - type: String, - default: 'bubble-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - { - x: 20, - y: 25, - r: 5 - }, - { - x: 40, - y: 10, - r: 10 - }, - { - x: 30, - y: 22, - r: 30 - } - ] - }, - { - label: 'Data Two', - backgroundColor: '#7C8CF8', - data: [ - { - x: 10, - y: 30, - r: 15 - }, - { - x: 20, - y: 20, - r: 10 - }, - { - x: 15, - y: 8, - r: 30 - } - ] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bubble, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/bubble/vite.config.js b/sandboxes/bubble/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/bubble/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/custom/index.html b/sandboxes/custom/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/custom/index.html +++ b/sandboxes/custom/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/custom/index.js b/sandboxes/custom/index.ts similarity index 100% rename from sandboxes/custom/index.js rename to sandboxes/custom/index.ts diff --git a/sandboxes/custom/package.json b/sandboxes/custom/package.json index da9e3c2e..17f5a5dc 100644 --- a/sandboxes/custom/package.json +++ b/sandboxes/custom/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-custom-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/custom/src/App.vue b/sandboxes/custom/src/App.vue index 89ecd81d..a9007583 100644 --- a/sandboxes/custom/src/App.vue +++ b/sandboxes/custom/src/App.vue @@ -1,14 +1,38 @@ - diff --git a/sandboxes/custom/src/chartConfig.ts b/sandboxes/custom/src/chartConfig.ts new file mode 100644 index 00000000..9bdbc829 --- /dev/null +++ b/sandboxes/custom/src/chartConfig.ts @@ -0,0 +1,18 @@ +export const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [40, 39, 10, 40, 39, 80, 40] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false, + tooltips: { + intersect: false + } +} diff --git a/sandboxes/custom/src/components/LineWithLineChart.ts b/sandboxes/custom/src/components/LineWithLineChart.ts new file mode 100644 index 00000000..2401d397 --- /dev/null +++ b/sandboxes/custom/src/components/LineWithLineChart.ts @@ -0,0 +1,31 @@ +import { createTypedChart } from 'vue-chartjs' +import { LineController } from 'chart.js' + +class LineWithLineController extends LineController { + public override draw() { + super.draw() + + console.log(this.chart?.tooltip?.active) + + if (this.chart?.tooltip?.active) { + const ctx = this.chart.ctx + const x = this.chart.tooltip.x + const topY = this.chart.scales['y-axis-0'].top + const bottomY = this.chart.scales['y-axis-0'].bottom + + // draw line + ctx.save() + ctx.beginPath() + ctx.moveTo(x, topY) + ctx.lineTo(x, bottomY) + ctx.lineWidth = 2 + ctx.strokeStyle = '#07C' + ctx.stroke() + ctx.restore() + } + } +} + +const LineWithLineChart = createTypedChart('line', LineWithLineController) + +export default LineWithLineChart diff --git a/sandboxes/custom/src/components/customChart.ts b/sandboxes/custom/src/components/customChart.ts deleted file mode 100644 index b24d3b78..00000000 --- a/sandboxes/custom/src/components/customChart.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { generateChart } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineController, - LineElement, - PointElement, - CategoryScale, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register( - Title, - Tooltip, - Legend, - LineElement, - PointElement, - CategoryScale, - LinearScale -) - -class LineWithLineController extends LineController { - public override draw() { - super.draw() - - if (this.chart?.tooltip?.active) { - const ctx = this.chart.ctx - const x = this.chart.tooltip.x - const topY = this.chart.scales['y-axis-0'].top - const bottomY = this.chart.scales['y-axis-0'].bottom - - // draw line - ctx.save() - ctx.beginPath() - ctx.moveTo(x, topY) - ctx.lineTo(x, bottomY) - ctx.lineWidth = 2 - ctx.strokeStyle = '#07C' - ctx.stroke() - ctx.restore() - } - } -} - -const LineWithLine = generateChart( - 'line-with-chart', - 'line', - LineWithLineController -) - -export default defineComponent({ - name: 'CustomChart', - components: { - LineWithLine - }, - props: { - chartId: { - type: String, - default: '-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 39, 10, 40, 39, 80, 40] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false, - tooltips: { - intersect: false - } - } - - return () => - h(LineWithLine, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/custom/vite.config.js b/sandboxes/custom/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/custom/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/doughnut/index.html b/sandboxes/doughnut/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/doughnut/index.html +++ b/sandboxes/doughnut/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/doughnut/index.js b/sandboxes/doughnut/index.ts similarity index 100% rename from sandboxes/doughnut/index.js rename to sandboxes/doughnut/index.ts diff --git a/sandboxes/doughnut/package.json b/sandboxes/doughnut/package.json index dac9bc1f..17f5a5dc 100644 --- a/sandboxes/doughnut/package.json +++ b/sandboxes/doughnut/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-doughnut-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/doughnut/src/App.vue b/sandboxes/doughnut/src/App.vue index a22818c9..085fb258 100644 --- a/sandboxes/doughnut/src/App.vue +++ b/sandboxes/doughnut/src/App.vue @@ -1,14 +1,21 @@ - diff --git a/sandboxes/doughnut/src/chartConfig.ts b/sandboxes/doughnut/src/chartConfig.ts new file mode 100644 index 00000000..109fb174 --- /dev/null +++ b/sandboxes/doughnut/src/chartConfig.ts @@ -0,0 +1,14 @@ +export const data = { + labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], + datasets: [ + { + backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], + data: [40, 20, 80, 10] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/doughnut/src/components/doughnutChart.ts b/sandboxes/doughnut/src/components/doughnutChart.ts deleted file mode 100644 index 14a64a47..00000000 --- a/sandboxes/doughnut/src/components/doughnutChart.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Doughnut } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) - -export default defineComponent({ - name: 'DoughnutChart', - components: { - Doughnut - }, - props: { - chartId: { - type: String, - default: 'doughnut-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], - datasets: [ - { - backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], - data: [40, 20, 80, 10] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Doughnut, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/doughnut/vite.config.js b/sandboxes/doughnut/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/doughnut/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/line/index.html b/sandboxes/line/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/line/index.html +++ b/sandboxes/line/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/line/index.js b/sandboxes/line/index.ts similarity index 100% rename from sandboxes/line/index.js rename to sandboxes/line/index.ts diff --git a/sandboxes/line/package.json b/sandboxes/line/package.json index 210dc2d8..17f5a5dc 100644 --- a/sandboxes/line/package.json +++ b/sandboxes/line/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-line-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/line/src/App.vue b/sandboxes/line/src/App.vue index 48ab90a5..692d1574 100644 --- a/sandboxes/line/src/App.vue +++ b/sandboxes/line/src/App.vue @@ -1,14 +1,38 @@ - diff --git a/sandboxes/line/src/chartConfig.ts b/sandboxes/line/src/chartConfig.ts new file mode 100644 index 00000000..f82484ec --- /dev/null +++ b/sandboxes/line/src/chartConfig.ts @@ -0,0 +1,15 @@ +export const data = { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [40, 39, 10, 40, 39, 80, 40] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/line/src/components/lineChart.ts b/sandboxes/line/src/components/lineChart.ts deleted file mode 100644 index 1c5daf1d..00000000 --- a/sandboxes/line/src/components/lineChart.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Line } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineElement, - LinearScale, - PointElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register( - Title, - Tooltip, - Legend, - LineElement, - LinearScale, - PointElement, - CategoryScale -) - -export default defineComponent({ - name: 'LineChart', - components: { - Line - }, - props: { - chartId: { - type: String, - default: 'line-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 39, 10, 40, 39, 80, 40] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Line, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/line/vite.config.js b/sandboxes/line/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/line/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/pie/index.html b/sandboxes/pie/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/pie/index.html +++ b/sandboxes/pie/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/pie/index.js b/sandboxes/pie/index.ts similarity index 100% rename from sandboxes/pie/index.js rename to sandboxes/pie/index.ts diff --git a/sandboxes/pie/package.json b/sandboxes/pie/package.json index c61de281..17f5a5dc 100644 --- a/sandboxes/pie/package.json +++ b/sandboxes/pie/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-pie-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/pie/src/App.vue b/sandboxes/pie/src/App.vue index 4f1f41d7..310c3935 100644 --- a/sandboxes/pie/src/App.vue +++ b/sandboxes/pie/src/App.vue @@ -1,14 +1,21 @@ - diff --git a/sandboxes/pie/src/chartConfig.ts b/sandboxes/pie/src/chartConfig.ts new file mode 100644 index 00000000..109fb174 --- /dev/null +++ b/sandboxes/pie/src/chartConfig.ts @@ -0,0 +1,14 @@ +export const data = { + labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], + datasets: [ + { + backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], + data: [40, 20, 80, 10] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/pie/src/components/pieChart.ts b/sandboxes/pie/src/components/pieChart.ts deleted file mode 100644 index 11e24904..00000000 --- a/sandboxes/pie/src/components/pieChart.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Pie } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) - -export default defineComponent({ - name: 'PieChart', - components: { - Pie - }, - props: { - chartId: { - type: String, - default: 'pie-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], - datasets: [ - { - backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], - data: [40, 20, 80, 10] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Pie, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/pie/vite.config.js b/sandboxes/pie/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/pie/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/polar-area/index.html b/sandboxes/polar-area/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/polar-area/index.html +++ b/sandboxes/polar-area/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/polar-area/index.js b/sandboxes/polar-area/index.ts similarity index 100% rename from sandboxes/polar-area/index.js rename to sandboxes/polar-area/index.ts diff --git a/sandboxes/polar-area/package.json b/sandboxes/polar-area/package.json index 9c70ecdc..f9bc9c2d 100644 --- a/sandboxes/polar-area/package.json +++ b/sandboxes/polar-area/package.json @@ -2,11 +2,12 @@ "name": "vue-chartjs-polar-area-example", "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/polar-area/src/App.vue b/sandboxes/polar-area/src/App.vue index 20e417f9..849663f7 100644 --- a/sandboxes/polar-area/src/App.vue +++ b/sandboxes/polar-area/src/App.vue @@ -1,14 +1,27 @@ - diff --git a/sandboxes/polar-area/src/chartConfig.ts b/sandboxes/polar-area/src/chartConfig.ts new file mode 100644 index 00000000..6544d4c7 --- /dev/null +++ b/sandboxes/polar-area/src/chartConfig.ts @@ -0,0 +1,36 @@ +export const data = { + labels: [ + 'Eating', + 'Drinking', + 'Sleeping', + 'Designing', + 'Coding', + 'Cycling', + 'Running' + ], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + pointBackgroundColor: 'rgba(179,181,198,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(179,181,198,1)', + data: [65, 59, 90, 81, 56, 55, 40] + }, + { + label: 'My Second dataset', + backgroundColor: 'rgba(255,99,132,0.2)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/polar-area/src/components/polarAreaChart.ts b/sandboxes/polar-area/src/components/polarAreaChart.ts deleted file mode 100644 index f1e1a4fc..00000000 --- a/sandboxes/polar-area/src/components/polarAreaChart.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { PolarArea } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - RadialLinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale) - -export default defineComponent({ - name: 'PolarAreaChart', - components: { - PolarArea - }, - props: { - chartId: { - type: String, - default: 'polar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'Eating', - 'Drinking', - 'Sleeping', - 'Designing', - 'Coding', - 'Cycling', - 'Running' - ], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(PolarArea, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/polar-area/vite.config.js b/sandboxes/polar-area/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/polar-area/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/radar/index.html b/sandboxes/radar/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/radar/index.html +++ b/sandboxes/radar/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/radar/index.js b/sandboxes/radar/index.ts similarity index 100% rename from sandboxes/radar/index.js rename to sandboxes/radar/index.ts diff --git a/sandboxes/radar/package.json b/sandboxes/radar/package.json index 840c30e2..17f5a5dc 100644 --- a/sandboxes/radar/package.json +++ b/sandboxes/radar/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-radar-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/radar/src/App.vue b/sandboxes/radar/src/App.vue index a5a2f7e9..2d9516a4 100644 --- a/sandboxes/radar/src/App.vue +++ b/sandboxes/radar/src/App.vue @@ -1,14 +1,36 @@ - diff --git a/sandboxes/radar/src/chartConfig.ts b/sandboxes/radar/src/chartConfig.ts new file mode 100644 index 00000000..f436aadd --- /dev/null +++ b/sandboxes/radar/src/chartConfig.ts @@ -0,0 +1,38 @@ +export const data = { + labels: [ + 'Eating', + 'Drinking', + 'Sleeping', + 'Designing', + 'Coding', + 'Cycling', + 'Running' + ], + datasets: [ + { + label: 'My First dataset', + backgroundColor: 'rgba(179,181,198,0.2)', + borderColor: 'rgba(179,181,198,1)', + pointBackgroundColor: 'rgba(179,181,198,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(179,181,198,1)', + data: [65, 59, 90, 81, 56, 55, 40] + }, + { + label: 'My Second dataset', + backgroundColor: 'rgba(255,99,132,0.2)', + borderColor: 'rgba(255,99,132,1)', + pointBackgroundColor: 'rgba(255,99,132,1)', + pointBorderColor: '#fff', + pointHoverBackgroundColor: '#fff', + pointHoverBorderColor: 'rgba(255,99,132,1)', + data: [28, 48, 40, 19, 96, 27, 100] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/radar/src/components/radarChart.ts b/sandboxes/radar/src/components/radarChart.ts deleted file mode 100644 index 547e55f7..00000000 --- a/sandboxes/radar/src/components/radarChart.ts +++ /dev/null @@ -1,107 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Radar } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - PointElement, - RadialLinearScale, - LineElement, - Plugin -} from 'chart.js' - -ChartJS.register( - Title, - Tooltip, - Legend, - PointElement, - RadialLinearScale, - LineElement -) - -export default defineComponent({ - name: 'RadarChart', - components: { - Radar - }, - props: { - chartId: { - type: String, - default: 'radar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'Eating', - 'Drinking', - 'Sleeping', - 'Designing', - 'Coding', - 'Cycling', - 'Running' - ], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - borderColor: 'rgba(179,181,198,1)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Radar, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/radar/vite.config.js b/sandboxes/radar/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/radar/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/reactive-prop/index.html b/sandboxes/reactive-prop/index.html deleted file mode 100644 index 8968ba00..00000000 --- a/sandboxes/reactive-prop/index.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - Vue ChartJS - - - -
- - diff --git a/sandboxes/reactive-prop/package.json b/sandboxes/reactive-prop/package.json deleted file mode 100644 index de0a3bdc..00000000 --- a/sandboxes/reactive-prop/package.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "vue-chartjs-reactive-prop-example", - "dependencies": { - "chart.js": "^3.8.0", - "typescript": "^4.6.2", - "vue": "^3.2.31", - "vue-chartjs": "^4.0.0" - }, - "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" - } -} diff --git a/sandboxes/reactive-prop/src/App.vue b/sandboxes/reactive-prop/src/App.vue deleted file mode 100644 index 14ebe0ab..00000000 --- a/sandboxes/reactive-prop/src/App.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/sandboxes/reactive-prop/src/components/reactivePropChart.ts b/sandboxes/reactive-prop/src/components/reactivePropChart.ts deleted file mode 100644 index f68467da..00000000 --- a/sandboxes/reactive-prop/src/components/reactivePropChart.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' -import { Bar } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin, - ChartData, - DefaultDataPoint -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'ReactiveChart', - components: { - Bar - }, - props: { - chartData: { - type: Object as PropType< - ChartData<'bar', DefaultDataPoint<'bar'>, unknown> - >, - required: true - }, - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bar, { - chartData: props.chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/reactive-prop/src/components/reactivePropPage.ts b/sandboxes/reactive-prop/src/components/reactivePropPage.ts deleted file mode 100644 index 715ab7d6..00000000 --- a/sandboxes/reactive-prop/src/components/reactivePropPage.ts +++ /dev/null @@ -1,83 +0,0 @@ -import ReactivePropChart from './reactivePropChart' - -import { defineComponent, ref, h, onMounted } from 'vue' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - ChartData -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'ReactiveChart', - components: { - ReactivePropChart - }, - setup() { - const chartData = ref>({ - datasets: [] - }) - - function fillData() { - const updatedChartData = { - labels: [ - 'January' + getRandomInt(), - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt() - ] - } - ] - } - - chartData.value = { ...updatedChartData } - } - - function getRandomInt() { - return Math.floor(Math.random() * (50 - 5 + 1)) + 5 - } - - onMounted(() => { - setInterval(() => { - fillData() - }, 5000) - }) - - return () => - h(ReactivePropChart, { - chartData: chartData.value - }) - } -}) diff --git a/sandboxes/reactive/index.html b/sandboxes/reactive/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/reactive/index.html +++ b/sandboxes/reactive/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/reactive-prop/index.js b/sandboxes/reactive/index.ts similarity index 100% rename from sandboxes/reactive-prop/index.js rename to sandboxes/reactive/index.ts diff --git a/sandboxes/reactive/package.json b/sandboxes/reactive/package.json index b64f363d..17f5a5dc 100644 --- a/sandboxes/reactive/package.json +++ b/sandboxes/reactive/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-reactive-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/reactive/src/App.vue b/sandboxes/reactive/src/App.vue index 314c4961..4dd249e8 100644 --- a/sandboxes/reactive/src/App.vue +++ b/sandboxes/reactive/src/App.vue @@ -1,14 +1,32 @@ - diff --git a/sandboxes/reactive/src/chartConfig.ts b/sandboxes/reactive/src/chartConfig.ts new file mode 100644 index 00000000..4ef68e71 --- /dev/null +++ b/sandboxes/reactive/src/chartConfig.ts @@ -0,0 +1,45 @@ +function getRandomInt() { + return Math.floor(Math.random() * (50 - 5 + 1)) + 5 +} + +export const data = { + labels: [ + 'January' + getRandomInt(), + 'February', + 'March', + 'April', + 'May', + 'June', + 'July', + 'August', + 'September', + 'October', + 'November', + 'December' + ], + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [ + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt(), + getRandomInt() + ] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/reactive/src/components/reactiveChart.ts b/sandboxes/reactive/src/components/reactiveChart.ts deleted file mode 100644 index d170dc2a..00000000 --- a/sandboxes/reactive/src/components/reactiveChart.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { defineComponent, ref, h, onMounted, PropType } from 'vue' -import { Bar } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin, - ChartData -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'ReactiveChart', - components: { - Bar - }, - props: { - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = ref>({ - datasets: [] - }) - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - function fillData() { - const updatedChartData = { - labels: [ - 'January' + getRandomInt(), - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt() - ] - } - ] - } - - chartData.value = { ...updatedChartData } - } - - function getRandomInt() { - return Math.floor(Math.random() * (50 - 5 + 1)) + 5 - } - - onMounted(() => { - setInterval(() => { - fillData() - }, 5000) - }) - - return () => - h(Bar, { - chartData: chartData.value, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/reactive/vite.config.js b/sandboxes/reactive/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/reactive/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/sandboxes/scatter/index.html b/sandboxes/scatter/index.html index 8968ba00..087b841f 100644 --- a/sandboxes/scatter/index.html +++ b/sandboxes/scatter/index.html @@ -2,9 +2,9 @@ - Vue ChartJS + + -
diff --git a/sandboxes/scatter/index.js b/sandboxes/scatter/index.js deleted file mode 100644 index 52c7b68b..00000000 --- a/sandboxes/scatter/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { createApp } from 'vue' -import App from './src/App.vue' - -createApp(App).mount('#app') diff --git a/sandboxes/reactive/index.js b/sandboxes/scatter/index.ts similarity index 100% rename from sandboxes/reactive/index.js rename to sandboxes/scatter/index.ts diff --git a/sandboxes/scatter/package.json b/sandboxes/scatter/package.json index fbb457bd..17f5a5dc 100644 --- a/sandboxes/scatter/package.json +++ b/sandboxes/scatter/package.json @@ -1,12 +1,15 @@ { - "name": "vue-chartjs-scatter-example", + "scripts": { + "start": "vite" + }, "dependencies": { "chart.js": "^3.8.0", - "typescript": "^4.6.2", "vue": "^3.2.31", "vue-chartjs": "^4.0.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "~5.0.0" + "@vitejs/plugin-vue": "^3.0.1", + "typescript": "^4.9.3", + "vite": "^3.2.4" } } diff --git a/sandboxes/scatter/src/App.vue b/sandboxes/scatter/src/App.vue index db06b9f2..4009fcf6 100644 --- a/sandboxes/scatter/src/App.vue +++ b/sandboxes/scatter/src/App.vue @@ -1,14 +1,28 @@ - diff --git a/sandboxes/scatter/src/chartConfig.ts b/sandboxes/scatter/src/chartConfig.ts new file mode 100644 index 00000000..5c43998a --- /dev/null +++ b/sandboxes/scatter/src/chartConfig.ts @@ -0,0 +1,65 @@ +export const data = { + datasets: [ + { + label: 'Scatter Dataset 1', + fill: false, + borderColor: '#f87979', + backgroundColor: '#f87979', + data: [ + { + x: -2, + y: 4 + }, + { + x: -1, + y: 1 + }, + { + x: 0, + y: 0 + }, + { + x: 1, + y: 1 + }, + { + x: 2, + y: 4 + } + ] + }, + { + label: 'Scatter Dataset 2', + fill: false, + borderColor: '#7acbf9', + backgroundColor: '#7acbf9', + data: [ + { + x: -2, + y: -4 + }, + { + x: -1, + y: -1 + }, + { + x: 0, + y: 1 + }, + { + x: 1, + y: -1 + }, + { + x: 2, + y: -4 + } + ] + } + ] +} + +export const options = { + responsive: true, + maintainAspectRatio: false +} diff --git a/sandboxes/scatter/src/components/scatterChart.ts b/sandboxes/scatter/src/components/scatterChart.ts deleted file mode 100644 index 7bffb407..00000000 --- a/sandboxes/scatter/src/components/scatterChart.ts +++ /dev/null @@ -1,136 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Scatter } from 'vue-chartjs' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineElement, - CategoryScale, - LinearScale, - PointElement, - Plugin -} from 'chart.js' - -ChartJS.register( - Title, - Tooltip, - Legend, - LineElement, - CategoryScale, - LinearScale, - PointElement -) - -export default defineComponent({ - name: 'ScatterChart', - components: { - Scatter - }, - props: { - chartId: { - type: String, - default: 'scatter-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - datasets: [ - { - label: 'Scatter Dataset 1', - fill: false, - borderColor: '#f87979', - backgroundColor: '#f87979', - data: [ - { - x: -2, - y: 4 - }, - { - x: -1, - y: 1 - }, - { - x: 0, - y: 0 - }, - { - x: 1, - y: 1 - }, - { - x: 2, - y: 4 - } - ] - }, - { - label: 'Scatter Dataset 2', - fill: false, - borderColor: '#7acbf9', - backgroundColor: '#7acbf9', - data: [ - { - x: -2, - y: -4 - }, - { - x: -1, - y: -1 - }, - { - x: 0, - y: 1 - }, - { - x: 1, - y: -1 - }, - { - x: 2, - y: -4 - } - ] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Scatter, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/sandboxes/scatter/vite.config.js b/sandboxes/scatter/vite.config.js new file mode 100644 index 00000000..2e3d2576 --- /dev/null +++ b/sandboxes/scatter/vite.config.js @@ -0,0 +1,6 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()] +}) diff --git a/src/BaseCharts.ts b/src/BaseCharts.ts index 75ca33a9..42e82b9e 100644 --- a/src/BaseCharts.ts +++ b/src/BaseCharts.ts @@ -51,22 +51,23 @@ import type { TypedChartComponent } from './types' -export const generateChart = < +export function createTypedChart< TType extends ChartType = ChartType, TData = DefaultDataPoint, TLabel = unknown >( - chartId: string, - chartType: TType, - chartController: ChartComponentLike -): TypedChartComponent => - defineComponent({ + type: TType, + registerables: ChartComponentLike +): TypedChartComponent { + ChartJS.register(registerables) + + return defineComponent({ props: { - chartData: { + data: { type: Object as PropType>, required: true }, - chartOptions: { + options: { type: Object as PropType>, default: () => {} }, @@ -74,34 +75,12 @@ export const generateChart = < type: String, default: 'label' }, - chartId: { - type: String, - default: chartId - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - type: String, - default: '' - }, - styles: { - type: Object as PropType>, - default: () => {} - }, plugins: { type: Array as PropType[]>, default: () => [] } }, setup(props, context) { - ChartJS.register(chartController) - const _chart = shallowRef | null>(null) const canvasEl = ref(null) @@ -126,7 +105,7 @@ export const generateChart = < _chart.value = new ChartJS( canvasEl2DContext, { - type: chartType, + type, data: isProxy(data) ? new Proxy(chartData, {}) : chartData, options, plugins: props.plugins @@ -175,8 +154,8 @@ export const generateChart = < chartCreate( renderChart, - props.chartData, - props.chartOptions as ChartOptions, + props.data, + props.options as ChartOptions, context ) } @@ -187,8 +166,8 @@ export const generateChart = < chartCreate( renderChart, - props.chartData, - props.chartOptions as ChartOptions, + props.data, + props.options as ChartOptions, context ) } @@ -203,8 +182,8 @@ export const generateChart = < } else { chartCreate( renderChart, - props.chartData, - props.chartOptions as ChartOptions, + props.data, + props.options as ChartOptions, context ) } @@ -221,7 +200,7 @@ export const generateChart = < } watch( - () => props.chartData, + () => props.data, ( newValue: TChartData, oldValue: TChartData @@ -230,20 +209,17 @@ export const generateChart = < ) watch( - () => props.chartOptions, + () => props.options, newValue => chartOptionsHandler(newValue as ChartOptions), { deep: true } ) onMounted(() => { - if ( - 'datasets' in props.chartData && - props.chartData.datasets.length > 0 - ) { + if ('datasets' in props.data && props.data.datasets.length > 0) { chartCreate( renderChart, - props.chartData, - props.chartOptions as ChartOptions, + props.data, + props.options as ChartOptions, context ) } @@ -260,62 +236,39 @@ export const generateChart = < updateChart }) - return () => - h('div', { style: props.styles, class: props.cssClasses }, [ - h('canvas', { - id: props.chartId, - width: props.width, - height: props.height, - ref: canvasEl - }) - ]) + return () => { + return h('canvas', { + ref: canvasEl + }) + } } }) as any +} -export const Bar = /* #__PURE__ */ generateChart( - 'bar-chart', - 'bar', - BarController -) +export const Bar = /* #__PURE__ */ createTypedChart('bar', BarController) -export const Doughnut = /* #__PURE__ */ generateChart( - 'doughnut-chart', +export const Doughnut = /* #__PURE__ */ createTypedChart( 'doughnut', DoughnutController ) -export const Line = /* #__PURE__ */ generateChart( - 'line-chart', - 'line', - LineController -) +export const Line = /* #__PURE__ */ createTypedChart('line', LineController) -export const Pie = /* #__PURE__ */ generateChart( - 'pie-chart', - 'pie', - PieController -) +export const Pie = /* #__PURE__ */ createTypedChart('pie', PieController) -export const PolarArea = /* #__PURE__ */ generateChart( - 'polar-chart', +export const PolarArea = /* #__PURE__ */ createTypedChart( 'polarArea', PolarAreaController ) -export const Radar = /* #__PURE__ */ generateChart( - 'radar-chart', - 'radar', - RadarController -) +export const Radar = /* #__PURE__ */ createTypedChart('radar', RadarController) -export const Bubble = /* #__PURE__ */ generateChart( - 'bubble-chart', +export const Bubble = /* #__PURE__ */ createTypedChart( 'bubble', BubbleController ) -export const Scatter = /* #__PURE__ */ generateChart( - 'scatter-chart', +export const Scatter = /* #__PURE__ */ createTypedChart( 'scatter', ScatterController ) diff --git a/src/types.ts b/src/types.ts index bdf13fc9..452357d5 100644 --- a/src/types.ts +++ b/src/types.ts @@ -37,15 +37,10 @@ export interface IChartProps< TData = DefaultDataPoint, TLabel = unknown > { - chartData: TChartData - datasetIdKey?: string - chartOptions?: TChartOptions - chartId?: string - width?: number - height?: number - cssClasses?: string - styles?: Partial + data: TChartData + options?: TChartOptions plugins?: Plugin[] + datasetIdKey?: string } export interface IChartComponentData< diff --git a/src/utils.ts b/src/utils.ts index cb43eb38..432c7eff 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -20,11 +20,11 @@ export function chartCreate< data: TChartData, options: TChartOptions ) => void, - chartData: TChartData, - chartOptions: TChartOptions, + data: TChartData, + options: TChartOptions, context?: SetupContext ): void { - createChartFunction(chartData, chartOptions) + createChartFunction(data, options) if (context !== undefined) { context.emit(ChartEmits.ChartRendered) diff --git a/stories/bar.stories.ts b/stories/bar.stories.ts index cddca549..b5e98b09 100644 --- a/stories/bar.stories.ts +++ b/stories/bar.stories.ts @@ -1,24 +1,28 @@ -import BarChart from '../sandboxes/bar/src/components/barChart' +import 'chart.js/auto' +import { Bar } from '../src' +import * as barChartConfig from '../sandboxes/bar/src/chartConfig' export default { title: 'BarChart', - component: BarChart, + component: Bar, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { BarChart }, - template: '' -}) - -export const DefaultBar = Template.bind({}) +export function Default(args) { + return { + components: { Bar }, + template: '', + setup() { + return { args } + } + } +} -DefaultBar.args = { - chartId: 'bar-chart', +Default.args = { + id: 'bar-chart', width: 400, height: 400, - plugins: [] + ...barChartConfig } diff --git a/stories/bubble.stories.ts b/stories/bubble.stories.ts index 8a02a0c6..5d30bf12 100644 --- a/stories/bubble.stories.ts +++ b/stories/bubble.stories.ts @@ -1,24 +1,28 @@ -import BubbleChart from '../sandboxes/bubble/src/components/bubbleChart' +import 'chart.js/auto' +import { Bubble } from '../src' +import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig' export default { title: 'BubbleChart', - component: BubbleChart, + component: Bubble, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { BubbleChart }, - template: '' -}) - -export const DefaultBubble = Template.bind({}) +export function Default(args) { + return { + components: { Bubble }, + template: '', + setup() { + return { args } + } + } +} -DefaultBubble.args = { - chartId: 'bubble-chart', +Default.args = { + id: 'bar-chart', width: 400, height: 400, - plugins: [] + ...bubbleChartConfig } diff --git a/stories/custom.stories.ts b/stories/custom.stories.ts index 4ab4bfbe..97c9c688 100644 --- a/stories/custom.stories.ts +++ b/stories/custom.stories.ts @@ -1,24 +1,28 @@ -import CustomChart from '../sandboxes/custom/src/components/customChart' +import 'chart.js/auto' +import LineWithLineChart from '../sandboxes/custom/src/components/LineWithLineChart' +import * as customChartConfig from '../sandboxes/custom/src/chartConfig' export default { title: 'CustomChart', - component: CustomChart, + component: LineWithLineChart, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { CustomChart }, - template: '' -}) - -export const DefaultCustom = Template.bind({}) +export function Default(args) { + return { + components: { LineWithLineChart }, + template: '', + setup() { + return { args } + } + } +} -DefaultCustom.args = { - chartId: 'custom-chart', +Default.args = { + id: 'custom-chart', width: 400, height: 400, - plugins: [] + ...customChartConfig } diff --git a/stories/doughnut.stories.ts b/stories/doughnut.stories.ts index 74a2ff1e..b7eacc3f 100644 --- a/stories/doughnut.stories.ts +++ b/stories/doughnut.stories.ts @@ -1,24 +1,28 @@ -import DoughnutChart from '../sandboxes/doughnut/src/components/doughnutChart' +import 'chart.js/auto' +import { Doughnut } from '../src' +import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig' export default { title: 'DoughnutChart', - component: DoughnutChart, + component: Doughnut, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { DoughnutChart }, - template: '' -}) - -export const DefaultDoughnut = Template.bind({}) +export function Default(args) { + return { + components: { Doughnut }, + template: '', + setup() { + return { args } + } + } +} -DefaultDoughnut.args = { - chartId: 'doughnut-chart', +Default.args = { + id: 'doughnut-chart', width: 400, height: 400, - plugins: [] + ...doughnutChartConfig } diff --git a/stories/line.stories.ts b/stories/line.stories.ts index 318acd59..e1f81416 100644 --- a/stories/line.stories.ts +++ b/stories/line.stories.ts @@ -1,24 +1,28 @@ -import LineChart from '../sandboxes/line/src/components/lineChart' +import 'chart.js/auto' +import { Line } from '../src' +import * as lineChartConfig from '../sandboxes/line/src/chartConfig' export default { title: 'LineChart', - component: LineChart, + component: Line, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { LineChart }, - template: '' -}) - -export const DefaultLine = Template.bind({}) +export function Default(args) { + return { + components: { Line }, + template: '', + setup() { + return { args } + } + } +} -DefaultLine.args = { - chartId: 'line-chart', +Default.args = { + id: 'line-chart', width: 400, height: 400, - plugins: [] + ...lineChartConfig } diff --git a/stories/pie.stories.ts b/stories/pie.stories.ts index cc53c067..09212604 100644 --- a/stories/pie.stories.ts +++ b/stories/pie.stories.ts @@ -1,24 +1,28 @@ -import PieChart from '../sandboxes/pie/src/components/pieChart' +import 'chart.js/auto' +import { Pie } from '../src' +import * as pieChartConfig from '../sandboxes/pie/src/chartConfig' export default { title: 'PieChart', - component: PieChart, + component: Pie, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { PieChart }, - template: '' -}) - -export const DefaultPie = Template.bind({}) +export function Default(args) { + return { + components: { Pie }, + template: '', + setup() { + return { args } + } + } +} -DefaultPie.args = { - chartId: 'pie-chart', +Default.args = { + id: 'pie-chart', width: 400, height: 400, - plugins: [] + ...pieChartConfig } diff --git a/stories/polarArea.stories.ts b/stories/polarArea.stories.ts index 1248d5ec..b71dbe15 100644 --- a/stories/polarArea.stories.ts +++ b/stories/polarArea.stories.ts @@ -1,24 +1,28 @@ -import PolarAreaChart from '../sandboxes/polar-area/src/components/polarAreaChart' +import 'chart.js/auto' +import { PolarArea } from '../src' +import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig' export default { title: 'PolarAreaChart', - component: PolarAreaChart, + component: PolarArea, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { PolarAreaChart }, - template: '' -}) - -export const DefaultPolarArea = Template.bind({}) +export function Default(args) { + return { + components: { PolarArea }, + template: '', + setup() { + return { args } + } + } +} -DefaultPolarArea.args = { - chartId: 'polar-area-chart', +Default.args = { + id: 'polar-area-chart', width: 400, height: 400, - plugins: [] + ...polarAreaChartConfig } diff --git a/stories/radar.stories.ts b/stories/radar.stories.ts index 3c48b96e..5de75f49 100644 --- a/stories/radar.stories.ts +++ b/stories/radar.stories.ts @@ -1,24 +1,28 @@ -import RadarChart from '../sandboxes/radar/src/components/radarChart' +import 'chart.js/auto' +import { Radar } from '../src' +import * as radarChartConfig from '../sandboxes/radar/src/chartConfig' export default { title: 'RadarChart', - component: RadarChart, + component: Radar, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { RadarChart }, - template: '' -}) - -export const DefaultRadar = Template.bind({}) +export function Default(args) { + return { + components: { Radar }, + template: '', + setup() { + return { args } + } + } +} -DefaultRadar.args = { - chartId: 'radar-chart', +Default.args = { + id: 'radar-chart', width: 400, height: 400, - plugins: [] + ...radarChartConfig } diff --git a/stories/reactive.stories.ts b/stories/reactive.stories.ts index 6f999836..d48b9f4e 100644 --- a/stories/reactive.stories.ts +++ b/stories/reactive.stories.ts @@ -1,24 +1,43 @@ -import ReactiveChart from '../sandboxes/reactive/src/components/reactiveChart' +import 'chart.js/auto' +import { ref, onMounted } from 'vue' +import { Bar } from '../src' +import * as reactiveChartConfig from '../sandboxes/reactive/src/chartConfig' export default { - title: 'ReactiveChart', - component: ReactiveChart, + title: 'Reactive', + component: Bar, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { ReactiveChart }, - template: '' -}) +export function Default(args) { + return { + components: { Bar }, + template: '', + setup() { + const options = reactiveChartConfig.options + const data = ref({ + datasets: [] + }) -export const DefaultReactive = Template.bind({}) + onMounted(() => { + setInterval(() => { + data.value = { ...reactiveChartConfig.data } + }, 3000) + }) -DefaultReactive.args = { - chartId: 'reactive-chart', + return { + args, + options, + data + } + } + } +} + +Default.args = { + id: 'reactive-chart', width: 400, - height: 400, - plugins: [] + height: 400 } diff --git a/stories/reactiveProp.stories.ts b/stories/reactiveProp.stories.ts deleted file mode 100644 index e791b111..00000000 --- a/stories/reactiveProp.stories.ts +++ /dev/null @@ -1,77 +0,0 @@ -import ReactivePropChart from '../sandboxes/reactive-prop/src/components/reactivePropChart' - -export default { - title: 'ReactivePropChart', - component: ReactivePropChart, - parameters: { - layout: 'centered' - } -} - -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { ReactivePropChart }, - template: '', - data() { - return { - dataPoints: {} - } - }, - mounted() { - setInterval(() => { - this.fillData() - }, 2000) - }, - methods: { - getRandomInt() { - return Math.floor(Math.random() * (50 - 5 + 1)) + 5 - }, - fillData() { - this.dataPoints = { - labels: [ - 'January' + this.getRandomInt(), - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt(), - this.getRandomInt() - ] - } - ] - } - } - } -}) - -export const DefaultReactiveProp = Template.bind({}) - -DefaultReactiveProp.args = { - chartId: 'reactive-prop-chart', - width: 400, - height: 400, - plugins: [] -} diff --git a/stories/scatter.stories.ts b/stories/scatter.stories.ts index b1b5e42c..8d54cf11 100644 --- a/stories/scatter.stories.ts +++ b/stories/scatter.stories.ts @@ -1,24 +1,28 @@ -import ScatterChart from '../sandboxes/scatter/src/components/scatterChart' +import 'chart.js/auto' +import { Scatter } from '../src' +import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig' export default { title: 'ScatterChart', - component: ScatterChart, + component: Scatter, parameters: { layout: 'centered' } } -const Template = (_, { argTypes }) => ({ - props: Object.keys(argTypes), - components: { ScatterChart }, - template: '' -}) - -export const DefaultScatter = Template.bind({}) +export function Default(args) { + return { + components: { Scatter }, + template: '', + setup() { + return { args } + } + } +} -DefaultScatter.args = { - chartId: 'scatter-chart', +Default.args = { + id: 'scatter-chart', width: 400, height: 400, - plugins: [] + ...scatterChartConfig } diff --git a/test/Bar.spec.ts b/test/Bar.spec.ts index a397e70e..7c30adb2 100644 --- a/test/Bar.spec.ts +++ b/test/Bar.spec.ts @@ -1,33 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import BarChart from './examples/BarChart' +import { Bar } from '../src' +import * as barChartConfig from '../sandboxes/bar/src/chartConfig' describe('BarChart', () => { - const Component = { - template: '
', - components: { BarChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Bar, { + props: barChartConfig as any + }) - const barChart = wrapper.find('#bar-chart') - expect(barChart.element.id).not.toBe('undefined') - expect(barChart.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'barchartprop' } + const wrapper = mount(Bar, { + props: { + id: 'bar-chart-id', + ...barChartConfig + } as any }) - const barChart = wrapper.find('#barchartprop') - expect(barChart.element.id).not.toBe('undefined') - expect(barChart.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('bar-chart-id') }) it('should add inline plugins based on prop', () => { @@ -35,8 +34,11 @@ describe('BarChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Bar, { + props: { + plugins: [testPlugin], + ...barChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/Bubble.spec.ts b/test/Bubble.spec.ts index b04cbff6..252951ba 100644 --- a/test/Bubble.spec.ts +++ b/test/Bubble.spec.ts @@ -1,34 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import BubbleChart from './examples/BubbleChart' +import { Bubble } from '../src' +import * as bubbleChartConfig from '../sandboxes/bubble/src/chartConfig' describe('BubbleChart', () => { - const Component = { - template: - '
', - components: { BubbleChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Bubble, { + props: bubbleChartConfig as any + }) - const bubbleChartEl = wrapper.find('#bubble-chart') - expect(bubbleChartEl.element.id).not.toBe('undefined') - expect(bubbleChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'bubblechartprop' } + const wrapper = mount(Bubble, { + props: { + id: 'bubble-chart-id', + ...bubbleChartConfig + } as any }) - const bubbleChartEl = wrapper.find('#bubblechartprop') - expect(bubbleChartEl.element.id).not.toBe('undefined') - expect(bubbleChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('bubble-chart-id') }) it('should add inline plugins based on prop', () => { @@ -36,8 +34,11 @@ describe('BubbleChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Bubble, { + props: { + plugins: [testPlugin], + ...bubbleChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/CustomChart.spec.ts b/test/CustomChart.spec.ts deleted file mode 100644 index aa81788c..00000000 --- a/test/CustomChart.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, it, expect } from 'vitest' -import { mount } from '@vue/test-utils' -import CustomChart from './examples/CustomChart' - -describe('CustomChart', () => { - const Component = { - template: '
', - components: { CustomChart } - } - - it('should render a canvas', () => { - const wrapper = mount(Component) - - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) - }) -}) diff --git a/test/Doughnut.spec.ts b/test/Doughnut.spec.ts index 0c9e9e6f..2b0901e6 100644 --- a/test/Doughnut.spec.ts +++ b/test/Doughnut.spec.ts @@ -1,34 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import DoughnutChart from './examples/DoughnutChart' +import { Doughnut } from '../src' +import * as doughnutChartConfig from '../sandboxes/doughnut/src/chartConfig' describe('DoughnutChart', () => { - const Component = { - template: - '
', - components: { DoughnutChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Doughnut, { + props: doughnutChartConfig as any + }) - const doughnutChartEl = wrapper.find('#doughnut-chart') - expect(doughnutChartEl.element.id).not.toBe('undefined') - expect(doughnutChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'doughnutchartprop' } + const wrapper = mount(Doughnut, { + props: { + id: 'doughnut-chart-id', + ...doughnutChartConfig + } as any }) - const doughnutChartEl = wrapper.find('#doughnutchartprop') - expect(doughnutChartEl.element.id).not.toBe('undefined') - expect(doughnutChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('doughnut-chart-id') }) it('should add inline plugins based on prop', () => { @@ -36,8 +34,11 @@ describe('DoughnutChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Doughnut, { + props: { + plugins: [testPlugin], + ...doughnutChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/Line.spec.ts b/test/Line.spec.ts index e1924df3..5751f161 100644 --- a/test/Line.spec.ts +++ b/test/Line.spec.ts @@ -1,33 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import LineChart from './examples/LineChart' +import { Line } from '../src' +import * as lineChartConfig from '../sandboxes/line/src/chartConfig' describe('LineChart', () => { - const Component = { - template: '
', - components: { LineChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Line, { + props: lineChartConfig as any + }) - const lineChartEl = wrapper.find('#line-chart') - expect(lineChartEl.element.id).not.toBe('undefined') - expect(lineChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'linechartprop' } + const wrapper = mount(Line, { + props: { + id: 'line-chart-id', + ...lineChartConfig + } as any }) - const lineChartEl = wrapper.find('#linechartprop') - expect(lineChartEl.element.id).not.toBe('undefined') - expect(lineChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('line-chart-id') }) it('should add inline plugins based on prop', () => { @@ -35,8 +34,11 @@ describe('LineChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Line, { + props: { + plugins: [testPlugin], + ...lineChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/Pie.spec.ts b/test/Pie.spec.ts index 8a51198e..ae599998 100644 --- a/test/Pie.spec.ts +++ b/test/Pie.spec.ts @@ -1,33 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import PieChart from './examples/PieChart' +import { Pie } from '../src' +import * as pieChartConfig from '../sandboxes/pie/src/chartConfig' describe('PieChart', () => { - const Component = { - template: '
', - components: { PieChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Pie, { + props: pieChartConfig as any + }) - const pieChartEl = wrapper.find('#pie-chart') - expect(pieChartEl.element.id).not.toBe('undefined') - expect(pieChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'piechartprop' } + const wrapper = mount(Pie, { + props: { + id: 'pie-chart-id', + ...pieChartConfig + } as any }) - const pieChartEl = wrapper.find('#piechartprop') - expect(pieChartEl.element.id).not.toBe('undefined') - expect(pieChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('pie-chart-id') }) it('should add inline plugins based on prop', () => { @@ -35,8 +34,11 @@ describe('PieChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Pie, { + props: { + plugins: [testPlugin], + ...pieChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/PolarArea.spec.ts b/test/PolarArea.spec.ts index 2d604471..c3c86a63 100644 --- a/test/PolarArea.spec.ts +++ b/test/PolarArea.spec.ts @@ -1,34 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import PolarAreaChart from './examples/PolarAreaChart' - -describe('PolarChart', () => { - const Component = { - template: - '
', - components: { PolarAreaChart }, - props: ['chartId', 'plugins'] - } +import { PolarArea } from '../src' +import * as polarAreaChartConfig from '../sandboxes/polar-area/src/chartConfig' +describe('PolarAreaChart', () => { it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(PolarArea, { + props: polarAreaChartConfig as any + }) - const polarAreaChartEl = wrapper.find('#polar-chart') - expect(polarAreaChartEl.element.id).not.toBe('undefined') - expect(polarAreaChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'polarchartprop' } + const wrapper = mount(PolarArea, { + props: { + id: 'polar-area-chart-id', + ...polarAreaChartConfig + } as any }) - const polarAreaChartEl = wrapper.find('#polarchartprop') - expect(polarAreaChartEl.element.id).not.toBe('undefined') - expect(polarAreaChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('polar-area-chart-id') }) it('should add inline plugins based on prop', () => { @@ -36,8 +34,11 @@ describe('PolarChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(PolarArea, { + props: { + plugins: [testPlugin], + ...polarAreaChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/Radar.spec.ts b/test/Radar.spec.ts index b27dbb0f..6b26415d 100644 --- a/test/Radar.spec.ts +++ b/test/Radar.spec.ts @@ -1,33 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import RadarChart from './examples/RadarChart' +import { Radar } from '../src' +import * as radarChartConfig from '../sandboxes/radar/src/chartConfig' describe('RadarChart', () => { - const Component = { - template: '
', - components: { RadarChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Radar, { + props: radarChartConfig as any + }) - const radarChartEl = wrapper.find('#radar-chart') - expect(radarChartEl.element.id).not.toBe('undefined') - expect(radarChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'rodarchartprop' } + const wrapper = mount(Radar, { + props: { + id: 'radar-chart-id', + ...radarChartConfig + } as any }) - const radarChartEl = wrapper.find('#rodarchartprop') - expect(radarChartEl.element.id).not.toBe('undefined') - expect(radarChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('radar-chart-id') }) it('should add inline plugins based on prop', () => { @@ -35,8 +34,11 @@ describe('RadarChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Radar, { + props: { + plugins: [testPlugin], + ...radarChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/Reactive.spec.ts b/test/Reactive.spec.ts deleted file mode 100644 index b58c0fd4..00000000 --- a/test/Reactive.spec.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { describe, it, expect } from 'vitest' -import { mount } from '@vue/test-utils' -import ReactiveChart from './examples/ReactiveChart' - -describe('ReactiveChart', () => { - const Component = { - template: '
', - components: { ReactiveChart } - } - - it('should render a canvas', () => { - const wrapper = mount(Component) - - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) - }) -}) diff --git a/test/ReactiveProp.spec.ts b/test/ReactiveProp.spec.ts deleted file mode 100644 index fd9f9932..00000000 --- a/test/ReactiveProp.spec.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { describe, it, expect } from 'vitest' -import { mount } from '@vue/test-utils' -import ReactivePropChart from './examples/ReactivePropChart' - -describe('ReactivePropChart', () => { - const Component = { - template: '
', - components: { ReactivePropChart }, - props: ['chartData'] - } - - it('should render a canvas', () => { - const wrapper = mount(Component, { - props: { chartData: {} } - }) - - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) - }) -}) diff --git a/test/Scatter.spec.ts b/test/Scatter.spec.ts index f08ca514..d9f66600 100644 --- a/test/Scatter.spec.ts +++ b/test/Scatter.spec.ts @@ -1,34 +1,32 @@ import { describe, it, expect } from 'vitest' import { mount } from '@vue/test-utils' -import ScatterChart from './examples/ScatterChart' +import { Scatter } from '../src' +import * as scatterChartConfig from '../sandboxes/scatter/src/chartConfig' describe('ScatterChart', () => { - const Component = { - template: - '
', - components: { ScatterChart }, - props: ['chartId', 'plugins'] - } - it('should render a canvas', () => { - const wrapper = mount(Component) + const wrapper = mount(Scatter, { + props: scatterChartConfig as any + }) - const scatterChartEl = wrapper.find('#scatter-chart') - expect(scatterChartEl.element.id).not.toBe('undefined') - expect(scatterChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') - const canvasEl = wrapper.find('canvas') - expect(canvasEl.exists()).toBe(true) + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('') }) it('should change id based on prop', () => { - const wrapper = mount(Component, { - props: { chartId: 'scatterchartprop' } + const wrapper = mount(Scatter, { + props: { + id: 'scatter-chart-id', + ...scatterChartConfig + } as any }) - const scatterChartEl = wrapper.find('#scatterchartprop') - expect(scatterChartEl.element.id).not.toBe('undefined') - expect(scatterChartEl.exists()).toBe(true) + const canvas = wrapper.find('canvas') + + expect(canvas.exists()).toBe(true) + expect(canvas.element.id).toBe('scatter-chart-id') }) it('should add inline plugins based on prop', () => { @@ -36,8 +34,11 @@ describe('ScatterChart', () => { id: 'test' } - const wrapper = mount(Component, { - props: { plugins: [testPlugin] } + const wrapper = mount(Scatter, { + props: { + plugins: [testPlugin], + ...scatterChartConfig + } as any }) expect(wrapper.props().plugins.length).toEqual(1) diff --git a/test/examples/BarChart.ts b/test/examples/BarChart.ts deleted file mode 100644 index 97293bd8..00000000 --- a/test/examples/BarChart.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Bar } from '../../src' - -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'BarChart', - components: { - Bar - }, - props: { - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'January', - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bar, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/BubbleChart.ts b/test/examples/BubbleChart.ts deleted file mode 100644 index 7e402a3d..00000000 --- a/test/examples/BubbleChart.ts +++ /dev/null @@ -1,113 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Bubble } from '../../src' - -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - PointElement, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale) - -export default defineComponent({ - name: 'BubbleChart', - components: { - Bubble - }, - props: { - chartId: { - type: String, - default: 'bubble-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - { - x: 20, - y: 25, - r: 5 - }, - { - x: 40, - y: 10, - r: 10 - }, - { - x: 30, - y: 22, - r: 30 - } - ] - }, - { - label: 'Data Two', - backgroundColor: '#7C8CF8', - data: [ - { - x: 10, - y: 30, - r: 15 - }, - { - x: 20, - y: 20, - r: 10 - }, - { - x: 15, - y: 8, - r: 30 - } - ] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bubble, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/CustomChart.ts b/test/examples/CustomChart.ts deleted file mode 100644 index 4cac667b..00000000 --- a/test/examples/CustomChart.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { generateChart } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineController, - LineElement, - PointElement, - CategoryScale, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register( - Title, - Tooltip, - Legend, - LineElement, - PointElement, - CategoryScale, - LinearScale -) - -class LineWithLineController extends LineController { - public override draw() { - super.draw() - - if (this.chart?.tooltip?.active) { - const ctx = this.chart.ctx - const x = this.chart.tooltip.x - const topY = this.chart.scales['y-axis-0'].top - const bottomY = this.chart.scales['y-axis-0'].bottom - - // draw line - ctx.save() - ctx.beginPath() - ctx.moveTo(x, topY) - ctx.lineTo(x, bottomY) - ctx.lineWidth = 2 - ctx.strokeStyle = '#07C' - ctx.stroke() - ctx.restore() - } - } -} - -const LineWithLine = generateChart( - 'line-with-chart', - 'line', - LineWithLineController -) - -export default defineComponent({ - name: 'CustomChart', - components: { - LineWithLine - }, - props: { - chartId: { - type: String, - default: '-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 39, 10, 40, 39, 80, 40] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false, - tooltips: { - intersect: false - } - } - - return () => - h(LineWithLine, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/DoughnutChart.ts b/test/examples/DoughnutChart.ts deleted file mode 100644 index 373538cc..00000000 --- a/test/examples/DoughnutChart.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Doughnut } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) - -export default defineComponent({ - name: 'DoughnutChart', - components: { - Doughnut - }, - props: { - chartId: { - type: String, - default: 'doughnut-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], - datasets: [ - { - backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], - data: [40, 20, 80, 10] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Doughnut, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/LineChart.ts b/test/examples/LineChart.ts deleted file mode 100644 index 8d443042..00000000 --- a/test/examples/LineChart.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Line } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineElement, - LinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale) - -export default defineComponent({ - name: 'LineChart', - components: { - Line - }, - props: { - chartId: { - type: String, - default: 'line-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 39, 10, 40, 39, 80, 40] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Line, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/PieChart.ts b/test/examples/PieChart.ts deleted file mode 100644 index 352afff4..00000000 --- a/test/examples/PieChart.ts +++ /dev/null @@ -1,75 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Pie } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale) - -export default defineComponent({ - name: 'PieChart', - components: { - Pie - }, - props: { - chartId: { - type: String, - default: 'pie-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'], - datasets: [ - { - backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'], - data: [40, 20, 80, 10] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Pie, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/PolarAreaChart.ts b/test/examples/PolarAreaChart.ts deleted file mode 100644 index f6e13434..00000000 --- a/test/examples/PolarAreaChart.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { PolarArea } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - ArcElement, - RadialLinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale) - -export default defineComponent({ - name: 'PolarAreaChart', - components: { - PolarArea - }, - props: { - chartId: { - type: String, - default: 'polar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'Eating', - 'Drinking', - 'Sleeping', - 'Designing', - 'Coding', - 'Cycling', - 'Running' - ], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(PolarArea, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/RadarChart.ts b/test/examples/RadarChart.ts deleted file mode 100644 index c318ed01..00000000 --- a/test/examples/RadarChart.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Radar } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - PointElement, - RadialLinearScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, PointElement, RadialLinearScale) - -export default defineComponent({ - name: 'RadarChart', - components: { - Radar - }, - props: { - chartId: { - type: String, - default: 'radar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - labels: [ - 'Eating', - 'Drinking', - 'Sleeping', - 'Designing', - 'Coding', - 'Cycling', - 'Running' - ], - datasets: [ - { - label: 'My First dataset', - backgroundColor: 'rgba(179,181,198,0.2)', - borderColor: 'rgba(179,181,198,1)', - pointBackgroundColor: 'rgba(179,181,198,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(179,181,198,1)', - data: [65, 59, 90, 81, 56, 55, 40] - }, - { - label: 'My Second dataset', - backgroundColor: 'rgba(255,99,132,0.2)', - borderColor: 'rgba(255,99,132,1)', - pointBackgroundColor: 'rgba(255,99,132,1)', - pointBorderColor: '#fff', - pointHoverBackgroundColor: '#fff', - pointHoverBorderColor: 'rgba(255,99,132,1)', - data: [28, 48, 40, 19, 96, 27, 100] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Radar, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/ReactiveChart.ts b/test/examples/ReactiveChart.ts deleted file mode 100644 index d936a2cb..00000000 --- a/test/examples/ReactiveChart.ts +++ /dev/null @@ -1,121 +0,0 @@ -import { defineComponent, ref, h, onMounted, PropType } from 'vue' -import { Bar } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin, - ChartData -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'ReactiveChart', - components: { - Bar - }, - props: { - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = ref>({ - datasets: [] - }) - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - function fillData() { - const updatedChartData = { - labels: [ - 'January' + getRandomInt(), - 'February', - 'March', - 'April', - 'May', - 'June', - 'July', - 'August', - 'September', - 'October', - 'November', - 'December' - ], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [ - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt(), - getRandomInt() - ] - } - ] - } - - chartData.value = { ...updatedChartData } - } - - function getRandomInt() { - return Math.floor(Math.random() * (50 - 5 + 1)) + 5 - } - - onMounted(() => { - setInterval(() => { - fillData() - }, 5000) - }) - - return () => - h(Bar, { - chartData: chartData.value, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/ReactivePropChart.ts b/test/examples/ReactivePropChart.ts deleted file mode 100644 index 8c88e83f..00000000 --- a/test/examples/ReactivePropChart.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' -import { Bar } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - BarElement, - CategoryScale, - LinearScale, - Plugin, - ChartData, - DefaultDataPoint -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale) - -export default defineComponent({ - name: 'ReactiveChart', - components: { - Bar - }, - props: { - chartData: { - type: Object as PropType< - ChartData<'bar', DefaultDataPoint<'bar'>, unknown> - >, - required: true - }, - chartId: { - type: String, - default: 'bar-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Bar, { - chartData: props.chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/examples/ScatterChart.ts b/test/examples/ScatterChart.ts deleted file mode 100644 index ae916aa5..00000000 --- a/test/examples/ScatterChart.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { defineComponent, h, PropType } from 'vue' - -import { Scatter } from '../../src' -import { - Chart as ChartJS, - Title, - Tooltip, - Legend, - LineElement, - CategoryScale, - Plugin -} from 'chart.js' - -ChartJS.register(Title, Tooltip, Legend, LineElement, CategoryScale) - -export default defineComponent({ - name: 'ScatterChart', - components: { - Scatter - }, - props: { - chartId: { - type: String, - default: 'scatter-chart' - }, - width: { - type: Number, - default: 400 - }, - height: { - type: Number, - default: 400 - }, - cssClasses: { - default: '', - type: String - }, - styles: { - type: Object as PropType>, - default: () => {} - }, - plugins: { - type: Array as PropType[]>, - default: () => [] - } - }, - setup(props) { - const chartData = { - datasets: [ - { - label: 'Scatter Dataset 1', - fill: false, - borderColor: '#f87979', - backgroundColor: '#f87979', - data: [ - { - x: -2, - y: 4 - }, - { - x: -1, - y: 1 - }, - { - x: 0, - y: 0 - }, - { - x: 1, - y: 1 - }, - { - x: 2, - y: 4 - } - ] - }, - { - label: 'Scatter Dataset 2', - fill: false, - borderColor: '#7acbf9', - backgroundColor: '#7acbf9', - data: [ - { - x: -2, - y: -4 - }, - { - x: -1, - y: -1 - }, - { - x: 0, - y: 1 - }, - { - x: 1, - y: -1 - }, - { - x: 2, - y: -4 - } - ] - } - ] - } - - const chartOptions = { - responsive: true, - maintainAspectRatio: false - } - - return () => - h(Scatter, { - chartData, - chartOptions, - chartId: props.chartId, - width: props.width, - height: props.height, - cssClasses: props.cssClasses, - styles: props.styles, - plugins: props.plugins - }) - } -}) diff --git a/test/ChartsTypes.test-d.ts b/test/types.test-d.ts similarity index 77% rename from test/ChartsTypes.test-d.ts rename to test/types.test-d.ts index 0b605368..db73136e 100644 --- a/test/ChartsTypes.test-d.ts +++ b/test/types.test-d.ts @@ -4,7 +4,7 @@ import { Plugin } from 'chart.js' import { Bar, Radar, Scatter, Doughnut } from '../src' -const chartData = { +const data = { datasets: [] } @@ -17,23 +17,23 @@ const testPlugin = { */ h(Radar, { - chartData, + data, plugins: [] }) h(Scatter, { - chartData, + data, plugins: [] }) h(Bar, { - chartData, - chartOptions: {} + data, + options: {} }) expectError( h(Scatter, { - chartData, + data, plugins: [testPlugin] as Plugin<'bubble'>[] }) ) @@ -43,16 +43,16 @@ expectError( */ h(Doughnut, { - chartData, - chartOptions: { + data, + options: { cutout: '75%' } }) expectError( h(Scatter, { - chartData, - chartOptions: { + data, + options: { cutout: '75%' } }) diff --git a/website/src/examples/index.md b/website/src/examples/index.md index 0e33e8ad..d513e659 100644 --- a/website/src/examples/index.md +++ b/website/src/examples/index.md @@ -2,17 +2,17 @@ ## Vue 3 charts -- [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/bar) -- [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/bubble) -- [Doughnut](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/doughnut) -- [Line](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/line) -- [Pie](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/pie) -- [PolarArea](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/polar-area) -- [Radar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/radar) -- [Scatter](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/scatter) -- [Bar with reactive prop](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive-prop) -- [Bar with reactive data](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/reactive) -- [Custom chart](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/main/sandboxes/custom) +- [Bar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/bar) +- [Bubble](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/bubble) +- [Doughnut](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/doughnut) +- [Line](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/line) +- [Pie](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/pie) +- [PolarArea](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/polar-area) +- [Radar](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/radar) +- [Scatter](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/scatter) +- [Bar with reactive prop](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/reactive-prop) +- [Bar with reactive data](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/reactive) +- [Custom chart](https://codesandbox.io/s/github/apertureless/vue-chartjs/tree/v4/sandboxes/custom) ## Vue 2 charts