@vx typings

axis.d.ts

declare module '@vx/axis' {
  import React from 'react';
  import { ScaleTime } from 'd3-scale';

  interface Point {
    x: number;
    y: number;
  }

  interface AxisProps {
    axisClassName?: string;
    axisLineClassName?: string;
    hideAxisLine?: boolean;
    hideTicks?: boolean;
    hideZero?: boolean;
    label?: string;
    labelClassName?: string;
    labelOffset?: number;
    labelProps?: object;
    left?: number;
    numTicks?: number;
    rangePadding?: number;
    scale?: ScaleTime<any, any>;
    stroke?: string;
    strokeWidth?: number;
    strokeDasharray?: string;
    tickClassName?: string;
    tickFormat?: (value: any, index: number) => string;
    tickLabelProps?: (value: any, index: number) => object;
    tickLength?: number;
    tickStroke?: string;
    tickTransform?: string;
    tickValues?: number[];
    tickComponent?:
      | React.ReactNode
      | ((
          obj: { x: number; y: number; formattedValue: string }
        ) => React.ReactNode);
    top?: number;
    children?: (
      renderProps: {
        axisFromPoint: Point;
        axisToPoint: Point;
        horizontal: boolean;
        tickSign: 1 | -1;
        numTicks: number;
        label: string;
        rangePadding: number;
        tickLength: number;
        tickFormat: (value: any, index: number) => string;
        tickPosition: (value: number) => number;
        ticks: {
          value: any;
          index: number;
          from: Point;
          to: Point;
          formattedValue: string;
        };
      }
    ) => React.ReactNode;
  }

  const AxisLeft: React.ComponentType<AxisProps>;
  const AxisBottom: React.ComponentType<AxisProps>;
}

grid.d.ts

declare module '@vx/grid' {
  import React from 'react';
  import { ScaleTime } from 'd3-scale';

  interface GridColumnsProps {
    top?: number;
    left?: number;
    className?: string;
    stroke?: string;
    strokeWidth?: string | number;
    strokeDasharray?: string;
    numTicks?: number;
    lineStyle?: React.StyleHTMLAttributes<SVGLineElement>;
    offset?: number;
    scale: ScaleTime<any, any>;
    height: number;
    tickValues?: number[];
  }
  const GridColumns: React.ComponentType<GridColumnsProps>;

  interface GridRowsProps {
    top?: number;
    left?: number;
    className?: string;
    stroke?: string;
    strokeWidth?: string | number;
    strokeDasharray?: string;
    numTicks?: number;
    lineStyle?: React.StyleHTMLAttributes<SVGLineElement>;
    offset?: number;
    scale: ScaleTime<any, any>;
    width: number;
    tickValues?: number[];
  }
  const GridRows: React.ComponentType<GridRowsProps>;
}

responsive.d.ts

declare module '@vx/responsive' {
  import React from 'react';

  interface ParentSizeProps {
    children: (
      renderProps: {
        width: number;
        height: number;
      }
    ) => React.ReactNode;
  }

  const ParentSize: React.ComponentType<ParentSizeProps>;
}

text.d.ts

declare module '@vx/text' {
  import React from 'react';

  interface TextProps extends React.SVGAttributes<SVGTextElement> {
    children: string;
    scaleToFit?: boolean;
    angle?: number;
    textAnchor?: 'start' | 'middle' | 'end' | 'inherit';
    verticalAnchor?: 'start' | 'middle' | 'end';
    x?: number | string;
    y?: number | string;
    dx?: number | string;
    dy?: number | string;
    lineHeight?: number | string;
    capHeight?: number | string;
  }

  const Text: React.ComponentType<TextProps>;
}

tooltip.d.ts

declare module '@vx/tooltip' {
  import React from 'react';
  import { Omit, PropInjector } from '@material-ui/core';

  // TODO: add <TData> and use for `tooltipData`,
  export interface WithTooltipProps {
    tooltipOpen: boolean;
    tooltipLeft: number;
    tooltipTop: number;
    tooltipData: any;
    hideTooltip: () => void;
    showTooltip: (
      args: { tooltipLeft: number; tooltipTop: number; tooltipData: any }
    ) => void;
  }
  export const withTooltip: PropInjector<WithTooltipProps>;

  interface TooltipWithBoundsProps {
    key: number | string;
    top: number;
    left: number;
    children: React.ReactNode;
  }
  const TooltipWithBounds: React.ComponentType<TooltipWithBoundsProps>;
}