@devgateway/dvz-ui-react 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),T=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react/jsx-runtime"),T=require("react"),V=require("semantic-ui-react"),_=require("../data/DataProvider.js"),A=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":i=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,I=T.useRef(null),s=r=>c?r:decodeURIComponent(r),l=r=>{try{return JSON.parse(s(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),E=c?v-80:v-40,w={},R=l(z)||{};R&&R.forEach&&R.forEach(r=>{r.value!=null&&r.value.filter(M=>M!=null&&M.toString().trim()!="").length>0&&(w[r.param]=r.value)}),x&&(w.dvzProxyDatasetId=x);const P=[];return o!="none"&&P.push(o),a.jsx("div",{ref:I,children:a.jsx(V.Container,{className:"chart container big-number-trend-container",style:{height:v+"px"},fluid:!0,children:a.jsx(_.default,{style:{height:`${E}px`},params:w,app:y,group:F,csv:d,editing:c,waitForFilters:j==="true",store:[y,h,...P],source:P.join("/"),children:a.jsx(A.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:i,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=[],i,n;if(h=="csv"){const{data:s,meta:{fields:l}}=d;i=l[0],n=l[1],e=d.data.map(t=>({value:t[i],[n]:t[n],[i]:t[i]}))}else e=!d.children||d.children.length==0?[]:d.children,n=m,i=f,e=e.map(s=>({value:s.value,[n]:s[n],[i]:s.value}));let u=null,p=null,o,S,j;e.length>0&&(e=e.sort((s,l)=>J.alphaSort(!1,F.locale,s.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"},I={color:decodeURIComponent(b),fontSize:D+"px"};return a.jsxs("div",{className:"trend",children:[a.jsx("div",{className:"label",style:I,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("div",{className:o>0?"icon trend up":"icon trend down"})]}),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;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as o, jsxs as E } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as q, useState as A } from "react";
|
|
3
3
|
import { Container as H } from "semantic-ui-react";
|
|
4
4
|
import J from "../data/DataProvider.js";
|
|
5
5
|
import $ from "../data/DataConsumer.js";
|
|
@@ -10,14 +10,14 @@ import G from "string-template";
|
|
|
10
10
|
const K = (f) => {
|
|
11
11
|
const {
|
|
12
12
|
editing: c = !1,
|
|
13
|
-
unique:
|
|
13
|
+
unique: h,
|
|
14
14
|
intl: u,
|
|
15
|
-
childContent:
|
|
15
|
+
childContent: g,
|
|
16
16
|
"data-csv": m = "",
|
|
17
17
|
"data-dvz-proxy-dataset-id": b,
|
|
18
18
|
"data-no-data-message": T = "No data matches your selection",
|
|
19
|
-
"data-view-mode":
|
|
20
|
-
"data-height":
|
|
19
|
+
"data-view-mode": F = "info",
|
|
20
|
+
"data-height": v,
|
|
21
21
|
"data-app": x,
|
|
22
22
|
"data-measures": C = "{}",
|
|
23
23
|
"data-format": z = "{}",
|
|
@@ -31,15 +31,15 @@ const K = (f) => {
|
|
|
31
31
|
"data-dimension1": r,
|
|
32
32
|
"data-show-percentage-change": S = "false",
|
|
33
33
|
"data-wait-for-filters": D = "false",
|
|
34
|
-
"data-no-data-text":
|
|
35
|
-
} = f,
|
|
34
|
+
"data-no-data-text": I = "-"
|
|
35
|
+
} = f, w = u.locale, j = q(null), s = (n) => c ? n : decodeURIComponent(n), l = (n) => {
|
|
36
36
|
try {
|
|
37
37
|
return JSON.parse(s(n));
|
|
38
38
|
} catch {
|
|
39
39
|
console.error("error parsing value:" + n);
|
|
40
40
|
}
|
|
41
41
|
return null;
|
|
42
|
-
}, t = l(z),
|
|
42
|
+
}, t = l(z), O = t ? {
|
|
43
43
|
style: t.style === "compacted" ? "decimal" : t.style,
|
|
44
44
|
notation: t.style === "compacted" ? "compact" : "standard",
|
|
45
45
|
currency: t.currency,
|
|
@@ -50,31 +50,31 @@ const K = (f) => {
|
|
|
50
50
|
currency: "USD",
|
|
51
51
|
minimumFractionDigits: 2,
|
|
52
52
|
maximumFractionDigits: 2
|
|
53
|
-
}, [X, Y] =
|
|
53
|
+
}, [X, Y] = A(F), V = c ? v - 80 : v - 40, P = {}, M = l(N) || {};
|
|
54
54
|
M && M.forEach && M.forEach((n) => {
|
|
55
55
|
n.value != null && n.value.filter((U) => U != null && U.toString().trim() != "").length > 0 && (P[n.param] = n.value);
|
|
56
56
|
}), b && (P.dvzProxyDatasetId = b);
|
|
57
57
|
const R = [];
|
|
58
|
-
return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height:
|
|
58
|
+
return r != "none" && R.push(r), /* @__PURE__ */ o("div", { ref: j, children: /* @__PURE__ */ o(H, { className: "chart container big-number-trend-container", style: { height: v + "px" }, fluid: !0, children: /* @__PURE__ */ o(
|
|
59
59
|
J,
|
|
60
60
|
{
|
|
61
|
-
style: { height: `${
|
|
61
|
+
style: { height: `${V}px` },
|
|
62
62
|
params: P,
|
|
63
63
|
app: x,
|
|
64
64
|
group: y,
|
|
65
65
|
csv: m,
|
|
66
66
|
editing: c,
|
|
67
67
|
waitForFilters: D === "true",
|
|
68
|
-
store: [x,
|
|
68
|
+
store: [x, h, ...R],
|
|
69
69
|
source: R.join("/"),
|
|
70
70
|
children: /* @__PURE__ */ o($, { children: /* @__PURE__ */ o(
|
|
71
71
|
L,
|
|
72
72
|
{
|
|
73
73
|
editing: c,
|
|
74
|
-
locale:
|
|
74
|
+
locale: w,
|
|
75
75
|
intl: u,
|
|
76
76
|
app: x,
|
|
77
|
-
format:
|
|
77
|
+
format: O,
|
|
78
78
|
dimension1: r,
|
|
79
79
|
measure: l(C)[0] || null,
|
|
80
80
|
label: p,
|
|
@@ -83,7 +83,7 @@ const K = (f) => {
|
|
|
83
83
|
labelFontSize: a,
|
|
84
84
|
percentFontSize: d,
|
|
85
85
|
showPercentageChange: S == "true" || S == !0,
|
|
86
|
-
noDataText:
|
|
86
|
+
noDataText: I
|
|
87
87
|
}
|
|
88
88
|
) })
|
|
89
89
|
}
|
|
@@ -91,14 +91,14 @@ const K = (f) => {
|
|
|
91
91
|
}, L = (f) => {
|
|
92
92
|
const {
|
|
93
93
|
editing: c,
|
|
94
|
-
app:
|
|
94
|
+
app: h,
|
|
95
95
|
measure: u,
|
|
96
|
-
dimension1:
|
|
96
|
+
dimension1: g,
|
|
97
97
|
data: m,
|
|
98
98
|
format: b,
|
|
99
99
|
label: T,
|
|
100
|
-
textColor:
|
|
101
|
-
bigNumberFontSize:
|
|
100
|
+
textColor: F,
|
|
101
|
+
bigNumberFontSize: v,
|
|
102
102
|
percentFontSize: x,
|
|
103
103
|
labelFontSize: C,
|
|
104
104
|
showPercentageChange: z,
|
|
@@ -106,7 +106,7 @@ const K = (f) => {
|
|
|
106
106
|
noDataText: N
|
|
107
107
|
} = f;
|
|
108
108
|
let e = [], i, a;
|
|
109
|
-
if (
|
|
109
|
+
if (h == "csv") {
|
|
110
110
|
const { data: s, meta: { fields: l } } = m;
|
|
111
111
|
i = l[0], a = l[1], e = m.data.map((t) => ({
|
|
112
112
|
value: t[i],
|
|
@@ -114,35 +114,35 @@ const K = (f) => {
|
|
|
114
114
|
[i]: t[i]
|
|
115
115
|
}));
|
|
116
116
|
} else
|
|
117
|
-
e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i =
|
|
117
|
+
e = !m.children || m.children.length == 0 ? [] : m.children, a = u, i = g, e = e.map((s) => ({
|
|
118
118
|
value: s.value,
|
|
119
119
|
[a]: s[a],
|
|
120
120
|
[i]: s.value
|
|
121
121
|
}));
|
|
122
122
|
let d = null, p = null, r, S, D;
|
|
123
123
|
e.length > 0 && (e = e.sort((s, l) => B(!1, y.locale, s.value, l.value)), d = e[e.length - 1][a], e.length > 1 && (p = e[e.length - 2][a]), D = y.formatNumber(b.style === "percent" ? d / 100 : d, { ...b }), p && (r = (d - p) / p, S = y.formatNumber(r, { style: "percent", minimumFractionDigits: 2, maximumFractionDigits: 2 }))), d == null && (D = N);
|
|
124
|
-
const
|
|
125
|
-
color: decodeURIComponent(
|
|
126
|
-
fontSize:
|
|
127
|
-
},
|
|
128
|
-
color: decodeURIComponent(
|
|
124
|
+
const I = {
|
|
125
|
+
color: decodeURIComponent(F),
|
|
126
|
+
fontSize: v + "px"
|
|
127
|
+
}, w = {
|
|
128
|
+
color: decodeURIComponent(F),
|
|
129
129
|
fontSize: x + "px"
|
|
130
130
|
}, j = {
|
|
131
|
-
color: decodeURIComponent(
|
|
131
|
+
color: decodeURIComponent(F),
|
|
132
132
|
fontSize: C + "px"
|
|
133
133
|
};
|
|
134
|
-
return /* @__PURE__ */
|
|
134
|
+
return /* @__PURE__ */ E("div", { className: "trend", children: [
|
|
135
135
|
/* @__PURE__ */ o("div", { className: "label", style: j, children: G(T, e[e.length - 1]) }),
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
/* @__PURE__ */ o("span", { className: "number", style:
|
|
138
|
-
r && /* @__PURE__ */ o("
|
|
136
|
+
/* @__PURE__ */ E("div", { className: "number-and-icon", children: [
|
|
137
|
+
/* @__PURE__ */ o("span", { className: "number", style: I, children: D }),
|
|
138
|
+
r && /* @__PURE__ */ o("div", { className: r > 0 ? "icon trend up" : "icon trend down" })
|
|
139
139
|
] }),
|
|
140
|
-
z && r && /* @__PURE__ */ o("div", { className: "percentage", style:
|
|
140
|
+
z && r && /* @__PURE__ */ o("div", { className: "percentage", style: w, children: S })
|
|
141
141
|
] });
|
|
142
142
|
}, Q = (f, c) => {
|
|
143
|
-
const { "data-app":
|
|
144
|
-
return
|
|
145
|
-
injectedMeasures:
|
|
143
|
+
const { "data-app": h, "data-group": u } = c, g = f.getIn(["data", "measures", h, u]);
|
|
144
|
+
return g ? {
|
|
145
|
+
injectedMeasures: g
|
|
146
146
|
} : {};
|
|
147
147
|
}, W = {}, se = k(Q, W)(K);
|
|
148
148
|
export {
|