Skip to content

Commit 30fe1da

Browse files
bavocobavoco
committed
fix usage example
1 parent 738e454 commit 30fe1da

File tree

10 files changed

+167
-162
lines changed

10 files changed

+167
-162
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ docs/api
1717

1818
docs/.vitepress/dist
1919
docs/.vitepress/cache
20+
docs/public/register.bundle.esm.js
2021

2122
# Development
2223
.DS_Store

‎docs/.vitepress/config.mjs

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
import { defineConfig } from 'vitepress'
1+
import { defineConfig } from 'vitepress';
2+
import vue from '@vitejs/plugin-vue';
3+
import process from 'node:process';
4+
25
const docsVersion = "VERSION";
36
const base = process.env.NODE_ENV === "development" ? '/chartjs-plugin-zoom/master/' : `/chartjs-plugin-zoom/${docsVersion}/`;
47

@@ -96,5 +99,17 @@ export default defineConfig({
9699
socialLinks: [
97100
{ icon: 'github', link: 'https://github.com/chartjs/chartjs-plugin-zoom' },
98101
]
102+
},
103+
vue: {
104+
template: {
105+
compilerOptions: {
106+
isCustomElement: tag => tag.startsWith('playground-')
107+
}
108+
}
109+
},
110+
vite: {
111+
optimizeDeps: {
112+
exclude: ['playground-elements']
113+
}
99114
}
100115
})

‎docs/.vuepress/config.ts

Lines changed: 0 additions & 88 deletions
This file was deleted.

‎docs/guide/usage-example.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/* playground-fold */
2+
import Chart from './register.js';
3+
/* playground-fold-end */
4+
5+
const ctx = document.querySelector('canvas');
6+
7+
const chart = new Chart(ctx, {
8+
type: 'line',
9+
data: {
10+
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
11+
datasets: [{
12+
label: 'My First Dataset',
13+
data: [65, 59, 80, 81, 56, 55, 40],
14+
fill: false,
15+
borderColor: 'rgb(75, 192, 192)',
16+
tension: 0.1
17+
}]
18+
},
19+
options: {
20+
plugins: {
21+
zoom: {
22+
zoom: {
23+
wheel: {
24+
enabled: true,
25+
},
26+
pinch: {
27+
enabled: true,
28+
},
29+
mode: 'xy',
30+
}
31+
}
32+
}
33+
}
34+
});
35+
36+
document.querySelector('button').addEventListener('click', () => {
37+
chart.resetZoom();
38+
})

‎docs/guide/usage.md

Lines changed: 35 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,39 @@
22

33
Using the zoom and pan plugin is very simple. Once the plugin is [registered](./integration) zoom options provided to the chart will be used. In this example, scroll zoom is enabled.
44

5-
```js chart-editor
6-
/* <block:config:0> */
7-
const config = {
8-
type: 'line',
9-
data: {
10-
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
11-
datasets: [{
12-
label: 'My First Dataset',
13-
data: [65, 59, 80, 81, 56, 55, 40],
14-
fill: false,
15-
borderColor: 'rgb(75, 192, 192)',
16-
tension: 0.1
17-
}]
18-
},
19-
options: {
20-
plugins: {
21-
zoom: {
22-
zoom: {
23-
wheel: {
24-
enabled: true,
25-
},
26-
pinch: {
27-
enabled: true
28-
},
29-
mode: 'xy',
30-
}
31-
}
32-
}
33-
}
34-
}
35-
/* </block:config> */
5+
<playground-project id="projectUsage"></playground-project>
6+
<playground-preview project="projectUsage" style="height: 420px"></playground-preview>
7+
<playground-file-editor project="projectUsage" style="height: max-content"></playground-file-editor>
368

37-
module.exports = {
38-
actions: [
39-
{
40-
name: 'Reset zoom',
41-
handler: function(chart) {
42-
chart.resetZoom()
43-
}
44-
}
45-
],
46-
config
47-
}
48-
```
9+
<script setup>
10+
import {onMounted} from 'vue';
11+
import code from "./usage-example.js?raw";
12+
import registerBundle from "../public/register.bundle.esm.js?raw";
13+
14+
onMounted(async () => {
15+
await import("playground-elements/playground-project.js");
16+
await import("playground-elements/playground-file-editor.js");
17+
await import("playground-elements/playground-preview.js");
18+
19+
const projElem = document.querySelector('playground-project');
20+
projElem.config = {
21+
files: {
22+
'index.js': {
23+
content: code,
24+
},
25+
'index.html': {
26+
content: `<!doctype html>
27+
<body>
28+
<canvas></canvas>
29+
<button type="button">Reset zoom</button>
30+
<script type="module" src="./index.js">&lt;/script>
31+
</body>`.replace('&lt;', '<')
32+
,
33+
},
34+
'register.js': {
35+
content: registerBundle
36+
},
37+
},
38+
};
39+
})
40+
</script>

‎docs/scripts/defaults.js

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎docs/scripts/register.js

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1-
import Chart from 'chart.js/auto'
2-
import 'chartjs-adapter-date-fns'
3-
import zoomPlugin from '../../dist/chartjs-plugin-zoom.esm.js'
1+
import Chart from 'chart.js/auto';
2+
import 'chartjs-adapter-date-fns';
3+
import zoomPlugin from '../../dist/chartjs-plugin-zoom.esm.js';
4+
import {defaults} from 'chart.js';
45

56
Chart.register(zoomPlugin)
67

78
Chart.register({
89
id: 'version',
910
afterDraw(chart) {
10-
const ctx = chart.ctx
11-
ctx.save()
12-
ctx.font = '9px monospace'
13-
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
14-
ctx.textAlign = 'right'
15-
ctx.textBaseline = 'top'
11+
const ctx = chart.ctx;
12+
ctx.save();
13+
ctx.font = '9px monospace';
14+
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
15+
ctx.textAlign = 'right';
16+
ctx.textBaseline = 'top';
1617
ctx.fillText(
1718
'Chart.js v' + Chart.version + ' + chartjs-plugin-zoom v' + zoomPlugin.version,
1819
chart.chartArea.right,
1920
0
20-
)
21-
ctx.restore()
21+
);
22+
ctx.restore();
23+
}
24+
});
25+
26+
defaults.set({
27+
datasets: {
28+
line: {
29+
tension: 0.4
30+
}
31+
},
32+
interaction: {
33+
mode: 'nearest',
34+
axis: 'x',
35+
intersect: false
2236
},
23-
})
37+
plugins: {
38+
legend: false
39+
},
40+
});
41+
42+
export default Chart;

‎package-lock.json

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
"karma-spec-reporter": "0.0.36",
8383
"ng-hammerjs": "^2.0.8",
8484
"pixelmatch": "^6.0.0",
85+
"playground-elements": "^0.18.1",
8586
"rollup": "^4.27.4",
8687
"rollup-plugin-cleanup": "^3.2.1",
8788
"rollup-plugin-istanbul": "^5.0.0",

‎rollup.config.js

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,4 +90,22 @@ export default [
9090
},
9191
external: allDependencies,
9292
},
93-
]
93+
{
94+
input: 'docs/scripts/register.js',
95+
plugins: [
96+
commonjs({
97+
include: 'node_modules/**',
98+
}),
99+
json(),
100+
nodeResolve(),
101+
terser({output: {comments: 'some'}})
102+
],
103+
output: {
104+
name,
105+
file: `docs/public/register.bundle.esm.js`,
106+
banner,
107+
format: 'esm',
108+
indent: false
109+
},
110+
},
111+
];

0 commit comments

Comments
 (0)