@devgateway/dvz-ui-react/dist/cjs/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.

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