updating rechart line chart

client/src/jsMain/javascript/com/zegreatrob/coupling/client/CouplingResponsiveLine.jsx

@@ -1,26 +1,27 @@
-import {ResponsiveLine} from '@nivo/line'
 import {
     LineChart, CartesianGrid,
     XAxis,
     YAxis,
     Tooltip,
     Legend,
     Line,
+    ResponsiveContainer,
 } from 'recharts'
 import {timeFormat as d3TimeFormat} from 'd3-time-format'
-import { scaleOrdinal } from 'd3-scale'
-import { schemeCategory10 } from 'd3-scale-chromatic'
+import {scaleOrdinal, scaleTime} from 'd3-scale'
+import {schemeCategory10} from 'd3-scale-chromatic'
 import * as React from "react"
 
 export const CouplingResponsiveLine = (props) => {
     const allPoints = props.data.flatMap(line => [...(line.data.map(value => ({
         ...value,
         x: value.x.getTime(),
         [`${line.id}`]: value.y
-    })))])
-    console.log('allPoints', allPoints)
+    })))]).sort((a, b) => a.x - b.x)
+
+    const flattenedPoints = Object.entries(Object.groupBy(allPoints, item => item.x))
+        .map(group => group[1].reduce((result, current) => Object.assign(result, current), {}));
     const lineIds = props.data.map(value => value.id);
-    console.log('line ids', lineIds)
     const xValues = allPoints.map(point => point.x);
     const xMin = props.xMin ?? new Date(Math.min(...xValues))
     const xMax = props.xMax ?? new Date(Math.max(...xValues))
@@ -50,40 +51,56 @@ export const CouplingResponsiveLine = (props) => {
     const {format, precision} = calculatePrecision()
 
     const myColor = scaleOrdinal().domain(lineIds).range(schemeCategory10);
-    return (<LineChart
-        width={600}
-        height={600}
-
-        data={allPoints}
-        margin={{
-            bottom: 60,
-            left: 40,
-            right: 80,
-            top: 20
-        }}>
-        <CartesianGrid strokeDasharray="3 3"/>
-        <XAxis
-            dataKey="x"
-            type="number"
-            scale="time"
-            domain={['auto', 'auto']}
-            tickFormatter={d3TimeFormat(format)}
-        />
-        <YAxis
-            dataKey='y'
-            type="number"
-        />
-        <Tooltip labelFormatter={(value) => d3TimeFormat(format)(value)}/>
-        <Legend/>
-        {lineIds.map((lineId, index) =>
-            <Line
-                key={lineId}
-                type="monotone"
-                dataKey={lineId}
-                stroke={myColor(index)}
-                labelFormatter={(value) => d3TimeFormat(format)(value)}
-            />)}
-    </LineChart>)
+    const timeScale = scaleTime().domain([xMinMillis, xMaxMillis]).nice();
+    const [activeSeries, setActiveSeries] = React.useState([]);
+    const handleLegendClick = (dataKey) => {
+        if (activeSeries.includes(dataKey)) {
+            setActiveSeries(activeSeries.filter(el => el !== dataKey));
+        } else {
+            setActiveSeries(prev => [...prev, dataKey]);
+        }
+    };
+    return (
+        <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+                data={flattenedPoints}
+                margin={{
+                    bottom: 60,
+                    left: 40,
+                    right: 80,
+                    top: 20
+                }}>
+                <CartesianGrid strokeDasharray="3 3"/>
+                <XAxis
+                    dataKey="x"
+                    domain={timeScale.domain().map(date => date.valueOf())}
+                    scale={timeScale}
+                    type={'number'}
+                    ticks={timeScale.ticks(5).map(date => date.valueOf())}
+                    tickFormatter={d3TimeFormat(format)}
+                    fontSize={12}
+                />
+                <YAxis
+                    dataKey='y'
+                    type="number"
+                />
+                <Tooltip labelFormatter={(value) => d3TimeFormat(format)(value)}/>
+                <Legend
+                    onClick={props => handleLegendClick(props.dataKey)}
+                />
+                {lineIds.map((lineId, index) =>
+                    <Line
+                        connectNulls
+                        key={lineId}
+                        type="monotone"
+                        dataKey={lineId}
+                        hide={activeSeries.includes(lineId)}
+                        stroke={myColor(index)}
+                        labelFormatter={(value) => d3TimeFormat(format)(value)}
+                    />)}
+            </LineChart>
+        </ResponsiveContainer>
+    )
 
     return (<ResponsiveLine
             animate