ScatterChartWithLines

unosquare · Nov 12, 2024 · e1b1be7 · e1b1be7
1 parent eada994
commit e1b1be7
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 17 deletions.
diff --git a/samples/App.tsx b/samples/App.tsx
@@ -17,6 +17,7 @@ import ReferenceLineChart from './pages/ReferenceLineChart';
 import NoNullsChart from './pages/NoNulls';
 import LineChartWithLabels from './pages/LineChartWithLabels';
 import ScatterChartExample from './pages/ScatterChartExample';
+import ScatterChartWithLines from './pages/ScatterChartWithLines';
 
 const App: React.FC = () => {
   return (
@@ -41,6 +42,7 @@ const App: React.FC = () => {
             <Route path="/no-nulls" element={<NoNullsChart />} />
             <Route path="/line-chart-with-labels" element={<LineChartWithLabels />} />
             <Route path="/scatter-chart" element={<ScatterChartExample />} />
+            <Route path="/scatter-chart-with-lines" element={<ScatterChartWithLines />} />
           </Routes>
         </main>
       </div>

diff --git a/samples/pages/ScatterChartWithLines.tsx b/samples/pages/ScatterChartWithLines.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import ScatterChartWrapper from '../utils/ScatterChartWrapper';
+
+const ScatterChartWithLines = () => {
+  return <ScatterChartWrapper initialLine={true} />;
+};
+
+export default ScatterChartWithLines;
diff --git a/samples/utils/ScatterChartWrapper.tsx b/samples/utils/ScatterChartWrapper.tsx
@@ -14,12 +14,14 @@ import { ScatterChartWrapperProps } from './types';
 export default function ScatterChartWrapper({
   initialWidth = 730,
   initialHeight = 250,
-  initialMargin = { top: 5, right: 30, left: 20, bottom: 5 }
+  initialMargin = { top: 5, right: 30, left: 20, bottom: 5 },
+  initialLine = false,
 }: ScatterChartWrapperProps) {
   const [width, setWidth] = useState(initialWidth);
   const [height, setHeight] = useState(initialHeight);
   const [margin, setMargin] = useState(initialMargin);
   const [fill, setFill] = useState('#8884d8');
+  const [line, setLine] = useState(initialLine);
 
   const scatterChartTypes = NAV_SECTIONS.find(section => section.category === 'Scatter Charts')?.items || [];
 
@@ -58,7 +60,7 @@ export default function ScatterChartWrapper({
               <YAxis dataKey="y" type="number" />
               <Tooltip />
               <Legend />
-              <Scatter data={SCATTER_DATA} fill={fill} />
+              <Scatter data={SCATTER_DATA} fill={fill} line={line} />
             </ScatterChart>
           </div>
         </div>
@@ -76,6 +78,8 @@ export default function ScatterChartWrapper({
               setData={() => {}}
               fill={fill}
               setFill={setFill}
+              line={line}
+              setLine={setLine}
             />
           </div>
         </div>

diff --git a/samples/utils/constants.ts b/samples/utils/constants.ts
@@ -23,6 +23,7 @@ export const NAV_SECTIONS = [
     ]),
     createNavSection('Scatter Charts', [
         { name: 'Scatter Chart', path: '/scatter-chart' },
+        { name: 'Scatter Chart with Lines', path: '/scatter-chart-with-lines' },
     ]),
 ];
 

diff --git a/samples/utils/types.ts b/samples/utils/types.ts
@@ -10,6 +10,7 @@ export interface ScatterChartWrapperProps {
   initialWidth?: number;
   initialHeight?: number;
   initialMargin?: { top: number; right: number; bottom: number; left: number };
+  initialLine?: boolean;
 }
 
 export interface ScatterChartControlsProps {

diff --git a/src/Scatter/index.tsx b/src/Scatter/index.tsx
@@ -5,23 +5,38 @@ interface ScatterProps {
     xScale: (value: number) => number;
     yScale: (value: number) => number;
     fill?: string;
+    line?: boolean;
     hoveredPoint: number | null;
 }
 
-const Scatter: React.FC<ScatterProps> = ({ data, xScale, yScale, fill = 'blue', hoveredPoint }) => (
-    <>
-        {data.map((point, index) => (
-            <circle
-                key={index}
-                cx={xScale(point.x)}
-                cy={yScale(point.y)}
-                r={hoveredPoint === index ? 7 : 5}
-                fill={fill}
-                opacity={hoveredPoint === null || hoveredPoint === index ? 1 : 0.5}
-                className='transition-all duration-300 ease-in-out'
-            />
-        ))}
-    </>
-);
+const Scatter: React.FC<ScatterProps> = ({ data, xScale, yScale, fill = 'blue', line = false, hoveredPoint }) => {
+    const sortedData = [...data].sort((a, b) => a.x - b.x);
+
+    return (
+        <>
+            {sortedData.map((point, index) => (
+                <React.Fragment key={index}>
+                    <circle
+                        cx={xScale(point.x)}
+                        cy={yScale(point.y)}
+                        r={5}
+                        fill={fill}
+                        className=""
+                    />
+                    {line && index > 0 && (
+                        <line
+                            x1={xScale(sortedData[index - 1].x)}
+                            y1={yScale(sortedData[index - 1].y)}
+                            x2={xScale(point.x)}
+                            y2={yScale(point.y)}
+                            stroke={fill}
+                            strokeWidth={2}
+                        />
+                    )}
+                </React.Fragment>
+            ))}
+        </>
+    );
+};
 
 export default Scatter;