@devgateway/dvz-ui-react/dist/cjs/embeddable/big-number/index.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"),y=require("react"),E=require("semantic-ui-react"),O=require("../data/DataProvider.js"),V=require("../data/DataConsumer.js");require("@devgateway/wp-react-lib");const _=require("react-redux"),T=require("@react-spring/web"),H=l=>{const{editing:o=!1,unique:c,intl:e,childContent:r,"data-csv":p="","data-dvz-proxy-dataset-id":b,"data-no-data-message":w="No data matches your selection","data-view-mode":v="info","data-height":u,"data-app":d,"data-measures":F="{}","data-format":g="{}","data-group":i,"data-filters":m="[]","data-number-font-size":n=20,"data-label-font-size":S=20,"data-number-color":j="#000000","data-label-color":D="#000000","data-label":C="","data-wait-for-filters":z="false","data-no-data-text":q="-"}=l,x=e.locale,h=y.useRef(null),f=t=>o?t:decodeURIComponent(t),R=t=>{try{return JSON.parse(f(t))}catch{console.error("error parsing value:"+t)}return null},s=R(g),U=s?{style:s.style==="compacted"?"decimal":s.style,notation:s.style==="compacted"?"compact":"standard",currency:s.currency,minimumFractionDigits:parseInt(s.minimumFractionDigits),maximumFractionDigits:parseInt(s.maximumFractionDigits)}:{notation:"standard",currency:"USD",minimumFractionDigits:2,maximumFractionDigits:2},[G,K]=y.useState(v),A=o?u-80:u-40,I={},M=R(m)||{};M&&M.forEach&&M.forEach(t=>{t.value!=null&&t.value.filter(N=>N!=null&&N.toString().trim()!="").length>0&&(I[t.param]=t.value)}),b&&(I.dvzProxyDatasetId=b);const P=[];return a.jsx("div",{ref:h,children:a.jsx(E.Container,{className:"chart container big-number-container",style:{height:u+"px"},fluid:!0,children:a.jsx(O.default,{style:{height:`${A}px`},params:I,app:d,group:i,csv:p,editing:o,waitForFilters:z==="true",store:[d,c,...P],source:P.join("/"),children:a.jsx(V.default,{children:a.jsx(J,{locale:x,intl:e,app:d,format:U,measure:R(F)[0]||null,label:C,numberFontSize:n,numberColor:j,labelFontSize:S,labelColor:D,noDataText:q})})})})})},J=l=>{var x,h;const{app:o,measure:c,data:e,format:r,label:p,numberColor:b,numberFontSize:w,labelColor:v,labelFontSize:u,noDataText:d="-",intl:F}=l;let g=c,i=e;o==="csv"&&((x=e==null?void 0:e.meta)!=null&&x.fields)&&((h=e==null?void 0:e.data)!=null&&h.length)&&(g=e.meta.fields[0],i=e.data[0]);const m=(i==null?void 0:i[g])??null,n=m?(r==null?void 0:r.style)==="percent"?m/100:m:null,[S,j]=y.useState(n);y.useEffect(()=>{n!=null&&j(n)},[n]);const{number:D}=T.useSpring({from:{number:0},to:{number:S??0},config:{mass:1,tension:120,friction:30}}),C={color:decodeURIComponent(b),fontSize:w+"px",textAlign:"center"},z={color:decodeURIComponent(v),fontSize:u+"px",textAlign:"center"},q=f=>F.formatNumber(f,{...r});return a.jsxs("div",{children:[a.jsx("div",{style:C,className:"big-number",children:n===null?d:a.jsx(T.animated.span,{children:D.to(f=>q(f))})}),p&&a.jsx("div",{style:z,className:"big-number-label",children:p})]})},$=(l,o)=>{const{"data-app":c,"data-group":e}=o,r=l.getIn(["data","measures",c,e]);return r?{injectedMeasures:r}:{}},k={},B=_.connect($,k)(H);exports.default=B;