Skip to content

Commit 4bc6643

Browse files
bavocobavoco
committed
fix usage example
1 parent f7d502c commit 4bc6643

File tree

10 files changed

+877
-149
lines changed

10 files changed

+877
-149
lines changed

‎.gitignore‎

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

1717
docs/.vitepress/dist
1818
docs/.vitepress/cache
19+
docs/public/register.bundle.esm.js
1920

2021
# Development
2122
.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.js‎

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: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Chart from 'chart.js/auto';
22
import 'chartjs-adapter-date-fns';
33
import zoomPlugin from '../../dist/chartjs-plugin-zoom.esm.js';
4+
import {defaults} from 'chart.js';
45

56
Chart.register(zoomPlugin);
67

@@ -17,3 +18,21 @@ Chart.register({
1718
ctx.restore();
1819
}
1920
});
21+
22+
defaults.set({
23+
datasets: {
24+
line: {
25+
tension: 0.4
26+
}
27+
},
28+
interaction: {
29+
mode: 'nearest',
30+
axis: 'x',
31+
intersect: false
32+
},
33+
plugins: {
34+
legend: false
35+
},
36+
});
37+
38+
export default Chart;

0 commit comments

Comments
 (0)