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