Skip to content

Commit 6675cb0

Browse files
dangreendangreen
authored
feat: fallthrough props to canvas (#955)
fallthrough non-chart props to canvas, chart props were renamed BREAKING CHANGE: div wrapper was removed, `chartData` prop was renamed to `data`, `chartOptions` prop was renamed to `options`, `generateChart` was renamed to `createTypedChart`
1 parent e272b3c commit 6675cb0

File tree

116 files changed

+1110
-2908
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

116 files changed

+1110
-2908
lines changed

‎.github/ISSUE_TEMPLATE/bug-report.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ body:
3030
label: Reproduction
3131
description: |
3232
Please provide issue reproduction.
33-
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.
33+
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.
3434
validations:
3535
required: true
3636

‎sandboxes/bar/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Vue ChartJS</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script type="module" defer src="./index.ts"></script>
67
</head>
7-
88
<body>
99
<div id="app"></div>
1010
</body>

‎sandboxes/bar/index.js renamed to ‎sandboxes/bar/index.ts

File renamed without changes.

‎sandboxes/bar/package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
2-
"name": "vue-chartjs-bar-example",
2+
"scripts": {
3+
"start": "vite"
4+
},
35
"dependencies": {
46
"chart.js": "^3.8.0",
5-
"typescript": "^4.6.2",
67
"vue": "^3.2.31",
78
"vue-chartjs": "^4.0.0"
89
},
910
"devDependencies": {
10-
"@vue/cli-plugin-babel": "~5.0.0"
11+
"@vitejs/plugin-vue": "^3.0.1",
12+
"typescript": "^4.9.3",
13+
"vite": "^3.2.4"
1114
}
1215
}

‎sandboxes/bar/src/App.vue

+19-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
11
<template>
2-
<BarChart />
2+
<Bar :data="data" :options="options" />
33
</template>
44

5-
<script>
6-
import BarChart from './components/barChart'
5+
<script lang="ts">
6+
import {
7+
Chart as ChartJS,
8+
Title,
9+
Tooltip,
10+
Legend,
11+
BarElement,
12+
CategoryScale,
13+
LinearScale
14+
} from 'chart.js'
15+
import { Bar } from 'vue-chartjs'
16+
import * as chartConfig from './chartConfig'
17+
18+
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
719
820
export default {
921
name: 'App',
1022
components: {
11-
BarChart
23+
Bar
24+
},
25+
data() {
26+
return chartConfig
1227
}
1328
}
1429
</script>

‎sandboxes/bar/src/chartConfig.ts

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
export const data = {
2+
labels: [
3+
'January',
4+
'February',
5+
'March',
6+
'April',
7+
'May',
8+
'June',
9+
'July',
10+
'August',
11+
'September',
12+
'October',
13+
'November',
14+
'December'
15+
],
16+
datasets: [
17+
{
18+
label: 'Data One',
19+
backgroundColor: '#f87979',
20+
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
21+
}
22+
]
23+
}
24+
25+
export const options = {
26+
responsive: true,
27+
maintainAspectRatio: false
28+
}

‎sandboxes/bar/src/components/barChart.ts

-91
This file was deleted.

‎sandboxes/bar/vite.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
export default defineConfig({
5+
plugins: [vue()]
6+
})

‎sandboxes/bubble/index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<title>Vue ChartJS</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<script type="module" defer src="./index.ts"></script>
67
</head>
7-
88
<body>
99
<div id="app"></div>
1010
</body>

‎sandboxes/bubble/index.js renamed to ‎sandboxes/bubble/index.ts

File renamed without changes.

‎sandboxes/bubble/package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
2-
"name": "vue-chartjs-bubble-example",
2+
"scripts": {
3+
"start": "vite"
4+
},
35
"dependencies": {
46
"chart.js": "^3.8.0",
5-
"typescript": "^4.6.2",
67
"vue": "^3.2.31",
78
"vue-chartjs": "^4.0.0"
89
},
910
"devDependencies": {
10-
"@vue/cli-plugin-babel": "~5.0.0"
11+
"@vitejs/plugin-vue": "^3.0.1",
12+
"typescript": "^4.9.3",
13+
"vite": "^3.2.4"
1114
}
1215
}

‎sandboxes/bubble/src/App.vue

+17-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
<template>
2-
<BubbleChart />
2+
<Bubble :data="data" :options="options" />
33
</template>
44

5-
<script>
6-
import BubbleChart from './components/bubbleChart'
5+
<script lang="ts">
6+
import {
7+
Chart as ChartJS,
8+
Tooltip,
9+
Legend,
10+
PointElement,
11+
LinearScale
12+
} from 'chart.js'
13+
import { Bubble } from 'vue-chartjs'
14+
import * as chartConfig from './chartConfig'
15+
16+
ChartJS.register(LinearScale, PointElement, Tooltip, Legend)
717
818
export default {
919
name: 'App',
1020
components: {
11-
BubbleChart
21+
Bubble
22+
},
23+
data() {
24+
return chartConfig
1225
}
1326
}
1427
</script>

‎sandboxes/bubble/src/chartConfig.ts

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
export const data = {
2+
datasets: [
3+
{
4+
label: 'Data One',
5+
backgroundColor: '#f87979',
6+
data: [
7+
{
8+
x: 20,
9+
y: 25,
10+
r: 5
11+
},
12+
{
13+
x: 40,
14+
y: 10,
15+
r: 10
16+
},
17+
{
18+
x: 30,
19+
y: 22,
20+
r: 30
21+
}
22+
]
23+
},
24+
{
25+
label: 'Data Two',
26+
backgroundColor: '#7C8CF8',
27+
data: [
28+
{
29+
x: 10,
30+
y: 30,
31+
r: 15
32+
},
33+
{
34+
x: 20,
35+
y: 20,
36+
r: 10
37+
},
38+
{
39+
x: 15,
40+
y: 8,
41+
r: 30
42+
}
43+
]
44+
}
45+
]
46+
}
47+
48+
export const options = {
49+
responsive: true,
50+
maintainAspectRatio: false
51+
}

0 commit comments

Comments
 (0)