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