@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
JavaScript
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
};