Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: fallthrough props to canvas #955

Merged
merged 1 commit into from Dec 1, 2022
+1,110 −2,908
Merged

feat: fallthrough props to canvas #955

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/bug-report.yml
View file
Open in desktop
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
View file
Open in desktop
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
0 sandboxes/bar/index.js → sandboxes/bar/index.ts
View file
Open in desktop
File renamed without changes.
9 changes: 6 additions & 3 deletions sandboxes/bar/package.json
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop

This file was deleted.

6 changes: 6 additions & 0 deletions sandboxes/bar/vite.config.js
View file
Open in desktop
@@ -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
View file
Open in desktop
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
0 sandboxes/bubble/index.js → sandboxes/bubble/index.ts
View file
Open in desktop
File renamed without changes.
9 changes: 6 additions & 3 deletions sandboxes/bubble/package.json
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
}