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

import React from 'react';
import { G, Line } from 'react-native-svg';
import { colors } from '../../styles';
import { ScaleBandType, ScaleLinearType } from './graph-types';

interface CustomGridProps {
  x: ScaleBandType;
  y: ScaleLinearType;
  ticks: Array<number>;
  includeVertical?: boolean;
  xTicks?: Array<number | string>;
}
/**
 * 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 dashArray = [1, 3];
  const strokeSolidWidth = 0.2;
  const strokeSolidColor = colors.bgBlack;
  const strokeDashWidth = 1;
  const strokeDashColor = colors.lightGrey;

  const renderHorizontalLine = (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}
    />
  );

  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 (
    <G>
      {renderHorizontalLine(firstTick, strokeSolidColor, strokeSolidWidth)}
      {remainingTicks.map((tick) => renderHorizontalLine(tick, strokeDashColor, strokeDashWidth, dashArray))}
      {includeVertical && xTicks.map((_, index) => renderVerticalLine(index, strokeDashColor, strokeDashWidth, dashArray))}
    </G>
  );
};