@sisense/sdk-ui 1.23.0 → 1.24.0

package/dist/widget-composer-CvgsMHyb.cjs

@@ -0,0 +1,237 @@
+"use strict";var N=Object.defineProperty;var x=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,k=Object.prototype.propertyIsEnumerable;var v=(e,t,r)=>t in e?N(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,g=(e,t)=>{for(var r in t||(t={}))R.call(t,r)&&v(e,r,t[r]);if(x)for(var r of x(t))k.call(t,r)&&v(e,r,t[r]);return e};const o=require("./widget-model-translator-_Z-8UaTN.cjs");class q extends o.DimensionalElement{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=o.getSortType(t.jaql.sort):delete this.sortType,this.skipValidation=!0}get id(){return this.expression}jaql(){return this.metadataItem}}const z={text:o.MetadataTypes.TextAttribute,numeric:o.MetadataTypes.NumericAttribute,datetime:o.MetadataTypes.DateLevel};function M(e){var t;return new q(e,(t=z[e.jaql.datatype])!==null&&t!==void 0?t:"numeric")}const U={jaql:{datasource:{title:""},metadata:[]},queryTitle:"",chartRecommendations:{}},Y={model:"",metadata:[],chart:{},queryTitle:""},K=e=>"widgetProps"in e,$=e=>"dashboardOid"in e&&"widgetOid"in e;function J(e){return e.replace(/\s+/g,"-").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}function V(e){return e.charAt(0).toUpperCase()+e.slice(1)}function X(e){const t=/\[(.+?)\s\(Calendar\)\]/;return e.replace(t,"[$1]").trim()}function H(e){if(e)if(e.metadata){if(!e.model)throw new o.TranslatableError("errors.missingModelTitle")}else throw new o.TranslatableError("errors.missingMetadata");else throw new o.TranslatableError("errors.emptyModel");return e}function Z(e){return!e||!e.jaql.datasource.title||!e.jaql.metadata.length}function f(e){return e&&e.replace(new RegExp("(?<!\\\\)'","g"),"\\'")}function W(e){if(!o.ALL_CHART_TYPES.includes(e))throw new o.TranslatableError("errors.chartTypeNotSupported",{chartType:e})}const G={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>`}},I=(e,t)=>G[t][e].replace(/{{(.*?)Tmpl}}/g,(a,s)=>I(`${s}Tmpl`,t)),j=(e,t)=>e.replace(/{{(.*?)}}/g,(r,a)=>a in t?t[a]:(console.warn(`Placeholder ${a} not found in data`),r)),E=(e,t,r="react")=>{const a=I(e,r);return j(a,t)},y=`
+`,O="UNKNOWN",ee=(e,t)=>{let r="";return r+=`measureFactory.customFormula(
+`,r+=" ".repeat(t),r+=`  '${f(e.title)}',
+`,r+=" ".repeat(t),r+=`  '${e.formula}',
+`,r+=" ".repeat(t),r+=`  {
+`,Object.entries(e.context).forEach(([a,s])=>{const i=o.normalizeAttributeName(s.table||O,s.column||O,void 0,"DM");r+=" ".repeat(t),r+=`    '${a.slice(1,-1)}': ${i},
+`}),r+=" ".repeat(t),r+=`  }
+`,r+=" ".repeat(t),r+=")",r},te=(e,t)=>{const{level:r,table:a,column:s,agg:i,sort:n,title:d}=e;let l;return a&&s&&(l=o.normalizeAttributeName(a,s,r,"DM")),i&&a&&s&&d&&(l=`measureFactory.${o.DimensionalBaseMeasure.aggregationFromJAQL(i)}(${l}, '${f(d)}')`),n&&(l=`{column: ${l}, sortType: '${o.getSortType(n)}'}`),l?`${" ".repeat(t)}${l}`:O},re=(e,t)=>{const r=e.jaql().jaql;return"formula"in r?ee(r,t):y+te(r,t)},h=(e,t=0,r=!1)=>{if(!e)return"";if(typeof e=="string")return`'${f(e)}'`;if(e instanceof q)return re(e,t);let a="";return Array.isArray(e)?a+=`[${e.map(s=>h(s,t+2))}${e.length?y+" ".repeat(t+2):""}]`:(a+=`{${y}`,Object.entries(e).forEach(([s,i])=>{r&&(s=`'${f(s)}'`),a+=" ".repeat(t+2),Array.isArray(i)?a+=`${s}: [${i.map(n=>h(n,t+4,r))}${i.length?y+" ".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}: '${f(i)}'`,a+=`,${y}`}),a+=" ".repeat(t),a+="}"),a},C=`
+`,ae=(e,t)=>{if(e.composeCode)return`${C}${" ".repeat(t)}${e.composeCode}`;const r=e.jaql().jaql;return`${C}${" ".repeat(t)}filterFactory.customFilter(${h(r,t,!0)})`},ie=(e,t=0)=>{if(!e)return"";let r="";return r+=`[${e.map(a=>ae(a,t+2))}${e.length?`
+`+" ".repeat(t+2):""}]`,r},Q=e=>{if(!e)return"";if(Array.isArray(e))return ie(e,2);throw new o.TranslatableError("errors.filterRelationsNotSupported")},se=["executeQueryByWidgetIdTmpl","widgetByIdTmpl"],oe=["executeQueryWidgetTmpl","chartWidgetTmpl"],L=e=>{if(!e)throw new o.TranslatableError("errors.undefinedDataSource");let t;return typeof e=="object"&&"title"in e?t=e.title:t=e,J(t)},ne=e=>e,le=e=>h(e,2),P=e=>{const t=["measureFactory"],{filters:r}=e;return Array.isArray(r)&&r.length>0&&t.push("filterFactory"),`import { ${t.join(", ")} } from '@sisense/sdk-data';`},de=(e,t,r)=>{const a={titleString:e.title,dataSourceString:L(e.dataSource),chartTypeString:ne(e.chartType),dataOptionsString:le(e.dataOptions),filtersString:Q(e.filters),componentString:"ChartWidget",extraImportsString:P(e)};return E(r,a,t)},ue=(e,t,r)=>{const a=o.fromChartWidgetProps(e),s=o.toExecuteQueryParams(a),i={dataSourceString:L(s.dataSource),dimensionsString:"[]",measuresString:"[]",filtersString:Q(s.filters),highlightsString:"[]",extraImportsString:P(e)};return E(r,i,t)},ce=({dashboardOid:e,widgetOid:t,uiFramework:r="react",chartType:a="table",includeChart:s=!0})=>{W(a);const i={dashboardOid:e,widgetOid:t},n=se[Number(s)];return E(n,i,r)},pe=({widgetProps:e,uiFramework:t="react",includeChart:r=!0})=>{if(o.isChartWidgetProps(e)){W(e.chartType);const a=oe[Number(r)];return r?de(e,t,a):ue(e,t,a)}throw new o.TranslatableError("errors.otherWidgetTypesNotSupported")},me=e=>({dataOptions:{columns:e.map(M)}}),ge=Object.freeze({convolution:{enabled:!0,selectedConvolutionType:"bySlicesCount",independentSlicesCount:7},lineWidth:{width:"bold"},markers:{enabled:!1},legend:{enabled:!1},yAxis:{gridLines:!1},xAxis:{gridLines:!1}}),w=Object.freeze({line:"line/spline",pie:"pie/donut",bar:"bar/stacked",column:"column/stackedcolumn"}),ye=(e,t)=>{const{axesMapping:r={},chartFamily:a}=t,s=e.reduce((n,d)=>(n[d.jaql.title]=d,n),{}),i=Object.entries(r).reduce((n,d)=>{const[l,p]=d;return n[`${l}`]=Array.isArray(p)?p.map(m=>{var S,T;const u=s[m.name];if(!u)return{column:{type:"",name:m.name}};const c=M(u);if(u.panel==="measures")return{column:c,sortType:"sortNone"};if(o.isDatetime(c.type)){const b=(T=(S=u.format)==null?void 0:S.mask)==null?void 0:T[u.jaql.level];if(b)return{column:c,dateFormat:b}}return c}):p,n},{});switch(a){case"cartesian":return g({category:[],value:[],breakBy:[]},i);case"categorical":return g({category:[],value:[]},i);case"scatter":return Object.keys(i).forEach(n=>{i[`${n}`]=i[`${n}`][0]}),i;case"scattermap":return Object.keys(i).forEach(n=>{n!=="geo"&&(i[`${n}`]=i[`${n}`][0])}),i;case"table":return Object.keys(i).length===0?me(e).dataOptions:i;case"boxplot":case"areamap":case"indicator":default:return i}},D=(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(n=>n.name).join(", "):(i=(s=e.axesMapping.value)!=null?s:e.axesMapping.y)==null?void 0:i.map(n=>n.name).join(", ")},fe=(e,t,r=!0)=>{const a=ye(e,t);let s;return r&&t.chartType in w?s=o.merge(o.merge(ge,{subtype:w[t.chartType]}),{legend:{enabled:!0,position:"right"},yAxis:{title:{enabled:!0,text:D(t,"y")}},xAxis:{title:{enabled:!0,text:D(t,"x")}}}):s=o.getDefaultStyleOptions(),{dataOptions:a,chartStyleOptions:s}},he=e=>"chartType"in e?e:{chartType:"table",chartFamily:"table",axesMapping:{}},Se=e=>e.map(t=>o.createFilterFromJaql(t.jaql)),Te=e=>e.reduce((t,r)=>{if((r.panel==="scope"||r.jaql.filter)&&t.metadataFilters.push(o.cloneDeep(r)),r.panel!=="scope"){const a=o.cloneDeep(r);delete a.jaql.filter,t.metadataColumns.push(a)}return t},{metadataColumns:[],metadataFilters:[]}),be=(e,t)=>{if(!Z(e))try{const{useCustomizedStyleOptions:r=!1}=t||{},{jaql:a,chartRecommendations:s,queryTitle:i}=e,{metadata:n,datasource:{title:d,id:l,type:p="elasticube"}}=a,m=he(s),u=m.chartType.toLowerCase(),c={cornerRadius:"Small",header:{renderToolbar:()=>null}},{metadataColumns:S,metadataFilters:T}=Te(n),b=Se(T),{dataOptions:F,chartStyleOptions:_}=fe(S,m,r),B=g(g({},_),c);return{widgetType:"chart",id:i,title:i,chartType:u,dataSource:{title:d,id:l,type:p},dataOptions:F,filters:b,styleOptions:B}}catch(r){console.error(r);return}},A=(e,t)=>be(e,t),Oe=e=>$(e)?ce(e):pe(e),Ee=Object.freeze(Object.defineProperty({__proto__:null,toWidgetCode:Oe,toWidgetProps:A},Symbol.toStringTag,{value:"Module"}));exports.EMPTY_EXPANDED_QUERY_MODEL=U;exports.EMPTY_SIMPLE_QUERY_MODEL=Y;exports.capitalizeFirstLetter=V;exports.isByIdWidgetCodeParams=$;exports.isClientSideWidgetCodeParams=K;exports.populatePlaceholders=j;exports.sanitizeDimensionId=X;exports.toWidgetProps=A;exports.validateQueryModel=H;exports.widgetComposer=Ee;