@sproutsocial/seeds-react-data-viz 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/dist/esm/index.js +3703 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/index.d.mts +185 -0
- package/dist/index.d.ts +185 -0
- package/dist/index.js +3758 -0
- package/dist/index.js.map +1 -0
- package/package.json +48 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { Table } from '@sproutsocial/racine';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
6
|
+
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
7
|
+
import * as styled_components from 'styled-components';
|
|
8
|
+
import { Options, TimeTicksInfoObject, AxisLabelsFormatterContextObject, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
|
|
9
|
+
|
|
10
|
+
type TypeChartTableProps = Readonly<{
|
|
11
|
+
rows: ReadonlyArray<{
|
|
12
|
+
cells: ReadonlyArray<{
|
|
13
|
+
content: React.ReactNode;
|
|
14
|
+
align?: React.ComponentProps<typeof Table.Cell>["align"];
|
|
15
|
+
colSpan?: React.ComponentProps<typeof Table.Cell>["colSpan"];
|
|
16
|
+
}>;
|
|
17
|
+
isAppendedRow?: boolean;
|
|
18
|
+
}>;
|
|
19
|
+
}>;
|
|
20
|
+
declare const ChartTable: react.NamedExoticComponent<Readonly<{
|
|
21
|
+
rows: ReadonlyArray<{
|
|
22
|
+
cells: ReadonlyArray<{
|
|
23
|
+
content: React.ReactNode;
|
|
24
|
+
align?: React.ComponentProps<typeof Table.Cell>["align"];
|
|
25
|
+
colSpan?: React.ComponentProps<typeof Table.Cell>["colSpan"];
|
|
26
|
+
}>;
|
|
27
|
+
isAppendedRow?: boolean;
|
|
28
|
+
}>;
|
|
29
|
+
}>>;
|
|
30
|
+
|
|
31
|
+
type TypeColorBoxProps = TypeBoxProps;
|
|
32
|
+
/**
|
|
33
|
+
* ColorBox extends Box to apply basic styles.
|
|
34
|
+
*/
|
|
35
|
+
declare const ColorBox: ({ display, height, width, minWidth, borderRadius, ...props }: TypeColorBoxProps) => react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
type TypeDatavizColorBoxProps = Readonly<Partial<TypeColorBoxProps> & {
|
|
38
|
+
colorIndex: number;
|
|
39
|
+
}>;
|
|
40
|
+
type TypeDatavizColorBox = (props: TypeDatavizColorBoxProps) => react.JSXElementConstructor<TypeDatavizColorBoxProps>;
|
|
41
|
+
/**
|
|
42
|
+
* DatavizColorBox extends ColorBox to set the background color from a rotation of <a href="https://seeds.sproutsocial.com/visual/dataviz#color-combinations-for-general-sprout-social-data-visualizations">dataviz colors</a>.
|
|
43
|
+
*/
|
|
44
|
+
declare const DatavizColorBox: styled_components.StyledComponent<({ display, height, width, minWidth, borderRadius, ...props }: TypeColorBoxProps) => react_jsx_runtime.JSX.Element, any, {
|
|
45
|
+
style: {
|
|
46
|
+
background: string;
|
|
47
|
+
opacity: number;
|
|
48
|
+
};
|
|
49
|
+
} & Readonly<Partial<_sproutsocial_seeds_react_box.TypeBoxProps> & {
|
|
50
|
+
colorIndex: number;
|
|
51
|
+
}>, "style">;
|
|
52
|
+
declare const getDatavizColor: (colorIndex: number) => string;
|
|
53
|
+
declare const getDatavizOpacity: (colorIndex: number) => number;
|
|
54
|
+
declare const getDatavizColorWithAlpha: (colorIndex: number) => string;
|
|
55
|
+
|
|
56
|
+
type TypeNetworkColor = "NETWORK_COLOR_TWITTER" | "NETWORK_COLOR_TWITTER_LIKE" | "NETWORK_COLOR_FACEBOOK" | "NETWORK_COLOR_FACEBOOK_AUDIENCE_NETWORK" | "NETWORK_COLOR_LINKEDIN" | "NETWORK_COLOR_INSTAGRAM" | "NETWORK_COLOR_FEEDLY" | "NETWORK_COLOR_ANALYTICS" | "NETWORK_COLOR_YOUTUBE" | "NETWORK_COLOR_MESSENGER" | "NETWORK_COLOR_SNAPCHAT" | "NETWORK_COLOR_PINTEREST" | "NETWORK_COLOR_REDDIT" | "NETWORK_COLOR_TUMBLR" | "NETWORK_COLOR_GOOGLE_MY_BUSINESS" | "NETWORK_COLOR_TIKTOK" | "NETWORK_COLOR_TRIPADVISOR" | "NETWORK_COLOR_GLASSDOOR" | "NETWORK_COLOR_SALESFORCE" | "NETWORK_COLOR_ZENDESK" | "NETWORK_COLOR_HUBSPOT" | "NETWORK_COLOR_MICROSOFT_DYNAMICS";
|
|
57
|
+
type TypeNetworkColorBoxProps = Readonly<TypeColorBoxProps & {
|
|
58
|
+
networkColor: TypeNetworkColor;
|
|
59
|
+
}>;
|
|
60
|
+
/**
|
|
61
|
+
* NetworkColorBox extends ColorBox to set the background color to a <a href="https://seeds.sproutsocial.com/visual/color#full-color-palette">network color</a>.
|
|
62
|
+
*/
|
|
63
|
+
declare const NetworkColorBox: ({ networkColor, ...props }: TypeNetworkColorBoxProps) => react_jsx_runtime.JSX.Element;
|
|
64
|
+
|
|
65
|
+
declare const baseChartOptions: Options;
|
|
66
|
+
declare const TIME_SERIES_CHART_HEIGHT = 275;
|
|
67
|
+
declare const lineChartOptions: Options;
|
|
68
|
+
declare const areaChartOptions: Options;
|
|
69
|
+
declare const DONUT_CHART_HALO_SIZE = 10;
|
|
70
|
+
declare const DONUT_CHART_HEIGHT: number;
|
|
71
|
+
declare const DONUT_CHART_WIDTH: number;
|
|
72
|
+
declare const donutChartOptions: Options;
|
|
73
|
+
|
|
74
|
+
interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
|
|
75
|
+
unitName: "hour" | "day" | "week" | "month" | "year";
|
|
76
|
+
}
|
|
77
|
+
interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterContextObject {
|
|
78
|
+
tickPositionInfo: ExtendedTimeTicksInfoObject;
|
|
79
|
+
}
|
|
80
|
+
type TypeChartDataPoint = Readonly<{
|
|
81
|
+
x: number;
|
|
82
|
+
y: number | null;
|
|
83
|
+
}>;
|
|
84
|
+
type TypeChartDataStyles = Readonly<{
|
|
85
|
+
color?: TypeChartStyleColor;
|
|
86
|
+
}>;
|
|
87
|
+
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
88
|
+
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
89
|
+
x: number;
|
|
90
|
+
}) => ReactNode;
|
|
91
|
+
type TypeChartTooltipProps = Readonly<{
|
|
92
|
+
data: ReadonlyArray<Readonly<{
|
|
93
|
+
color: TypeChartStyleColor;
|
|
94
|
+
name: string;
|
|
95
|
+
value: number | null;
|
|
96
|
+
icon?: ReactNode;
|
|
97
|
+
}>>;
|
|
98
|
+
x: number;
|
|
99
|
+
}>;
|
|
100
|
+
type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
|
|
101
|
+
y: number;
|
|
102
|
+
yValues: ReadonlyArray<number>;
|
|
103
|
+
}>) => string;
|
|
104
|
+
type TypeChartStyleColor = string;
|
|
105
|
+
type TypeChartStylePattern = "solid" | "dashed";
|
|
106
|
+
type TypeChartStyleHasOnClick = boolean;
|
|
107
|
+
|
|
108
|
+
type TypeAreaChartProps = Readonly<{
|
|
109
|
+
data: ReadonlyArray<Readonly<{
|
|
110
|
+
name: string;
|
|
111
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
112
|
+
icon?: ReactNode;
|
|
113
|
+
styles?: TypeChartDataStyles;
|
|
114
|
+
}>>;
|
|
115
|
+
invalidNumberLabel: ReactNode;
|
|
116
|
+
numberLocale: Intl.LocalesArgument;
|
|
117
|
+
textLocale: Intl.LocalesArgument;
|
|
118
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
119
|
+
tooltipTotalLabel: ReactNode;
|
|
120
|
+
currency?: string;
|
|
121
|
+
numberFormat?: TypeChartNumberFormat;
|
|
122
|
+
tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
|
|
123
|
+
total: number | null;
|
|
124
|
+
}>) => ReactNode;
|
|
125
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
126
|
+
onClick?: ({ x }: Readonly<{
|
|
127
|
+
x: number;
|
|
128
|
+
}>) => void;
|
|
129
|
+
tooltipClickLabel?: ReactNode;
|
|
130
|
+
}>;
|
|
131
|
+
|
|
132
|
+
type TypeLineChartProps = Readonly<{
|
|
133
|
+
data: ReadonlyArray<Readonly<{
|
|
134
|
+
name: string;
|
|
135
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
136
|
+
icon?: ReactNode;
|
|
137
|
+
styles?: TypeChartDataStyles & Readonly<{
|
|
138
|
+
pattern?: TypeChartStylePattern;
|
|
139
|
+
}>;
|
|
140
|
+
}>>;
|
|
141
|
+
invalidNumberLabel: ReactNode;
|
|
142
|
+
numberLocale: Intl.LocalesArgument;
|
|
143
|
+
textLocale: Intl.LocalesArgument;
|
|
144
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
145
|
+
currency?: string;
|
|
146
|
+
numberFormat?: TypeChartNumberFormat;
|
|
147
|
+
tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
|
|
148
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
149
|
+
onClick?: ({ x }: Readonly<{
|
|
150
|
+
x: number;
|
|
151
|
+
}>) => void;
|
|
152
|
+
tooltipClickLabel?: ReactNode;
|
|
153
|
+
}>;
|
|
154
|
+
|
|
155
|
+
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
|
|
156
|
+
declare const transformDataToSeries: ({ data }: {
|
|
157
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
158
|
+
}, type: "spline" | "areaspline") => TypeTimeSeriesOptions[];
|
|
159
|
+
|
|
160
|
+
type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
161
|
+
context: TooltipFormatterContextObject;
|
|
162
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
163
|
+
}>;
|
|
164
|
+
type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
|
|
165
|
+
declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
|
|
166
|
+
|
|
167
|
+
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
168
|
+
textLocale: Intl.LocalesArgument;
|
|
169
|
+
tickPositions: AxisTickPositionsArray;
|
|
170
|
+
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
171
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
172
|
+
}>;
|
|
173
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
|
|
174
|
+
|
|
175
|
+
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
176
|
+
numberLocale: Intl.LocalesArgument;
|
|
177
|
+
textLocale: Intl.LocalesArgument;
|
|
178
|
+
tickPositions: AxisTickPositionsArray;
|
|
179
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
180
|
+
currency?: string;
|
|
181
|
+
numberFormat?: TypeChartNumberFormat;
|
|
182
|
+
}>;
|
|
183
|
+
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
184
|
+
|
|
185
|
+
export { ChartTable, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { Table } from '@sproutsocial/racine';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
6
|
+
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
7
|
+
import * as styled_components from 'styled-components';
|
|
8
|
+
import { Options, TimeTicksInfoObject, AxisLabelsFormatterContextObject, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
|
|
9
|
+
|
|
10
|
+
type TypeChartTableProps = Readonly<{
|
|
11
|
+
rows: ReadonlyArray<{
|
|
12
|
+
cells: ReadonlyArray<{
|
|
13
|
+
content: React.ReactNode;
|
|
14
|
+
align?: React.ComponentProps<typeof Table.Cell>["align"];
|
|
15
|
+
colSpan?: React.ComponentProps<typeof Table.Cell>["colSpan"];
|
|
16
|
+
}>;
|
|
17
|
+
isAppendedRow?: boolean;
|
|
18
|
+
}>;
|
|
19
|
+
}>;
|
|
20
|
+
declare const ChartTable: react.NamedExoticComponent<Readonly<{
|
|
21
|
+
rows: ReadonlyArray<{
|
|
22
|
+
cells: ReadonlyArray<{
|
|
23
|
+
content: React.ReactNode;
|
|
24
|
+
align?: React.ComponentProps<typeof Table.Cell>["align"];
|
|
25
|
+
colSpan?: React.ComponentProps<typeof Table.Cell>["colSpan"];
|
|
26
|
+
}>;
|
|
27
|
+
isAppendedRow?: boolean;
|
|
28
|
+
}>;
|
|
29
|
+
}>>;
|
|
30
|
+
|
|
31
|
+
type TypeColorBoxProps = TypeBoxProps;
|
|
32
|
+
/**
|
|
33
|
+
* ColorBox extends Box to apply basic styles.
|
|
34
|
+
*/
|
|
35
|
+
declare const ColorBox: ({ display, height, width, minWidth, borderRadius, ...props }: TypeColorBoxProps) => react_jsx_runtime.JSX.Element;
|
|
36
|
+
|
|
37
|
+
type TypeDatavizColorBoxProps = Readonly<Partial<TypeColorBoxProps> & {
|
|
38
|
+
colorIndex: number;
|
|
39
|
+
}>;
|
|
40
|
+
type TypeDatavizColorBox = (props: TypeDatavizColorBoxProps) => react.JSXElementConstructor<TypeDatavizColorBoxProps>;
|
|
41
|
+
/**
|
|
42
|
+
* DatavizColorBox extends ColorBox to set the background color from a rotation of <a href="https://seeds.sproutsocial.com/visual/dataviz#color-combinations-for-general-sprout-social-data-visualizations">dataviz colors</a>.
|
|
43
|
+
*/
|
|
44
|
+
declare const DatavizColorBox: styled_components.StyledComponent<({ display, height, width, minWidth, borderRadius, ...props }: TypeColorBoxProps) => react_jsx_runtime.JSX.Element, any, {
|
|
45
|
+
style: {
|
|
46
|
+
background: string;
|
|
47
|
+
opacity: number;
|
|
48
|
+
};
|
|
49
|
+
} & Readonly<Partial<_sproutsocial_seeds_react_box.TypeBoxProps> & {
|
|
50
|
+
colorIndex: number;
|
|
51
|
+
}>, "style">;
|
|
52
|
+
declare const getDatavizColor: (colorIndex: number) => string;
|
|
53
|
+
declare const getDatavizOpacity: (colorIndex: number) => number;
|
|
54
|
+
declare const getDatavizColorWithAlpha: (colorIndex: number) => string;
|
|
55
|
+
|
|
56
|
+
type TypeNetworkColor = "NETWORK_COLOR_TWITTER" | "NETWORK_COLOR_TWITTER_LIKE" | "NETWORK_COLOR_FACEBOOK" | "NETWORK_COLOR_FACEBOOK_AUDIENCE_NETWORK" | "NETWORK_COLOR_LINKEDIN" | "NETWORK_COLOR_INSTAGRAM" | "NETWORK_COLOR_FEEDLY" | "NETWORK_COLOR_ANALYTICS" | "NETWORK_COLOR_YOUTUBE" | "NETWORK_COLOR_MESSENGER" | "NETWORK_COLOR_SNAPCHAT" | "NETWORK_COLOR_PINTEREST" | "NETWORK_COLOR_REDDIT" | "NETWORK_COLOR_TUMBLR" | "NETWORK_COLOR_GOOGLE_MY_BUSINESS" | "NETWORK_COLOR_TIKTOK" | "NETWORK_COLOR_TRIPADVISOR" | "NETWORK_COLOR_GLASSDOOR" | "NETWORK_COLOR_SALESFORCE" | "NETWORK_COLOR_ZENDESK" | "NETWORK_COLOR_HUBSPOT" | "NETWORK_COLOR_MICROSOFT_DYNAMICS";
|
|
57
|
+
type TypeNetworkColorBoxProps = Readonly<TypeColorBoxProps & {
|
|
58
|
+
networkColor: TypeNetworkColor;
|
|
59
|
+
}>;
|
|
60
|
+
/**
|
|
61
|
+
* NetworkColorBox extends ColorBox to set the background color to a <a href="https://seeds.sproutsocial.com/visual/color#full-color-palette">network color</a>.
|
|
62
|
+
*/
|
|
63
|
+
declare const NetworkColorBox: ({ networkColor, ...props }: TypeNetworkColorBoxProps) => react_jsx_runtime.JSX.Element;
|
|
64
|
+
|
|
65
|
+
declare const baseChartOptions: Options;
|
|
66
|
+
declare const TIME_SERIES_CHART_HEIGHT = 275;
|
|
67
|
+
declare const lineChartOptions: Options;
|
|
68
|
+
declare const areaChartOptions: Options;
|
|
69
|
+
declare const DONUT_CHART_HALO_SIZE = 10;
|
|
70
|
+
declare const DONUT_CHART_HEIGHT: number;
|
|
71
|
+
declare const DONUT_CHART_WIDTH: number;
|
|
72
|
+
declare const donutChartOptions: Options;
|
|
73
|
+
|
|
74
|
+
interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
|
|
75
|
+
unitName: "hour" | "day" | "week" | "month" | "year";
|
|
76
|
+
}
|
|
77
|
+
interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterContextObject {
|
|
78
|
+
tickPositionInfo: ExtendedTimeTicksInfoObject;
|
|
79
|
+
}
|
|
80
|
+
type TypeChartDataPoint = Readonly<{
|
|
81
|
+
x: number;
|
|
82
|
+
y: number | null;
|
|
83
|
+
}>;
|
|
84
|
+
type TypeChartDataStyles = Readonly<{
|
|
85
|
+
color?: TypeChartStyleColor;
|
|
86
|
+
}>;
|
|
87
|
+
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
88
|
+
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
89
|
+
x: number;
|
|
90
|
+
}) => ReactNode;
|
|
91
|
+
type TypeChartTooltipProps = Readonly<{
|
|
92
|
+
data: ReadonlyArray<Readonly<{
|
|
93
|
+
color: TypeChartStyleColor;
|
|
94
|
+
name: string;
|
|
95
|
+
value: number | null;
|
|
96
|
+
icon?: ReactNode;
|
|
97
|
+
}>>;
|
|
98
|
+
x: number;
|
|
99
|
+
}>;
|
|
100
|
+
type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
|
|
101
|
+
y: number;
|
|
102
|
+
yValues: ReadonlyArray<number>;
|
|
103
|
+
}>) => string;
|
|
104
|
+
type TypeChartStyleColor = string;
|
|
105
|
+
type TypeChartStylePattern = "solid" | "dashed";
|
|
106
|
+
type TypeChartStyleHasOnClick = boolean;
|
|
107
|
+
|
|
108
|
+
type TypeAreaChartProps = Readonly<{
|
|
109
|
+
data: ReadonlyArray<Readonly<{
|
|
110
|
+
name: string;
|
|
111
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
112
|
+
icon?: ReactNode;
|
|
113
|
+
styles?: TypeChartDataStyles;
|
|
114
|
+
}>>;
|
|
115
|
+
invalidNumberLabel: ReactNode;
|
|
116
|
+
numberLocale: Intl.LocalesArgument;
|
|
117
|
+
textLocale: Intl.LocalesArgument;
|
|
118
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
119
|
+
tooltipTotalLabel: ReactNode;
|
|
120
|
+
currency?: string;
|
|
121
|
+
numberFormat?: TypeChartNumberFormat;
|
|
122
|
+
tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
|
|
123
|
+
total: number | null;
|
|
124
|
+
}>) => ReactNode;
|
|
125
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
126
|
+
onClick?: ({ x }: Readonly<{
|
|
127
|
+
x: number;
|
|
128
|
+
}>) => void;
|
|
129
|
+
tooltipClickLabel?: ReactNode;
|
|
130
|
+
}>;
|
|
131
|
+
|
|
132
|
+
type TypeLineChartProps = Readonly<{
|
|
133
|
+
data: ReadonlyArray<Readonly<{
|
|
134
|
+
name: string;
|
|
135
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
136
|
+
icon?: ReactNode;
|
|
137
|
+
styles?: TypeChartDataStyles & Readonly<{
|
|
138
|
+
pattern?: TypeChartStylePattern;
|
|
139
|
+
}>;
|
|
140
|
+
}>>;
|
|
141
|
+
invalidNumberLabel: ReactNode;
|
|
142
|
+
numberLocale: Intl.LocalesArgument;
|
|
143
|
+
textLocale: Intl.LocalesArgument;
|
|
144
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
145
|
+
currency?: string;
|
|
146
|
+
numberFormat?: TypeChartNumberFormat;
|
|
147
|
+
tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
|
|
148
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
149
|
+
onClick?: ({ x }: Readonly<{
|
|
150
|
+
x: number;
|
|
151
|
+
}>) => void;
|
|
152
|
+
tooltipClickLabel?: ReactNode;
|
|
153
|
+
}>;
|
|
154
|
+
|
|
155
|
+
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
|
|
156
|
+
declare const transformDataToSeries: ({ data }: {
|
|
157
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
158
|
+
}, type: "spline" | "areaspline") => TypeTimeSeriesOptions[];
|
|
159
|
+
|
|
160
|
+
type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
161
|
+
context: TooltipFormatterContextObject;
|
|
162
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
163
|
+
}>;
|
|
164
|
+
type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
|
|
165
|
+
declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
|
|
166
|
+
|
|
167
|
+
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
168
|
+
textLocale: Intl.LocalesArgument;
|
|
169
|
+
tickPositions: AxisTickPositionsArray;
|
|
170
|
+
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
171
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
172
|
+
}>;
|
|
173
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
|
|
174
|
+
|
|
175
|
+
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
176
|
+
numberLocale: Intl.LocalesArgument;
|
|
177
|
+
textLocale: Intl.LocalesArgument;
|
|
178
|
+
tickPositions: AxisTickPositionsArray;
|
|
179
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
180
|
+
currency?: string;
|
|
181
|
+
numberFormat?: TypeChartNumberFormat;
|
|
182
|
+
}>;
|
|
183
|
+
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
184
|
+
|
|
185
|
+
export { ChartTable, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|