@sproutsocial/seeds-react-data-viz 0.1.0 → 0.2.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.
Files changed (12) hide show
  1. package/README.md +1 -1
  2. package/dist/esm/index.css +1006 -0
  3. package/dist/esm/index.css.map +1 -0
  4. package/dist/esm/index.js +2889 -425
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/index.css +1006 -0
  7. package/dist/index.css.map +1 -0
  8. package/dist/index.d.mts +203 -49
  9. package/dist/index.d.ts +203 -49
  10. package/dist/index.js +2847 -395
  11. package/dist/index.js.map +1 -1
  12. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,11 +1,121 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode } from 'react';
3
- import { Table } from '@sproutsocial/racine';
4
- import * as react_jsx_runtime from 'react/jsx-runtime';
3
+ import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
5
4
  import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
6
5
  import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
6
+ import { Table } from '@sproutsocial/racine';
7
+ import * as react_jsx_runtime from 'react/jsx-runtime';
7
8
  import * as styled_components from 'styled-components';
8
- import { Options, TimeTicksInfoObject, AxisLabelsFormatterContextObject, SeriesSplineOptions, SeriesAreasplineOptions, TooltipFormatterContextObject, AxisTickPositionsArray } from 'highcharts';
9
+
10
+ interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
11
+ unitName: "hour" | "day" | "week" | "month" | "year";
12
+ }
13
+ interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterContextObject {
14
+ tickPositionInfo: ExtendedTimeTicksInfoObject;
15
+ }
16
+ type TypeChartDataPoint = Readonly<{
17
+ x: number;
18
+ y: number | null;
19
+ }>;
20
+ type TypeChartDataStyles = Readonly<{
21
+ color?: TypeChartStyleColor;
22
+ }>;
23
+ type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
24
+ type TypeChartTimeFormat = "12" | "24";
25
+ type TypeChartTooltipDateFormatter = ({ x }: {
26
+ x: number;
27
+ }) => ReactNode;
28
+ type TypeChartTooltipProps = Readonly<{
29
+ data: ReadonlyArray<Readonly<{
30
+ color: TypeChartStyleColor;
31
+ name: string;
32
+ value: number | null;
33
+ icon?: ReactNode;
34
+ }>>;
35
+ x: number;
36
+ }>;
37
+ type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
38
+ y: number;
39
+ yValues: ReadonlyArray<number>;
40
+ }>) => string;
41
+ type TypeChartStyleColor = string;
42
+ type TypeChartStylePattern = "solid" | "dashed";
43
+ type TypeChartStyleHasOnClick = boolean;
44
+
45
+ type TypeAreaChartProps = Readonly<{
46
+ data: ReadonlyArray<Readonly<{
47
+ name: string;
48
+ points: ReadonlyArray<TypeChartDataPoint>;
49
+ icon?: ReactNode;
50
+ styles?: TypeChartDataStyles;
51
+ }>>;
52
+ invalidNumberLabel: ReactNode;
53
+ numberLocale: Intl.LocalesArgument;
54
+ textLocale: Intl.LocalesArgument;
55
+ tooltipDateFormatter: TypeChartTooltipDateFormatter;
56
+ tooltipTotalLabel: ReactNode;
57
+ currency?: string;
58
+ numberFormat?: TypeChartNumberFormat;
59
+ tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
60
+ total: number | null;
61
+ }>) => ReactNode;
62
+ yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
63
+ onClick?: ({ x }: Readonly<{
64
+ x: number;
65
+ }>) => void;
66
+ tooltipClickLabel?: ReactNode;
67
+ timeFormat?: TypeChartTimeFormat;
68
+ }>;
69
+ declare const AreaChart: react.NamedExoticComponent<Readonly<{
70
+ data: ReadonlyArray<Readonly<{
71
+ name: string;
72
+ points: ReadonlyArray<TypeChartDataPoint>;
73
+ icon?: ReactNode;
74
+ styles?: TypeChartDataStyles;
75
+ }>>;
76
+ invalidNumberLabel: ReactNode;
77
+ numberLocale: Intl.LocalesArgument;
78
+ textLocale: Intl.LocalesArgument;
79
+ tooltipDateFormatter: TypeChartTooltipDateFormatter;
80
+ tooltipTotalLabel: ReactNode;
81
+ currency?: string;
82
+ numberFormat?: TypeChartNumberFormat;
83
+ tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
84
+ total: number | null;
85
+ }>) => ReactNode;
86
+ yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
87
+ onClick?: ({ x }: Readonly<{
88
+ x: number;
89
+ }>) => void;
90
+ tooltipClickLabel?: ReactNode;
91
+ timeFormat?: TypeChartTimeFormat;
92
+ }>>;
93
+
94
+ type TypeLegendLabel = Readonly<{
95
+ content: React.ReactNode;
96
+ color?: string;
97
+ }>;
98
+ type TypeChartLegendProps = Readonly<{
99
+ legendLabels: ReadonlyArray<TypeLegendLabel>;
100
+ containerBoxProps?: TypeBoxProps;
101
+ stacked?: boolean;
102
+ }>;
103
+ declare const ChartLegend: react.NamedExoticComponent<Readonly<{
104
+ legendLabels: ReadonlyArray<TypeLegendLabel>;
105
+ containerBoxProps?: TypeBoxProps;
106
+ stacked?: boolean;
107
+ }>>;
108
+
109
+ type TypeChartLegendLabelProps = Readonly<{
110
+ children: TypeLegendLabel["content"];
111
+ color: TypeLegendLabel["color"];
112
+ containerBoxProps?: TypeBoxProps;
113
+ }>;
114
+ declare const ChartLegendLabel: react.NamedExoticComponent<Readonly<{
115
+ children: TypeLegendLabel["content"];
116
+ color: TypeLegendLabel["color"];
117
+ containerBoxProps?: TypeBoxProps;
118
+ }>>;
9
119
 
10
120
  type TypeChartTableProps = Readonly<{
11
121
  rows: ReadonlyArray<{
@@ -28,6 +138,30 @@ declare const ChartTable: react.NamedExoticComponent<Readonly<{
28
138
  }>;
29
139
  }>>;
30
140
 
141
+ declare const ChartTooltip: react.NamedExoticComponent<Readonly<{
142
+ children: React.ReactNode;
143
+ }>>;
144
+
145
+ type TypeChartTooltipFooterProps = {
146
+ children: React.ReactNode;
147
+ };
148
+ declare const ChartTooltipFooter: react.NamedExoticComponent<TypeChartTooltipFooterProps>;
149
+
150
+ type TypeChartTooltipHeaderProps = {
151
+ children: React.ReactNode;
152
+ };
153
+ declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHeaderProps>;
154
+
155
+ type TypeChartTooltipTableProps = {
156
+ rows: TypeChartTableProps["rows"];
157
+ };
158
+ declare const ChartTooltipTable: react.NamedExoticComponent<TypeChartTooltipTableProps>;
159
+
160
+ type TypeChartTooltipTitleProps = {
161
+ children: React.ReactNode;
162
+ };
163
+ declare const ChartTooltipTitle: react.NamedExoticComponent<TypeChartTooltipTitleProps>;
164
+
31
165
  type TypeColorBoxProps = TypeBoxProps;
32
166
  /**
33
167
  * ColorBox extends Box to apply basic styles.
@@ -62,74 +196,83 @@ type TypeNetworkColorBoxProps = Readonly<TypeColorBoxProps & {
62
196
  */
63
197
  declare const NetworkColorBox: ({ networkColor, ...props }: TypeNetworkColorBoxProps) => react_jsx_runtime.JSX.Element;
64
198
 
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;
199
+ type TypeDonutChartTooltipProps = Readonly<{
200
+ color: string;
201
+ name: string;
202
+ percent: number | null;
203
+ value: number | null;
204
+ icon?: ReactNode;
83
205
  }>;
84
- type TypeChartDataStyles = Readonly<{
85
- color?: TypeChartStyleColor;
206
+ type TypeDonutChartProps = Readonly<{
207
+ data: ReadonlyArray<Readonly<{
208
+ name: string;
209
+ value: number;
210
+ icon?: ReactNode;
211
+ styles?: TypeChartDataStyles;
212
+ }>>;
213
+ numberLocale: Intl.LocalesArgument;
214
+ textLocale: Intl.LocalesArgument;
215
+ currency?: string;
216
+ hideLegend?: boolean;
217
+ numberFormat?: TypeChartNumberFormat;
218
+ tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
86
219
  }>;
87
- type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
88
- type TypeChartTooltipDateFormatter = ({ x }: {
89
- x: number;
90
- }) => ReactNode;
91
- type TypeChartTooltipProps = Readonly<{
220
+ declare const DonutChart: react.NamedExoticComponent<Readonly<{
92
221
  data: ReadonlyArray<Readonly<{
93
- color: TypeChartStyleColor;
94
222
  name: string;
95
- value: number | null;
223
+ value: number;
96
224
  icon?: ReactNode;
225
+ styles?: TypeChartDataStyles;
97
226
  }>>;
98
- x: number;
227
+ numberLocale: Intl.LocalesArgument;
228
+ textLocale: Intl.LocalesArgument;
229
+ currency?: string;
230
+ hideLegend?: boolean;
231
+ numberFormat?: TypeChartNumberFormat;
232
+ tooltip?: ({ color, name, percent, value, }: TypeDonutChartTooltipProps) => ReactNode;
233
+ }>>;
234
+
235
+ type TypeDonutChartLegendTableProps = Readonly<{
236
+ data: TypeDonutChartProps["data"];
237
+ numberLocale: TypeDonutChartProps["numberLocale"];
238
+ textLocale: TypeDonutChartProps["textLocale"];
239
+ totalLabel: React.ReactNode;
240
+ currency?: TypeDonutChartProps["currency"];
241
+ numberFormat?: TypeDonutChartProps["numberFormat"];
99
242
  }>;
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;
243
+ declare const DonutChartLegendTable: react.NamedExoticComponent<Readonly<{
244
+ data: TypeDonutChartProps["data"];
245
+ numberLocale: TypeDonutChartProps["numberLocale"];
246
+ textLocale: TypeDonutChartProps["textLocale"];
247
+ totalLabel: React.ReactNode;
248
+ currency?: TypeDonutChartProps["currency"];
249
+ numberFormat?: TypeDonutChartProps["numberFormat"];
250
+ }>>;
107
251
 
108
- type TypeAreaChartProps = Readonly<{
252
+ type TypeLineChartProps = Readonly<{
109
253
  data: ReadonlyArray<Readonly<{
110
254
  name: string;
111
255
  points: ReadonlyArray<TypeChartDataPoint>;
112
256
  icon?: ReactNode;
113
- styles?: TypeChartDataStyles;
257
+ styles?: TypeChartDataStyles & Readonly<{
258
+ pattern?: TypeChartStylePattern;
259
+ }>;
114
260
  }>>;
115
261
  invalidNumberLabel: ReactNode;
116
262
  numberLocale: Intl.LocalesArgument;
117
263
  textLocale: Intl.LocalesArgument;
118
264
  tooltipDateFormatter: TypeChartTooltipDateFormatter;
119
- tooltipTotalLabel: ReactNode;
120
265
  currency?: string;
121
266
  numberFormat?: TypeChartNumberFormat;
122
- tooltip?: ({ data, total, x, }: TypeChartTooltipProps & Readonly<{
123
- total: number | null;
124
- }>) => ReactNode;
267
+ tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
125
268
  yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
126
269
  onClick?: ({ x }: Readonly<{
127
270
  x: number;
128
271
  }>) => void;
129
272
  tooltipClickLabel?: ReactNode;
273
+ timeFormat?: TypeChartTimeFormat;
130
274
  }>;
131
-
132
- type TypeLineChartProps = Readonly<{
275
+ declare const LineChart: react.NamedExoticComponent<Readonly<{
133
276
  data: ReadonlyArray<Readonly<{
134
277
  name: string;
135
278
  points: ReadonlyArray<TypeChartDataPoint>;
@@ -150,7 +293,17 @@ type TypeLineChartProps = Readonly<{
150
293
  x: number;
151
294
  }>) => void;
152
295
  tooltipClickLabel?: ReactNode;
153
- }>;
296
+ timeFormat?: TypeChartTimeFormat;
297
+ }>>;
298
+
299
+ declare const baseChartOptions: Options;
300
+ declare const TIME_SERIES_CHART_HEIGHT = 275;
301
+ declare const lineChartOptions: Options;
302
+ declare const areaChartOptions: Options;
303
+ declare const DONUT_CHART_HALO_SIZE = 10;
304
+ declare const DONUT_CHART_HEIGHT: number;
305
+ declare const DONUT_CHART_WIDTH: number;
306
+ declare const donutChartOptions: Options;
154
307
 
155
308
  type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
156
309
  declare const transformDataToSeries: ({ data }: {
@@ -169,8 +322,9 @@ type TypeXAxisLabelFormatterProps = Readonly<{
169
322
  tickPositions: AxisTickPositionsArray;
170
323
  unitName: ExtendedTimeTicksInfoObject["unitName"];
171
324
  value: AxisLabelsFormatterContextObject["value"];
325
+ timeFormat?: TypeChartTimeFormat;
172
326
  }>;
173
- declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
327
+ declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
174
328
 
175
329
  type TypeYAxisLabelFormatterProps = Readonly<{
176
330
  numberLocale: Intl.LocalesArgument;
@@ -182,4 +336,4 @@ type TypeYAxisLabelFormatterProps = Readonly<{
182
336
  }>;
183
337
  declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
184
338
 
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 };
339
+ export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, LineChart, NetworkColorBox, TIME_SERIES_CHART_HEIGHT, type TypeAreaChartProps, type TypeChartDataPoint, type TypeChartDataStyles, type TypeChartLegendLabelProps, type TypeChartLegendProps, type TypeChartNumberFormat, type TypeChartStyleColor, type TypeChartStyleHasOnClick, type TypeChartStylePattern, type TypeChartTableProps, type TypeChartTimeFormat, type TypeChartTooltipDateFormatter, type TypeChartTooltipProps, type TypeChartTooltipTableProps, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, baseChartOptions, donutChartOptions, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };