@hybridcore/ui 1.6.14 → 1.6.17
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/CATALOG.md +1 -0
- package/dist/IconCircle-HcgE1lHy.js +11 -0
- package/dist/IconMinus-B6OPYVyo.js +11 -0
- package/dist/IconPlus-7KPPhzOb.js +11 -0
- package/dist/IconTrendingUp-CW4SFYmc.js +27 -0
- package/dist/components/charts/_common/tooltip.js +44 -35
- package/dist/components/charts/_common/utils.js +21 -11
- package/dist/components/charts/chart-wrapper/index.js +44 -43
- package/dist/components/charts/column-line-mix/logic.js +59 -59
- package/dist/components/charts/donut-chart/logic.js +53 -40
- package/dist/components/charts/line/logic.js +55 -55
- package/dist/components/charts/logaritmic-scale/logic.js +27 -27
- package/dist/components/charts/multiple-value-axes/logic.js +70 -70
- package/dist/components/charts/xy-chart/logic.js +135 -134
- package/dist/components/color-picker/index.js +1393 -1399
- package/dist/components/data-map/components/controls/index.js +7 -6
- package/dist/components/heat-map/components/controls/index.js +7 -6
- package/dist/components/metric-card/logic.js +57 -77
- package/dist/components/prr-map/components/controls/index.js +7 -6
- package/dist/components/raster-grid-map/components/controls/index.js +7 -6
- package/dist/components/status-indicator/index.js +44 -0
- package/dist/components/status-indicator/logic.js +105 -0
- package/dist/components/status-indicator/styled.js +114 -0
- package/dist/main.d.ts +85 -1
- package/dist/main.js +65 -63
- package/package.json +1 -1
- package/dist/IconPlus-yPkff_Vj.js +0 -19
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Container as t, Button as
|
|
3
|
-
import { I as s
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/* @__PURE__ */ o(
|
|
2
|
+
import { Container as t, Button as n } from "./styled.js";
|
|
3
|
+
import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
|
|
4
|
+
import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
|
|
5
|
+
const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
|
|
6
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
|
|
7
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
|
|
7
8
|
] }) : null;
|
|
8
9
|
export {
|
|
9
|
-
|
|
10
|
+
I as Controls
|
|
10
11
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Container as t, Button as
|
|
3
|
-
import { I as s
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/* @__PURE__ */ o(
|
|
2
|
+
import { Container as t, Button as n } from "./styled.js";
|
|
3
|
+
import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
|
|
4
|
+
import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
|
|
5
|
+
const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
|
|
6
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
|
|
7
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
|
|
7
8
|
] }) : null;
|
|
8
9
|
export {
|
|
9
|
-
|
|
10
|
+
I as Controls
|
|
10
11
|
};
|
|
@@ -1,116 +1,96 @@
|
|
|
1
1
|
import { useThemeProps as K } from "@mui/material";
|
|
2
|
-
import { formatValue as
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
*
|
|
7
|
-
* This source code is licensed under the MIT license.
|
|
8
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/
|
|
10
|
-
const Q = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], W = m("outline", "arrow-right", "ArrowRight", Q);
|
|
11
|
-
/**
|
|
12
|
-
* @license @tabler/icons-react v3.44.0 - MIT
|
|
13
|
-
*
|
|
14
|
-
* This source code is licensed under the MIT license.
|
|
15
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
16
|
-
*/
|
|
17
|
-
const X = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], Y = m("outline", "trending-down", "TrendingDown", X);
|
|
18
|
-
/**
|
|
19
|
-
* @license @tabler/icons-react v3.44.0 - MIT
|
|
20
|
-
*
|
|
21
|
-
* This source code is licensed under the MIT license.
|
|
22
|
-
* See the LICENSE file in the root directory of this source tree.
|
|
23
|
-
*/
|
|
24
|
-
const ee = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], oe = m("outline", "trending-up", "TrendingUp", ee), ce = (F) => {
|
|
25
|
-
const i = K({ props: F, name: "HCMetricCard" }), {
|
|
2
|
+
import { formatValue as D, resolveConditionalStyle as M } from "../charts/_common/format.js";
|
|
3
|
+
import { I as Q, a as W, b as X } from "../../IconTrendingUp-CW4SFYmc.js";
|
|
4
|
+
const oe = ($) => {
|
|
5
|
+
const i = K({ props: $, name: "HCMetricCard" }), {
|
|
26
6
|
value: c = [],
|
|
27
|
-
secondValue:
|
|
28
|
-
secondValueFormat:
|
|
29
|
-
variant:
|
|
30
|
-
layout:
|
|
31
|
-
valuePrefix:
|
|
32
|
-
valueSuffix:
|
|
7
|
+
secondValue: v = [],
|
|
8
|
+
secondValueFormat: k,
|
|
9
|
+
variant: O = "default",
|
|
10
|
+
layout: C = "overlay",
|
|
11
|
+
valuePrefix: Z,
|
|
12
|
+
valueSuffix: A,
|
|
33
13
|
format: o,
|
|
34
|
-
showChange:
|
|
35
|
-
changeType:
|
|
36
|
-
showTrend:
|
|
37
|
-
showIcon:
|
|
38
|
-
icon:
|
|
39
|
-
iconPosition:
|
|
40
|
-
} = i,
|
|
14
|
+
showChange: H = !1,
|
|
15
|
+
changeType: l = "percentage",
|
|
16
|
+
showTrend: J = !1,
|
|
17
|
+
showIcon: b = !1,
|
|
18
|
+
icon: u,
|
|
19
|
+
iconPosition: d = "right"
|
|
20
|
+
} = i, L = c.length > 0, f = c[c.length - 1], S = c[c.length - 2], e = f ? Number(f.v) : NaN, t = S ? Number(S.v) : NaN, w = !isNaN(e) && !isNaN(t), g = {
|
|
41
21
|
...o,
|
|
42
|
-
prefix: (o == null ? void 0 : o.prefix) ??
|
|
43
|
-
suffix: (o == null ? void 0 : o.suffix) ??
|
|
22
|
+
prefix: (o == null ? void 0 : o.prefix) ?? Z,
|
|
23
|
+
suffix: (o == null ? void 0 : o.suffix) ?? A
|
|
44
24
|
};
|
|
45
|
-
let r = "—",
|
|
25
|
+
let r = "—", y = "", I, V;
|
|
46
26
|
if (!isNaN(e)) {
|
|
47
|
-
r =
|
|
48
|
-
const
|
|
49
|
-
|
|
27
|
+
r = D(e, g), y = f.t;
|
|
28
|
+
const a = M(e, g);
|
|
29
|
+
I = a.color, V = a.backgroundColor;
|
|
50
30
|
}
|
|
51
|
-
const
|
|
52
|
-
let
|
|
53
|
-
const
|
|
54
|
-
if (!isNaN(
|
|
55
|
-
|
|
56
|
-
const
|
|
57
|
-
T =
|
|
31
|
+
const x = k ?? g;
|
|
32
|
+
let p, T, B;
|
|
33
|
+
const F = v[v.length - 1], h = F ? Number(F.v) : NaN;
|
|
34
|
+
if (!isNaN(h)) {
|
|
35
|
+
p = D(h, x);
|
|
36
|
+
const a = M(h, x);
|
|
37
|
+
T = a.color, B = a.backgroundColor;
|
|
58
38
|
}
|
|
59
39
|
let s;
|
|
60
|
-
if (
|
|
61
|
-
if (
|
|
62
|
-
const
|
|
63
|
-
s = `${z}${Math.abs(
|
|
40
|
+
if (H)
|
|
41
|
+
if (w && !(t === 0 && l === "percentage")) {
|
|
42
|
+
const m = l === "absolute" ? e - t : (e - t) / t * 100, z = m > 0 ? "+" : m < 0 ? "−" : "", E = l === "percentage" ? 1 : 2, G = l === "percentage" ? "%" : "";
|
|
43
|
+
s = `${z}${Math.abs(m).toFixed(E)}${G}`;
|
|
64
44
|
} else
|
|
65
45
|
s = "—";
|
|
66
46
|
let n;
|
|
67
|
-
|
|
68
|
-
let
|
|
69
|
-
n === "up" ?
|
|
70
|
-
const
|
|
47
|
+
J && w && (e > t ? n = "up" : e < t ? n = "down" : n = "neutral");
|
|
48
|
+
let N = Q;
|
|
49
|
+
n === "up" ? N = W : n === "down" && (N = X);
|
|
50
|
+
const P = [
|
|
71
51
|
"top-left",
|
|
72
52
|
"top-right",
|
|
73
53
|
"bottom-left",
|
|
74
54
|
"bottom-right"
|
|
75
|
-
].includes(
|
|
55
|
+
].includes(d), R = b && !!u && P, U = b && !!u && !P, j = JSON.stringify({
|
|
76
56
|
metric: i.label,
|
|
77
57
|
value: r,
|
|
78
58
|
change: s,
|
|
79
|
-
asOf:
|
|
59
|
+
asOf: y
|
|
80
60
|
}), q = {
|
|
81
61
|
...i,
|
|
82
|
-
variant:
|
|
83
|
-
layout:
|
|
84
|
-
changeType:
|
|
85
|
-
iconPosition:
|
|
62
|
+
variant: O,
|
|
63
|
+
layout: C,
|
|
64
|
+
changeType: l,
|
|
65
|
+
iconPosition: d,
|
|
86
66
|
calculatedValue: r,
|
|
87
|
-
calculatedSecondValue:
|
|
67
|
+
calculatedSecondValue: p,
|
|
88
68
|
calculatedSecondValueColor: T,
|
|
89
|
-
calculatedSecondValueBg:
|
|
69
|
+
calculatedSecondValueBg: B,
|
|
90
70
|
calculatedChange: s,
|
|
91
71
|
calculatedTrend: n,
|
|
92
|
-
calculatedValueColor:
|
|
93
|
-
calculatedValueBg:
|
|
94
|
-
hasData:
|
|
72
|
+
calculatedValueColor: I,
|
|
73
|
+
calculatedValueBg: V,
|
|
74
|
+
hasData: L
|
|
95
75
|
};
|
|
96
76
|
return {
|
|
97
77
|
refs: {},
|
|
98
78
|
state: {
|
|
99
79
|
ownerState: q,
|
|
100
|
-
layout:
|
|
80
|
+
layout: C,
|
|
101
81
|
calculatedValue: r,
|
|
102
|
-
calculatedSecondValue:
|
|
82
|
+
calculatedSecondValue: p,
|
|
103
83
|
calculatedChange: s,
|
|
104
|
-
TrendIcon:
|
|
105
|
-
Icon:
|
|
106
|
-
showCornerIcon:
|
|
107
|
-
showSideIcon:
|
|
108
|
-
iconPosition:
|
|
84
|
+
TrendIcon: N,
|
|
85
|
+
Icon: u,
|
|
86
|
+
showCornerIcon: R,
|
|
87
|
+
showSideIcon: U,
|
|
88
|
+
iconPosition: d,
|
|
109
89
|
snapshotPayload: j
|
|
110
90
|
},
|
|
111
91
|
actions: {}
|
|
112
92
|
};
|
|
113
93
|
};
|
|
114
94
|
export {
|
|
115
|
-
|
|
95
|
+
oe as useMetricCardLogic
|
|
116
96
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Container as t, Button as
|
|
3
|
-
import { I as s
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/* @__PURE__ */ o(
|
|
2
|
+
import { Container as t, Button as n } from "./styled.js";
|
|
3
|
+
import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
|
|
4
|
+
import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
|
|
5
|
+
const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
|
|
6
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
|
|
7
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
|
|
7
8
|
] }) : null;
|
|
8
9
|
export {
|
|
9
|
-
|
|
10
|
+
I as Controls
|
|
10
11
|
};
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsxs as i, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { Container as t, Button as
|
|
3
|
-
import { I as s
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/* @__PURE__ */ o(
|
|
2
|
+
import { Container as t, Button as n } from "./styled.js";
|
|
3
|
+
import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
|
|
4
|
+
import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
|
|
5
|
+
const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
|
|
6
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
|
|
7
|
+
/* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
|
|
7
8
|
] }) : null;
|
|
8
9
|
export {
|
|
9
|
-
|
|
10
|
+
I as Controls
|
|
10
11
|
};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsx as t, jsxs as e, Fragment as m } from "react/jsx-runtime";
|
|
2
|
+
import { Stack as x, Skeleton as d } from "@mui/material";
|
|
3
|
+
import { useStatusIndicatorLogic as v } from "./logic.js";
|
|
4
|
+
import { StatusIndicatorRoot as o, StatusIndicatorCaption as b, StatusIndicatorDescription as f, StatusIndicatorIconContainer as h, StatusIndicatorContent as g, StatusIndicatorLabel as u, StatusIndicatorValue as I, StatusIndicatorBadge as w } from "./styled.js";
|
|
5
|
+
const j = (i) => {
|
|
6
|
+
const { state: S } = v(i), { ownerState: n, variant: r, activeLabel: c, Icon: a } = S;
|
|
7
|
+
if (i.loading)
|
|
8
|
+
return /* @__PURE__ */ t(o, { ownerState: n, sx: i.sx, children: /* @__PURE__ */ e(
|
|
9
|
+
x,
|
|
10
|
+
{
|
|
11
|
+
spacing: 1,
|
|
12
|
+
alignItems: r === "prominent" ? "center" : "flex-start",
|
|
13
|
+
children: [
|
|
14
|
+
/* @__PURE__ */ t(d, { variant: "text", width: "50%" }),
|
|
15
|
+
/* @__PURE__ */ t(d, { variant: "circular", width: 40, height: 40 }),
|
|
16
|
+
/* @__PURE__ */ t(d, { variant: "text", width: "70%" })
|
|
17
|
+
]
|
|
18
|
+
}
|
|
19
|
+
) });
|
|
20
|
+
const l = i.caption && /* @__PURE__ */ t(b, { variant: "caption", children: i.caption }), s = i.description && /* @__PURE__ */ t(f, { variant: "body2", children: i.description });
|
|
21
|
+
return r === "split" ? /* @__PURE__ */ e(o, { ownerState: n, sx: i.sx, children: [
|
|
22
|
+
a && /* @__PURE__ */ t(h, { ownerState: n, children: /* @__PURE__ */ t(a, { size: 28 }) }),
|
|
23
|
+
/* @__PURE__ */ e(g, { children: [
|
|
24
|
+
i.label && /* @__PURE__ */ t(u, { variant: "body2", children: i.label }),
|
|
25
|
+
/* @__PURE__ */ t(I, { variant: "h5", ownerState: n, children: c }),
|
|
26
|
+
l,
|
|
27
|
+
s
|
|
28
|
+
] })
|
|
29
|
+
] }) : /* @__PURE__ */ e(o, { ownerState: n, sx: i.sx, children: [
|
|
30
|
+
i.label && /* @__PURE__ */ t(u, { variant: "body2", children: i.label }),
|
|
31
|
+
r === "prominent" ? /* @__PURE__ */ e(m, { children: [
|
|
32
|
+
a && /* @__PURE__ */ t(h, { ownerState: n, children: /* @__PURE__ */ t(a, { size: 48 }) }),
|
|
33
|
+
/* @__PURE__ */ t(I, { variant: "h4", ownerState: n, children: c })
|
|
34
|
+
] }) : /* @__PURE__ */ e(w, { ownerState: n, children: [
|
|
35
|
+
a && /* @__PURE__ */ t(a, { size: 18 }),
|
|
36
|
+
c
|
|
37
|
+
] }),
|
|
38
|
+
l,
|
|
39
|
+
s
|
|
40
|
+
] });
|
|
41
|
+
};
|
|
42
|
+
export {
|
|
43
|
+
j as StatusIndicator
|
|
44
|
+
};
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { useThemeProps as u } from "@mui/material";
|
|
2
|
+
import { a as w, b as k, I as v } from "../../IconTrendingUp-CW4SFYmc.js";
|
|
3
|
+
import { c as n } from "../../createReactComponent-C7L-DMHj.js";
|
|
4
|
+
import { I } from "../../IconMinus-B6OPYVyo.js";
|
|
5
|
+
import { I as y } from "../../IconCircle-HcgE1lHy.js";
|
|
6
|
+
/**
|
|
7
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
8
|
+
*
|
|
9
|
+
* This source code is licensed under the MIT license.
|
|
10
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
11
|
+
*/
|
|
12
|
+
const M = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], m = n("outline", "alert-triangle", "AlertTriangle", M);
|
|
13
|
+
/**
|
|
14
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the MIT license.
|
|
17
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
18
|
+
*/
|
|
19
|
+
const C = [["path", { d: "M12 5l0 14", key: "svg-0" }], ["path", { d: "M18 13l-6 6", key: "svg-1" }], ["path", { d: "M6 13l6 6", key: "svg-2" }]], _ = n("outline", "arrow-down", "ArrowDown", C);
|
|
20
|
+
/**
|
|
21
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
22
|
+
*
|
|
23
|
+
* This source code is licensed under the MIT license.
|
|
24
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
25
|
+
*/
|
|
26
|
+
const $ = [["path", { d: "M12 5l0 14", key: "svg-0" }], ["path", { d: "M18 11l-6 -6", key: "svg-1" }], ["path", { d: "M6 11l6 -6", key: "svg-2" }]], N = n("outline", "arrow-up", "ArrowUp", $);
|
|
27
|
+
/**
|
|
28
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
29
|
+
*
|
|
30
|
+
* This source code is licensed under the MIT license.
|
|
31
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
32
|
+
*/
|
|
33
|
+
const b = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }], ["path", { d: "M5.7 5.7l12.6 12.6", key: "svg-1" }]], f = n("outline", "ban", "Ban", b);
|
|
34
|
+
/**
|
|
35
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
36
|
+
*
|
|
37
|
+
* This source code is licensed under the MIT license.
|
|
38
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
39
|
+
*/
|
|
40
|
+
const A = [["path", { d: "M6 10l6 6l6 -6h-12", key: "svg-0" }]], D = n("outline", "caret-down", "CaretDown", A);
|
|
41
|
+
/**
|
|
42
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
43
|
+
*
|
|
44
|
+
* This source code is licensed under the MIT license.
|
|
45
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
46
|
+
*/
|
|
47
|
+
const L = [["path", { d: "M18 14l-6 -6l-6 6h12", key: "svg-0" }]], T = n("outline", "caret-up", "CaretUp", L);
|
|
48
|
+
/**
|
|
49
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
50
|
+
*
|
|
51
|
+
* This source code is licensed under the MIT license.
|
|
52
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
53
|
+
*/
|
|
54
|
+
const U = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], B = n("outline", "check", "Check", U);
|
|
55
|
+
/**
|
|
56
|
+
* @license @tabler/icons-react v3.44.0 - MIT
|
|
57
|
+
*
|
|
58
|
+
* This source code is licensed under the MIT license.
|
|
59
|
+
* See the LICENSE file in the root directory of this source tree.
|
|
60
|
+
*/
|
|
61
|
+
const H = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]], R = n("outline", "help-circle", "HelpCircle", H), x = {
|
|
62
|
+
"trending-up": w,
|
|
63
|
+
"trending-down": k,
|
|
64
|
+
"arrow-right": v,
|
|
65
|
+
"arrow-up": N,
|
|
66
|
+
"arrow-down": _,
|
|
67
|
+
"caret-up": T,
|
|
68
|
+
"caret-down": D,
|
|
69
|
+
minus: I,
|
|
70
|
+
ban: f,
|
|
71
|
+
help: R,
|
|
72
|
+
check: B,
|
|
73
|
+
alert: m,
|
|
74
|
+
circle: y
|
|
75
|
+
}, z = (p) => {
|
|
76
|
+
const t = u({ props: p, name: "HCStatusIndicator" }), {
|
|
77
|
+
value: e,
|
|
78
|
+
states: d = [],
|
|
79
|
+
variant: c = "prominent",
|
|
80
|
+
showIcon: s = !0,
|
|
81
|
+
emptyLabel: a = "—"
|
|
82
|
+
} = t, r = e != null && `${e}`.trim() !== "", o = r ? d.find((g) => `${g.value}`.toLowerCase() === `${e}`.toLowerCase()) : void 0, l = (o == null ? void 0 : o.label) ?? (r ? `${e}` : a), i = s && (o != null && o.icon) ? x[o.icon] : void 0, h = {
|
|
83
|
+
...t,
|
|
84
|
+
variant: c,
|
|
85
|
+
showIcon: s,
|
|
86
|
+
emptyLabel: a,
|
|
87
|
+
activeLabel: l,
|
|
88
|
+
resolvedColor: o == null ? void 0 : o.color,
|
|
89
|
+
resolvedBackgroundColor: o == null ? void 0 : o.backgroundColor,
|
|
90
|
+
hasValue: r
|
|
91
|
+
};
|
|
92
|
+
return {
|
|
93
|
+
refs: {},
|
|
94
|
+
state: {
|
|
95
|
+
ownerState: h,
|
|
96
|
+
variant: c,
|
|
97
|
+
activeLabel: l,
|
|
98
|
+
Icon: i
|
|
99
|
+
},
|
|
100
|
+
actions: {}
|
|
101
|
+
};
|
|
102
|
+
};
|
|
103
|
+
export {
|
|
104
|
+
z as useStatusIndicatorLogic
|
|
105
|
+
};
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { styled as a, Typography as i, alpha as l } from "@mui/material";
|
|
2
|
+
import { resolvePaletteColor as r } from "../metric-card/helpers.js";
|
|
3
|
+
import { Widget as d } from "../widget/styled.js";
|
|
4
|
+
const s = {
|
|
5
|
+
shouldForwardProp: (t) => t !== "ownerState"
|
|
6
|
+
}, C = a(d.Root, {
|
|
7
|
+
name: "HCStatusIndicator",
|
|
8
|
+
slot: "Root",
|
|
9
|
+
...s
|
|
10
|
+
})(({ theme: t, ownerState: o }) => {
|
|
11
|
+
const n = {
|
|
12
|
+
padding: t.spacing(2),
|
|
13
|
+
display: "flex",
|
|
14
|
+
gap: t.spacing(0.5)
|
|
15
|
+
};
|
|
16
|
+
return o.variant === "prominent" ? {
|
|
17
|
+
...n,
|
|
18
|
+
flexDirection: "column",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
justifyContent: "center",
|
|
21
|
+
textAlign: "center"
|
|
22
|
+
} : o.variant === "split" ? {
|
|
23
|
+
...n,
|
|
24
|
+
flexDirection: "row",
|
|
25
|
+
alignItems: "center",
|
|
26
|
+
gap: t.spacing(2)
|
|
27
|
+
} : {
|
|
28
|
+
...n,
|
|
29
|
+
flexDirection: "column",
|
|
30
|
+
alignItems: "flex-start",
|
|
31
|
+
justifyContent: "center"
|
|
32
|
+
};
|
|
33
|
+
}), f = a(i, {
|
|
34
|
+
name: "HCStatusIndicator",
|
|
35
|
+
slot: "Label"
|
|
36
|
+
})(({ theme: t }) => ({
|
|
37
|
+
color: t.palette.text.secondary,
|
|
38
|
+
fontWeight: 500
|
|
39
|
+
})), I = a("div", {
|
|
40
|
+
name: "HCStatusIndicator",
|
|
41
|
+
slot: "IconContainer",
|
|
42
|
+
...s
|
|
43
|
+
})(({ theme: t, ownerState: o }) => {
|
|
44
|
+
const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = {
|
|
45
|
+
display: "flex",
|
|
46
|
+
alignItems: "center",
|
|
47
|
+
justifyContent: "center",
|
|
48
|
+
color: n
|
|
49
|
+
};
|
|
50
|
+
if (o.variant === "split") {
|
|
51
|
+
const c = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
|
|
52
|
+
return {
|
|
53
|
+
...e,
|
|
54
|
+
flexShrink: 0,
|
|
55
|
+
width: 56,
|
|
56
|
+
height: 56,
|
|
57
|
+
borderRadius: t.shape.borderRadius * 2,
|
|
58
|
+
backgroundColor: c
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
return e;
|
|
62
|
+
}), x = a("div", {
|
|
63
|
+
name: "HCStatusIndicator",
|
|
64
|
+
slot: "Content"
|
|
65
|
+
})(() => ({
|
|
66
|
+
display: "flex",
|
|
67
|
+
flexDirection: "column",
|
|
68
|
+
minWidth: 0,
|
|
69
|
+
flex: 1
|
|
70
|
+
})), m = a(i, {
|
|
71
|
+
name: "HCStatusIndicator",
|
|
72
|
+
slot: "Value",
|
|
73
|
+
...s
|
|
74
|
+
})(({ theme: t, ownerState: o }) => ({
|
|
75
|
+
fontWeight: 600,
|
|
76
|
+
lineHeight: 1.2,
|
|
77
|
+
color: r(t, o.resolvedColor) ?? t.palette.text.primary
|
|
78
|
+
})), y = a("div", {
|
|
79
|
+
name: "HCStatusIndicator",
|
|
80
|
+
slot: "Badge",
|
|
81
|
+
...s
|
|
82
|
+
})(({ theme: t, ownerState: o }) => {
|
|
83
|
+
const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
|
|
84
|
+
return {
|
|
85
|
+
display: "inline-flex",
|
|
86
|
+
alignItems: "center",
|
|
87
|
+
gap: t.spacing(0.75),
|
|
88
|
+
padding: t.spacing(0.5, 1.25),
|
|
89
|
+
borderRadius: 999,
|
|
90
|
+
backgroundColor: e,
|
|
91
|
+
color: n,
|
|
92
|
+
fontWeight: 600
|
|
93
|
+
};
|
|
94
|
+
}), S = a(i, {
|
|
95
|
+
name: "HCStatusIndicator",
|
|
96
|
+
slot: "Caption"
|
|
97
|
+
})(({ theme: t }) => ({
|
|
98
|
+
color: t.palette.text.secondary
|
|
99
|
+
})), v = a(i, {
|
|
100
|
+
name: "HCStatusIndicator",
|
|
101
|
+
slot: "Description"
|
|
102
|
+
})(({ theme: t }) => ({
|
|
103
|
+
color: t.palette.text.secondary
|
|
104
|
+
}));
|
|
105
|
+
export {
|
|
106
|
+
y as StatusIndicatorBadge,
|
|
107
|
+
S as StatusIndicatorCaption,
|
|
108
|
+
x as StatusIndicatorContent,
|
|
109
|
+
v as StatusIndicatorDescription,
|
|
110
|
+
I as StatusIndicatorIconContainer,
|
|
111
|
+
f as StatusIndicatorLabel,
|
|
112
|
+
C as StatusIndicatorRoot,
|
|
113
|
+
m as StatusIndicatorValue
|
|
114
|
+
};
|
package/dist/main.d.ts
CHANGED
|
@@ -233,6 +233,7 @@ export declare interface ChartDimension {
|
|
|
233
233
|
export declare type ChartNameType =
|
|
234
234
|
| "HeatLegend"
|
|
235
235
|
| "XYChart"
|
|
236
|
+
| "XYChartHorizontal"
|
|
236
237
|
| "MultipleValueAxes"
|
|
237
238
|
| "PieChart"
|
|
238
239
|
| "DonutChart"
|
|
@@ -1935,6 +1936,58 @@ export declare interface StatsBoxProps extends BoxProps {
|
|
|
1935
1936
|
icon?: default_2.ReactNode;
|
|
1936
1937
|
}
|
|
1937
1938
|
|
|
1939
|
+
export declare type StatusIconName =
|
|
1940
|
+
| "trending-up"
|
|
1941
|
+
| "trending-down"
|
|
1942
|
+
| "arrow-right"
|
|
1943
|
+
| "arrow-up"
|
|
1944
|
+
| "arrow-down"
|
|
1945
|
+
| "caret-up"
|
|
1946
|
+
| "caret-down"
|
|
1947
|
+
| "minus"
|
|
1948
|
+
| "ban"
|
|
1949
|
+
| "help"
|
|
1950
|
+
| "check"
|
|
1951
|
+
| "alert"
|
|
1952
|
+
| "circle";
|
|
1953
|
+
|
|
1954
|
+
export declare const StatusIndicator: (props: StatusIndicatorProps) => JSX_2.Element;
|
|
1955
|
+
|
|
1956
|
+
export declare type StatusIndicatorComponentOverride<Theme = unknown> = {
|
|
1957
|
+
defaultProps?: StatusIndicatorProps;
|
|
1958
|
+
styleOverrides?: ComponentsOverrides_2<Theme>["HCStatusIndicator"];
|
|
1959
|
+
};
|
|
1960
|
+
|
|
1961
|
+
export declare interface StatusIndicatorProps {
|
|
1962
|
+
// The current categorical value, e.g. "DOWN". Bound at runtime from an ontology
|
|
1963
|
+
// instance's enum variable (response.variables.enum.priceDirection).
|
|
1964
|
+
value?: string;
|
|
1965
|
+
// Heading shown above the state (e.g. "Gold Price Direction").
|
|
1966
|
+
label?: string;
|
|
1967
|
+
// Optional subtitle beneath the state.
|
|
1968
|
+
description?: string;
|
|
1969
|
+
// Small supporting line (e.g. the forecast date).
|
|
1970
|
+
caption?: string;
|
|
1971
|
+
// The state map — which value renders which label/color/icon.
|
|
1972
|
+
states?: StatusState[];
|
|
1973
|
+
variant?: StatusIndicatorVariant;
|
|
1974
|
+
showIcon?: boolean;
|
|
1975
|
+
// Text rendered when `value` matches no configured state.
|
|
1976
|
+
emptyLabel?: string;
|
|
1977
|
+
loading?: boolean;
|
|
1978
|
+
sx?: SxProps<Theme>;
|
|
1979
|
+
}
|
|
1980
|
+
|
|
1981
|
+
export declare type StatusIndicatorVariant = "prominent" | "badge" | "split";
|
|
1982
|
+
|
|
1983
|
+
export declare interface StatusState {
|
|
1984
|
+
value: string;
|
|
1985
|
+
label?: string;
|
|
1986
|
+
color?: string;
|
|
1987
|
+
backgroundColor?: string;
|
|
1988
|
+
icon?: StatusIconName;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1938
1991
|
export declare interface StringRangeProps {
|
|
1939
1992
|
value: SIMULATION.RandomInfoString;
|
|
1940
1993
|
variant?: RangeSelectorVariant;
|
|
@@ -2370,7 +2423,14 @@ export declare type XYChartComponentOverride<Theme = unknown> = {
|
|
|
2370
2423
|
styleOverrides?: ComponentsOverrides_2<Theme>["HCXYChart"];
|
|
2371
2424
|
};
|
|
2372
2425
|
|
|
2373
|
-
export declare type XYChartProps = ChartProps
|
|
2426
|
+
export declare type XYChartProps = ChartProps & {
|
|
2427
|
+
/**
|
|
2428
|
+
* Axis orientation. `"vertical"` (default) draws category on the X axis with
|
|
2429
|
+
* value columns rising on Y. `"horizontal"` flips them — category on Y, value
|
|
2430
|
+
* bars extending along X — producing a horizontal bar chart.
|
|
2431
|
+
*/
|
|
2432
|
+
orientation?: "vertical" | "horizontal";
|
|
2433
|
+
};
|
|
2374
2434
|
|
|
2375
2435
|
export { }
|
|
2376
2436
|
|
|
@@ -3541,6 +3601,30 @@ declare module "@mui/material/styles" {
|
|
|
3541
3601
|
|
|
3542
3602
|
|
|
3543
3603
|
|
|
3604
|
+
declare module "@mui/material/styles" {
|
|
3605
|
+
interface ComponentNameToClassKey {
|
|
3606
|
+
HCStatusIndicator:
|
|
3607
|
+
| "root"
|
|
3608
|
+
| "label"
|
|
3609
|
+
| "iconContainer"
|
|
3610
|
+
| "content"
|
|
3611
|
+
| "value"
|
|
3612
|
+
| "badge"
|
|
3613
|
+
| "caption"
|
|
3614
|
+
| "description";
|
|
3615
|
+
}
|
|
3616
|
+
|
|
3617
|
+
interface ComponentsPropsList {
|
|
3618
|
+
HCStatusIndicator: StatusIndicatorProps;
|
|
3619
|
+
}
|
|
3620
|
+
|
|
3621
|
+
interface Components<Theme = unknown> {
|
|
3622
|
+
HCStatusIndicator?: StatusIndicatorComponentOverride<Theme>;
|
|
3623
|
+
}
|
|
3624
|
+
}
|
|
3625
|
+
|
|
3626
|
+
|
|
3627
|
+
|
|
3544
3628
|
declare module "@mui/material/styles" {
|
|
3545
3629
|
interface ComponentNameToClassKey {
|
|
3546
3630
|
HCPlaceholder: "root";
|