@devgateway/dvz-ui-react 1.8.8 → 1.9.1

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.
Files changed (56) hide show
  1. package/dist/cjs/common.css +1 -1
  2. package/dist/cjs/embeddable/big-number-trend/Alternative.js +1 -1
  3. package/dist/cjs/embeddable/big-number-trend/BigNumberTrendContainer.js +1 -0
  4. package/dist/cjs/embeddable/big-number-trend/Classic.js +1 -1
  5. package/dist/cjs/embeddable/big-number-trend/useBigNumberTrendData.js +1 -0
  6. package/dist/cjs/embeddable/chart/Bar.js +1 -1
  7. package/dist/cjs/embeddable/chart/Messages.js +2 -2
  8. package/dist/cjs/embeddable/chart/data/Line.js +1 -1
  9. package/dist/cjs/embeddable/chart/data/Utils.js +1 -1
  10. package/dist/cjs/embeddable/chart/index.js +1 -1
  11. package/dist/cjs/embeddable/d3Map/index.js +1 -1
  12. package/dist/cjs/embeddable/data/CategoriesProvider.js +1 -1
  13. package/dist/cjs/embeddable/data/DataConsumer.js +1 -1
  14. package/dist/cjs/embeddable/data/DataProvider.js +1 -1
  15. package/dist/cjs/embeddable/download/dom-to-image.js +32 -1
  16. package/dist/cjs/embeddable/featuredtabs/index.js +1 -1
  17. package/dist/cjs/embeddable/map/index.js +2 -2
  18. package/dist/cjs/embeddable/pagemodules/FloatingNavigator.js +1 -1
  19. package/dist/cjs/embeddable/pagemodules/index.js +1 -1
  20. package/dist/cjs/embeddable/reducers/data.js +1 -1
  21. package/dist/cjs/index.js +1 -1
  22. package/dist/cjs/layout/FlexWrapDetector.js +1 -1
  23. package/dist/cjs/styles.css +1 -1
  24. package/dist/esm/common.css +1 -1
  25. package/dist/esm/embeddable/big-number-trend/Alternative.js +62 -211
  26. package/dist/esm/embeddable/big-number-trend/BigNumberTrendContainer.js +125 -0
  27. package/dist/esm/embeddable/big-number-trend/Classic.js +51 -181
  28. package/dist/esm/embeddable/big-number-trend/index.js +8 -8
  29. package/dist/esm/embeddable/big-number-trend/useBigNumberTrendData.js +49 -0
  30. package/dist/esm/embeddable/chart/Bar.js +464 -471
  31. package/dist/esm/embeddable/chart/Messages.js +18 -15
  32. package/dist/esm/embeddable/chart/data/Line.js +1 -4
  33. package/dist/esm/embeddable/chart/data/Utils.js +0 -1
  34. package/dist/esm/embeddable/chart/index.js +363 -359
  35. package/dist/esm/embeddable/d3Map/index.js +129 -125
  36. package/dist/esm/embeddable/data/CategoriesProvider.js +31 -38
  37. package/dist/esm/embeddable/data/DataConsumer.js +12 -8
  38. package/dist/esm/embeddable/data/DataProvider.js +62 -124
  39. package/dist/esm/embeddable/download/dom-to-image.js +32 -0
  40. package/dist/esm/embeddable/featuredtabs/index.js +64 -61
  41. package/dist/esm/embeddable/map/index.js +47 -47
  42. package/dist/esm/embeddable/pagemodules/FloatingNavigator.js +14 -15
  43. package/dist/esm/embeddable/pagemodules/index.js +44 -45
  44. package/dist/esm/embeddable/reducers/data.js +46 -44
  45. package/dist/esm/index.js +74 -73
  46. package/dist/esm/layout/FlexWrapDetector.js +10 -10
  47. package/dist/esm/styles.css +1 -1
  48. package/dist/types/embeddable/big-number-trend/Alternative.d.ts +2 -4
  49. package/dist/types/embeddable/big-number-trend/BigNumberTrendContainer.d.ts +5 -0
  50. package/dist/types/embeddable/big-number-trend/Classic.d.ts +2 -4
  51. package/dist/types/embeddable/big-number-trend/useBigNumberTrendData.d.ts +21 -0
  52. package/dist/types/embeddable/chart/Bar.d.ts +1 -2
  53. package/dist/types/embeddable/data/DataConsumer.d.ts +5 -2
  54. package/dist/types/embeddable/data/DataProvider.d.ts +18 -3
  55. package/dist/types/layout/FlexWrapDetector.d.ts +2 -1
  56. package/package.json +2 -2
@@ -1,185 +1,189 @@
1
- import { jsx as i, jsxs as Q } from "react/jsx-runtime";
2
- import { useState as l, useRef as F, useEffect as C } from "react";
3
- import { connect as U } from "react-redux";
4
- import { parse as c, compareJsonProps as j, decode as X } from "../utils/parseUtils.js";
5
- import Y from "./Map.js";
6
- import _ from "./BaseLayer.js";
7
- import tt from "./DataLayer.js";
8
- import et from "./LatLongLayer.js";
9
- import ot from "./ZoomControl.js";
10
- import it from "./ProjectedContainer.js";
11
- import nt from "./Legends.js";
12
- import rt from "./FlowLayer.js";
13
- const at = (g) => {
1
+ import { jsx as a, jsxs as ee } from "react/jsx-runtime";
2
+ import { useState as s, useRef as V, useEffect as C } from "react";
3
+ import { connect as te } from "react-redux";
4
+ import { parse as c, compareJsonProps as T, decode as oe } from "../utils/parseUtils.js";
5
+ import ne from "./Map.js";
6
+ import ie from "./BaseLayer.js";
7
+ import re from "./DataLayer.js";
8
+ import ae from "./LatLongLayer.js";
9
+ import se from "./ZoomControl.js";
10
+ import le from "./ProjectedContainer.js";
11
+ import ce from "./Legends.js";
12
+ import de from "./FlowLayer.js";
13
+ const me = (w) => {
14
14
  const {
15
15
  unique: d,
16
16
  editing: n,
17
- "data-identifier": x,
18
- "data-group": f,
17
+ "data-identifier": j,
18
+ "data-group": u,
19
19
  "data-layers": h = "[]",
20
- "data-height": V = 400,
21
- "data-width": ct = 1e3,
22
- "data-back-ground-color": k = "#88e8dc",
23
- "data-map-position": w = "{}",
20
+ "data-height": W = 400,
21
+ "data-width": k = 1e3,
22
+ "data-back-ground-color": x = "#88e8dc",
23
+ "data-map-position": P = "{}",
24
24
  "data-projection": A = "geoMercator",
25
25
  "data-zoom-enabled": I = !0,
26
26
  "data-rotation-enabled": z = !1,
27
27
  "data-wait-for-filters": m = "false",
28
- intl: p
29
- } = g, [R, Z] = l(null), v = R, E = Number(V), [P, N] = l(c(w, n), []), [r, b] = l(c(h), []), s = F(null);
28
+ intl: b
29
+ } = w, [N, D] = s(Number(k)), [q, O] = s(!1), R = N, Z = Number(W), [F, B] = s(c(P, n), []), [i, y] = s(c(h), []), l = V(null);
30
30
  C(() => {
31
- if (!s.current) return;
32
- const t = s.current.clientWidth;
33
- t > 0 && Z(t);
34
- let o = null;
31
+ if (!l.current) return;
35
32
  const e = () => {
36
- o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
37
- if (!s.current) return;
38
- const W = s.current.clientWidth;
39
- W > 0 && Z(W);
40
- });
41
- }, a = new ResizeObserver(e);
42
- return a.observe(s.current), () => {
43
- a.disconnect(), o && cancelAnimationFrame(o);
33
+ if (!l.current || getComputedStyle(l.current).visibility === "hidden") return;
34
+ const S = l.current.clientWidth;
35
+ S > 0 && (D(S), O(!0));
36
+ };
37
+ let o = null;
38
+ const t = () => {
39
+ o && cancelAnimationFrame(o), o = requestAnimationFrame(e);
40
+ }, r = new ResizeObserver(t);
41
+ r.observe(l.current);
42
+ const M = new MutationObserver(e);
43
+ let p = l.current.parentElement;
44
+ for (; p && p !== document.body; )
45
+ M.observe(p, { attributes: !0, attributeFilter: ["style", "class"] }), p = p.parentElement;
46
+ return e(), () => {
47
+ r.disconnect(), M.disconnect(), o && cancelAnimationFrame(o);
44
48
  };
45
49
  }, []);
46
- const u = F(null), [L, S] = l(null), [M, q] = l(null), [D, B] = l(null);
50
+ const f = V(null), [L, H] = s(null), [v, J] = s(null), [G, K] = s(null);
47
51
  C(() => {
48
- const t = c(w, n);
49
- j(P, t) || N(t);
50
- }, [w]), C(() => {
51
- const t = c(h);
52
- j(r, t) || b(t);
52
+ const e = c(P, n);
53
+ T(F, e) || B(e);
54
+ }, [P]), C(() => {
55
+ const e = c(h);
56
+ T(i, e) || y(e);
53
57
  }, [h]);
54
- const H = (t) => {
55
- const o = r.slice(), e = o.find((a) => a.id == t);
56
- e && (e.visible = !e.visible), b(o);
57
- }, J = (t) => {
58
- const o = r.slice(), e = o.find((a) => a.id == t);
59
- e && (e.patternsVisible = e.patternsVisible == null ? !1 : !e.patternsVisible), b(o);
60
- }, O = (t) => {
61
- B(t);
62
- }, $ = (t) => {
63
- const o = r.slice(), e = o.find((a) => a.id == t);
64
- e && (e.colorLayerVisible = e.colorLayerVisible == null ? !1 : !e.colorLayerVisible), b(o);
65
- }, [G, K] = l(!1), T = F(0);
66
- r.length;
67
- const y = () => {
68
- T.current += 1, T.current >= r.length && K(!0);
58
+ const Q = (e) => {
59
+ const o = i.slice(), t = o.find((r) => r.id == e);
60
+ t && (t.visible = !t.visible), y(o);
61
+ }, U = (e) => {
62
+ const o = i.slice(), t = o.find((r) => r.id == e);
63
+ t && (t.patternsVisible = t.patternsVisible == null ? !1 : !t.patternsVisible), y(o);
64
+ }, X = (e) => {
65
+ K(e);
66
+ }, Y = (e) => {
67
+ const o = i.slice(), t = o.find((r) => r.id == e);
68
+ t && (t.colorLayerVisible = t.colorLayerVisible == null ? !1 : !t.colorLayerVisible), y(o);
69
+ }, [_, $] = s(!1), E = V(0);
70
+ i.length;
71
+ const g = () => {
72
+ E.current += 1, E.current >= i.length && $(!0);
69
73
  };
70
- return R ? /* @__PURE__ */ i("div", { ref: s, className: "d3map-container", style: { width: "100%" }, children: /* @__PURE__ */ Q(
71
- it,
74
+ return /* @__PURE__ */ a("div", { ref: l, className: "d3map-container", style: { width: "100%", opacity: q ? 1 : 0 }, children: /* @__PURE__ */ ee(
75
+ le,
72
76
  {
73
- backgroundColor: X(k),
74
- height: E,
75
- width: v,
77
+ backgroundColor: oe(x),
78
+ height: Z,
79
+ width: R,
76
80
  projectionName: A,
77
81
  editing: n,
78
- initialPosition: P,
82
+ initialPosition: F,
79
83
  children: [
80
- /* @__PURE__ */ i(Y, { rotationEnabled: c(z, n), children: r.map((t, o) => {
81
- if (t.type === "base")
82
- return /* @__PURE__ */ i(
83
- _,
84
+ /* @__PURE__ */ a(ne, { rotationEnabled: c(z, n), children: i.map((e, o) => {
85
+ if (e.type === "base")
86
+ return /* @__PURE__ */ a(
87
+ ie,
84
88
  {
85
- minLabelZoomVisible: t.minLabelZoomVisible,
86
- onReady: y,
89
+ minLabelZoomVisible: e.minLabelZoomVisible,
90
+ onReady: g,
87
91
  transform: L,
88
- intl: p,
89
- zoom: u,
92
+ intl: b,
93
+ zoom: f,
90
94
  unique: d,
91
- ...t
95
+ ...e
92
96
  },
93
- t.id
97
+ e.id
94
98
  );
95
- if (t.type === "data")
96
- return /* @__PURE__ */ i(
97
- tt,
99
+ if (e.type === "data")
100
+ return /* @__PURE__ */ a(
101
+ re,
98
102
  {
99
- minLabelZoomVisible: t.minLabelZoomVisible,
103
+ minLabelZoomVisible: e.minLabelZoomVisible,
100
104
  editing: n,
101
- onLayerCreated: (e) => {
105
+ onLayerCreated: (t) => {
102
106
  },
103
- onReady: y,
107
+ onReady: g,
104
108
  transform: L,
105
- intl: p,
106
- group: f,
107
- zoom: u,
109
+ intl: b,
110
+ group: u,
111
+ zoom: f,
108
112
  unique: d,
109
- ...t,
110
- settings: g.wordress,
111
- togglePatterns: J,
112
- initialPosition: P,
113
+ ...e,
114
+ settings: w.wordress,
115
+ togglePatterns: U,
116
+ initialPosition: F,
113
117
  waitForFilters: m == "true" || m == !0
114
118
  },
115
- t.id
119
+ e.id
116
120
  );
117
- if (t.type === "flow")
118
- return /* @__PURE__ */ i(
119
- rt,
121
+ if (e.type === "flow")
122
+ return /* @__PURE__ */ a(
123
+ de,
120
124
  {
121
- onReady: y,
125
+ onReady: g,
122
126
  transform: L,
123
- intl: p,
124
- group: f,
125
- zoom: u,
127
+ intl: b,
128
+ group: u,
129
+ zoom: f,
126
130
  unique: d,
127
- ...t,
131
+ ...e,
128
132
  waitForFilters: m == "true" || m == !0
129
133
  },
130
- t.id
134
+ e.id
131
135
  );
132
- if (t.type === "dataPoints")
133
- return /* @__PURE__ */ i(
134
- et,
136
+ if (e.type === "dataPoints")
137
+ return /* @__PURE__ */ a(
138
+ ae,
135
139
  {
136
- onReady: y,
137
- onZoomToPoint: O,
138
- selectedItem: M,
140
+ onReady: g,
141
+ onZoomToPoint: X,
142
+ selectedItem: v,
139
143
  transform: L,
140
- intl: p,
141
- group: f,
142
- zoom: u,
144
+ intl: b,
145
+ group: u,
146
+ zoom: f,
143
147
  unique: d,
144
- ...t,
148
+ ...e,
145
149
  waitForFilters: m == "true" || m == !0
146
150
  },
147
- t.id
151
+ e.id
148
152
  );
149
153
  }) }),
150
- /* @__PURE__ */ i(
151
- nt,
154
+ /* @__PURE__ */ a(
155
+ ce,
152
156
  {
153
- selectedItem: M,
157
+ selectedItem: v,
154
158
  unique: d,
155
- d2Click: (t) => q(t),
159
+ d2Click: (e) => J(e),
156
160
  patternsData: null,
157
- layers: r,
158
- group: f,
159
- onItemClick: H,
160
- toggleColorLayer: $
161
+ layers: i,
162
+ group: u,
163
+ onItemClick: Q,
164
+ toggleColorLayer: Y
161
165
  }
162
166
  ),
163
- /* @__PURE__ */ i(
164
- ot,
167
+ /* @__PURE__ */ a(
168
+ se,
165
169
  {
166
- readyToZoom: G,
167
- selectedPoint: D,
170
+ readyToZoom: _,
171
+ selectedPoint: G,
168
172
  rootationEmabled: c(z, n),
169
173
  zoomEnabled: c(I, n),
170
- onZoomed: S,
171
- width: v,
172
- height: E,
173
- ref: u,
174
- group: f,
175
- identifier: x,
174
+ onZoomed: H,
175
+ width: R,
176
+ height: Z,
177
+ ref: f,
178
+ group: u,
179
+ identifier: j,
176
180
  editing: n
177
181
  }
178
182
  )
179
183
  ]
180
184
  }
181
- ) }) : /* @__PURE__ */ i("div", { ref: s, className: "d3map-container", style: { width: "100%", height: `${V}px` } });
182
- }, st = (g, d) => ({}), lt = {}, Ft = U(st, lt)(at);
185
+ ) });
186
+ }, ue = (w, d) => ({}), fe = {}, Re = te(ue, fe)(me);
183
187
  export {
184
- Ft as default
188
+ Re as default
185
189
  };
@@ -1,53 +1,46 @@
1
- import { jsx as r, jsxs as C } from "react/jsx-runtime";
2
- import x from "react";
3
- import { connect as L } from "react-redux";
4
- import { injectIntl as J } from "react-intl";
5
- import { CategoriesContext as M } from "./DataContext.js";
6
- import { loadFilterItems as N, getCategories as T } from "../reducers/data.js";
7
- import { Container as D, Segment as v } from "semantic-ui-react";
8
- const j = ({ data: t, children: e }) => {
9
- const o = x.useMemo(() => t ? t.toJS() : null, [t]);
10
- return /* @__PURE__ */ r(M.Provider, { value: o, children: e });
1
+ import { jsx as o } from "react/jsx-runtime";
2
+ import u from "react";
3
+ import { connect as S } from "react-redux";
4
+ import { injectIntl as C } from "react-intl";
5
+ import { CategoriesContext as D } from "./DataContext.js";
6
+ import { setData as v, loadFilterItems as x, getCategories as y } from "../reducers/data.js";
7
+ import { Container as g, Segment as L } from "semantic-ui-react";
8
+ const N = ({ data: t, children: e }) => {
9
+ const r = u.useMemo(() => t ? t.toJS() : null, [t]);
10
+ return /* @__PURE__ */ o(D.Provider, { value: r, children: e });
11
11
  };
12
- class k extends x.Component {
12
+ class F extends u.Component {
13
13
  componentDidMount() {
14
14
  const { categories: e } = this.props;
15
15
  !e && !this.props.loading && this.props.onLoadData(this.props);
16
16
  }
17
- componentDidUpdate(e, o, n) {
18
- const { app: a, parentSelectedItems: p, filters: c, source: m, store: u, params: i, csv: l, group: s, editing: d } = this.props;
19
- e.parentSelectedItems && p && p.length != e.parentSelectedItems.length && this.props.onReLoadItems(this.props), (c != e.filters || JSON.stringify(i) != JSON.stringify(e.params) || a != e.app || e.source != m || l != e.csv) && (a === "csv" ? this.props.onSetData({ app: a, csv: l, store: u, params: i, group: s }) : (d && (i.v = (Math.random() + 1).toString(36).substring(7)), this.setState({ showLoading: !1 }), this.props.onLoadData(this.props), setTimeout(this.checkLoadingTime, 100)));
17
+ componentDidUpdate(e, r, a) {
18
+ const { app: n, filters: c, parentSelectedItems: p, params: l, source: m, csv: i, store: d, group: s } = this.props;
19
+ e.parentSelectedItems && p && p.length != e.parentSelectedItems.length && this.props.onReLoadItems(this.props), (n === "csv" && c != e.filters || JSON.stringify(l) != JSON.stringify(e.params) || n != e.app || e.source != m || i != e.csv) && (n === "csv" ? this.props.onSetData({ app: n, csv: i, store: d, params: l, group: s }) : this.props.onLoadData(this.props));
20
20
  }
21
21
  render() {
22
- const { data: e, loading: o, error: n } = this.props;
23
- return o ? /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r("div", { className: "filter-skeleton-placeholder", children: /* @__PURE__ */ r("div", { className: "filter-skeleton-shimmer" }) }) }) : e ? /* @__PURE__ */ r(j, { data: e, children: this.props.children }) : n ? /* @__PURE__ */ C(v, { color: "red", children: [
24
- /* @__PURE__ */ r("h1", { children: "500" }),
25
- /* @__PURE__ */ r("p", { children: "Wasn't able to load data" })
26
- ] }) : /* @__PURE__ */ r(D, { children: /* @__PURE__ */ C(v, { color: "red", children: [
27
- /* @__PURE__ */ r("h1", { children: "404" }),
28
- /* @__PURE__ */ r("p", { children: "Can't find this page" })
29
- ] }) });
22
+ const { data: e, loading: r, error: a } = this.props;
23
+ return r ? /* @__PURE__ */ o(g, { children: /* @__PURE__ */ o("div", { className: "filter-skeleton-placeholder", children: /* @__PURE__ */ o("div", { className: "filter-skeleton-shimmer" }) }) }) : e ? /* @__PURE__ */ o(N, { data: e, children: this.props.children }) : a ? /* @__PURE__ */ o(L, { color: "red", children: /* @__PURE__ */ o("p", { children: "Wasn't able to load data" }) }) : /* @__PURE__ */ o(g, {});
30
24
  }
31
25
  }
32
- const R = (t, e) => {
33
- const { app: o, group: n, type: a, parentType: p, param: c, parentParam: m, params: u, dvzProxyDatasetId: i, uniqueStorage: l } = e, s = ["data", "categories", o];
34
- i && s.push(i), l && s.push(l);
35
- const d = t.getIn([...s, "items"]), h = d ? d.toJS() : [], y = t.getIn(["data", "filters", o, n, c]), g = h.filter((f) => f.type == a);
36
- g && g.length > 0 && g[0].items;
37
- let I = [], S = [];
38
- return p && (I = h.filter((f) => f.type == p), S = t.getIn(["data", "filters", o, n, m])), {
39
- parentSelectedItems: S,
40
- selectedItems: y,
41
- items: h,
42
- parentItems: I,
26
+ const J = (t, e) => {
27
+ const { app: r, group: a, type: n, parentType: c, param: p, parentParam: l, params: m, dvzProxyDatasetId: i, uniqueStorage: d } = e, s = ["data", "categories", r];
28
+ i && s.push(i), d && s.push(d);
29
+ const f = t.getIn(["data", "filters", r, a, p]), I = t.getIn(["data", "filters", r, a]);
30
+ let h;
31
+ return c && (h = t.getIn(["data", "filters", r, a, l])), {
32
+ parentSelectedItems: h,
33
+ selectedItems: f,
34
+ filters: I,
43
35
  data: t.getIn([...s, "items"]),
44
36
  error: t.getIn([...s, "error"]),
45
37
  loading: t.getIn([...s, "loading"])
46
38
  };
47
- }, b = {
48
- onLoadData: T,
49
- onReLoadItems: N
50
- }, U = L(R, b)(J(k));
39
+ }, M = {
40
+ onLoadData: y,
41
+ onReLoadItems: x,
42
+ onSetData: v
43
+ }, q = S(J, M)(C(F));
51
44
  export {
52
- U as default
45
+ q as default
53
46
  };
@@ -1,10 +1,14 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import r from "react";
3
- import { DataContext as m } from "./DataContext.js";
4
- const c = (n) => /* @__PURE__ */ t(m.Consumer, { children: (e) => e && /* @__PURE__ */ t(r.Fragment, { children: r.Children.map(n.children, (o) => r.cloneElement(
5
- o,
6
- { data: e }
7
- )) }) });
1
+ import { jsx as a } from "react/jsx-runtime";
2
+ import t from "react";
3
+ import { DataContext as o } from "./DataContext.js";
4
+ const l = () => t.useContext(o), m = ({ children: n }) => {
5
+ const e = t.useContext(o);
6
+ return e ? /* @__PURE__ */ a(t.Fragment, { children: t.Children.map(
7
+ n,
8
+ (r) => t.cloneElement(r, { data: e })
9
+ ) }) : null;
10
+ }, C = t.memo(m);
8
11
  export {
9
- c as default
12
+ C as default,
13
+ l as useDataContext
10
14
  };