fix: legend bug (bar series) (#429)

zakodium-oss · Jul 19, 2022 · 4ddaef5 · 4ddaef5
1 parent 60cd2c2
commit 4ddaef5
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 56 deletions.
diff --git a/src/components/Series/BarSeries.tsx b/src/components/Series/BarSeries.tsx
@@ -60,18 +60,20 @@ export function BarSeries(props: BarSeriesProps) {
   }, [color, displayMarkers, figure]);
   const isVisible = useIsSeriesVisible(id);
   useEffect(() => {
-    legendDispatch({
-      type: 'ADD_LEGEND_LABEL',
-      payload: {
-        id,
-        label: otherProps.label,
-        colorLine,
-        shape,
-      },
-    });
-    return () =>
-      legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
-  }, [colorLine, legendDispatch, otherProps.label, shape, id]);
+    if (!hidden) {
+      legendDispatch({
+        type: 'ADD_LEGEND_LABEL',
+        payload: {
+          id,
+          label: otherProps.label,
+          colorLine,
+          shape,
+        },
+      });
+      return () =>
+        legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
+    }
+  }, [colorLine, legendDispatch, otherProps.label, shape, id, hidden]);
   if (hidden) return null;
   return (
     <g>

diff --git a/src/components/Series/FunctionSeries.tsx b/src/components/Series/FunctionSeries.tsx
@@ -37,9 +37,5 @@ export function FunctionSeries(props: FunctionSeriesProps) {
     return [{ x: 0, y: 0 }];
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [x?.domain[0], x?.domain[1]]);
-  return (
-    <>
-      <LineSeries data={data} id={id} {...otherProps} />
-    </>
-  );
+  return <LineSeries data={data} id={id} {...otherProps} />;
 }
diff --git a/src/components/Series/LineSeries.tsx b/src/components/Series/LineSeries.tsx
@@ -49,21 +49,23 @@ export function LineSeries<T extends SeriesPoint = SeriesPoint>(
   const lineStyle = functionalStyle({}, lineStyleFromProps, { id });
   const isVisible = useIsSeriesVisible(id);
   useEffect(() => {
-    legendDispatch({
-      type: 'ADD_LEGEND_LABEL',
-      payload: {
-        id,
-        label: otherProps.label,
-        colorLine: lineStyle?.stroke?.toString() || colorScaler(id),
-        shape: {
-          color: otherProps.markerStyle?.fill?.toString() || colorScaler(id),
-          figure: otherProps.markerShape || 'circle',
-          hidden: !displayMarkers,
+    if (!hidden) {
+      legendDispatch({
+        type: 'ADD_LEGEND_LABEL',
+        payload: {
+          id,
+          label: otherProps.label,
+          colorLine: lineStyle?.stroke?.toString() || colorScaler(id),
+          shape: {
+            color: otherProps.markerStyle?.fill?.toString() || colorScaler(id),
+            figure: otherProps.markerShape || 'circle',
+            hidden: !displayMarkers,
+          },
         },
-      },
-    });
-    return () =>
-      legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
+      });
+      return () =>
+        legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
+    }
   }, [
     hidden,
     colorScaler,
@@ -73,7 +75,6 @@ export function LineSeries<T extends SeriesPoint = SeriesPoint>(
     lineStyle?.stroke,
     otherProps.label,
     otherProps.markerShape,
-    otherProps.markerStyle,
     otherProps.markerStyle?.fill,
   ]);
   if (hidden) return null;

diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx
@@ -69,24 +69,25 @@ export function RangeSeries<T extends RangeSeriesPoint>(
 
   const isVisible = useIsSeriesVisible(id);
   useEffect(() => {
-    legendDispatch({
-      type: 'ADD_LEGEND_LABEL',
-      payload: {
-        id,
-        label,
-        colorLine: lineStyle.stroke,
-        range: {
-          rangeColor: lineStyle.fill,
-        },
-      },
-    });
-
-    return () =>
+    if (!hidden) {
       legendDispatch({
-        type: 'REMOVE_LEGEND_LABEL',
-        payload: { id },
+        type: 'ADD_LEGEND_LABEL',
+        payload: {
+          id,
+          label,
+          colorLine: lineStyle.stroke,
+          range: {
+            rangeColor: lineStyle.fill || 'none',
+          },
+        },
       });
-  }, [label, legendDispatch, lineStyle.fill, lineStyle.stroke, id]);
+      return () =>
+        legendDispatch({
+          type: 'REMOVE_LEGEND_LABEL',
+          payload: { id },
+        });
+    }
+  }, [label, legendDispatch, lineStyle.fill, lineStyle.stroke, id, hidden]);
 
   if (hidden) return null;
 

diff --git a/src/components/Series/ScatterSeries.tsx b/src/components/Series/ScatterSeries.tsx
@@ -95,9 +95,9 @@ export function ScatterSeries<T extends SeriesPoint = SeriesPoint>(
           },
         },
       });
+      return () =>
+        legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
     }
-    return () =>
-      legendDispatch({ type: 'REMOVE_LEGEND_LABEL', payload: { id } });
   }, [
     colorScaler,
     hidden,

diff --git a/stories/control/legend.stories.tsx b/stories/control/legend.stories.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import {
   Axis,
   BarSeries,
+  FunctionSeries,
   Legend,
   LegendProps,
   LineSeries,
@@ -131,14 +132,9 @@ export function WithHiddenSerie() {
 WithHiddenSerie.storyName = 'With hidden serie';
 
 export function WithShowHide(props: LegendProps) {
-  const { showHide, ...otherProps } = props;
   return (
     <Plot {...DEFAULT_PLOT_CONFIG}>
-      <Legend
-        {...otherProps}
-        showHide={showHide}
-        labelStyle={{ cursor: 'hand' }}
-      />
+      <Legend {...props} labelStyle={{ cursor: 'hand' }} />
       <LineSeries
         lineStyle={{
           stroke: 'red',
@@ -187,3 +183,42 @@ WithShowHide.storyName = 'With Show Hide prop';
 WithShowHide.args = {
   showHide: true,
 };
+export function ManySeries(props: LegendProps) {
+  return (
+    <Plot {...DEFAULT_PLOT_CONFIG}>
+      <LineSeries
+        data={data1}
+        lineStyle={{
+          stroke: 'red',
+        }}
+        label="Label Line series"
+      />
+      <BarSeries
+        data={data2}
+        lineStyle={{
+          stroke: 'green',
+        }}
+        label="Label Bar series"
+      />
+      <FunctionSeries
+        getY={(x) => 5 * Math.sin(x) + 10}
+        lineStyle={{
+          stroke: 'aqua',
+        }}
+        label="Label Function series"
+      />
+      <ScatterSeries
+        data={data3}
+        markerStyle={{ fill: 'blue' }}
+        label="Label Scatter series"
+      />
+      <RangeSeries
+        data={data4}
+        lineStyle={{ fill: 'grey', stroke: 'black' }}
+        label="Label Range series"
+      />
+      <Legend {...props} />
+      <Axis position="bottom" paddingEnd={0.1} paddingStart={0.1} />
+    </Plot>
+  );
+}