@redsift/charts 11.6.0-muiv5-alpha.6 → 11.6.0-muiv5-alpha.8
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/index.d.ts +1190 -42
- package/package.json +2 -2
- package/_internal/Arc.d.ts +0 -10
- package/_internal/Arcs.d.ts +0 -10
- package/_internal/Axis.d.ts +0 -8
- package/_internal/Bar.d.ts +0 -10
- package/_internal/BarChart.d.ts +0 -17
- package/_internal/ChartContainer.d.ts +0 -5
- package/_internal/DataPoint.d.ts +0 -7
- package/_internal/Dot.d.ts +0 -10
- package/_internal/Legend.d.ts +0 -10
- package/_internal/LegendItem.d.ts +0 -21
- package/_internal/Line.d.ts +0 -10
- package/_internal/LineChart.d.ts +0 -17
- package/_internal/PieChart.d.ts +0 -14
- package/_internal/ScatterPlot.d.ts +0 -17
- package/_internal/axis.d2.ts +0 -48
- package/_internal/data.d.ts +0 -72
- package/_internal/scale.d.ts +0 -134
- package/_internal/styles.d.ts +0 -19
- package/_internal/styles.d10.ts +0 -30
- package/_internal/styles.d11.ts +0 -101
- package/_internal/styles.d12.ts +0 -133
- package/_internal/styles.d13.ts +0 -120
- package/_internal/styles.d2.ts +0 -26
- package/_internal/styles.d3.ts +0 -17
- package/_internal/styles.d4.ts +0 -18
- package/_internal/styles.d5.ts +0 -212
- package/_internal/styles.d6.ts +0 -22
- package/_internal/styles.d7.ts +0 -15
- package/_internal/styles.d8.ts +0 -19
- package/_internal/styles.d9.ts +0 -14
- package/_internal/types.d.ts +0 -20
- package/_internal/types.d2.ts +0 -46
- package/_internal/types.d3.ts +0 -48
- package/_internal/types.d4.ts +0 -86
- package/_internal/types.d5.ts +0 -30
- package/_internal/types.d6.ts +0 -44
- package/_internal/types.d7.ts +0 -24
- package/index.d2.ts +0 -49
package/_internal/styles.d12.ts
DELETED
|
@@ -1,133 +0,0 @@
|
|
|
1
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
2
|
-
import { ValueOf, Theme, Comp } from '@redsift/design-system';
|
|
3
|
-
import * as styled_components from 'styled-components';
|
|
4
|
-
import { ReactNode, ReactElement, ComponentProps } from 'react';
|
|
5
|
-
import { PieArcDatum } from 'd3-shape';
|
|
6
|
-
import { A as ArcProps } from './types.js';
|
|
7
|
-
import { C as ChartContainerProps } from './types.d3.ts';
|
|
8
|
-
import { L as LegendProps } from './types.d6.ts';
|
|
9
|
-
import { a as ChartDimensions, b as ChartSize, S as SortingMethod, C as ChartTheme } from '../index.d2.ts';
|
|
10
|
-
import { A as AnchorProps, T as TooltipVariant } from './types.d4.ts';
|
|
11
|
-
import { C as CategoryData, A as ArcDatum, o as Statistics, f as CategoryDatum } from './data.js';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Component variant.
|
|
15
|
-
*/
|
|
16
|
-
declare const PieChartVariant: {
|
|
17
|
-
readonly plain: "plain";
|
|
18
|
-
readonly spaced: "spaced";
|
|
19
|
-
readonly donut: "donut";
|
|
20
|
-
readonly spacedDonut: "spacedDonut";
|
|
21
|
-
};
|
|
22
|
-
type PieChartVariant = ValueOf<typeof PieChartVariant>;
|
|
23
|
-
/**
|
|
24
|
-
* Component's labels variant.
|
|
25
|
-
*/
|
|
26
|
-
declare const PieChartLegendVariant: {
|
|
27
|
-
readonly none: "none";
|
|
28
|
-
readonly internal: "internal";
|
|
29
|
-
readonly externalLabel: "externalLabel";
|
|
30
|
-
readonly externalLabelValue: "externalLabelValue";
|
|
31
|
-
readonly externalLabelPercent: "externalLabelPercent";
|
|
32
|
-
readonly custom: "custom";
|
|
33
|
-
};
|
|
34
|
-
type PieChartLegendVariant = ValueOf<typeof PieChartLegendVariant>;
|
|
35
|
-
interface LocaleText {
|
|
36
|
-
emptyChartText: string;
|
|
37
|
-
}
|
|
38
|
-
type PieChartDimensions = ChartDimensions & {
|
|
39
|
-
smallFontSize: number;
|
|
40
|
-
fontSize: number;
|
|
41
|
-
innerRadius: number;
|
|
42
|
-
};
|
|
43
|
-
/**
|
|
44
|
-
* Component props.
|
|
45
|
-
*/
|
|
46
|
-
interface PieChartProps extends ChartContainerProps {
|
|
47
|
-
/** Number of categories to use, the rest being put into a new category called "Others". */
|
|
48
|
-
caping?: number;
|
|
49
|
-
/** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
|
|
50
|
-
data?: CategoryData;
|
|
51
|
-
/** Component to use if the chart is empty (replacing the default one). */
|
|
52
|
-
emptyComponent?: ReactNode;
|
|
53
|
-
/** Method used to define the anchor props to use when the slice is a navigation link. */
|
|
54
|
-
getSliceAnchorProps?: (datum: ArcDatum) => AnchorProps;
|
|
55
|
-
/** Whether the pie or donut is cut in half or not. */
|
|
56
|
-
isHalf?: boolean;
|
|
57
|
-
/** Method to determine whether a slice is selected or not. */
|
|
58
|
-
isSliceSelected?: (datum: ArcDatum) => boolean | undefined;
|
|
59
|
-
/** Method to override the data labels. */
|
|
60
|
-
labelDecorator?: (datum: ArcDatum, props?: {
|
|
61
|
-
index?: number;
|
|
62
|
-
isSelected?: boolean;
|
|
63
|
-
color?: string;
|
|
64
|
-
}) => string | ReactElement;
|
|
65
|
-
/** Method modifying what's displayed within the legend when the legendVariant is "custom". */
|
|
66
|
-
legendDecorator?: (datum: ArcDatum, props?: {
|
|
67
|
-
index?: number;
|
|
68
|
-
isSelected?: boolean;
|
|
69
|
-
color?: string;
|
|
70
|
-
}) => string | ReactElement;
|
|
71
|
-
/** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
|
|
72
|
-
legendVariant?: PieChartLegendVariant;
|
|
73
|
-
/** Props to forward to the Legend block. Can be used to make the legend selectable. */
|
|
74
|
-
legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant'> & {
|
|
75
|
-
extraLegendItems?: Statistics;
|
|
76
|
-
};
|
|
77
|
-
/** Labels and texts. */
|
|
78
|
-
localeText?: LocaleText;
|
|
79
|
-
/** Method to be called on a click on a slice. For a navigation link, please use `getSliceAnchorProps` instead. */
|
|
80
|
-
onSliceClick?: (datum: ArcDatum) => void;
|
|
81
|
-
/** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
|
|
82
|
-
others?: boolean | string;
|
|
83
|
-
/** PieChart size. */
|
|
84
|
-
size?: ChartSize | PieChartDimensions;
|
|
85
|
-
/** Native HTML props to forward to each slice. */
|
|
86
|
-
sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
|
|
87
|
-
/** Slice role. If an onClick is provided, the slices will have the role `button`. For a navigation link, please use `getSliceAnchorProps` instead. */
|
|
88
|
-
sliceRole?: ArcProps['role'];
|
|
89
|
-
/** Define how to sort categories. */
|
|
90
|
-
sortingMethod?: SortingMethod;
|
|
91
|
-
/** Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. */
|
|
92
|
-
middleText?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
|
|
93
|
-
/** Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. */
|
|
94
|
-
subtext?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
|
|
95
|
-
/** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
|
|
96
|
-
text?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
|
|
97
|
-
/** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
|
|
98
|
-
colorTheme?: ChartTheme;
|
|
99
|
-
/** PieChart variant. */
|
|
100
|
-
variant?: PieChartVariant;
|
|
101
|
-
/** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". */
|
|
102
|
-
tooltipDecorator?: (data: ArcDatum, props?: {
|
|
103
|
-
index?: number;
|
|
104
|
-
isSelected?: boolean;
|
|
105
|
-
color?: string;
|
|
106
|
-
}) => string | ReactElement;
|
|
107
|
-
/** Tooltip variant. */
|
|
108
|
-
tooltipVariant?: TooltipVariant;
|
|
109
|
-
/** Theme. */
|
|
110
|
-
theme?: Theme;
|
|
111
|
-
}
|
|
112
|
-
type StyledPieChartProps = PieChartProps & {};
|
|
113
|
-
|
|
114
|
-
declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Component style.
|
|
118
|
-
*/
|
|
119
|
-
declare const StyledPieChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, PieChartProps, never>;
|
|
120
|
-
declare const StyledPieChartCenterText: styled_components.StyledComponent<"div", any, {
|
|
121
|
-
$maxWidth: number;
|
|
122
|
-
$textSize: number;
|
|
123
|
-
$smallTextSize: number;
|
|
124
|
-
$theme: Theme;
|
|
125
|
-
}, never>;
|
|
126
|
-
declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div", any, {
|
|
127
|
-
$maxWidth: number;
|
|
128
|
-
$textSize: number;
|
|
129
|
-
$isDonut: boolean;
|
|
130
|
-
$theme: Theme;
|
|
131
|
-
}, never>;
|
|
132
|
-
|
|
133
|
-
export { PieChart as P, StyledPieChartProps as S, PieChartVariant as a, PieChartLegendVariant as b, PieChartDimensions as c, PieChartProps as d, StyledPieChart as e, StyledPieChartCenterText as f, StyledPieChartEmptyText as g };
|
package/_internal/styles.d13.ts
DELETED
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
2
|
-
import { ValueOf, Theme, Comp } from '@redsift/design-system';
|
|
3
|
-
import * as styled_components from 'styled-components';
|
|
4
|
-
import { C as ChartContainerProps } from './types.d3.ts';
|
|
5
|
-
import { ReactNode, ReactElement, MutableRefObject } from 'react';
|
|
6
|
-
import { a as DotProps } from './types.d5.ts';
|
|
7
|
-
import { ScaleLinear } from 'd3';
|
|
8
|
-
import { L as LegendProps } from './types.d6.ts';
|
|
9
|
-
import { a as ChartDimensions, M as MarginProps, b as ChartSize, S as SortingMethod, C as ChartTheme } from '../index.d2.ts';
|
|
10
|
-
import { A as AnchorProps, T as TooltipVariant } from './types.d4.ts';
|
|
11
|
-
import { l as CoordinatesCategoryData, m as DotDatum, o as Statistics } from './data.js';
|
|
12
|
-
import { C as ChartAxesProps } from './axis.d2.ts';
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Component variant.
|
|
16
|
-
*/
|
|
17
|
-
declare const ScatterPlotVariant: {
|
|
18
|
-
readonly default: "default";
|
|
19
|
-
readonly gridded: "gridded";
|
|
20
|
-
};
|
|
21
|
-
type ScatterPlotVariant = ValueOf<typeof ScatterPlotVariant>;
|
|
22
|
-
/**
|
|
23
|
-
* Component's labels variant.
|
|
24
|
-
*/
|
|
25
|
-
declare const ScatterPlotLegendVariant: {
|
|
26
|
-
readonly none: "none";
|
|
27
|
-
readonly externalLabel: "externalLabel";
|
|
28
|
-
readonly externalLabelValue: "externalLabelValue";
|
|
29
|
-
readonly externalLabelPercent: "externalLabelPercent";
|
|
30
|
-
readonly custom: "custom";
|
|
31
|
-
};
|
|
32
|
-
type ScatterPlotLegendVariant = ValueOf<typeof ScatterPlotLegendVariant>;
|
|
33
|
-
interface LocaleText {
|
|
34
|
-
emptyChartText: string;
|
|
35
|
-
}
|
|
36
|
-
type ScatterPlotDimensions = ChartDimensions & {
|
|
37
|
-
fontSize: number;
|
|
38
|
-
};
|
|
39
|
-
/**
|
|
40
|
-
* Component props.
|
|
41
|
-
*/
|
|
42
|
-
interface ScatterPlotProps extends ChartContainerProps, ChartAxesProps {
|
|
43
|
-
/** Dataset to use to generate the chart. */
|
|
44
|
-
data?: CoordinatesCategoryData;
|
|
45
|
-
/** Method used to define the anchor props to use when the dot is a navigation link. */
|
|
46
|
-
getDotAnchorProps?: (datum: DotDatum) => AnchorProps;
|
|
47
|
-
/** Dot role. If an onClick is provided, the dots will have the role `button`. For a navigation link, please use `getDotAnchorProps` instead. */
|
|
48
|
-
dotRole?: DotProps['role'];
|
|
49
|
-
/** Component to use if the chart is empty (replacing the default one). */
|
|
50
|
-
emptyComponent?: ReactNode;
|
|
51
|
-
/** Whether the Control Keys panel is displayed or not. */
|
|
52
|
-
hideControlKeyPanel?: boolean;
|
|
53
|
-
/** Whether the scatter plot dots are selectable using brush or not. */
|
|
54
|
-
isBrushable?: boolean;
|
|
55
|
-
/** Method to determine whether a dot is selected or not. */
|
|
56
|
-
isDotSelected?: (datum: DotDatum) => boolean | undefined;
|
|
57
|
-
/** Method to override the data point labels. */
|
|
58
|
-
labelDecorator?: (datum: DotDatum, props?: {
|
|
59
|
-
index?: number;
|
|
60
|
-
isSelected?: boolean;
|
|
61
|
-
color?: string;
|
|
62
|
-
}) => string | ReactElement;
|
|
63
|
-
/** Method modifying what's displayed within the legend when the legendVariant is "custom". */
|
|
64
|
-
legendDecorator?: (datum: DotDatum, props?: {
|
|
65
|
-
index?: number;
|
|
66
|
-
isSelected?: boolean;
|
|
67
|
-
color?: string;
|
|
68
|
-
}) => string | ReactElement;
|
|
69
|
-
/** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
|
|
70
|
-
legendVariant?: ScatterPlotLegendVariant;
|
|
71
|
-
/** Props to forward to the Legend block. Can be used to make the legend selectable. */
|
|
72
|
-
legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
|
|
73
|
-
extraLegendItems?: Statistics;
|
|
74
|
-
};
|
|
75
|
-
/** Labels and texts. */
|
|
76
|
-
localeText?: LocaleText;
|
|
77
|
-
/** Custom margins, used to give more space for axes labels and legend for instance. */
|
|
78
|
-
margins?: MarginProps;
|
|
79
|
-
/** Method called on brush. */
|
|
80
|
-
onBrush?: (selection: [[number, number], [number, number]] | null, scaleX: ScaleLinear<number, number>, scaleY: ScaleLinear<number, number>) => void;
|
|
81
|
-
/** Method called on brush end. */
|
|
82
|
-
onBrushEnd?: (selection: [[number, number], [number, number]] | null, scaleX?: ScaleLinear<number, number>, scaleY?: ScaleLinear<number, number>) => void;
|
|
83
|
-
/** Method to be called on a click on a dot. For a navigation link, please use `getDotAnchorProps` instead. */
|
|
84
|
-
onDotClick?: (datum: DotDatum) => void;
|
|
85
|
-
/** ScatterPlot size. */
|
|
86
|
-
size?: ChartSize | ScatterPlotDimensions;
|
|
87
|
-
/** Define how to sort categories. */
|
|
88
|
-
sortingMethod?: SortingMethod;
|
|
89
|
-
/** Reference to the SVG tag. */
|
|
90
|
-
svgRef?: MutableRefObject<SVGSVGElement>;
|
|
91
|
-
/** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
|
|
92
|
-
colorTheme?: ChartTheme;
|
|
93
|
-
/** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". */
|
|
94
|
-
tooltipDecorator?: (data: DotDatum, props?: {
|
|
95
|
-
index?: number;
|
|
96
|
-
isSelected?: boolean;
|
|
97
|
-
color?: string;
|
|
98
|
-
}) => string | ReactElement;
|
|
99
|
-
/** Tooltip variant. */
|
|
100
|
-
tooltipVariant?: TooltipVariant;
|
|
101
|
-
/** Variant. */
|
|
102
|
-
variant?: ScatterPlotVariant;
|
|
103
|
-
/** Theme. */
|
|
104
|
-
theme?: Theme;
|
|
105
|
-
}
|
|
106
|
-
type StyledScatterPlotProps = ScatterPlotProps & {};
|
|
107
|
-
|
|
108
|
-
declare const ScatterPlot: Comp<ScatterPlotProps, HTMLDivElement>;
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Component style.
|
|
112
|
-
*/
|
|
113
|
-
declare const StyledScatterPlot: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, ScatterPlotProps, never>;
|
|
114
|
-
declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div", any, {
|
|
115
|
-
$maxWidth: number;
|
|
116
|
-
$textSize: number;
|
|
117
|
-
$theme: Theme;
|
|
118
|
-
}, never>;
|
|
119
|
-
|
|
120
|
-
export { ScatterPlot as S, ScatterPlotVariant as a, ScatterPlotLegendVariant as b, ScatterPlotDimensions as c, ScatterPlotProps as d, StyledScatterPlotProps as e, StyledScatterPlot as f, StyledScatterPlotEmptyText as g };
|
package/_internal/styles.d2.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { Comp } from '@redsift/design-system';
|
|
2
|
-
import * as styled_components from 'styled-components';
|
|
3
|
-
import { ComponentProps } from 'react';
|
|
4
|
-
import { A as ArcProps } from './types.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Component props.
|
|
8
|
-
*/
|
|
9
|
-
interface ArcsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'>, Pick<ArcProps, 'id' | 'disableAnimations' | 'labelDecorator' | 'onClick' | 'role' | 'hasStroke' | 'tooltipDecorator' | 'tooltipVariant'> {
|
|
10
|
-
/** Arc props. */
|
|
11
|
-
arcs: Omit<ArcProps, 'ref'>[];
|
|
12
|
-
/** Whether arcs have internal labels or not. */
|
|
13
|
-
hasLabels?: boolean;
|
|
14
|
-
/** Native HTML props to forward to each slice. */
|
|
15
|
-
sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
|
|
16
|
-
}
|
|
17
|
-
type StyledArcsProps = Omit<ArcsProps, 'arcs'> & {};
|
|
18
|
-
|
|
19
|
-
declare const Arcs: Comp<ArcsProps, SVGGElement>;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Component style.
|
|
23
|
-
*/
|
|
24
|
-
declare const StyledArcs: styled_components.StyledComponent<"g", any, Omit<ArcsProps, "arcs">, never>;
|
|
25
|
-
|
|
26
|
-
export { Arcs as A, StyledArcsProps as S, ArcsProps as a, StyledArcs as b };
|
package/_internal/styles.d3.ts
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Comp, Theme } from '@redsift/design-system';
|
|
2
|
-
import { l as AxisPosition, m as AxisProps } from './scale.js';
|
|
3
|
-
import * as styled_components from 'styled-components';
|
|
4
|
-
import * as _react_spring_web from '@react-spring/web';
|
|
5
|
-
|
|
6
|
-
declare const getAxisType: (position: AxisPosition) => "x" | "y";
|
|
7
|
-
declare const Axis: Comp<AxisProps, SVGGElement>;
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Component style.
|
|
11
|
-
*/
|
|
12
|
-
declare const StyledAxis: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<AxisProps, "size" | "scale" | "areXLabelsRotated"> & {
|
|
13
|
-
$theme: Theme;
|
|
14
|
-
$color?: string | undefined;
|
|
15
|
-
}, never>;
|
|
16
|
-
|
|
17
|
-
export { Axis as A, StyledAxis as S, getAxisType as g };
|
package/_internal/styles.d4.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
2
|
-
import { Comp, Theme } from '@redsift/design-system';
|
|
3
|
-
import { b as BarProps } from './types.d2.ts';
|
|
4
|
-
import * as styled_components from 'styled-components';
|
|
5
|
-
import { D as DataPointProps } from './types.d4.ts';
|
|
6
|
-
|
|
7
|
-
declare const Bar: Comp<BarProps, SVGGElement>;
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Component style.
|
|
11
|
-
*/
|
|
12
|
-
declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
|
|
13
|
-
$clickable: boolean;
|
|
14
|
-
} & Omit<BarProps, "scale" | "scalePosition"> & {
|
|
15
|
-
$theme: Theme;
|
|
16
|
-
}, never>;
|
|
17
|
-
|
|
18
|
-
export { Bar as B, StyledBar as S };
|
package/_internal/styles.d5.ts
DELETED
|
@@ -1,212 +0,0 @@
|
|
|
1
|
-
import { C as ChartContainerProps } from './types.d3.ts';
|
|
2
|
-
import { L as LegendItemProps } from './types.d7.ts';
|
|
3
|
-
import { L as LegendProps } from './types.d6.ts';
|
|
4
|
-
import { m as AxisProps } from './scale.js';
|
|
5
|
-
import React$1, { ComponentProps, ReactNode, ReactElement } from 'react';
|
|
6
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
7
|
-
import { ValueOf, Theme, Comp } from '@redsift/design-system';
|
|
8
|
-
import { C as CategoryData, j as LinearData, k as TwoCategoryData, B as BarDatum, o as Statistics, L as LinearDim } from './data.js';
|
|
9
|
-
import * as styled_components from 'styled-components';
|
|
10
|
-
import { ScaleOrdinal, ScaleLinear, ScaleTime, ScalePoint } from 'd3';
|
|
11
|
-
import { b as BarProps, a as BarDirection, B as BarOrientation } from './types.d2.ts';
|
|
12
|
-
import { a as ChartDimensions, C as ChartTheme, M as MarginProps, b as ChartSize, S as SortingMethod } from '../index.d2.ts';
|
|
13
|
-
import { A as AnchorProps, T as TooltipVariant } from './types.d4.ts';
|
|
14
|
-
import { C as ChartAxesProps } from './axis.d2.ts';
|
|
15
|
-
|
|
16
|
-
type FormatMessage = (key: string, variables?: {
|
|
17
|
-
[key: string]: any;
|
|
18
|
-
}) => string;
|
|
19
|
-
|
|
20
|
-
/**
|
|
21
|
-
* Component's labels variant.
|
|
22
|
-
*/
|
|
23
|
-
declare const BarChartLegendVariant: {
|
|
24
|
-
readonly none: "none";
|
|
25
|
-
readonly externalLabel: "externalLabel";
|
|
26
|
-
readonly externalLabelValue: "externalLabelValue";
|
|
27
|
-
readonly externalLabelPercent: "externalLabelPercent";
|
|
28
|
-
readonly custom: "custom";
|
|
29
|
-
};
|
|
30
|
-
type BarChartLegendVariant = ValueOf<typeof BarChartLegendVariant>;
|
|
31
|
-
interface LocaleText {
|
|
32
|
-
emptyChartText: string;
|
|
33
|
-
}
|
|
34
|
-
type BarChartDimensions = ChartDimensions & {
|
|
35
|
-
fontSize: number;
|
|
36
|
-
minWidth?: number;
|
|
37
|
-
maxWidth?: number;
|
|
38
|
-
};
|
|
39
|
-
type XScaleType = 'number' | 'Date' | 'dateString' | undefined;
|
|
40
|
-
/**
|
|
41
|
-
* Component props.
|
|
42
|
-
*/
|
|
43
|
-
interface BarChartProps extends ChartContainerProps, ChartAxesProps {
|
|
44
|
-
/** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
|
|
45
|
-
areXLabelsRotated?: boolean;
|
|
46
|
-
/** Native HTML props to forward to each bar. */
|
|
47
|
-
barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale' | 'direction'> & {
|
|
48
|
-
minWidth?: number;
|
|
49
|
-
};
|
|
50
|
-
/** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
|
|
51
|
-
barRole?: BarProps['role'];
|
|
52
|
-
/** Number of categories to use, the rest being put into a new category called "Others". */
|
|
53
|
-
caping?: number;
|
|
54
|
-
/** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
|
|
55
|
-
colorTheme?: ChartTheme;
|
|
56
|
-
/** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
|
|
57
|
-
data?: CategoryData | LinearData | TwoCategoryData;
|
|
58
|
-
/** Data type override to skip data type inferrence. */
|
|
59
|
-
dataType?: 'TwoCategoryData' | 'LinearData' | 'CategoryData';
|
|
60
|
-
/**
|
|
61
|
-
* Direction of the bars. Only applied when the orientation is vertical. By default bars go "up" but can go "down".
|
|
62
|
-
* They can also go both ways in which case you need to indicates which category go which direction. The concatenation of the two arrays will be used to determine the order of the categories instead of the sortingMethod prop.
|
|
63
|
-
*/
|
|
64
|
-
direction?: BarDirection;
|
|
65
|
-
/** Component to use if the chart is empty (replacing the default one). */
|
|
66
|
-
emptyComponent?: ReactNode;
|
|
67
|
-
/** Method used to define the anchor props to use when the bar is a navigation link. */
|
|
68
|
-
getBarAnchorProps?: (datum: BarDatum) => AnchorProps;
|
|
69
|
-
/** Method to determine whether a bar is selected or not. */
|
|
70
|
-
isBarSelected?: (datum: BarDatum) => void;
|
|
71
|
-
/** Method to override the data labels. */
|
|
72
|
-
labelDecorator?: (datum: BarDatum, props?: {
|
|
73
|
-
index?: number;
|
|
74
|
-
isSelected?: boolean;
|
|
75
|
-
color?: string;
|
|
76
|
-
}) => string | ReactElement;
|
|
77
|
-
/** Method modifying what's displayed within the legend when the legendVariant is "custom". */
|
|
78
|
-
legendDecorator?: (datum: BarDatum, props?: {
|
|
79
|
-
index?: number;
|
|
80
|
-
isSelected?: boolean;
|
|
81
|
-
color?: string;
|
|
82
|
-
}) => string | ReactElement;
|
|
83
|
-
/** Define whether the labels should be displayed inside or outside the charts and if they should contain raw or percentage values. If set to "custom", use `legendDecorator` to customize it. */
|
|
84
|
-
legendVariant?: BarChartLegendVariant;
|
|
85
|
-
/** Props to forward to the Legend block. Can be used to make the legend selectable. */
|
|
86
|
-
legendProps?: Omit<LegendProps, 'data' | 'ref' | 'variant' | 'width'> & {
|
|
87
|
-
extraLegendItems?: Statistics;
|
|
88
|
-
};
|
|
89
|
-
/** Labels and texts. */
|
|
90
|
-
localeText?: LocaleText;
|
|
91
|
-
/** Custom margins, used to give more space for axes labels and legend for instance. */
|
|
92
|
-
margins?: MarginProps;
|
|
93
|
-
/** Method to be called on a click on a bar. For a navigation link, please use `getBarAnchorProps` instead. */
|
|
94
|
-
onBarClick?: (datum: BarDatum, data: BarDatum[]) => void;
|
|
95
|
-
/** Orientation of the bar. */
|
|
96
|
-
orientation?: BarOrientation;
|
|
97
|
-
/** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
|
|
98
|
-
others?: boolean | string;
|
|
99
|
-
/** BarChart size. */
|
|
100
|
-
size?: ChartSize | BarChartDimensions;
|
|
101
|
-
/** Define how to sort categories. */
|
|
102
|
-
sortingMethod?: SortingMethod;
|
|
103
|
-
/** Method modifying what's displayed within the tooltip when the tooltipVariant is "custom". */
|
|
104
|
-
tooltipDecorator?: (data: BarDatum, props?: {
|
|
105
|
-
index?: number;
|
|
106
|
-
isSelected?: boolean;
|
|
107
|
-
color?: string;
|
|
108
|
-
}, dataset?: ComputedBarProps[], groupedData?: ComputedBarProps[]) => string | ReactElement;
|
|
109
|
-
/** Tooltip variant. */
|
|
110
|
-
tooltipVariant?: TooltipVariant | 'grouped';
|
|
111
|
-
/** Theme. */
|
|
112
|
-
theme?: Theme;
|
|
113
|
-
/** X-scale type override to skip x-scale type inferrence. */
|
|
114
|
-
xScaleType?: XScaleType;
|
|
115
|
-
/**
|
|
116
|
-
* In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
|
|
117
|
-
* For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset)
|
|
118
|
-
*/
|
|
119
|
-
xAxisStartDateOffset?: number;
|
|
120
|
-
/**
|
|
121
|
-
* In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
|
|
122
|
-
* For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)
|
|
123
|
-
*/
|
|
124
|
-
xAxisEndDateOffset?: number;
|
|
125
|
-
/** If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. */
|
|
126
|
-
yScaleLogBase?: number;
|
|
127
|
-
}
|
|
128
|
-
type StyledBarChartProps = BarChartProps & {};
|
|
129
|
-
interface RenderedLinearBarChartProps extends Omit<BarChartProps, 'data' | 'caping' | 'orientation' | 'others'> {
|
|
130
|
-
data: LinearData | TwoCategoryData;
|
|
131
|
-
}
|
|
132
|
-
interface ComputedBarProps {
|
|
133
|
-
category: string;
|
|
134
|
-
key: LinearDim;
|
|
135
|
-
value: number;
|
|
136
|
-
cumulativeValue: number;
|
|
137
|
-
}
|
|
138
|
-
interface BarChartState extends ChartAxesProps, Required<Pick<RenderedLinearBarChartProps, 'margins'>>, Pick<RenderedLinearBarChartProps, 'barProps' | 'barRole' | 'colorTheme' | 'direction' | 'disableAnimations' | 'getBarAnchorProps' | 'id' | 'isBarSelected' | 'labelDecorator' | 'onBarClick' | 'tooltipVariant' | 'tooltipDecorator'> {
|
|
139
|
-
bars: ComputedBarProps[];
|
|
140
|
-
barWidth: number;
|
|
141
|
-
cache: React.MutableRefObject<LinearData | TwoCategoryData | undefined>;
|
|
142
|
-
categories: string[];
|
|
143
|
-
chartHeight: number;
|
|
144
|
-
chartWidth: number;
|
|
145
|
-
colorScale?: ScaleOrdinal<string, string>;
|
|
146
|
-
format: FormatMessage;
|
|
147
|
-
gap: number;
|
|
148
|
-
hasCategory: boolean;
|
|
149
|
-
scaleX: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
|
|
150
|
-
scaleY: ScaleLinear<number, number>;
|
|
151
|
-
sectionHeight?: number;
|
|
152
|
-
xScaleType?: XScaleType;
|
|
153
|
-
}
|
|
154
|
-
interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role' | 'color'> {
|
|
155
|
-
/** Starting point in percentage of the chart height. */
|
|
156
|
-
from?: number;
|
|
157
|
-
/** Ending point in percentage of the chart height. */
|
|
158
|
-
to?: number;
|
|
159
|
-
/** Color. */
|
|
160
|
-
color?: 'red' | 'green' | {
|
|
161
|
-
textColor: string;
|
|
162
|
-
backgroundColor?: string;
|
|
163
|
-
};
|
|
164
|
-
/** Section title */
|
|
165
|
-
title?: string;
|
|
166
|
-
/** Title position relative to section */
|
|
167
|
-
titlePosition?: 'left' | 'center' | 'right';
|
|
168
|
-
scaleX?: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
|
|
169
|
-
scaleY?: ScaleLinear<number, number, never>;
|
|
170
|
-
direction?: BarDirection;
|
|
171
|
-
}
|
|
172
|
-
interface StyledBarChartSectionProps {
|
|
173
|
-
$theme: Theme;
|
|
174
|
-
$textColor: string;
|
|
175
|
-
}
|
|
176
|
-
interface BarChartBarsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {
|
|
177
|
-
category?: string;
|
|
178
|
-
}
|
|
179
|
-
type StyledBarChartBarsProps = Omit<BarChartBarsProps, 'category'> & {};
|
|
180
|
-
|
|
181
|
-
declare const BaseBarChart: Comp<BarChartProps, HTMLDivElement>;
|
|
182
|
-
declare const BarChart: Comp<BarChartProps, HTMLDivElement> & {
|
|
183
|
-
Section: Comp<BarChartSectionProps, SVGGElement>;
|
|
184
|
-
Bars: Comp<BarChartBarsProps, SVGGElement>;
|
|
185
|
-
Axis: Comp<AxisProps, SVGGElement>;
|
|
186
|
-
GroupedTooltip: React$1.FC<{
|
|
187
|
-
dateFormatter: (date: Date) => string;
|
|
188
|
-
categories: string[];
|
|
189
|
-
categoryDecorator?: ((category: string) => string) | undefined;
|
|
190
|
-
categoryColor: (category: string) => string;
|
|
191
|
-
datum: BarDatum;
|
|
192
|
-
groupedData: ComputedBarProps[] | undefined;
|
|
193
|
-
}>;
|
|
194
|
-
Legend: Comp<LegendProps, HTMLUListElement>;
|
|
195
|
-
LegendItem: Comp<LegendItemProps, HTMLLIElement>;
|
|
196
|
-
Title: Comp<Pick<ChartContainerProps, "onReset"> & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
197
|
-
Description: Comp<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLDivElement>;
|
|
198
|
-
};
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* Component style.
|
|
202
|
-
*/
|
|
203
|
-
declare const StyledBarChart: styled_components.StyledComponent<_redsift_design_system.Comp<ChartContainerProps, HTMLDivElement>, any, BarChartProps, never>;
|
|
204
|
-
declare const StyledBarChartSection: styled_components.StyledComponent<"g", any, StyledBarChartSectionProps, never>;
|
|
205
|
-
declare const StyledBarChartBars: styled_components.StyledComponent<"g", any, Omit<BarChartBarsProps, "category">, never>;
|
|
206
|
-
declare const StyledBarChartEmptyText: styled_components.StyledComponent<"div", any, {
|
|
207
|
-
$maxWidth: number;
|
|
208
|
-
$textSize: number;
|
|
209
|
-
$theme: Theme;
|
|
210
|
-
}, never>;
|
|
211
|
-
|
|
212
|
-
export { BaseBarChart as B, ComputedBarProps as C, RenderedLinearBarChartProps as R, StyledBarChartProps as S, XScaleType as X, BarChart as a, BarChartLegendVariant as b, BarChartDimensions as c, BarChartProps as d, BarChartState as e, BarChartSectionProps as f, StyledBarChartSectionProps as g, BarChartBarsProps as h, StyledBarChartBarsProps as i, StyledBarChart as j, StyledBarChartSection as k, StyledBarChartBars as l, StyledBarChartEmptyText as m };
|
package/_internal/styles.d6.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ComponentProps } from 'react';
|
|
2
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
3
|
-
import { Comp, Theme } from '@redsift/design-system';
|
|
4
|
-
import { C as ChartContainerProps, S as StyledChartContainerProps } from './types.d3.ts';
|
|
5
|
-
import * as styled_components from 'styled-components';
|
|
6
|
-
|
|
7
|
-
declare const ChartContainer: Comp<ChartContainerProps, HTMLDivElement>;
|
|
8
|
-
declare const ChartContainerTitle: Comp<Pick<ChartContainerProps, 'onReset'> & ComponentProps<'div'>, HTMLDivElement>;
|
|
9
|
-
declare const ChartContainerDescription: Comp<ComponentProps<'div'>, HTMLDivElement>;
|
|
10
|
-
|
|
11
|
-
/**
|
|
12
|
-
* Component style.
|
|
13
|
-
*/
|
|
14
|
-
declare const StyledChartContainer: styled_components.StyledComponent<"div", any, Omit<ChartContainerProps, "theme"> & {
|
|
15
|
-
$theme: Theme;
|
|
16
|
-
}, never>;
|
|
17
|
-
declare const StyledChartContainerTitle: styled_components.StyledComponent<_redsift_design_system.Comp<_redsift_design_system.FlexboxProps, HTMLDivElement>, any, Omit<ChartContainerProps, "theme"> & {
|
|
18
|
-
$theme: Theme;
|
|
19
|
-
}, never>;
|
|
20
|
-
declare const StyledChartContainerCaption: styled_components.StyledComponent<"p", any, Omit<StyledChartContainerProps, "onReset">, never>;
|
|
21
|
-
|
|
22
|
-
export { ChartContainer as C, StyledChartContainer as S, ChartContainerTitle as a, ChartContainerDescription as b, StyledChartContainerTitle as c, StyledChartContainerCaption as d };
|
package/_internal/styles.d7.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { Comp } from '@redsift/design-system';
|
|
2
|
-
import { D as DataPointProps } from './types.d4.ts';
|
|
3
|
-
import * as styled_components from 'styled-components';
|
|
4
|
-
import * as _react_spring_web from '@react-spring/web';
|
|
5
|
-
|
|
6
|
-
declare const DataPoint: Comp<DataPointProps<any>, SVGGElement>;
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Component style.
|
|
10
|
-
*/
|
|
11
|
-
declare const StyledDataPoint: styled_components.StyledComponent<_react_spring_web.AnimatedComponent<"g">, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
|
|
12
|
-
$clickable: boolean;
|
|
13
|
-
}, never>;
|
|
14
|
-
|
|
15
|
-
export { DataPoint as D, StyledDataPoint as S };
|
package/_internal/styles.d8.ts
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as _redsift_design_system from '@redsift/design-system';
|
|
2
|
-
import { Comp } from '@redsift/design-system';
|
|
3
|
-
import { a as DotProps, D as DotVariant } from './types.d5.ts';
|
|
4
|
-
import * as styled_components from 'styled-components';
|
|
5
|
-
import { D as DataPointProps } from './types.d4.ts';
|
|
6
|
-
|
|
7
|
-
declare const Dot: Comp<DotProps, SVGGElement>;
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* Component style.
|
|
11
|
-
*/
|
|
12
|
-
declare const StyledDot: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
|
|
13
|
-
$clickable: boolean;
|
|
14
|
-
} & Omit<DotProps, "scaleX" | "scaleY"> & {
|
|
15
|
-
$variant: DotVariant | undefined;
|
|
16
|
-
$theme: _redsift_design_system.Theme;
|
|
17
|
-
}, never>;
|
|
18
|
-
|
|
19
|
-
export { Dot as D, StyledDot as S };
|
package/_internal/styles.d9.ts
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { Comp } from '@redsift/design-system';
|
|
2
|
-
import { L as LegendProps } from './types.d6.ts';
|
|
3
|
-
import * as styled_components from 'styled-components';
|
|
4
|
-
|
|
5
|
-
declare const Legend: Comp<LegendProps, HTMLUListElement>;
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Component style.
|
|
9
|
-
*/
|
|
10
|
-
declare const StyledLegend: styled_components.StyledComponent<"ul", any, Omit<LegendProps, "data"> & {
|
|
11
|
-
$width?: string | number | undefined;
|
|
12
|
-
}, never>;
|
|
13
|
-
|
|
14
|
-
export { Legend as L, StyledLegend as S };
|
package/_internal/types.d.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { Arc } from 'd3';
|
|
2
|
-
import { D as DataPointProps, S as StyledDataPointProps } from './types.d4.ts';
|
|
3
|
-
import { Theme } from '@redsift/design-system';
|
|
4
|
-
import { A as ArcDatum } from './data.js';
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Component props.
|
|
8
|
-
*/
|
|
9
|
-
interface ArcProps extends DataPointProps<ArcDatum> {
|
|
10
|
-
/** Arc generator used to determine the width of the arc. */
|
|
11
|
-
createArc: Arc<any, ArcDatum>;
|
|
12
|
-
/** Whether the arc has a stroke or not. Used to create a gap between two siblings. */
|
|
13
|
-
hasStroke?: boolean;
|
|
14
|
-
}
|
|
15
|
-
type StyledArcProps = StyledDataPointProps & Omit<ArcProps, 'createArc'> & {
|
|
16
|
-
$hasStroke: ArcProps['hasStroke'];
|
|
17
|
-
$theme: Theme;
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export { ArcProps as A, StyledArcProps as S };
|