Skip to content

Commit 37c82d7

Browse files
bavocobavoco
committed
more samples working
1 parent 30fe1da commit 37c82d7

File tree

16 files changed

+624
-529
lines changed

16 files changed

+624
-529
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ docs/api
1818
docs/.vitepress/dist
1919
docs/.vitepress/cache
2020
docs/public/register.bundle.esm.js
21+
docs/public/utils.bundle.esm.js
2122

2223
# Development
2324
.DS_Store

‎docs/.vitepress/config.mjs

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { defineConfig } from 'vitepress';
2-
import vue from '@vitejs/plugin-vue';
32
import process from 'node:process';
43

54
const docsVersion = "VERSION";
@@ -10,7 +9,8 @@ export default defineConfig({
109
title: "chartjs-plugin-zoom",
1110
description: "A zoom and pan plugin for Chart.js >= 3.0.0",
1211
head: [
13-
['link', { rel: 'icon', href: '/favicon.ico' }],
12+
['link', { rel: 'icon', href: base + 'favicon.ico' }],
13+
['link', { rel: 'stylesheet', href: base + 'styles.css' }],
1414
],
1515
base,
1616
outDir: '../../dist/docs',
@@ -41,7 +41,6 @@ export default defineConfig({
4141
{ text: 'Awesome', link: 'https://github.com/chartjs/awesome' },
4242
]
4343
},
44-
{ text: 'GitHub', link: 'https://github.com/chartjs/chartjs-plugin-zoom' },
4544
],
4645

4746
sidebar: [

‎docs/guide/usage-example.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
/* playground-fold */
1+
/* playground-hide */
22
import Chart from './register.js';
3-
/* playground-fold-end */
4-
3+
/* playground-hide-end */
54
const ctx = document.querySelector('canvas');
65

76
const chart = new Chart(ctx, {
@@ -33,6 +32,9 @@ const chart = new Chart(ctx, {
3332
}
3433
});
3534

36-
document.querySelector('button').addEventListener('click', () => {
35+
const btnResetZoom = document.createElement('button');
36+
btnResetZoom.textContent = 'Reset zoom';
37+
document.body.append(btnResetZoom);
38+
btnResetZoom.addEventListener('click', () => {
3739
chart.resetZoom();
3840
})

‎docs/guide/usage.md

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,12 @@
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-
<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>
5+
<div data-sample-holder></div>
86

97
<script setup>
108
import {onMounted} from 'vue';
9+
import {setupSample} from '../scripts/setup-sample.js';
1110
import code from "./usage-example.js?raw";
12-
import registerBundle from "../public/register.bundle.esm.js?raw";
1311

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-
})
12+
onMounted(() => setupSample(code));
4013
</script>

‎docs/public/sample-styles.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
margin: 0;
3+
}
4+
5+
canvas {
6+
margin-block: 8px;
7+
}
8+
9+
button {
10+
transition: background-color .25s,border-color .25s;
11+
background: rgba(40,44,52,.05);
12+
border: 1px solid transparent;
13+
border-radius: 6px;
14+
color: #3080d0;
15+
text-decoration: none!important;
16+
display: inline-block;
17+
font-size: .8rem;
18+
padding: 8px 16px;
19+
margin-inline-end: 8px;
20+
margin-block-end: 8px;
21+
cursor: pointer;
22+
-webkit-user-select: none;
23+
-moz-user-select: none;
24+
user-select: none
25+
}
26+
27+
button:hover {
28+
background-color: rgba(48,128,208,.15);
29+
border-color: rgba(48,128,208,.2);
30+
color: #3080d0
31+
}
32+
33+
button:active {
34+
background-color: rgba(48,128,208,.3);
35+
border-color: rgba(48,128,208,.4);
36+
color: #3080d0
37+
}

‎docs/public/styles.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
playground-file-editor {
2+
background-color: var(--vp-code-block-bg, '#f6f6f7');
3+
--playground-code-background: var(--vp-code-block-bg, '#f6f6f7');
4+
height: max-content;
5+
border-radius: 8px;
6+
padding-block: 8px;
7+
}
8+
9+
@media (min-width: 640px) {
10+
playground-code-editor {
11+
border-radius: 8px;
12+
}
13+
}

‎docs/samples/api.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* playground-hide */
2+
import Chart from '../scripts/register.js';
3+
import * as Utils from '../scripts/utils.js';
4+
/* playground-hide-end */
5+
// data
6+
/* playground-fold */
7+
const NUMBER_CFG = {count: 20, min: -100, max: 100};
8+
const data = {
9+
datasets: [{
10+
label: 'My First dataset',
11+
borderColor: Utils.randomColor(0.4),
12+
backgroundColor: Utils.randomColor(0.1),
13+
pointBorderColor: Utils.randomColor(0.7),
14+
pointBackgroundColor: Utils.randomColor(0.5),
15+
pointBorderWidth: 1,
16+
data: Utils.points(NUMBER_CFG),
17+
}, {
18+
label: 'My Second dataset',
19+
borderColor: Utils.randomColor(0.4),
20+
backgroundColor: Utils.randomColor(0.1),
21+
pointBorderColor: Utils.randomColor(0.7),
22+
pointBackgroundColor: Utils.randomColor(0.5),
23+
pointBorderWidth: 1,
24+
data: Utils.points(NUMBER_CFG),
25+
}]
26+
};
27+
/* playground-fold-end */
28+
29+
// scales
30+
/* playground-fold */
31+
const scaleOpts = {
32+
reverse: true,
33+
ticks: {
34+
callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
35+
},
36+
grid: {
37+
borderColor: Utils.randomColor(1),
38+
color: 'rgba( 0, 0, 0, 0.1)',
39+
},
40+
title: {
41+
display: true,
42+
text: (ctx) => ctx.scale.axis + ' axis',
43+
}
44+
};
45+
const scales = {
46+
x: {
47+
position: 'top',
48+
},
49+
y: {
50+
position: 'right',
51+
},
52+
};
53+
Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
54+
/* playground-fold-end */
55+
56+
// chart
57+
/* playground-fold */
58+
const ctx = document.querySelector('canvas');
59+
const chart = new Chart(ctx, {
60+
type: 'scatter',
61+
data: data,
62+
options: {
63+
scales: scales,
64+
}
65+
});
66+
/* playground-fold-end */
67+
68+
// buttons
69+
createButton('Zoom +10%', () => chart.zoom(1.1));
70+
createButton('Zoom -10%', () => chart.zoom(0.9));
71+
createButton('Zoom x +10%', () => chart.zoom({x: 1.1}));
72+
createButton('Zoom x -10%', () => chart.zoom({x: 0.9}));
73+
createButton('Pan x 100px (anim)', () => chart.pan({x: 100}, undefined, 'default'));
74+
createButton('Pan x -100px (anim)', () => chart.pan({x: -100}, undefined, 'default'));
75+
createButton('Zoom x: 0..-100, y: 0..100', () => {
76+
chart.zoomScale('x', {min: -100, max: 0}, 'default');
77+
chart.zoomScale('y', {min: 0, max: 100}, 'default');
78+
});
79+
createButton('Reset zoom', () => chart.resetZoom());
80+
81+
function createButton(label, handler) {
82+
const btn = document.createElement('button');
83+
btn.textContent = label;
84+
btn.addEventListener('click', handler);
85+
document.body.append(btn);
86+
}

‎docs/samples/api.md

Lines changed: 7 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,115 +1,11 @@
11
# API
22

3-
```js chart-editor
4-
// <block:data:1>
5-
const NUMBER_CFG = {count: 20, min: -100, max: 100}
6-
const data = {
7-
datasets: [{
8-
label: 'My First dataset',
9-
borderColor: Utils.randomColor(0.4),
10-
backgroundColor: Utils.randomColor(0.1),
11-
pointBorderColor: Utils.randomColor(0.7),
12-
pointBackgroundColor: Utils.randomColor(0.5),
13-
pointBorderWidth: 1,
14-
data: Utils.points(NUMBER_CFG),
15-
}, {
16-
label: 'My Second dataset',
17-
borderColor: Utils.randomColor(0.4),
18-
backgroundColor: Utils.randomColor(0.1),
19-
pointBorderColor: Utils.randomColor(0.7),
20-
pointBackgroundColor: Utils.randomColor(0.5),
21-
pointBorderWidth: 1,
22-
data: Utils.points(NUMBER_CFG),
23-
}]
24-
}
25-
// </block:data>
3+
<div data-sample-holder></div>
264

27-
// <block:scales:2>
28-
const scaleOpts = {
29-
reverse: true,
30-
ticks: {
31-
callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
32-
},
33-
grid: {
34-
borderColor: Utils.randomColor(1),
35-
color: 'rgba( 0, 0, 0, 0.1)',
36-
},
37-
title: {
38-
display: true,
39-
text: (ctx) => ctx.scale.axis + ' axis',
40-
}
41-
}
42-
const scales = {
43-
x: {
44-
position: 'top',
45-
},
46-
y: {
47-
position: 'right',
48-
},
49-
}
50-
Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts))
51-
// </block:scales>
5+
<script setup>
6+
import {onMounted} from 'vue';
7+
import {setupSample} from '../scripts/setup-sample.js';
8+
import code from "./api.js?raw";
529

53-
// <block:config:1>
54-
const config = {
55-
type: 'scatter',
56-
data: data,
57-
options: {
58-
scales: scales,
59-
}
60-
}
61-
// </block:config>
62-
63-
// <block:actions:0>
64-
// Note: changes to these actions are not applied to the buttons.
65-
const actions = [
66-
{
67-
name: 'Zoom +10%',
68-
handler(chart) {
69-
chart.zoom(1.1)
70-
}
71-
}, {
72-
name: 'Zoom -10%',
73-
handler(chart) {
74-
chart.zoom(2 - 1 / 0.9)
75-
},
76-
}, {
77-
name: 'Zoom x +10%',
78-
handler(chart) {
79-
chart.zoom({x: 1.1})
80-
}
81-
}, {
82-
name: 'Zoom x -10%',
83-
handler(chart) {
84-
chart.zoom({x: 2 - 1 / 0.9})
85-
},
86-
}, {
87-
name: 'Pan x 100px (anim)',
88-
handler(chart) {
89-
chart.pan({x: 100}, undefined, 'default')
90-
}
91-
}, {
92-
name: 'Pan x -100px (anim)',
93-
handler(chart) {
94-
chart.pan({x: -100}, undefined, 'default')
95-
},
96-
}, {
97-
name: 'Zoom x: 0..-100, y: 0..100',
98-
handler(chart) {
99-
chart.zoomScale('x', {min: -100, max: 0}, 'default')
100-
chart.zoomScale('y', {min: 0, max: 100}, 'default')
101-
}
102-
}, {
103-
name: 'Reset zoom',
104-
handler(chart) {
105-
chart.resetZoom()
106-
}
107-
}
108-
]
109-
// </block:actions>
110-
111-
module.exports = {
112-
actions,
113-
config
114-
}
115-
```
10+
onMounted(() => setupSample(code, {height: '500px'}));
11+
</script>

0 commit comments

Comments
 (0)