Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
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`
  • Loading branch information
dangreen committed Dec 1, 2022
1 parent e272b3c commit 6675cb0
Show file tree
Hide file tree
Showing 116 changed files with 1,110 additions and 2,908 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug-report.yml
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions sandboxes/bar/index.html
Expand Up @@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue ChartJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" defer src="./index.ts"></script>
</head>

<body>
<div id="app"></div>
</body>
Expand Down
File renamed without changes.
9 changes: 6 additions & 3 deletions 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"
}
}
23 changes: 19 additions & 4 deletions sandboxes/bar/src/App.vue
@@ -1,14 +1,29 @@
<template>
<BarChart />
<Bar :data="data" :options="options" />
</template>

<script>
import BarChart from './components/barChart'
<script lang="ts">
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
import * as chartConfig from './chartConfig'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
export default {
name: 'App',
components: {
BarChart
Bar
},
data() {
return chartConfig
}
}
</script>
28 changes: 28 additions & 0 deletions 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
}
91 changes: 0 additions & 91 deletions sandboxes/bar/src/components/barChart.ts

This file was deleted.

6 changes: 6 additions & 0 deletions sandboxes/bar/vite.config.js
@@ -0,0 +1,6 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
plugins: [vue()]
})
4 changes: 2 additions & 2 deletions sandboxes/bubble/index.html
Expand Up @@ -2,9 +2,9 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue ChartJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" defer src="./index.ts"></script>
</head>

<body>
<div id="app"></div>
</body>
Expand Down
File renamed without changes.
9 changes: 6 additions & 3 deletions 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"
}
}
21 changes: 17 additions & 4 deletions sandboxes/bubble/src/App.vue
@@ -1,14 +1,27 @@
<template>
<BubbleChart />
<Bubble :data="data" :options="options" />
</template>

<script>
import BubbleChart from './components/bubbleChart'
<script lang="ts">
import {
Chart as ChartJS,
Tooltip,
Legend,
PointElement,
LinearScale
} from 'chart.js'
import { Bubble } from 'vue-chartjs'
import * as chartConfig from './chartConfig'
ChartJS.register(LinearScale, PointElement, Tooltip, Legend)
export default {
name: 'App',
components: {
BubbleChart
Bubble
},
data() {
return chartConfig
}
}
</script>
51 changes: 51 additions & 0 deletions 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
}

0 comments on commit 6675cb0

Please sign in to comment.