datajunction-ui
Version:
DataJunction UI
1,407 lines (1,405 loc) • 44.7 kB
JavaScript
import { jsxs as N, jsx as u } from "react/jsx-runtime";
import * as f from "react";
import { PureComponent as Ze, useMemo as Y, useRef as he, useState as _, useCallback as Me, forwardRef as ga, useContext as ba, useEffect as me, memo as xa } from "react";
import { useLocation as Aa, useNavigate as Ca } from "react-router-dom";
import { aE as Ie, bR as we, bQ as Na, bL as qe, bY as Ue, bW as $e, be as Je, aR as je, bZ as ka, aY as Ia, a6 as wa, a$ as He, bC as Pa, cs as Sa, ct as Ea, cA as La, cq as Oa, cE as Da, G as _a, ck as Ba, az as Qe, bi as ea, aI as ne, bf as aa, y as oe, b1 as Te, aU as Re, bk as se, c as Ka, bb as re, bh as Ma, h as Ce, bn as fe, ax as $a, D as ja, aa as pe, ag as Ta, i as Ra } from "./index-n79cxNwC.js";
import { b as Wa, e as za, g as Va, G as Fa, u as Xa, L as Ga, C as Ya, R as Za, a as qa, c as Ua, X as Ja, Y as Ha, B as Qa } from "./BarChart-JyKNSAsC.js";
import { A as We, D as et, a as at, L as tt } from "./LineChart-B9ulwx-b.js";
import { L as rt } from "./Legend-CTc9jmzF.js";
var ta = (e, a, t, r) => qe(e, "xAxis", a, r), ra = (e, a, t, r) => Ue(e, "xAxis", a, r), na = (e, a, t, r) => qe(e, "yAxis", t, r), sa = (e, a, t, r) => Ue(e, "yAxis", t, r), nt = Ie([we, ta, na, ra, sa], (e, a, t, r, i) => Je(e, "xAxis") ? je(a, r, !1) : je(t, i, !1)), st = (e, a, t, r, i) => {
var l, h = we(e), m = Je(h, "xAxis"), d;
if (m ? d = $e(e, "yAxis", t, r) : d = $e(e, "xAxis", a, r), d != null) {
var {
dataKey: x,
stackId: p
} = i;
if (p != null) {
var w = (l = d[p]) === null || l === void 0 ? void 0 : l.stackedData;
return w == null ? void 0 : w.find((A) => A.key === x);
}
}
}, it = (e, a, t, r, i) => i, lt = Ie([ka, it], (e, a) => {
if (e.some((t) => t.type === "area" && a.dataKey === t.dataKey && Ia(a.stackId) === t.stackId && a.data === t.data))
return a;
}), ot = Ie([we, ta, na, ra, sa, st, Na, nt, lt], (e, a, t, r, i, l, h, m, d) => {
var {
chartData: x,
dataStartIndex: p,
dataEndIndex: w
} = h;
if (!(d == null || e !== "horizontal" && e !== "vertical" || a == null || t == null || r == null || i == null || r.length === 0 || i.length === 0 || m == null)) {
var {
data: A
} = d, S;
if (A && A.length > 0 ? S = A : S = x == null ? void 0 : x.slice(p, w + 1), S != null) {
var v = void 0;
return Pt({
layout: e,
xAxis: a,
yAxis: t,
xAxisTicks: r,
yAxisTicks: i,
dataStartIndex: p,
areaSettings: d,
stackedData: l,
displayedData: S,
chartBaseValue: v,
bandSize: m
});
}
}
}), ct = ["layout", "type", "stroke", "connectNulls", "isRange"], ut = ["activeDot", "animationBegin", "animationDuration", "animationEasing", "connectNulls", "dot", "fill", "fillOpacity", "hide", "isAnimationActive", "legendType", "stroke", "xAxisId", "yAxisId"];
function ia(e, a) {
if (e == null) return {};
var t, r, i = dt(e, a);
if (Object.getOwnPropertySymbols) {
var l = Object.getOwnPropertySymbols(e);
for (r = 0; r < l.length; r++) t = l[r], a.indexOf(t) === -1 && {}.propertyIsEnumerable.call(e, t) && (i[t] = e[t]);
}
return i;
}
function dt(e, a) {
if (e == null) return {};
var t = {};
for (var r in e) if ({}.hasOwnProperty.call(e, r)) {
if (a.indexOf(r) !== -1) continue;
t[r] = e[r];
}
return t;
}
function ze(e, a) {
var t = Object.keys(e);
if (Object.getOwnPropertySymbols) {
var r = Object.getOwnPropertySymbols(e);
a && (r = r.filter(function(i) {
return Object.getOwnPropertyDescriptor(e, i).enumerable;
})), t.push.apply(t, r);
}
return t;
}
function te(e) {
for (var a = 1; a < arguments.length; a++) {
var t = arguments[a] != null ? arguments[a] : {};
a % 2 ? ze(Object(t), !0).forEach(function(r) {
ye(e, r, t[r]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ze(Object(t)).forEach(function(r) {
Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
});
}
return e;
}
function ye(e, a, t) {
return (a = mt(a)) in e ? Object.defineProperty(e, a, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[a] = t, e;
}
function mt(e) {
var a = pt(e, "string");
return typeof a == "symbol" ? a : a + "";
}
function pt(e, a) {
if (typeof e != "object" || !e) return e;
var t = e[Symbol.toPrimitive];
if (t !== void 0) {
var r = t.call(e, a);
if (typeof r != "object") return r;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (a === "string" ? String : Number)(e);
}
function H() {
return H = Object.assign ? Object.assign.bind() : function(e) {
for (var a = 1; a < arguments.length; a++) {
var t = arguments[a];
for (var r in t) ({}).hasOwnProperty.call(t, r) && (e[r] = t[r]);
}
return e;
}, H.apply(null, arguments);
}
function ve(e, a) {
return e && e !== "none" ? e : a;
}
var ht = (e) => {
var {
dataKey: a,
name: t,
stroke: r,
fill: i,
legendType: l,
hide: h
} = e;
return [{
inactive: h,
dataKey: a,
type: l,
color: ve(r, i),
value: He(t, a),
payload: e
}];
};
function ft(e) {
var {
dataKey: a,
data: t,
stroke: r,
strokeWidth: i,
fill: l,
name: h,
hide: m,
unit: d
} = e;
return {
dataDefinedOnItem: t,
positions: void 0,
settings: {
stroke: r,
strokeWidth: i,
fill: l,
dataKey: a,
nameKey: void 0,
name: He(h, a),
hide: m,
type: e.tooltipType,
color: ve(r, l),
unit: d
}
};
}
var vt = (e, a) => {
var t;
if (/* @__PURE__ */ f.isValidElement(e))
t = /* @__PURE__ */ f.cloneElement(e, a);
else if (typeof e == "function")
t = e(a);
else {
var r = Qe("recharts-area-dot", typeof e != "boolean" ? e.className : "");
t = /* @__PURE__ */ f.createElement(et, H({}, a, {
className: r
}));
}
return t;
};
function yt(e, a) {
return e == null ? !1 : a ? !0 : e.length === 1;
}
function gt(e) {
var {
clipPathId: a,
points: t,
props: r
} = e, {
needClip: i,
dot: l,
dataKey: h
} = r;
if (!yt(t, l))
return null;
var m = aa(l), d = ne(r, !1), x = ne(l, !0), p = t.map((A, S) => {
var v = te(te(te({
key: "dot-".concat(S),
r: 3
}, d), x), {}, {
index: S,
cx: A.x,
cy: A.y,
dataKey: h,
value: A.value,
payload: A.payload,
points: t
});
return vt(l, v);
}), w = {
clipPath: i ? "url(#clipPath-".concat(m ? "" : "dots-").concat(a, ")") : void 0
};
return /* @__PURE__ */ f.createElement(oe, H({
className: "recharts-area-dots"
}, w), p);
}
function ke(e) {
var {
points: a,
baseLine: t,
needClip: r,
clipPathId: i,
props: l,
showLabels: h
} = e, {
layout: m,
type: d,
stroke: x,
connectNulls: p,
isRange: w
} = l, A = ia(l, ct);
return /* @__PURE__ */ f.createElement(f.Fragment, null, (a == null ? void 0 : a.length) > 1 && /* @__PURE__ */ f.createElement(oe, {
clipPath: r ? "url(#clipPath-".concat(i, ")") : void 0
}, /* @__PURE__ */ f.createElement(Ce, H({}, ne(A, !0), {
points: a,
connectNulls: p,
type: d,
baseLine: t,
layout: m,
stroke: "none",
className: "recharts-area-area"
})), x !== "none" && /* @__PURE__ */ f.createElement(Ce, H({}, ne(l, !1), {
className: "recharts-area-curve",
layout: m,
type: d,
connectNulls: p,
fill: "none",
points: a
})), x !== "none" && w && /* @__PURE__ */ f.createElement(Ce, H({}, ne(l, !1), {
className: "recharts-area-curve",
layout: m,
type: d,
connectNulls: p,
fill: "none",
points: t
}))), /* @__PURE__ */ f.createElement(gt, {
points: a,
props: l,
clipPathId: i
}), h && Ga.renderCallByParent(l, a));
}
function bt(e) {
var {
alpha: a,
baseLine: t,
points: r,
strokeWidth: i
} = e, l = r[0].y, h = r[r.length - 1].y;
if (!fe(l) || !fe(h))
return null;
var m = a * Math.abs(l - h), d = Math.max(...r.map((x) => x.x || 0));
return se(t) ? d = Math.max(t, d) : t && Array.isArray(t) && t.length && (d = Math.max(...t.map((x) => x.x || 0), d)), se(d) ? /* @__PURE__ */ f.createElement("rect", {
x: 0,
y: l < h ? l : l - m,
width: d + (i ? parseInt("".concat(i), 10) : 1),
height: Math.floor(m)
}) : null;
}
function xt(e) {
var {
alpha: a,
baseLine: t,
points: r,
strokeWidth: i
} = e, l = r[0].x, h = r[r.length - 1].x;
if (!fe(l) || !fe(h))
return null;
var m = a * Math.abs(l - h), d = Math.max(...r.map((x) => x.y || 0));
return se(t) ? d = Math.max(t, d) : t && Array.isArray(t) && t.length && (d = Math.max(...t.map((x) => x.y || 0), d)), se(d) ? /* @__PURE__ */ f.createElement("rect", {
x: l < h ? l : l - m,
y: 0,
width: m,
height: Math.floor(d + (i ? parseInt("".concat(i), 10) : 1))
}) : null;
}
function At(e) {
var {
alpha: a,
layout: t,
points: r,
baseLine: i,
strokeWidth: l
} = e;
return t === "vertical" ? /* @__PURE__ */ f.createElement(bt, {
alpha: a,
points: r,
baseLine: i,
strokeWidth: l
}) : /* @__PURE__ */ f.createElement(xt, {
alpha: a,
points: r,
baseLine: i,
strokeWidth: l
});
}
function Ct(e) {
var {
needClip: a,
clipPathId: t,
props: r,
previousPointsRef: i,
previousBaselineRef: l
} = e, {
points: h,
baseLine: m,
isAnimationActive: d,
animationBegin: x,
animationDuration: p,
animationEasing: w,
onAnimationStart: A,
onAnimationEnd: S
} = r, v = Xa(r, "recharts-area-"), [D, k] = _(!0), B = Me(() => {
typeof S == "function" && S(), k(!1);
}, [S]), E = Me(() => {
typeof A == "function" && A(), k(!0);
}, [A]), L = i.current, C = l.current;
return /* @__PURE__ */ f.createElement(Ka, {
begin: x,
duration: p,
isActive: d,
easing: w,
from: {
t: 0
},
to: {
t: 1
},
onAnimationEnd: B,
onAnimationStart: E,
key: v
}, (O) => {
var {
t: g
} = O;
if (L) {
var T = L.length / h.length, R = (
/*
* Here it is important that at the very end of the animation, on the last frame,
* we render the original points without any interpolation.
* This is needed because the code above is checking for reference equality to decide if the animation should run
* and if we create a new array instance (even if the numbers were the same)
* then we would break animations.
*/
g === 1 ? h : h.map((K, Z) => {
var X = Math.floor(Z * T);
if (L[X]) {
var M = L[X];
return te(te({}, K), {}, {
x: re(M.x, K.x, g),
y: re(M.y, K.y, g)
});
}
return K;
})
), W;
return se(m) ? W = re(C, m, g) : ea(m) || Ma(m) ? W = re(C, 0, g) : W = m.map((K, Z) => {
var X = Math.floor(Z * T);
if (Array.isArray(C) && C[X]) {
var M = C[X];
return te(te({}, K), {}, {
x: re(M.x, K.x, g),
y: re(M.y, K.y, g)
});
}
return K;
}), g > 0 && (i.current = R, l.current = W), /* @__PURE__ */ f.createElement(ke, {
points: R,
baseLine: W,
needClip: a,
clipPathId: t,
props: r,
showLabels: !D
});
}
return g > 0 && (i.current = h, l.current = m), /* @__PURE__ */ f.createElement(oe, null, /* @__PURE__ */ f.createElement("defs", null, /* @__PURE__ */ f.createElement("clipPath", {
id: "animationClipPath-".concat(t)
}, /* @__PURE__ */ f.createElement(At, {
alpha: g,
points: h,
baseLine: m,
layout: r.layout,
strokeWidth: r.strokeWidth
}))), /* @__PURE__ */ f.createElement(oe, {
clipPath: "url(#animationClipPath-".concat(t, ")")
}, /* @__PURE__ */ f.createElement(ke, {
points: h,
baseLine: m,
needClip: a,
clipPathId: t,
props: r,
showLabels: !0
})));
});
}
function Nt(e) {
var {
needClip: a,
clipPathId: t,
props: r
} = e, {
points: i,
baseLine: l,
isAnimationActive: h
} = r, m = he(null), d = he(), x = m.current, p = d.current;
return h && /*
* Here it's important that we unmount of AreaWithAnimation in case points are undefined
* - this will make sure to interrupt the animation if it's running.
* We still get to keep the last shape of the animation in the refs above.
*/
i && i.length && (x !== i || p !== l) ? /* @__PURE__ */ f.createElement(Ct, {
needClip: a,
clipPathId: t,
props: r,
previousPointsRef: m,
previousBaselineRef: d
}) : /* @__PURE__ */ f.createElement(ke, {
points: i,
baseLine: l,
needClip: a,
clipPathId: t,
props: r,
showLabels: !0
});
}
class kt extends Ze {
constructor() {
super(...arguments), ye(this, "id", Ba("recharts-area-"));
}
render() {
var a, {
hide: t,
dot: r,
points: i,
className: l,
top: h,
left: m,
needClip: d,
xAxisId: x,
yAxisId: p,
width: w,
height: A,
id: S,
baseLine: v
} = this.props;
if (t)
return null;
var D = Qe("recharts-area", l), k = ea(S) ? this.id : S, {
r: B = 3,
strokeWidth: E = 2
} = (a = ne(r, !1)) !== null && a !== void 0 ? a : {
r: 3,
strokeWidth: 2
}, L = aa(r), C = B * 2 + E;
return /* @__PURE__ */ f.createElement(f.Fragment, null, /* @__PURE__ */ f.createElement(oe, {
className: D
}, d && /* @__PURE__ */ f.createElement("defs", null, /* @__PURE__ */ f.createElement(Fa, {
clipPathId: k,
xAxisId: x,
yAxisId: p
}), !L && /* @__PURE__ */ f.createElement("clipPath", {
id: "clipPath-dots-".concat(k)
}, /* @__PURE__ */ f.createElement("rect", {
x: m - C / 2,
y: h - C / 2,
width: w + C,
height: A + C
}))), /* @__PURE__ */ f.createElement(Nt, {
needClip: d,
clipPathId: k,
props: this.props
})), /* @__PURE__ */ f.createElement(We, {
points: i,
mainColor: ve(this.props.stroke, this.props.fill),
itemDataKey: this.props.dataKey,
activeDot: this.props.activeDot
}), this.props.isRange && Array.isArray(v) && /* @__PURE__ */ f.createElement(We, {
points: v,
mainColor: ve(this.props.stroke, this.props.fill),
itemDataKey: this.props.dataKey,
activeDot: this.props.activeDot
}));
}
}
var la = {
activeDot: !0,
animationBegin: 0,
animationDuration: 1500,
animationEasing: "ease",
connectNulls: !1,
dot: !1,
fill: "#3182bd",
fillOpacity: 0.6,
hide: !1,
isAnimationActive: !_a.isSsr,
legendType: "line",
stroke: "#3182bd",
xAxisId: 0,
yAxisId: 0
};
function It(e) {
var a, t = Pa(e, la), {
activeDot: r,
animationBegin: i,
animationDuration: l,
animationEasing: h,
connectNulls: m,
dot: d,
fill: x,
fillOpacity: p,
hide: w,
isAnimationActive: A,
legendType: S,
stroke: v,
xAxisId: D,
yAxisId: k
} = t, B = ia(t, ut), E = Sa(), L = Ea(), {
needClip: C
} = Va(D, k), O = La(), g = Y(() => ({
baseValue: e.baseValue,
stackId: e.stackId,
connectNulls: m,
data: e.data,
dataKey: e.dataKey
}), [e.baseValue, e.stackId, m, e.data, e.dataKey]), {
points: T,
isRange: R,
baseLine: W
} = (a = Oa((G) => ot(G, D, k, O, g))) !== null && a !== void 0 ? a : {}, {
height: K,
width: Z,
left: X,
top: M
} = Da();
return E !== "horizontal" && E !== "vertical" || L !== "AreaChart" && L !== "ComposedChart" ? null : /* @__PURE__ */ f.createElement(kt, H({}, B, {
activeDot: r,
animationBegin: i,
animationDuration: l,
animationEasing: h,
baseLine: W,
connectNulls: m,
dot: d,
fill: x,
fillOpacity: p,
height: K,
hide: w,
layout: E,
isAnimationActive: A,
isRange: R,
legendType: S,
needClip: C,
points: T,
stroke: v,
width: Z,
left: X,
top: M,
xAxisId: D,
yAxisId: k
}));
}
var wt = (e, a, t, r, i) => {
var l = t ?? a;
if (se(l))
return l;
var h = e === "horizontal" ? i : r, m = h.scale.domain();
if (h.type === "number") {
var d = Math.max(m[0], m[1]), x = Math.min(m[0], m[1]);
return l === "dataMin" ? x : l === "dataMax" || d < 0 ? d : Math.max(Math.min(m[0], m[1]), 0);
}
return l === "dataMin" ? m[0] : l === "dataMax" ? m[1] : m[0];
};
function Pt(e) {
var {
areaSettings: {
connectNulls: a,
baseValue: t,
dataKey: r
},
stackedData: i,
layout: l,
chartBaseValue: h,
xAxis: m,
yAxis: d,
displayedData: x,
dataStartIndex: p,
xAxisTicks: w,
yAxisTicks: A,
bandSize: S
} = e, v = i && i.length, D = wt(l, h, t, m, d), k = l === "horizontal", B = !1, E = x.map((C, O) => {
var g;
v ? g = i[p + O] : (g = Te(C, r), Array.isArray(g) ? B = !0 : g = [D, g]);
var T = g[1] == null || v && !a && Te(C, r) == null;
return k ? {
// @ts-expect-error getCateCoordinateOfLine expects chart data to be an object, we allow unknown
x: Re({
axis: m,
ticks: w,
bandSize: S,
entry: C,
index: O
}),
y: T ? null : d.scale(g[1]),
value: g,
payload: C
} : {
x: T ? null : m.scale(g[1]),
// @ts-expect-error getCateCoordinateOfLine expects chart data to be an object, we allow unknown
y: Re({
axis: d,
ticks: A,
bandSize: S,
entry: C,
index: O
}),
value: g,
payload: C
};
}), L;
return v || B ? L = E.map((C) => {
var O = Array.isArray(C.value) ? C.value[0] : null;
return k ? {
x: C.x,
y: O != null && C.y != null ? d.scale(O) : null
} : {
x: O != null ? m.scale(O) : null,
y: C.y
};
}) : L = k ? d.scale(D) : m.scale(D), {
points: E,
baseLine: L,
isRange: B
};
}
class Pe extends Ze {
render() {
return /* @__PURE__ */ f.createElement(Wa, {
type: "area",
data: this.props.data,
dataKey: this.props.dataKey,
xAxisId: this.props.xAxisId,
yAxisId: this.props.yAxisId,
zAxisId: 0,
stackId: this.props.stackId,
hide: this.props.hide,
barSize: void 0
}, /* @__PURE__ */ f.createElement(za, {
legendPayload: ht(this.props)
}), /* @__PURE__ */ f.createElement(wa, {
fn: ft,
args: this.props
}), /* @__PURE__ */ f.createElement(It, this.props));
}
}
ye(Pe, "displayName", "Area");
ye(Pe, "defaultProps", la);
var St = ["axis"], Et = /* @__PURE__ */ ga((e, a) => /* @__PURE__ */ f.createElement(Ya, {
chartName: "AreaChart",
defaultTooltipEventType: "axis",
validateTooltipEventTypes: St,
tooltipPayloadSearcher: $a,
categoricalChartProps: e,
ref: a
}));
const Ve = [
"#3b51d6",
"#00C49F",
"#FFBB28",
"#FF91A3",
"#AA46BE",
"#0088FE",
"#FF8042",
"#82ca9d"
], Fe = {
source: "#22c55e",
// bright emerald
transform: "#3b82f6",
// bright blue
metric: "#f43f5e",
// bright rose
dimension: "#f59e0b",
// bright amber
cube: "#a855f7",
// bright purple
tag: "#8b5cf6"
// bright violet
}, Lt = (e, a) => {
if (!e) return { color: a, opacity: 0.85 };
const t = String(e).toLowerCase();
return Fe[t] ? { color: Fe[t], opacity: 0.85 } : { color: a, opacity: 0.85 };
}, Xe = [
{ value: "=", label: "=" },
{ value: "!=", label: "≠" },
{ value: "in", label: "is one of" },
{ value: ">", label: ">" },
{ value: "<", label: "<" },
{ value: ">=", label: "≥" },
{ value: "<=", label: "≤" }
], Ge = (e) => /(_date|_week|_month|_quarter|_year|_day|dateint|created_at)/i.test(e), Ot = (e) => {
if (!e) return "#";
const a = String(e).toLowerCase();
return /(bool)/.test(a) ? "✓" : /(date|time)/.test(a) ? "📅" : /(int|long|double|float|decimal|numeric|number)/.test(a) ? "123" : /(string|varchar|char|text)/.test(a) ? "Aa" : /(list|array)/.test(a) ? "[ ]" : "#";
}, Ne = {
groupHeading: (e) => ({
...e,
fontSize: 10.5,
fontWeight: 600,
textTransform: "uppercase",
letterSpacing: "0.04em",
color: "#64748b",
padding: "6px 12px 2px"
}),
option: (e, a) => ({
...e,
paddingLeft: a.data && a.data.group ? 28 : e.paddingLeft
}),
group: (e) => ({
...e,
paddingTop: 4,
paddingBottom: 4
})
};
function Dt({ active: e, payload: a, label: t }) {
if (!e || !a || !a.length) return null;
const r = a.filter((i) => i && i.value !== 0 && i.value != null);
return r.length ? /* @__PURE__ */ N(
"div",
{
style: {
background: "#fff",
border: "1px solid #e2e8f0",
borderRadius: 6,
padding: "8px 10px",
fontSize: 12,
boxShadow: "0 2px 8px rgba(0,0,0,0.08)"
},
children: [
/* @__PURE__ */ u("div", { style: { fontWeight: 600, marginBottom: 4, color: "#1e293b" }, children: t }),
r.map((i) => /* @__PURE__ */ N(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: 6,
color: "#334155"
},
children: [
/* @__PURE__ */ u(
"span",
{
style: {
display: "inline-block",
width: 9,
height: 9,
background: i.color,
borderRadius: 2
}
}
),
/* @__PURE__ */ u("span", { children: i.name }),
/* @__PURE__ */ u(
"span",
{
style: { marginLeft: "auto", fontVariantNumeric: "tabular-nums" },
children: typeof i.value == "number" ? i.value.toLocaleString() : i.value
}
)
]
},
i.dataKey
))
]
}
) : null;
}
const Ye = (e) => typeof e == "number" || typeof e == "string" && /^-?\d+(\.\d+)?$/.test(e), _t = xa(function({
chartData: a,
resolvedChartType: t,
startAtZero: r
}) {
const i = a.series.length > 1, l = t === "line", h = t === "area";
return /* @__PURE__ */ u("div", { className: "sme-chart-body", children: /* @__PURE__ */ u(Za, { width: "100%", height: "100%", children: /* @__PURE__ */ N(
h ? Et : l ? at : qa,
{
data: a.data,
margin: { top: 10, right: 30, left: 10, bottom: 20 },
children: [
/* @__PURE__ */ u(Ua, { strokeDasharray: "3 3", stroke: "#eee" }),
/* @__PURE__ */ u(Ja, { dataKey: a.xKey, tick: { fontSize: 12 } }),
/* @__PURE__ */ u(
Ha,
{
tick: { fontSize: 12 },
domain: r ? [0, "auto"] : ["auto", "auto"]
}
),
/* @__PURE__ */ u(
Ta,
{
content: /* @__PURE__ */ u(Dt, {}),
isAnimationActive: !1,
cursor: { fill: "rgba(15, 23, 42, 0.04)" }
}
),
i ? /* @__PURE__ */ u(rt, {}) : null,
a.series.map((d, x) => {
const p = a.labels[d] || d, { color: w, opacity: A } = Lt(
p,
Ve[x % Ve.length]
);
return h ? /* @__PURE__ */ u(
Pe,
{
type: "monotone",
dataKey: d,
name: p,
stackId: i ? "1" : void 0,
stroke: w,
fill: w,
fillOpacity: A,
isAnimationActive: !1,
activeDot: !1
},
d
) : l ? /* @__PURE__ */ u(
tt,
{
type: "monotone",
dataKey: d,
name: p,
stroke: w,
strokeWidth: 2,
dot: !1,
isAnimationActive: !1,
activeDot: !1
},
d
) : /* @__PURE__ */ u(
Qa,
{
dataKey: d,
name: p,
fill: w,
fillOpacity: A,
stackId: i ? "1" : void 0,
isAnimationActive: !1,
activeBar: !1
},
d
);
})
]
}
) }) });
});
function Bt(e) {
const a = new URLSearchParams(e), t = a.getAll("filter").map((r) => {
const [i = "", l = "=", ...h] = r.split("|");
return { dim: i, op: l, value: h.join("|") };
}).filter((r) => r.dim);
return {
metric: a.get("metric") || null,
xAxis: a.get("x") || null,
compareBy: (a.get("by") || "").split(",").filter(Boolean),
filters: t,
view: a.get("view") === "table" ? "table" : "chart",
chartType: ["line", "area", "bar", "auto"].includes(a.get("chart")) ? a.get("chart") : "auto",
startAtZero: a.get("zero") === "1"
};
}
function Kt() {
const e = ba(ja).DataJunctionAPI, a = Aa(), t = Ca(), r = Y(() => Bt(a.search), []), [i, l] = _([]), [h, m] = _(""), [d, x] = _(""), [p, w] = _(r.metric), [A, S] = _([]), [v, D] = _(null), [k, B] = _([]), [E, L] = _(r.filters), C = he(r.xAxis), O = he(r.compareBy), [g, T] = _(null), [R, W] = _([]), [K, Z] = _(!1), [X, M] = _(null), [G, Se] = _(r.view), [Q, oa] = _(r.chartType), [ce, ca] = _(r.startAtZero);
me(() => {
let n = !1;
return (async () => {
try {
const s = await e.system.list();
if (n) return;
if (!Array.isArray(s)) {
M(
`Unexpected response from /system/metrics: ${JSON.stringify(
s
).slice(0, 200)}`
), l([]);
return;
}
const o = s.map((c) => {
if (typeof c == "string")
return {
name: c,
display_name: c,
description: "",
group: "Other",
subgroup: "Other",
suggestedCompareBy: []
};
const y = c.custom_metadata || {};
return {
name: c.name,
display_name: c.display_name || c.name,
description: c.description || "",
group: y.group || "Other",
subgroup: y.subgroup || "Other",
suggestedCompareBy: Array.isArray(y.suggested_compare_by) ? y.suggested_compare_by : []
};
});
l(o), o.length && !p && w(o[0].name);
} catch (s) {
n || M(String(s));
}
})(), () => {
n = !0;
};
}, [e]), me(() => {
if (!p) {
S([]);
return;
}
let n = !1;
return D(null), B([]), T(null), W([]), M(null), (async () => {
try {
const s = await e.commonDimensions([p]);
if (n) return;
const o = (Array.isArray(s) ? s : []).map((c) => {
const y = c.name.match(/\[([^\]]+)\]$/), b = y ? y[1] : null, z = (b ? c.name.slice(0, -y[0].length) : c.name).split("."), q = z[z.length - 1], V = c.node_display_name || z.slice(0, -1).join("."), ie = c.column_display_name || q, ee = b ? `${V} [${b}]` : V;
return {
value: c.name,
label: ie,
// Combined label used in search and in some narrow contexts.
combinedLabel: `${ee} · ${ie}`,
attr: q,
nodeDisplay: V,
colDisplay: ie,
role: b,
group: ee,
path: c.path.join(" ▶ "),
type: c.type
};
});
if (S(o), C.current) {
const c = o.find((y) => y.value === C.current);
c && D(c), C.current = null;
} else {
const y = o.find((b) => /_week\b/i.test(b.value)) || o.find((b) => Ge(b.value));
y && D(y);
}
if (O.current && O.current.length) {
const c = O.current.map((y) => o.find((b) => b.value === y)).filter(Boolean);
c.length && B(c), O.current = null;
} else {
const c = i.find((b) => b.name === p), y = c && c.suggestedCompareBy || [];
if (y.length) {
const b = y.map(($) => o.find((z) => z.value === $)).filter(Boolean);
b.length && B(b);
}
}
} catch (s) {
n || M(String(s));
}
})(), () => {
n = !0;
};
}, [p, e]), me(() => {
const n = new URLSearchParams();
p && n.set("metric", p), v && n.set("x", v.value), k.length && n.set("by", k.map((c) => c.value).join(",")), E.forEach((c) => {
c.dim && c.op && n.append("filter", `${c.dim}|${c.op}|${c.value ?? ""}`);
}), G !== "chart" && n.set("view", G), Q !== "auto" && n.set("chart", Q), ce && n.set("zero", "1");
const s = n.toString(), o = window.location.search.replace(/^\?/, "");
s !== o && t(
{ pathname: window.location.pathname, search: s ? `?${s}` : "" },
{ replace: !0 }
);
}, [
p,
v,
k,
E,
G,
Q,
ce,
t
]), me(() => {
if (!p) return;
let n = !1;
return (async () => {
Z(!0), M(null);
try {
const s = [
...v ? [v.value] : [],
...k.map((b) => b.value)
], o = E.filter((b) => b.dim && b.op && b.value !== "").map((b) => {
if (b.op === "in") {
const q = b.value.split(",").map((V) => V.trim()).filter(Boolean).map((V) => Ye(V) ? V : `'${V.replace(/'/g, "''")}'`).join(", ");
return `${b.dim} IN (${q})`;
}
const $ = b.dim, z = Ye(b.value) ? b.value : `'${String(b.value).replace(/'/g, "''")}'`;
return `${$} ${b.op} ${z}`;
}), c = v ? [v.value] : [], y = await e.querySystemMetric({
metric: p,
dimensions: s,
filters: o,
orderby: c
});
if (n) return;
W(y.columns || []), T(y.rows || []);
} catch (s) {
n || M(String(s)), T(null), W([]);
} finally {
n || Z(!1);
}
})(), () => {
n = !0;
};
}, [p, v, k, E, e]);
const ue = Y(() => {
const n = {};
for (const s of i) n[s.name] = s.display_name || s.name;
return n;
}, [i]), ua = Y(() => {
var De, _e;
const n = { data: [], series: [], xKey: null, labels: {} };
if (!g || !p) return n;
const s = v == null ? void 0 : v.value, o = ((De = k[0]) == null ? void 0 : De.value) || null, c = p, y = R.indexOf(c);
if (y === -1) return n;
const b = (P) => {
if (P == null) return 0;
const I = typeof P == "number" ? P : parseFloat(P);
return Number.isFinite(I) ? I : 0;
}, $ = "__x", z = ({ data: P, series: I, labels: j, xKey: U }) => {
const ae = I.filter(
(F) => P.some((J) => J[F] !== 0 && J[F] != null)
), Be = {};
for (const F of ae) Be[F] = j[F];
return {
data: P.map((F) => {
const J = { [U]: F[U] };
for (const Ke of ae) J[Ke] = F[Ke];
return J;
}).filter((F) => ae.some((J) => F[J] !== 0 && F[J] != null)),
series: ae,
labels: Be,
xKey: U
};
};
if (!s) {
const P = o ? R.indexOf(o) : -1, I = "s0", j = ue[c] || c.replace(/^system\.dj\./, "");
return P === -1 ? {
data: [{ [$]: c, [I]: b((_e = g[0]) == null ? void 0 : _e[y]) }],
series: [I],
xKey: $,
labels: { [I]: j }
} : z({
data: g.map((U) => ({
[$]: String(U[P]),
[I]: b(U[y])
})),
series: [I],
xKey: $,
labels: { [I]: j }
});
}
const q = R.indexOf(s);
if (q === -1) return n;
const V = ue[c] || c.replace(/^system\.dj\./, "");
if (!o) {
const P = "s0";
return z({
data: g.map((I) => ({
[$]: String(I[q]),
[P]: b(I[y])
})),
series: [P],
xKey: $,
labels: { [P]: V }
});
}
const ie = R.indexOf(o), ee = /* @__PURE__ */ new Map(), le = /* @__PURE__ */ new Map(), Ae = [];
for (const P of g) {
const I = String(P[q]), j = String(P[ie]);
if (!le.has(j)) {
const ae = `s${le.size}`;
le.set(j, ae), Ae.push(ae);
}
const U = le.get(j);
ee.has(I) || ee.set(I, { [$]: I }), ee.get(I)[U] = b(P[y]);
}
const Le = {};
le.forEach((P, I) => {
Le[P] = I;
});
const Oe = [];
return ee.forEach((P) => {
const I = { ...P };
for (const j of Ae)
(I[j] === void 0 || I[j] === null) && (I[j] = 0);
Oe.push(I);
}), z({
data: Oe,
series: Ae,
xKey: $,
labels: Le
});
}, [g, R, v, k, p, ue]), ge = Y(() => {
const n = h.toLowerCase();
return i.filter(
(s) => s.name.toLowerCase().includes(n) || s.display_name && s.display_name.toLowerCase().includes(n)
);
}, [i, h]), da = Y(() => {
const n = [], s = {};
for (const o of ge) {
const c = o.group || "Other", y = o.subgroup || "Other";
s[c] || (s[c] = { subgroupOrder: [], subgroups: {} }, n.push(c)), s[c].subgroups[y] || (s[c].subgroups[y] = [], s[c].subgroupOrder.push(y)), s[c].subgroups[y].push(o);
}
return n.map((o) => ({
group: o,
subgroups: s[o].subgroupOrder.map((c) => ({
subgroup: c,
metrics: s[o].subgroups[c]
}))
}));
}, [ge]), ma = p ? ue[p] || p.replace(/^system\.dj\./, "") : null, Ee = p && (i.find((n) => n.name === p) || {}).description || "", be = Y(() => {
const n = d.toLowerCase();
return A.filter(
(s) => s.value.toLowerCase().includes(n) || s.combinedLabel.toLowerCase().includes(n)
);
}, [A, d]), de = Y(() => {
const n = [], s = /* @__PURE__ */ new Map();
for (const o of be)
s.has(o.group) || (s.set(o.group, []), n.push(o.group)), s.get(o.group).push(o);
return n.map((o) => ({ label: o, options: s.get(o) }));
}, [be]), pa = Y(() => Q !== "auto" ? Q : v && Ge(v.value) ? k.length > 0 ? "area" : "line" : "bar", [Q, v, k]), ha = () => L([...E, { dim: "", op: "=", value: "" }]), xe = (n, s) => L(E.map((o, c) => c === n ? { ...o, ...s } : o)), fa = (n) => L(E.filter((s, o) => o !== n)), va = () => K ? /* @__PURE__ */ N("div", { className: "sme-empty", children: [
/* @__PURE__ */ u("span", { className: "sme-spinner" }),
"Loading…"
] }) : !g || g.length === 0 ? /* @__PURE__ */ N("div", { className: "sme-empty", children: [
/* @__PURE__ */ u("div", { className: "sme-empty-icon", children: "📈" }),
"No data."
] }) : /* @__PURE__ */ u(
_t,
{
chartData: ua,
resolvedChartType: pa,
startAtZero: ce
}
), ya = () => K ? /* @__PURE__ */ N("div", { className: "sme-empty", children: [
/* @__PURE__ */ u("span", { className: "sme-spinner" }),
"Loading…"
] }) : !g || g.length === 0 ? /* @__PURE__ */ u("div", { className: "sme-empty", children: "No data." }) : /* @__PURE__ */ u("div", { className: "sme-table-wrap", children: /* @__PURE__ */ N("table", { className: "sme-table", children: [
/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: R.map((n) => /* @__PURE__ */ u("th", { children: n }, n)) }) }),
/* @__PURE__ */ u("tbody", { children: g.map((n, s) => /* @__PURE__ */ u("tr", { children: n.map((o, c) => /* @__PURE__ */ u("td", { children: o == null ? "" : String(o) }, `${s}-${c}`)) }, `row-${s}`)) })
] }) });
return /* @__PURE__ */ N("div", { className: "sme-page", children: [
/* @__PURE__ */ N("aside", { className: "sme-rail", children: [
/* @__PURE__ */ N("div", { className: "sme-rail-section grow", children: [
/* @__PURE__ */ N("div", { className: "sme-rail-header", children: [
/* @__PURE__ */ u("span", { children: "System Metrics" }),
/* @__PURE__ */ u("span", { className: "sme-rail-count", children: ge.length })
] }),
/* @__PURE__ */ u(
"input",
{
className: "sme-rail-search",
placeholder: "Search metrics",
value: h,
onChange: (n) => m(n.target.value)
}
),
/* @__PURE__ */ u("div", { className: "sme-rail-list", children: da.map((n) => /* @__PURE__ */ N("div", { className: "sme-rail-group", children: [
/* @__PURE__ */ u("div", { className: "sme-rail-group-header", children: n.group }),
n.subgroups.map((s) => /* @__PURE__ */ N("div", { className: "sme-rail-subgroup", children: [
/* @__PURE__ */ u("div", { className: "sme-rail-subgroup-header", children: s.subgroup }),
s.metrics.map((o) => /* @__PURE__ */ N(
"div",
{
className: `sme-rail-item indent${p === o.name ? " active" : ""}`,
onClick: () => w(o.name),
title: o.description ? `${o.name}
${o.description}` : o.name,
children: [
/* @__PURE__ */ u("span", { className: "sme-rail-icon", children: "Σ" }),
o.display_name || o.name.replace(/^system\.dj\./, "")
]
},
o.name
))
] }, s.subgroup))
] }, n.group)) })
] }),
/* @__PURE__ */ N("div", { className: "sme-rail-section grow", children: [
/* @__PURE__ */ N("div", { className: "sme-rail-header", children: [
/* @__PURE__ */ u("span", { children: "Dimensions" }),
/* @__PURE__ */ u("span", { className: "sme-rail-count", children: be.length })
] }),
/* @__PURE__ */ u(
"input",
{
className: "sme-rail-search",
placeholder: "Search dimensions",
value: d,
onChange: (n) => x(n.target.value),
disabled: !p
}
),
/* @__PURE__ */ u("div", { className: "sme-rail-list", children: de.map((n) => /* @__PURE__ */ N("div", { className: "sme-rail-group", children: [
/* @__PURE__ */ u("div", { className: "sme-rail-group-header", children: n.label }),
n.options.map((s) => {
const o = k.some((c) => c.value === s.value) || (v == null ? void 0 : v.value) === s.value;
return /* @__PURE__ */ N(
"div",
{
className: `sme-rail-item indent${o ? " active" : ""}`,
title: `${s.value}
${s.path}
Click to toggle in Compare-by`,
onClick: () => {
(v == null ? void 0 : v.value) !== s.value && B(
(c) => c.some((y) => y.value === s.value) ? c.filter((y) => y.value !== s.value) : [...c, s]
);
},
children: [
/* @__PURE__ */ u("span", { className: "sme-rail-icon", children: Ot(s.type) }),
s.label
]
},
s.value
);
})
] }, n.label)) })
] })
] }),
/* @__PURE__ */ N("div", { className: "sme-main", children: [
/* @__PURE__ */ N("div", { className: "sme-toolbar", children: [
/* @__PURE__ */ N("div", { className: "sme-row", children: [
/* @__PURE__ */ u("span", { className: "sme-label", children: "X-axis" }),
/* @__PURE__ */ u("span", { className: "sme-select-wide", children: /* @__PURE__ */ u(
pe,
{
isClearable: !0,
placeholder: "Choose an X-axis dimension",
options: de,
value: v,
onChange: D,
isDisabled: !p,
styles: Ne
}
) })
] }),
/* @__PURE__ */ N("div", { className: "sme-row", children: [
/* @__PURE__ */ u("span", { className: "sme-label", children: "Compare by" }),
/* @__PURE__ */ u("span", { className: "sme-select-wide", children: /* @__PURE__ */ u(
pe,
{
isMulti: !0,
isClearable: !0,
placeholder: "Break down by dimensions",
options: de.map((n) => ({
...n,
options: n.options.filter((s) => s.value !== (v == null ? void 0 : v.value))
})).filter((n) => n.options.length > 0),
value: k,
onChange: (n) => B(n || []),
isDisabled: !p,
styles: Ne
}
) })
] }),
E.map((n, s) => /* @__PURE__ */ N("div", { className: "sme-filter-row", children: [
/* @__PURE__ */ u("span", { className: "sme-label", children: s === 0 ? "Filter" : "and" }),
/* @__PURE__ */ u("span", { className: "sme-select", children: /* @__PURE__ */ u(
pe,
{
placeholder: "Dimension",
options: de,
value: A.find((o) => o.value === n.dim) || null,
onChange: (o) => xe(s, { dim: (o == null ? void 0 : o.value) || "" }),
styles: Ne
}
) }),
/* @__PURE__ */ u("span", { style: { minWidth: 140 }, children: /* @__PURE__ */ u(
pe,
{
options: Xe,
value: Xe.find((o) => o.value === n.op),
onChange: (o) => xe(s, { op: o.value })
}
) }),
/* @__PURE__ */ u(
"input",
{
className: "sme-text-input",
placeholder: n.op === "in" ? "comma-separated values" : "value",
value: n.value,
onChange: (o) => xe(s, { value: o.target.value })
}
),
/* @__PURE__ */ u(
"button",
{
className: "sme-remove-filter",
onClick: () => fa(s),
"aria-label": "Remove filter",
children: "×"
}
)
] }, `f-${s}`)),
/* @__PURE__ */ u("div", { className: "sme-row", children: /* @__PURE__ */ u(
"button",
{
className: "sme-add-filter",
onClick: ha,
disabled: !p,
children: "+ Add filter"
}
) })
] }),
/* @__PURE__ */ N("div", { className: "sme-content", children: [
/* @__PURE__ */ N("div", { className: "sme-chart-controls", children: [
/* @__PURE__ */ N("div", { className: "sme-view-toggle", children: [
/* @__PURE__ */ u(
"button",
{
className: `sme-view-btn${G === "chart" ? " active" : ""}`,
onClick: () => Se("chart"),
children: "📈 Chart"
}
),
/* @__PURE__ */ u(
"button",
{
className: `sme-view-btn${G === "table" ? " active" : ""}`,
onClick: () => Se("table"),
children: "▦ Table"
}
)
] }),
G === "chart" ? /* @__PURE__ */ u("div", { className: "sme-view-toggle", children: [
{ key: "auto", label: "Auto" },
{ key: "line", label: "Line" },
{ key: "area", label: "Area" },
{ key: "bar", label: "Bar" }
].map((n) => /* @__PURE__ */ u(
"button",
{
className: `sme-view-btn${Q === n.key ? " active" : ""}`,
onClick: () => oa(n.key),
children: n.label
},
n.key
)) }) : null,
/* @__PURE__ */ u("div", { className: "sme-options", children: /* @__PURE__ */ N("label", { children: [
/* @__PURE__ */ u(
"input",
{
type: "checkbox",
checked: ce,
onChange: (n) => ca(n.target.checked)
}
),
"Start scale at zero"
] }) })
] }),
/* @__PURE__ */ u("h2", { className: "sme-chart-title", children: p ? /* @__PURE__ */ u(
"a",
{
href: `/nodes/${p}`,
target: "_blank",
rel: "noreferrer",
title: `Open ${p}`,
className: "sme-chart-title-link",
children: ma
}
) : "Pick a system metric" }),
Ee ? /* @__PURE__ */ u("p", { className: "sme-chart-description", children: Ee }) : null,
X ? /* @__PURE__ */ u("div", { className: "sme-error", children: X }) : null,
G === "chart" ? va() : ya()
] })
] })
] });
}
Kt.defaultProps = {
djClient: Ra
};
export {
Dt as NonZeroTooltip,
Kt as SystemMetricsExplorerPage,
Ot as typeIcon
};
//# sourceMappingURL=index-bcCslaks.js.map