@sisense/sdk-ui 1.22.0 → 1.24.0

package/dist/widget-composer-L8kmRhgX.js

@@ -0,0 +1,624 @@
+var k = Object.defineProperty;
+var E = Object.getOwnPropertySymbols;
+var z = Object.prototype.hasOwnProperty, U = Object.prototype.propertyIsEnumerable;
+var w = (e, t, r) => t in e ? k(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
+  for (var r in t || (t = {}))
+    z.call(t, r) && w(e, r, t[r]);
+  if (E)
+    for (var r of E(t))
+      U.call(t, r) && w(e, r, t[r]);
+  return e;
+};
+import { dt as K, du as j, M as O, T as u, dv as Y, dw as I, av as J, aD as V, dx as H, dy as X, m as C, dz as Z, dA as G, ao as ee, bN as D } from "./widget-model-translator-CYeCKnTa.js";
+class M extends K {
+  constructor(t, r) {
+    var a;
+    super((a = t.jaql.title) !== null && a !== void 0 ? a : "", r), this.expression = t.jaql.dim || t.jaql.formula, this.metadataItem = t, t.jaql.agg ? this.aggregation = t.jaql.agg : delete this.aggregation, t.jaql.formula ? this.formula = t.jaql.formula : delete this.formula, t.jaql.sort ? this.sortType = j(t.jaql.sort) : delete this.sortType, this.skipValidation = !0;
+  }
+  get id() {
+    return this.expression;
+  }
+  jaql() {
+    return this.metadataItem;
+  }
+}
+const te = {
+  text: O.TextAttribute,
+  numeric: O.NumericAttribute,
+  datetime: O.DateLevel
+};
+function Q(e) {
+  var t;
+  return new M(e, (t = te[e.jaql.datatype]) !== null && t !== void 0 ? t : "numeric");
+}
+const Ie = {
+  jaql: { datasource: { title: "" }, metadata: [] },
+  queryTitle: "",
+  chartRecommendations: {}
+}, Me = {
+  model: "",
+  metadata: [],
+  chart: {},
+  queryTitle: ""
+}, Qe = (e) => "widgetProps" in e, re = (e) => "dashboardOid" in e && "widgetOid" in e;
+function ae(e) {
+  return e.replace(/\s+/g, "-").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function Le(e) {
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}
+function Ae(e) {
+  const t = /\[(.+?)\s\(Calendar\)\]/;
+  return e.replace(t, "[$1]").trim();
+}
+function Fe(e) {
+  if (e)
+    if (e.metadata) {
+      if (!e.model)
+        throw new u("errors.missingModelTitle");
+    } else
+      throw new u("errors.missingMetadata");
+  else
+    throw new u("errors.emptyModel");
+  return e;
+}
+function ie(e) {
+  return !e || !e.jaql.datasource.title || !e.jaql.metadata.length;
+}
+function y(e) {
+  return e && e.replace(new RegExp("(?<!\\\\)'", "g"), "\\'");
+}
+function L(e) {
+  if (!Y.includes(e))
+    throw new u("errors.chartTypeNotSupported", { chartType: e });
+}
+const se = {
+  react: {
+    baseChartTmpl: `import { {{componentString}} } from '@sisense/sdk-ui';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+export default function CodeExample() {
+  return (
+    <{{componentString}}
+      title={'{{titleString}}'}
+      dataSource={DM.DataSource}
+      chartType={'{{chartTypeString}}'}
+      dataOptions={ {{dataOptionsString}} }
+      filters={ {{filtersString}} }
+    />
+  );
+}`,
+    chartTmpl: "{{baseChartTmpl}}",
+    chartWidgetTmpl: "{{baseChartTmpl}}",
+    widgetByIdTmpl: `import { WidgetById } from '@sisense/sdk-ui';
+
+const CodeExample = () => {
+    return (
+      <>
+        <WidgetById
+          widgetOid="{{widgetOid}}"
+          dashboardOid="{{dashboardOid}}"
+          includeDashboardFilters={true}
+        />
+      </>
+    );
+};
+
+export default CodeExample;
+`,
+    executeQueryByWidgetIdTmpl: `import { useExecuteQueryByWidgetId } from '@sisense/sdk-ui';
+
+const CodeExample = () => {
+  const { data, isLoading, isError } = useExecuteQueryByWidgetId({
+    widgetOid: "{{widgetOid}}",
+    dashboardOid: "{{dashboardOid}}"
+  });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  if (isError) {
+    return <div>Error</div>;
+  }
+  if (data) {
+    return <div>Total Rows: {data.rows.length}</div>;
+  }
+
+  return null;
+};
+
+export default CodeExample;
+`,
+    executeQueryWidgetTmpl: `import { useExecuteQuery } from '@sisense/sdk-ui';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+const CodeExample = () => {
+  const queryProps = {
+    dataSource: DM.DataSource,
+    dimensions: {{dimensionsString}},
+    measures: {{measuresString}},
+    filters: {{filtersString}},
+    highlights: {{highlightsString}},
+  }
+
+  const { data, isLoading, isError } = useExecuteQuery(queryProps);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  if (isError) {
+    return <div>Error</div>;
+  }
+  if (data) {
+    return <div>Total Rows: {data.rows.length}</div>;
+  }
+
+  return null;
+};
+
+export default CodeExample;
+`
+  },
+  angular: {
+    baseChartTmpl: `import { Component } from '@angular/core';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+@Component({
+    selector: 'code-example',
+    template: \`
+      <csdk-chart-widget
+        chartType='{{chartTypeString}}'
+        [dataSource]='DM.DataSource'
+        [dataOptions]='dataOptions'
+        [filters]='filters'
+      />
+    \`
+})
+export class CodeExample {
+    DM = DM;
+    dataOptions = {{dataOptionsString}};
+    filters = {{filtersString}};
+}`,
+    chartTmpl: "{{baseChartTmpl}}",
+    chartWidgetTmpl: "{{baseChartTmpl}}",
+    widgetByIdTmpl: `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'code-example',
+  template: \`
+    <csdk-widget-by-id
+      [widgetOid]="widgetOid"
+      [dashboardOid]="dashboardOid"
+      [includeDashboardFilters]="includeDashboardFilters"
+    />
+  \`,
+})
+
+export class CodeExample {
+  widgetOid = "{{widgetOid}}";
+  dashboardOid = "{{dashboardOid}}";
+  includeDashboardFilters = true;
+}`,
+    executeQueryByWidgetIdTmpl: `import { Component } from '@angular/core';
+import { QueryService } from '@sisense/sdk-ui-angular';
+import { type QueryResultData } from '@sisense/sdk-data';
+
+@Component({
+  selector: 'code-example',
+  template: '<div>Total Rows: {{ queryResult.rows.length }}</div>',
+})
+
+export class CodeExample {
+    queryResult: QueryResultData = { rows: [], columns: [] };
+
+    constructor(private queryService: QueryService) {}
+
+    async ngOnInit(): Promise<void> {
+      const { data } = await this.queryService.executeQueryByWidgetId({
+        widgetOid: "{{widgetOid}}",
+        dashboardOid: "{{dashboardOid}}",
+      });
+      this.queryResult = data as QueryResultData;
+    }
+}
+`,
+    executeQueryWidgetTmpl: `import { Component } from '@angular/core';
+{{extraImportsString}}
+import { type QueryResultData } from '@sisense/sdk-data';
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+import { QueryService } from '@sisense/sdk-ui-angular';
+
+@Component({
+  selector: 'code-example',
+  template: '<div>Total Rows: {{ queryResult.rows.length }}</div>',
+})
+
+export class CodeExample {
+    queryResult: QueryResultData = { rows: [], columns: [] };
+
+    constructor(private queryService: QueryService) {}
+
+    async ngOnInit(): Promise<void> {
+      const queryProps = {
+        dataSource: DM.DataSource,
+        dimensions: {{dimensionsString}},
+        measures: {{measuresString}},
+        filters: {{filtersString}},
+        highlights: {{highlightsString}},
+      }
+      const { data } = await this.queryService.executeQuery(queryProps);
+      this.queryResult = data as QueryResultData;
+    }
+}
+`
+  },
+  vue: {
+    baseChartTmpl: `<script setup lang="ts">
+  import { ref } from 'vue';
+  import { {{componentString}} } from '@sisense/sdk-ui-vue';
+  {{extraImportsString}}
+  import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+  const dataOptions = ref({{dataOptionsString}});
+  const filters = ref({{filtersString}});
+<\/script>
+
+<template>
+  <{{componentString}}
+    chartType="{{chartTypeString}}"
+    :dataOptions="dataOptions"
+    :filters="filters"
+    :dataSource="DM.DataSource"
+    title="{{titleString}}" />
+</template>`,
+    chartTmpl: "{{baseChartTmpl}}",
+    chartWidgetTmpl: "{{baseChartTmpl}}",
+    widgetByIdTmpl: `<script setup lang="ts">
+import { WidgetById } from '@sisense/sdk-ui-vue';
+<\/script>
+<template>
+  <WidgetById
+    :widgetOid="{{widgetOid}}"
+    :dashboardOid="{{dashboardOid}}"
+  />
+</template>
+`,
+    executeQueryByWidgetIdTmpl: `<script setup lang="ts">
+import { useExecuteQueryByWidgetId } from '@sisense/sdk-ui-vue';
+
+const { data, isLoading, isError } = useExecuteQueryByWidgetId({
+  widgetOid: "{{widgetOid}}",
+  dashboardOid: "{{dashboardOid}}"
+});
+<\/script>
+<template>
+  <div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isError">Error</div>
+    <div v-else-if="data">Total Rows: {{data.rows.length}}</div>
+  </div>
+</template>
+`,
+    executeQueryWidgetTmpl: `<script setup lang="ts">
+import { useExecuteQuery } from '@sisense/sdk-ui-vue';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+const queryProps = {
+  dataSource: DM.DataSource,
+  dimensions: {{dimensionsString}},
+  measures: {{measuresString}},
+  filters: {{filtersString}},
+  highlights: {{highlightsString}},
+}
+const { data, isLoading, isError } = useExecuteQuery(queryProps);
+<\/script>
+<template>
+  <div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isError">Error</div>
+    <div v-else-if="data">Total Rows: {{data.rows.length}}</div>
+  </div>
+</template>`
+  }
+}, A = (e, t) => se[t][e].replace(
+  /{{(.*?)Tmpl}}/g,
+  (a, s) => A(`${s}Tmpl`, t)
+), oe = (e, t) => e.replace(/{{(.*?)}}/g, (r, a) => a in t ? t[a] : (console.warn(`Placeholder ${a} not found in data`), r)), v = (e, t, r = "react") => {
+  const a = A(e, r);
+  return oe(a, t);
+}, f = `
+`, b = "UNKNOWN", ne = (e, t) => {
+  let r = "";
+  return r += `measureFactory.customFormula(
+`, r += " ".repeat(t), r += `  '${y(e.title)}',
+`, r += " ".repeat(t), r += `  '${e.formula}',
+`, r += " ".repeat(t), r += `  {
+`, Object.entries(e.context).forEach(([a, s]) => {
+    const i = I(
+      s.table || b,
+      s.column || b,
+      void 0,
+      "DM"
+    );
+    r += " ".repeat(t), r += `    '${a.slice(1, -1)}': ${i},
+`;
+  }), r += " ".repeat(t), r += `  }
+`, r += " ".repeat(t), r += ")", r;
+}, le = (e, t) => {
+  const { level: r, table: a, column: s, agg: i, sort: o, title: l } = e;
+  let n;
+  return a && s && (n = I(a, s, r, "DM")), i && a && s && l && (n = `measureFactory.${J.aggregationFromJAQL(
+    i
+  )}(${n}, '${y(l)}')`), o && (n = `{column: ${n}, sortType: '${j(o)}'}`), n ? `${" ".repeat(t)}${n}` : b;
+}, de = (e, t) => {
+  const r = e.jaql().jaql;
+  return "formula" in r ? ne(r, t) : f + le(r, t);
+}, h = (e, t = 0, r = !1) => {
+  if (!e)
+    return "";
+  if (typeof e == "string")
+    return `'${y(e)}'`;
+  if (e instanceof M)
+    return de(e, t);
+  let a = "";
+  return Array.isArray(e) ? a += `[${e.map((s) => h(s, t + 2))}${e.length ? f + " ".repeat(t + 2) : ""}]` : (a += `{${f}`, Object.entries(e).forEach(([s, i]) => {
+    r && (s = `'${y(s)}'`), a += " ".repeat(t + 2), Array.isArray(i) ? a += `${s}: [${i.map((o) => h(o, t + 4, r))}${i.length ? f + " ".repeat(t + 2) : ""}]` : typeof i == "object" ? a += `${s}: ${h(i, t + 2, r)}` : ["number", "boolean", "undefined", null].includes(typeof i) ? a += `${s}: ${i}` : a += `${s}: '${y(i)}'`, a += `,${f}`;
+  }), a += " ".repeat(t), a += "}"), a;
+}, $ = `
+`, ue = (e, t) => {
+  if (e.composeCode)
+    return `${$}${" ".repeat(t)}${e.composeCode}`;
+  const r = e.jaql().jaql;
+  return `${$}${" ".repeat(t)}filterFactory.customFilter(${h(
+    r,
+    t,
+    !0
+  )})`;
+}, ce = (e, t = 0) => {
+  if (!e)
+    return "";
+  let r = "";
+  return r += `[${e.map((a) => ue(a, t + 2))}${e.length ? `
+` + " ".repeat(t + 2) : ""}]`, r;
+}, F = (e) => {
+  if (!e)
+    return "";
+  if (Array.isArray(e))
+    return ce(e, 2);
+  throw new u("errors.filterRelationsNotSupported");
+}, pe = ["executeQueryByWidgetIdTmpl", "widgetByIdTmpl"], me = [
+  "executeQueryWidgetTmpl",
+  "chartWidgetTmpl"
+], P = (e) => {
+  if (!e)
+    throw new u("errors.undefinedDataSource");
+  let t;
+  return typeof e == "object" && "title" in e ? t = e.title : t = e, ae(t);
+}, ge = (e) => e, fe = (e) => h(e, 2), B = (e) => {
+  const t = ["measureFactory"], { filters: r } = e;
+  return Array.isArray(r) && r.length > 0 && t.push("filterFactory"), `import { ${t.join(", ")} } from '@sisense/sdk-data';`;
+}, ye = (e, t, r) => {
+  const a = {
+    titleString: e.title,
+    dataSourceString: P(e.dataSource),
+    chartTypeString: ge(e.chartType),
+    dataOptionsString: fe(e.dataOptions),
+    filtersString: F(e.filters),
+    componentString: "ChartWidget",
+    extraImportsString: B(e)
+  };
+  return v(r, a, t);
+}, he = (e, t, r) => {
+  const a = H(e), s = X(a), i = {
+    dataSourceString: P(s.dataSource),
+    dimensionsString: "[]",
+    // TODO
+    measuresString: "[]",
+    // TODO
+    filtersString: F(s.filters),
+    highlightsString: "[]",
+    // TODO
+    extraImportsString: B(e)
+  };
+  return v(r, i, t);
+}, Se = ({
+  dashboardOid: e,
+  widgetOid: t,
+  uiFramework: r = "react",
+  chartType: a = "table",
+  includeChart: s = !0
+}) => {
+  L(a);
+  const i = { dashboardOid: e, widgetOid: t }, o = pe[Number(s)];
+  return v(o, i, r);
+}, Te = ({
+  widgetProps: e,
+  uiFramework: t = "react",
+  includeChart: r = !0
+}) => {
+  if (V(e)) {
+    L(e.chartType);
+    const a = me[Number(r)];
+    return r ? ye(e, t, a) : he(e, t, a);
+  }
+  throw new u("errors.otherWidgetTypesNotSupported");
+}, xe = (e) => ({
+  dataOptions: { columns: e.map(Q) }
+}), Oe = Object.freeze({
+  convolution: {
+    enabled: !0,
+    selectedConvolutionType: "bySlicesCount",
+    independentSlicesCount: 7
+  },
+  lineWidth: { width: "bold" },
+  markers: {
+    enabled: !1
+  },
+  legend: {
+    enabled: !1
+  },
+  yAxis: {
+    gridLines: !1
+  },
+  xAxis: {
+    gridLines: !1
+  }
+}), q = Object.freeze({
+  line: "line/spline",
+  pie: "pie/donut",
+  bar: "bar/stacked",
+  column: "column/stackedcolumn"
+}), be = (e, t) => {
+  const { axesMapping: r = {}, chartFamily: a } = t, s = e.reduce((o, l) => (o[l.jaql.title] = l, o), {}), i = Object.entries(r).reduce((o, l) => {
+    const [n, p] = l;
+    return o[`${n}`] = Array.isArray(p) ? p.map((m) => {
+      var S, T;
+      const d = s[m.name];
+      if (!d)
+        return { column: { type: "", name: m.name } };
+      const c = Q(d);
+      if (d.panel === "measures")
+        return {
+          column: c,
+          sortType: "sortNone"
+        };
+      if (G(c.type)) {
+        const x = (T = (S = d.format) == null ? void 0 : S.mask) == null ? void 0 : T[d.jaql.level];
+        if (x)
+          return {
+            column: c,
+            dateFormat: x
+          };
+      }
+      return c;
+    }) : p, o;
+  }, {});
+  switch (a) {
+    case "cartesian":
+      return g({
+        category: [],
+        value: [],
+        breakBy: []
+      }, i);
+    case "categorical":
+      return g({
+        category: [],
+        value: []
+      }, i);
+    case "scatter":
+      return Object.keys(i).forEach((o) => {
+        i[`${o}`] = i[`${o}`][0];
+      }), i;
+    case "scattermap":
+      return Object.keys(i).forEach((o) => {
+        o !== "geo" && (i[`${o}`] = i[`${o}`][0]);
+      }), i;
+    case "table":
+      return Object.keys(i).length === 0 ? xe(e).dataOptions : i;
+    case "boxplot":
+    case "areamap":
+    case "indicator":
+    default:
+      return i;
+  }
+}, W = (e, t) => {
+  var r, a, s, i;
+  return t === "x" ? (a = (r = e.axesMapping.category) != null ? r : e.axesMapping.x) == null ? void 0 : a.map((o) => o.name).join(", ") : (i = (s = e.axesMapping.value) != null ? s : e.axesMapping.y) == null ? void 0 : i.map((o) => o.name).join(", ");
+}, ve = (e, t, r = !0) => {
+  const a = be(e, t);
+  let s;
+  return r && t.chartType in q ? s = C(
+    C(Oe, {
+      subtype: q[t.chartType]
+    }),
+    {
+      legend: {
+        enabled: !0,
+        position: "right"
+      },
+      yAxis: {
+        title: {
+          enabled: !0,
+          text: W(t, "y")
+        }
+      },
+      xAxis: {
+        title: {
+          enabled: !0,
+          text: W(t, "x")
+        }
+      }
+    }
+  ) : s = Z(), {
+    dataOptions: a,
+    chartStyleOptions: s
+  };
+}, Ee = (e) => "chartType" in e ? e : {
+  chartType: "table",
+  chartFamily: "table",
+  axesMapping: {}
+}, we = (e) => e.map((t) => ee(t.jaql)), Ce = (e) => e.reduce(
+  (t, r) => {
+    if ((r.panel === "scope" || r.jaql.filter) && t.metadataFilters.push(D(r)), r.panel !== "scope") {
+      const a = D(r);
+      delete a.jaql.filter, t.metadataColumns.push(a);
+    }
+    return t;
+  },
+  { metadataColumns: [], metadataFilters: [] }
+), De = (e, t) => {
+  if (!ie(e))
+    try {
+      const { useCustomizedStyleOptions: r = !1 } = t || {}, { jaql: a, chartRecommendations: s, queryTitle: i } = e, {
+        metadata: o,
+        datasource: { title: l, id: n, type: p = "elasticube" }
+      } = a, m = Ee(s), d = m.chartType.toLowerCase(), c = {
+        cornerRadius: "Small",
+        header: {
+          // remove info button and render empty toolbar instead
+          renderToolbar: () => null
+        }
+      }, { metadataColumns: S, metadataFilters: T } = Ce(o), x = we(T), { dataOptions: N, chartStyleOptions: R } = ve(
+        S,
+        m,
+        r
+      ), _ = g(g({}, R), c);
+      return {
+        widgetType: "chart",
+        id: i,
+        title: i,
+        chartType: d,
+        dataSource: {
+          title: l,
+          id: n,
+          type: p
+        },
+        dataOptions: N,
+        filters: x,
+        styleOptions: _
+      };
+    } catch (r) {
+      console.error(r);
+      return;
+    }
+}, $e = (e, t) => De(e, t), qe = (e) => re(e) ? Se(e) : Te(e), Pe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  toWidgetCode: qe,
+  toWidgetProps: $e
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Me as E,
+  Ie as a,
+  re as b,
+  Le as c,
+  Qe as i,
+  oe as p,
+  Ae as s,
+  $e as t,
+  Fe as v,
+  Pe as w
+};