refactor: correct dependencies to ensure render once

Author: nima-taheri-mongodb

charts/core/src/Series/Line/Line.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useSeriesContext } from '@lg-charts/series-provider';
-import _ from 'lodash';
 
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 
@@ -11,40 +10,39 @@ import { SeriesProps } from '../Series.types';
 
 export type LineProps = SeriesProps;
 
-const defaultLineOptions: EChartLineSeriesOption = {
-  type: 'line',
-  showSymbol: false,
-  symbol: 'circle',
-  clip: false,
-  symbolSize: 7,
-  emphasis: {
-    focus: 'series',
-  },
-  blur: {
-    lineStyle: {
-      opacity: 0.5,
+function getDefaultLineOptions(seriesColor: string): EChartLineSeriesOption {
+  return {
+    type: 'line',
+    showSymbol: false,
+    symbol: 'circle',
+    clip: false,
+    symbolSize: 7,
+    emphasis: {
+      focus: 'series',
+    },
+    blur: {
+      lineStyle: {
+        opacity: 0.5,
+      },
+    },
+    itemStyle: {
+      color: seriesColor || undefined
     },
-  },
-  lineStyle: {
-    width: 1,
-  },
-};
+    lineStyle: {
+      color: seriesColor || undefined,
+      width: 1,
+    }
+  }
+}
 
 export function Line(props: LineProps) {
   const { getColor } = useSeriesContext();
   const { theme } = useDarkMode();
-  const color = getColor(props.name, theme);
-  const colorOverrides: EChartLineSeriesOption = {
-    lineStyle: { color: color || undefined },
-    itemStyle: { color: color || undefined },
-  };
-
-  const options: EChartSeriesOption = _.merge(
-    {},
-    defaultLineOptions,
-    props,
-    colorOverrides,
-  );
+
+  const options: EChartSeriesOption = useMemo(() => ({
+    ...getDefaultLineOptions(getColor(props.name, theme)),
+    ...props
+  }), [props, getColor, theme]);
 
   return <Series {...options} />;
 }

charts/core/src/Series/Series.tsx

@@ -28,7 +28,7 @@ export function Series(options: EChartSeriesOption) {
        */
       removeSeries(options.name);
     };
-  }, [addSeries, isVisible, ready, removeSeries]);
+  }, [addSeries, isVisible, ready, removeSeries, options]);
 
   return null;
 }