@hybridcore/ui 1.6.21 → 1.6.23
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/components/button/index.js +10 -7
- package/dist/components/charts/chart-wrapper/index.js +34 -32
- package/dist/components/charts/column-line-mix/logic.js +65 -69
- package/dist/components/charts/forecast-cone/index.js +58 -45
- package/dist/components/charts/forecast-cone/logic.js +347 -244
- package/dist/components/charts/histogram/index.js +11 -0
- package/dist/components/charts/histogram/logic.js +133 -0
- package/dist/components/charts/histogram/styled.js +12 -0
- package/dist/components/charts/line/logic.js +48 -48
- package/dist/components/charts/logaritmic-scale/logic.js +257 -91
- package/dist/components/charts/multiple-value-axes/logic.js +70 -70
- package/dist/components/charts/xy-chart/logic.js +9 -1
- package/dist/main.d.ts +65 -8
- package/dist/main.js +158 -156
- package/package.json +1 -1
- package/dist/Scrollbar-CTI7_8Qw.js +0 -171
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { ChartError as a } from "../_common/chart-error.js";
|
|
3
|
+
import { useHistogramLogic as h } from "./logic.js";
|
|
4
|
+
import { HistogramRoot as g } from "./styled.js";
|
|
5
|
+
const f = (t) => {
|
|
6
|
+
const { chartId: i, ownerState: e, sx: m, error: o, other: s } = h(t);
|
|
7
|
+
return /* @__PURE__ */ r(g, { ownerState: e, sx: m, ...s, children: o ? /* @__PURE__ */ r(a, { message: o }) : /* @__PURE__ */ r("div", { id: i, style: { width: "100%", height: "100%" } }) });
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
f as Histogram
|
|
11
|
+
};
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
import { R as O, A as H } from "../../../AnimatedTheme-ktdO3Bel.js";
|
|
2
|
+
import { useThemeProps as P, useTheme as W } from "@mui/material";
|
|
3
|
+
import z from "lodash";
|
|
4
|
+
import { useId as Z, useRef as $, useEffect as j } from "react";
|
|
5
|
+
import { humanizeLabel as q } from "../_common/format.js";
|
|
6
|
+
import { colorSetFromPalette as J, applyValueFormat as K } from "../_common/utils.js";
|
|
7
|
+
import { c as i, a as F, p as Q } from "../../../Entity-BJCuhdq_.js";
|
|
8
|
+
import { X as U, V as Y } from "../../../AxisRenderer-BCQoUJw6.js";
|
|
9
|
+
import { L as ee } from "../../../Legend-CFvQiIfn.js";
|
|
10
|
+
import { A as te, a as re } from "../../../AxisRendererY-AXWvGU6r.js";
|
|
11
|
+
import { C as oe } from "../../../ColumnSeries-CtRTsn-E.js";
|
|
12
|
+
import { T as se } from "../../../Tooltip-vyZRZWih.js";
|
|
13
|
+
import { X as ne } from "../../../XYCursor-CVUSpqb9.js";
|
|
14
|
+
const R = "__hcBinStart", _ = "__hcBinEnd", Ne = (C) => {
|
|
15
|
+
const x = P({ props: C, name: "HCHistogram" }), {
|
|
16
|
+
dimensions: p,
|
|
17
|
+
values: u,
|
|
18
|
+
data: A,
|
|
19
|
+
initDelay: B = 0,
|
|
20
|
+
colors: b,
|
|
21
|
+
binWidth: v,
|
|
22
|
+
barGap: y = 0,
|
|
23
|
+
logarithmic: d = !1,
|
|
24
|
+
sx: D,
|
|
25
|
+
...I
|
|
26
|
+
} = x, r = W(), N = `hc-histogram-${Z().replace(/:/g, "")}`, h = $(null), X = p.length < 1 ? "Missing dimensions config!" : u.length < 1 ? "Missing values config!" : null;
|
|
27
|
+
j(() => {
|
|
28
|
+
if (X) return;
|
|
29
|
+
let f;
|
|
30
|
+
return f = setTimeout(() => {
|
|
31
|
+
var k, w;
|
|
32
|
+
const e = O.new(N);
|
|
33
|
+
h.current = e, e.setThemes([H.new(e)]), e.interfaceColors.setAll({
|
|
34
|
+
text: i(r.palette.text.primary),
|
|
35
|
+
grid: i(r.palette.divider),
|
|
36
|
+
stroke: i(r.palette.divider)
|
|
37
|
+
});
|
|
38
|
+
const o = e.container.children.push(
|
|
39
|
+
U.new(e, {
|
|
40
|
+
panX: !1,
|
|
41
|
+
panY: !1,
|
|
42
|
+
wheelX: "none",
|
|
43
|
+
wheelY: "none",
|
|
44
|
+
layout: e.verticalLayout
|
|
45
|
+
})
|
|
46
|
+
);
|
|
47
|
+
o.set("colors", J(e, b));
|
|
48
|
+
const S = o.children.push(
|
|
49
|
+
ee.new(e, {
|
|
50
|
+
centerX: F,
|
|
51
|
+
x: F
|
|
52
|
+
})
|
|
53
|
+
), s = p[0].value, l = u[0], V = l.dataFieldName, m = z.orderBy(
|
|
54
|
+
A.filter(
|
|
55
|
+
(t) => (t == null ? void 0 : t[s]) != null && !Number.isNaN(Number(t[s]))
|
|
56
|
+
),
|
|
57
|
+
[(t) => Number(t[s])]
|
|
58
|
+
);
|
|
59
|
+
let c = 1 / 0;
|
|
60
|
+
for (let t = 1; t < m.length; t++) {
|
|
61
|
+
const n = Number(m[t][s]) - Number(m[t - 1][s]);
|
|
62
|
+
n > 0 && n < c && (c = n);
|
|
63
|
+
}
|
|
64
|
+
const E = v ?? (Number.isFinite(c) ? c : 1), G = m.map((t) => {
|
|
65
|
+
const n = Number(t[s]);
|
|
66
|
+
return { ...t, [R]: n, [_]: n + E };
|
|
67
|
+
}), g = o.xAxes.push(
|
|
68
|
+
Y.new(e, {
|
|
69
|
+
maxDeviation: 0,
|
|
70
|
+
renderer: te.new(e, { minGridDistance: 40 })
|
|
71
|
+
})
|
|
72
|
+
), T = o.yAxes.push(
|
|
73
|
+
Y.new(e, {
|
|
74
|
+
// Linear: frequency bars must grow from a zero baseline, else the auto
|
|
75
|
+
// min crops the axis and distorts relative bar heights. Log: `min: 0`
|
|
76
|
+
// is invalid (log 0 is undefined), so drop it and map zero-count bins
|
|
77
|
+
// to `1` (the axis floor) — those bins then render as no bar.
|
|
78
|
+
...d ? { logarithmic: !0, treatZeroAs: 1 } : { min: 0 },
|
|
79
|
+
renderer: re.new(e, {
|
|
80
|
+
strokeOpacity: 0.1,
|
|
81
|
+
...d ? { minorGridEnabled: !0 } : {}
|
|
82
|
+
})
|
|
83
|
+
})
|
|
84
|
+
);
|
|
85
|
+
(k = g.get("renderer")) == null || k.grid.template.setAll({
|
|
86
|
+
stroke: i(r.palette.divider),
|
|
87
|
+
strokeOpacity: 1
|
|
88
|
+
}), (w = T.get("renderer")) == null || w.grid.template.setAll({
|
|
89
|
+
stroke: i(r.palette.divider),
|
|
90
|
+
strokeOpacity: 1
|
|
91
|
+
});
|
|
92
|
+
const a = o.series.push(
|
|
93
|
+
oe.new(e, {
|
|
94
|
+
name: l.label ?? q(l.name),
|
|
95
|
+
xAxis: g,
|
|
96
|
+
yAxis: T,
|
|
97
|
+
valueYField: V,
|
|
98
|
+
// Explicit [open, value] edges give each bar its exact bin span, so
|
|
99
|
+
// bars sit to numeric scale and a missing bin leaves a real gap.
|
|
100
|
+
openValueXField: R,
|
|
101
|
+
valueXField: _
|
|
102
|
+
})
|
|
103
|
+
), M = Math.min(Math.max(y, 0), 1);
|
|
104
|
+
a.columns.template.setAll({
|
|
105
|
+
width: Q((1 - M) * 100),
|
|
106
|
+
strokeOpacity: 1,
|
|
107
|
+
strokeWidth: 1,
|
|
108
|
+
stroke: i(r.palette.background.paper),
|
|
109
|
+
tooltipText: "{openValueX} – {valueX}: {valueY}"
|
|
110
|
+
}), a.set("tooltip", se.new(e, {})), a.data.setAll(G), a.appear(), S.data.push(a), o.set(
|
|
111
|
+
"cursor",
|
|
112
|
+
ne.new(e, { xAxis: g, behavior: "none" })
|
|
113
|
+
).lineY.set("visible", !1), K(e, l.format), o.appear(1e3, 100);
|
|
114
|
+
}, B), () => {
|
|
115
|
+
var e;
|
|
116
|
+
f && clearTimeout(f), (e = h.current) == null || e.dispose(), h.current = null;
|
|
117
|
+
};
|
|
118
|
+
}, [
|
|
119
|
+
A,
|
|
120
|
+
p,
|
|
121
|
+
u,
|
|
122
|
+
r.palette.mode,
|
|
123
|
+
b,
|
|
124
|
+
v,
|
|
125
|
+
y,
|
|
126
|
+
d
|
|
127
|
+
]);
|
|
128
|
+
const L = { ...x };
|
|
129
|
+
return { chartId: N, ownerState: L, sx: D, error: X, other: I };
|
|
130
|
+
};
|
|
131
|
+
export {
|
|
132
|
+
Ne as useHistogramLogic
|
|
133
|
+
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { R as
|
|
2
|
-
import { useThemeProps as
|
|
3
|
-
import
|
|
1
|
+
import { R as z, T as H, A as Z } from "../../../AnimatedTheme-ktdO3Bel.js";
|
|
2
|
+
import { useThemeProps as $, useTheme as j } from "@mui/material";
|
|
3
|
+
import q from "lodash";
|
|
4
4
|
import { useId as J, useRef as K, useEffect as Q } from "react";
|
|
5
5
|
import { humanizeLabel as ee } from "../_common/format.js";
|
|
6
6
|
import { attachCombinedAxisTooltip as te } from "../_common/tooltip.js";
|
|
7
7
|
import { colorSetFromPalette as re, applyDateAxisLabelFormat as se, applyValueFormat as oe } from "../_common/utils.js";
|
|
8
|
-
import { c as d, p as X, b as
|
|
8
|
+
import { c as d, p as X, b as U } from "../../../Entity-BJCuhdq_.js";
|
|
9
9
|
import { X as ae, V as ie } from "../../../AxisRenderer-BCQoUJw6.js";
|
|
10
|
-
import { A as
|
|
10
|
+
import { A as V, a as ne } from "../../../AxisRendererY-AXWvGU6r.js";
|
|
11
11
|
import { C as le } from "../../../CategoryAxis-B6NqW8qd.js";
|
|
12
12
|
import { L as me } from "../../../LineSeries-D_IL2qGF.js";
|
|
13
13
|
import { D as pe, G as de } from "../../../GaplessDateAxis-B2g2jgSG.js";
|
|
@@ -16,7 +16,7 @@ import { C as ue } from "../../../Circle-BnfBNKBD.js";
|
|
|
16
16
|
import { X as fe } from "../../../XYCursor-CVUSpqb9.js";
|
|
17
17
|
import { L as he } from "../../../Legend-CFvQiIfn.js";
|
|
18
18
|
import { D as Ae } from "../../../DateAxis-DEXKps1S.js";
|
|
19
|
-
const
|
|
19
|
+
const _ = 1.1, ge = {
|
|
20
20
|
millisecond: 1,
|
|
21
21
|
second: 1e3,
|
|
22
22
|
minute: 6e4,
|
|
@@ -26,28 +26,28 @@ const B = 1.1, ge = {
|
|
|
26
26
|
month: 2592e6,
|
|
27
27
|
year: 31536e6
|
|
28
28
|
}, _e = (E) => {
|
|
29
|
-
const b =
|
|
29
|
+
const b = $({ props: E, name: "HCLineChart" }), {
|
|
30
30
|
dimensions: t,
|
|
31
31
|
values: m,
|
|
32
|
-
data:
|
|
32
|
+
data: w,
|
|
33
33
|
initDelay: P = 0,
|
|
34
34
|
baseInterval: n,
|
|
35
35
|
colors: L,
|
|
36
36
|
connectMissingData: k = !0,
|
|
37
|
-
skipEmptyDates:
|
|
37
|
+
skipEmptyDates: C = !1,
|
|
38
38
|
sx: R,
|
|
39
39
|
...W
|
|
40
|
-
} = b, l =
|
|
41
|
-
let
|
|
42
|
-
t.length < 1 ?
|
|
43
|
-
if (
|
|
40
|
+
} = b, l = j(), N = `hc-line-chart-${J().replace(/:/g, "")}`, v = K(null);
|
|
41
|
+
let h = null;
|
|
42
|
+
t.length < 1 ? h = "Missing dimensions config!" : m.length < 1 && (h = "Missing values config!"), Q(() => {
|
|
43
|
+
if (h) return;
|
|
44
44
|
let T;
|
|
45
45
|
return T = setTimeout(() => {
|
|
46
46
|
var G, O, I, M;
|
|
47
|
-
const e =
|
|
48
|
-
|
|
49
|
-
const
|
|
50
|
-
e.setThemes([
|
|
47
|
+
const e = z.new(N);
|
|
48
|
+
v.current = e;
|
|
49
|
+
const S = H.new(e);
|
|
50
|
+
e.setThemes([Z.new(e), S]), e.interfaceColors.setAll({
|
|
51
51
|
text: d(l.palette.text.primary),
|
|
52
52
|
grid: d(l.palette.divider),
|
|
53
53
|
stroke: d(l.palette.divider)
|
|
@@ -65,27 +65,27 @@ const B = 1.1, ge = {
|
|
|
65
65
|
})
|
|
66
66
|
);
|
|
67
67
|
s.set("colors", re(e, L));
|
|
68
|
-
let i,
|
|
68
|
+
let i, A = w;
|
|
69
69
|
if (t[0].type === "date") {
|
|
70
|
-
const o =
|
|
70
|
+
const o = C ? de : Ae;
|
|
71
71
|
i = s.xAxes.push(
|
|
72
72
|
o.new(e, {
|
|
73
73
|
maxDeviation: 0.1,
|
|
74
74
|
groupData: !1,
|
|
75
75
|
baseInterval: n || { timeUnit: "day", count: 1 },
|
|
76
|
-
renderer:
|
|
76
|
+
renderer: V.new(e, {})
|
|
77
77
|
})
|
|
78
|
-
), se(i, t[0]),
|
|
78
|
+
), se(i, t[0]), A = q.orderBy(w, [t[0].value]);
|
|
79
79
|
} else
|
|
80
80
|
i = s.xAxes.push(
|
|
81
81
|
le.new(e, {
|
|
82
82
|
categoryField: t[0].value,
|
|
83
|
-
renderer:
|
|
83
|
+
renderer: V.new(e, {})
|
|
84
84
|
})
|
|
85
85
|
), e.numberFormatter.setAll({
|
|
86
86
|
numberFormat: "#",
|
|
87
87
|
numericFields: ["valueX"]
|
|
88
|
-
}),
|
|
88
|
+
}), i.data.setAll(A);
|
|
89
89
|
const Y = s.yAxes.push(
|
|
90
90
|
ie.new(e, {
|
|
91
91
|
renderer: ne.new(e, {})
|
|
@@ -111,24 +111,24 @@ const B = 1.1, ge = {
|
|
|
111
111
|
// `autoGapCount` (default 1.1) base intervals apart, so absent dates
|
|
112
112
|
// surface as gaps instead of being bridged by a straight segment.
|
|
113
113
|
connect: k,
|
|
114
|
-
autoGapCount:
|
|
114
|
+
autoGapCount: _,
|
|
115
115
|
...t[0].type === "date" ? { valueXField: t[0].value } : { categoryXField: t[0].value }
|
|
116
116
|
})
|
|
117
117
|
);
|
|
118
118
|
if (t[0].type === "date" && (a.data.processor = pe.new(e, {
|
|
119
119
|
dateFormat: "i",
|
|
120
120
|
dateFields: [t[0].value]
|
|
121
|
-
})), t[0].type === "date" && !
|
|
122
|
-
const
|
|
123
|
-
t: new Date(r[
|
|
121
|
+
})), t[0].type === "date" && !C) {
|
|
122
|
+
const g = t[0].value, y = ge[(n == null ? void 0 : n.timeUnit) ?? "day"] * ((n == null ? void 0 : n.count) ?? 1), p = k ? 1 / 0 : y * _, x = A.map((r) => ({
|
|
123
|
+
t: new Date(r[g]).getTime(),
|
|
124
124
|
hasValue: r[o.dataFieldName] !== null && r[o.dataFieldName] !== void 0
|
|
125
125
|
})).filter((r) => r.hasValue && !Number.isNaN(r.t)), D = /* @__PURE__ */ new Set();
|
|
126
|
-
|
|
127
|
-
const F =
|
|
128
|
-
F > p &&
|
|
129
|
-
}), D.size > 0 && a.bullets.push((r,
|
|
130
|
-
const
|
|
131
|
-
if (D.has(new Date(
|
|
126
|
+
x.forEach((r, u) => {
|
|
127
|
+
const F = u > 0 ? r.t - x[u - 1].t : 1 / 0, f = u < x.length - 1 ? x[u + 1].t - r.t : 1 / 0;
|
|
128
|
+
F > p && f > p && D.add(r.t);
|
|
129
|
+
}), D.size > 0 && a.bullets.push((r, u, F) => {
|
|
130
|
+
const f = F.dataContext;
|
|
131
|
+
if (D.has(new Date(f == null ? void 0 : f[g]).getTime()))
|
|
132
132
|
return ce.new(r, {
|
|
133
133
|
sprite: ue.new(r, {
|
|
134
134
|
radius: 3,
|
|
@@ -139,7 +139,7 @@ const B = 1.1, ge = {
|
|
|
139
139
|
});
|
|
140
140
|
});
|
|
141
141
|
}
|
|
142
|
-
a.data.setAll(
|
|
142
|
+
a.data.setAll(A), a.strokes.template.setAll({ strokeWidth: 2 }), a.appear();
|
|
143
143
|
}), s.set(
|
|
144
144
|
"cursor",
|
|
145
145
|
fe.new(e, { xAxis: i, behavior: "none" })
|
|
@@ -152,7 +152,7 @@ const B = 1.1, ge = {
|
|
|
152
152
|
baseInterval: n,
|
|
153
153
|
follow: !0
|
|
154
154
|
});
|
|
155
|
-
const
|
|
155
|
+
const c = s.bottomAxesContainer.children.push(
|
|
156
156
|
he.new(e, {
|
|
157
157
|
width: X(100),
|
|
158
158
|
paddingTop: 10,
|
|
@@ -161,16 +161,16 @@ const B = 1.1, ge = {
|
|
|
161
161
|
layout: e.gridLayout
|
|
162
162
|
})
|
|
163
163
|
);
|
|
164
|
-
|
|
165
|
-
var
|
|
166
|
-
const a = o.target,
|
|
164
|
+
c.itemContainers.template.events.on("pointerover", function(o) {
|
|
165
|
+
var y;
|
|
166
|
+
const a = o.target, g = (y = a == null ? void 0 : a.dataItem) == null ? void 0 : y.dataContext;
|
|
167
167
|
s.series.each(function(p) {
|
|
168
|
-
p !==
|
|
168
|
+
p !== g ? p.strokes.template.setAll({
|
|
169
169
|
strokeOpacity: 0.15,
|
|
170
170
|
stroke: d(0)
|
|
171
171
|
}) : p.strokes.template.setAll({ strokeWidth: 3 });
|
|
172
172
|
});
|
|
173
|
-
}),
|
|
173
|
+
}), c.itemContainers.template.events.on("pointerout", function() {
|
|
174
174
|
s.series.each(function(o) {
|
|
175
175
|
o.strokes.template.setAll({
|
|
176
176
|
strokeOpacity: 1,
|
|
@@ -178,25 +178,25 @@ const B = 1.1, ge = {
|
|
|
178
178
|
stroke: o.get("fill")
|
|
179
179
|
});
|
|
180
180
|
});
|
|
181
|
-
}),
|
|
182
|
-
width:
|
|
181
|
+
}), c.itemContainers.template.set("width", U), c.valueLabels.template.setAll({
|
|
182
|
+
width: U,
|
|
183
183
|
textAlign: "right"
|
|
184
|
-
}),
|
|
184
|
+
}), c.data.setAll(s.series.values), oe(e, (M = m == null ? void 0 : m[0]) == null ? void 0 : M.format), s.appear(1e3, 100);
|
|
185
185
|
}, P), () => {
|
|
186
186
|
var e;
|
|
187
|
-
T && clearTimeout(T), (e =
|
|
187
|
+
T && clearTimeout(T), (e = v.current) == null || e.dispose(), v.current = null;
|
|
188
188
|
};
|
|
189
189
|
}, [
|
|
190
|
-
|
|
190
|
+
w,
|
|
191
191
|
t,
|
|
192
192
|
m,
|
|
193
193
|
l.palette.mode,
|
|
194
194
|
L,
|
|
195
195
|
k,
|
|
196
|
-
|
|
196
|
+
C
|
|
197
197
|
]);
|
|
198
|
-
const
|
|
199
|
-
return { chartId: N, ownerState:
|
|
198
|
+
const B = { ...b };
|
|
199
|
+
return { chartId: N, ownerState: B, sx: R, error: h, other: W };
|
|
200
200
|
};
|
|
201
201
|
export {
|
|
202
202
|
_e as useLineChartLogic
|