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