panelui-native 0.44.0 → 0.49.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 +6 -1
- package/lib/module/components/accordion/index.js +32 -4
- package/lib/module/components/accordion/index.js.map +1 -1
- package/lib/module/components/button/index.js +83 -15
- package/lib/module/components/button/index.js.map +1 -1
- package/lib/module/components/button-group/index.js +186 -0
- package/lib/module/components/button-group/index.js.map +1 -0
- package/lib/module/components/color-picker/index.js +110 -1
- package/lib/module/components/color-picker/index.js.map +1 -1
- package/lib/module/components/combobox/index.js +7 -1
- package/lib/module/components/combobox/index.js.map +1 -1
- package/lib/module/components/date-time-picker/index.js +272 -0
- package/lib/module/components/date-time-picker/index.js.map +1 -0
- package/lib/module/components/fab/index.js +514 -0
- package/lib/module/components/fab/index.js.map +1 -0
- package/lib/module/components/grid-item/index.js +486 -0
- package/lib/module/components/grid-item/index.js.map +1 -0
- package/lib/module/components/{kpi-chart → kpi}/index.js +62 -62
- package/lib/module/components/kpi/index.js.map +1 -0
- package/lib/module/components/line-chart/index.js +92 -10
- package/lib/module/components/line-chart/index.js.map +1 -1
- package/lib/module/components/markdown-editor/index.js +406 -0
- package/lib/module/components/markdown-editor/index.js.map +1 -0
- package/lib/module/components/markdown-editor/markdown-transforms.js +243 -0
- package/lib/module/components/markdown-editor/markdown-transforms.js.map +1 -0
- package/lib/module/components/pie-chart/index.js +625 -0
- package/lib/module/components/pie-chart/index.js.map +1 -0
- package/lib/module/components/questionnaire/index.js +1312 -0
- package/lib/module/components/questionnaire/index.js.map +1 -0
- package/lib/module/components/scatter-chart/index.js +1173 -0
- package/lib/module/components/scatter-chart/index.js.map +1 -0
- package/lib/module/components/tabs/index.js +359 -41
- package/lib/module/components/tabs/index.js.map +1 -1
- package/lib/module/components/time-picker/index.js +34 -6
- package/lib/module/components/time-picker/index.js.map +1 -1
- package/lib/module/components/tree/index.js +500 -0
- package/lib/module/components/tree/index.js.map +1 -0
- package/lib/module/icons/index.js +217 -0
- package/lib/module/icons/index.js.map +1 -1
- package/lib/module/index.js +11 -2
- package/lib/module/index.js.map +1 -1
- package/lib/module/utils/chart.js +81 -0
- package/lib/module/utils/chart.js.map +1 -1
- package/lib/typescript/src/components/accordion/index.d.ts +21 -0
- package/lib/typescript/src/components/accordion/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button/index.d.ts +21 -0
- package/lib/typescript/src/components/button/index.d.ts.map +1 -1
- package/lib/typescript/src/components/button-group/index.d.ts +212 -0
- package/lib/typescript/src/components/button-group/index.d.ts.map +1 -0
- package/lib/typescript/src/components/color-picker/index.d.ts +82 -1
- package/lib/typescript/src/components/color-picker/index.d.ts.map +1 -1
- package/lib/typescript/src/components/combobox/index.d.ts.map +1 -1
- package/lib/typescript/src/components/date-time-picker/index.d.ts +127 -0
- package/lib/typescript/src/components/date-time-picker/index.d.ts.map +1 -0
- package/lib/typescript/src/components/fab/index.d.ts +285 -0
- package/lib/typescript/src/components/fab/index.d.ts.map +1 -0
- package/lib/typescript/src/components/grid-item/index.d.ts +292 -0
- package/lib/typescript/src/components/grid-item/index.d.ts.map +1 -0
- package/lib/typescript/src/components/{kpi-chart → kpi}/index.d.ts +65 -65
- package/lib/typescript/src/components/kpi/index.d.ts.map +1 -0
- package/lib/typescript/src/components/line-chart/index.d.ts +25 -1
- package/lib/typescript/src/components/line-chart/index.d.ts.map +1 -1
- package/lib/typescript/src/components/markdown-editor/index.d.ts +102 -0
- package/lib/typescript/src/components/markdown-editor/index.d.ts.map +1 -0
- package/lib/typescript/src/components/markdown-editor/markdown-transforms.d.ts +76 -0
- package/lib/typescript/src/components/markdown-editor/markdown-transforms.d.ts.map +1 -0
- package/lib/typescript/src/components/pie-chart/index.d.ts +245 -0
- package/lib/typescript/src/components/pie-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/questionnaire/index.d.ts +336 -0
- package/lib/typescript/src/components/questionnaire/index.d.ts.map +1 -0
- package/lib/typescript/src/components/scatter-chart/index.d.ts +309 -0
- package/lib/typescript/src/components/scatter-chart/index.d.ts.map +1 -0
- package/lib/typescript/src/components/tabs/index.d.ts +29 -2
- package/lib/typescript/src/components/tabs/index.d.ts.map +1 -1
- package/lib/typescript/src/components/time-picker/index.d.ts +19 -1
- package/lib/typescript/src/components/time-picker/index.d.ts.map +1 -1
- package/lib/typescript/src/components/tree/index.d.ts +125 -0
- package/lib/typescript/src/components/tree/index.d.ts.map +1 -0
- package/lib/typescript/src/icons/index.d.ts +22 -0
- package/lib/typescript/src/icons/index.d.ts.map +1 -1
- package/lib/typescript/src/index.d.ts +14 -5
- package/lib/typescript/src/index.d.ts.map +1 -1
- package/lib/typescript/src/utils/chart.d.ts +34 -0
- package/lib/typescript/src/utils/chart.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion/index.tsx +48 -6
- package/src/components/button/index.tsx +97 -15
- package/src/components/button-group/index.tsx +199 -0
- package/src/components/color-picker/index.tsx +140 -3
- package/src/components/combobox/index.tsx +7 -1
- package/src/components/date-time-picker/index.tsx +411 -0
- package/src/components/fab/index.tsx +583 -0
- package/src/components/grid-item/index.tsx +515 -0
- package/src/components/{kpi-chart → kpi}/index.tsx +85 -85
- package/src/components/line-chart/index.tsx +98 -8
- package/src/components/markdown-editor/index.tsx +526 -0
- package/src/components/markdown-editor/markdown-transforms.ts +228 -0
- package/src/components/pie-chart/index.tsx +863 -0
- package/src/components/questionnaire/index.tsx +1615 -0
- package/src/components/scatter-chart/index.tsx +1401 -0
- package/src/components/tabs/index.tsx +392 -50
- package/src/components/time-picker/index.tsx +42 -6
- package/src/components/tree/index.tsx +564 -0
- package/src/icons/index.tsx +154 -0
- package/src/index.ts +142 -18
- package/src/utils/chart.ts +110 -0
- package/lib/module/components/kpi-chart/index.js.map +0 -1
- package/lib/typescript/src/components/kpi-chart/index.d.ts.map +0 -1
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* GridItem — a tile in a bento grid, and the grid that lays it out.
|
|
3
|
+
*
|
|
4
|
+
* ```tsx
|
|
5
|
+
* <GridItem.Group columns={2} gap={12}>
|
|
6
|
+
* <GridItem colSpan={2}>
|
|
7
|
+
* <GridItem.Media variant="icon"><ZapIcon /></GridItem.Media>
|
|
8
|
+
* <GridItem.Title>Deploys</GridItem.Title>
|
|
9
|
+
* <GridItem.Value>1,284</GridItem.Value>
|
|
10
|
+
* <GridItem.Description>this week</GridItem.Description>
|
|
11
|
+
* </GridItem>
|
|
12
|
+
* <GridItem rowSpan={2}>…</GridItem>
|
|
13
|
+
* <GridItem>…</GridItem>
|
|
14
|
+
* </GridItem.Group>
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* ## Why the group places the tiles
|
|
18
|
+
*
|
|
19
|
+
* `Item` next door is a row, and a list of rows is a column of views — the
|
|
20
|
+
* layout falls out of the flexbox and nothing has to be measured. A bento is
|
|
21
|
+
* not that. Its whole idea is that tiles are different sizes and the grid still
|
|
22
|
+
* lines up: a wide tile and the two square ones beside it share a left edge, a
|
|
23
|
+
* tall one runs past the tile next to it and the next tile fills in underneath.
|
|
24
|
+
*
|
|
25
|
+
* A wrapping flex row cannot do the last of those. Wrapping puts everything
|
|
26
|
+
* that did not fit on a *new line*, so nothing ever tucks under a tall tile,
|
|
27
|
+
* and `rowSpan` in a wrapping row is a prop that quietly does nothing.
|
|
28
|
+
*
|
|
29
|
+
* So the group measures itself, walks its children into the first free cell
|
|
30
|
+
* that fits each one — row by row, the way a grid places anything it is not
|
|
31
|
+
* told where to put — and positions them absolutely. Every tile is a whole
|
|
32
|
+
* number of cells, which is what makes the edges line up, and the group's own
|
|
33
|
+
* height is the number of rows it ended up needing.
|
|
34
|
+
*
|
|
35
|
+
* The consequence worth knowing: **a tile's height is its cells, not its
|
|
36
|
+
* content**. That is the right way round for a bento — a grid of boxes that
|
|
37
|
+
* each grew to fit its own text is not a grid — but it does mean long text
|
|
38
|
+
* needs `numberOfLines`, a smaller `size`, or a taller `rowSpan`.
|
|
39
|
+
*
|
|
40
|
+
* ## Nesting
|
|
41
|
+
*
|
|
42
|
+
* A group inside a tile is a group like any other, and it measures the cell it
|
|
43
|
+
* was put in. That is how a bento gets a sub-rhythm — two small tiles stacked
|
|
44
|
+
* inside one cell of the outer grid — without the outer grid needing a notion
|
|
45
|
+
* of half a row.
|
|
46
|
+
*/
|
|
47
|
+
import { type ReactNode } from 'react';
|
|
48
|
+
import { View, type ViewProps } from 'react-native';
|
|
49
|
+
import { type VariantProps } from 'tailwind-variants';
|
|
50
|
+
import { type AnimatedPressableProps } from '../../primitives/animated-pressable.js';
|
|
51
|
+
import { type TextProps } from '../../primitives/text.js';
|
|
52
|
+
type GridItemSize = 'default' | 'sm';
|
|
53
|
+
declare const gridItemVariants: import("tailwind-variants").TVReturnType<{
|
|
54
|
+
variant: {
|
|
55
|
+
/** A card in a tray — the tile that reads as a tile. */
|
|
56
|
+
default: {
|
|
57
|
+
root: string;
|
|
58
|
+
};
|
|
59
|
+
/** Outline only, for a grid over a coloured or patterned page. */
|
|
60
|
+
outline: {
|
|
61
|
+
root: string;
|
|
62
|
+
};
|
|
63
|
+
/** Filled and unbordered, for a quieter tile among louder ones. */
|
|
64
|
+
muted: {
|
|
65
|
+
root: string;
|
|
66
|
+
};
|
|
67
|
+
/** Nothing at all: the tile is whatever is put inside it. */
|
|
68
|
+
plain: {
|
|
69
|
+
root: string;
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
size: {
|
|
73
|
+
default: {
|
|
74
|
+
root: string;
|
|
75
|
+
title: string;
|
|
76
|
+
value: string;
|
|
77
|
+
description: string;
|
|
78
|
+
};
|
|
79
|
+
sm: {
|
|
80
|
+
root: string;
|
|
81
|
+
title: string;
|
|
82
|
+
value: string;
|
|
83
|
+
description: string;
|
|
84
|
+
};
|
|
85
|
+
};
|
|
86
|
+
disabled: {
|
|
87
|
+
true: {
|
|
88
|
+
root: string;
|
|
89
|
+
};
|
|
90
|
+
};
|
|
91
|
+
}, {
|
|
92
|
+
root: string;
|
|
93
|
+
title: string;
|
|
94
|
+
value: string;
|
|
95
|
+
description: string;
|
|
96
|
+
}, undefined, {
|
|
97
|
+
variant: {
|
|
98
|
+
/** A card in a tray — the tile that reads as a tile. */
|
|
99
|
+
default: {
|
|
100
|
+
root: string;
|
|
101
|
+
};
|
|
102
|
+
/** Outline only, for a grid over a coloured or patterned page. */
|
|
103
|
+
outline: {
|
|
104
|
+
root: string;
|
|
105
|
+
};
|
|
106
|
+
/** Filled and unbordered, for a quieter tile among louder ones. */
|
|
107
|
+
muted: {
|
|
108
|
+
root: string;
|
|
109
|
+
};
|
|
110
|
+
/** Nothing at all: the tile is whatever is put inside it. */
|
|
111
|
+
plain: {
|
|
112
|
+
root: string;
|
|
113
|
+
};
|
|
114
|
+
};
|
|
115
|
+
size: {
|
|
116
|
+
default: {
|
|
117
|
+
root: string;
|
|
118
|
+
title: string;
|
|
119
|
+
value: string;
|
|
120
|
+
description: string;
|
|
121
|
+
};
|
|
122
|
+
sm: {
|
|
123
|
+
root: string;
|
|
124
|
+
title: string;
|
|
125
|
+
value: string;
|
|
126
|
+
description: string;
|
|
127
|
+
};
|
|
128
|
+
};
|
|
129
|
+
disabled: {
|
|
130
|
+
true: {
|
|
131
|
+
root: string;
|
|
132
|
+
};
|
|
133
|
+
};
|
|
134
|
+
}, {
|
|
135
|
+
root: string;
|
|
136
|
+
title: string;
|
|
137
|
+
value: string;
|
|
138
|
+
description: string;
|
|
139
|
+
}, import("tailwind-variants").TVReturnType<{
|
|
140
|
+
variant: {
|
|
141
|
+
/** A card in a tray — the tile that reads as a tile. */
|
|
142
|
+
default: {
|
|
143
|
+
root: string;
|
|
144
|
+
};
|
|
145
|
+
/** Outline only, for a grid over a coloured or patterned page. */
|
|
146
|
+
outline: {
|
|
147
|
+
root: string;
|
|
148
|
+
};
|
|
149
|
+
/** Filled and unbordered, for a quieter tile among louder ones. */
|
|
150
|
+
muted: {
|
|
151
|
+
root: string;
|
|
152
|
+
};
|
|
153
|
+
/** Nothing at all: the tile is whatever is put inside it. */
|
|
154
|
+
plain: {
|
|
155
|
+
root: string;
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
size: {
|
|
159
|
+
default: {
|
|
160
|
+
root: string;
|
|
161
|
+
title: string;
|
|
162
|
+
value: string;
|
|
163
|
+
description: string;
|
|
164
|
+
};
|
|
165
|
+
sm: {
|
|
166
|
+
root: string;
|
|
167
|
+
title: string;
|
|
168
|
+
value: string;
|
|
169
|
+
description: string;
|
|
170
|
+
};
|
|
171
|
+
};
|
|
172
|
+
disabled: {
|
|
173
|
+
true: {
|
|
174
|
+
root: string;
|
|
175
|
+
};
|
|
176
|
+
};
|
|
177
|
+
}, {
|
|
178
|
+
root: string;
|
|
179
|
+
title: string;
|
|
180
|
+
value: string;
|
|
181
|
+
description: string;
|
|
182
|
+
}, undefined, unknown, unknown, undefined>>;
|
|
183
|
+
declare const mediaVariants: import("tailwind-variants").TVReturnType<{
|
|
184
|
+
variant: {
|
|
185
|
+
/** No box — for an Avatar or anything that styles itself. */
|
|
186
|
+
default: string;
|
|
187
|
+
/** Rounded square tile sized for an icon. */
|
|
188
|
+
icon: string;
|
|
189
|
+
/** Clipped frame for an image or thumbnail. */
|
|
190
|
+
image: string;
|
|
191
|
+
};
|
|
192
|
+
size: {
|
|
193
|
+
default: string;
|
|
194
|
+
sm: string;
|
|
195
|
+
};
|
|
196
|
+
}, undefined, "shrink-0 items-center justify-center", {
|
|
197
|
+
variant: {
|
|
198
|
+
/** No box — for an Avatar or anything that styles itself. */
|
|
199
|
+
default: string;
|
|
200
|
+
/** Rounded square tile sized for an icon. */
|
|
201
|
+
icon: string;
|
|
202
|
+
/** Clipped frame for an image or thumbnail. */
|
|
203
|
+
image: string;
|
|
204
|
+
};
|
|
205
|
+
size: {
|
|
206
|
+
default: string;
|
|
207
|
+
sm: string;
|
|
208
|
+
};
|
|
209
|
+
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
210
|
+
variant: {
|
|
211
|
+
/** No box — for an Avatar or anything that styles itself. */
|
|
212
|
+
default: string;
|
|
213
|
+
/** Rounded square tile sized for an icon. */
|
|
214
|
+
icon: string;
|
|
215
|
+
/** Clipped frame for an image or thumbnail. */
|
|
216
|
+
image: string;
|
|
217
|
+
};
|
|
218
|
+
size: {
|
|
219
|
+
default: string;
|
|
220
|
+
sm: string;
|
|
221
|
+
};
|
|
222
|
+
}, undefined, "shrink-0 items-center justify-center", unknown, unknown, undefined>>;
|
|
223
|
+
export interface GridItemGroupProps extends ViewProps {
|
|
224
|
+
className?: string;
|
|
225
|
+
/** How many tracks wide the grid is. */
|
|
226
|
+
columns?: number;
|
|
227
|
+
/** Gutter between tiles, in points — both ways. */
|
|
228
|
+
gap?: number;
|
|
229
|
+
/**
|
|
230
|
+
* The shape of one cell, as width ÷ height. `1` is square; below one the
|
|
231
|
+
* cells are taller than they are wide. Ignored when `rowHeight` is given.
|
|
232
|
+
*/
|
|
233
|
+
aspect?: number;
|
|
234
|
+
/** Cell height in points, when the grid should not be driven by its width. */
|
|
235
|
+
rowHeight?: number;
|
|
236
|
+
/** Density for every tile in the grid. Set here rather than on each one. */
|
|
237
|
+
size?: GridItemSize;
|
|
238
|
+
children?: ReactNode;
|
|
239
|
+
}
|
|
240
|
+
export interface GridItemProps extends Omit<AnimatedPressableProps, 'children' | 'disabled'>, Omit<VariantProps<typeof gridItemVariants>, 'disabled' | 'size'> {
|
|
241
|
+
className?: string;
|
|
242
|
+
disabled?: boolean;
|
|
243
|
+
/**
|
|
244
|
+
* How many tracks wide the tile is. Clamped to the group's column count, so
|
|
245
|
+
* a tile asking for three columns of a two-column grid is two wide rather
|
|
246
|
+
* than overflowing it.
|
|
247
|
+
*
|
|
248
|
+
* Read by `GridItem.Group`, which does the placing — a tile does not size
|
|
249
|
+
* itself, because a tile that sized itself would not be in a grid.
|
|
250
|
+
*/
|
|
251
|
+
colSpan?: number;
|
|
252
|
+
/** How many rows tall it is. Also read by the group. */
|
|
253
|
+
rowSpan?: number;
|
|
254
|
+
children?: ReactNode;
|
|
255
|
+
}
|
|
256
|
+
export interface GridItemBackgroundProps extends ViewProps {
|
|
257
|
+
className?: string;
|
|
258
|
+
children?: ReactNode;
|
|
259
|
+
}
|
|
260
|
+
export interface GridItemMediaProps extends ViewProps, VariantProps<typeof mediaVariants> {
|
|
261
|
+
className?: string;
|
|
262
|
+
children?: ReactNode;
|
|
263
|
+
}
|
|
264
|
+
export interface GridItemTitleProps extends TextProps {
|
|
265
|
+
className?: string;
|
|
266
|
+
}
|
|
267
|
+
export interface GridItemValueProps extends TextProps {
|
|
268
|
+
className?: string;
|
|
269
|
+
}
|
|
270
|
+
export interface GridItemDescriptionProps extends TextProps {
|
|
271
|
+
className?: string;
|
|
272
|
+
}
|
|
273
|
+
export interface GridItemFooterProps extends ViewProps {
|
|
274
|
+
className?: string;
|
|
275
|
+
children?: ReactNode;
|
|
276
|
+
}
|
|
277
|
+
export interface GridItemActionsProps extends ViewProps {
|
|
278
|
+
className?: string;
|
|
279
|
+
children?: ReactNode;
|
|
280
|
+
}
|
|
281
|
+
export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<View>> & {
|
|
282
|
+
Group: import("react").ForwardRefExoticComponent<GridItemGroupProps & import("react").RefAttributes<View>>;
|
|
283
|
+
Background: import("react").ForwardRefExoticComponent<GridItemBackgroundProps & import("react").RefAttributes<View>>;
|
|
284
|
+
Media: import("react").ForwardRefExoticComponent<GridItemMediaProps & import("react").RefAttributes<View>>;
|
|
285
|
+
Title: import("react").ForwardRefExoticComponent<GridItemTitleProps & import("react").RefAttributes<import("react-native").Text>>;
|
|
286
|
+
Value: import("react").ForwardRefExoticComponent<GridItemValueProps & import("react").RefAttributes<import("react-native").Text>>;
|
|
287
|
+
Description: import("react").ForwardRefExoticComponent<GridItemDescriptionProps & import("react").RefAttributes<import("react-native").Text>>;
|
|
288
|
+
Footer: import("react").ForwardRefExoticComponent<GridItemFooterProps & import("react").RefAttributes<View>>;
|
|
289
|
+
Actions: import("react").ForwardRefExoticComponent<GridItemActionsProps & import("react").RefAttributes<View>>;
|
|
290
|
+
};
|
|
291
|
+
export {};
|
|
292
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/grid-item/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* Kpi — one number, and what it is doing.
|
|
3
3
|
*
|
|
4
4
|
* A metric card is not a chart with a caption. The number is the message and
|
|
5
5
|
* the chart is the footnote, so the parts here are sized and ordered around
|
|
@@ -8,16 +8,16 @@
|
|
|
8
8
|
* because nobody is reading values off it.
|
|
9
9
|
*
|
|
10
10
|
* ```tsx
|
|
11
|
-
* <
|
|
12
|
-
* <
|
|
13
|
-
* <
|
|
14
|
-
* </
|
|
15
|
-
* <
|
|
16
|
-
* <
|
|
17
|
-
* <
|
|
18
|
-
* </
|
|
19
|
-
* <
|
|
20
|
-
* </
|
|
11
|
+
* <Kpi>
|
|
12
|
+
* <Kpi.Header>
|
|
13
|
+
* <Kpi.Title>Active users</Kpi.Title>
|
|
14
|
+
* </Kpi.Header>
|
|
15
|
+
* <Kpi.Content>
|
|
16
|
+
* <Kpi.Value>12,480</Kpi.Value>
|
|
17
|
+
* <Kpi.Trend value={12.4} />
|
|
18
|
+
* </Kpi.Content>
|
|
19
|
+
* <Kpi.Chart data={week} dataKey="v" />
|
|
20
|
+
* </Kpi>
|
|
21
21
|
* ```
|
|
22
22
|
*
|
|
23
23
|
* The trend is given a number rather than a written string, so the component
|
|
@@ -244,7 +244,7 @@ type KpiVariantProps = VariantProps<typeof kpiVariants>;
|
|
|
244
244
|
export type KpiTone = NonNullable<KpiVariantProps['tone']>;
|
|
245
245
|
/** Which direction of movement is the good news for this metric. */
|
|
246
246
|
export type KpiGoodDirection = 'up' | 'down' | 'none';
|
|
247
|
-
export interface
|
|
247
|
+
export interface KpiProps extends Omit<ViewProps, 'children'> {
|
|
248
248
|
className?: string;
|
|
249
249
|
/**
|
|
250
250
|
* Which `--color-chart-*` token the sparkline and the icon take. Set on the
|
|
@@ -262,16 +262,16 @@ export interface KpiChartProps extends Omit<ViewProps, 'children'> {
|
|
|
262
262
|
surface?: boolean;
|
|
263
263
|
children: ReactNode;
|
|
264
264
|
}
|
|
265
|
-
export interface
|
|
265
|
+
export interface KpiHeaderProps extends ViewProps {
|
|
266
266
|
className?: string;
|
|
267
267
|
children: ReactNode;
|
|
268
268
|
}
|
|
269
269
|
/** The top row: an icon, the metric's name, and anything acting on it. */
|
|
270
|
-
declare function
|
|
271
|
-
declare namespace
|
|
270
|
+
declare function KpiHeader({ className, children, ...props }: KpiHeaderProps): import("react").JSX.Element;
|
|
271
|
+
declare namespace KpiHeader {
|
|
272
272
|
var displayName: string;
|
|
273
273
|
}
|
|
274
|
-
export interface
|
|
274
|
+
export interface KpiIconProps extends ViewProps {
|
|
275
275
|
className?: string;
|
|
276
276
|
/** Overrides the tint the card's `colorIndex` would give it. */
|
|
277
277
|
tone?: KpiTone;
|
|
@@ -284,20 +284,20 @@ export interface KpiChartIconProps extends ViewProps {
|
|
|
284
284
|
* from whatever set the app already uses — and an icon from outside this
|
|
285
285
|
* library will not read an ambient colour, so pass it one.
|
|
286
286
|
*/
|
|
287
|
-
declare function
|
|
288
|
-
declare namespace
|
|
287
|
+
declare function KpiIcon({ className, tone, children, ...props }: KpiIconProps): import("react").JSX.Element;
|
|
288
|
+
declare namespace KpiIcon {
|
|
289
289
|
var displayName: string;
|
|
290
290
|
}
|
|
291
|
-
export interface
|
|
291
|
+
export interface KpiTitleProps {
|
|
292
292
|
className?: string;
|
|
293
293
|
children: ReactNode;
|
|
294
294
|
}
|
|
295
295
|
/** The metric's name. Quiet on purpose — the value is the thing being read. */
|
|
296
|
-
declare function
|
|
297
|
-
declare namespace
|
|
296
|
+
declare function KpiTitle({ className, children }: KpiTitleProps): import("react").JSX.Element;
|
|
297
|
+
declare namespace KpiTitle {
|
|
298
298
|
var displayName: string;
|
|
299
299
|
}
|
|
300
|
-
export interface
|
|
300
|
+
export interface KpiStatProps extends ViewProps {
|
|
301
301
|
className?: string;
|
|
302
302
|
children: ReactNode;
|
|
303
303
|
}
|
|
@@ -310,31 +310,31 @@ export interface KpiChartStatProps extends ViewProps {
|
|
|
310
310
|
* between facts. It also takes the width in an `inline` row, leaving the chart
|
|
311
311
|
* its column on the end.
|
|
312
312
|
*/
|
|
313
|
-
declare function
|
|
314
|
-
declare namespace
|
|
313
|
+
declare function KpiStat({ className, children, ...props }: KpiStatProps): import("react").JSX.Element;
|
|
314
|
+
declare namespace KpiStat {
|
|
315
315
|
var displayName: string;
|
|
316
316
|
}
|
|
317
|
-
export interface
|
|
317
|
+
export interface KpiActionsProps extends ViewProps {
|
|
318
318
|
className?: string;
|
|
319
319
|
children: ReactNode;
|
|
320
320
|
}
|
|
321
321
|
/** The trailing end of the header — a menu trigger, a filter, a link. */
|
|
322
|
-
declare function
|
|
323
|
-
declare namespace
|
|
322
|
+
declare function KpiActions({ className, children, ...props }: KpiActionsProps): import("react").JSX.Element;
|
|
323
|
+
declare namespace KpiActions {
|
|
324
324
|
var displayName: string;
|
|
325
325
|
}
|
|
326
|
-
export interface
|
|
326
|
+
export interface KpiContentProps extends ViewProps {
|
|
327
327
|
className?: string;
|
|
328
328
|
/** `inline` puts the chart beside the value instead of under everything. */
|
|
329
329
|
layout?: NonNullable<KpiVariantProps['layout']>;
|
|
330
330
|
children: ReactNode;
|
|
331
331
|
}
|
|
332
332
|
/** The row the value and the trend share. */
|
|
333
|
-
declare function
|
|
334
|
-
declare namespace
|
|
333
|
+
declare function KpiContent({ className, layout, children, ...props }: KpiContentProps): import("react").JSX.Element;
|
|
334
|
+
declare namespace KpiContent {
|
|
335
335
|
var displayName: string;
|
|
336
336
|
}
|
|
337
|
-
export interface
|
|
337
|
+
export interface KpiValueProps {
|
|
338
338
|
className?: string;
|
|
339
339
|
children: ReactNode;
|
|
340
340
|
}
|
|
@@ -345,11 +345,11 @@ export interface KpiChartValueProps {
|
|
|
345
345
|
* and units are locale decisions, and a component that guessed them would be
|
|
346
346
|
* wrong in a way that is hard to notice and impossible to override.
|
|
347
347
|
*/
|
|
348
|
-
declare function
|
|
349
|
-
declare namespace
|
|
348
|
+
declare function KpiValue({ className, children }: KpiValueProps): import("react").JSX.Element;
|
|
349
|
+
declare namespace KpiValue {
|
|
350
350
|
var displayName: string;
|
|
351
351
|
}
|
|
352
|
-
export interface
|
|
352
|
+
export interface KpiTrendProps extends Omit<ViewProps, 'children'> {
|
|
353
353
|
className?: string;
|
|
354
354
|
/**
|
|
355
355
|
* How much it moved, as a percentage. The sign carries the direction, so
|
|
@@ -386,11 +386,11 @@ export interface KpiChartTrendProps extends Omit<ViewProps, 'children'> {
|
|
|
386
386
|
* label has to remember to change the colour when the metric changes, and
|
|
387
387
|
* nobody does.
|
|
388
388
|
*/
|
|
389
|
-
declare function
|
|
390
|
-
declare namespace
|
|
389
|
+
declare function KpiTrend({ className, value, format, goodDirection, variant, caption, threshold, children, ...props }: KpiTrendProps): import("react").JSX.Element;
|
|
390
|
+
declare namespace KpiTrend {
|
|
391
391
|
var displayName: string;
|
|
392
392
|
}
|
|
393
|
-
export interface
|
|
393
|
+
export interface KpiSparklineProps {
|
|
394
394
|
className?: string;
|
|
395
395
|
/** The rows. One point each, in order. */
|
|
396
396
|
data: LineChartDatum[];
|
|
@@ -421,11 +421,11 @@ export interface KpiChartSparklineProps {
|
|
|
421
421
|
* every point of padding is a point the shape is not using. Nobody reads a
|
|
422
422
|
* value off one of these; they read whether it is going up.
|
|
423
423
|
*/
|
|
424
|
-
declare function
|
|
425
|
-
declare namespace
|
|
424
|
+
declare function KpiSparkline({ className, data, dataKey, colorIndex, filled, height, inline, strokeWidth, }: KpiSparklineProps): import("react").JSX.Element;
|
|
425
|
+
declare namespace KpiSparkline {
|
|
426
426
|
var displayName: string;
|
|
427
427
|
}
|
|
428
|
-
export interface
|
|
428
|
+
export interface KpiProgressProps {
|
|
429
429
|
className?: string;
|
|
430
430
|
/** Where it has got to. */
|
|
431
431
|
value: number;
|
|
@@ -437,32 +437,32 @@ export interface KpiChartProgressProps {
|
|
|
437
437
|
showValueLabel?: boolean;
|
|
438
438
|
}
|
|
439
439
|
/** Progress towards a target, for a metric that has one. */
|
|
440
|
-
declare function
|
|
441
|
-
declare namespace
|
|
440
|
+
declare function KpiProgressBar({ className, value, maxValue, label, showValueLabel, }: KpiProgressProps): import("react").JSX.Element;
|
|
441
|
+
declare namespace KpiProgressBar {
|
|
442
442
|
var displayName: string;
|
|
443
443
|
}
|
|
444
|
-
export interface
|
|
444
|
+
export interface KpiFooterProps extends ViewProps {
|
|
445
445
|
className?: string;
|
|
446
446
|
children: ReactNode;
|
|
447
447
|
}
|
|
448
448
|
/** The bottom strip — a comparison period, a caveat, a link. */
|
|
449
|
-
declare function
|
|
450
|
-
declare namespace
|
|
449
|
+
declare function KpiFooter({ className, children, ...props }: KpiFooterProps): import("react").JSX.Element;
|
|
450
|
+
declare namespace KpiFooter {
|
|
451
451
|
var displayName: string;
|
|
452
452
|
}
|
|
453
|
-
export interface
|
|
453
|
+
export interface KpiSeparatorProps extends ViewProps {
|
|
454
454
|
className?: string;
|
|
455
455
|
}
|
|
456
456
|
/** A hairline across the card. */
|
|
457
|
-
declare function
|
|
458
|
-
declare namespace
|
|
457
|
+
declare function KpiSeparator({ className, ...props }: KpiSeparatorProps): import("react").JSX.Element;
|
|
458
|
+
declare namespace KpiSeparator {
|
|
459
459
|
var displayName: string;
|
|
460
460
|
}
|
|
461
|
-
export type
|
|
462
|
-
export interface
|
|
461
|
+
export type KpiGroupOrientation = 'horizontal' | 'vertical';
|
|
462
|
+
export interface KpiGroupProps extends ViewProps {
|
|
463
463
|
className?: string;
|
|
464
464
|
/** `horizontal` splits the row between the cards; `vertical` stacks them. */
|
|
465
|
-
orientation?:
|
|
465
|
+
orientation?: KpiGroupOrientation;
|
|
466
466
|
/**
|
|
467
467
|
* Draw a hairline between the cards rather than spacing them apart. Several
|
|
468
468
|
* metrics separated by a rule read as one panel; several spaced apart read
|
|
@@ -471,20 +471,20 @@ export interface KpiChartGroupProps extends ViewProps {
|
|
|
471
471
|
separated?: boolean;
|
|
472
472
|
children: ReactNode;
|
|
473
473
|
}
|
|
474
|
-
export declare const
|
|
475
|
-
Header: typeof
|
|
476
|
-
Icon: typeof
|
|
477
|
-
Title: typeof
|
|
478
|
-
Stat: typeof
|
|
479
|
-
Actions: typeof
|
|
480
|
-
Content: typeof
|
|
481
|
-
Value: typeof
|
|
482
|
-
Trend: typeof
|
|
483
|
-
Chart: typeof
|
|
484
|
-
Progress: typeof
|
|
485
|
-
Footer: typeof
|
|
486
|
-
Separator: typeof
|
|
487
|
-
Group: import("react").ForwardRefExoticComponent<
|
|
474
|
+
export declare const Kpi: import("react").ForwardRefExoticComponent<KpiProps & import("react").RefAttributes<View>> & {
|
|
475
|
+
Header: typeof KpiHeader;
|
|
476
|
+
Icon: typeof KpiIcon;
|
|
477
|
+
Title: typeof KpiTitle;
|
|
478
|
+
Stat: typeof KpiStat;
|
|
479
|
+
Actions: typeof KpiActions;
|
|
480
|
+
Content: typeof KpiContent;
|
|
481
|
+
Value: typeof KpiValue;
|
|
482
|
+
Trend: typeof KpiTrend;
|
|
483
|
+
Chart: typeof KpiSparkline;
|
|
484
|
+
Progress: typeof KpiProgressBar;
|
|
485
|
+
Footer: typeof KpiFooter;
|
|
486
|
+
Separator: typeof KpiSeparator;
|
|
487
|
+
Group: import("react").ForwardRefExoticComponent<KpiGroupProps & import("react").RefAttributes<View>>;
|
|
488
488
|
};
|
|
489
489
|
export {};
|
|
490
490
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/kpi/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -191,6 +191,30 @@ declare namespace LineChartXAxis {
|
|
|
191
191
|
var displayName: string;
|
|
192
192
|
var layer: Layer;
|
|
193
193
|
}
|
|
194
|
+
export interface LineChartYAxisProps {
|
|
195
|
+
/** How many intervals to divide the axis into. Yields `ticks + 1` labels. */
|
|
196
|
+
ticks?: number;
|
|
197
|
+
/** Turn a value into its label. Defaults to a compact number. */
|
|
198
|
+
format?: (value: number) => string;
|
|
199
|
+
className?: string;
|
|
200
|
+
}
|
|
201
|
+
/**
|
|
202
|
+
* Value labels down the side, one per grid line.
|
|
203
|
+
*
|
|
204
|
+
* Give it the same `ticks` as the grid, or the numbers name lines that are not
|
|
205
|
+
* there. Four is the default on both for that reason.
|
|
206
|
+
*
|
|
207
|
+
* The labels are the domain the data settles at, not the tweening one — a
|
|
208
|
+
* number that counts up through every intermediate value while the axis
|
|
209
|
+
* animates is noise, and the axis is the part of the chart that is supposed to
|
|
210
|
+
* hold still enough to read.
|
|
211
|
+
*/
|
|
212
|
+
declare function LineChartYAxis({ ticks, format, className }: LineChartYAxisProps): import("react").JSX.Element;
|
|
213
|
+
declare namespace LineChartYAxis {
|
|
214
|
+
var displayName: string;
|
|
215
|
+
var layer: Layer;
|
|
216
|
+
var axis: "y";
|
|
217
|
+
}
|
|
194
218
|
export interface LineChartTooltipProps {
|
|
195
219
|
color?: string;
|
|
196
220
|
/**
|
|
@@ -272,7 +296,6 @@ declare namespace LineChartHeader {
|
|
|
272
296
|
var displayName: string;
|
|
273
297
|
var layer: Layer;
|
|
274
298
|
}
|
|
275
|
-
/** Only reached if the theme CSS was never imported. */
|
|
276
299
|
export declare const LineChart: import("react").ForwardRefExoticComponent<LineChartProps & import("react").RefAttributes<LineChartHandle>> & {
|
|
277
300
|
Header: typeof LineChartHeader;
|
|
278
301
|
Grid: typeof LineChartGrid;
|
|
@@ -280,6 +303,7 @@ export declare const LineChart: import("react").ForwardRefExoticComponent<LineCh
|
|
|
280
303
|
Line: typeof LineChartLine;
|
|
281
304
|
Skeleton: typeof LineChartSkeleton;
|
|
282
305
|
XAxis: typeof LineChartXAxis;
|
|
306
|
+
YAxis: typeof LineChartYAxis;
|
|
283
307
|
Tooltip: typeof LineChartTooltip;
|
|
284
308
|
Legend: typeof LineChartLegend;
|
|
285
309
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/line-chart/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAA4C,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/line-chart/index.tsx"],"names":[],"mappings":"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"}
|