add vertical option for custom-grid, add dev docs
This commit is contained in:
parent
ec6d36b44c
commit
9d5164bd13
@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user