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