@sproutsocial/seeds-react-data-viz 0.3.1 → 0.4.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 +2 -0
- package/dist/esm/index.js +433 -46
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +137 -19
- package/dist/index.d.ts +137 -19
- package/dist/index.js +440 -46
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, AxisTickPositionsArray } from 'highcharts';
|
|
3
|
+
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, SeriesColumnOptions, AxisTickPositionsArray } from 'highcharts';
|
|
4
4
|
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
5
5
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
6
6
|
import { Table } from '@sproutsocial/seeds-react-table';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
8
|
import * as styled_components from 'styled-components';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Type of series to render. See {@link https://api.highcharts.com/highcharts/series} for detailed series configuration options.
|
|
12
|
+
*/
|
|
13
|
+
type TypeSeriesType = "areaspline" | "spline" | "column";
|
|
10
14
|
interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
|
|
11
15
|
unitName: "hour" | "day" | "week" | "month" | "year";
|
|
12
16
|
}
|
|
@@ -14,7 +18,7 @@ interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterCo
|
|
|
14
18
|
tickPositionInfo: ExtendedTimeTicksInfoObject;
|
|
15
19
|
}
|
|
16
20
|
type TypeChartDataPoint = Readonly<{
|
|
17
|
-
x: number;
|
|
21
|
+
x: number | string;
|
|
18
22
|
y: number | null;
|
|
19
23
|
}>;
|
|
20
24
|
type TypeChartDataStyles = Readonly<{
|
|
@@ -22,8 +26,8 @@ type TypeChartDataStyles = Readonly<{
|
|
|
22
26
|
}>;
|
|
23
27
|
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
24
28
|
type TypeChartTimeFormat = "12" | "24";
|
|
25
|
-
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
26
|
-
x: number;
|
|
29
|
+
type TypeChartTooltipDateFormatter = ({ x, }: {
|
|
30
|
+
x: number | string;
|
|
27
31
|
}) => ReactNode;
|
|
28
32
|
type TypeChartTooltipProps = Readonly<{
|
|
29
33
|
data: ReadonlyArray<Readonly<{
|
|
@@ -32,7 +36,7 @@ type TypeChartTooltipProps = Readonly<{
|
|
|
32
36
|
value: number | null;
|
|
33
37
|
icon?: ReactNode;
|
|
34
38
|
}>>;
|
|
35
|
-
x: number;
|
|
39
|
+
x: number | string;
|
|
36
40
|
}>;
|
|
37
41
|
type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
|
|
38
42
|
y: number;
|
|
@@ -48,6 +52,48 @@ type TypeChartXAnnotations = Readonly<{
|
|
|
48
52
|
type TypeChartStyleColor = string;
|
|
49
53
|
type TypeChartStylePattern = "solid" | "dashed";
|
|
50
54
|
type TypeChartStyleHasOnClick = boolean;
|
|
55
|
+
type TypeVerticalBarChartProps = Readonly<{
|
|
56
|
+
data: ReadonlyArray<Readonly<{
|
|
57
|
+
name: string;
|
|
58
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
59
|
+
icon?: ReactNode;
|
|
60
|
+
styles?: TypeChartDataStyles & Readonly<{
|
|
61
|
+
pattern?: TypeChartStylePattern;
|
|
62
|
+
}>;
|
|
63
|
+
}>>;
|
|
64
|
+
invalidNumberLabel: ReactNode;
|
|
65
|
+
numberLocale: Intl.LocalesArgument;
|
|
66
|
+
textLocale: Intl.LocalesArgument;
|
|
67
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
68
|
+
currency?: string;
|
|
69
|
+
numberFormat?: TypeChartNumberFormat;
|
|
70
|
+
/**
|
|
71
|
+
* The maximum number of series to display.
|
|
72
|
+
* @default 10
|
|
73
|
+
* @description We recommend limiting the number of series to 10 to maintain chart readability and accessibility.
|
|
74
|
+
*/
|
|
75
|
+
seriesLimit?: number;
|
|
76
|
+
/**
|
|
77
|
+
* If false, disables the warning when the number of series exceeds the seriesLimit.
|
|
78
|
+
* @default true
|
|
79
|
+
*/
|
|
80
|
+
showSeriesLimitWarning?: boolean;
|
|
81
|
+
tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
|
|
82
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
83
|
+
onClick?: ({ x }: Readonly<{
|
|
84
|
+
x: number;
|
|
85
|
+
}>) => void;
|
|
86
|
+
tooltipClickLabel?: ReactNode;
|
|
87
|
+
timeFormat?: TypeChartTimeFormat;
|
|
88
|
+
xAnnotations?: TypeChartXAnnotations;
|
|
89
|
+
xAxisLabelFormatter?: (params: {
|
|
90
|
+
textLocale: Intl.LocalesArgument;
|
|
91
|
+
tickPositions: number[];
|
|
92
|
+
unitName: string;
|
|
93
|
+
value: string | number;
|
|
94
|
+
timeFormat?: string;
|
|
95
|
+
}) => string;
|
|
96
|
+
}>;
|
|
51
97
|
interface TypeExtendedChart extends Chart {
|
|
52
98
|
annotations?: Annotation[];
|
|
53
99
|
}
|
|
@@ -324,17 +370,25 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
324
370
|
|
|
325
371
|
declare const baseChartOptions: Options;
|
|
326
372
|
declare const TIME_SERIES_CHART_HEIGHT = 275;
|
|
373
|
+
declare const timeSeriesChartOptions: Options;
|
|
327
374
|
declare const lineChartOptions: Options;
|
|
328
375
|
declare const areaChartOptions: Options;
|
|
376
|
+
declare const columnChartOptions: Options;
|
|
377
|
+
/**
|
|
378
|
+
* The default series limit for VerticalBarChart.
|
|
379
|
+
* This limit is recommended to maintain chart readability and accessibility.
|
|
380
|
+
* @see {VerticalBarChart}
|
|
381
|
+
*/
|
|
382
|
+
declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
|
|
329
383
|
declare const DONUT_CHART_HALO_SIZE = 10;
|
|
330
384
|
declare const DONUT_CHART_HEIGHT: number;
|
|
331
385
|
declare const DONUT_CHART_WIDTH: number;
|
|
332
386
|
declare const donutChartOptions: Options;
|
|
333
387
|
|
|
334
|
-
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
|
|
335
|
-
declare const transformDataToSeries: ({ data }: {
|
|
336
|
-
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
337
|
-
}, type:
|
|
388
|
+
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions | SeriesColumnOptions;
|
|
389
|
+
declare const transformDataToSeries: ({ data, }: {
|
|
390
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"] | TypeVerticalBarChartProps["data"];
|
|
391
|
+
}, type: TypeSeriesType) => TypeTimeSeriesOptions[];
|
|
338
392
|
|
|
339
393
|
type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
340
394
|
context: TooltipFormatterContextObject;
|
|
@@ -343,15 +397,6 @@ type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
|
343
397
|
type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
|
|
344
398
|
declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
|
|
345
399
|
|
|
346
|
-
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
347
|
-
textLocale: Intl.LocalesArgument;
|
|
348
|
-
tickPositions: AxisTickPositionsArray;
|
|
349
|
-
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
350
|
-
value: AxisLabelsFormatterContextObject["value"];
|
|
351
|
-
timeFormat?: TypeChartTimeFormat;
|
|
352
|
-
}>;
|
|
353
|
-
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
354
|
-
|
|
355
400
|
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
356
401
|
numberLocale: Intl.LocalesArgument;
|
|
357
402
|
textLocale: Intl.LocalesArgument;
|
|
@@ -362,6 +407,79 @@ type TypeYAxisLabelFormatterProps = Readonly<{
|
|
|
362
407
|
}>;
|
|
363
408
|
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
364
409
|
|
|
410
|
+
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
411
|
+
textLocale: Intl.LocalesArgument;
|
|
412
|
+
tickPositions: AxisTickPositionsArray;
|
|
413
|
+
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
414
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
415
|
+
timeFormat?: TypeChartTimeFormat;
|
|
416
|
+
}>;
|
|
417
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
418
|
+
|
|
419
|
+
/**
|
|
420
|
+
* Helper to detect if data is hourly time data (all x values are hours of the same day)
|
|
421
|
+
* @param data - Array of series data with points containing x values
|
|
422
|
+
* @returns boolean indicating if all x values are hours of the same day
|
|
423
|
+
*/
|
|
424
|
+
declare function isHourlyTimeData(data: ReadonlyArray<Readonly<{
|
|
425
|
+
points: ReadonlyArray<{
|
|
426
|
+
x: number | string;
|
|
427
|
+
}>;
|
|
428
|
+
}>>): boolean;
|
|
429
|
+
|
|
430
|
+
/**
|
|
431
|
+
* Helper to detect if data is categorical hour data (all x values are hour strings)
|
|
432
|
+
* Supports both 12-hour format ("12 AM", "1 PM") and 24-hour format ("00:00", "13:00", "23:00")
|
|
433
|
+
* @param data - Array of series data with points containing x values
|
|
434
|
+
* @returns boolean indicating if all x values are hour strings
|
|
435
|
+
*/
|
|
436
|
+
declare function isCategoricalHourData(data: ReadonlyArray<Readonly<{
|
|
437
|
+
points: ReadonlyArray<{
|
|
438
|
+
x: number | string;
|
|
439
|
+
}>;
|
|
440
|
+
}>>): boolean;
|
|
441
|
+
|
|
442
|
+
declare const getStorybookCategoricalData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, categoryType, }: {
|
|
443
|
+
showNulls: boolean;
|
|
444
|
+
showNegativeValues: boolean;
|
|
445
|
+
numberOfSeries: number;
|
|
446
|
+
yAxisMax: number;
|
|
447
|
+
showCustomColors: boolean;
|
|
448
|
+
showDashedLines: boolean;
|
|
449
|
+
categoryType: "hours" | "hours24" | "days" | "months" | "custom";
|
|
450
|
+
}) => {
|
|
451
|
+
points: {
|
|
452
|
+
x: string;
|
|
453
|
+
y: number | null;
|
|
454
|
+
}[];
|
|
455
|
+
name: string;
|
|
456
|
+
styles: {
|
|
457
|
+
color: string | undefined;
|
|
458
|
+
pattern: string;
|
|
459
|
+
};
|
|
460
|
+
}[];
|
|
461
|
+
|
|
462
|
+
declare const getStorybookSparseTimelineData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, numberOfPoints, timeSpanHours, }: {
|
|
463
|
+
showNulls: boolean;
|
|
464
|
+
showNegativeValues: boolean;
|
|
465
|
+
numberOfSeries: number;
|
|
466
|
+
yAxisMax: number;
|
|
467
|
+
showCustomColors: boolean;
|
|
468
|
+
showDashedLines: boolean;
|
|
469
|
+
numberOfPoints?: number;
|
|
470
|
+
timeSpanHours?: number;
|
|
471
|
+
}) => {
|
|
472
|
+
points: {
|
|
473
|
+
x: number;
|
|
474
|
+
y: number | null;
|
|
475
|
+
}[];
|
|
476
|
+
name: string;
|
|
477
|
+
styles: {
|
|
478
|
+
color: string | undefined;
|
|
479
|
+
pattern: string;
|
|
480
|
+
};
|
|
481
|
+
}[];
|
|
482
|
+
|
|
365
483
|
declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
|
|
366
484
|
declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
367
485
|
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
@@ -383,4 +501,4 @@ declare const donutChartStyles: styled_components.FlattenInterpolation<styled_co
|
|
|
383
501
|
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
384
502
|
}>, any>>;
|
|
385
503
|
|
|
386
|
-
export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, 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 TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|
|
504
|
+
export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, 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 TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, AxisTickPositionsArray } from 'highcharts';
|
|
3
|
+
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, Annotation, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, SeriesColumnOptions, AxisTickPositionsArray } from 'highcharts';
|
|
4
4
|
import * as _sproutsocial_seeds_react_box from '@sproutsocial/seeds-react-box';
|
|
5
5
|
import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
|
|
6
6
|
import { Table } from '@sproutsocial/seeds-react-table';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
8
8
|
import * as styled_components from 'styled-components';
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* Type of series to render. See {@link https://api.highcharts.com/highcharts/series} for detailed series configuration options.
|
|
12
|
+
*/
|
|
13
|
+
type TypeSeriesType = "areaspline" | "spline" | "column";
|
|
10
14
|
interface ExtendedTimeTicksInfoObject extends TimeTicksInfoObject {
|
|
11
15
|
unitName: "hour" | "day" | "week" | "month" | "year";
|
|
12
16
|
}
|
|
@@ -14,7 +18,7 @@ interface ExtendedAxisLabelsFormatterContextObject extends AxisLabelsFormatterCo
|
|
|
14
18
|
tickPositionInfo: ExtendedTimeTicksInfoObject;
|
|
15
19
|
}
|
|
16
20
|
type TypeChartDataPoint = Readonly<{
|
|
17
|
-
x: number;
|
|
21
|
+
x: number | string;
|
|
18
22
|
y: number | null;
|
|
19
23
|
}>;
|
|
20
24
|
type TypeChartDataStyles = Readonly<{
|
|
@@ -22,8 +26,8 @@ type TypeChartDataStyles = Readonly<{
|
|
|
22
26
|
}>;
|
|
23
27
|
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
24
28
|
type TypeChartTimeFormat = "12" | "24";
|
|
25
|
-
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
26
|
-
x: number;
|
|
29
|
+
type TypeChartTooltipDateFormatter = ({ x, }: {
|
|
30
|
+
x: number | string;
|
|
27
31
|
}) => ReactNode;
|
|
28
32
|
type TypeChartTooltipProps = Readonly<{
|
|
29
33
|
data: ReadonlyArray<Readonly<{
|
|
@@ -32,7 +36,7 @@ type TypeChartTooltipProps = Readonly<{
|
|
|
32
36
|
value: number | null;
|
|
33
37
|
icon?: ReactNode;
|
|
34
38
|
}>>;
|
|
35
|
-
x: number;
|
|
39
|
+
x: number | string;
|
|
36
40
|
}>;
|
|
37
41
|
type TypeChartYAxisLabelFormatter = ({ y, yValues, }: Readonly<{
|
|
38
42
|
y: number;
|
|
@@ -48,6 +52,48 @@ type TypeChartXAnnotations = Readonly<{
|
|
|
48
52
|
type TypeChartStyleColor = string;
|
|
49
53
|
type TypeChartStylePattern = "solid" | "dashed";
|
|
50
54
|
type TypeChartStyleHasOnClick = boolean;
|
|
55
|
+
type TypeVerticalBarChartProps = Readonly<{
|
|
56
|
+
data: ReadonlyArray<Readonly<{
|
|
57
|
+
name: string;
|
|
58
|
+
points: ReadonlyArray<TypeChartDataPoint>;
|
|
59
|
+
icon?: ReactNode;
|
|
60
|
+
styles?: TypeChartDataStyles & Readonly<{
|
|
61
|
+
pattern?: TypeChartStylePattern;
|
|
62
|
+
}>;
|
|
63
|
+
}>>;
|
|
64
|
+
invalidNumberLabel: ReactNode;
|
|
65
|
+
numberLocale: Intl.LocalesArgument;
|
|
66
|
+
textLocale: Intl.LocalesArgument;
|
|
67
|
+
tooltipDateFormatter: TypeChartTooltipDateFormatter;
|
|
68
|
+
currency?: string;
|
|
69
|
+
numberFormat?: TypeChartNumberFormat;
|
|
70
|
+
/**
|
|
71
|
+
* The maximum number of series to display.
|
|
72
|
+
* @default 10
|
|
73
|
+
* @description We recommend limiting the number of series to 10 to maintain chart readability and accessibility.
|
|
74
|
+
*/
|
|
75
|
+
seriesLimit?: number;
|
|
76
|
+
/**
|
|
77
|
+
* If false, disables the warning when the number of series exceeds the seriesLimit.
|
|
78
|
+
* @default true
|
|
79
|
+
*/
|
|
80
|
+
showSeriesLimitWarning?: boolean;
|
|
81
|
+
tooltip?: ({ data, x }: TypeChartTooltipProps) => ReactNode;
|
|
82
|
+
yAxisLabelFormatter?: TypeChartYAxisLabelFormatter;
|
|
83
|
+
onClick?: ({ x }: Readonly<{
|
|
84
|
+
x: number;
|
|
85
|
+
}>) => void;
|
|
86
|
+
tooltipClickLabel?: ReactNode;
|
|
87
|
+
timeFormat?: TypeChartTimeFormat;
|
|
88
|
+
xAnnotations?: TypeChartXAnnotations;
|
|
89
|
+
xAxisLabelFormatter?: (params: {
|
|
90
|
+
textLocale: Intl.LocalesArgument;
|
|
91
|
+
tickPositions: number[];
|
|
92
|
+
unitName: string;
|
|
93
|
+
value: string | number;
|
|
94
|
+
timeFormat?: string;
|
|
95
|
+
}) => string;
|
|
96
|
+
}>;
|
|
51
97
|
interface TypeExtendedChart extends Chart {
|
|
52
98
|
annotations?: Annotation[];
|
|
53
99
|
}
|
|
@@ -324,17 +370,25 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
324
370
|
|
|
325
371
|
declare const baseChartOptions: Options;
|
|
326
372
|
declare const TIME_SERIES_CHART_HEIGHT = 275;
|
|
373
|
+
declare const timeSeriesChartOptions: Options;
|
|
327
374
|
declare const lineChartOptions: Options;
|
|
328
375
|
declare const areaChartOptions: Options;
|
|
376
|
+
declare const columnChartOptions: Options;
|
|
377
|
+
/**
|
|
378
|
+
* The default series limit for VerticalBarChart.
|
|
379
|
+
* This limit is recommended to maintain chart readability and accessibility.
|
|
380
|
+
* @see {VerticalBarChart}
|
|
381
|
+
*/
|
|
382
|
+
declare const VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT = 10;
|
|
329
383
|
declare const DONUT_CHART_HALO_SIZE = 10;
|
|
330
384
|
declare const DONUT_CHART_HEIGHT: number;
|
|
331
385
|
declare const DONUT_CHART_WIDTH: number;
|
|
332
386
|
declare const donutChartOptions: Options;
|
|
333
387
|
|
|
334
|
-
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions;
|
|
335
|
-
declare const transformDataToSeries: ({ data }: {
|
|
336
|
-
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"];
|
|
337
|
-
}, type:
|
|
388
|
+
type TypeTimeSeriesOptions = SeriesSplineOptions | SeriesAreasplineOptions | SeriesColumnOptions;
|
|
389
|
+
declare const transformDataToSeries: ({ data, }: {
|
|
390
|
+
data: TypeAreaChartProps["data"] | TypeLineChartProps["data"] | TypeVerticalBarChartProps["data"];
|
|
391
|
+
}, type: TypeSeriesType) => TypeTimeSeriesOptions[];
|
|
338
392
|
|
|
339
393
|
type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
340
394
|
context: TooltipFormatterContextObject;
|
|
@@ -343,15 +397,6 @@ type TypeTransformTimeSeriesTooltipDataProps = Readonly<{
|
|
|
343
397
|
type TypeTransformTimeSeriesTooltipDataReturn = TypeChartTooltipProps["data"];
|
|
344
398
|
declare const transformTimeSeriesTooltipData: ({ context, data, }: TypeTransformTimeSeriesTooltipDataProps) => TypeTransformTimeSeriesTooltipDataReturn;
|
|
345
399
|
|
|
346
|
-
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
347
|
-
textLocale: Intl.LocalesArgument;
|
|
348
|
-
tickPositions: AxisTickPositionsArray;
|
|
349
|
-
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
350
|
-
value: AxisLabelsFormatterContextObject["value"];
|
|
351
|
-
timeFormat?: TypeChartTimeFormat;
|
|
352
|
-
}>;
|
|
353
|
-
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
354
|
-
|
|
355
400
|
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
356
401
|
numberLocale: Intl.LocalesArgument;
|
|
357
402
|
textLocale: Intl.LocalesArgument;
|
|
@@ -362,6 +407,79 @@ type TypeYAxisLabelFormatterProps = Readonly<{
|
|
|
362
407
|
}>;
|
|
363
408
|
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
364
409
|
|
|
410
|
+
type TypeXAxisLabelFormatterProps = Readonly<{
|
|
411
|
+
textLocale: Intl.LocalesArgument;
|
|
412
|
+
tickPositions: AxisTickPositionsArray;
|
|
413
|
+
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
414
|
+
value: AxisLabelsFormatterContextObject["value"];
|
|
415
|
+
timeFormat?: TypeChartTimeFormat;
|
|
416
|
+
}>;
|
|
417
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
418
|
+
|
|
419
|
+
/**
|
|
420
|
+
* Helper to detect if data is hourly time data (all x values are hours of the same day)
|
|
421
|
+
* @param data - Array of series data with points containing x values
|
|
422
|
+
* @returns boolean indicating if all x values are hours of the same day
|
|
423
|
+
*/
|
|
424
|
+
declare function isHourlyTimeData(data: ReadonlyArray<Readonly<{
|
|
425
|
+
points: ReadonlyArray<{
|
|
426
|
+
x: number | string;
|
|
427
|
+
}>;
|
|
428
|
+
}>>): boolean;
|
|
429
|
+
|
|
430
|
+
/**
|
|
431
|
+
* Helper to detect if data is categorical hour data (all x values are hour strings)
|
|
432
|
+
* Supports both 12-hour format ("12 AM", "1 PM") and 24-hour format ("00:00", "13:00", "23:00")
|
|
433
|
+
* @param data - Array of series data with points containing x values
|
|
434
|
+
* @returns boolean indicating if all x values are hour strings
|
|
435
|
+
*/
|
|
436
|
+
declare function isCategoricalHourData(data: ReadonlyArray<Readonly<{
|
|
437
|
+
points: ReadonlyArray<{
|
|
438
|
+
x: number | string;
|
|
439
|
+
}>;
|
|
440
|
+
}>>): boolean;
|
|
441
|
+
|
|
442
|
+
declare const getStorybookCategoricalData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, categoryType, }: {
|
|
443
|
+
showNulls: boolean;
|
|
444
|
+
showNegativeValues: boolean;
|
|
445
|
+
numberOfSeries: number;
|
|
446
|
+
yAxisMax: number;
|
|
447
|
+
showCustomColors: boolean;
|
|
448
|
+
showDashedLines: boolean;
|
|
449
|
+
categoryType: "hours" | "hours24" | "days" | "months" | "custom";
|
|
450
|
+
}) => {
|
|
451
|
+
points: {
|
|
452
|
+
x: string;
|
|
453
|
+
y: number | null;
|
|
454
|
+
}[];
|
|
455
|
+
name: string;
|
|
456
|
+
styles: {
|
|
457
|
+
color: string | undefined;
|
|
458
|
+
pattern: string;
|
|
459
|
+
};
|
|
460
|
+
}[];
|
|
461
|
+
|
|
462
|
+
declare const getStorybookSparseTimelineData: ({ showNulls, showNegativeValues, numberOfSeries, yAxisMax, showCustomColors, showDashedLines, numberOfPoints, timeSpanHours, }: {
|
|
463
|
+
showNulls: boolean;
|
|
464
|
+
showNegativeValues: boolean;
|
|
465
|
+
numberOfSeries: number;
|
|
466
|
+
yAxisMax: number;
|
|
467
|
+
showCustomColors: boolean;
|
|
468
|
+
showDashedLines: boolean;
|
|
469
|
+
numberOfPoints?: number;
|
|
470
|
+
timeSpanHours?: number;
|
|
471
|
+
}) => {
|
|
472
|
+
points: {
|
|
473
|
+
x: number;
|
|
474
|
+
y: number | null;
|
|
475
|
+
}[];
|
|
476
|
+
name: string;
|
|
477
|
+
styles: {
|
|
478
|
+
color: string | undefined;
|
|
479
|
+
pattern: string;
|
|
480
|
+
};
|
|
481
|
+
}[];
|
|
482
|
+
|
|
365
483
|
declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
|
|
366
484
|
declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
367
485
|
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
@@ -383,4 +501,4 @@ declare const donutChartStyles: styled_components.FlattenInterpolation<styled_co
|
|
|
383
501
|
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
384
502
|
}>, any>>;
|
|
385
503
|
|
|
386
|
-
export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, 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 TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|
|
504
|
+
export { AreaChart, ChartLegend, ChartLegendLabel, ChartTable, ChartTooltip, ChartTooltipFooter, ChartTooltipHeader, ChartTooltipPortal, ChartTooltipTable, ChartTooltipTitle, ColorBox, DONUT_CHART_HALO_SIZE, DONUT_CHART_HEIGHT, DONUT_CHART_WIDTH, DatavizColorBox, DonutChart, DonutChartLegendTable, type ExtendedAxisLabelsFormatterContextObject, type ExtendedTimeTicksInfoObject, GlobalChartStyleOverrides, 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 TypeChartXAnnotations, type TypeChartXAnnotationsDetails, type TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeExtendedChart, type TypeLegendLabel, type TypeLineChartProps, type TypeSeriesType, type TypeVerticalBarChartProps, VERTICAL_BAR_CHART_DEFAULT_SERIES_LIMIT, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, columnChartOptions, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, getStorybookCategoricalData, getStorybookSparseTimelineData, isCategoricalHourData, isHourlyTimeData, lineChartOptions, lineChartStyles, timeSeriesChartOptions, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|