add vertical option for custom-grid, add dev docs

This commit is contained in:
Loewy 2024-01-18 13:21:39 -08:00
parent ec6d36b44c
commit 9d5164bd13

View File

@ -1,14 +1,45 @@
import React from 'react'; import React from 'react';
import { G, Line } from 'react-native-svg'; import { G, Line } from 'react-native-svg';
import { colors } from '../../styles'; import { colors } from '../../styles';
import { ScaleLinearType } from './graph-types'; import { ScaleBandType, ScaleLinearType } from './graph-types';
interface CustomGridProps { interface CustomGridProps {
x: ScaleBandType;
y: ScaleLinearType; y: ScaleLinearType;
ticks: Array<number>; ticks: Array<number>;
includeVertical?: boolean;
xTicks?: Array<number | string>;
} }
/**
export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({ y, ticks }) => { * CustomGrid Component
*
* This component is used within a react-native-svg-chart component to render grid lines.
*
* @param {ScaleBandType} x - X-axis scale function, received from the parent chart component.
* @param {ScaleLinearType} y - Y-axis scale function, received from the parent chart component.
* @param {Array<number>} ticks - Y-axis tick values for horizontal lines, received from the parent.
* @param {boolean} [includeVertical=false] - Enables experimental vertical grid lines.
* @param {Array<number|string>} [xTicks] - X-axis tick values for vertical lines, necessary if `includeVertical` is true.
*
* Behavior:
* - Renders horizontal grid lines based on the `ticks` & scale functions provided by the parent chart component.
* - Vertical grid lines are experimental and can be enabled with `includeVertical` set to true.
* However, their scaling and positioning may not be accurate relative to XAxis component (if used).
*
* Usage:
* <Chart ... >
* <CustomGrid />
* </Chart>
*
* Note: Use `includeVertical` cautiously; vertical lines are not fully developed.
*/
export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({
x,
y,
ticks,
xTicks,
includeVertical = false
}) => {
const [firstTick, ...remainingTicks] = ticks; const [firstTick, ...remainingTicks] = ticks;
const dashArray = [1, 3]; const dashArray = [1, 3];
const strokeSolidWidth = 0.2; const strokeSolidWidth = 0.2;
@ -16,7 +47,7 @@ export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({ y, ticks }) =>
const strokeDashWidth = 1; const strokeDashWidth = 1;
const strokeDashColor = colors.lightGrey; const strokeDashColor = colors.lightGrey;
const renderLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => ( const renderHorizontalLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => (
<Line <Line
key={`line-${tick}`} key={`line-${tick}`}
x1="0%" x1="0%"
@ -29,10 +60,29 @@ export const CustomGrid: React.FC<Partial<CustomGridProps>> = ({ y, ticks }) =>
/> />
); );
const topY = y(Math.max(...ticks));
const bottomY = y(Math.min(...ticks));
const renderVerticalLine = (tick: number, stroke: string, strokeWidth: number, dashArray?: number[]) => {
return (
<Line
key={`vertical-line-${tick}`}
x1={x(tick)}
x2={x(tick)}
y1={topY}
y2={bottomY}
stroke={stroke}
strokeWidth={strokeWidth}
strokeDasharray={dashArray}
/>
);
};
return ( return (
<G> <G>
{renderLine(firstTick, strokeSolidColor, strokeSolidWidth)} {renderHorizontalLine(firstTick, strokeSolidColor, strokeSolidWidth)}
{remainingTicks.map((tick) => renderLine(tick, strokeDashColor, strokeDashWidth, dashArray))} {remainingTicks.map((tick) => renderHorizontalLine(tick, strokeDashColor, strokeDashWidth, dashArray))}
{includeVertical && xTicks.map((_, index) => renderVerticalLine(index, strokeDashColor, strokeDashWidth, dashArray))}
</G> </G>
); );
}; };