Feature/47 update all chart snapshots (#48)

* [#47] Refactoring useEcharts hooks to support unit tests * [#47] Implements latest useEcharts in Bar chart * [#47] Update Bar chart snapshot test * [#47] Implements latest useEcharts in Doughnut chart * [#47] Update Doughnut chart snapshot test s * [#47] Implements latest useEcharts in Line chart * [#47] Update Line chart snapshot test * [#47] Implements latest useEcharts in Pie chart * [#47] Update Pie chart snapshot test * [#47] Implements latest useEcharts in ScatterPlot chart * [#47] Update ScatterPlot snapshot test * [#47] Implements latest useEcharts in StackBar chart * [#47] Update SnackBar chart snapshot test * [#47] Implements latest useEcharts in StackClusterColumn chart * [#47] Update StackClusterColumn chart snapshot test * [#47] Implements latest useEcharts in StackLine chart * [#47] Update StackLine chart snapshot test * [#47] Update dist: implements latest useEcharts to support unit tests
akvo · Sep 12, 2024 · 19a8888 · 19a8888
1 parent 0c5596c
commit 19a8888
Show file tree

Hide file tree

Showing 30 changed files with 1,977 additions and 740 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.modern.js b/dist/index.modern.js
diff --git a/dist/index.modern.js.map b/dist/index.modern.js.map
diff --git a/src/components/Bar.js b/src/components/Bar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -22,8 +22,8 @@ const getOptions = ({
   };
 };
 
-const Bar = ({ config, data, rawConfig }) => {
-  const chartRef = useECharts({
+const Bar = ({ config, data, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'bar'
     },
@@ -34,6 +34,8 @@ const Bar = ({ config, data, rawConfig }) => {
       getOptions({ horizontal, dimensions, overrideItemStyle })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -43,4 +45,4 @@ const Bar = ({ config, data, rawConfig }) => {
   );
 };
 
-export default Bar;
+export default forwardRef(Bar);
diff --git a/src/components/Doughnut.js b/src/components/Doughnut.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -22,15 +22,15 @@ const getOptions = ({ dimensions = [], radius, overrideItemStyle }) => {
   };
 };
 
-const Doughnut = ({ config, data, size = 40, rawConfig }) => {
+const Doughnut = ({ config, data, size = 40, rawConfig }, ref) => {
   const torus = useMemo(() => {
     if (size >= MAX) {
       return 0;
     }
     return MAX - size;
   }, [size]);
 
-  const chartRef = useECharts({
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'pie',
       radius: [`${torus}%`, `${MAX}%`]
@@ -46,6 +46,8 @@ const Doughnut = ({ config, data, size = 40, rawConfig }) => {
       })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -55,4 +57,4 @@ const Doughnut = ({ config, data, size = 40, rawConfig }) => {
   );
 };
 
-export default Doughnut;
+export default forwardRef(Doughnut);
diff --git a/src/components/Line.js b/src/components/Line.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -22,8 +22,8 @@ const getOptions = ({
   };
 };
 
-const Line = ({ config, data, rawConfig }) => {
-  const chartRef = useECharts({
+const Line = ({ config, data, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'line'
     },
@@ -34,6 +34,8 @@ const Line = ({ config, data, rawConfig }) => {
       getOptions({ horizontal, dimensions, overrideItemStyle })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -43,4 +45,4 @@ const Line = ({ config, data, rawConfig }) => {
   );
 };
 
-export default Line;
+export default forwardRef(Line);
diff --git a/src/components/Pie.js b/src/components/Pie.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -20,8 +20,8 @@ const getOptions = ({ dimensions = [], overrideItemStyle }) => {
   };
 };
 
-const Pie = ({ config, data, rawConfig }) => {
-  const chartRef = useECharts({
+const Pie = ({ config, data, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'pie'
     },
@@ -32,6 +32,8 @@ const Pie = ({ config, data, rawConfig }) => {
       getOptions({ dimensions, overrideItemStyle })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -41,4 +43,4 @@ const Pie = ({ config, data, rawConfig }) => {
   );
 };
 
-export default Pie;
+export default forwardRef(Pie);
diff --git a/src/components/ScatterPlot.js b/src/components/ScatterPlot.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -59,14 +59,11 @@ const getOptions = ({
   };
 };
 
-const ScatterPlot = ({
-  config,
-  data,
-  symbolSize = 10,
-  showLabel = true,
-  rawConfig
-}) => {
-  const chartRef = useECharts({
+const ScatterPlot = (
+  { config, data, symbolSize = 10, showLabel = true, rawConfig },
+  ref
+) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'scatter'
     },
@@ -82,6 +79,8 @@ const ScatterPlot = ({
       })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -91,4 +90,4 @@ const ScatterPlot = ({
   );
 };
 
-export default ScatterPlot;
+export default forwardRef(ScatterPlot);
diff --git a/src/components/StackBar.js b/src/components/StackBar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -38,8 +38,8 @@ const getOptions = ({
   };
 };
 
-const StackBar = ({ config, data, stackMapping = {}, rawConfig }) => {
-  const chartRef = useECharts({
+const StackBar = ({ config, data, stackMapping = {}, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'bar',
       stack: 'defaultStack'
@@ -62,6 +62,8 @@ const StackBar = ({ config, data, stackMapping = {}, rawConfig }) => {
       })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -71,4 +73,4 @@ const StackBar = ({ config, data, stackMapping = {}, rawConfig }) => {
   );
 };
 
-export default StackBar;
+export default forwardRef(StackBar);
diff --git a/src/components/StackClusterColumn.js b/src/components/StackClusterColumn.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -28,8 +28,8 @@ const getOptions = ({
   };
 };
 
-const StackClusterColumn = ({ config, data, rawConfig }) => {
-  const chartRef = useECharts({
+const StackClusterColumn = ({ config, data, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'bar',
       barGap: 0
@@ -51,6 +51,8 @@ const StackClusterColumn = ({ config, data, rawConfig }) => {
       })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -60,4 +62,4 @@ const StackClusterColumn = ({ config, data, rawConfig }) => {
   );
 };
 
-export default StackClusterColumn;
+export default forwardRef(StackClusterColumn);
diff --git a/src/components/StackLine.js b/src/components/StackLine.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle } from 'react';
 import { useECharts } from '../hooks';
 import styles from '../styles.module.css';
 
@@ -39,8 +39,8 @@ const getOptions = ({
   };
 };
 
-const StacLine = ({ config, data, rawConfig }) => {
-  const chartRef = useECharts({
+const StacLine = ({ config, data, rawConfig }, ref) => {
+  const [chartRef, chartInstance] = useECharts({
     rawOverrides: {
       type: 'line',
       stack: 'defaultStack'
@@ -62,6 +62,8 @@ const StacLine = ({ config, data, rawConfig }) => {
       })
   });
 
+  useImperativeHandle(ref, () => chartInstance);
+
   return (
     <div
       ref={chartRef}
@@ -71,4 +73,4 @@ const StacLine = ({ config, data, rawConfig }) => {
   );
 };
 
-export default StacLine;
+export default forwardRef(StacLine);