@devgateway/dvz-ui-react 1.0.0

package/dist/esm/embeddable/sankeychart/index.js

@@ -0,0 +1,238 @@
+import { jsx as c, jsxs as F } from "react/jsx-runtime";
+import z, { useRef as Pe, useState as Ee } from "react";
+import { Container as R } from "semantic-ui-react";
+import Ie from "../data/DataProvider.js";
+import Oe from "../data/DataConsumer.js";
+import { PostContent as we } from "@devgateway/wp-react-lib";
+import Fe from "../common/colors/ColorProvider.js";
+import K from "../common/Messages.js";
+import { connect as Re } from "react-redux";
+import je from "./Sankey.js";
+import He from "papaparse";
+const Se = (h) => {
+  const {
+    parent: B,
+    editing: u = !1,
+    unique: C,
+    childContent: o,
+    categories: x,
+    injectedMeasures: r,
+    "data-csv": i = "",
+    "data-no-data-message": d = "No data matches your selection",
+    "data-view-mode": t = "info",
+    "data-height": n,
+    "data-source": m,
+    "data-dimension1": e,
+    "data-dimension2": s,
+    "data-dimension3": a,
+    "data-scheme": v = "nivo",
+    "data-margin-left": f,
+    "data-margin-top": k,
+    "data-margin-right": Q,
+    "data-margin-bottom": X,
+    "data-show-legends": j,
+    "data-legend-position": Y,
+    "data-app": p,
+    "data-measures": L = {},
+    "data-format": Z = "{}",
+    "data-tooltip-html": E,
+    "data-layout": _,
+    "data-group": H,
+    "data-filters": ee = [],
+    "data-no-data-message": $e,
+    "data-legend-label": ae,
+    "data-tooltip-enabled": S,
+    "data-use-label-background": T,
+    "data-use-check-box-background": N,
+    "data-legend-label-color": te,
+    "data-tooltip-enable-markdown": D,
+    "data-reverse-legend": U,
+    "data-sort": $,
+    "data-node-thickness": oe,
+    "data-node-opacity": ne,
+    "data-node-hover-opacity": re,
+    "data-node-inner-padding": ie,
+    "data-node-spacing": de,
+    "data-node-hover-others-opacity": se,
+    "data-node-border-width": le,
+    "data-node-border-radius": ce,
+    "data-link-opacity": ue,
+    "data-link-hover-opacity": me,
+    "data-link-hover-others-opacity": pe,
+    "data-link-contract": ge,
+    "data-enable-link-gradient": G,
+    "data-enable-labels": V,
+    "data-label-position": he,
+    "data-label-padding": fe,
+    "data-use-custom-label-color": q,
+    "data-label-text-color": be,
+    "data-label-orientation": ye,
+    "data-manual-colors": ve = "{}"
+  } = h, A = h.intl.locale, ke = Pe(null), I = (l) => u ? l : decodeURIComponent(l), b = (l) => {
+    try {
+      return JSON.parse(I(l));
+    } catch {
+      console.error("error parsing value:" + l);
+    }
+    return null;
+  }, Ce = () => b(ve)[p], y = b(Z), xe = y ? {
+    style: y.style === "compacted" ? "decimal" : y.style,
+    notation: y.style === "compacted" ? "compact" : "standard",
+    currency: y.currency,
+    minimumFractionDigits: parseInt(y.minimumFractionDigits),
+    maximumFractionDigits: parseInt(y.maximumFractionDigits)
+  } : {
+    notation: "standard",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }, [Le, Ge] = Ee(t), Be = u ? t : Le, De = {
+    scheme: v
+  }, M = u ? n - 80 : n - 40, Me = {}, J = {
+    app: p,
+    layout: _,
+    showLegends: j == !0 || j == "true",
+    legendLabel: ae,
+    marginLeft: parseInt(f),
+    marginTop: parseInt(k),
+    marginRight: parseInt(Q),
+    marginBottom: parseInt(X),
+    height: `${M}px`,
+    legendPosition: Y,
+    legends: Me,
+    tooltip: E ? D === !0 || D === "true" ? I(E) : I(E).replace(/\r\n/g, "<hr/>").replace(/[\r\n]/g, "<hr/>") : "",
+    colors: De,
+    format: xe,
+    categories: x,
+    legendLabelColor: decodeURIComponent(te),
+    tooltipEnabled: S == !0 || S == "true",
+    tooltipEnableMarkdown: D == !0 || D == "true",
+    reverseLegend: U == !0 || U == "true",
+    sort: $,
+    nodeThickness: oe,
+    nodeOpacity: ne,
+    nodeHoverOpacity: re,
+    nodeInnerPadding: ie,
+    nodeSpacing: de,
+    nodeHoverOthersOpacity: se,
+    nodeBorderWidth: le,
+    nodeBorderRadius: parseInt(ce),
+    linkOpacity: ue,
+    linkHoverOpacity: me,
+    linkContract: ge,
+    enableLinkGradient: G == !0 || G == "true",
+    linkHoverOthersOpacity: pe,
+    enableLabels: V == !0 || V == "true",
+    labelPosition: he,
+    labelPadding: fe,
+    useCustomLabelColor: q == !0 || q == "true",
+    labelTextColor: be,
+    labelOrientation: ye,
+    useLabelBackground: T == !0 || T == "true",
+    useCheckBoxBackground: N == !0 || N == "true"
+  }, W = {}, O = b(ee) || {};
+  O && O.forEach && O.forEach((l) => {
+    l.value != null && l.value.filter((w) => w != null && w.toString().trim() != "").length > 0 && (W[l.param] = l.value);
+  });
+  let P = !1;
+  const g = [];
+  return e != "none" && g.push(e), s != "none" && g.push(s), a != "none" && g.push(a), p != "csv" ? (!g.length || !L || !b(L) || !b(L)[0]) && (P = !0) : i.length == 0 && (P = !0), /* @__PURE__ */ c("div", { ref: ke, children: /* @__PURE__ */ F(R, { className: "chart container", style: { minHeight: n + "px" }, fluid: !0, children: [
+    /* @__PURE__ */ c(
+      Ie,
+      {
+        style: { height: `${M}px` },
+        params: W,
+        app: p,
+        group: H,
+        csv: i,
+        editing: u,
+        store: [p, C, ...g],
+        source: g.join("/"),
+        children: /* @__PURE__ */ F(R, { style: { height: `${M}px` }, className: "body", fluid: !0, children: [
+          P && /* @__PURE__ */ c(K, { editing: u }),
+          !P && /* @__PURE__ */ F(Oe, { children: [
+            /* @__PURE__ */ c(K, { app: p, group: H, noDataMsg: d, children: " " }),
+            /* @__PURE__ */ c(
+              Te,
+              {
+                locale: A,
+                colorBy: "id",
+                dimensions: [...g],
+                sort: $,
+                csv: i,
+                app: p,
+                measure: b(L)[0] || null,
+                children: /* @__PURE__ */ c(
+                  Fe,
+                  {
+                    app: p,
+                    locale: A,
+                    manualColors: Ce(),
+                    colorBy: "id",
+                    scheme: v,
+                    barColor: J.barColor,
+                    children: /* @__PURE__ */ c(je, { ...J, dimensions: g, measure: b(L)[0] || null })
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ c("br", {}),
+    o && Be == "info" && /* @__PURE__ */ c(R, { fluid: !0, style: { height: M + "px" }, className: "body", children: /* @__PURE__ */ c(we, { post: { content: { rendered: o } } }) })
+  ] }) });
+}, Te = (h) => {
+  const { children: B, csv: u, app: C } = h;
+  let o = { nodes: [], links: [] }, x = {
+    indexBy: "",
+    keys: o.nodes.map((r) => r.id),
+    data: o
+  };
+  if (C != "csv") {
+    const r = (d) => {
+      const { data: t, dimensions: n, measure: m } = d, e = [], s = [], a = {};
+      return a[t.type] = t.value, i(t.children, e, s, null, m, a), { nodes: e, links: s };
+    }, i = (d = [], t, n, m, e, s) => {
+      d.forEach((a) => {
+        const v = {};
+        if (v[a.type] = a.value, t.find((f) => f.id === a.value) || t.push({ id: a.value }), m) {
+          const f = n.find((k) => k.source === m && k.target === a.value);
+          if (f)
+            f.value = f.value + a[e];
+          else {
+            const k = { ...a, ...v, ...s };
+            n.push({ source: m, target: a.value, value: a[e], data: k });
+          }
+        }
+        a.children && a.children.length > 0 && i(a.children, t, n, a.value, e, v);
+      });
+    };
+    o = r(h), x = {
+      indexBy: "",
+      keys: o.nodes.map((d) => d.id),
+      data: o
+    };
+  } else {
+    const r = He.parse(u, { header: !0, dynamicTyping: !0 }), i = r.meta.fields, d = i.shift(), t = r.data.map((e) => e[d]), n = [...i.map((e) => ({ id: e })), ...t.map((e) => ({ id: e }))], m = [];
+    r.data.forEach((e) => {
+      i.forEach((s) => {
+        m.push({ source: s, target: e[d], value: e[s] });
+      });
+    }), x = {
+      indexBy: "",
+      keys: n.map((e) => e.id),
+      data: { nodes: n, links: m }
+    };
+  }
+  return z.Children.map(B, (r) => z.cloneElement(r, { options: x }));
+}, Ne = (h, B) => {
+  const { "data-app": u, "data-group": C } = B, o = h.getIn(["data", "measures", u, C]);
+  return o ? {
+    injectedMeasures: o
+  } : {};
+}, Ue = {}, _e = Re(Ne, Ue)(Se);
+export {
+  _e as default
+};

package/dist/esm/embeddable/showcase/index.js

@@ -0,0 +1,247 @@
+import { jsx as e, jsxs as h, Fragment as q } from "react/jsx-runtime";
+import A, { useState as x, useRef as D, useEffect as V, useImperativeHandle as j, useCallback as I } from "react";
+import { Container as N, Grid as i, Form as P, TextArea as L, Button as k, Message as O, Input as M, Label as U, Icon as B } from "semantic-ui-react";
+import { COUNTRY_OPTIONS as $ } from "../../utils/countries.js";
+import { reset as G, sendShowCaseForm as H } from "../reducers/embeddable.js";
+import { connect as K } from "react-redux";
+import { useDropzone as Y } from "react-dropzone";
+import _ from "../../conf/config.json.js";
+const J = $.map((o) => ({
+  flag: o.flag.toLocaleLowerCase(),
+  value: o.text,
+  text: o.text
+}));
+A.createRef();
+function Q({ onSelectionChange: o, showValidation: f, inputRef: g, name: a }) {
+  const [r, c] = x([]), [n, s] = x([]), l = I((m) => {
+    c([...r, ...m]), s([]);
+  }, [r]), u = I((m) => {
+    s([...m]);
+  }, [r]), {
+    acceptedFiles: v,
+    getRootProps: w,
+    getInputProps: b,
+    open: E
+  } = Y({ accept: "application/pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif", maxFiles: 5, multiple: !0, onDrop: l, onDropRejected: u });
+  j(g, () => ({
+    name: a,
+    reset: () => {
+      c([]);
+    },
+    hasErrors: () => r.length == 0,
+    value: () => r
+  }));
+  const y = (m) => {
+    const d = [...r];
+    d.splice(m, 1), c(d);
+  }, z = r.length === 0;
+  return /* @__PURE__ */ h(q, { children: [
+    n && n[0] && n[0].errors && /* @__PURE__ */ e(N, { fluid: !0, className: `upload files ${z ? "error" : ""}`, children: /* @__PURE__ */ e("div", { className: "error-messages", children: /* @__PURE__ */ e("ul", { style: {}, children: n[0].errors.map((m, d) => /* @__PURE__ */ e("li", { children: "File type not allowed. File type must be - application/-pdf,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.rtf,.html,.zip,.mp3,.wma,.mpg,.flv,.avi,.jpg,.jpeg,.png,.gif " }, d)) }) }) }),
+    /* @__PURE__ */ h(N, { fluid: !0, className: "upload files", children: [
+      /* @__PURE__ */ h("div", { ...w({ className: "dropzone" }), children: [
+        /* @__PURE__ */ e("input", { ...b() }),
+        /* @__PURE__ */ h("p", { children: [
+          "Drag 'n' drop files here, or click select button to select files. The maximum file size allowed is ",
+          _.maxUploadFileSize,
+          "MB."
+        ] }),
+        r.length > 0 ? /* @__PURE__ */ e("ul", { children: r.map((m, d) => /* @__PURE__ */ h("li", { children: [
+          /* @__PURE__ */ e(U, { color: "green", icon: "file", children: m.name }),
+          /* @__PURE__ */ e(B, { color: "red", name: "remove", size: "large", onClick: (C) => {
+            C.stopPropagation(), y(d);
+          } })
+        ] }, d)) }) : null
+      ] }),
+      /* @__PURE__ */ e(k, { secondary: !0, onClick: E, children: "Select" })
+    ] })
+  ] });
+}
+const W = ({ options: o, placeholder: f, name: g, required: a, showValidation: r, icon: c, inputRef: n }) => {
+  const [s, l] = x(null), [u, v] = x(!0);
+  return V(() => {
+    a && s == null ? v(!0) : v(!1);
+  }, [s]), j(n, () => ({
+    name: g,
+    reset: () => {
+      l(null);
+    },
+    value: () => s,
+    hasErrors: () => (console.log(u), u)
+  })), /* @__PURE__ */ e(
+    P.Dropdown,
+    {
+      value: s,
+      error: u && r,
+      name: g,
+      onChange: (w, b) => {
+        l(b.value);
+      },
+      multiple: !1,
+      search: !0,
+      selection: !0,
+      options: o,
+      placeholder: f
+    }
+  );
+}, S = ({ placeholder: o, name: f, icon: g, required: a, pattern: r, as: c, inputRef: n, showValidation: s }) => {
+  const [l, u] = x(""), [v, w] = x(!0);
+  return V(() => {
+    a && l.trim() == "" || r && !r.test(l) ? w(!0) : w(!1);
+  }, [l]), j(n, () => ({
+    name: f,
+    reset: () => {
+      u("");
+    },
+    hasErrors: () => v,
+    value: () => l
+  })), /* @__PURE__ */ e(
+    c || M,
+    {
+      value: l,
+      error: v && s,
+      onChange: (E) => u(E.target.value),
+      name: f,
+      icon: g,
+      iconPosition: "left",
+      placeholder: o
+    }
+  );
+}, X = (o) => {
+  const [f, g] = x({});
+  D();
+  const a = D({}), r = (t) => {
+    const R = Object.keys(a.current).map((p) => a.current[p]), T = R.map((p) => p.hasErrors()).reduce((p, F) => p || F);
+    if (f.files, T)
+      g((p) => ({ ...p, showValidation: !0 }));
+    else {
+      const p = {};
+      R.forEach((F) => p[F.name] = F.value()), o.onSubmit(p), setTimeout(() => {
+        c();
+      }, 5e3);
+    }
+  }, c = () => {
+    Object.keys(a.current).map((R) => a.current[R]).forEach((R) => {
+      R.reset();
+    }), g({ showValidation: !1, status: null }), o.onReset();
+  }, n = (t) => {
+    t && (a.current[t.name] = t);
+  }, {
+    status: s,
+    organization: l = "Organization",
+    name: u = "Name",
+    email: v = "Email",
+    country: w = "Country",
+    message: b = "Message",
+    resetlabel: E = "Reset",
+    submitlabel: y = "Submit",
+    successmessage: z = "Thanks for submitting your data",
+    failuremessage: m = "Something didn't go well, please try again later",
+    editing: d
+  } = o, { showValidation: C, token: te, reset: re } = f;
+  return /* @__PURE__ */ e(N, { fluid: !0, className: "viz showcase", children: /* @__PURE__ */ h(i, { columns: 1, className: C ? "validated" : "", children: [
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
+      S,
+      {
+        inputRef: (t) => n(t),
+        showValidation: C,
+        required: !0,
+        icon: "building",
+        name: "organization",
+        placeholder: l
+      }
+    ) }),
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
+      S,
+      {
+        inputRef: (t) => n(t),
+        showValidation: C,
+        required: !0,
+        icon: "user",
+        name: "name",
+        placeholder: u
+      }
+    ) }),
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
+      S,
+      {
+        inputRef: (t) => n(t),
+        showValidation: C,
+        required: !0,
+        pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/,
+        icon: "envelope",
+        placeholder: v,
+        name: "email"
+      }
+    ) }),
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(P.Field, { children: /* @__PURE__ */ e(
+      W,
+      {
+        inputRef: (t) => n(t),
+        showValidation: C,
+        name: "country",
+        required: !0,
+        options: J,
+        placeholder: w
+      }
+    ) }) }),
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
+      Q,
+      {
+        inputRef: (t) => n(t),
+        showValidation: C,
+        name: "files"
+      }
+    ) }),
+    /* @__PURE__ */ e(i.Column, { children: /* @__PURE__ */ e(
+      S,
+      {
+        inputRef: (t) => n(t),
+        placeholder: b,
+        name: "message",
+        as: L
+      }
+    ) }),
+    /* @__PURE__ */ h(i.Row, { children: [
+      /* @__PURE__ */ h(i.Column, { textAlign: "left", width: 12, verticalAlign: "bottom", className: "form-buttons", children: [
+        /* @__PURE__ */ e(
+          k,
+          {
+            className: "btn-reset",
+            onClick: (t) => c(),
+            children: E
+          }
+        ),
+        /* @__PURE__ */ e(
+          k,
+          {
+            secondary: !0,
+            onClick: (t) => r(),
+            children: y
+          }
+        )
+      ] }),
+      (s == "OK" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
+        " ",
+        /* @__PURE__ */ e(
+          O,
+          {
+            success: !0,
+            content: /* @__PURE__ */ e("p", { children: z })
+          }
+        )
+      ] }),
+      (s == "ERROR" || d) && /* @__PURE__ */ h(i.Column, { width: 16, children: [
+        " ",
+        /* @__PURE__ */ e(O, { negative: !0, children: /* @__PURE__ */ e("p", { children: m }) })
+      ] })
+    ] })
+  ] }) });
+}, Z = (o, f) => ({
+  status: o.getIn(["embeddable", "showCase", "status"])
+}), ee = {
+  onSubmit: H,
+  onReset: G
+}, me = K(Z, ee)(X);
+export {
+  me as default
+};

package/dist/esm/embeddable/superset-chart/index.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { connect as m } from "react-redux";
+import { SettingProvider as u, SettingsConsumer as g } from "@devgateway/wp-react-lib";
+const f = (t) => /* @__PURE__ */ e(u, { locale: t.intl.locale, changeUUID: t.unique, children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(C, { ...t }) }) }), C = (t) => {
+  const {
+    editing: a = !1,
+    unique: s,
+    intl: U,
+    "data-csv": v = "",
+    "data-selected-chart-data": n = "{}",
+    "data-height": o,
+    "data-width": c = 100,
+    "data-margin": i = 0,
+    settings: r
+  } = t, d = r ? r.apache_superset_url : "", h = decodeURIComponent(d), l = decodeURIComponent(n), p = `${h}/superset/explore/?form_data=${l}&standalone=1`;
+  return /* @__PURE__ */ e("div", { id: `superset-chart-${s}`, children: /* @__PURE__ */ e(
+    "iframe",
+    {
+      src: p,
+      seamless: "seamless",
+      title: "superset-chart",
+      style: { border: "none", width: c + "%", height: o + "px", margin: i + "px" }
+    }
+  ) });
+}, S = (t, a) => ({}), x = {}, $ = m(S, x)(f);
+export {
+  $ as default
+};

package/dist/esm/embeddable/superset-dashboard/index.js

@@ -0,0 +1,29 @@
+import { jsx as s } from "react/jsx-runtime";
+import "react";
+import { connect as h } from "react-redux";
+import "@devgateway/wp-react-lib";
+const m = (e) => {
+  const {
+    editing: a = !1,
+    unique: r,
+    intl: g,
+    "data-csv": b = "",
+    "data-selected-dashboard-id": o = "",
+    "data-height": d,
+    "data-width": n = 100,
+    "data-margin": i = 0,
+    settings: t
+  } = e, c = t ? t.apache_superset_url : "", p = `${decodeURIComponent(c)}/superset/dashboard/${o}/?standalone=3`;
+  return /* @__PURE__ */ s("div", { id: `superset-dashboard-${r}`, children: /* @__PURE__ */ s(
+    "iframe",
+    {
+      src: p,
+      seamless: "seamless",
+      title: "superset-dashboard",
+      style: { border: "none", width: n + "%", height: d + "px", margin: i + "px" }
+    }
+  ) });
+}, l = (e, a) => ({}), u = {}, $ = h(l, u)(m);
+export {
+  $ as default
+};