@devgateway/dvz-ui-react/dist/cjs/embeddable/chart/Line.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 a=require("react/jsx-runtime"),g=require("react"),at=require("react-intl"),st=require("@nivo/line"),nt=require("./Tooltip.js"),he=require("d3-shape"),rt=require("@nivo/theming"),lt=require("../../layout/FlexWrapDetector.js"),P=require("../../utils/deviceType.js"),ct="#66676d",G="#f0f0f1",it=["mobile","tablet","midTablet"].includes(P.default()),fe=P.default()==="mobile",xe=["tablet","midTablet"].includes(P.default()),ot=(d,p)=>{const v=document.createElement("canvas").getContext("2d");return v.font=p,v.measureText(d).width},dt=({editing:d,previewMode:p,app:Y,legends:v,tooltip:k,tooltipEnabled:pe,options:u,intl:D,groupMode:J,reverse:mt,marginLeft:ye,lineLabelPosition:be,marginTop:K,marginRight:je,marginBottom:V,format:N,colors:ht,offsetY:ge,height:ve,showLegends:Z,legendPosition:x,tickRotation:y,offsetText:_,tickColor:z,legendLabel:Q,xLabelColor:E,colorGenerator:X,legendCheckBack:q,legendLabelBack:Ne,legendLabelColor:C,highlightXAxisLine:Ee,showTickLine:w,showRightAxis:Oe,valueScale:ft,enableArea:Te,areaShadingCriteria:ee,areaLowerBound:te,areaUpperBound:ae,showPoints:Me,maxValue:ke,fixedMinValue:B,fixedMaxValue:A,offsetBottom:De,yAxisTickValues:Ie,enableGridY:$e,enableGridX:Fe,overrideTickColor:H,offsetRight:Le,selectedMeasures:Se,tooltipEnableMarkdown:We,minMaxClamp:_e,reverseLegend:ze,customAxisFormat:I,mobileCustomization:qe,lineCurve:we,customLabels:R})=>{var de,ue,me;const r=JSON.parse(decodeURIComponent(qe)),se=it&&((r==null?void 0:r.showCustomization)??!1),$=se&&p!=="Desktop",F=!d&&se,[ne,Be]=g.useState(50),[Ae,He]=g.useState(K),[xt,re]=g.useState(0),[Re,Ue]=g.useState(V),[O,Ge]=g.useState([]),L=u.data.map(e=>({id:e.id,label:R&&R[e.id]?R[e.id]:e.label||e.id,color:X.getColor(e.id,e)})),le=()=>(ze&&L.reverse(),a.jsx(a.Fragment,{children:Z&&L.map((e,t)=>a.jsxs("div",{className:"legend item",onClick:()=>Je(e.id),children:[a.jsx("input",{className:"ignore",type:"checkbox",checked:O.length===0||!O.includes(e.id),readOnly:!0,style:{backgroundColor:q===!0?e.color:"none",color:C}}),a.jsx("span",{className:q===!0?"checkmark-with-bg":"checkmark",style:{backgroundColor:q===!0?e.color:"transparent"}}),a.jsx("label",{style:{backgroundColor:Ne===!0?e.color:"transparent",color:C},children:e.label})]},t))}));g.useEffect(()=>{(()=>{const s=5*Math.max(L.length-5,0);Be(s)})()},[L]);const Pe={bottom:`-${ne}px`},Ye={bottom:`-${ne}px`,gap:"0px",top:"0px"},S=e=>O.length?e.filter(t=>O.indexOf(t.id)===-1):e,Je=e=>{const t=O.slice();if(t.indexOf(e)>-1){const s=t.indexOf(e);t.splice(s,1)}else t.push(e);Ge(t)},Ke=e=>{const t=Object.assign({},e),s=rt.useTheme();($||F)&&ie.includes(String(t.value))&&(t.value="");let l=[],n="";if($||F){const i=String(t.value).split(" ");let o=25;d&&p==="Mobile"||fe&&!d?o=(r==null?void 0:r.mobileMaxTickLength)??25:d&&p==="Tablet"||xe&&!d?o=(r==null?void 0:r.tabletMaxTickLength)??25:window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches&&!d&&(o=15),i.forEach(b=>{n.length+String(b).length<=o?n+=(n?" ":"")+b:(l.push(n),n=b)}),n&&l.push(n)}else l=[t.value];let c=12;return d&&p==="Mobile"||fe&&!d?c=(r==null?void 0:r.mobileYAxisLineHeight)??12:(d&&p==="Tablet"||xe&&!d)&&(c=(r==null?void 0:r.tabletYAxisLineHeight)??12),ot(t.value,"12px Roboto")+15,y>0&&y<180?a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[w&&a.jsx("line",{stroke:H?z:G,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+_})`,children:l.map((i,o)=>a.jsx("text",{transform:`rotate(${y})`,textAnchor:"start",y:typeof e.value=="number"?0:o*c,dominantBaseline:"middle",style:{...s.axis.ticks.text,fill:E==="null"?"black":E,fontSize:"12px",fontFamily:"sans-serif"},children:i},i))})]}):y>180&&y<360?a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[w&&a.jsx("line",{stroke:H?z:G,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+_})`,children:a.jsx("text",{transform:`rotate(${y})`,textAnchor:"end",dominantBaseline:"middle",style:{...s.axis.ticks.text,fill:E,fontSize:"12px"},children:t.value})})]}):a.jsxs("g",{transform:`translate(${e.x},${e.y+30})`,children:[w&&a.jsx("line",{stroke:H?z:G,strokeWidth:1.5,y1:-32,y2:-12}),a.jsx("g",{transform:`translate(0, ${e.y+_})`,children:l.map((i,o)=>a.jsx("text",{transform:`rotate(${y})`,textAnchor:"middle",y:typeof e.value=="number"?0:o*c,dominantBaseline:"middle",style:{...s.axis.ticks.text,fill:E==="null"?"black":E,fontSize:"12px",fontFamily:"sans-serif"},children:i},i))})]})},Ve=({series:e,xScale:t,yScale:s,innerHeight:l})=>{const n=e&&e.length>0?e[0].color:"#3daff7",c=[];e[0]&&e[0].data.forEach(f=>{Y=="csv"?u.keys.forEach(j=>{c.push({measure:j,min:f.data.variables[j]})}):Se.forEach(j=>{c.push({measure:j,min:f.data.variables[j]})})});const i=c.sort((f,j)=>f.min-j.min),o=ee=="CUSTOM_BETWEEN_TWO_LINES"&&te?te:i[0].measure,b=ee=="CUSTOM_BETWEEN_TWO_LINES"&&ae?ae:i[i.length-1].measure,tt=he.area().x(f=>t(f.data.x)).y0(f=>s(f.data.variables[o])).y1(f=>s(f.data.variables[b]));return a.jsx(a.Fragment,{children:e&&e[0]&&a.jsx("path",{d:tt(e[0].data),fill:n,fillOpacity:.4})})},Ze=({series:e,xScale:t,yScale:s,innerHeight:l,innerWidth:n})=>{const c=[0,n],i=he.line().x((o,b)=>b===0?-10:o).y(o=>s(0));return a.jsx(g.Fragment,{children:a.jsx("path",{d:i(c),fill:"none",stroke:ct,style:{pointerEvents:"none",strokeDasharray:"4 4"}})})},T=["grid","axes","lines","legends"];Te&&T.push(Ve),Me&&(T.push("points"),T.push("mesh")),Ee&&T.push(Ze);let M=[];S(u.data).forEach(e=>{e.data&&(M=[...M,...e.data.map(t=>t.y)])});const Qe=()=>{if(J==="stacked"){const e=[];S(u.data).forEach(l=>{e.push(...l.data)});const s=[];e.forEach(l=>{s.indexOf(l.x)==-1&&s.push(l.x)}),h=Math.max(...s.map(l=>e.filter(n=>n.x==l).map(n=>n.y).reduce((n,c)=>Math.max(n+c,n+0)))),m=Math.min(...s.map(l=>e.filter(n=>n.x==l).map(n=>n.y).reduce((n,c)=>Math.min(n-c,c-n))))}else M.length>0&&(h=Math.max(...M),m=Math.min(...M));return h=h<0?h*.9:h*1.1,m=m>0?m*.9:m*1.1,{min:m,max:h}};let m="auto",h="auto";const W=Qe();ke=="fixed"?(m=B!=null&&B!=""?B:W.min,h=A!=null&&A!=""?A:W.max):(m=W.min,h=W.max);const ce=()=>a.jsx(a.Fragment,{children:Z&&Q&&a.jsx("div",{className:"legend item",children:a.jsx("label",{className:"legend-title",children:Q})})}),Xe={top:Ae,right:je,bottom:Re,left:ye};let U=parseInt(Ie);const Ce=u.data&&((ue=(de=u.data)==null?void 0:de.filter(e=>{var t;return((t=e==null?void 0:e.data)==null?void 0:t.length)>0}))==null?void 0:ue.length),ie=[];if($||F){U=Number.parseInt(r.yAxisTickValues);const e=new Map(Object.entries(((me=r==null?void 0:r.labels)==null?void 0:me.xAxis)??{}));for(const[t,s]of e)s||ie.push(t)}const oe=S(u.data),et=["grid","axes","legends"];if(u!=null&&u.data&&Ce>0){let e=S(u.data);return a.jsxs("div",{style:{height:ve},children:[a.jsx(st.ResponsiveLine,{curve:we,data:oe,margin:Xe,xScale:{type:"point"},yScale:{type:"linear",min:m,max:h,stacked:J=="stacked",reverse:!1,clamp:_e},layers:oe.length===0?et:T,axisTop:null,axisRight:Oe?{tickSize:5,tickValues:U,tickPadding:5,tickRotation:0,legend:v.right,legendPosition:"middle",legendOffset:parseInt(Le),format:t=>{const s=I||N;return D.formatNumber(s.style==="percent"?t/100:t,{...s})}}:null,enableGridY:$e,enableGridX:Fe,enablePointLabel:be==="top",pointLabel:t=>D.formatNumber(N.style==="percent"?t.yFormatted/100:t.yFormatted,N),lineWidth:3,colors:t=>X.getColor(t.id,t),axisBottom:($||F)&&(r==null?void 0:r.xAxisDisabled)===!0?null:{renderTick:Ke,legend:v.bottom,legendPosition:"middle",legendOffset:Number.parseInt(De)},axisLeft:{tickSize:5,tickValues:U,tickPadding:5,tickRotation:0,legend:v.left,legendPosition:"middle",legendOffset:Number.parseInt(ge),format:t=>{const s=I||N;return D.formatNumber(s.style==="percent"?t/100:t,{...s})}},tooltip:t=>pe&&k&&k.trim().length>0?a.jsx(nt.default,{intl:D,format:N,d:t,tooltip:k,tooltipEnableMarkdown:We}):null,pointSize:10,pointBorderWidth:2,pointBorderColor:{from:"serieColor"},useMesh:e.length>0&&e[0].data.length>0},new Date),(x==="top"||x==="bottom")&&a.jsx("div",{className:`legends container has-standard-12-font-size ${x}`,children:a.jsxs("div",{className:"legend-sections",children:[a.jsx("div",{className:"title-section",children:ce()}),a.jsx(lt.default,{onWrapChange:t=>{x==="top"?(He(K+t/2*40),re(t)):(Ue(V+t/2*25),re(t))},className:"legends container has-standard-12-font-size items-section",children:le()})]})}),(x==="right"||x==="left")&&a.jsxs("div",{className:`legends container has-standard-12-font-size  ${x}`,style:x==="right"?Pe:Ye,children:[ce(),le()]})]})}return a.jsx("div",{})},ut=at.injectIntl(dt);exports.default=ut;