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