@redsift/charts 6.2.0 → 6.3.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/index.d.ts +62 -42
- package/index.js +898 -72
- package/index.js.map +1 -1
- package/package.json +4 -3
package/index.d.ts
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import { PieArcDatum as PieArcDatum$1 } from 'd3-shape';
|
|
2
|
-
import {
|
|
2
|
+
import { ScaleOrdinal } from 'd3';
|
|
3
|
+
import { ValueOf as ValueOf$1, Comp } from '@redsift/design-system';
|
|
4
|
+
import { ComponentProps } from 'react';
|
|
3
5
|
import * as styled_components from 'styled-components';
|
|
4
6
|
|
|
7
|
+
/** Get types of the values of a record. */
|
|
8
|
+
declare type ValueOf<T extends Record<any, any>> = T[keyof T];
|
|
9
|
+
|
|
5
10
|
declare type ChartDimensions = {
|
|
6
11
|
width: number;
|
|
7
12
|
height: number;
|
|
@@ -15,8 +20,21 @@ declare type Datum = {
|
|
|
15
20
|
value: number;
|
|
16
21
|
};
|
|
17
22
|
declare type PieArcDatum = PieArcDatum$1<Datum>;
|
|
23
|
+
declare const ColorTheme: {
|
|
24
|
+
readonly default: "default";
|
|
25
|
+
readonly dark: "dark";
|
|
26
|
+
readonly darker: "darker";
|
|
27
|
+
readonly monochrome: "monochrome";
|
|
28
|
+
};
|
|
29
|
+
declare type ColorTheme = ValueOf<typeof ColorTheme>;
|
|
30
|
+
declare type SuccessDangerColorTheme = {
|
|
31
|
+
success: string;
|
|
32
|
+
warning: string;
|
|
33
|
+
danger: string;
|
|
34
|
+
neutral?: string;
|
|
35
|
+
};
|
|
18
36
|
|
|
19
|
-
declare const
|
|
37
|
+
declare const monochrome = "#B6DAEE";
|
|
20
38
|
declare const scheme: {
|
|
21
39
|
default: string[];
|
|
22
40
|
dark: string[];
|
|
@@ -24,29 +42,15 @@ declare const scheme: {
|
|
|
24
42
|
light: string[];
|
|
25
43
|
lighter: string[];
|
|
26
44
|
monochrome: string[];
|
|
45
|
+
empty: string[];
|
|
27
46
|
};
|
|
28
47
|
declare const successDangerScheme: {
|
|
29
48
|
success: string;
|
|
30
49
|
warning: string;
|
|
31
50
|
danger: string;
|
|
51
|
+
neutral: string;
|
|
32
52
|
};
|
|
33
|
-
|
|
34
|
-
/** Component Type. */
|
|
35
|
-
declare type Comp<P, T = HTMLElement> = {
|
|
36
|
-
(props: P & {
|
|
37
|
-
ref?: Ref<T>;
|
|
38
|
-
}): ReactElement | null;
|
|
39
|
-
/** React component type. */
|
|
40
|
-
readonly $$typeof: symbol;
|
|
41
|
-
/** Component default props. */
|
|
42
|
-
defaultProps?: Partial<P>;
|
|
43
|
-
/** Component name. */
|
|
44
|
-
displayName?: string;
|
|
45
|
-
/** Component base class name. */
|
|
46
|
-
className?: string;
|
|
47
|
-
};
|
|
48
|
-
/** Get types of the values of a record. */
|
|
49
|
-
declare type ValueOf<T extends Record<any, any>> = T[keyof T];
|
|
53
|
+
declare const getColorScale: (theme: ColorTheme | SuccessDangerColorTheme, isEmpty?: boolean) => ScaleOrdinal<string, string>;
|
|
50
54
|
|
|
51
55
|
/**
|
|
52
56
|
* Component size.
|
|
@@ -56,7 +60,7 @@ declare const PieChartSize: {
|
|
|
56
60
|
readonly medium: "medium";
|
|
57
61
|
readonly large: "large";
|
|
58
62
|
};
|
|
59
|
-
declare type PieChartSize = ValueOf<typeof PieChartSize>;
|
|
63
|
+
declare type PieChartSize = ValueOf$1<typeof PieChartSize>;
|
|
60
64
|
/**
|
|
61
65
|
* Component variant.
|
|
62
66
|
*/
|
|
@@ -66,7 +70,7 @@ declare const PieChartVariant: {
|
|
|
66
70
|
readonly donut: "donut";
|
|
67
71
|
readonly spacedDonut: "spacedDonut";
|
|
68
72
|
};
|
|
69
|
-
declare type PieChartVariant = ValueOf<typeof PieChartVariant>;
|
|
73
|
+
declare type PieChartVariant = ValueOf$1<typeof PieChartVariant>;
|
|
70
74
|
/**
|
|
71
75
|
* Component's labels variant.
|
|
72
76
|
*/
|
|
@@ -77,7 +81,7 @@ declare const PieChartLabelVariant: {
|
|
|
77
81
|
readonly externalLabelValue: "externalLabelValue";
|
|
78
82
|
readonly externalLabelPercent: "externalLabelPercent";
|
|
79
83
|
};
|
|
80
|
-
declare type PieChartLabelVariant = ValueOf<typeof PieChartLabelVariant>;
|
|
84
|
+
declare type PieChartLabelVariant = ValueOf$1<typeof PieChartLabelVariant>;
|
|
81
85
|
/**
|
|
82
86
|
* Component theme.
|
|
83
87
|
*/
|
|
@@ -87,12 +91,19 @@ declare const PieChartTheme: {
|
|
|
87
91
|
readonly darker: "darker";
|
|
88
92
|
readonly monochrome: "monochrome";
|
|
89
93
|
};
|
|
90
|
-
declare type PieChartTheme = ValueOf<typeof PieChartTheme>;
|
|
94
|
+
declare type PieChartTheme = ValueOf$1<typeof PieChartTheme>;
|
|
95
|
+
/**
|
|
96
|
+
* Tooltip label variant.
|
|
97
|
+
*/
|
|
98
|
+
declare const PieChartTooltipVariant: {
|
|
99
|
+
none: string;
|
|
100
|
+
label: string;
|
|
101
|
+
value: string;
|
|
102
|
+
percent: string;
|
|
103
|
+
};
|
|
104
|
+
declare type PieChartTooltipVariant = ValueOf$1<typeof PieChartTooltipVariant>;
|
|
91
105
|
interface LocaleText {
|
|
92
|
-
|
|
93
|
-
emptyChartSubtitle: string;
|
|
94
|
-
emptyChartResetLabel: string;
|
|
95
|
-
resetLabel: string;
|
|
106
|
+
emptyChartText: string;
|
|
96
107
|
}
|
|
97
108
|
/**
|
|
98
109
|
* Component props.
|
|
@@ -110,26 +121,24 @@ interface PieChartProps extends ComponentProps<'div'> {
|
|
|
110
121
|
localeText?: LocaleText;
|
|
111
122
|
/** Method to be called on a click on a slice. */
|
|
112
123
|
onSliceClick?: (data: Datum) => void;
|
|
113
|
-
/** Method to be called when hovering a slice. */
|
|
114
|
-
onSliceHover?: (data: Datum) => void;
|
|
115
124
|
/** 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. */
|
|
116
125
|
others?: boolean | string;
|
|
117
126
|
/** PieChart size. */
|
|
118
127
|
size?: PieChartSize;
|
|
119
|
-
/** Secondary text to be displayed in the middle of the chart,
|
|
128
|
+
/** 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. */
|
|
129
|
+
middleText?: string;
|
|
130
|
+
/** Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. */
|
|
120
131
|
subtext?: string;
|
|
121
|
-
/** Main text to be displayed in the middle of the chart.
|
|
132
|
+
/** Main text to be displayed in the middle of the chart. Recommended to be used with `donut` variants only. */
|
|
122
133
|
text?: string;
|
|
123
134
|
/** 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. */
|
|
124
|
-
theme?: PieChartTheme |
|
|
125
|
-
success: string;
|
|
126
|
-
warning: string;
|
|
127
|
-
danger: string;
|
|
128
|
-
};
|
|
135
|
+
theme?: PieChartTheme | SuccessDangerColorTheme;
|
|
129
136
|
/** Title. */
|
|
130
137
|
title?: string;
|
|
131
138
|
/** PieChart variant. */
|
|
132
139
|
variant?: PieChartVariant;
|
|
140
|
+
/** Tooltip variant. */
|
|
141
|
+
tooltipVariant?: PieChartTooltipVariant;
|
|
133
142
|
}
|
|
134
143
|
declare type StyledPieChartProps = Omit<PieChartProps, 'data'> & {};
|
|
135
144
|
interface PieChartArcProps extends ComponentProps<'g'> {
|
|
@@ -137,13 +146,16 @@ interface PieChartArcProps extends ComponentProps<'g'> {
|
|
|
137
146
|
data: Datum;
|
|
138
147
|
index: number;
|
|
139
148
|
onClick?: () => void;
|
|
140
|
-
onMouseOver?: () => void;
|
|
141
149
|
path: string;
|
|
142
150
|
spaced?: boolean;
|
|
151
|
+
showTooltip: boolean;
|
|
152
|
+
tooltipPercent: string | null;
|
|
153
|
+
tooltipLabelOnly: boolean;
|
|
154
|
+
isEmpty: boolean;
|
|
143
155
|
}
|
|
144
|
-
declare type StyledPieChartArcProps = Omit<PieChartArcProps, 'color' | 'data' | 'index' | 'path' | 'spaced'> & {
|
|
145
|
-
$hover: boolean;
|
|
156
|
+
declare type StyledPieChartArcProps = Omit<PieChartArcProps, 'color' | 'data' | 'index' | 'path' | 'spaced' | 'showTooltip' | 'tooltipPercent' | 'tooltipLabelOnly' | 'isEmpty'> & {
|
|
146
157
|
$spaced: boolean;
|
|
158
|
+
$clickable: boolean;
|
|
147
159
|
};
|
|
148
160
|
|
|
149
161
|
declare const PieChart: Comp<PieChartProps, HTMLDivElement>;
|
|
@@ -156,13 +168,21 @@ declare const StyledPieChartTitle: styled_components.StyledComponent<"div", any,
|
|
|
156
168
|
declare const StyledPieChartCaption: styled_components.StyledComponent<"p", any, Omit<PieChartProps, "data">, never>;
|
|
157
169
|
declare const StyledPieChartCenterText: styled_components.StyledComponent<"div", any, {
|
|
158
170
|
$maxWidth: number;
|
|
171
|
+
$textSize: number;
|
|
172
|
+
$smallTextSize: number;
|
|
173
|
+
}, never>;
|
|
174
|
+
declare const StyledPieChartEmptyText: styled_components.StyledComponent<"div", any, {
|
|
175
|
+
$maxWidth: number;
|
|
176
|
+
$textSize: number;
|
|
177
|
+
$isDonut: boolean;
|
|
159
178
|
}, never>;
|
|
160
179
|
declare const StyledPieChartLabel: styled_components.StyledComponent<"li", any, {
|
|
161
180
|
$color: string;
|
|
162
181
|
}, never>;
|
|
163
|
-
declare const StyledPieChartArc: styled_components.StyledComponent<"g", any, Omit<PieChartArcProps, "data" | "path" | "color" | "spaced" | "index"> & {
|
|
164
|
-
$hover: boolean;
|
|
182
|
+
declare const StyledPieChartArc: styled_components.StyledComponent<"g", any, Omit<PieChartArcProps, "data" | "path" | "color" | "spaced" | "index" | "showTooltip" | "tooltipPercent" | "tooltipLabelOnly" | "isEmpty"> & {
|
|
165
183
|
$spaced: boolean;
|
|
184
|
+
$clickable: boolean;
|
|
166
185
|
}, never>;
|
|
186
|
+
declare const Tooltip: styled_components.StyledComponent<"div", any, {}, never>;
|
|
167
187
|
|
|
168
|
-
export { ChartDimensions, Datum, PieArcDatum, PieChart, PieChartArcProps, PieChartLabelVariant, PieChartProps, PieChartSize, PieChartTheme, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartArcProps, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartLabel, StyledPieChartProps, StyledPieChartTitle,
|
|
188
|
+
export { ChartDimensions, ColorTheme, Datum, PieArcDatum, PieChart, PieChartArcProps, PieChartLabelVariant, PieChartProps, PieChartSize, PieChartTheme, PieChartTooltipVariant, PieChartVariant, StyledPieChart, StyledPieChartArc, StyledPieChartArcProps, StyledPieChartCaption, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartLabel, StyledPieChartProps, StyledPieChartTitle, SuccessDangerColorTheme, Tooltip, getColorScale, monochrome, scheme, successDangerScheme };
|