fix: reset chart horizontalRangeSlider

lumada-design · May 14, 2024 · 9c483f1 · 9c483f1
1 parent 51ed7fb
commit 9c483f1
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 17 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -16,6 +16,7 @@ const excludeStories = [
   "Visualizations/Treemap",
   "Visualizations/Heatmap",
   "Widgets/Code Editor",
+  "Tests/Visualizations",
 ];
 
 function getNodesIds(nodes: NodeResult[]) {

diff --git a/docs/tests/Table.stories.tsx b/docs/tests/Table.stories.tsx
@@ -40,6 +40,7 @@ const data = [
   { name: "Sarah", email: "a@a.com", var1: "123", var2: "123", test: "123" },
 ];
 
+/** This was created to test grouped headers with sticky columns */
 export const Main: StoryObj = {
   render: () => {
     const columns = useMemo<HvTableColumnConfig<any, string>[]>(

diff --git a/docs/tests/Visualizations.stories.tsx b/docs/tests/Visualizations.stories.tsx
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { css } from "@emotion/css";
+import { Decorator, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
+import { HvButton } from "@hitachivantara/uikit-react-core";
+import { HvLineChart } from "@hitachivantara/uikit-react-viz";
+
+const decorator: Decorator = (Story) => (
+  <div
+    className={css({
+      height: 500,
+      padding: 20,
+    })}
+  >
+    {Story()}
+  </div>
+);
+
+export default {
+  title: "Tests/Visualizations",
+  parameters: {
+    // Enables Chromatic snapshot
+    chromatic: { disableSnapshot: false },
+    eyes: { include: true },
+  },
+  decorators: [decorator],
+};
+
+/** This tests if the horizontal slider resets when removed */
+export const SliderReset: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const hideBtn = canvas.getByRole("button", { name: "Hide" });
+    await userEvent.click(hideBtn);
+    const showBtn = canvas.getByRole("button", { name: "Show" });
+    expect(showBtn).toBeInTheDocument();
+  },
+  render: () => {
+    const [show, setShow] = useState(true);
+
+    return (
+      <>
+        <HvButton onClick={() => setShow((prev) => !prev)}>
+          {show ? "Hide" : "Show"}
+        </HvButton>
+        <HvLineChart
+          data={{
+            Month: [
+              "January",
+              "February",
+              "March",
+              "April",
+              "May",
+              "June",
+              "July",
+              "August",
+              "September",
+              "October",
+              "November",
+              "December",
+            ],
+            "Sales Target": [
+              5929, 2393, 1590, 7817, 4749, 1702, 2381, 2909, 6732, 3098, 2119,
+              2146,
+            ],
+          }}
+          groupBy="Month"
+          measures="Sales Target"
+          onOptionChange={(option) => {
+            if (show) {
+              option.dataZoom = [
+                { ...option.dataZoom[0], end: 80, start: 50 }, // Setting data zoom because it was not possible through "play"
+                option.dataZoom[1],
+              ];
+            }
+            return option;
+          }}
+          horizontalRangeSlider={{ show }}
+        />
+      </>
+    );
+  },
+};
diff --git a/packages/viz/src/BaseChart/BaseChart.tsx b/packages/viz/src/BaseChart/BaseChart.tsx
@@ -61,8 +61,9 @@ export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
 
       if (!instance) return;
 
+      // More info: https://echarts.apache.org/en/api.html#echartsInstance.setOption
       instance.setOption(option, {
-        replaceMerge: ["xAxis", "yAxis", "series", "dataset"],
+        replaceMerge: ["xAxis", "yAxis", "series", "dataset", "dataZoom"],
       });
     }, [theme, option]);
 
@@ -72,7 +73,7 @@ export const HvBaseChart = forwardRef<ReactECharts, HvBaseChartProps>(
         echarts={echarts}
         option={initialOption}
         theme={theme}
-        notMerge
+        notMerge // When true all the current components will be removed and new components will be created according to the new option
         style={{
           width: width ?? "100%",
           height: height ?? "100%",

diff --git a/packages/viz/src/hooks/useDataZoom.tsx b/packages/viz/src/hooks/useDataZoom.tsx
@@ -6,23 +6,27 @@ interface HvDataZoomHookProps {
   showHorizontal?: boolean;
 }
 
-export const useDataZoom = ({ showHorizontal }: HvDataZoomHookProps) => {
+export const useDataZoom = ({
+  showHorizontal = false,
+}: HvDataZoomHookProps) => {
   const option = useMemo<Pick<HvEChartsOption, "dataZoom">>(() => {
     return {
-      dataZoom: [
-        {
-          show: showHorizontal ?? false,
-          type: "slider",
-          orient: "horizontal",
-        },
-        {
-          show: showHorizontal ?? false,
-          type: "inside",
-          orient: "horizontal",
-          zoomOnMouseWheel: "shift",
-          moveOnMouseWheel: true,
-        },
-      ],
+      dataZoom: showHorizontal
+        ? [
+            {
+              show: true,
+              type: "slider",
+              orient: "horizontal",
+            },
+            {
+              show: true,
+              type: "inside",
+              orient: "horizontal",
+              zoomOnMouseWheel: "shift",
+              moveOnMouseWheel: true,
+            },
+          ]
+        : [],
     };
   }, [showHorizontal]);