@sisense/sdk-ui 1.34.0 → 2.1.0

package/dist/widget-composer-fYnr8SDo.cjs

@@ -0,0 +1,428 @@
+"use strict";var G=Object.defineProperty,X=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var tt=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable;var L=(t,e,r)=>e in t?G(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,l=(t,e)=>{for(var r in e||(e={}))tt.call(e,r)&&L(t,r,e[r]);if(j)for(var r of j(e))et.call(e,r)&&L(t,r,e[r]);return t},m=(t,e)=>X(t,Z(e));const n=require("./derive-chart-family-DjbiaKLQ.cjs");class P extends n.DimensionalElement{constructor(e,r){var i;super((i=e.jaql.title)!==null&&i!==void 0?i:"",r),this.expression=e.jaql.dim||e.jaql.formula,this.metadataItem=e,e.jaql.agg?this.aggregation=e.jaql.agg:delete this.aggregation,e.jaql.formula?this.formula=e.jaql.formula:delete this.formula,e.jaql.sort?this.sortType=n.getSortType(e.jaql.sort):delete this.sortType,this.skipValidation=!0}get id(){return this.expression}jaql(e){return e===!0?this.metadataItem.jaql:this.metadataItem}serialize(){const e=super.serialize();return e.__serializable="JaqlElement",e.metadataItem=this.metadataItem,e.type=this.type,e}}const rt={text:n.MetadataTypes.TextAttribute,numeric:n.MetadataTypes.NumericAttribute,datetime:n.MetadataTypes.DateLevel};function it(t){var e;return new P(t,(e=rt[t.jaql.datatype])!==null&&e!==void 0?e:"numeric")}function B(t){const{jaql:e}=t;return e.formula?n.createCalculatedMeasureHelper(e):"agg"in e&&e.dim&&e.datatype?n.createMeasureHelper({expression:e.dim,dataType:e.datatype,agg:e.agg||"",granularity:e.level,format:void 0,sort:e.sort,title:e.title,dataSource:e.datasource}):e.dim&&e.datatype?n.createAttributeHelper({expression:e.dim,dataType:e.datatype,granularity:e.level,sort:e.sort,title:e.title,panel:t.panel,dataSource:e.datasource}):it(t)}const at={jaql:{datasource:{title:"",type:"elasticube"},metadata:[]},queryTitle:"",chartRecommendations:{}},st={model:"",metadata:[],chart:{},queryTitle:""},nt=t=>"widgetProps"in t,k=t=>"dashboardOid"in t&&"widgetOid"in t,ot=t=>"dashboardProps"in t,lt=t=>"dashboardOid"in t;function dt(t){return t.replace(/\s+/g,"-").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function ut(t){return t.charAt(0).toUpperCase()+t.slice(1)}function ct(t){const e=/\[(.+?)\s\(Calendar\)\]/;return t.replace(e,"[$1]").trim()}function pt(t){if(t)if(t.metadata){if(!t.model)throw new n.TranslatableError("errors.missingModelTitle")}else throw new n.TranslatableError("errors.missingMetadata");else throw new n.TranslatableError("errors.emptyModel");return t}function mt(t){return!t||!t.jaql.datasource.title||!t.jaql.metadata.length}function _(t){if(![...n.ALL_CHART_TYPES,"pivot","pivot2"].includes(t))throw new n.TranslatableError("errors.chartTypeNotSupported",{chartType:t})}function gt(t){return"widgetType"in t&&t.widgetType==="pivot"}function h(t){var e;return"column"in t&&((e=t.column)==null?void 0:e.expression)&&/\(.*\)/.test(t.column.expression)}function w(t){const e="measures"in t&&c(t.measures)||"values"in t&&c(t.values);return gt(t)?"values"in t.dataOptions&&c(t.dataOptions.values):"chartType"in t?t.chartType==="indicator"?"value"in t.dataOptions&&c(t.dataOptions.value)||"secondary"in t.dataOptions&&c(t.dataOptions.secondary):t.chartType==="table"?!("columns"in t.dataOptions)||!c(t.dataOptions.columns)?!1:t.dataOptions.columns.some(i=>h(i)):t.chartType==="boxplot"?!1:t.chartType==="scatter"?"x"in t.dataOptions&&t.dataOptions.x!==void 0&&h(t.dataOptions.x)||"y"in t.dataOptions&&t.dataOptions.y!==void 0&&h(t.dataOptions.y)||"size"in t.dataOptions&&t.dataOptions.size!==void 0:t.chartType==="scattermap"?"colorBy"in t.dataOptions&&t.dataOptions.colorBy!==void 0&&h(t.dataOptions.colorBy)||"details"in t.dataOptions&&t.dataOptions.details!==void 0&&h(t.dataOptions.details)||"size"in t.dataOptions&&t.dataOptions.size!==void 0&&h(t.dataOptions.size):t.chartType==="areamap"?"geo"in t.dataOptions&&c(t.dataOptions.geo)&&"color"in t.dataOptions&&c(t.dataOptions.color):"value"in t.dataOptions&&c(t.dataOptions.value):e}function c(t){return Array.isArray(t)&&t.length>0}function yt(t){const e=t.split(`
+`);for(let r=0;r<e.length-1;r++)if(e[r].trim()===""){const i=e[r+1].trim();if(i.startsWith("import *")||i.startsWith("import {")){e.splice(r,1);break}}return e.join(`
+`)}const ft={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}} }
+      styleOptions={ {{styleOptionsString}} }
+      drilldownOptions={ {{drilldownOptionsString}} }
+    />
+  );
+}`,chartTmpl:"{{baseChartTmpl}}",chartWidgetTmpl:"{{baseChartTmpl}}",chartWidgetPropsTmpl:`
+    {
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      chartType: '{{chartTypeString}}',
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+      drilldownOptions: {{drilldownOptionsString}},
+    }`,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, error } = useExecuteQueryByWidgetId({
+    widgetOid: "{{widgetOid}}",
+    dashboardOid: "{{dashboardOid}}"
+  });
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  if (isError) {
+    return <div>Error: {error.message}</div>;
+  }
+  if (data) {
+    return <div>Total Rows: {data.rows.length}</div>;
+  }
+
+  return null;
+};
+
+export default CodeExample;
+`,executeQueryTmpl:`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, error } = useExecuteQuery(queryProps);
+
+  if (isLoading) {
+    return <div>Loading...</div>;
+  }
+  if (isError) {
+    return <div>Error: {error.message}</div>;
+  }
+  if (data) {
+    return <div>Total Rows: {data.rows.length}</div>;
+  }
+
+  return null;
+};
+
+export default CodeExample;
+`,executePivotQueryTmpl:`import { useExecutePivotQuery, ExecutePivotQueryParams } from '@sisense/sdk-ui';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+const CodeExample = () => {
+    const pivotQueryProps: ExecutePivotQueryParams = {
+      dataSource: DM.DataSource,
+      rows: {{rowsString}},
+      values: {{valuesString}},
+      filters: {{filtersString}},
+    }
+
+    const { data, isLoading, isError, error } = useExecutePivotQuery(pivotQueryProps);
+
+    if (isLoading) {
+      return <div>Loading...</div>;
+    }
+    if (isError) {
+      return <div>Error: {error.message}</div>;
+    }
+    if (data) {
+      return <div>Total Rows: {data.table.rows.length}</div>;
+    }
+
+    return null;
+};
+
+export default CodeExample;
+`,pivotTableWidgetTmpl:`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}
+      dataOptions={ {{dataOptionsString}} }
+      filters={ {{filtersString}} }
+      styleOptions={ {{styleOptionsString}} }
+    />
+  );
+}`,pivotTableWidgetPropsTmpl:`{
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+    }`,dashboardByIdTmpl:`import { DashboardById } from '@sisense/sdk-ui';
+
+const CodeExample = () => {
+  return (
+    <>
+      <DashboardById dashboardOid="{{dashboardOid}}" />
+    </>
+  );
+};
+
+export default CodeExample;`,dashboardTmpl:`import { useMemo } from 'react';
+import { Dashboard, DashboardProps, WidgetProps } from '@sisense/sdk-ui';
+import { Filter, FilterRelations } from '@sisense/sdk-data';
+{{extraImportsString}}
+import * as DM from './{{defaultDataSourceString}}'; // generated with @sisense/sdk-cli
+
+export default function CodeExample() {
+  const dashboardProps: DashboardProps = useMemo(() => {
+    const widgets: WidgetProps[] = {{widgetsString}};
+    const filters: Filter[] | FilterRelations = {{filtersString}};
+
+    return {
+      title: '{{titleString}}',
+      widgets,
+      filters,
+      config: {
+        toolbar: { isVisible: true },
+        filtersPanel: { isVisible: true },
+      },
+      widgetsOptions: {{widgetsOptionsString}},
+      layoutOptions: {{layoutOptionsString}},
+      tabbersOptions: {{tabbersOptionsString}},
+      styleOptions: {{styleOptionsString}},
+    };
+  }, []);
+
+  return (
+    <Dashboard {...dashboardProps} />
+  );
+}`},angular:{baseChartTmpl:`import { Component } from '@angular/core';
+import { type ChartDataOptions, type ChartStyleOptions } from '@sisense/sdk-ui-angular';
+{{extraImportsString}}
+import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+@Component({
+    selector: 'code-example',
+    template: \`
+      <csdk-chart-widget
+        [title]="'{{titleString}}'"
+        chartType='{{chartTypeString}}'
+        [dataSource]='DM.DataSource'
+        [dataOptions]='dataOptions'
+        [filters]='filters'
+        [styleOptions]='styleOptions'
+        [drilldownOptions]='drilldownOptions'
+      />
+    \`
+})
+export class CodeExample {
+    DM = DM;
+    dataOptions: ChartDataOptions = {{dataOptionsString}};
+    filters = {{filtersString}};
+    styleOptions: ChartStyleOptions = {{styleOptionsString}};
+    drilldownOptions = {{drilldownOptionsString}};
+}`,chartTmpl:"{{baseChartTmpl}}",chartWidgetTmpl:"{{baseChartTmpl}}",chartWidgetPropsTmpl:`{
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      chartType: '{{chartTypeString}}',
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+      drilldownOptions: {{drilldownOptionsString}},
+    }`,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>
+    <div *ngIf="errorMessage">Error: {{ errorMessage }}</div>
+    <div *ngIf="!errorMessage">Total Rows: {{ queryResult.rows.length }}</div>
+  </div>\`,
+})
+
+export class CodeExample {
+    queryResult: QueryResultData = { rows: [], columns: [] };
+
+    errorMessage: string | null = null;
+
+    constructor(private queryService: QueryService) {}
+
+    async ngOnInit(): Promise<void> {
+      try {
+        const { data } = await this.queryService.executeQueryByWidgetId({
+          widgetOid: "{{widgetOid}}",
+          dashboardOid: "{{dashboardOid}}",
+        });
+        this.queryResult = data as QueryResultData;
+      } catch(error: unknown) {
+        if (error instanceof Error) {
+          this.errorMessage = error.message;
+        }
+      }
+    }
+}
+`,executeQueryTmpl:`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>
+    <div *ngIf="errorMessage">Error: {{ errorMessage }}</div>
+    <div *ngIf="!errorMessage">Total Rows: {{ queryResult.rows.length }}</div>
+  </div>\`,
+})
+
+export class CodeExample {
+    queryResult: QueryResultData = { rows: [], columns: [] };
+
+    errorMessage: string | null = null;
+
+    constructor(private queryService: QueryService) {}
+
+    async ngOnInit(): Promise<void> {
+      const queryProps = {
+        dataSource: DM.DataSource,
+        dimensions: {{dimensionsString}},
+        measures: {{measuresString}},
+        filters: {{filtersString}},
+        highlights: {{highlightsString}},
+      }
+
+      try {
+        const { data } = await this.queryService.executeQuery(queryProps);
+        this.queryResult = data as QueryResultData;
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          this.errorMessage = error.message;
+        }
+      }
+    }
+}
+`,executePivotQueryTmpl:"Not implemented yet",pivotTableWidgetTmpl:"Not implemented yet",pivotTableWidgetPropsTmpl:`{
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+    }`,dashboardByIdTmpl:`import { Component } from '@angular/core';
+
+@Component({
+  selector: 'code-example',
+  template: \`
+    <csdk-dashboard-by-id
+      [dashboardOid]="dashboardOid"
+    />
+  \`,
+})
+
+export class CodeExample {
+  dashboardOid = "{{dashboardOid}}";
+}`,dashboardTmpl:"/** COMING SOON */"},vue:{baseChartTmpl:`<script setup lang="ts">
+  import { ref } from 'vue';
+  import { {{componentString}}, type ChartStyleOptions } from '@sisense/sdk-ui-vue';
+  {{extraImportsString}}
+  import * as DM from './{{dataSourceString}}'; // generated with @sisense/sdk-cli
+
+  const dataOptions = ref({{dataOptionsString}});
+  const filters = ref({{filtersString}});
+  const styleOptions = ref<ChartStyleOptions>({{styleOptionsString}});
+  const drilldownOptions = ref({{drilldownOptionsString}});
+<\/script>
+
+<template>
+  <{{componentString}}
+    chartType="{{chartTypeString}}"
+    :dataOptions="dataOptions"
+    :filters="filters"
+    :styleOptions="styleOptions"
+    :drilldownOptions="drilldownOptions"
+    :dataSource="DM.DataSource"
+    title="{{titleString}}" />
+</template>`,chartTmpl:"{{baseChartTmpl}}",chartWidgetTmpl:"{{baseChartTmpl}}",chartWidgetPropsTmpl:`{
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      chartType: '{{chartTypeString}}',
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+      drilldownOptions: {{drilldownOptionsString}},
+    }`,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, error } = useExecuteQueryByWidgetId({
+  widgetOid: "{{widgetOid}}",
+  dashboardOid: "{{dashboardOid}}"
+});
+<\/script>
+<template>
+  <div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isError">Error: {{error.message}}</div>
+    <div v-else-if="data">Total Rows: {{data.rows.length}}</div>
+  </div>
+</template>
+`,executeQueryTmpl:`<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, error } = useExecuteQuery(queryProps);
+<\/script>
+<template>
+  <div>
+    <div v-if="isLoading">Loading...</div>
+    <div v-else-if="isError">Error: {{error.message}}</div>
+    <div v-else-if="data">Total Rows: {{data.rows.length}}</div>
+  </div>
+</template>`,executePivotQueryTmpl:"Not implemented yet",pivotTableWidgetTmpl:"Not implemented yet",pivotTableWidgetPropsTmpl:`{
+      id: '{{idString}}',
+      widgetType: '{{widgetTypeString}}',
+      title: '{{titleString}}',
+      dataSource: DM.DataSource,
+      dataOptions: {{dataOptionsString}},
+      filters: {{filtersString}},
+      styleOptions: {{styleOptionsString}},
+    }`,dashboardByIdTmpl:`<script setup lang="ts">
+import { DashboardById } from '@sisense/sdk-ui-vue';
+<\/script>
+<template>
+  <DashboardById :dashboardOid="'{{dashboardOid}}'" />
+</template>`,dashboardTmpl:"/** COMING SOON */"}},F=(t,e)=>ft[e][t].replace(/{{(.*?)Tmpl}}/g,(i,a)=>F(`${a}Tmpl`,e)),N=(t,e)=>t.replace(/{{(.*?)}}/g,(r,i)=>i in e?e[i]:(console.warn(`Placeholder ${i} not found in data`),r)),C=(t,e,r="react")=>{const i=F(t,r);return yt(N(i,e))},St=()=>Object.values(n.AggregationTypes).map(e=>n.DimensionalBaseMeasure.aggregationToJAQL(e)).join("|"),R=t=>{const{formula:e,context:r,filter:i}=t;if(!r||!e)return t;const a=Object.keys(r);if(a.length!==1)return t;const s=a[0];if(typeof s!="string")return t;const o=r[`${s}`],d=St(),g=new RegExp(`^\\s*(${d})\\(\\[\\w+\\]\\)$`),f=e.match(g);if(f&&e.includes(s)){const u=f[1];return l({dim:o.dim,table:o.table,column:o.column,datatype:o.datatype,agg:u,title:t.title},i?{filter:l({},i)}:{})}return t},D=t=>{let e=t;if("formula"in t&&(e=R(t)),"context"in e){const r=l({},e.context);Object.keys(r).forEach(i=>{r[`${i}`]=D(r[`${i}`])}),e.context=r}return e},ht=t=>{var i;const e=t;if(e.panel!=="scope")return e;const{jaql:r}=e;return(i=r.filter)!=null&&i.by&&(r.filter.by=R(r.filter.by)),m(l({},e),{jaql:r})},z=t=>{let e=t;e=ht(e);const{jaql:r,measure:i,by:a}=e;return l(l(m(l({},e),{jaql:D(r)}),a?{by:D(a)}:{}),i?{measure:D(i)}:{})},O=6,E=`
+`,M="UNKNOWN",Ot=(t,e)=>{let r="";return r+=`measureFactory.customFormula(
+`,r+=" ".repeat(e),r+=`  '${n.escapeSingleQuotes(t.title)}',
+`,r+=" ".repeat(e),r+=`  '${t.formula}',
+`,r+=" ".repeat(e),r+=`  {
+`,Object.entries(t.context).forEach(([i,a])=>{const s=n.normalizeAttributeName(a.table||M,a.column||M,void 0,"DM");r+=" ".repeat(e),r+=`    '${i.slice(1,-1)}': ${s},
+`}),r+=" ".repeat(e),r+=`  }
+`,r+=" ".repeat(e),r+=")",r},Tt=t=>{const{level:e,table:r,column:i,agg:a,title:s}=t;let o;return r&&i&&(o=n.normalizeAttributeName(r,i,e,"DM")),a&&r&&i&&s&&(o=`measureFactory.${n.DimensionalBaseMeasure.aggregationFromJAQL(a)}(${o}, '${n.escapeSingleQuotes(s)}')`),o||M},bt=(t,e)=>{const r=t.jaql(!1).jaql;return"formula"in r?Ot(r,e):Tt(r)},p=(t,e=0,r=!1)=>{if(!t)return"";if(typeof t=="string")return`'${n.escapeSingleQuotes(t)}'`;if(t instanceof P)return bt(t,e);if(t instanceof n.DimensionalElement)return t.composeCode||"";let i="";return Array.isArray(t)?i+=`[${t.map(a=>p(a,e+2))}${t.length?E+" ".repeat(e+2):""}]`:(i+=`{${E}`,Object.entries(t).forEach(([a,s])=>{r&&typeof a=="string"&&(a=`'${n.escapeSingleQuotes(a)}'`),i+=" ".repeat(e+2),Array.isArray(s)?i+=`${a}: [${s.map(o=>p(o,e+4,r))}${s.length?E+" ".repeat(e+2):""}]`:typeof s=="object"&&s!==null?i+=`${a}: ${p(s,e+2,r)}`:["number","boolean","undefined"].includes(typeof s)||s===null?i+=`${a}: ${s}`:typeof s=="string"?i+=`${a}: '${n.escapeSingleQuotes(s)}'`:i+=`${a}: ${s}`,i+=`,${E}`}),i+=" ".repeat(e),i+="}"),i};function vt(t){return p(t,O)}function I(t,e="data-source-placeholder"){if(!t)return e;const r=typeof t=="object"&&"title"in t?t.title:t;return dt(r)}function W(t,e=!0){const r=[];return e&&r.push("measureFactory"),c(t)&&r.push("filterFactory"),r.length>0?`import { ${r.join(", ")} } from '@sisense/sdk-data';`:""}const Q=`
+`,xt=(t,e)=>{if(t.composeCode)return`${Q}${" ".repeat(e)}${t.composeCode}`;const r=t.jaql().jaql;return`${Q}${" ".repeat(e)}filterFactory.customFilter(${p(r,e,!0)})`},Et=(t,e=0)=>{if(!t)return"";let r="";return r+=`[${t.map(i=>xt(i,e+2))}${t.length?`
+`+" ".repeat(e+2):""}]`,r},q=t=>t?Array.isArray(t)?Et(t,6):"/** Filter relations not supported yet */":"[]",Dt=["executeQueryByWidgetIdTmpl","widgetByIdTmpl"],Ct="chartWidgetTmpl",wt="pivotTableWidgetTmpl",Mt=t=>t,It=({dashboardOid:t,widgetOid:e,uiFramework:r="react",chartType:i="table",includeChart:a=!0})=>{_(i);const s={dashboardOid:t,widgetOid:e},o=Dt[Number(a)];return C(o,s,r)},Y=(t,e,r)=>{if(n.isChartWidgetProps(t)){_(t.chartType);const i=w(t),a={idString:t.id,widgetTypeString:"chart",titleString:t.title,dataSourceString:I(t.dataSource),chartTypeString:Mt(t.chartType),dataOptionsString:vt(t.dataOptions),filtersString:q(t.filters),componentString:"ChartWidget",extraImportsString:W(t.filters||[],i),styleOptionsString:p(t.styleOptions||{},O),drilldownOptionsString:p(t.drilldownOptions||{},O)};return C(r.chart,a,e)}if(n.isPivotTableWidgetProps(t)){const i=w(t),a={idString:t.id,widgetTypeString:"pivot",titleString:t.title,dataSourceString:I(t.dataSource),dataOptionsString:p(t.dataOptions),filtersString:q(t.filters),componentString:"PivotTableWidget",extraImportsString:W(t.filters||[],i),styleOptionsString:p(t.styleOptions||{},O)};return C(r.pivot,a,e)}if(n.isPluginWidgetProps(t))return"/** Plugin widget code not supported yet */";throw new n.TranslatableError("errors.otherWidgetTypesNotSupported")},Wt=({widgetProps:t,uiFramework:e="react"})=>Y(t,e,{chart:Ct,pivot:wt}),qt=t=>({dataOptions:{columns:t.map(B)}}),Pt=Object.freeze({convolution:{enabled:!0,selectedConvolutionType:"bySlicesCount",independentSlicesCount:7},lineWidth:{width:"bold"},markers:{enabled:!1},legend:{enabled:!1},yAxis:{gridLines:!1},xAxis:{gridLines:!1}}),$=Object.freeze({line:"line/spline",pie:"pie/donut",bar:"bar/stacked",column:"column/stackedcolumn"}),jt=(t,e,r)=>{const i=t.reduce((s,o)=>(s[o.jaql.title]=o,s),{}),a=Object.entries(r).reduce((s,o)=>{const[d,g]=o;return s[`${d}`]=Array.isArray(g)?g.map(f=>{var T,b;const u=n.normalizeAnyColumn(f);delete u.enabled;const y=i[u.column.name];if(!y)return{column:{type:"",name:u.column.name}};const S=B(y);if(y.panel==="measures")return m(l({},u),{column:S});if(n.isDatetime(S.type)){const v=(b=(T=y.format)==null?void 0:T.mask)==null?void 0:b[y.jaql.level];if(v)return m(l({},u),{column:S,dateFormat:v})}return m(l({},u),{column:S})}):g,s},{});switch(e){case"cartesian":return l({category:[],value:[],breakBy:[]},a);case"categorical":return l({category:[],value:[]},a);case"scatter":return Object.keys(a).forEach(s=>{a[`${s}`]=a[`${s}`][0]}),a;case"scattermap":return Object.keys(a).forEach(s=>{s!=="geo"&&(a[`${s}`]=a[`${s}`][0])}),a;case"table":return Object.keys(a).length===0?qt(t).dataOptions:a;case"boxplot":case"areamap":case"indicator":default:return a}},A=(t,e)=>{var r,i,a,s;return e==="x"?(i=(r=t.axesMapping.category)!=null?r:t.axesMapping.x)==null?void 0:i.map(o=>n.normalizeAnyColumn(o).column.name).join(", "):(s=(a=t.axesMapping.value)!=null?a:t.axesMapping.y)==null?void 0:s.map(o=>n.normalizeAnyColumn(o).column.name).join(", ")},Lt=(t,e,r=!0)=>{const{chartFamily:i,axesMapping:a={},styleOptions:s={}}=e,o=jt(t,i,a);let d;return r&&e.chartType in $?d=n.merge(n.merge(Pt,{subtype:$[e.chartType]}),{legend:{enabled:!0,position:"right"},yAxis:{title:{enabled:!0,text:A(e,"y")}},xAxis:{title:{enabled:!0,text:A(e,"x")}}},s):d=n.merge(n.getDefaultStyleOptions(),s),{dataOptions:o,chartStyleOptions:d}},Qt=t=>"chartType"in t?t:{chartType:"table",chartFamily:"table",axesMapping:{}},$t=t=>t.map(e=>n.createFilterFromJaql(e.jaql)),At=t=>t.reduce((e,r)=>{if((r.panel==="scope"||r.jaql.filter)&&e.metadataFilters.push(n.cloneDeep(r)),r.panel!=="scope"){const i=n.cloneDeep(r);delete i.jaql.filter,e.metadataColumns.push(i)}return e},{metadataColumns:[],metadataFilters:[]}),Bt=(t,e)=>{if(!mt(t))try{const{useCustomizedStyleOptions:r=!1}=e||{},{jaql:i,chartRecommendations:a,queryTitle:s}=t,{metadata:o,datasource:d}=i,g=m(l({},d),{type:d.type||"elasticube"}),f=n.convertJaqlDataSourceForDto(g),u=o.map(x=>z(x)).map(x=>m(l({},x),{jaql:m(l({},x.jaql),{datasource:f})})),y=Qt(a),S=y.chartType.toLowerCase(),T={cornerRadius:"Small",header:{renderToolbar:()=>null}},{metadataColumns:b,metadataFilters:v}=At(u),U=$t(v),{dataOptions:K,chartStyleOptions:V}=Lt(b,y,r),H=l(l({},V),T);return{widgetType:"chart",id:s,title:s,chartType:S,dataSource:g,dataOptions:K,filters:U,styleOptions:H}}catch(r){console.error(r);return}},J=(t,e)=>Bt(t,e),kt=t=>k(t)?It(t):Wt(t),_t=Object.freeze(Object.defineProperty({__proto__:null,toWidgetCode:kt,toWidgetProps:J},Symbol.toStringTag,{value:"Module"}));exports.CODE_TEMPLATES_INDENT=O;exports.EMPTY_EXPANDED_QUERY_MODEL=at;exports.EMPTY_SIMPLE_QUERY_MODEL=st;exports.JaqlElement=P;exports.capitalizeFirstLetter=ut;exports.checkIfMeasuresExist=w;exports.generateCode=C;exports.getWidgetCode=Y;exports.isByIdDashboardCodeParams=lt;exports.isByIdWidgetCodeParams=k;exports.isClientSideDashboardCodeParams=ot;exports.isClientSideWidgetCodeParams=nt;exports.populatePlaceholders=N;exports.sanitizeDimensionId=ct;exports.simplifyMetadataItem=z;exports.stringifyDataSource=I;exports.stringifyExtraImports=W;exports.stringifyFilters=q;exports.stringifyProps=p;exports.toWidgetProps=J;exports.validateQueryModel=pt;exports.widgetComposer=_t;

package/package.json

@@ -11,7 +11,7 @@
     "Sisense",
     "Compose SDK"
   ],
-  "version": "1.34.0",
+  "version": "2.1.0",
   "type": "module",
   "exports": {
     ".": {
@@ -49,16 +49,17 @@
   "author": "Sisense",
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
+    "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/material": "^5.16.7",
     "@mui/system": "^5.16.7",
-    "@sisense/sdk-common": "^1.34.0",
-    "@sisense/sdk-data": "^1.34.0",
-    "@sisense/sdk-pivot-client": "^1.34.0",
-    "@sisense/sdk-query-client": "^1.34.0",
-    "@sisense/sdk-rest-client": "^1.34.0",
-    "@sisense/sdk-tracking": "^1.34.0",
+    "@sisense/sdk-common": "^2.1.0",
+    "@sisense/sdk-data": "^2.1.0",
+    "@sisense/sdk-pivot-client": "^2.1.0",
+    "@sisense/sdk-query-client": "^2.1.0",
+    "@sisense/sdk-rest-client": "^2.1.0",
+    "@sisense/sdk-tracking": "^2.1.0",
     "@sisense/sisense-charts": "5.1.1",
     "@tanstack/react-query": "4.36.1",
     "classnames": "^2.3.2",
@@ -81,6 +82,7 @@
     "react-error-boundary": "^4.0.11",
     "react-i18next": "^13.2.2",
     "react-number-format": "^5.1.0",
+    "superjson": "^2.2.2",
     "ts-deepmerge": "6.0.2",
     "ts-essentials": "^9.3.0",
     "whatwg-fetch": "^3.6.2",
@@ -130,6 +132,7 @@
     "@types/fixed-data-table-2": "^1.0.0",
     "@types/leaflet": "^1.9.8",
     "@types/lodash": "^4.14.194",
+    "@types/prismjs": "^1.26.5",
     "@types/proj4leaflet": "^1.0.10",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
@@ -147,6 +150,7 @@
     "postcss": "^8.4.31",
     "postcss-replace": "^2.0.1",
     "prettier": "2.8.4",
+    "prismjs": "^1.30.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-grid-layout": "^1.4.4",
@@ -164,8 +168,8 @@
     "vitest-canvas-mock": "^0.3.2"
   },
   "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "volta": {
     "extends": "../../package.json"