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