@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
241 lines (240 loc) • 8.8 kB
JavaScript
import { jsx as d, jsxs as bt } from "react/jsx-runtime";
import { PostProvider as yt, PostConsumer as vt } from "@devgateway/wp-react-lib";
import Ct from "../connected-templates/PostIntro.js";
import { useRef as xt, useState as nt, useEffect as Ot } from "react";
import { Container as rt } from "semantic-ui-react";
import * as c from "d3";
const wt = {
visibility: "visible",
position: "relative",
height: "auto",
width: "auto"
}, Pt = {
position: "absolute",
overflow: "hidden",
display: "none"
}, M = 0, Mt = (T) => {
const {
posts: r,
position: v,
lineWidth: L,
meta: U,
locale: H,
lineColor: S,
height: u,
config: l,
marginLeft: W,
marginTop: z,
marginRight: E,
marginBottom: R,
fontSize: C,
titleWidth: k,
titleHeight: $,
subtitleWidth: I,
subtitleHeight: N,
enableTitlePopup: g,
enableCirclePopup: p,
enableDefaultPopup: A,
closePopupOnMouseOut: f,
unique: x
} = T, O = xt(), [J, a] = nt(!1), [m, b] = nt(null), _ = (e) => l[e].position, V = (e) => l[e].connectorLineHeight, st = (e) => l[e].subtitleOffset, at = (e) => l[e].titleOffset, j = (e) => {
var i;
return (i = l[e]) == null ? void 0 : i.circleColor;
}, K = (e) => l[e].lineColor, Q = (e) => l[e].titleColor, ct = (e) => l[e].labelColor, dt = (e) => l[e].tooltipFontColor || "#fff", ut = (e) => l[e].size, pt = (e) => l[e].readMoreLabel, w = (e) => "circle" + x + e, X = (e) => "title" + x + e, P = (e) => {
c.selectAll("#" + w(e)).style("stroke", "none").style("fill", j(e)), c.selectAll("#label" + e).style("font-weight", "normal");
}, Y = (e) => {
P(M), c.selectAll("#" + w(e)).style("stroke", j(e)).style("fill", "#fff"), c.selectAll("#label" + e).style("font-weight", "bold");
};
return Ot(() => {
const e = {
top: z,
right: E,
bottom: R,
left: W
};
let i = u / 2;
v == "middle" && (i = u / 2), v == "top" && (i = e.top), v == "bottom" && (i = u - e.bottom);
const s = {};
r.forEach((o, t) => {
s[o.id] = t;
});
const Z = O.current.clientWidth, ft = u, h = c.scaleLinear().domain([0, r.length - 1]).range([e.left, Z - e.right]), tt = c.line(), ht = [
[h(0), 0],
[h(r.length - 1), 0]
], gt = tt(ht), B = c.select(O.current);
B.attr("width", Z).attr("height", ft), B.node().parentNode;
const et = (o, t, n) => {
let q = [0, 0];
if (o) {
const F = o.target.getBoundingClientRect(), it = o.target.closest(".time").getBoundingClientRect(), G = F.left - it.left, mt = F.top - it.top;
q = [G + 30, mt + 50];
const lt = 600;
F.left + G + lt + 30 > window.innerWidth && (q[0] = G - lt * 0.6);
}
a(!0), b({ data: t, index: n, position: q }), Y(n);
}, ot = (o, t, n) => {
P(n);
}, y = B.append("g");
if (y.attr("transform", `translate(0,${i})`), y.append("path").attr("d", gt).attr("stroke-width", L).attr("stroke", S), y.selectAll(".tick").data(r).enter().append("path").attr(
"d",
(o, t) => tt([
[h(t), 0],
[
h(t),
_(t) === "top" ? V(t) * -1 : V(t)
]
])
).attr("stroke-width", L).attr("stroke", (o, t) => K(t)).on("mouseover", function(o, t, n) {
}), y.selectAll(".circle").data(r).enter().append("circle").attr("id", (o, t) => w(t)).attr("cx", (o, t) => h(t)).attr("cy", 0).attr("id", (o, t) => w(t)).attr("r", (o, t) => ut(t)).style("stroke-width", 3).style("cursor", p ? "pointer" : "default").style("fill", (o, t) => j(t)).on("mouseover", function(o, t) {
p && et(o, t, s[t.id]);
}).on("mouseout", function(o, t, n) {
p && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
}), y.selectAll(".label").data(r).enter().append("foreignObject").attr("id", (o, t) => "label" + t).attr("x", function(o, t) {
return h(t) - I / 2;
}).attr("width", I).attr("height", N).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => st(t)).append("xhtml:div").style("color", (o, t) => ct(t)).style("font-size", parseInt(C) - 2 + "px").style("line-height", "100%").style("text-align", "center").html((o, t) => o.meta_fields.subtitle).on("mouseover", (o, t, n) => {
}).on("mouseout", (o, t, n) => {
}).classed("subtitle-class", !0), y.selectAll(".title").data(r).enter().append("foreignObject").attr("x", function(o, t) {
return h(t) - k / 2;
}).attr("width", k).attr("height", $).attr("overflow", "visible").style("opacity", 1).attr("y", (o, t) => at(t)).append("xhtml:div").attr("id", (o, t) => X(t)).style("font-size", parseInt(C) + 1 + "px").style("color", (o, t) => Q(t)).style("font-weight", (o) => "bold").style("line-height", "100%").style("text-align", "center").style("cursor", g ? "pointer" : "default").style("overflow-wrap", "break-word").html((o, t) => {
const n = pt(t);
let D = o.title.rendered;
return n && (D += `<br><span style="font-size:${parseInt(C) - 3}px;color:${Q(t)}">${n}</span>`), D;
}).on("mouseover", (o, t, n) => {
g && et(o, t, s[t.id]);
}).on("mouseout", (o, t, n, D) => {
g && (ot(o, t, s[t.id]), f && (a(!1), b(null)));
}), A) {
let o = !1;
p && (o = !0, c.select("#" + w(M)).dispatch(
"mouseover"
)), !o && g && c.select("#" + X(M)).dispatch(
"mouseover"
);
}
}, []), /* @__PURE__ */ bt(
"div",
{
className: "time line",
onMouseLeave: (e) => {
e.target.getAttribute("class") !== "ui fluid container excerpt" && (a(!1), b(null), P(M));
},
onMouseEnter: (e) => {
f && (a(!1), b(null), P(M));
},
style: { position: "relative" },
children: [
r.map((e, i) => {
const s = m && m.index == i;
return /* @__PURE__ */ d(
"div",
{
className: "tooltip",
onMouseOver: () => Y(i),
onMouseOut: () => {
P(i);
},
style: {
left: s ? m.position[0] : 0,
top: s ? m.position[1] : 0,
position: "absolute",
pointerEvents: f ? "none" : "all"
},
children: s && /* @__PURE__ */ d(
"div",
{
className: "tooltip",
style: {
backgroundColor: K(i),
color: dt(i)
},
children: /* @__PURE__ */ d(
Ct,
{
post: e,
as: rt,
style: s ? wt : Pt
},
e.slug
)
}
)
}
);
}),
/* @__PURE__ */ d("svg", { height: u, width: "100%", ref: O })
]
}
);
}, Ht = (T) => {
const {
"data-type": r,
"data-taxonomy": v,
"data-categories": L,
"data-items": U,
"data-height": H,
"data-line-color": S = "#000",
"data-config": u = "{}",
"data-position": l = "middle",
"data-line-width": W = "1",
"data-margin-left": z = 50,
"data-margin-top": E = 25,
"data-margin-right": R = 50,
"data-margin-bottom": C = 25,
"data-font-size": k = 14,
"data-title-width": $ = 100,
"data-title-height": I = 50,
"data-subtitle-width": N = 50,
"data-subtitle-height": g = 20,
"data-enable-title-popup": p = "false",
"data-enable-circle-popup": A = "true",
"data-enable-default-popup": f = "false",
"data-close-popup-on-mouse-out": x = "false",
editing: O,
parent: J,
unique: a
} = T, m = T.intl.locale, _ = {
unique: a || Math.random().toString(36).substring(2, 9),
marginLeft: z,
marginTop: E,
marginRight: R,
marginBottom: C,
lineWidth: W,
height: H,
position: l,
lineColor: decodeURIComponent(S),
config: JSON.parse(decodeURIComponent(u)),
fontSize: k,
titleWidth: $,
titleHeight: I,
subtitleWidth: N,
subtitleHeight: g,
enableTitlePopup: p == !0 || p == "true",
enableCirclePopup: A == !0 || A == "true",
enableDefaultPopup: f == !0 || f == "true",
closePopupOnMouseOut: x == !0 || x == "true"
};
return /* @__PURE__ */ d(
rt,
{
style: { height: `${H}px` },
className: `viz time line ${O ? "editing" : ""}`,
fluid: !0,
children: /* @__PURE__ */ d(
yt,
{
locale: m,
type: r,
taxonomy: v,
categories: L,
store: "carousel_" + J + "_" + a,
page: 1,
perPage: U,
children: /* @__PURE__ */ d(vt, { children: /* @__PURE__ */ d(Mt, { ..._ }) })
}
)
}
);
};
export {
Ht as default
};