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