mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-16 23:10:29 +00:00
[victory] update definitions for VictoryTheme, add className to VictoryLabel (#38141)
* update VictoryTheme, add className to VictoryLabel * update tests * organize props * remove `Required` in favor of inline syntax
This commit is contained in:
alecf
Vendored
+105
-30
@@ -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 <https://github.com/asvetliakov>
|
||||
// snerks <https://github.com/snerks>
|
||||
@@ -9,6 +9,7 @@
|
||||
// Esteban Ibarra <https://github.com/ibarrae>
|
||||
// Dominic Lee <https://github.com/dominictwlee>
|
||||
// Dave Vedder <https://github.com/veddermatic>
|
||||
// Alec Flett <https://github.com/alecf>
|
||||
// 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<VictoryZoomContainerProps, any> {}
|
||||
|
||||
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 {
|
||||
|
||||
@@ -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<T> = {
|
||||
[P in keyof T]-?: T[P] extends (infer U)[]
|
||||
? RecursiveRequired<U>[]
|
||||
: T[P] extends object
|
||||
? RecursiveRequired<T[P]>
|
||||
: T[P];
|
||||
};
|
||||
|
||||
// tslint:disable-next-line: no-object-literal-type-assertion
|
||||
const cssProps: Required<React.CSSProperties> = {} as Required<React.CSSProperties>;
|
||||
const colorScale: string[] = ['blue'];
|
||||
const victoryStyle: RecursiveRequired<Required<VictoryStyleInterface>> = {
|
||||
parent: cssProps,
|
||||
data: cssProps,
|
||||
labels: cssProps,
|
||||
};
|
||||
const fullTheme: RecursiveRequired<Required<VictoryThemeDefinition>> = {
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user