Skip to content

Commit e84bd77

Browse files
dangreendangreen
authored
feat: events forwarding, getDatasetAtEvent getElementAtEvent getElementsAtEvent events utils (#63)
1 parent d59111a commit e84bd77

34 files changed

+444
-60
lines changed

‎.size-limit.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
[
22
{
33
"path": "dist/index.cjs",
4-
"limit": "2.1 KB",
4+
"limit": "2.6 KB",
55
"webpack": false,
66
"running": false
77
},
88
{
99
"path": "dist/index.cjs",
10-
"limit": "1.2 KB",
10+
"limit": "1.3 KB",
1111
"import": "{ Bar }"
1212
},
1313
{
1414
"path": "dist/index.js",
15-
"limit": "2.1 KB",
15+
"limit": "2.6 KB",
1616
"webpack": false,
1717
"running": false
1818
},
1919
{
2020
"path": "dist/index.js",
21-
"limit": "1.1 KB",
21+
"limit": "1.2 KB",
2222
"import": "{ Bar }"
2323
}
2424
]

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,8 @@ ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
133133
- [PolarArea Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/polar)
134134
- [Radar Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/radar)
135135
- [Scatter Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/scatter)
136+
- [ChartJS instance](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/ref)
137+
- [Events handling](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/events)
136138

137139
## Docs for v1
138140

‎sandboxes/events/App.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
import Chart from './components/Chart.svelte';
3+
</script>
4+
5+
<main>
6+
<Chart />
7+
</main>

‎sandboxes/events/components/Chart.svelte

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script>
2+
import {
3+
Base as Chart,
4+
getDatasetAtEvent,
5+
getElementAtEvent,
6+
getElementsAtEvent,
7+
} from 'svelte-chartjs';
8+
import { data, options } from './data.js';
9+
10+
import {
11+
Chart as ChartJS,
12+
Tooltip,
13+
Legend,
14+
BarElement,
15+
PointElement,
16+
LineElement,
17+
CategoryScale,
18+
LinearScale,
19+
LineController,
20+
BarController,
21+
} from 'chart.js';
22+
23+
ChartJS.register(
24+
LinearScale,
25+
CategoryScale,
26+
BarElement,
27+
PointElement,
28+
LineElement,
29+
Legend,
30+
Tooltip,
31+
LineController,
32+
BarController
33+
);
34+
35+
function printDatasetAtEvent(dataset) {
36+
if (!dataset.length) return;
37+
38+
const datasetIndex = dataset[0].datasetIndex;
39+
40+
console.log(data.datasets[datasetIndex].label);
41+
}
42+
43+
function printElementAtEvent(element) {
44+
if (!element.length) return;
45+
46+
const { datasetIndex, index } = element[0];
47+
48+
console.log(data.labels[index], data.datasets[datasetIndex].data[index]);
49+
}
50+
51+
function printElementsAtEvent(elements) {
52+
if (!elements.length) return;
53+
54+
console.log(elements.length);
55+
}
56+
57+
let chart;
58+
59+
function onClick(event) {
60+
if (!chart) {
61+
return;
62+
}
63+
64+
printDatasetAtEvent(getDatasetAtEvent(chart, event));
65+
printElementAtEvent(getElementAtEvent(chart, event));
66+
printElementsAtEvent(getElementsAtEvent(chart, event));
67+
}
68+
</script>
69+
70+
<Chart bind:chart type="bar" on:click={onClick} {data} {options} />

‎sandboxes/events/components/data.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
2+
3+
export const data = {
4+
labels,
5+
datasets: [
6+
{
7+
type: 'line',
8+
label: 'Dataset 1',
9+
borderColor: 'rgb(255, 99, 132)',
10+
borderWidth: 2,
11+
fill: false,
12+
data: labels.map(() => Math.random() * 1000),
13+
},
14+
{
15+
type: 'bar',
16+
label: 'Dataset 2',
17+
backgroundColor: 'rgb(75, 192, 192)',
18+
data: labels.map(() => Math.random() * 1000),
19+
borderColor: 'white',
20+
borderWidth: 2,
21+
},
22+
{
23+
type: 'bar',
24+
label: 'Dataset 3',
25+
backgroundColor: 'rgb(53, 162, 235)',
26+
data: labels.map(() => Math.random() * 1000),
27+
},
28+
],
29+
};
30+
31+
export const options = {
32+
scales: {
33+
y: {
34+
beginAtZero: true,
35+
},
36+
},
37+
};

‎sandboxes/events/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import App from './App.svelte';
2+
3+
const app = new App({
4+
target: document.body,
5+
});
6+
7+
export default app;

‎sandboxes/events/package.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "events",
3+
"dependencies": {
4+
"svelte": "^3.32.3",
5+
"svelte-chartjs": "^2.0.0",
6+
"chart.js": "^3.8.0"
7+
}
8+
}

‎sandboxes/ref/App.svelte

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script>
2+
import Chart from './components/Chart.svelte';
3+
</script>
4+
5+
<main>
6+
<Chart />
7+
</main>

‎sandboxes/ref/components/Chart.svelte

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script>
2+
import { onMount } from 'svelte';
3+
import { Base as Chart } from 'svelte-chartjs';
4+
import { data, options } from './data.js';
5+
6+
import {
7+
Chart as ChartJS,
8+
Tooltip,
9+
Legend,
10+
BarElement,
11+
PointElement,
12+
LineElement,
13+
CategoryScale,
14+
LinearScale,
15+
LineController,
16+
BarController,
17+
} from 'chart.js';
18+
19+
ChartJS.register(
20+
LinearScale,
21+
CategoryScale,
22+
BarElement,
23+
PointElement,
24+
LineElement,
25+
Legend,
26+
Tooltip,
27+
LineController,
28+
BarController
29+
);
30+
31+
function triggerTooltip(chart) {
32+
const tooltip = chart && chart.tooltip;
33+
34+
if (!tooltip) {
35+
return;
36+
}
37+
38+
if (tooltip.getActiveElements().length > 0) {
39+
tooltip.setActiveElements([], { x: 0, y: 0 });
40+
} else {
41+
const { chartArea } = chart;
42+
43+
tooltip.setActiveElements(
44+
[
45+
{
46+
datasetIndex: 0,
47+
index: 2,
48+
},
49+
{
50+
datasetIndex: 1,
51+
index: 2,
52+
},
53+
],
54+
{
55+
x: (chartArea.left + chartArea.right) / 2,
56+
y: (chartArea.top + chartArea.bottom) / 2,
57+
}
58+
);
59+
}
60+
61+
chart.update();
62+
}
63+
64+
let chart;
65+
66+
onMount(() => {
67+
triggerTooltip(chart);
68+
});
69+
</script>
70+
71+
<Chart bind:chart type="bar" {data} {options} />

‎sandboxes/ref/components/data.js

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
2+
3+
export const data = {
4+
labels,
5+
datasets: [
6+
{
7+
type: 'line',
8+
label: 'Dataset 1',
9+
borderColor: 'rgb(255, 99, 132)',
10+
borderWidth: 2,
11+
fill: false,
12+
data: labels.map(() => Math.random() * 1000),
13+
},
14+
{
15+
type: 'bar',
16+
label: 'Dataset 2',
17+
backgroundColor: 'rgb(75, 192, 192)',
18+
data: labels.map(() => Math.random() * 1000),
19+
borderColor: 'white',
20+
borderWidth: 2,
21+
},
22+
{
23+
type: 'bar',
24+
label: 'Dataset 3',
25+
backgroundColor: 'rgb(53, 162, 235)',
26+
data: labels.map(() => Math.random() * 1000),
27+
},
28+
],
29+
};
30+
31+
export const options = {
32+
scales: {
33+
y: {
34+
beginAtZero: true,
35+
},
36+
},
37+
};

0 commit comments

Comments
 (0)