Skip to content

Commit

Permalink
Moved Line functions to utils
Browse files Browse the repository at this point in the history
  • Loading branch information
v3gaaa committed Oct 25, 2024
1 parent 18d2291 commit 48a5111
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 57 deletions.
61 changes: 4 additions & 57 deletions src/Line/index.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from 'react';
import * as d3Shape from 'd3-shape';
import { createLineGenerator, renderPathSegments } from './utils';

interface LineProps {
data: Array<{ [key: string]: any }>;
dataKey: string;
stroke: string;
strokeDasharray?: string;
type?:
type?:
| 'basis'
| 'basisClosed'
| 'basisOpen'
Expand Down Expand Up @@ -46,64 +46,11 @@ const Line: React.FC<LineProps> = ({
if (!data.length) return null;

const processedData = data.map((d, index) => ({ ...d, index }));

const lineGenerator = d3Shape
.line()
.defined((d: any) => d[dataKey] !== null && d[dataKey] !== undefined)
.x((d: any) => xScale(d.index))
.y((d: any) => {
const value = d[dataKey];
return value !== null && value !== undefined ? yScale(value) : yScale(0);
})
.curve((d3Shape as any)[`curve${type.charAt(0).toUpperCase() + type.slice(1)}`] || d3Shape.curveLinear);

const renderPath = () => {
if (connectNulls) {
const filteredData = processedData.filter(lineGenerator.defined());
return (
<path
d={lineGenerator(filteredData) || ''}
fill='none'
stroke={stroke}
strokeWidth={2}
strokeDasharray={strokeDasharray}
style={{ transition: 'all 0.3s' }}
/>
);
} else {
const segments: Array<{ [key: string]: any }> = [];
let segment: Array<{ [key: string]: any }> = [];

processedData.forEach((d) => {
if (lineGenerator.defined()(d)) {
segment.push(d);
} else if (segment.length) {
segments.push(segment);
segment = [];
}
});

if (segment.length) {
segments.push(segment);
}

return segments.map((segment, i) => (
<path
key={`segment-${i}`}
d={lineGenerator(segment) || ''}
fill='none'
stroke={stroke}
strokeWidth={2}
strokeDasharray={strokeDasharray}
style={{ transition: 'all 0.3s' }}
/>
));
}
};
const lineGenerator = createLineGenerator(type, xScale, yScale, dataKey);

return (
<>
{renderPath()}
{renderPathSegments(lineGenerator, processedData, stroke, strokeDasharray, connectNulls)}
{processedData.map((entry, index) => {
const value = entry[dataKey];
if (value === null || value === undefined) return null;
Expand Down
68 changes: 68 additions & 0 deletions src/Line/utils.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import * as d3Shape from 'd3-shape';

export const createLineGenerator = (
type: string,
xScale: (value: number) => number,
yScale: (value: number) => number,
dataKey: string
) => {
return d3Shape
.line()
.defined((d: any) => d[dataKey] !== null && d[dataKey] !== undefined)
.x((d: any) => xScale(d.index))
.y((d: any) => {
const value = d[dataKey];
return value !== null && value !== undefined ? yScale(value) : yScale(0);
})
.curve((d3Shape as any)[`curve${type.charAt(0).toUpperCase() + type.slice(1)}`] || d3Shape.curveLinear);
};

export const renderPathSegments = (
lineGenerator: any,
processedData: Array<{ [key: string]: any }>,
stroke: string,
strokeDasharray: string,
connectNulls: boolean
) => {
if (connectNulls) {
const filteredData = processedData.filter(lineGenerator.defined());
return (
<path
d={lineGenerator(filteredData) || ''}
fill='none'
stroke={stroke}
strokeWidth={2}
strokeDasharray={strokeDasharray}
style={{ transition: 'all 0.3s' }}
/>
);
} else {
const segments: Array<{ [key: string]: any }> = [];
let segment: Array<{ [key: string]: any }> = [];

processedData.forEach((d) => {
if (lineGenerator.defined()(d)) {
segment.push(d);
} else if (segment.length) {
segments.push(segment);
segment = [];
}
});

if (segment.length) {
segments.push(segment);
}

return segments.map((segment, i) => (
<path
key={`segment-${i}`}
d={lineGenerator(segment) || ''}
fill='none'
stroke={stroke}
strokeWidth={2}
strokeDasharray={strokeDasharray}
style={{ transition: 'all 0.3s' }}
/>
));
}
};

0 comments on commit 48a5111

Please sign in to comment.