Aplicación de patrón observer en archivo chart

stories/Chart.tsx

@@ -1,17 +1,11 @@
-import React, {
-  MouseEvent,
-  useRef,
-  useState,
-  useEffect,
-  useReducer,
-  useMemo,
-} from 'react';
+import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
 import 'chart.js/auto';
 import type { InteractionItem } from 'chart.js';
 import { Chart as ChartJS } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import zoomPlugin from 'chartjs-plugin-zoom';
+
 import {
   Chart,
   getDatasetAtEvent,
@@ -24,25 +18,8 @@ import * as data from './Chart.data';
 
 ChartJS.register(annotationPlugin, zoomPlugin);
 
-export default {
-  title: 'Components/Chart',
-  component: Chart,
-  parameters: {
-    layout: 'centered',
-  },
-  args: {
-    width: 500,
-    height: 400,
-  },
-};
-
-export const MultiType = args => <Chart {...args} />;
-
-MultiType.args = {
-  data: multitypeChart.data,
-};
-
-export const Dynamic = args => {
+// Container Component
+const ChartContainer = ({ data, options }) => {
   const [dynamicData, setDynamicData] = useState(data.getDynamicData);
 
   useEffect(() => {
@@ -54,116 +31,83 @@ export const Dynamic = args => {
     return () => clearInterval(interval);
   }, []);
 
-  return <Chart {...args} data={dynamicData} />;
-};
-
-Dynamic.args = {
-  options: data.dynamicOptions,
-};
-
-export const ClickEvents = ({
-  onDatasetClick,
-  onElementClick,
-  onElementsClick,
-  options,
-  data,
-  ...args
-}) => {
-  const datasetAtEvent = (dataset: InteractionItem[]) => {
-    if (!dataset.length) return;
-
-    const datasetIndex = dataset[0].datasetIndex;
+  const chartRef = useRef<ChartJS>(null);
 
-    onDatasetClick(data.datasets[datasetIndex].label);
+  const onDatasetClick = (datasetIndex) => {
+    // Handle dataset click
+    // Works only when "datasetEvents" is enabled
   };
 
-  const elementAtEvent = (element: InteractionItem[]) => {
-    if (!element.length) return;
-
-    const { datasetIndex, index } = element[0];
-
-    onElementClick(data.labels[index], data.datasets[datasetIndex].data[index]);
+  const onElementClick = (index, datasetIndex) => {
+    // Handle element click
+    // Works only when "elementEvents" is enabled
   };
 
-  const elementsAtEvent = (elements: InteractionItem[]) => {
-    if (!elements.length) return;
-
-    onElementsClick(elements);
+  const onElementsClick = (elements) => {
+    // Handle elements click
+    // Works only when "elementsEvents" is enabled
   };
 
-  const chartRef = useRef<ChartJS>(null);
-
-  const onClick = (event: MouseEvent<HTMLCanvasElement>) => {
+  const onClick = (event) => {
     const { current: chart } = chartRef;
 
     if (!chart) {
       return;
     }
 
-    datasetAtEvent(getDatasetAtEvent(chart, event));
-    elementAtEvent(getElementAtEvent(chart, event));
-    elementsAtEvent(getElementsAtEvent(chart, event));
+    const dataset = getDatasetAtEvent(chart, event);
+    const element = getElementAtEvent(chart, event);
+    const elements = getElementsAtEvent(chart, event);
+
+    if (dataset.length) {
+      const datasetIndex = dataset[0].datasetIndex;
+      onDatasetClick(datasetIndex);
+    }
+
+    if (element.length) {
+      const { datasetIndex, index } = element[0];
+      onElementClick(index, datasetIndex);
+    }
+
+    if (elements.length) {
+      onElementsClick(elements);
+    }
   };
 
   return (
     <Chart
-      {...args}
       ref={chartRef}
       type='bar'
       options={options}
-      data={data}
+      data={dynamicData}
       onClick={onClick}
     />
   );
 };
 
-ClickEvents.args = {
-  options: eventsChart.options,
-  data: eventsChart.data,
-};
-
-ClickEvents.argTypes = {
-  onDatasetClick: { action: 'dataset clicked' },
-  onElementClick: { action: 'element clicked' },
-  onElementsClick: { action: 'elements clicked' },
-};
-
-export const Redraw = args => <Chart {...args} />;
-
-Redraw.args = {
-  data: multitypeChart.data,
-  redraw: true,
-};
-
-export const SameDataToggle = args => {
+// Presentational Components
+export const MultiType = (args) => <ChartContainer {...args} data={multitypeChart.data} />;
+export const Dynamic = (args) => <ChartContainer {...args} data={data} />;
+export const ClickEvents = (args) => <ChartContainer {...args} data={eventsChart.data} />;
+export const Redraw = (args) => <ChartContainer {...args} data={multitypeChart.data} />;
+export const SameDataToggle = (args) => {
   const [currentData, toggleData] = useReducer(
-    prevState =>
+    (prevState) =>
       prevState === data.sameData1 ? data.sameData2 : data.sameData1,
     data.sameData1
   );
 
-  return <Chart {...args} data={currentData} onClick={toggleData} />;
+  return <ChartContainer {...args} data={currentData} onClick={toggleData} />;
 };
-
-SameDataToggle.args = {
-  type: 'bar',
-};
-
-export const Decimation = args => {
-  const [currentData, toggleData] = useReducer(
+export const Decimation = (args) => {
+  const[currentData, toggleData] = useReducer(
     data.getDecimationData,
     data.getDecimationData()
   );
 
-  return <Chart {...args} data={currentData} onClick={toggleData} />;
+  return <ChartContainer {...args} data={currentData} onClick={toggleData} />;
 };
-
-Decimation.args = {
-  type: 'line',
-  options: data.decimationOptions,
-};
-
-export const DynamicOptions = args => {
+export const DynamicOptions = (args) => {
   const [yMax, setYMax] = useState(100);
   const options = useMemo(
     () => ({
@@ -198,12 +142,8 @@ export const DynamicOptions = args => {
 
   return (
     <>
-      <button onClick={() => setYMax(y => y + 10)}>Update options</button>
-      <Chart {...args} options={options} />
+      <button onClick={() => setYMax((y) => y + 10)}>Update options</button>
+      <ChartContainer {...args} options={options} />
     </>
   );
 };
-
-DynamicOptions.args = {
-  data: multitypeChart.data,
-};