@sproutsocial/seeds-react-data-viz 0.1.1 → 0.2.1
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/dist/esm/index.js +530 -5084
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +37 -4
- package/dist/index.d.ts +37 -4
- package/dist/index.js +583 -5106
- package/dist/index.js.map +1 -1
- package/package.json +22 -13
- package/dist/esm/index.css +0 -1006
- package/dist/esm/index.css.map +0 -1
- package/dist/index.css +0 -1006
- package/dist/index.css.map +0 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions,
|
|
3
|
+
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, 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
|
-
import { Table } from '@sproutsocial/
|
|
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
|
|
|
@@ -21,6 +21,7 @@ type TypeChartDataStyles = Readonly<{
|
|
|
21
21
|
color?: TypeChartStyleColor;
|
|
22
22
|
}>;
|
|
23
23
|
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
24
|
+
type TypeChartTimeFormat = "12" | "24";
|
|
24
25
|
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
25
26
|
x: number;
|
|
26
27
|
}) => ReactNode;
|
|
@@ -63,6 +64,7 @@ type TypeAreaChartProps = Readonly<{
|
|
|
63
64
|
x: number;
|
|
64
65
|
}>) => void;
|
|
65
66
|
tooltipClickLabel?: ReactNode;
|
|
67
|
+
timeFormat?: TypeChartTimeFormat;
|
|
66
68
|
}>;
|
|
67
69
|
declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
68
70
|
data: ReadonlyArray<Readonly<{
|
|
@@ -86,6 +88,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
|
86
88
|
x: number;
|
|
87
89
|
}>) => void;
|
|
88
90
|
tooltipClickLabel?: ReactNode;
|
|
91
|
+
timeFormat?: TypeChartTimeFormat;
|
|
89
92
|
}>>;
|
|
90
93
|
|
|
91
94
|
type TypeLegendLabel = Readonly<{
|
|
@@ -149,6 +152,12 @@ type TypeChartTooltipHeaderProps = {
|
|
|
149
152
|
};
|
|
150
153
|
declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHeaderProps>;
|
|
151
154
|
|
|
155
|
+
declare const generateChartTooltipPortalId: (chartId: number) => string;
|
|
156
|
+
declare const ChartTooltipPortal: react.NamedExoticComponent<Readonly<{
|
|
157
|
+
chart: Chart;
|
|
158
|
+
renderContent: (context: TooltipFormatterContextObject) => ReactNode;
|
|
159
|
+
}>>;
|
|
160
|
+
|
|
152
161
|
type TypeChartTooltipTableProps = {
|
|
153
162
|
rows: TypeChartTableProps["rows"];
|
|
154
163
|
};
|
|
@@ -267,6 +276,7 @@ type TypeLineChartProps = Readonly<{
|
|
|
267
276
|
x: number;
|
|
268
277
|
}>) => void;
|
|
269
278
|
tooltipClickLabel?: ReactNode;
|
|
279
|
+
timeFormat?: TypeChartTimeFormat;
|
|
270
280
|
}>;
|
|
271
281
|
declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
272
282
|
data: ReadonlyArray<Readonly<{
|
|
@@ -289,6 +299,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
289
299
|
x: number;
|
|
290
300
|
}>) => void;
|
|
291
301
|
tooltipClickLabel?: ReactNode;
|
|
302
|
+
timeFormat?: TypeChartTimeFormat;
|
|
292
303
|
}>>;
|
|
293
304
|
|
|
294
305
|
declare const baseChartOptions: Options;
|
|
@@ -317,8 +328,9 @@ type TypeXAxisLabelFormatterProps = Readonly<{
|
|
|
317
328
|
tickPositions: AxisTickPositionsArray;
|
|
318
329
|
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
319
330
|
value: AxisLabelsFormatterContextObject["value"];
|
|
331
|
+
timeFormat?: TypeChartTimeFormat;
|
|
320
332
|
}>;
|
|
321
|
-
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
|
|
333
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
322
334
|
|
|
323
335
|
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
324
336
|
numberLocale: Intl.LocalesArgument;
|
|
@@ -330,4 +342,25 @@ type TypeYAxisLabelFormatterProps = Readonly<{
|
|
|
330
342
|
}>;
|
|
331
343
|
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
332
344
|
|
|
333
|
-
|
|
345
|
+
declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
|
|
346
|
+
declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
347
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
348
|
+
}>, any>>;
|
|
349
|
+
declare const timeSeriesChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
350
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
351
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
352
|
+
}>, any>>;
|
|
353
|
+
declare const lineChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
354
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
355
|
+
$patterns: ReadonlyArray<TypeChartStylePattern>;
|
|
356
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
357
|
+
}>, any>>;
|
|
358
|
+
declare const areaChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
359
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
360
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
361
|
+
}>, any>>;
|
|
362
|
+
declare const donutChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
363
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
364
|
+
}>, any>>;
|
|
365
|
+
|
|
366
|
+
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 TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
|
-
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions,
|
|
3
|
+
import { TimeTicksInfoObject, AxisLabelsFormatterContextObject, Chart, TooltipFormatterContextObject, Options, SeriesSplineOptions, SeriesAreasplineOptions, 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
|
-
import { Table } from '@sproutsocial/
|
|
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
|
|
|
@@ -21,6 +21,7 @@ type TypeChartDataStyles = Readonly<{
|
|
|
21
21
|
color?: TypeChartStyleColor;
|
|
22
22
|
}>;
|
|
23
23
|
type TypeChartNumberFormat = "decimal" | "percent" | "currency" | "duration";
|
|
24
|
+
type TypeChartTimeFormat = "12" | "24";
|
|
24
25
|
type TypeChartTooltipDateFormatter = ({ x }: {
|
|
25
26
|
x: number;
|
|
26
27
|
}) => ReactNode;
|
|
@@ -63,6 +64,7 @@ type TypeAreaChartProps = Readonly<{
|
|
|
63
64
|
x: number;
|
|
64
65
|
}>) => void;
|
|
65
66
|
tooltipClickLabel?: ReactNode;
|
|
67
|
+
timeFormat?: TypeChartTimeFormat;
|
|
66
68
|
}>;
|
|
67
69
|
declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
68
70
|
data: ReadonlyArray<Readonly<{
|
|
@@ -86,6 +88,7 @@ declare const AreaChart: react.NamedExoticComponent<Readonly<{
|
|
|
86
88
|
x: number;
|
|
87
89
|
}>) => void;
|
|
88
90
|
tooltipClickLabel?: ReactNode;
|
|
91
|
+
timeFormat?: TypeChartTimeFormat;
|
|
89
92
|
}>>;
|
|
90
93
|
|
|
91
94
|
type TypeLegendLabel = Readonly<{
|
|
@@ -149,6 +152,12 @@ type TypeChartTooltipHeaderProps = {
|
|
|
149
152
|
};
|
|
150
153
|
declare const ChartTooltipHeader: react.NamedExoticComponent<TypeChartTooltipHeaderProps>;
|
|
151
154
|
|
|
155
|
+
declare const generateChartTooltipPortalId: (chartId: number) => string;
|
|
156
|
+
declare const ChartTooltipPortal: react.NamedExoticComponent<Readonly<{
|
|
157
|
+
chart: Chart;
|
|
158
|
+
renderContent: (context: TooltipFormatterContextObject) => ReactNode;
|
|
159
|
+
}>>;
|
|
160
|
+
|
|
152
161
|
type TypeChartTooltipTableProps = {
|
|
153
162
|
rows: TypeChartTableProps["rows"];
|
|
154
163
|
};
|
|
@@ -267,6 +276,7 @@ type TypeLineChartProps = Readonly<{
|
|
|
267
276
|
x: number;
|
|
268
277
|
}>) => void;
|
|
269
278
|
tooltipClickLabel?: ReactNode;
|
|
279
|
+
timeFormat?: TypeChartTimeFormat;
|
|
270
280
|
}>;
|
|
271
281
|
declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
272
282
|
data: ReadonlyArray<Readonly<{
|
|
@@ -289,6 +299,7 @@ declare const LineChart: react.NamedExoticComponent<Readonly<{
|
|
|
289
299
|
x: number;
|
|
290
300
|
}>) => void;
|
|
291
301
|
tooltipClickLabel?: ReactNode;
|
|
302
|
+
timeFormat?: TypeChartTimeFormat;
|
|
292
303
|
}>>;
|
|
293
304
|
|
|
294
305
|
declare const baseChartOptions: Options;
|
|
@@ -317,8 +328,9 @@ type TypeXAxisLabelFormatterProps = Readonly<{
|
|
|
317
328
|
tickPositions: AxisTickPositionsArray;
|
|
318
329
|
unitName: ExtendedTimeTicksInfoObject["unitName"];
|
|
319
330
|
value: AxisLabelsFormatterContextObject["value"];
|
|
331
|
+
timeFormat?: TypeChartTimeFormat;
|
|
320
332
|
}>;
|
|
321
|
-
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, }: TypeXAxisLabelFormatterProps) => string;
|
|
333
|
+
declare const xAxisLabelFormatter: ({ textLocale, tickPositions, unitName, value, timeFormat, }: TypeXAxisLabelFormatterProps) => string;
|
|
322
334
|
|
|
323
335
|
type TypeYAxisLabelFormatterProps = Readonly<{
|
|
324
336
|
numberLocale: Intl.LocalesArgument;
|
|
@@ -330,4 +342,25 @@ type TypeYAxisLabelFormatterProps = Readonly<{
|
|
|
330
342
|
}>;
|
|
331
343
|
declare const yAxisLabelFormatter: ({ numberLocale, textLocale, tickPositions, value, currency, numberFormat, }: TypeYAxisLabelFormatterProps) => string;
|
|
332
344
|
|
|
333
|
-
|
|
345
|
+
declare const GlobalChartStyleOverrides: styled_components.GlobalStyleComponent<{}, styled_components.DefaultTheme>;
|
|
346
|
+
declare const baseChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
347
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
348
|
+
}>, any>>;
|
|
349
|
+
declare const timeSeriesChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
350
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
351
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
352
|
+
}>, any>>;
|
|
353
|
+
declare const lineChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
354
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
355
|
+
$patterns: ReadonlyArray<TypeChartStylePattern>;
|
|
356
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
357
|
+
}>, any>>;
|
|
358
|
+
declare const areaChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
359
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
360
|
+
$hasOnClick: TypeChartStyleHasOnClick;
|
|
361
|
+
}>, any>>;
|
|
362
|
+
declare const donutChartStyles: styled_components.FlattenInterpolation<styled_components.ThemedStyledProps<Readonly<{
|
|
363
|
+
$colors: ReadonlyArray<TypeChartStyleColor>;
|
|
364
|
+
}>, any>>;
|
|
365
|
+
|
|
366
|
+
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 TypeChartYAxisLabelFormatter, type TypeColorBoxProps, type TypeDatavizColorBox, type TypeDatavizColorBoxProps, type TypeDonutChartLegendTableProps, type TypeDonutChartProps, type TypeDonutChartTooltipProps, type TypeLegendLabel, type TypeLineChartProps, areaChartOptions, areaChartStyles, baseChartOptions, baseChartStyles, donutChartOptions, donutChartStyles, generateChartTooltipPortalId, getDatavizColor, getDatavizColorWithAlpha, getDatavizOpacity, lineChartOptions, lineChartStyles, timeSeriesChartStyles, transformDataToSeries, transformTimeSeriesTooltipData, xAxisLabelFormatter, yAxisLabelFormatter };
|