feat(LineChart): stacked and range slider added

lumada-design · Jun 1, 2023 · 36b22a4 · 36b22a4
1 parent b464dfe
commit 36b22a4
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 23 deletions.
diff --git a/packages/viz/src/components/LineChart/LineChart.stories.tsx b/packages/viz/src/components/LineChart/LineChart.stories.tsx
@@ -34,7 +34,8 @@ export default meta;
 
 export const Main: StoryObj<HvLineChartProps> = {
   args: {
-    variant: "line",
+    area: false,
+    stacked: false,
     emptyCellMode: "connect",
   },
   argTypes: {
@@ -45,6 +46,7 @@ export const Main: StoryObj<HvLineChartProps> = {
     series: { control: { disable: true } },
     tooltip: { control: { disable: true } },
     lineNameFormatter: { control: { disable: true } },
+    horizontalRangeSlider: { control: { disable: true } },
     emptyCellMode: {
       control: { type: "radio" },
       options: hvChartEmptyCellMode,
@@ -55,7 +57,7 @@ export const Main: StoryObj<HvLineChartProps> = {
       <HvLineChart
         data={{
           values: {
-            Months: [
+            Month: [
               "January",
               "February",
               "March",
@@ -76,7 +78,7 @@ export const Main: StoryObj<HvLineChartProps> = {
           },
         }}
         xAxis={{
-          fields: "Months",
+          fields: "Month",
         }}
         measures={{
           fields: "Sales Target",
@@ -98,7 +100,7 @@ export const WithArea: StoryObj<HvLineChartProps> = {
       <HvLineChart
         data={{
           values: new Map<string, (string | number)[]>()
-            .set("Months", [
+            .set("Month", [
               "January",
               "February",
               "March",
@@ -121,12 +123,12 @@ export const WithArea: StoryObj<HvLineChartProps> = {
             ),
         }}
         xAxis={{
-          fields: "Months",
+          fields: "Month",
         }}
         measures={{
           fields: "Sales Target",
         }}
-        variant="area"
+        area
       />
     );
   },
@@ -334,7 +336,7 @@ export const CustomMultipleLineCharts: StoryObj<HvLineChartProps> = {
   },
 };
 
-export const MultipleLineChartsWithPivot: StoryObj<HvLineChartProps> = {
+export const MultipleLineChartsWithPivotColumns: StoryObj<HvLineChartProps> = {
   parameters: {
     docs: {
       description: {
@@ -432,13 +434,95 @@ export const MultipleLineChartsWithPivot: StoryObj<HvLineChartProps> = {
             fields: "Total",
           }}
           series={checked ? ["Country", "Medal"] : "Country"}
-          lineNameFormatter={(s) => `${s.split("_").join(" ")}`}
+          lineNameFormatter={(s) => `${s?.split("_").join(" ")}`}
         />
       </>
     );
   },
 };
 
+export const StackedAreaChart: StoryObj<HvLineChartProps> = {
+  parameters: {
+    docs: {
+      description: { story: "Stacked chart with colored areas." },
+    },
+  },
+  render: () => {
+    const formatter = (value?: number | string) => `${Number(value) / 1000}k`;
+
+    return (
+      <HvLineChart
+        data={{
+          values: {
+            Group: ["Group 1", "Group 2", "Group 3"],
+            "Sales Target": [2300, 1000, 8500],
+            "Sales Per Rep": [6000, 1000, 1000],
+            "Monthly Sales": [3700, 7500, 1100],
+            Target: [2100, 8500, 3000],
+            Cash: [500, 8000, 9500],
+          },
+        }}
+        xAxis={{
+          fields: "Group",
+        }}
+        measures={{
+          fields: [
+            "Sales Target",
+            "Sales Per Rep",
+            "Monthly Sales",
+            "Target",
+            "Cash",
+          ],
+          labelFormatter: formatter,
+        }}
+        tooltip={{ valueFormatter: formatter }}
+        area
+        stacked
+      />
+    );
+  },
+};
+
+export const HorizontalRangeSlider: StoryObj<HvLineChartProps> = {
+  render: () => {
+    const r = new Random();
+    const rand = (diff) => r.next() * diff - diff / 2;
+
+    const generateDates = (num = 100, startDate = new Date(2020, 0)) =>
+      Array.from(Array(num).keys()).map((i) =>
+        new Date(new Date(startDate).setDate(startDate.getDate() + i))
+          .toISOString()
+          .slice(0, 10)
+      );
+
+    const generateValues = (num = 10, start = 100, inc = 1) => {
+      const values = [start];
+      for (let i = 0; i <= num; i += 1) {
+        values.push(values[i] + rand(inc));
+      }
+      return values;
+    };
+
+    const dates = generateDates(200, new Date(2015, 1, 17));
+    const values = generateValues(dates.length, 200, 8);
+
+    const data = {
+      Date: dates,
+      "Sales Target": values,
+      "Sales Volume": values.map((v) => v + rand(8)),
+    };
+
+    return (
+      <HvLineChart
+        data={{ values: data }}
+        xAxis={{ fields: "Date" }}
+        measures={{ fields: ["Sales Target", "Sales Volume"] }}
+        horizontalRangeSlider={{ show: true }}
+      />
+    );
+  },
+};
+
 export const WithIntervalUpdates: StoryObj<HvLineChartProps> = {
   parameters: {
     docs: {
@@ -469,7 +553,7 @@ export const WithIntervalUpdates: StoryObj<HvLineChartProps> = {
 
     const generateData = () => {
       return {
-        Dates: generateDates(date.current),
+        Date: generateDates(date.current),
         "Sales Target": values.current,
       };
     };
@@ -500,7 +584,7 @@ export const WithIntervalUpdates: StoryObj<HvLineChartProps> = {
     return (
       <HvLineChart
         data={{ values: data }}
-        xAxis={{ fields: "Dates" }}
+        xAxis={{ fields: "Date" }}
         measures={{ fields: "Sales Target" }}
       />
     );

diff --git a/packages/viz/src/components/LineChart/LineChart.tsx b/packages/viz/src/components/LineChart/LineChart.tsx
@@ -8,6 +8,7 @@ import {
   TooltipComponent,
   AriaComponent,
   LegendComponent,
+  DataZoomSliderComponent,
 } from "echarts/components";
 import { CanvasRenderer } from "echarts/renderers";
 import * as echarts from "echarts/core";
@@ -22,10 +23,6 @@ import { useTheme } from "@hitachivantara/uikit-react-core";
 import { getAggregation, getAxisType } from "@viz/utils";
 import { from, table } from "arquero";
 
-// TODO:
-// - Time representation
-// - Stacked chart
-
 // Register chart components
 echarts.use([
   LineChart,
@@ -36,10 +33,9 @@ echarts.use([
   AriaComponent,
   TooltipComponent,
   LegendComponent,
+  DataZoomSliderComponent,
 ]);
 
-export type HvChartLineChartVariant = "line" | "area";
-
 export interface HvLineChartProps {
   /** Data options. */
   data: {
@@ -141,12 +137,19 @@ export interface HvLineChartProps {
      */
     showLegend?: boolean;
   };
-  /** Line chart variant. Defaults to `line`. */
-  variant?: HvChartLineChartVariant;
   /** Formatter the lines names used on the tooltips and legend. */
-  lineNameFormatter?: (value: string) => string;
+  lineNameFormatter?: (value?: string) => string;
   /** Strategy to use when there are empty cells. Defaults to `void`. */
   emptyCellMode?: HvChartEmptyCellMode;
+  /** Whether the area under the lines should be filled to have an area. Defaults to `false`. */
+  area?: boolean;
+  /** Whether the chart is stacked. Defaults to `false`. */
+  stacked?: boolean;
+  /** Ranger slider options for the horizontal axis. */
+  horizontalRangeSlider?: {
+    /** Whether to show the ranger slider or not. Defaults to `false`. */
+    show?: boolean;
+  };
 }
 
 /**
@@ -161,8 +164,10 @@ export const HvLineChart = ({
   legend,
   tooltip,
   lineNameFormatter,
-  variant = "line",
+  area = false,
+  stacked = false,
   emptyCellMode = "void",
+  horizontalRangeSlider,
 }: HvLineChartProps) => {
   const { activeTheme, selectedMode, selectedTheme } = useTheme();
   const { theme } = useVizTheme();
@@ -225,7 +230,7 @@ export const HvLineChart = ({
   const chartYAxis = useMemo(() => {
     return {
       yAxis: {
-        type: measures.type || "value",
+        type: getAxisType(measures.type) ?? "value",
         name: measures.name,
         axisLabel: {
           rotate: measures.labelRotation ?? 0,
@@ -255,12 +260,20 @@ export const HvLineChart = ({
               name: lineNameFormatter ? lineNameFormatter(c) : c,
               data: chartData.array(c),
               type: "line",
-              areaStyle: variant === "area" ? {} : undefined,
+              areaStyle: area ? {} : undefined,
               connectNulls: emptyCellMode === "connect" || false,
+              stack: stacked ? "x" : undefined,
             };
           }) || [],
     };
-  }, [chartData, xAxis.fields, variant, lineNameFormatter, emptyCellMode]);
+  }, [
+    chartData,
+    xAxis.fields,
+    area,
+    stacked,
+    lineNameFormatter,
+    emptyCellMode,
+  ]);
 
   const chartTooltip = useMemo(() => {
     return {
@@ -358,6 +371,18 @@ export const HvLineChart = ({
     };
   }, [chartSeries, legend?.showLegend]);
 
+  const chartHorizontalRangerSlider = useMemo(() => {
+    return {
+      dataZoom:
+        horizontalRangeSlider?.show === true
+          ? {
+              type: "slider",
+              orient: "horizontal",
+            }
+          : undefined,
+    };
+  }, [horizontalRangeSlider?.show]);
+
   return (
     <ReactECharts
       echarts={echarts}
@@ -371,6 +396,7 @@ export const HvLineChart = ({
         ...chartSeries,
         ...chartTooltip,
         ...chartLegend,
+        ...chartHorizontalRangerSlider,
       }}
       theme={theme}
     />

diff --git a/packages/viz/src/providers/Provider.tsx b/packages/viz/src/providers/Provider.tsx
@@ -86,6 +86,11 @@ export const HvVizProvider = ({ children }: HvVizProviderProps) => {
         },
       };
 
+      const dataZoomHandleStyle = {
+        color: themeStructure?.colors.modes[mode].atmo1,
+        borderColor: themeStructure?.colors.modes[mode].secondary,
+      };
+
       echarts.registerTheme(`${themeName}-${mode}`, {
         color: [
           themeStructure?.colors.modes[mode].cat1,
@@ -114,6 +119,21 @@ export const HvVizProvider = ({ children }: HvVizProviderProps) => {
             },
           },
         },
+        dataZoom: {
+          textStyle: { ...baseText },
+          backgroundColor: "transparent",
+          fillerColor: "transparent",
+          borderColor: "transparent",
+          moveHandleSize: 0,
+          emphasis: {
+            handleStyle: {
+              ...dataZoomHandleStyle,
+            },
+          },
+          handleStyle: {
+            ...dataZoomHandleStyle,
+          },
+        },
         categoryAxis: {
           ...customAxis,
         },