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