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