memoize line chart

Chia-Network · May 7, 2024 · d19c54b · d19c54b
1 parent 283c006
commit d19c54b
Showing 1 changed file with 24 additions and 13 deletions.
diff --git a/packages/core/src/components/LineChart/LineChart.tsx b/packages/core/src/components/LineChart/LineChart.tsx
@@ -1,9 +1,9 @@
 import { alpha } from '@mui/material';
-import { SparkLineChart } from '@mui/x-charts';
+import { SparkLineChart, type SparkLineChartProps } from '@mui/x-charts';
 import { areaElementClasses } from '@mui/x-charts/LineChart';
 import BigNumber from 'bignumber.js';
 import JSONbig from 'json-bigint';
-import React, { useMemo } from 'react';
+import React, { useMemo, memo } from 'react';
 import styled from 'styled-components';
 
 import Color from '../../constants/Color';
@@ -31,11 +31,23 @@ const sx = {
   },
 };
 
+const chartColors = [Color.Green[500]];
+const chartMargin = { top: 0, bottom: 0, left: 0, right: 0 };
+const defaultXValueFormatter = (value: number) => value.toString();
+const defaultYValueFormatter = (value: number | BigNumber | null) => (value !== null ? value.toString() : '');
+
 type Point = {
   x: number;
   y: number | BigNumber;
 };
 
+const MemoLineChart = memo((props: SparkLineChartProps) => (
+  <SparkLineChart {...props}>
+    <LinearGradient />
+    <rect x={0} y={0} width={0} height="100%" fill="url(#graph-gradient)" />
+  </SparkLineChart>
+));
+
 export type LineChartProps = {
   data: Point[];
   // min?: number;
@@ -48,19 +60,21 @@ export default function LineChart(props: LineChartProps) {
   const {
     data,
     // min: defaultMin = 0,
-    xValueFormatter = (value) => value.toString(),
-    yValueFormatter = (value) => (value !== null ? value.toString() : ''),
+    xValueFormatter = defaultXValueFormatter,
+    yValueFormatter = defaultYValueFormatter,
     height = 150,
   } = props;
 
   const stringifiedData = useMemo(() => JSONbig.stringify(data), [data]);
-
   const freezedData = useMemo<Point[]>(() => JSONbig.parse(stringifiedData), [stringifiedData]);
 
   const yData = useMemo(() => freezedData.map((item) => item.y), [freezedData]);
   const xData = useMemo(() => freezedData.map((item) => item.x), [freezedData]);
 
-  const yDataNumber = yData.map((value) => (value instanceof BigNumber ? value.toNumber() : value));
+  const yDataNumber = useMemo(
+    () => yData.map((value) => (value instanceof BigNumber ? value.toNumber() : value)),
+    [yData],
+  );
 
   // const min = data.length ? Math.min(...yDataNumber) : defaultMin;
   // const max = Math.max(min, ...yDataNumber);
@@ -85,22 +99,19 @@ export default function LineChart(props: LineChartProps) {
 
   return (
     <StyledGraphContainer height={height}>
-      <SparkLineChart
+      <MemoLineChart
         xAxis={xAxis}
         data={yDataNumber}
         height={height || 0}
         valueFormatter={yValueFormatter}
         curve="monotoneX"
-        margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
-        colors={[Color.Green[500]]}
+        margin={chartMargin}
+        colors={chartColors}
         area
         showHighlight
         showTooltip
         sx={sx}
-      >
-        <LinearGradient />
-        <rect x={0} y={0} width={0} height="100%" fill="url(#graph-gradient)" />
-      </SparkLineChart>
+      />
     </StyledGraphContainer>
   );
 }