railbird-gql/component/charts/custom-grid.tsx

39 lines
1.0 KiB
TypeScript

import React from 'react';
import { G, Line } from 'react-native-svg';
import { colors } from '../../styles';
import { ScaleLinearType } from './graph-types';
interface CustomGridProps {
y: ScaleLinearType;
ticks: Array<number>;
}
export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({ y, ticks }) => {
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>
);
};