@leavepulse/ui 0.24.0 → 0.25.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/dist/assets/LpNumberFlow-rZkwQwlU.css +116 -0
- package/dist/assets/LpRollingText-CR1mb0Vt.css +74 -0
- package/dist/assets/LpSparkline-0mKTq7pb.css +51 -0
- package/dist/assets/LpTooltip-B61SYd4K.css +17 -0
- package/dist/assets/LpUptimeBar-B98o9krI.css +18 -0
- package/dist/chunks/{LpAppShell-CaQYQKZV.js → LpAppShell-B5k0J3Cf.js} +1 -1
- package/dist/chunks/LpChart-tNXs1ttr.js +671 -0
- package/dist/chunks/{LpCodeBlock-CSiOSPs8.js → LpCodeBlock-rS_6mO3D.js} +1 -1
- package/dist/chunks/{LpConfirmDialog-CObRah9c.js → LpConfirmDialog-CjOGcj1e.js} +32 -4
- package/dist/chunks/{LpDisclosure-DP6yfgfM.js → LpDisclosure-BnwP4Q-b.js} +1 -1
- package/dist/chunks/{LpFileTree-nU1wRRxZ.js → LpFileTree-BaV7f0O7.js} +1 -1
- package/dist/chunks/{LpFileTreeNode-D7WgUPcJ.js → LpFileTreeNode-BzpBa7R7.js} +6 -8
- package/dist/chunks/{LpLogViewer-B1aLUVdz.js → LpLogViewer-CcQ3s3Fp.js} +2 -1
- package/dist/chunks/{LpMapPicker-DFKrd1Ne.js → LpMapPicker-CXvoTrAe.js} +2 -4
- package/dist/chunks/{LpNotificationBell-X1M30e0X.js → LpNotificationBell-Dvu-b6Vn.js} +56 -27
- package/dist/chunks/LpNumberFlow-amWYaeuA.js +221 -0
- package/dist/chunks/LpPie-BkjWlfSw.js +525 -0
- package/dist/chunks/LpProgress-DoIP4jQR.js +198 -0
- package/dist/chunks/LpRollingText-CM5gkSeF.js +50 -0
- package/dist/chunks/{LpSidebar-D3GGLSE7.js → LpSidebar-7Vpy2IJc.js} +1 -1
- package/dist/chunks/{LpSidebarNav-X14xMdPa.js → LpSidebarNav-CFX5NxGs.js} +1 -1
- package/dist/chunks/LpSparkline-C6xQ2dwv.js +175 -0
- package/dist/chunks/{LpStat-CdbEFOvn.js → LpStat-CDanpzU0.js} +43 -5
- package/dist/chunks/{LpThemeSwitcher-BgpJgrnP.js → LpThemeSwitcher-7mAK6bI7.js} +2 -4
- package/dist/chunks/LpTooltip-hCLPAqMG.js +131 -0
- package/dist/chunks/LpUptimeBar-DcQ8HikG.js +152 -0
- package/dist/component-names.d.ts +1 -1
- package/dist/components/LpAppShell.vue.js +1 -1
- package/dist/components/LpChart.vue.d.ts +88 -0
- package/dist/components/LpChart.vue.js +4 -0
- package/dist/components/LpCodeBlock.vue.js +1 -1
- package/dist/components/LpConfirmDialog.vue.d.ts +18 -2
- package/dist/components/LpConfirmDialog.vue.js +1 -1
- package/dist/components/LpDisclosure.vue.js +1 -1
- package/dist/components/LpFileTree.vue.d.ts +1 -1
- package/dist/components/LpFileTree.vue.js +1 -1
- package/dist/components/LpFileTreeNode.vue.js +1 -1
- package/dist/components/LpLightbox.vue.d.ts +1 -1
- package/dist/components/LpLogViewer.vue.d.ts +1 -1
- package/dist/components/LpLogViewer.vue.js +1 -1
- package/dist/components/LpMapPicker.vue.js +1 -1
- package/dist/components/LpNotificationBell.vue.d.ts +12 -0
- package/dist/components/LpNotificationBell.vue.js +1 -1
- package/dist/components/LpNumberFlow.vue.d.ts +35 -0
- package/dist/components/LpNumberFlow.vue.js +4 -0
- package/dist/components/LpPie.vue.d.ts +134 -0
- package/dist/components/LpPie.vue.js +4 -0
- package/dist/components/LpProgress.vue.d.ts +56 -2
- package/dist/components/LpProgress.vue.js +1 -1
- package/dist/components/LpRollingText.vue.d.ts +33 -0
- package/dist/components/LpRollingText.vue.js +4 -0
- package/dist/components/LpSidebar.vue.js +1 -1
- package/dist/components/LpSidebarNav.vue.js +1 -1
- package/dist/components/LpSparkline.vue.d.ts +48 -0
- package/dist/components/LpSparkline.vue.js +4 -0
- package/dist/components/LpStat.vue.d.ts +25 -2
- package/dist/components/LpStat.vue.js +1 -1
- package/dist/components/LpThemeSwitcher.vue.js +1 -1
- package/dist/components/LpTooltip.vue.d.ts +24 -3
- package/dist/components/LpTooltip.vue.js +1 -1
- package/dist/components/LpUptimeBar.vue.js +1 -1
- package/dist/components/chart.d.ts +180 -0
- package/dist/components/chart.js +353 -0
- package/dist/composables/easing.d.ts +46 -0
- package/dist/composables/easing.js +23 -0
- package/dist/composables/usePillTransition.d.ts +13 -1
- package/dist/composables/usePillTransition.js +22 -2
- package/dist/composables/useReveal.d.ts +26 -0
- package/dist/composables/useReveal.js +45 -0
- package/dist/composables/useSettled.js +2 -2
- package/dist/composables/useShift.js +2 -4
- package/dist/index.d.ts +14 -0
- package/dist/index.js +126 -103
- package/package.json +2 -1
- package/src/component-names.ts +5 -0
- package/src/components/LpChart.vue +846 -0
- package/src/components/LpCodeBlock.vue +1 -1
- package/src/components/LpConfirmDialog.vue +49 -0
- package/src/components/LpDisclosure.vue +1 -1
- package/src/components/LpFileTreeNode.vue +9 -10
- package/src/components/LpLogViewer.vue +2 -3
- package/src/components/LpMapPicker.vue +2 -5
- package/src/components/LpNotificationBell.vue +76 -15
- package/src/components/LpNumberFlow.vue +524 -0
- package/src/components/LpPie.vue +778 -0
- package/src/components/LpProgress.vue +283 -6
- package/src/components/LpRollingText.vue +157 -0
- package/src/components/LpSidebarNav.vue +1 -1
- package/src/components/LpSparkline.vue +312 -0
- package/src/components/LpStat.vue +52 -4
- package/src/components/LpTooltip.vue +185 -3
- package/src/components/LpUptimeBar.vue +150 -53
- package/src/components/chart.ts +686 -0
- package/src/composables/easing.ts +88 -0
- package/src/composables/usePillTransition.ts +71 -6
- package/src/composables/useReveal.ts +113 -0
- package/src/composables/useSettled.ts +2 -4
- package/src/composables/useShift.ts +2 -8
- package/src/index.ts +19 -0
- package/src/theme/useTheme.ts +2 -8
- package/src/tokens/tokens.css +36 -0
- package/dist/chunks/LpProgress-BhI0IbjC.js +0 -37
- package/dist/chunks/LpTooltip-D1hbjQWG.js +0 -63
- package/dist/chunks/LpUptimeBar-CB366k0O.js +0 -127
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import { PieSlice } from './chart';
|
|
2
|
+
import { ContextMenuItemDef } from './LpContextMenu.vue';
|
|
3
|
+
/** A slice, as reported by every interaction event. */
|
|
4
|
+
export interface SliceEvent {
|
|
5
|
+
index: number;
|
|
6
|
+
label: string;
|
|
7
|
+
value: number;
|
|
8
|
+
isOther: boolean;
|
|
9
|
+
}
|
|
10
|
+
type __VLS_Props = {
|
|
11
|
+
slices: PieSlice[];
|
|
12
|
+
type?: "pie" | "donut";
|
|
13
|
+
/** Outer diameter in px. */
|
|
14
|
+
size?: number;
|
|
15
|
+
/** Donut only: hole diameter as a fraction of the outer radius (0–1). */
|
|
16
|
+
innerRatio?: number;
|
|
17
|
+
title?: string;
|
|
18
|
+
subtitle?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Keep the largest N-1 slices and sum the rest into "Other". `0` disables
|
|
21
|
+
* the fold and draws every slice — for a caller that knows its data is
|
|
22
|
+
* already few, or that would rather show a crowded circle than a bucket.
|
|
23
|
+
*/
|
|
24
|
+
maxSlices?: number;
|
|
25
|
+
/** Label for the folded remainder. */
|
|
26
|
+
otherLabel?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Draw the slices largest-first instead of in the order given. Ranking
|
|
29
|
+
* always decides which slices survive `maxSlices`; this decides whether it
|
|
30
|
+
* also reorders them.
|
|
31
|
+
*/
|
|
32
|
+
sortBySize?: boolean;
|
|
33
|
+
/** Appended to values in the legend and tooltip, e.g. " GB". */
|
|
34
|
+
unit?: string;
|
|
35
|
+
/** Custom value formatter; overrides the compact 1.2k default. */
|
|
36
|
+
formatValue?: (v: number) => string;
|
|
37
|
+
/**
|
|
38
|
+
* Name the slices with leader lines around the circle instead of a legend
|
|
39
|
+
* beside it. Better when the labels are long and self-explanatory (versions,
|
|
40
|
+
* hostnames) and the reader wants share-per-name without cross-referencing a
|
|
41
|
+
* colour; the legend stays better for short, repeated categories.
|
|
42
|
+
*/
|
|
43
|
+
labels?: boolean;
|
|
44
|
+
/** Callout width reserved for text on each side, in px. */
|
|
45
|
+
labelWidth?: number;
|
|
46
|
+
/**
|
|
47
|
+
* Defaults to true, except in `labels` mode — callouts already name every
|
|
48
|
+
* slice, and a legend beside them says the same thing twice. Set it
|
|
49
|
+
* explicitly to have both.
|
|
50
|
+
*/
|
|
51
|
+
showLegend?: boolean;
|
|
52
|
+
/** Print each slice's percentage next to its legend entry. */
|
|
53
|
+
showPercent?: boolean;
|
|
54
|
+
/** Donut only: print the total in the hole. Ignored when #center is used. */
|
|
55
|
+
showTotal?: boolean;
|
|
56
|
+
/** Gap between slices in degrees — reads as separate parts, not one disc. */
|
|
57
|
+
padAngle?: number;
|
|
58
|
+
/** Corner radius of each slice in px. 0 for hard edges. */
|
|
59
|
+
cornerRadius?: number;
|
|
60
|
+
/** How far the hovered slice lifts out of the circle, in px. */
|
|
61
|
+
hoverOffset?: number;
|
|
62
|
+
/**
|
|
63
|
+
* Sweep the circle open, clockwise from twelve, when it first comes into
|
|
64
|
+
* view. Turn it off where several are drawn at once and the sweeps would
|
|
65
|
+
* compete rather than read as one arrival.
|
|
66
|
+
*/
|
|
67
|
+
animate?: boolean;
|
|
68
|
+
/** Sweep time in ms. */
|
|
69
|
+
duration?: number;
|
|
70
|
+
/**
|
|
71
|
+
* Right-click menu, built from the slice that was hit and the whole current
|
|
72
|
+
* selection — so an action can apply to one slice or to all the picked ones.
|
|
73
|
+
*/
|
|
74
|
+
menuItems?: (slice: SliceEvent, selection: SliceEvent[]) => ContextMenuItemDef[];
|
|
75
|
+
emptyLabel?: string;
|
|
76
|
+
};
|
|
77
|
+
declare var __VLS_40: {
|
|
78
|
+
total: number;
|
|
79
|
+
active: {
|
|
80
|
+
d: string;
|
|
81
|
+
lift: string;
|
|
82
|
+
label: string;
|
|
83
|
+
value: number;
|
|
84
|
+
color: string;
|
|
85
|
+
fraction: number;
|
|
86
|
+
isOther: boolean;
|
|
87
|
+
count: number;
|
|
88
|
+
} | null;
|
|
89
|
+
selection: {
|
|
90
|
+
d: string;
|
|
91
|
+
lift: string;
|
|
92
|
+
label: string;
|
|
93
|
+
value: number;
|
|
94
|
+
color: string;
|
|
95
|
+
fraction: number;
|
|
96
|
+
isOther: boolean;
|
|
97
|
+
count: number;
|
|
98
|
+
}[];
|
|
99
|
+
};
|
|
100
|
+
type __VLS_Slots = {} & {
|
|
101
|
+
center?: (props: typeof __VLS_40) => any;
|
|
102
|
+
};
|
|
103
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
104
|
+
sliceClick: (payload: SliceEvent) => any;
|
|
105
|
+
selectionChange: (payload: SliceEvent[]) => any;
|
|
106
|
+
sliceContextMenu: (payload: SliceEvent) => any;
|
|
107
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
108
|
+
onSliceClick?: ((payload: SliceEvent) => any) | undefined;
|
|
109
|
+
onSelectionChange?: ((payload: SliceEvent[]) => any) | undefined;
|
|
110
|
+
onSliceContextMenu?: ((payload: SliceEvent) => any) | undefined;
|
|
111
|
+
}>, {
|
|
112
|
+
size: number;
|
|
113
|
+
type: "pie" | "donut";
|
|
114
|
+
animate: boolean;
|
|
115
|
+
duration: number;
|
|
116
|
+
emptyLabel: string;
|
|
117
|
+
innerRatio: number;
|
|
118
|
+
maxSlices: number;
|
|
119
|
+
otherLabel: string;
|
|
120
|
+
labelWidth: number;
|
|
121
|
+
showPercent: boolean;
|
|
122
|
+
showTotal: boolean;
|
|
123
|
+
padAngle: number;
|
|
124
|
+
cornerRadius: number;
|
|
125
|
+
hoverOffset: number;
|
|
126
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
127
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
128
|
+
declare const _default: typeof __VLS_export;
|
|
129
|
+
export default _default;
|
|
130
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
131
|
+
new (): {
|
|
132
|
+
$slots: S;
|
|
133
|
+
};
|
|
134
|
+
};
|
|
@@ -1,12 +1,66 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
2
|
value?: number;
|
|
3
3
|
max?: number;
|
|
4
|
-
|
|
4
|
+
/**
|
|
5
|
+
* `"auto"` colours by how full the bar is — calm up to `warnAt`, accent
|
|
6
|
+
* past it, danger past `dangerAt`.
|
|
7
|
+
*
|
|
8
|
+
* A gauge of a finite resource (disk, memory, quota) means something
|
|
9
|
+
* different at 92% than at 12%, and consumers were each re-deriving that
|
|
10
|
+
* with their own palette — which also put raw colours back into components
|
|
11
|
+
* the theme can no longer reach.
|
|
12
|
+
*/
|
|
13
|
+
tone?: "brand" | "action" | "danger" | "accent" | "auto";
|
|
14
|
+
/** `auto` tone: the fill fraction, 0–1, where the bar turns accent. */
|
|
15
|
+
warnAt?: number;
|
|
16
|
+
/** `auto` tone: the fill fraction, 0–1, where it turns danger. */
|
|
17
|
+
dangerAt?: number;
|
|
18
|
+
/**
|
|
19
|
+
* Bar only: a name for what is being measured, printed above the bar. With
|
|
20
|
+
* `caption` it forms the "CPU … 42%" header a usage row wants.
|
|
21
|
+
*/
|
|
22
|
+
title?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Bar only: the reading, printed opposite `title`. `true` prints the
|
|
25
|
+
* rounded percentage; a string says it in the units that matter
|
|
26
|
+
* ("23 GB / 64 GB"), which a percentage alone cannot.
|
|
27
|
+
*/
|
|
28
|
+
caption?: boolean | string;
|
|
29
|
+
/** `bar` (default) fills horizontally; `ring` draws a dial. */
|
|
30
|
+
variant?: "bar" | "ring";
|
|
31
|
+
/** Ring only: outer diameter in px. */
|
|
32
|
+
size?: number;
|
|
33
|
+
/** Ring only: stroke width in px. */
|
|
34
|
+
thickness?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Ring only: print the rounded percentage in the middle. Pass a string to
|
|
37
|
+
* label it with something else ("12.4k", "3/8") — the ring shows progress,
|
|
38
|
+
* the caption says what it is progress of.
|
|
39
|
+
*/
|
|
40
|
+
label?: boolean | string;
|
|
41
|
+
/**
|
|
42
|
+
* Grow from empty on first render instead of appearing already filled.
|
|
43
|
+
*
|
|
44
|
+
* A dial that arrives complete states a fact; one that fills shows a
|
|
45
|
+
* quantity being measured, and the eye follows the sweep to where it stops —
|
|
46
|
+
* which is the number the tile is actually about. Both variants already ease
|
|
47
|
+
* every later change, so this only concerns the first paint.
|
|
48
|
+
*/
|
|
49
|
+
animateOnMount?: boolean;
|
|
50
|
+
/** How long the fill takes, in ms. The counter in a ring matches it. */
|
|
51
|
+
duration?: number;
|
|
5
52
|
};
|
|
6
53
|
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
54
|
+
size: number;
|
|
7
55
|
max: number;
|
|
8
56
|
value: number;
|
|
9
|
-
|
|
57
|
+
duration: number;
|
|
58
|
+
variant: "bar" | "ring";
|
|
59
|
+
tone: "brand" | "action" | "danger" | "accent" | "auto";
|
|
60
|
+
animateOnMount: boolean;
|
|
61
|
+
warnAt: number;
|
|
62
|
+
dangerAt: number;
|
|
63
|
+
thickness: number;
|
|
10
64
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
11
65
|
declare const _default: typeof __VLS_export;
|
|
12
66
|
export default _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** The text. A change to this is what triggers the transition. */
|
|
3
|
+
value: string | number;
|
|
4
|
+
mode?: "slide" | "flip";
|
|
5
|
+
/** Which way "slide" travels. `up` moves the old text up and out. */
|
|
6
|
+
direction?: "up" | "down";
|
|
7
|
+
duration?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Alignment inside the clipped box, for when the two values differ in
|
|
10
|
+
* width — a value that grows shouldn't shove its neighbours.
|
|
11
|
+
*/
|
|
12
|
+
align?: "start" | "center" | "end";
|
|
13
|
+
};
|
|
14
|
+
declare var __VLS_7: {
|
|
15
|
+
value: string | number;
|
|
16
|
+
};
|
|
17
|
+
type __VLS_Slots = {} & {
|
|
18
|
+
default?: (props: typeof __VLS_7) => any;
|
|
19
|
+
};
|
|
20
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
21
|
+
mode: "slide" | "flip";
|
|
22
|
+
direction: "up" | "down";
|
|
23
|
+
align: "start" | "center" | "end";
|
|
24
|
+
duration: number;
|
|
25
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
26
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
29
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
30
|
+
new (): {
|
|
31
|
+
$slots: S;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
/** Oldest → newest. `null` breaks the line, as in LpChart. */
|
|
3
|
+
data: (number | null)[];
|
|
4
|
+
/** Rendered size in px. The path scales to it; stroke width does not. */
|
|
5
|
+
width?: number;
|
|
6
|
+
height?: number;
|
|
7
|
+
/** Any CSS colour. Defaults to the brand token. */
|
|
8
|
+
color?: string;
|
|
9
|
+
/** Named theme tones, for callers that don't want to spell a var(). */
|
|
10
|
+
tone?: "brand" | "action" | "danger" | "accent" | "muted";
|
|
11
|
+
/** Fill under the line. */
|
|
12
|
+
area?: boolean;
|
|
13
|
+
/** Curve tension, as in LpChart. 0 draws a polyline. */
|
|
14
|
+
smooth?: number;
|
|
15
|
+
/** Dot on the final point — "you are here" on a trend. */
|
|
16
|
+
showLast?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Pin the vertical range instead of fitting the data. Without it a flat
|
|
19
|
+
* series fills the box with noise, and two sparklines in one column can't
|
|
20
|
+
* be compared: each would be scaled to its own extremes.
|
|
21
|
+
*/
|
|
22
|
+
min?: number;
|
|
23
|
+
max?: number;
|
|
24
|
+
/** Accessible description; falls back to a direction + latest value. */
|
|
25
|
+
ariaLabel?: string;
|
|
26
|
+
/**
|
|
27
|
+
* Draw the line on from oldest to newest when it first appears. Turn it off
|
|
28
|
+
* for a table that renders many at once — dozens of simultaneous sweeps
|
|
29
|
+
* read as flicker.
|
|
30
|
+
*/
|
|
31
|
+
animate?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Draw time in ms. The stroke travels at a near-even rate (see
|
|
34
|
+
* `--ease-travel`), so this is roughly how long the line is actually
|
|
35
|
+
* watched being drawn — not a figure mostly spent easing out.
|
|
36
|
+
*/
|
|
37
|
+
duration?: number;
|
|
38
|
+
};
|
|
39
|
+
declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
40
|
+
width: number;
|
|
41
|
+
height: number;
|
|
42
|
+
animate: boolean;
|
|
43
|
+
duration: number;
|
|
44
|
+
smooth: number;
|
|
45
|
+
tone: "brand" | "action" | "danger" | "accent" | "muted";
|
|
46
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
47
|
+
declare const _default: typeof __VLS_export;
|
|
48
|
+
export default _default;
|
|
@@ -1,6 +1,18 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
2
|
label: string;
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* A string is printed as given; a NUMBER counts to its new value on
|
|
5
|
+
* LpNumberFlow's digit wheels. A tile on a live dashboard is the one place
|
|
6
|
+
* a figure changes while somebody is looking at it, and a value that cuts
|
|
7
|
+
* from 41 to 43 says nothing about which way it moved.
|
|
8
|
+
*/
|
|
9
|
+
value: string | number;
|
|
10
|
+
/** Formatting for a numeric `value` — see LpNumberFlow. */
|
|
11
|
+
compact?: boolean;
|
|
12
|
+
grouped?: boolean;
|
|
13
|
+
decimals?: number;
|
|
14
|
+
prefix?: string;
|
|
15
|
+
valueSuffix?: string;
|
|
4
16
|
hint?: string;
|
|
5
17
|
icon?: string;
|
|
6
18
|
online?: boolean;
|
|
@@ -15,8 +27,19 @@ type __VLS_Props = {
|
|
|
15
27
|
* downward trend reads as positive (action) and upward as danger. */
|
|
16
28
|
invertTrend?: boolean;
|
|
17
29
|
};
|
|
18
|
-
declare
|
|
30
|
+
declare var __VLS_21: {};
|
|
31
|
+
type __VLS_Slots = {} & {
|
|
32
|
+
trend?: (props: typeof __VLS_21) => any;
|
|
33
|
+
};
|
|
34
|
+
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
35
|
+
decimals: number;
|
|
19
36
|
trend: "auto" | "up" | "down" | "flat";
|
|
20
37
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
38
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
21
39
|
declare const _default: typeof __VLS_export;
|
|
22
40
|
export default _default;
|
|
41
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
42
|
+
new (): {
|
|
43
|
+
$slots: S;
|
|
44
|
+
};
|
|
45
|
+
};
|
|
@@ -16,12 +16,33 @@ type __VLS_Props = {
|
|
|
16
16
|
* pops up after every mouse click on the trigger is noise.
|
|
17
17
|
*/
|
|
18
18
|
showOnPointerFocus?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Track the pointer instead of anchoring to the trigger's edge.
|
|
21
|
+
*
|
|
22
|
+
* For a trigger that is large or oddly shaped — a chart slice, a canvas, a
|
|
23
|
+
* map region — where the element's bounding box says little about what the
|
|
24
|
+
* pointer is actually over: anchored to the box, the tip can appear far from
|
|
25
|
+
* the thing it describes. Following the cursor keeps it next to the reading.
|
|
26
|
+
*/
|
|
27
|
+
followCursor?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Suppress the tip. For a trigger whose tip only applies to part of it — a
|
|
30
|
+
* chart wrapper where the pointer may be over a mark or over empty canvas —
|
|
31
|
+
* so an empty panel never opens over the gaps.
|
|
32
|
+
*
|
|
33
|
+
* This also FORCES CLOSED a tip that is already showing. reka's own
|
|
34
|
+
* `disabled` does not: it stops managing the tooltip where it stands, so one
|
|
35
|
+
* that was open when the flag flipped stayed on screen for good — outliving
|
|
36
|
+
* the pointer, letting a second chart open its own beside it, and surviving
|
|
37
|
+
* a scroll that should have dismissed it.
|
|
38
|
+
*/
|
|
39
|
+
disabled?: boolean;
|
|
19
40
|
};
|
|
20
|
-
declare var
|
|
41
|
+
declare var __VLS_24: {}, __VLS_38: {};
|
|
21
42
|
type __VLS_Slots = {} & {
|
|
22
|
-
default?: (props: typeof
|
|
43
|
+
default?: (props: typeof __VLS_24) => any;
|
|
23
44
|
} & {
|
|
24
|
-
content?: (props: typeof
|
|
45
|
+
content?: (props: typeof __VLS_38) => any;
|
|
25
46
|
};
|
|
26
47
|
declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
27
48
|
delay: number;
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
export interface ChartPoint {
|
|
2
|
+
/** Numeric value. `null` breaks the line — a real gap, not a zero. */
|
|
3
|
+
y: number | null;
|
|
4
|
+
/** Optional label for this point; falls back to the shared `labels` prop. */
|
|
5
|
+
x?: string;
|
|
6
|
+
}
|
|
7
|
+
export interface ChartSeries {
|
|
8
|
+
name: string;
|
|
9
|
+
/** Bare numbers are accepted and normalised to points. */
|
|
10
|
+
data: (number | null | ChartPoint)[];
|
|
11
|
+
/** Any CSS colour. Unset series cycle through the palette. */
|
|
12
|
+
color?: string;
|
|
13
|
+
/** Draw this series as a dashed line (targets, budgets, forecasts). */
|
|
14
|
+
dashed?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Which y-axis this series is measured against. A series in different units
|
|
17
|
+
* or of a wildly different magnitude (errors beside requests, a rate beside a
|
|
18
|
+
* count) flattens against a shared axis; putting it on `"right"` gives it its
|
|
19
|
+
* own scale and its own ticks.
|
|
20
|
+
*/
|
|
21
|
+
axis?: "left" | "right";
|
|
22
|
+
}
|
|
23
|
+
export type ChartAxis = "left" | "right";
|
|
24
|
+
export interface NormalSeries {
|
|
25
|
+
name: string;
|
|
26
|
+
color: string;
|
|
27
|
+
dashed: boolean;
|
|
28
|
+
axis: ChartAxis;
|
|
29
|
+
values: (number | null)[];
|
|
30
|
+
}
|
|
31
|
+
export interface Box {
|
|
32
|
+
width: number;
|
|
33
|
+
height: number;
|
|
34
|
+
left: number;
|
|
35
|
+
right: number;
|
|
36
|
+
top: number;
|
|
37
|
+
bottom: number;
|
|
38
|
+
}
|
|
39
|
+
/** Plot area inside the padding — where marks may actually be drawn. */
|
|
40
|
+
export declare const plotWidth: (b: Box) => number;
|
|
41
|
+
export declare const plotHeight: (b: Box) => number;
|
|
42
|
+
/** Series colours cycle through the theme's semantic palette. */
|
|
43
|
+
export declare const CHART_PALETTE: string[];
|
|
44
|
+
export declare const normalise: (series: ChartSeries[]) => NormalSeries[];
|
|
45
|
+
/** Point labels win over the shared axis labels; index is the last resort. */
|
|
46
|
+
export declare const resolveLabels: (series: ChartSeries[], labels: string[] | undefined, count: number) => string[];
|
|
47
|
+
/** Longest series wins; shorter ones simply stop early. */
|
|
48
|
+
export declare const pointCount: (series: NormalSeries[]) => number;
|
|
49
|
+
/**
|
|
50
|
+
* "Nice" axis bounds: round the extent out to a human step (1/2/5 × 10ⁿ) so
|
|
51
|
+
* ticks land on readable numbers instead of 0.37, 1.24, 2.11.
|
|
52
|
+
*/
|
|
53
|
+
export declare const niceScale: (min: number, max: number, ticks: number) => {
|
|
54
|
+
min: number;
|
|
55
|
+
max: number;
|
|
56
|
+
step: number;
|
|
57
|
+
};
|
|
58
|
+
export declare const axisTicks: (min: number, max: number, step: number) => number[];
|
|
59
|
+
/** Extent across every visible series, with zero pulled in when asked. */
|
|
60
|
+
export declare const extent: (series: NormalSeries[], includeZero: boolean) => {
|
|
61
|
+
min: number;
|
|
62
|
+
max: number;
|
|
63
|
+
};
|
|
64
|
+
/** x pixel for point i. Bars sit at band centres, lines span edge to edge. */
|
|
65
|
+
export declare const xAt: (i: number, count: number, box: Box, banded: boolean) => number;
|
|
66
|
+
export declare const yAt: (v: number, min: number, max: number, box: Box) => number;
|
|
67
|
+
interface Scale {
|
|
68
|
+
min: number;
|
|
69
|
+
max: number;
|
|
70
|
+
box: Box;
|
|
71
|
+
count: number;
|
|
72
|
+
banded: boolean;
|
|
73
|
+
}
|
|
74
|
+
export declare const linePath: (values: (number | null)[], s: Scale, smooth: number) => string;
|
|
75
|
+
/** The line closed down to the baseline — one filled shape per unbroken run. */
|
|
76
|
+
export declare const areaPath: (values: (number | null)[], s: Scale, smooth: number) => string;
|
|
77
|
+
/** Nearest point index for a pixel x — what the hover crosshair snaps to. */
|
|
78
|
+
export declare const nearestIndex: (px: number, s: Scale) => number;
|
|
79
|
+
/**
|
|
80
|
+
* A bar as a path, rounded only on the corners named. A stack is one shape cut
|
|
81
|
+
* into segments: rounding every segment would bevel the internal joins and read
|
|
82
|
+
* as separate tiles rather than as one bar, so only the outermost segment of a
|
|
83
|
+
* stack rounds, and only on the end it actually terminates.
|
|
84
|
+
*
|
|
85
|
+
* `r` is clamped to half the box so a short segment degrades to a slab instead
|
|
86
|
+
* of inverting its own corners.
|
|
87
|
+
*/
|
|
88
|
+
export declare const barPath: (x: number, y: number, w: number, h: number, r: number, round: {
|
|
89
|
+
top: boolean;
|
|
90
|
+
bottom: boolean;
|
|
91
|
+
}) => string;
|
|
92
|
+
export interface PieSlice {
|
|
93
|
+
label: string;
|
|
94
|
+
value: number;
|
|
95
|
+
/** Any CSS colour. Unset slices cycle through the palette. */
|
|
96
|
+
color?: string;
|
|
97
|
+
}
|
|
98
|
+
export interface ResolvedSlice {
|
|
99
|
+
label: string;
|
|
100
|
+
value: number;
|
|
101
|
+
color: string;
|
|
102
|
+
/** 0–1 of the total. */
|
|
103
|
+
fraction: number;
|
|
104
|
+
/** True for the synthesised remainder slice. */
|
|
105
|
+
isOther: boolean;
|
|
106
|
+
/** How many input slices this one stands for (1, or N when collapsed). */
|
|
107
|
+
count: number;
|
|
108
|
+
}
|
|
109
|
+
/**
|
|
110
|
+
* Fold an arbitrary number of slices down to something a circle can actually
|
|
111
|
+
* show, WITHOUT dropping data.
|
|
112
|
+
*
|
|
113
|
+
* A pie is only legible while its slices are distinguishable by angle; past a
|
|
114
|
+
* handful they become slivers no one can compare or click. But a shared kit
|
|
115
|
+
* can't know how many categories a caller has, so refusing to draw twenty is
|
|
116
|
+
* not an option either. So: keep the largest `max - 1` and sum the rest into a
|
|
117
|
+
* single "Other" slice that keeps its own total, its own share, and a count of
|
|
118
|
+
* what it stands for — the tail stays visible and addressable instead of being
|
|
119
|
+
* silently truncated.
|
|
120
|
+
*
|
|
121
|
+
* Negative values are dropped: a share of a whole has no meaning below zero,
|
|
122
|
+
* and letting one in makes every other slice's fraction wrong.
|
|
123
|
+
*/
|
|
124
|
+
export declare const resolveSlices: (slices: PieSlice[], max: number | undefined, otherLabel: string,
|
|
125
|
+
/**
|
|
126
|
+
* Keep the caller's ordering for the slices that survive. Ranking decides
|
|
127
|
+
* WHICH slices are kept; it needn't decide the order they're shown in, and a
|
|
128
|
+
* caller that ordered its data deliberately ("Free" last, states worst-first)
|
|
129
|
+
* would see that shuffled for no reason. "Other" always sorts last.
|
|
130
|
+
*/
|
|
131
|
+
preserveOrder?: boolean) => {
|
|
132
|
+
slices: ResolvedSlice[];
|
|
133
|
+
total: number;
|
|
134
|
+
};
|
|
135
|
+
/**
|
|
136
|
+
* One slice as a path. `inner > 0` makes it a donut segment (an annulus) rather
|
|
137
|
+
* than a wedge from the centre.
|
|
138
|
+
*
|
|
139
|
+
* A slice covering the whole circle is drawn as two half-arcs: a single arc
|
|
140
|
+
* whose start and end coincide is a zero-length path, so "100% of one category"
|
|
141
|
+
* would render as nothing at all.
|
|
142
|
+
*/
|
|
143
|
+
export declare const arcPath: (cx: number, cy: number, outer: number, inner: number, startAngle: number, endAngle: number,
|
|
144
|
+
/** Corner radius in px, clamped to what the slice can actually carry. */
|
|
145
|
+
corner?: number) => string;
|
|
146
|
+
export interface CalloutLabel {
|
|
147
|
+
index: number;
|
|
148
|
+
/** Which side of the circle the label sits on. */
|
|
149
|
+
side: "left" | "right";
|
|
150
|
+
/** Elbow polyline: leader out of the slice, a bend, then a run to the text. */
|
|
151
|
+
points: string;
|
|
152
|
+
/** Where the text is anchored. */
|
|
153
|
+
x: number;
|
|
154
|
+
y: number;
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* Lay out callout labels around a circle: a leader line leaves each slice along
|
|
158
|
+
* its own bisector, bends, and runs horizontally to text stacked down the side.
|
|
159
|
+
*
|
|
160
|
+
* The whole difficulty is collision. Slices cluster — twenty versions of a
|
|
161
|
+
* server jar are mostly slivers packed into one arc — so labels placed at their
|
|
162
|
+
* natural angles would land on top of each other. Each side is therefore
|
|
163
|
+
* relaxed independently: labels keep their order around the circle, then get
|
|
164
|
+
* pushed apart to a minimum spacing and shifted back inside the box. That's why
|
|
165
|
+
* a leader can end well away from its slice's angle and still be unambiguous —
|
|
166
|
+
* the line, not the position, is what identifies it.
|
|
167
|
+
*/
|
|
168
|
+
export declare const calloutLabels: (angles: {
|
|
169
|
+
index: number;
|
|
170
|
+
mid: number;
|
|
171
|
+
}[], cx: number, cy: number, radius: number,
|
|
172
|
+
/** How far past the radius the elbow sits. */
|
|
173
|
+
elbow: number,
|
|
174
|
+
/** Horizontal run from the elbow to the text. */
|
|
175
|
+
run: number,
|
|
176
|
+
/** Minimum vertical gap between two labels on the same side. */
|
|
177
|
+
spacing: number, height: number) => CalloutLabel[];
|
|
178
|
+
/** Compact default tick formatting: 1.2k, 3.4M — never 1200.0000001. */
|
|
179
|
+
export declare const formatTick: (v: number) => string;
|
|
180
|
+
export {};
|