Skip to content

Instantly share code, notes, and snippets.

@techniq
Created December 30, 2018 15:45
Show Gist options
  • Save techniq/e52d3f797c827b765ac67ff0cbe98ced to your computer and use it in GitHub Desktop.
Save techniq/e52d3f797c827b765ac67ff0cbe98ced to your computer and use it in GitHub Desktop.
@vx typings
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>;
}
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>;
}
declare module '@vx/responsive' {
import React from 'react';
interface ParentSizeProps {
children: (
renderProps: {
width: number;
height: number;
}
) => React.ReactNode;
}
const ParentSize: React.ComponentType<ParentSizeProps>;
}
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>;
}
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>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment