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