@sparrowengg/twigs-charts
Version:
Charts package for SurveySparrow
829 lines (804 loc) • 34 kB
TypeScript
import * as react from 'react';
import { ReactNode, ComponentProps, SVGTextElementAttributes, RefObject } from 'react';
import * as recharts from 'recharts';
import { LegendPayload, XAxisProps, YAxisProps, CartesianGridProps, LegendProps as LegendProps$1, ReferenceLine, AreaProps, AreaChart as AreaChart$1, BarProps, BarChart as BarChart$1, LineProps, LineChart as LineChart$1, ComposedChart, PieProps, Cell, PieChart as PieChart$1, RadarChart as RadarChart$1, Radar, PolarAngleAxis, PolarGrid, PolarRadiusAxis } from 'recharts';
import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
import * as _stitches_react_types_config from '@stitches/react/types/config';
import { Payload, ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
import { BoxProps } from '@sparrowengg/twigs-react';
type LegendIcons = "square" | "line";
type BaseChartLegendProps = {
payload?: ReadonlyArray<LegendPayload>;
setHighlightedItem?: (item: string | null) => void;
};
type ChartLegendProps<T extends ChartSeries | CompositeChartSeries> = BaseChartLegendProps & {
series?: T[];
icon?: LegendIcons;
renderIcon?: (series?: T | LegendPayload) => ReactNode;
};
declare const StyledResponsiveContainer: _stitches_react_types_styled_component.StyledComponent<react.ForwardRefExoticComponent<recharts.ResponsiveContainerProps & react.RefAttributes<HTMLDivElement>>, {}, {
'screen-xxs': "(min-width: 320px)";
'screen-xs': "(min-width: 480px)";
'screen-sm': "(min-width: 640px)";
'screen-md': "(min-width: 768px)";
'screen-lg': "(min-width: 1024px)";
'screen-xl': "(min-width: 1280px)";
'screen-2xl': "(min-width: 1536px)";
}, _stitches_react_types_css_util.CSS<{
'screen-xxs': "(min-width: 320px)";
'screen-xs': "(min-width: 480px)";
'screen-sm': "(min-width: 640px)";
'screen-md': "(min-width: 768px)";
'screen-lg': "(min-width: 1024px)";
'screen-xl': "(min-width: 1280px)";
'screen-2xl': "(min-width: 1536px)";
}, {
colors: {
primary: string;
secondary: string;
accent50: string;
accent100: string;
accent200: string;
accent300: string;
accent400: string;
accent500: string;
accent600: string;
accent700: string;
accent800: string;
accent900: string;
primary50: string;
primary100: string;
primary200: string;
primary300: string;
primary400: string;
primary500: string;
primary600: string;
primary700: string;
primary800: string;
primary900: string;
warning50: string;
warning100: string;
warning200: string;
warning300: string;
warning400: string;
warning500: string;
warning600: string;
warning700: string;
warning800: string;
warning900: string;
highlight50: string;
highlight100: string;
highlight200: string;
highlight300: string;
highlight400: string;
highlight500: string;
highlight600: string;
highlight700: string;
highlight800: string;
highlight900: string;
positive50: string;
positive100: string;
positive200: string;
positive300: string;
positive400: string;
positive500: string;
positive600: string;
positive700: string;
positive800: string;
positive900: string;
secondary50: string;
secondary100: string;
secondary200: string;
secondary300: string;
secondary400: string;
secondary500: string;
secondary600: string;
secondary700: string;
secondary800: string;
secondary900: string;
negative50: string;
negative100: string;
negative200: string;
negative300: string;
negative400: string;
negative500: string;
negative600: string;
negative700: string;
negative800: string;
negative900: string;
neutral50: string;
neutral100: string;
neutral200: string;
neutral300: string;
neutral400: string;
neutral500: string;
neutral600: string;
neutral700: string;
neutral800: string;
neutral900: string;
black50: string;
black100: string;
black200: string;
black300: string;
black400: string;
black500: string;
black600: string;
black700: string;
black800: string;
black900: string;
white50: string;
white100: string;
white200: string;
white300: string;
white400: string;
white500: string;
white600: string;
white700: string;
white800: string;
white900: string;
};
space: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
21: string;
22: string;
23: string;
24: string;
25: string;
26: string;
27: string;
28: string;
29: string;
30: string;
31: string;
32: string;
33: string;
34: string;
35: string;
36: string;
37: string;
38: string;
39: string;
40: string;
41: string;
42: string;
43: string;
44: string;
45: string;
46: string;
47: string;
48: string;
49: string;
50: string;
};
fontSizes: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
"5xl": string;
};
fonts: {
body: string;
heading: string;
};
fontWeights: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
};
lineHeights: {
xxs: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
};
letterSpacings: unknown;
sizes: {
1: string;
2: string;
3: string;
4: string;
5: string;
6: string;
7: string;
8: string;
9: string;
10: string;
11: string;
12: string;
13: string;
14: string;
15: string;
16: string;
17: string;
18: string;
19: string;
20: string;
21: string;
22: string;
23: string;
24: string;
25: string;
26: string;
27: string;
28: string;
29: string;
30: string;
31: string;
32: string;
33: string;
34: string;
};
borderWidths: {
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
};
borderStyles: unknown;
radii: {
none: string;
xs: string;
sm: string;
md: string;
lg: string;
xl: string;
"2xl": string;
"3xl": string;
"4xl": string;
round: string;
pill: string;
};
shadows: {
sm: string;
};
zIndices: unknown;
transitions: {
1: string;
2: string;
3: string;
};
}, _stitches_react_types_config.DefaultThemeMap, {
backgroundColorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
backgroundColor: string;
};
colorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
color: string;
};
borderColorOpacity: ([value, opacity]: ["$primary" | "$secondary" | "$accent50" | "$accent100" | "$accent200" | "$accent300" | "$accent400" | "$accent500" | "$accent600" | "$accent700" | "$accent800" | "$accent900" | "$primary50" | "$primary100" | "$primary200" | "$primary300" | "$primary400" | "$primary500" | "$primary600" | "$primary700" | "$primary800" | "$primary900" | "$warning50" | "$warning100" | "$warning200" | "$warning300" | "$warning400" | "$warning500" | "$warning600" | "$warning700" | "$warning800" | "$warning900" | "$highlight50" | "$highlight100" | "$highlight200" | "$highlight300" | "$highlight400" | "$highlight500" | "$highlight600" | "$highlight700" | "$highlight800" | "$highlight900" | "$positive50" | "$positive100" | "$positive200" | "$positive300" | "$positive400" | "$positive500" | "$positive600" | "$positive700" | "$positive800" | "$positive900" | "$secondary50" | "$secondary100" | "$secondary200" | "$secondary300" | "$secondary400" | "$secondary500" | "$secondary600" | "$secondary700" | "$secondary800" | "$secondary900" | "$negative50" | "$negative100" | "$negative200" | "$negative300" | "$negative400" | "$negative500" | "$negative600" | "$negative700" | "$negative800" | "$negative900" | "$neutral50" | "$neutral100" | "$neutral200" | "$neutral300" | "$neutral400" | "$neutral500" | "$neutral600" | "$neutral700" | "$neutral800" | "$neutral900" | "$black50" | "$black100" | "$black200" | "$black300" | "$black400" | "$black500" | "$black600" | "$black700" | "$black800" | "$black900" | "$white50" | "$white100" | "$white200" | "$white300" | "$white400" | "$white500" | "$white600" | "$white700" | "$white800" | "$white900" | (string & {}), number]) => {
borderColor: string;
};
}>>;
type StyledResponsiveContainerProps = Partial<Omit<ComponentProps<typeof StyledResponsiveContainer>, "ref" | "children">>;
interface TooltipBaseData {
label: ReactNode;
value: ReactNode;
color: string;
key: string | number;
legendIcon?: LegendIcons;
}
interface TooltipBaseProps {
title?: string;
data: TooltipBaseData[];
legendIcon?: LegendIcons;
renderFooter?: (() => ReactNode) | null;
}
type OverrideTooltipProps = TooltipBaseProps | ((props: TooltipBaseProps) => Partial<TooltipBaseProps>);
type ChartDataType = Record<string, string | number>;
interface ChartSeries {
name: string;
color?: string;
label?: string;
yAxisId?: string;
fill?: string;
stroke?: string;
strokeDasharray?: string | number;
unit?: string;
stackId?: string;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
}
type CompositeChartSeries = ChartSeries & {
type: "line" | "area" | "bar";
};
type GridAxis = "none" | "x" | "y" | "xy";
type ChartReferenceLineProps = Partial<Omit<ComponentProps<typeof ReferenceLine>, "ref">>;
type BaseCartesianChartProps = {
data: ChartDataType[];
width?: string | number;
height?: string | number;
series: ChartSeries[];
dataKey: string;
xAxisProps?: Partial<Omit<XAxisProps, "ref">>;
yAxisProps?: Partial<Omit<YAxisProps, "ref">>;
cartesianGridProps?: CartesianGridProps;
showRightYAxis?: boolean;
showTooltip?: boolean;
xAxisLabel?: ReactNode;
yAxisLabel?: ReactNode;
highlightOnLegendHover?: boolean;
showLegend?: boolean;
unit?: string;
containerProps?: StyledResponsiveContainerProps;
rightYAxisProps?: Partial<Omit<YAxisProps, "ref">>;
showAxisLine?: boolean;
children?: ReactNode;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
renderLegendIcon?: ChartLegendProps<ChartSeries>["renderIcon"];
overrideTooltipProps?: OverrideTooltipProps;
renderTooltipFooter?: () => ReactNode | null;
showTooltipFooter?: boolean;
legendProps?: LegendProps;
gridAxis?: GridAxis;
referenceLines?: ChartReferenceLineProps[];
};
type LegendProps = Omit<LegendProps$1, "ref">;
type ChartsTheme = {
/**
* Theme colors. You can override these colors to customize the chart,
* additionally custom colors can be added here in any format (ie, objects, arrays, string).
*
* To consume these colors in the chart, add a dollar sign ($) before the key.
*
* @example
* ```tsx
* areaProps: {
* fill: '$areaChartColors[0]'
* }
* ```
*/
colors: {
text?: string;
textAlternate?: string;
background?: string;
/**
* Cartesian grid line color, use config.cartesianGridProps for more customization
*/
gridLine?: string;
/**
* Text color for Y-axis tick
*/
yAxisTick?: string;
/**
* Text color for X-axis tick
*/
xAxisTick?: string;
/**
* Color for X-axis line. If this is not provided, the line will not be shown
*/
xAxisLine?: string;
/**
* Color for Y-axis line. If this is not provided, the line will not be shown
*/
yAxisLine?: string;
tooltipHeaderBackground?: string;
tooltipBodyBackground?: string;
default?: string;
legendText?: string;
/**
* Color for KPI trend positive indicator (arrow + percentage text).
* Defaults to "#1B9850"
*/
kpiPositive?: string;
/**
* Color for KPI trend negative indicator (arrow + percentage text).
* Defaults to "#E3502F"
*/
kpiNegative?: string;
/**
* Color for KPI trend neutral indicator (dash + percentage text).
* Defaults to "#9E9E9E"
*/
kpiNeutral?: string;
} & Record<string & {}, unknown>;
fontFamily?: string;
fontFamilyAlternate?: string;
config: {
cartesianGridProps?: CartesianGridProps;
yAxisProps?: Omit<YAxisProps, "ref">;
xAxisProps?: Omit<XAxisProps, "ref">;
valueFormatter?: (value?: string | number, info?: {
axis?: {
id: string;
};
tooltip?: Payload<ValueType, NameType>;
label?: ChartSeries;
}) => string | null;
};
};
declare const ThemeContext: react.Context<ChartsTheme>;
declare const ThemeProvider: ({ children, theme, }: {
children: ReactNode;
theme: ChartsTheme;
}) => react.JSX.Element;
interface CartesianLabelProps {
x?: number;
y?: number;
unit?: string;
width?: number;
height?: number;
value?: string;
index?: number;
dataLength: number;
textProps?: SVGTextElementAttributes<SVGTextElement>;
seriesItem?: ChartSeries;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
chartType?: "bar" | "area" | "line";
isStacked?: boolean;
orientation?: "horizontal" | "vertical";
}
type AreaDot = AreaProps["dot"];
type CurveType$2 = NonNullable<AreaProps["type"]>;
type AreaChartOptions = {
areaProps?: Partial<Omit<AreaProps, "ref">> | ((series: ChartSeries) => Partial<Omit<AreaProps, "ref">>);
areaDotProps?: AreaDot | null;
areaActiveDotProps?: AreaDot | null;
curveType?: CurveType$2;
chartProps?: ComponentProps<typeof AreaChart$1>;
connectNulls?: boolean;
gradient?: boolean;
type?: "default" | "stacked";
orientation?: "horizontal" | "vertical";
showAreaLabel?: boolean;
areaLabelProps?: CartesianLabelProps["textProps"];
};
type AreaChartProps = BaseCartesianChartProps & AreaChartOptions;
declare const AreaChart: ({ data, type, unit, width, height, series, dataKey, gradient, children, areaProps, curveType, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, areaDotProps, showAxisLine, connectNulls, showAreaLabel, valueFormatter: valueFormatterProp, containerProps, areaLabelProps, showRightYAxis, rightYAxisProps, renderLegendIcon, showTooltipFooter, areaActiveDotProps, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: AreaChartProps) => react.JSX.Element;
type BarChartOptions = {
barProps?: Partial<Omit<BarProps, "ref">> | ((series: ChartSeries) => Partial<Omit<BarProps, "ref">>);
chartProps?: ComponentProps<typeof BarChart$1>;
showBarLabel?: boolean;
type?: "default" | "stacked";
orientation?: "horizontal" | "vertical";
children?: ReactNode;
maxBarWidth?: number;
barLabelProps?: CartesianLabelProps["textProps"];
};
type BarChartProps = BaseCartesianChartProps & BarChartOptions;
declare const BarChart: ({ data, unit, type, width, height, series, dataKey, children, barProps, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, maxBarWidth, showBarLabel, showAxisLine, barLabelProps, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, rightYAxisProps, renderLegendIcon, showTooltipFooter, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: BarChartProps) => react.JSX.Element;
type LineDot = LineProps["dot"];
type CurveType$1 = NonNullable<LineProps["type"]>;
type LineChartOptions = {
lineProps?: Partial<Omit<LineProps, "ref">> | ((series: ChartSeries) => Partial<Omit<LineProps, "ref">>);
strokeWidth?: number;
lineDotProps?: LineDot | null;
lineActiveDotProps?: LineDot | null;
curveType?: CurveType$1;
chartProps?: ComponentProps<typeof LineChart$1>;
connectNulls?: boolean;
orientation?: "horizontal" | "vertical";
showLineLabel?: boolean;
lineLabelProps?: CartesianLabelProps["textProps"];
};
type LineChartProps = BaseCartesianChartProps & LineChartOptions;
declare const LineChart: ({ data, unit, width, height, series, dataKey, children, lineProps, curveType, chartProps, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, showTooltip, orientation, legendProps, connectNulls, strokeWidth, lineDotProps, showAxisLine, showLineLabel, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, lineLabelProps, rightYAxisProps, renderLegendIcon, showTooltipFooter, lineActiveDotProps, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: LineChartProps) => react.JSX.Element;
type CompositeChartProps = Omit<BaseCartesianChartProps, "series" | "renderLegendIcon"> & {
orientation?: "horizontal" | "vertical";
chartProps?: ComponentProps<typeof ComposedChart>;
series: CompositeChartSeries[];
areaChartOptions?: AreaChartOptions;
lineChartOptions?: LineChartOptions;
barChartOptions?: BarChartOptions;
renderLegendIcon?: ChartLegendProps<CompositeChartSeries>["renderIcon"];
};
declare const CompositeChart: ({ data, unit, width, height, series, dataKey, children, xAxisProps, yAxisProps, xAxisLabel, yAxisLabel, showLegend, chartProps, showTooltip, orientation, legendProps, showAxisLine, valueFormatter: valueFormatterProp, containerProps, showRightYAxis, barChartOptions, rightYAxisProps, areaChartOptions, lineChartOptions, renderLegendIcon, showTooltipFooter, cartesianGridProps, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, gridAxis, referenceLines, }: CompositeChartProps) => react.JSX.Element;
interface DonutChartData {
name: string;
value: number;
color?: string;
strokeWidth?: number;
stroke?: string;
}
interface DonutChartProps {
data: DonutChartData[];
width?: number | string;
height?: number | string;
size?: number;
unit?: string;
pieProps?: Omit<PieProps, "ref" | "dataKey">;
cellProps?: ComponentProps<typeof Cell> | ((cellData: DonutChartData) => ComponentProps<typeof Cell>);
showLabel?: boolean;
showTooltip?: boolean;
thickness?: number;
paddingAngle?: number;
showLabelLine?: boolean;
legendProps?: LegendProps;
showLegend?: boolean;
chartProps?: ComponentProps<typeof PieChart$1>;
middleLabel?: ReactNode;
containerProps?: StyledResponsiveContainerProps;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
renderLegendIcon?: (data?: LegendPayload) => ReactNode;
animationDuration?: number;
showTooltipFooter?: boolean;
defaultActiveIndex?: number;
highlightOnLegendHover?: boolean;
showActiveValueInCenter?: boolean;
overrideTooltipProps?: OverrideTooltipProps;
renderTooltipFooter?: () => ReactNode | null;
children?: ReactNode;
}
declare const DonutChart: ({ data, size, unit, width, height, children, pieProps, cellProps, showLabel, chartProps, showLegend, legendProps, showTooltip, thickness, middleLabel, paddingAngle, showLabelLine, containerProps, valueFormatter: valueFormatterProp, renderLegendIcon, showTooltipFooter, animationDuration, defaultActiveIndex, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, showActiveValueInCenter, }: DonutChartProps) => react.JSX.Element;
interface PieChartData {
name: string;
value: number;
color?: string;
strokeWidth?: number;
stroke?: string;
}
interface PieChartProps {
data: PieChartData[];
size?: number;
unit?: string;
width?: string | number;
height?: string | number;
pieProps?: Omit<PieProps, "ref">;
cellProps?: ComponentProps<typeof Cell> | ((cellData: PieChartData) => ComponentProps<typeof Cell>);
showLabel?: boolean;
showTooltip?: boolean;
showActiveShape?: boolean;
showLabelLine?: boolean;
showLegend?: boolean;
chartProps?: ComponentProps<typeof PieChart$1>;
startAngle?: number;
endAngle?: number;
innerRadius?: number;
outerRadius?: number;
paddingAngle?: number;
cornerRadius?: number;
containerProps?: StyledResponsiveContainerProps;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
renderLegendIcon?: (data?: LegendPayload) => ReactNode;
animationDuration?: number;
highlightOnLegendHover?: boolean;
children?: ReactNode;
overrideTooltipProps?: OverrideTooltipProps;
renderTooltipFooter?: () => ReactNode | null;
showTooltipFooter?: boolean;
legendProps?: Omit<LegendProps, "ref">;
defaultActiveIndex?: number;
}
declare const PieChart: ({ data, size, unit, width, height, children, pieProps, cellProps, showLabel, chartProps, startAngle, endAngle, innerRadius, outerRadius, paddingAngle, cornerRadius, showLegend, showTooltip, showLabelLine, containerProps, valueFormatter: valueFormatterProp, showActiveShape, renderLegendIcon, showTooltipFooter, animationDuration, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, legendProps, defaultActiveIndex, }: PieChartProps) => react.JSX.Element;
interface RadarChartSeries {
name: string;
dataKey?: string;
color?: string;
strokeWidth?: number;
stroke?: string;
}
interface RadarChartProps {
data: Record<string, unknown>[];
series: RadarChartSeries[];
size?: number;
unit?: string;
width?: string | number;
height?: string | number;
dataKey?: string;
chartProps?: ComponentProps<typeof RadarChart$1>;
radarProps?: Partial<Omit<ComponentProps<typeof Radar>, "ref">> | ((cellData: RadarChartSeries) => Partial<ComponentProps<typeof Radar>>);
showTooltip?: boolean;
showPolarRadiusAxis?: boolean;
showPolarAngleAxis?: boolean;
showPolarGrid?: boolean;
polarAngleAxisProps?: Omit<ComponentProps<typeof PolarAngleAxis>, "ref">;
polarGridProps?: Omit<ComponentProps<typeof PolarGrid>, "ref">;
polarRadiusAxisProps?: Omit<ComponentProps<typeof PolarRadiusAxis>, "ref">;
showLegend?: boolean;
legendProps?: LegendProps;
containerProps?: StyledResponsiveContainerProps;
renderTooltipFooter?: () => ReactNode | null;
showTooltipFooter?: boolean;
valueFormatter?: ChartsTheme["config"]["valueFormatter"];
renderLegendIcon?: (data?: LegendPayload) => ReactNode;
highlightOnLegendHover?: boolean;
overrideTooltipProps?: OverrideTooltipProps;
children?: ReactNode;
}
declare const RadarChart: ({ data, size, unit, width, height, series, dataKey, children, radarProps, chartProps, showLegend, showTooltip, legendProps, containerProps, polarRadiusAxisProps, showPolarRadiusAxis, polarAngleAxisProps, polarGridProps, showPolarAngleAxis, showPolarGrid, valueFormatter: valueFormatterProp, renderLegendIcon, showTooltipFooter, renderTooltipFooter, overrideTooltipProps, highlightOnLegendHover, }: RadarChartProps) => react.JSX.Element;
type CurveType = NonNullable<AreaProps["type"]>;
type SparklineProps = {
width?: number | string;
height?: number | string;
children?: ReactNode;
data: (number | null)[];
areaProps?: Partial<Omit<AreaProps, "ref">> | ((series: ChartSeries) => Partial<Omit<AreaProps, "ref">>);
color: string;
curveType?: CurveType;
chartProps?: ComponentProps<typeof AreaChart$1>;
connectNulls?: boolean;
gradient?: boolean;
orientation?: "horizontal" | "vertical";
containerProps?: StyledResponsiveContainerProps;
};
declare const Sparkline: ({ data, width, height, color: colorProp, gradient, children, areaProps, curveType, chartProps, orientation, connectNulls, containerProps, }: SparklineProps) => react.JSX.Element;
interface CellRenderData {
x: number;
y: number;
item: HeatmapDataItem;
cellWidth: number;
cellHeight: number;
fill: string;
textColor: string;
value: number;
id: string;
}
interface LegendRenderData {
x: number;
y: number;
barWidth: number;
barHeight: number;
color: string;
minColor: string;
maxColor: string;
minValue: number;
maxValue: number;
labels: {
x: number;
y: number;
text: string;
}[];
deriveFillColor: (props: DeriveFillColorProps) => string;
}
interface HeatmapLegendProps extends LegendRenderData {
}
interface HeatmapTooltipProps {
title: string;
x: number;
y: number;
cellSize?: number;
item: {
label: string;
value: string;
color: string;
payload?: HeatmapDataItem;
};
containerRef?: RefObject<HTMLDivElement | null>;
renderFooter?: () => ReactNode | null;
showFooter?: boolean;
}
type HeatmapDataItem = {
x: string;
y: string;
value: number;
} & Record<string, unknown>;
interface HeatmapXAxisItem {
dataKey: string;
group?: string;
label?: string;
}
interface HeatmapYAxisItem {
dataKey: string;
label?: string;
}
type HeatmapXAxisGroup = {
name: string;
items: string[];
} & Record<string, unknown>;
interface HeatmapSeries {
xAxis: string[] | HeatmapXAxisItem[];
yAxis: string[] | HeatmapYAxisItem[];
xAxisGroup?: HeatmapXAxisGroup[];
}
type HeatmapProps = {
width?: number | string;
height?: number | string;
containerProps?: BoxProps;
series: HeatmapSeries;
data: HeatmapDataItem[];
cellSize?: number;
cellSpacing?: number;
groupSpacing?: number;
color?: string;
cellProps?: Omit<React.SVGAttributes<SVGGElement>, "onClick"> & {
onClick?: (e: React.MouseEvent<SVGGElement, MouseEvent>, cellGroup: CellRenderData) => void;
};
cellWidth?: number;
cellHeight?: number;
marginX?: number;
marginY?: number;
yAxisWidth?: number;
xAxisHeight?: number;
groupLabelHeight?: number;
legendWidth?: number;
legendHeight?: number;
legendBarHeight?: number;
legendMarginTop?: number;
showTooltipFooter?: boolean;
textColor?: string;
textColorAlternate?: string;
deriveFillColor?: (props: DeriveFillColorProps) => string;
renderGroupLabel?: (props: {
x: number;
y: number;
group: HeatmapXAxisGroup;
}) => ReactNode;
renderCell?: (props: CellRenderData & {
isHovered: boolean;
hoveredCellId: string | null;
elementProps: Record<string, string>;
}) => ReactNode;
renderLegend?: (props: HeatmapLegendProps) => ReactNode;
renderXAxisLabel?: (props: {
x: number;
y: number;
text: string;
groupName: string;
}) => ReactNode;
renderYAxisLabel?: (props: {
x: number;
y: number;
text: string;
}) => ReactNode;
renderTooltipFooter?: () => ReactNode | null;
tooltipProps?: Partial<HeatmapTooltipProps> | ((props: HeatmapTooltipProps) => Partial<HeatmapTooltipProps>);
};
interface DeriveFillColorProps {
color?: string;
maxValue: number;
minValue: number;
value: number;
data?: HeatmapDataItem;
}
declare const Heatmap: ({ data, width, height, series, containerProps, cellSize, cellSpacing, groupSpacing, yAxisWidth, xAxisHeight, groupLabelHeight, marginX, marginY, color: colorProp, cellProps, cellHeight, cellWidth, legendBarHeight, legendHeight, legendMarginTop, legendWidth, showTooltipFooter, tooltipProps, textColor, textColorAlternate, deriveFillColor, renderCell, renderGroupLabel, renderLegend, renderXAxisLabel, renderYAxisLabel, renderTooltipFooter, }: HeatmapProps) => react.JSX.Element;
type KPITrendDirection = "up" | "down" | "neutral";
type KPITrendStatus = "positive" | "negative" | "neutral";
type KPITrend = {
percentage: number;
direction: KPITrendDirection;
status?: KPITrendStatus;
label?: ReactNode;
showTooltip?: boolean;
tooltipContent?: ReactNode;
};
type KPIChartProps = {
value: number | string;
title: string;
icon?: ReactNode;
prefix?: string;
suffix?: string;
valueFormatter?: (v: number | string) => string;
trend?: KPITrend;
width?: string | number;
onClick?: () => void;
};
declare const KPIChart: ({ value, title, icon, prefix, suffix, valueFormatter, trend, width, onClick, }: KPIChartProps) => react.JSX.Element;
declare const useTheme: () => ChartsTheme;
declare const getColor: (obj: Record<string, unknown>, color: string) => string;
export { AreaChart, BarChart, CompositeChart, DonutChart, Heatmap, KPIChart, LineChart, PieChart, RadarChart, Sparkline, ThemeContext, ThemeProvider, getColor, useTheme };
export type { AreaChartOptions, AreaChartProps, BarChartOptions, BarChartProps, ChartsTheme, CompositeChartProps, DeriveFillColorProps, DonutChartData, DonutChartProps, HeatmapDataItem, HeatmapProps, HeatmapSeries, HeatmapXAxisGroup, HeatmapXAxisItem, HeatmapYAxisItem, KPIChartProps, KPITrend, KPITrendDirection, KPITrendStatus, LineChartOptions, LineChartProps, PieChartData, PieChartProps, RadarChartProps, RadarChartSeries, SparklineProps };