@devgateway/dvz-ui-react
Version:
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.
2 lines (1 loc) • 4.74 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react/jsx-runtime"),D=require("react"),ue=require("react-intl"),he=require("@nivo/radar"),me=require("./Legends.js"),N=require("../../utils/deviceType.js");require("lodash");const be="none",xe=({editing:i,legends:ye,marginLeft:A,marginTop:O,marginRight:q,marginBottom:V,options:d,intl:T,format:u,height:z,showLegends:F,legendPosition:H,legendLabel:I,legendCheckBack:$,legendLabelBack:w,legendLabelColor:P,colorGenerator:W,reverseLegend:Y,radarCurve:_,radarFillOpacity:U,radarBorderWidth:X,radarGridLevels:v,radarGridShape:J,radarGridLabelOffset:K=10,radarEnableDots:G,radarDotSize:Q,radarEnableDotLabel:Z,radarDotLabelOffset:C,mobileCustomization:R,previewMode:p})=>{const[M,S]=D.useState([]),h=N.default()==="mobile",m=["tablet","midTablet"].includes(N.default()),ee=h||m,e=D.useMemo(()=>JSON.parse(decodeURIComponent(R)),[R]),b=ee&&((e==null?void 0:e.showCustomization)??!1),j=b&&p!=="Desktop",E=!i&&b;if(!d||!d.data)return null;const te=t=>t.filter(a=>!M.includes(a)),ae=t=>S(a=>a.includes(t)?a.filter(s=>s!==t):[...a,t]);function g({tickValue:t,editing:a,previewMode:s,isMobileDevice:o,isTabletDevice:l,mobileConfigSettings:r,isNotDesktopPreview:y,isNotEditingAndIsMobileCustomizationEnabled:x}){let n=25;return(y||x)&&(a&&s==="Mobile"||o&&!a?n=(r==null?void 0:r.mobileMaxTickLength)??25:a&&s==="Tablet"||l&&!a?n=(r==null?void 0:r.tabletMaxTickLength)??25:!a&&window.matchMedia("(min-width: 768px) and (max-width: 1250px)").matches&&(n=15)),n}const k=(t,a)=>{const s=String(t).split(" "),o=[];let l="";return s.forEach(r=>{`${l} ${r}`.trim().length<=a?l=(l?`${l} `:"")+r:(o.push(l),l=r)}),l&&o.push(l),o},re=({centerX:t,centerY:a,radiusScale:s})=>{const o=s.ticks(v).filter(r=>r>0),l=h?e.mobileYAxisLineHeight??12:m?e.tabletYAxisLineHeight??12:12;return c.jsx("g",{children:o.map((r,y)=>{const x=s(r),n=t+x*Math.sin(0)+7,f=a-x*Math.cos(0),ce=T.formatNumber(u.style==="percent"?r/100:r,u),oe=g({tickValue:r,editing:i,previewMode:p,isMobileDevice:h,isTabletDevice:m,mobileConfigSettings:e,isNotDesktopPreview:j,isNotEditingAndIsMobileCustomizationEnabled:E}),ie=k(ce,oe);return c.jsxs("g",{children:[c.jsx("line",{x1:n-7,y1:f-4,x2:n-3,y2:f-4,stroke:"rgb(51,51,51)",strokeWidth:1}),ie.map((de,B)=>c.jsx("text",{x:n,y:f+B*l,fontFamily:"sans-serif",fontSize:"11px",fill:"rgb(51,51,51)",children:de},B))]},y)})})},se=({id:t,x:a,y:s})=>{const o=g({tickValue:t,editing:i,previewMode:p,isMobileDevice:h,isTabletDevice:m,mobileConfigSettings:e,isNotDesktopPreview:j,isNotEditingAndIsMobileCustomizationEnabled:E}),l=k(t,o),r=h?e.mobileXAxisLineHeight??12:m?e.tabletXAxisLineHeight??12:12,y=a>5?"start":a<-5?"end":"middle";return c.jsx("g",{transform:`translate(${a}, ${s})`,children:c.jsx("text",{textAnchor:y,alignmentBaseline:"middle",style:{fontFamily:"sans-serif",fontSize:"11px",fill:"#333",pointerEvents:"none"},children:l.map((x,n)=>c.jsx("tspan",{x:0,dy:n===0?0:`${r}px`,children:x},n))})})},L=(()=>{const t=!i&&h&&b||i&&p==="Mobile"&&b,a=!i&&m&&b||i&&p==="Tablet"&&b,s={mobile:{marginLeft:e==null?void 0:e.mobileMarginLeft,marginTop:e==null?void 0:e.mobileMarginTop,marginRight:e==null?void 0:e.mobileMarginRight,marginBottom:e==null?void 0:e.mobileMarginBottom},tablet:{marginLeft:e==null?void 0:e.tabletMarginLeft,marginTop:e==null?void 0:e.tabletMarginTop,marginRight:e==null?void 0:e.tabletMarginRight,marginBottom:e==null?void 0:e.tabletMarginBottom}};return t?s.mobile:a?s.tablet:{marginLeft:A,marginTop:O,marginRight:q,marginBottom:V}})(),le={top:L.marginTop,right:L.marginRight,bottom:L.marginBottom,left:L.marginLeft},ne=d.keys.map(t=>({id:t,label:t,color:M.includes(t)?be:W.getColorByKey(t),enabled:!M.includes(t)}));return c.jsxs("div",{style:{height:z},className:"radar",children:[c.jsx(he.ResponsiveRadar,{data:d.data,keys:te(d.keys),indexBy:d.indexBy,margin:le,curve:_,maxValue:"auto",valueFormat:t=>T.formatNumber(u.style==="percent"?t/100:t,u),borderColor:{from:"color"},gridLevels:v,gridShape:J,gridLabelOffset:Number.parseInt(K,10),gridLabel:se,enableDots:G,dotSize:Q,dotBorderWidth:2,enableDotLabel:Z,dotLabelYOffset:C,dotLabel:t=>T.formatNumber(u.style==="percent"?t.value/100:t.value,u),fillOpacity:U,borderWidth:X,blendMode:"multiply",motionConfig:"wobbly",theme:{tooltip:{basic:{background:"#EEE",whiteSpace:"pre",display:"flex"},tableCell:{padding:"3px 5px"}}},layers:["grid",re,"markers","areas","lines","layers","slices","dots","axes","legends","mesh","annotations"]}),c.jsx(me.default,{filter:M,showLegends:F,chartLegends:ne,legendLabel:I,legendPosition:H,legendCheckBack:$,legendLabelBack:w,legendLabelColor:P,onToggle:ae,reverseLegend:Y})]})},pe=ue.injectIntl(xe);exports.default=pe;