vue-mermaid-string
Version:
A Vue.js component that turns a Mermaid string into a diagram.
162 lines (161 loc) • 6.56 kB
JavaScript
import { a8 as S, a3 as F, aB as j, _ as p, g as q, s as H, a as Z, b as J, q as K, p as Q, l as z, c as X, D as Y, H as ee, N as te, e as ae, y as re, F as ne } from "./entry-B2VX-kxa.js";
import { p as ie } from "./chunk-4BX2VUAB-XzHDrrtP.js";
import { p as se } from "./mermaid-parser.core-NEmuqPo3.js";
import { d as I } from "./arc-C3YlCEKt.js";
import { o as le } from "./ordinal-B6-f3MAq.js";
function oe(e, a) {
return a < e ? -1 : a > e ? 1 : a >= e ? 0 : NaN;
}
function ce(e) {
return e;
}
function ue() {
var e = ce, a = oe, f = null, y = S(0), s = S(F), o = S(0);
function l(t) {
var n, c = (t = j(t)).length, d, x, m = 0, u = new Array(c), i = new Array(c), v = +y.apply(this, arguments), w = Math.min(F, Math.max(-F, s.apply(this, arguments) - v)), h, C = Math.min(Math.abs(w) / c, o.apply(this, arguments)), $ = C * (w < 0 ? -1 : 1), g;
for (n = 0; n < c; ++n)
(g = i[u[n] = n] = +e(t[n], n, t)) > 0 && (m += g);
for (a != null ? u.sort(function(A, D) {
return a(i[A], i[D]);
}) : f != null && u.sort(function(A, D) {
return f(t[A], t[D]);
}), n = 0, x = m ? (w - c * $) / m : 0; n < c; ++n, v = h)
d = u[n], g = i[d], h = v + (g > 0 ? g * x : 0) + $, i[d] = {
data: t[d],
index: n,
value: g,
startAngle: v,
endAngle: h,
padAngle: C
};
return i;
}
return l.value = function(t) {
return arguments.length ? (e = typeof t == "function" ? t : S(+t), l) : e;
}, l.sortValues = function(t) {
return arguments.length ? (a = t, f = null, l) : a;
}, l.sort = function(t) {
return arguments.length ? (f = t, a = null, l) : f;
}, l.startAngle = function(t) {
return arguments.length ? (y = typeof t == "function" ? t : S(+t), l) : y;
}, l.endAngle = function(t) {
return arguments.length ? (s = typeof t == "function" ? t : S(+t), l) : s;
}, l.padAngle = function(t) {
return arguments.length ? (o = typeof t == "function" ? t : S(+t), l) : o;
}, l;
}
var pe = ne.pie, N = {
sections: /* @__PURE__ */ new Map(),
showData: !1
}, T = N.sections, G = N.showData, de = structuredClone(pe), ge = /* @__PURE__ */ p(() => structuredClone(de), "getConfig"), fe = /* @__PURE__ */ p(() => {
T = /* @__PURE__ */ new Map(), G = N.showData, re();
}, "clear"), he = /* @__PURE__ */ p(({ label: e, value: a }) => {
if (a < 0)
throw new Error(
`"${e}" has invalid value: ${a}. Negative values are not allowed in pie charts. All slice values must be >= 0.`
);
T.has(e) || (T.set(e, a), z.debug(`added new section: ${e}, with value: ${a}`));
}, "addSection"), me = /* @__PURE__ */ p(() => T, "getSections"), ve = /* @__PURE__ */ p((e) => {
G = e;
}, "setShowData"), Se = /* @__PURE__ */ p(() => G, "getShowData"), L = {
getConfig: ge,
clear: fe,
setDiagramTitle: Q,
getDiagramTitle: K,
setAccTitle: J,
getAccTitle: Z,
setAccDescription: H,
getAccDescription: q,
addSection: he,
getSections: me,
setShowData: ve,
getShowData: Se
}, ye = /* @__PURE__ */ p((e, a) => {
ie(e, a), a.setShowData(e.showData), e.sections.map(a.addSection);
}, "populateDb"), xe = {
parse: /* @__PURE__ */ p(async (e) => {
const a = await se("pie", e);
z.debug(a), ye(a, L);
}, "parse")
}, we = /* @__PURE__ */ p((e) => `
.pieCircle{
stroke: ${e.pieStrokeColor};
stroke-width : ${e.pieStrokeWidth};
opacity : ${e.pieOpacity};
}
.pieOuterCircle{
stroke: ${e.pieOuterStrokeColor};
stroke-width: ${e.pieOuterStrokeWidth};
fill: none;
}
.pieTitleText {
text-anchor: middle;
font-size: ${e.pieTitleTextSize};
fill: ${e.pieTitleTextColor};
font-family: ${e.fontFamily};
}
.slice {
font-family: ${e.fontFamily};
fill: ${e.pieSectionTextColor};
font-size:${e.pieSectionTextSize};
// fill: white;
}
.legend text {
fill: ${e.pieLegendTextColor};
font-family: ${e.fontFamily};
font-size: ${e.pieLegendTextSize};
}
`, "getStyles"), Ae = we, De = /* @__PURE__ */ p((e) => {
const a = [...e.values()].reduce((s, o) => s + o, 0), f = [...e.entries()].map(([s, o]) => ({ label: s, value: o })).filter((s) => s.value / a * 100 >= 1).sort((s, o) => o.value - s.value);
return ue().value((s) => s.value)(f);
}, "createPieArcs"), Ce = /* @__PURE__ */ p((e, a, f, y) => {
z.debug(`rendering pie chart
` + e);
const s = y.db, o = X(), l = Y(s.getConfig(), o.pie), t = 40, n = 18, c = 4, d = 450, x = d, m = ee(a), u = m.append("g");
u.attr("transform", "translate(" + x / 2 + "," + d / 2 + ")");
const { themeVariables: i } = o;
let [v] = te(i.pieOuterStrokeWidth);
v ??= 2;
const w = l.textPosition, h = Math.min(x, d) / 2 - t, C = I().innerRadius(0).outerRadius(h), $ = I().innerRadius(h * w).outerRadius(h * w);
u.append("circle").attr("cx", 0).attr("cy", 0).attr("r", h + v / 2).attr("class", "pieOuterCircle");
const g = s.getSections(), A = De(g), D = [
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 b = 0;
g.forEach((r) => {
b += r;
});
const W = A.filter((r) => (r.data.value / b * 100).toFixed(0) !== "0"), E = le(D);
u.selectAll("mySlices").data(W).enter().append("path").attr("d", C).attr("fill", (r) => E(r.data.label)).attr("class", "pieCircle"), u.selectAll("mySlices").data(W).enter().append("text").text((r) => (r.data.value / b * 100).toFixed(0) + "%").attr("transform", (r) => "translate(" + $.centroid(r) + ")").style("text-anchor", "middle").attr("class", "slice"), u.append("text").text(s.getDiagramTitle()).attr("x", 0).attr("y", -400 / 2).attr("class", "pieTitleText");
const O = [...g.entries()].map(([r, M]) => ({
label: r,
value: M
})), k = u.selectAll(".legend").data(O).enter().append("g").attr("class", "legend").attr("transform", (r, M) => {
const R = n + c, B = R * O.length / 2, V = 12 * n, U = M * R - B;
return "translate(" + V + "," + U + ")";
});
k.append("rect").attr("width", n).attr("height", n).style("fill", (r) => E(r.label)).style("stroke", (r) => E(r.label)), k.append("text").attr("x", n + c).attr("y", n - c).text((r) => s.getShowData() ? `${r.label} [${r.value}]` : r.label);
const _ = Math.max(
...k.selectAll("text").nodes().map((r) => r?.getBoundingClientRect().width ?? 0)
), P = x + t + n + c + _;
m.attr("viewBox", `0 0 ${P} ${d}`), ae(m, d, P, l.useMaxWidth);
}, "draw"), $e = { draw: Ce }, Fe = {
parser: xe,
db: L,
renderer: $e,
styles: Ae
};
export {
Fe as diagram
};