41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { G, Line } from 'react-native-svg';
|
||
|
|
import * as scale from 'd3-scale'
|
||
|
|
import { colors } from '../styles';
|
||
|
|
|
||
|
|
type scaleFunction = (value: number) => number;
|
||
|
|
|
||
|
|
interface CustomGridProps {
|
||
|
|
y: scaleFunction;
|
||
|
|
ticks: number[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CustomGrid: React.FC = ({ y, ticks }: Partial<CustomGridProps>) => {
|
||
|
|
const [firstTick, ...remainingTicks] = ticks;
|
||
|
|
const dashArray = [1, 3];
|
||
|
|
const strokeSolidWidth = 0.2;
|
||
|
|
const strokeSolidColor = colors.bgBlack;
|
||
|
|
const strokeDashWidth = 1;
|
||
|
|
const strokeDashColor = colors.lightGrey;
|
||
|
|
|
||
|
|
const renderLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => (
|
||
|
|
<Line
|
||
|
|
key={`line-${tick}`}
|
||
|
|
x1="0%"
|
||
|
|
x2="100%"
|
||
|
|
y1={y(tick)}
|
||
|
|
y2={y(tick)}
|
||
|
|
stroke={stroke}
|
||
|
|
strokeWidth={strokeWidth}
|
||
|
|
strokeDasharray={dashArray}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<G>
|
||
|
|
{renderLine(firstTick, strokeSolidColor, strokeSolidWidth)}
|
||
|
|
{remainingTicks.map((tick) => renderLine(tick, strokeDashColor, strokeDashWidth, dashArray))}
|
||
|
|
</G>
|
||
|
|
);
|
||
|
|
};
|