Skip to content

Commit f9f73c1

Browse files
bavocobavoco
committed
all samples working
1 parent 37c82d7 commit f9f73c1

22 files changed

+1309
-1249
lines changed

‎docs/.vitepress/config.mjs

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default defineConfig({
3333
{ text: 'Home', link: '/' },
3434
{ text: 'Guide', link: '/guide/integration' },
3535
{ text: 'Reference', link: '/api/README' },
36-
{ text: 'Samples', link: `/samples/` },
36+
{ text: 'Samples', link: `/samples/basic` },
3737
{
3838
text: 'Ecosystem',
3939
ariaLabel: 'Community Menu',
@@ -47,7 +47,6 @@ export default defineConfig({
4747
{
4848
text: 'Guide',
4949
collapsed: false,
50-
link: '/guide/integration',
5150
items: [
5251
{ text: 'Integration', link: '/guide/integration' },
5352
{ text: 'Usage', link: '/guide/usage' },
@@ -59,7 +58,6 @@ export default defineConfig({
5958
{
6059
text: 'Samples',
6160
collapsed: false,
62-
link: '/samples/basic',
6361
items: [
6462
{ text: 'Basic', link: '/samples/basic' },
6563
{

‎docs/samples/drag/category.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
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 DATA_COUNT = 20;
8+
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};
9+
const data = {
10+
labels: Utils.months({count: DATA_COUNT}),
11+
datasets: [{
12+
label: 'Dataset 1',
13+
borderColor: Utils.randomColor(0.7),
14+
backgroundColor: Utils.randomColor(0.5),
15+
data: Utils.numbers(NUMBER_CFG),
16+
}, {
17+
label: 'Dataset 2',
18+
borderColor: Utils.randomColor(0.7),
19+
backgroundColor: Utils.randomColor(0.5),
20+
data: Utils.numbers(NUMBER_CFG),
21+
}, {
22+
label: 'Dataset 3',
23+
borderColor: Utils.randomColor(0.7),
24+
backgroundColor: Utils.randomColor(0.5),
25+
data: Utils.numbers(NUMBER_CFG),
26+
}]
27+
};
28+
/* playground-fold-end */
29+
30+
// scales
31+
/* playground-fold */
32+
const scaleOpts = {
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+
type: 'category',
45+
},
46+
y: {
47+
type: 'linear',
48+
ticks: {
49+
callback: (val, index, ticks) => index === 0 || index === ticks.length - 1 ? null : val,
50+
},
51+
},
52+
};
53+
Object.keys(scales).forEach(scale => Object.assign(scales[scale], scaleOpts));
54+
/* playground-fold-end */
55+
56+
// chart
57+
const ctx = document.querySelector('canvas');
58+
const chart = new Chart(ctx, {
59+
type: 'bar',
60+
data: data,
61+
options: {
62+
scales: scales,
63+
plugins: {
64+
tooltip: false,
65+
zoom: {
66+
pan: {
67+
enabled: true,
68+
mode: 'x',
69+
modifierKey: 'ctrl',
70+
},
71+
zoom: {
72+
drag: {
73+
enabled: true
74+
},
75+
mode: 'x',
76+
},
77+
}
78+
},
79+
}
80+
});
81+
82+
// button
83+
/* playground-fold */
84+
const btn = document.createElement('button');
85+
btn.textContent = 'Reset zoom';
86+
btn.addEventListener('click', () => chart.resetZoom());
87+
document.body.append(btn);
88+
/* playground-fold-end */

‎docs/samples/drag/category.md

Lines changed: 7 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -2,93 +2,12 @@
22

33
Zooming is performed by clicking and selecting an area over the chart with the mouse. Pan is activated by keeping `ctrl` pressed.
44

5-
```js chart-editor
6-
// <block:data:1>
7-
const DATA_COUNT = 20
8-
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100}
9-
const data = {
10-
labels: Utils.months({count: DATA_COUNT}),
11-
datasets: [{
12-
label: 'Dataset 1',
13-
borderColor: Utils.randomColor(0.7),
14-
backgroundColor: Utils.randomColor(0.5),
15-
data: Utils.numbers(NUMBER_CFG),
16-
}, {
17-
label: 'Dataset 2',
18-
borderColor: Utils.randomColor(0.7),
19-
backgroundColor: Utils.randomColor(0.5),
20-
data: Utils.numbers(NUMBER_CFG),
21-
}, {
22-
label: 'Dataset 3',
23-
borderColor: Utils.randomColor(0.7),
24-
backgroundColor: Utils.randomColor(0.5),
25-
data: Utils.numbers(NUMBER_CFG),
26-
}]
27-
}
28-
// </block:data>
5+
<div data-sample-holder></div>
296

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

55-
// <block:config:0>
56-
const config = {
57-
type: 'bar',
58-
data: data,
59-
options: {
60-
scales: scales,
61-
plugins: {
62-
tooltip: false,
63-
zoom: {
64-
pan: {
65-
enabled: true,
66-
mode: 'x',
67-
modifierKey: 'ctrl',
68-
},
69-
zoom: {
70-
drag: {
71-
enabled: true
72-
},
73-
mode: 'x',
74-
},
75-
}
76-
},
77-
}
78-
}
79-
// </block:config>
80-
81-
const actions = [
82-
{
83-
name: 'Reset zoom',
84-
handler(chart) {
85-
chart.resetZoom()
86-
}
87-
}
88-
]
89-
90-
module.exports = {
91-
actions,
92-
config,
93-
}
94-
```
12+
onMounted(() => setupSample(code));
13+
</script>

‎docs/samples/drag/linear.js

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
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+
// zoom
57+
const dragColor = Utils.randomColor(0.4);
58+
const zoomOptions = {
59+
pan: {
60+
enabled: true,
61+
mode: 'xy',
62+
modifierKey: 'ctrl',
63+
},
64+
zoom: {
65+
mode: 'xy',
66+
drag: {
67+
enabled: true,
68+
borderColor: 'rgb(54, 162, 235)',
69+
borderWidth: 1,
70+
backgroundColor: 'rgba(54, 162, 235, 0.3)'
71+
}
72+
}
73+
};
74+
75+
// chart
76+
/* playground-fold */
77+
const zoomStatus = () => zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
78+
79+
const ctx = document.querySelector('canvas');
80+
const chart = new Chart(ctx, {
81+
type: 'scatter',
82+
data: data,
83+
options: {
84+
scales: scales,
85+
plugins: {
86+
zoom: zoomOptions,
87+
title: {
88+
display: true,
89+
position: 'bottom',
90+
text: (ctx) => 'Zoom: ' + zoomStatus()
91+
}
92+
},
93+
}
94+
});
95+
/* playground-fold-end */
96+
97+
// buttons
98+
/* playground-fold */
99+
createButton('Toggle zoom', () => {
100+
zoomOptions.zoom.drag.enabled = !zoomOptions.zoom.drag.enabled;
101+
chart.update();
102+
});
103+
createButton('Reset zoom', () => chart.resetZoom());
104+
105+
function createButton(label, handler) {
106+
const btn = document.createElement('button');
107+
btn.textContent = label;
108+
btn.addEventListener('click', handler);
109+
document.body.append(btn);
110+
}
111+
/* playground-fold-end */

0 commit comments

Comments
 (0)