fixed renderCustomizedLegend

app/components/MemoryChart.tsx

@@ -17,7 +17,9 @@ import _ from 'lodash';
 import { MemoryPerformance } from '../../backend/data-processor/DataProcessor';
 
 interface Payload {
-  dataKey: string;
+  value: string;
+  id: number;
+  type: string;
   color: string;
 }
 
@@ -67,10 +69,9 @@ export default function MemoryChart() {
     const { payload } = props;
     return (
       <div className="customized-legend">
-        {payload.map(
-          (entry: { dataKey: string; color: string }, index: number) => {
-            const { dataKey, color } = entry;
-            const active = _.includes(disabled, dataKey);
+        {payload.map((entry: { value: string; color: string }) => {
+          const { value, color } = entry;
+          const active = _.includes(disabled, value);
           const style = {
             marginRight: 10,
             color: active ? '#AAA' : '#000',
@@ -80,28 +81,21 @@ export default function MemoryChart() {
             <span
               role="presentation"
               className="legend-item"
-                onClick={() => handleClick(dataKey)}
+              onClick={() => handleClick(value)}
               style={style}
-                key={dataKey}
+              key={value}
             >
               {/* viewBox="0 0 10 10" */}
               <Surface width={10} height={10}>
                 <Symbols cx={5} cy={5} type="circle" size={50} fill={color} />
                 {active && (
-                    <Symbols
-                      cx={5}
-                      cy={5}
-                      type="circle"
-                      size={25}
-                      fill="#FFF"
-                    />
+                  <Symbols cx={5} cy={5} type="circle" size={25} fill="#FFF" />
                 )}
               </Surface>
-                <span>{dataKey}</span>
+              <span>{value}</span>
             </span>
           );
-          }
-        )}
+        })}
       </div>
     );
   }
@@ -116,7 +110,7 @@ export default function MemoryChart() {
           margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
         >
           <CartesianGrid strokeDasharray="3 10" />
-          <XAxis dataKey="time" />
+          <XAxis dataKey="relative_time" />
           <YAxis />
           <Tooltip />
           <Legend