diff --git a/types/victory/index.d.ts b/types/victory/index.d.ts index 75268fd906..3d9c0983f7 100644 --- a/types/victory/index.d.ts +++ b/types/victory/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Victory 31.0 +// Type definitions for Victory 33.0 // Project: https://github.com/FormidableLabs/victory, https://formidable.com/open-source/victory // Definitions by: Alexey Svetliakov // snerks @@ -9,6 +9,7 @@ // Esteban Ibarra // Dominic Lee // Dave Vedder +// Alec Flett // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.8 @@ -161,6 +162,10 @@ declare module 'victory' { * @default "0.71em" */ capHeight?: StringOrNumberOrCallback; + /** + * The className prop specifies a class name that will be applied to the rendered text element. + */ + className?: string; /** * Victory components can pass a datum prop to their label component. This can be used to calculate functional styles, and determine child text */ @@ -623,42 +628,112 @@ declare module 'victory' { export class VictoryZoomContainer extends React.Component {} + type ThemeBaseProps = { + width: number; + height: number; + colorScale: string[]; + padding?: number; + }; + // Note: Many SVG attributes are missed in CSSProperties interface export interface VictoryThemeDefinition { - area?: VictoryStyleInterface; + area?: { + style?: { + data?: VictoryStyleInterface; + labels?: VictoryStyleInterface; + }; + } & ThemeBaseProps; axis?: { - axis: React.CSSProperties; - axisLabel: React.CSSProperties; - grid: React.CSSProperties; - ticks: React.CSSProperties; - tickLabels: React.CSSProperties; - }; - bar?: VictoryStyleInterface; - candlestick?: VictoryStyleInterface & { - props: { - width: number; - height: number; - candleColors: { - positive: string; - negative: string; - }; + style?: { + axis?: React.CSSProperties; + axisLabel?: React.CSSProperties; + grid?: React.CSSProperties; + ticks?: React.CSSProperties; + tickLabels?: React.CSSProperties; }; - }; - line?: VictoryStyleInterface; + } & ThemeBaseProps; + bar?: { + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + }; + } & ThemeBaseProps; + boxplot?: { + style?: { + max?: React.CSSProperties; + maxLabels?: React.CSSProperties; + median?: React.CSSProperties; + medianLabels?: React.CSSProperties; + min?: React.CSSProperties; + minLabels?: React.CSSProperties; + q1?: React.CSSProperties; + q1Labels?: React.CSSProperties; + q3?: React.CSSProperties; + q3Labels?: React.CSSProperties; + }; + boxWidth?: number; + } & ThemeBaseProps; + candlestick?: { + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + }; + candleColors?: { + positive?: string; + negative?: string; + }; + } & ThemeBaseProps; + chart?: ThemeBaseProps; + errorbar?: { + borderWidth?: number; + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + }; + } & ThemeBaseProps; + group?: ThemeBaseProps; + legend?: { + gutter?: number; + orientation?: 'vertical' | 'horizontal'; + titleOrientation?: OrientationTypes; + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + title?: React.CSSProperties; + }; + } & ThemeBaseProps; + line?: { + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + }; + } & ThemeBaseProps; pie?: { - props: { - width: number; - height: number; - colorScale: string[]; + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; }; - style: VictoryStyleInterface; - }; - scatter?: VictoryStyleInterface; - props?: { - width: number; - height: number; - colorScale: string[]; + } & ThemeBaseProps; + scatter?: { + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + }; + } & ThemeBaseProps; + stack?: ThemeBaseProps; + tooltip?: { + style?: React.CSSProperties; + flyoutStyle?: React.CSSProperties; + cornerRadius?: number; + pointerLength?: number; }; + voronoi?: { + style?: { + data?: React.CSSProperties; + labels?: React.CSSProperties; + flyout?: React.CSSProperties; + }; + } & ThemeBaseProps; } interface VictoryThemeInterface { diff --git a/types/victory/victory-tests.tsx b/types/victory/victory-tests.tsx index 512fa7b3b3..4bed7566f1 100644 --- a/types/victory/victory-tests.tsx +++ b/types/victory/victory-tests.tsx @@ -11,7 +11,9 @@ import { VictoryChart, VictoryScatter, VictoryPie, + VictoryStyleInterface, VictoryTheme, + VictoryThemeDefinition, VictoryLegend, VictoryBoxPlot, VictoryGroup, @@ -663,3 +665,149 @@ test = ( data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]} /> ); + +const emptyTheme: VictoryThemeDefinition = {}; + +type RecursiveRequired = { + [P in keyof T]-?: T[P] extends (infer U)[] + ? RecursiveRequired[] + : T[P] extends object + ? RecursiveRequired + : T[P]; +}; + +// tslint:disable-next-line: no-object-literal-type-assertion +const cssProps: Required = {} as Required; +const colorScale: string[] = ['blue']; +const victoryStyle: RecursiveRequired> = { + parent: cssProps, + data: cssProps, + labels: cssProps, +}; +const fullTheme: RecursiveRequired> = { + area: { + style: { + data: victoryStyle, + labels: victoryStyle, + }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + axis: { + style: { + axis: cssProps, + axisLabel: cssProps, + grid: cssProps, + ticks: cssProps, + tickLabels: cssProps, + }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + bar: { + colorScale, + height: 0, + padding: 0, + style: { data: cssProps, labels: cssProps }, + width: 0, + }, + boxplot: { + style: { + max: cssProps, + maxLabels: cssProps, + median: cssProps, + medianLabels: cssProps, + min: cssProps, + minLabels: cssProps, + q1: cssProps, + q1Labels: cssProps, + q3: cssProps, + q3Labels: cssProps, + }, + boxWidth: 0, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + candlestick: { + style: { data: cssProps, labels: cssProps }, + candleColors: { + positive: '#ffffff', + negative: '#000000', + }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + chart: { width: 0, height: 0, colorScale, padding: 0 }, + errorbar: { + style: { data: cssProps, labels: cssProps }, + borderWidth: 0, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + group: { + colorScale, + height: 0, + padding: 0, + width: 0, + }, + legend: { + style: { data: cssProps, labels: cssProps, title: cssProps }, + colorScale, + gutter: 0, + height: 0, + orientation: 'vertical', + padding: 0, + titleOrientation: 'top', + width: 0, + }, + line: { + style: { data: cssProps, labels: cssProps }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + pie: { + style: { data: cssProps, labels: cssProps }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + scatter: { + style: { data: cssProps, labels: cssProps }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, + stack: { + colorScale, + height: 0, + padding: 50, + width: 0, + }, + tooltip: { + cornerRadius: 0, + flyoutStyle: cssProps, + pointerLength: 0, + style: cssProps, + }, + voronoi: { + style: { data: cssProps, labels: cssProps, flyout: cssProps }, + colorScale, + height: 0, + padding: 0, + width: 0, + }, +};