UNPKG

@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.

92 lines (91 loc) 5.64 kB
import { jsx as s, jsxs as u } from "react/jsx-runtime"; import k from "react"; import { connect as w } from "react-redux"; import { injectIntl as C } from "react-intl"; import { DataContext as I } from "./DataContext.js"; import { getData as F, setData as v } from "../reducers/data.js"; import { Container as p, Segment as m, Dimmer as x, Loader as A } from "semantic-ui-react"; class O extends k.Component { constructor() { super(), this.state = { showLoading: !1 }, this.checkLoadingTime = this.checkLoadingTime.bind(this); } componentDidMount() { const { app: e, source: i, store: a, params: t, csv: n, group: d, editing: o, waitForFilters: r = !1 } = this.props; e === "csv" ? this.props.onSetData({ app: e, csv: n, store: a, params: t, group: d }) : (this.setState({ showLoading: !1 }), !r || o ? (console.log("loading -----"), this.props.onLoadData({ app: e, source: i, store: a, params: t, group: d }), setTimeout(this.checkLoadingTime, 100)) : console.log("waiting for filters to be set before loading data", e, i, a, t, d)), !o && r && (this.fallbackTimeout = setTimeout(() => { this.dataLoaded || (console.warn("Fallback loading triggered"), this.setState({ showLoading: !1 }), this.props.onLoadData({ app: e, source: i, store: a, params: t, group: d }), setTimeout(this.checkLoadingTime, 100)); }, 1e3)); } componentWillUnmount() { clearTimeout(this.fallbackTimeout), clearTimeout(this.debounceTimeout); } componentDidUpdate(e, i, a) { const { app: t, filters: n, apply: d, source: o, store: r, params: c, csv: g, group: h, autoApply: L, editing: T, lastInitialFilterChange: b, lastUserFilterChange: S } = this.props, y = b !== e.lastInitialFilterChange, D = S !== e.lastUserFilterChange; let f = !1; d != null && d != e.apply && (f = !0), L !== !1 ? (n != e.filters || JSON.stringify(c) != JSON.stringify(e.params) || t != e.app || JSON.stringify(e.source) != JSON.stringify(o) || g != e.csv) && (t === "csv" ? this.props.onSetData({ app: t, csv: g, store: r, params: c, group: h }) : (this.setState({ showLoading: !0 }), T && this.props.onLoadData({ app: t, source: o, store: r, params: c, group: h }), y && this.props.waitForFilters ? (console.log("initial filters has been updated", n, c), clearTimeout(this.debounceTimeout), clearTimeout(this.fallbackTimeout), this.debounceTimeout = setTimeout(() => { this.dataLoaded = !0, this.setState({ showLoading: !1 }), console.log("Loading data " + t + " " + o), this.props.onLoadData({ app: t, source: o, store: r, params: c, group: h }), setTimeout(this.checkLoadingTime, 100); }, 100)) : D ? (console.log("filters has been updated", n, e.filters, c, e.params, t, o, r, h), this.setState({ showLoading: !1 }), console.log("filters has been updated", n), this.props.onLoadData({ app: t, source: o, store: r, params: c, group: h }), setTimeout(this.checkLoadingTime, 100)) : console.log("no changes detected ............"))) : f && (console.log("reloading -----"), this.props.onLoadData({ app: t, source: o, store: r, params: c, group: h }), this.setState({ showLoading: !1 }), setTimeout(this.checkLoadingTime, 100)); } checkLoadingTime() { const { data: e, loading: i, time: a, error: t } = this.props, n = Date.now() - a; i && a && n > 1e3 ? this.setState({ showLoading: !0 }) : i && setTimeout(this.checkLoadingTime, 100); } render() { const { data: e, style: i, loading: a, time: t, error: n, editing: d, isSvg: o } = this.props; if (a && this.state.showLoading && !d) { const r = { width: "100%", height: "100%", background: "transparent", verticalAlign: "middle", overflow: "hidden" }, c = Object.assign({}, i, { height: "90%", background: "transparent", textAlign: "center", margin: "30px" }), g = /* @__PURE__ */ s(m, { basic: !0, padded: !0, style: c, children: /* @__PURE__ */ s(x, { active: !0, inverted: !0, style: { background: "transparent" }, children: /* @__PURE__ */ s(A, { size: "medium", style: { background: "transparent" } }) }) }); return o ? /* @__PURE__ */ s("foreignObject", { style: r, children: /* @__PURE__ */ s(p, { style: i, className: "loading", children: g }) }) : /* @__PURE__ */ s(p, { style: i, className: "loading", children: g }); } else return n ? n ? /* @__PURE__ */ u(m, { color: "red", children: [ /* @__PURE__ */ s("h1", { children: "500" }), /* @__PURE__ */ s("p", { children: "Wasn't able to load data" }) ] }) : /* @__PURE__ */ s(p, { children: /* @__PURE__ */ u(m, { color: "red", children: [ /* @__PURE__ */ s("h1", { children: "404" }), /* @__PURE__ */ s("p", { children: "Can't find this page" }) ] }) }) : /* @__PURE__ */ s(I.Provider, { value: e, children: this.props.children }); } } const j = (l, e) => { const { store: i, group: a, app: t } = e; return { lastUserFilterChange: l.getIn(["data", "filters-settings", t, a, "lastUserFilterChange"]), lastInitialFilterChange: l.getIn(["data", "filters-settings", t, a, "lastInitialFilterChange"]), data: l.getIn(["data", ...i, "data"]), filters: l.getIn(["data", "filters", t, a]), autoApply: l.getIn(["data", "filters-settings", t, a, "autoApply"]), apply: l.getIn(["data", "filters-settings", t, a, "apply"]), error: l.getIn(["data", ...i, "error"]), loading: l.getIn(["data", ...i, "loading"]), time: l.getIn(["data", ...i, "time"]) }; }, N = { onSetData: v, onLoadData: F }, q = w(j, N)(C(O)); export { q as default };