feat: events forwarding, getDatasetAtEvent getElementAtEvent getEleme…

…ntsAtEvent events utils (#63)

.size-limit.json

@@ -1,24 +1,24 @@
 [
   {
     "path": "dist/index.cjs",
-    "limit": "2.1 KB",
+    "limit": "2.6 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.cjs",
-    "limit": "1.2 KB",
+    "limit": "1.3 KB",
     "import": "{ Bar }"
   },
   {
     "path": "dist/index.js",
-    "limit": "2.1 KB",
+    "limit": "2.6 KB",
     "webpack": false,
     "running": false
   },
   {
     "path": "dist/index.js",
-    "limit": "1.1 KB",
+    "limit": "1.2 KB",
     "import": "{ Bar }"
   }
 ]

README.md

@@ -133,6 +133,8 @@ ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
 - [PolarArea Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/polar)
 - [Radar Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/radar)
 - [Scatter Chart](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/scatter)
+- [ChartJS instance](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/ref)
+- [Events handling](https://codesandbox.io/s/github/SauravKanchan/svelte-chartjs/tree/master/sandboxes/events)
 
 ## Docs for v1
 

sandboxes/events/App.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Chart from './components/Chart.svelte';
+</script>
+
+<main>
+  <Chart />
+</main>

sandboxes/events/components/Chart.svelte

@@ -0,0 +1,70 @@
+<script>
+  import {
+    Base as Chart,
+    getDatasetAtEvent,
+    getElementAtEvent,
+    getElementsAtEvent,
+  } from 'svelte-chartjs';
+  import { data, options } from './data.js';
+
+  import {
+    Chart as ChartJS,
+    Tooltip,
+    Legend,
+    BarElement,
+    PointElement,
+    LineElement,
+    CategoryScale,
+    LinearScale,
+    LineController,
+    BarController,
+  } from 'chart.js';
+
+  ChartJS.register(
+    LinearScale,
+    CategoryScale,
+    BarElement,
+    PointElement,
+    LineElement,
+    Legend,
+    Tooltip,
+    LineController,
+    BarController
+  );
+
+  function printDatasetAtEvent(dataset) {
+    if (!dataset.length) return;
+
+    const datasetIndex = dataset[0].datasetIndex;
+
+    console.log(data.datasets[datasetIndex].label);
+  }
+
+  function printElementAtEvent(element) {
+    if (!element.length) return;
+
+    const { datasetIndex, index } = element[0];
+
+    console.log(data.labels[index], data.datasets[datasetIndex].data[index]);
+  }
+
+  function printElementsAtEvent(elements) {
+    if (!elements.length) return;
+
+    console.log(elements.length);
+  }
+
+  let chart;
+
+  function onClick(event) {
+    if (!chart) {
+      return;
+    }
+
+    printDatasetAtEvent(getDatasetAtEvent(chart, event));
+    printElementAtEvent(getElementAtEvent(chart, event));
+    printElementsAtEvent(getElementsAtEvent(chart, event));
+  }
+</script>
+
+<Chart bind:chart type="bar" on:click={onClick} {data} {options} />

sandboxes/events/components/data.js

@@ -0,0 +1,37 @@
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line',
+      label: 'Dataset 1',
+      borderColor: 'rgb(255, 99, 132)',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => Math.random() * 1000),
+    },
+    {
+      type: 'bar',
+      label: 'Dataset 2',
+      backgroundColor: 'rgb(75, 192, 192)',
+      data: labels.map(() => Math.random() * 1000),
+      borderColor: 'white',
+      borderWidth: 2,
+    },
+    {
+      type: 'bar',
+      label: 'Dataset 3',
+      backgroundColor: 'rgb(53, 162, 235)',
+      data: labels.map(() => Math.random() * 1000),
+    },
+  ],
+};
+
+export const options = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+};

sandboxes/events/index.js

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

sandboxes/events/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "events",
+  "dependencies": {
+    "svelte": "^3.32.3",
+    "svelte-chartjs": "^2.0.0",
+    "chart.js": "^3.8.0"
+  }
+}

sandboxes/ref/App.svelte

@@ -0,0 +1,7 @@
+<script>
+  import Chart from './components/Chart.svelte';
+</script>
+
+<main>
+  <Chart />
+</main>

sandboxes/ref/components/Chart.svelte

@@ -0,0 +1,71 @@
+<script>
+  import { onMount } from 'svelte';
+  import { Base as Chart } from 'svelte-chartjs';
+  import { data, options } from './data.js';
+
+  import {
+    Chart as ChartJS,
+    Tooltip,
+    Legend,
+    BarElement,
+    PointElement,
+    LineElement,
+    CategoryScale,
+    LinearScale,
+    LineController,
+    BarController,
+  } from 'chart.js';
+
+  ChartJS.register(
+    LinearScale,
+    CategoryScale,
+    BarElement,
+    PointElement,
+    LineElement,
+    Legend,
+    Tooltip,
+    LineController,
+    BarController
+  );
+
+  function triggerTooltip(chart) {
+    const tooltip = chart && chart.tooltip;
+
+    if (!tooltip) {
+      return;
+    }
+
+    if (tooltip.getActiveElements().length > 0) {
+      tooltip.setActiveElements([], { x: 0, y: 0 });
+    } else {
+      const { chartArea } = chart;
+
+      tooltip.setActiveElements(
+        [
+          {
+            datasetIndex: 0,
+            index: 2,
+          },
+          {
+            datasetIndex: 1,
+            index: 2,
+          },
+        ],
+        {
+          x: (chartArea.left + chartArea.right) / 2,
+          y: (chartArea.top + chartArea.bottom) / 2,
+        }
+      );
+    }
+
+    chart.update();
+  }
+
+  let chart;
+
+  onMount(() => {
+    triggerTooltip(chart);
+  });
+</script>
+
+<Chart bind:chart type="bar" {data} {options} />

sandboxes/ref/components/data.js

@@ -0,0 +1,37 @@
+const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+export const data = {
+  labels,
+  datasets: [
+    {
+      type: 'line',
+      label: 'Dataset 1',
+      borderColor: 'rgb(255, 99, 132)',
+      borderWidth: 2,
+      fill: false,
+      data: labels.map(() => Math.random() * 1000),
+    },
+    {
+      type: 'bar',
+      label: 'Dataset 2',
+      backgroundColor: 'rgb(75, 192, 192)',
+      data: labels.map(() => Math.random() * 1000),
+      borderColor: 'white',
+      borderWidth: 2,
+    },
+    {
+      type: 'bar',
+      label: 'Dataset 3',
+      backgroundColor: 'rgb(53, 162, 235)',
+      data: labels.map(() => Math.random() * 1000),
+    },
+  ],
+};
+
+export const options = {
+  scales: {
+    y: {
+      beginAtZero: true,
+    },
+  },
+};

sandboxes/ref/index.js

@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

sandboxes/ref/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "events",
+  "dependencies": {
+    "svelte": "^3.32.3",
+    "svelte-chartjs": "^2.0.0",
+    "chart.js": "^3.8.0"
+  }
+}

src/Bar.svelte

@@ -3,6 +3,7 @@
   import { Chart as ChartJS, BarController } from 'chart.js';
   import type { ChartProps } from './types';
   import Base from './Base.svelte';
+  import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'bar'>, TLabel = unknown>
     extends Omit<ChartProps<'bar', TData, TLabel>, 'type'> {
@@ -13,6 +14,9 @@
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
+  let baseRef: Base;
+
+  useForwardEvents(() => baseRef);
 </script>
 
-<Base bind:chart type="bar" {...props} />
+<Base bind:this={baseRef} bind:chart type="bar" {...props} />

src/Base.svelte

@@ -3,6 +3,7 @@
   import type { ChartType, DefaultDataPoint } from 'chart.js';
   import { Chart as ChartJS } from 'chart.js';
   import type { ChartProps } from './types';
+  import { useForwardEvents } from './utils';
 
   interface $$Props<
     TType extends ChartType = ChartType,
@@ -51,6 +52,8 @@
     if (chart) chart.destroy();
     chart = null;
   });
+
+  useForwardEvents(() => canvasRef);
 </script>
 
 <canvas bind:this={canvasRef} {...props} />

src/Bubble.svelte

@@ -3,6 +3,7 @@
   import { Chart as ChartJS, BubbleController } from 'chart.js';
   import type { ChartProps } from './types';
   import Base from './Base.svelte';
+  import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'bubble'>, TLabel = unknown>
     extends Omit<ChartProps<'bubble', TData, TLabel>, 'type'> {
@@ -13,6 +14,9 @@
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
+  let baseRef: Base;
+
+  useForwardEvents(() => baseRef);
 </script>
 
-<Base bind:chart type="bubble" {...props} />
+<Base bind:this={baseRef} bind:chart type="bubble" {...props} />

src/Doughnut.svelte

@@ -3,6 +3,7 @@
   import { Chart as ChartJS, DoughnutController } from 'chart.js';
   import type { ChartProps } from './types';
   import Base from './Base.svelte';
+  import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'doughnut'>, TLabel = unknown>
     extends Omit<ChartProps<'doughnut', TData, TLabel>, 'type'> {
@@ -13,6 +14,9 @@
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
+  let baseRef: Base;
+
+  useForwardEvents(() => baseRef);
 </script>
 
-<Base bind:chart type="doughnut" {...props} />
+<Base bind:this={baseRef} bind:chart type="doughnut" {...props} />

src/Line.svelte

@@ -3,6 +3,7 @@
   import { Chart as ChartJS, LineController } from 'chart.js';
   import type { ChartProps } from './types';
   import Base from './Base.svelte';
+  import { useForwardEvents } from './utils';
 
   interface $$Props<TData = DefaultDataPoint<'line'>, TLabel = unknown>
     extends Omit<ChartProps<'line', TData, TLabel>, 'type'> {
@@ -13,6 +14,9 @@
 
   export let chart: $$Props['chart'] = null;
   let props = $$props as $$Props;
+  let baseRef: Base;
+
+  useForwardEvents(() => baseRef);
 </script>
 
-<Base bind:chart type="line" {...props} />
+<Base bind:this={baseRef} bind:chart type="line" {...props} />