@devgateway/dvz-ui-react/dist/esm/embeddable/new-time-line/timeline.js

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.

import { jsx as $ } from "react/jsx-runtime";
import { useRef as K, useState as M, useEffect as Q } from "react";
import * as o from "d3";
const ot = ({
  posts: s,
  position: u,
  lineWidth: v,
  meta: U,
  locale: V,
  lineColor: T,
  height: i,
  config: l,
  marginLeft: j,
  marginTop: z,
  marginRight: D,
  marginBottom: I,
  fontSize: f,
  titleWidth: x,
  subtitleWidth: w,
  onSelectSlide: X,
  currentSlide: E
}) => {
  const p = K(), [Z, H] = M(!1), [tt, N] = M(null), P = (r) => l[r].position, k = (r) => l[r].connectorLineHeight, _ = (r) => l[r].subtitleOffset, G = (r) => l[r].titleOffset, m = (r) => l[r].circleColor, R = (r) => l[r].lineColor, A = (r) => l[r].titleColor, S = (r) => l[r].labelColor, W = (r) => l[r].size, Y = (r) => l[r].readMoreLabel;
  return Q(() => {
    const r = { top: z, right: D, bottom: I, left: j };
    let d = i / 2;
    u == "middle" && (d = i / 2), u == "top" && (d = r.top), u == "bottom" && (d = i - r.bottom);
    const C = p.current.clientWidth, q = i, n = o.scaleLinear().domain([0, s.length - 1]).range([r.left, C - r.right]), O = o.line(), B = [[n(0), 0], [n(s.length - 1), 0]], F = O(B), h = o.select(p.current);
    h.attr("width", C).attr("height", q);
    const J = (e) => {
      X(e);
    };
    h.node().parentNode;
    const y = (e, t) => {
      const c = [o.event.pageX + 30, o.event.pageY - 30], L = 600;
      o.event.pageX + L + 30 > window.innerWidth && (c[0] = o.event.pageX - L - 30), H(!0), N({ data: e, index: t, position: c }), o.selectAll("#circle" + t).style("stroke", m(t)).style("fill", "#fff"), o.selectAll("#label" + t).style("font-weight", "bold");
    }, b = (e, t) => {
      o.selectAll("#circle" + t).style("stroke", "none").style("fill", m(t)), o.selectAll("#label" + t).style("font-weight", "normal");
    }, a = h.append("g");
    a.attr("transform", `translate(0,${d})`), a.append("path").attr("d", F).attr("stroke-width", v).attr("stroke", T), a.selectAll(".tick").data(s).enter().append("path").attr("d", (e, t) => O([[n(t), 0], [n(t), P(t) === "top" ? k(t) * -1 : k(t)]])).attr("stroke-width", v).attr("stroke", (e, t) => R(t)).on("mouseover", function(e, t) {
    }), a.selectAll(".label").data(s).enter().append("foreignObject").attr("id", (e, t) => "label" + t).attr("x", function(e, t) {
      return n(t) - w / 2;
    }).attr("width", w).attr("height", "50px").attr("overflow", "visible").style("opacity", 1).attr("y", (e, t) => _(t)).append("xhtml:div").style("color", (e, t) => S(t)).style("font-size", parseInt(f) - 2 + "px").style("line-height", "100%").style("text-align", "center").html((e, t) => e.meta_fields.subtitle).on("mouseover", (e, t) => {
      y(e, t);
    }).on("mouseout", (e, t) => {
      b(e, t);
    }), a.selectAll(".title").data(s).enter().append("foreignObject").attr("x", function(e, t) {
      return n(t) - x / 2;
    }).attr("width", x).attr("height", "50px").attr("overflow", "visible").style("opacity", 1).attr("y", (e, t) => G(t)).append("xhtml:div").style("font-size", parseInt(f) + 1 + "px").style("color", (e, t) => A(t)).style("font-weight", (e) => "bold").style("line-height", "100%").style("text-align", "center").html((e, t) => {
      const g = Y(t);
      let c = e.title.rendered;
      return g && (c += `<br><a href="${e.link}" target="_blank" style="font-size:${parseInt(f) - 3}px;color:${A(t)}">${g}</a>`), c;
    }).on("mouseover", (e, t) => {
      y(e, t);
    }).on("mouseout", (e, t) => {
      b(e, t);
    }), a.selectAll(".circle").data(s).enter().append("circle").attr("class", (e, t) => t == E ? "active" : "normal").attr("cx", (e, t) => n(t)).attr("cy", 0).attr("id", (e, t) => "circle" + t).attr("r", (e, t) => W(t)).style("stroke-width", 3).style("fill", (e, t) => m(t)).on("mouseover", function(e, t) {
      y(e, t);
    }).on("mouseout", function(e, t) {
      b(e, t);
    }).on("click", function(e, t) {
      J(t);
    });
  }, []), /* @__PURE__ */ $("div", { className: "line", children: /* @__PURE__ */ $("svg", { height: i, width: "100%", ref: p }) });
};
export {
  ot as default
};