ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
208 lines (207 loc) • 8.41 kB
JavaScript
import { n as rt } from "./mermaid-parser.core-uIDZYuBu.js";
import { n as d } from "./chunk-Y2CYZVJY-0JxdZxki.js";
import { m as B } from "./src-DtRLxcYO.js";
import { H as nt, K as it, U as ot, a as st, c as lt, f as ct, v as ut, w as dt, x as gt, y as ft } from "./chunk-WYO6CB5R-DDHkKowO.js";
import { t as pt } from "./ordinal-BMN81JG2.js";
import { n as C } from "./path-Bja5PoYn.js";
import { m as G } from "./dist-C0Fwsvsq.js";
import { t as Z } from "./arc-DRPGof21.js";
import { t as ht } from "./array-By5736M5.js";
import { i as mt, p as vt } from "./chunk-ICXQ74PX-DR8rL-xF.js";
import { t as xt } from "./chunk-VAUOI2AC-izt0o4id.js";
import { t as yt } from "./chunk-JWPE2WC7-CGEmUMMZ.js";
function St(t, r) {
return r < t ? -1 : r > t ? 1 : r >= t ? 0 : NaN;
}
function wt(t) {
return t;
}
function At() {
var t = wt, r = St, v = null, l = C(0), c = C(G), $ = C(0);
function n(e) {
var o, g = (e = ht(e)).length, x, D, w = 0, f = new Array(g), i = new Array(g), A = +l.apply(this, arguments), k = Math.min(G, Math.max(-G, c.apply(this, arguments) - A)), T, M = Math.min(Math.abs(k) / g, $.apply(this, arguments)), p = M * (k < 0 ? -1 : 1), y;
for (o = 0; o < g; ++o) (y = i[f[o] = o] = +t(e[o], o, e)) > 0 && (w += y);
for (r != null ? f.sort(function(_, h) {
return r(i[_], i[h]);
}) : v != null && f.sort(function(_, h) {
return v(e[_], e[h]);
}), o = 0, D = w ? (k - g * p) / w : 0; o < g; ++o, A = T) x = f[o], y = i[x], T = A + (y > 0 ? y * D : 0) + p, i[x] = {
data: e[x],
index: o,
value: y,
startAngle: A,
endAngle: T,
padAngle: M
};
return i;
}
return n.value = function(e) {
return arguments.length ? (t = typeof e == "function" ? e : C(+e), n) : t;
}, n.sortValues = function(e) {
return arguments.length ? (r = e, v = null, n) : r;
}, n.sort = function(e) {
return arguments.length ? (v = e, r = null, n) : v;
}, n.startAngle = function(e) {
return arguments.length ? (l = typeof e == "function" ? e : C(+e), n) : l;
}, n.endAngle = function(e) {
return arguments.length ? (c = typeof e == "function" ? e : C(+e), n) : c;
}, n.padAngle = function(e) {
return arguments.length ? ($ = typeof e == "function" ? e : C(+e), n) : $;
}, n;
}
var q = ct.pie, U = {
sections: /* @__PURE__ */ new Map(),
showData: !1,
config: q
}, L = U.sections, I = U.showData, Ct = structuredClone(q), J = {
getConfig: /* @__PURE__ */ d(() => structuredClone(Ct), "getConfig"),
clear: /* @__PURE__ */ d(() => {
L = /* @__PURE__ */ new Map(), I = U.showData, st();
}, "clear"),
setDiagramTitle: it,
getDiagramTitle: dt,
setAccTitle: ot,
getAccTitle: ft,
setAccDescription: nt,
getAccDescription: ut,
addSection: /* @__PURE__ */ d(({ label: t, value: r }) => {
if (r < 0) throw new Error(`"${t}" has invalid value: ${r}. Negative values are not allowed in pie charts. All slice values must be >= 0.`);
L.has(t) || (L.set(t, r), B.debug(`added new section: ${t}, with value: ${r}`));
}, "addSection"),
getSections: /* @__PURE__ */ d(() => L, "getSections"),
setShowData: /* @__PURE__ */ d((t) => {
I = t;
}, "setShowData"),
getShowData: /* @__PURE__ */ d(() => I, "getShowData")
}, $t = /* @__PURE__ */ d((t, r) => {
yt(t, r), r.setShowData(t.showData), t.sections.map(r.addSection);
}, "populateDb"), Dt = { parse: /* @__PURE__ */ d(async (t) => {
const r = await rt("pie", t);
B.debug(r), $t(r, J);
}, "parse") }, Tt = /* @__PURE__ */ d((t) => `
.pieCircle{
stroke: ${t.pieStrokeColor};
stroke-width : ${t.pieStrokeWidth};
opacity : ${t.pieOpacity};
}
.pieCircle.highlighted{
scale: 1.05;
opacity: 1;
}
.pieCircle.highlightedOnHover:hover{
transition-duration: 250ms;
scale: 1.05;
opacity: 1;
}
.pieOuterCircle{
stroke: ${t.pieOuterStrokeColor};
stroke-width: ${t.pieOuterStrokeWidth};
fill: none;
}
.pieTitleText {
text-anchor: middle;
font-size: ${t.pieTitleTextSize};
fill: ${t.pieTitleTextColor};
font-family: ${t.fontFamily};
}
.slice {
font-family: ${t.fontFamily};
fill: ${t.pieSectionTextColor};
font-size:${t.pieSectionTextSize};
// fill: white;
}
.legend text {
fill: ${t.pieLegendTextColor};
font-family: ${t.fontFamily};
font-size: ${t.pieLegendTextSize};
}
`, "getStyles"), bt = /* @__PURE__ */ d((t) => {
const r = [...t.values()].reduce((l, c) => l + c, 0), v = [...t.entries()].map(([l, c]) => ({
label: l,
value: c
})).filter((l) => l.value / r * 100 >= 1);
return At().value((l) => l.value).sort(null)(v);
}, "createPieArcs"), Rt = {
parser: Dt,
db: J,
renderer: { draw: /* @__PURE__ */ d((t, r, v, l) => {
B.debug(`rendering pie chart
` + t);
const c = l.db, $ = gt(), n = mt(c.getConfig(), $.pie), e = 40, o = 18, g = 4, x = 450, D = x, w = xt(r), f = w.append("g");
f.attr("transform", "translate(225,225)");
const { themeVariables: i } = $;
let [A] = vt(i.pieOuterStrokeWidth);
A ??= 2;
const k = n.legendPosition, T = n.textPosition, M = n.donutHole > 0 && n.donutHole <= 0.9 ? n.donutHole : 0, p = Math.min(D, x) / 2 - e, y = Z().innerRadius(M * p).outerRadius(p), _ = Z().innerRadius(p * T).outerRadius(p * T), h = f.append("g");
h.append("circle").attr("cx", 0).attr("cy", 0).attr("r", p + A / 2).attr("class", "pieOuterCircle");
const z = c.getSections(), Q = bt(z), Y = [
i.pie1,
i.pie2,
i.pie3,
i.pie4,
i.pie5,
i.pie6,
i.pie7,
i.pie8,
i.pie9,
i.pie10,
i.pie11,
i.pie12
];
let W = 0;
z.forEach((a) => {
W += a;
});
const V = Q.filter((a) => (a.data.value / W * 100).toFixed(0) !== "0"), F = pt(Y).domain([...z.keys()]);
h.selectAll("mySlices").data(V).enter().append("path").attr("d", y).attr("fill", (a) => F(a.data.label)).attr("class", (a) => {
let s = "pieCircle";
return n.highlightSlice === "hover" ? s += " highlightedOnHover" : n.highlightSlice === a.data.label && (s += " highlighted"), s;
}), h.selectAll("mySlices").data(V).enter().append("text").text((a) => (a.data.value / W * 100).toFixed(0) + "%").attr("transform", (a) => "translate(" + _.centroid(a) + ")").style("text-anchor", "middle").attr("class", "slice");
const tt = f.append("text").text(c.getDiagramTitle()).attr("x", 0).attr("y", -400 / 2).attr("class", "pieTitleText"), E = [...z.entries()].map(([a, s]) => ({
label: a,
value: s
})), S = f.selectAll(".legend").data(E).enter().append("g").attr("class", "legend");
S.append("rect").attr("width", o).attr("height", o).style("fill", (a) => F(a.label)).style("stroke", (a) => F(a.label)), S.append("text").attr("x", 22).attr("y", o - g).text((a) => c.getShowData() ? `${a.label} [${a.value}]` : a.label);
const b = Math.max(...S.selectAll("text").nodes().map((a) => a?.getBoundingClientRect().width ?? 0));
let H = x, N = 490;
const u = 22, O = E.length * u;
switch (k) {
case "center":
S.attr("transform", (a, s) => {
const m = u * E.length / 2, P = -b / 2 - 22, R = s * u - m;
return "translate(" + P + "," + R + ")";
});
break;
case "top":
H += O, S.attr("transform", (a, s) => {
const m = p;
return `translate(${-b / 2 - 22}, ${s * u - m})`;
}), h.attr("transform", () => `translate(0, ${O + u})`);
break;
case "bottom":
H += O, S.attr("transform", (a, s) => {
const m = -185 - u, P = -b / 2 - 22, R = s * u - m;
return "translate(" + P + "," + R + ")";
});
break;
case "left":
N += 22 + b, S.attr("transform", (a, s) => {
const m = u * E.length / 2;
return "translate(-207," + (s * u - m) + ")";
}), h.attr("transform", () => `translate(${b + o + g}, 0)`);
break;
default:
N += 22 + b, S.attr("transform", (a, s) => {
const m = u * E.length / 2;
return "translate(216," + (s * u - m) + ")";
});
break;
}
const j = tt.node()?.getBoundingClientRect().width ?? 0, et = D / 2 - j / 2, at = D / 2 + j / 2, K = Math.min(0, et), X = Math.max(N, at) - K;
w.attr("viewBox", `${K} 0 ${X} ${H}`), lt(w, H, X, n.useMaxWidth);
}, "draw") },
styles: Tt
};
export {
Rt as diagram
};