@solidxai/core-ui 0.0.1

package/dist/components/core/dashboard/SolidDashboardVariable.tsx

@@ -0,0 +1,256 @@
+
+import { SqlExpression } from "../../../types/solid-core";
+import { AutoComplete, AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from "primereact/autocomplete";
+import { Calendar } from "primereact/calendar";
+import { Nullable } from "primereact/ts-helpers";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import styles from './SolidDashboard.module.css';
+import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
+import { ProgressSpinner } from "primereact/progressspinner";
+import { DashboardVariableRecord } from "./SolidDashboard";
+import { Button } from "primereact/button";
+
+
+export interface DashboardVariableFilterProps {
+  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+  clearSignal: number;
+  dashboardVariable: DashboardVariableRecord;
+}
+
+export const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the default dates state
+  // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null
+  const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue
+  const defaultDatesArray = JSON.parse(defaultDatesString || '[]');
+  // Map the defaultDatesArray to Date objects
+  const defaultDates: Nullable<(Date | null)[]> = defaultDatesArray.length === 2 ? [
+    new Date(defaultDatesArray[0]),
+    new Date(defaultDatesArray[1])
+  ] : null;
+  const [dates, setDates] = useState<Nullable<(Date | null)[]>>(defaultDates);
+
+  useEffect(() => {
+    setDates(null);  // reset UI
+  }, [clearSignal]);
+  
+  return (
+    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>
+      <Calendar value={dates} onChange={(e) => {
+        console.log(`Calendar changed values are: `);
+        console.log(e.value);
+        const newDates = e.value as Date[] | null;
+        setDates(newDates);
+
+        if (newDates && newDates.length === 2 && newDates[0] && newDates[1]) {
+          const filter: SqlExpression = {
+            variableName: dashboardVariable.variableName,
+            // @ts-ignore
+            operator: '$between',
+            value: [
+              newDates[0].toISOString().split('T')[0],
+              newDates[1].toISOString().split('T')[0]
+            ]
+          };
+          setFilters(prev => {
+            // Remove any existing dashboardDate filter and replace with the new one
+            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+            return [filter];
+          });
+        }
+
+      }} selectionMode="range" readOnlyInput hideOnRangeSelection inputStyle={{ height: 36.38 }} className={styles.SolidDashboardDateRangeFilter} />
+      <div className="px-2">
+        <i className="pi pi-calendar opacity-50"></i>
+      </div>
+    </div>
+  )
+}
+
+export const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the selection dynamic values state
+  // Pick the values from defaultValue if present, for default operator $in
+  const defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+  const defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');
+
+  // Selection Dynamic Values
+  const [selectionDynamicValues, setSelectionDynamicValues] = useState<string[]>(defaultDynamicValues);
+  const [filteredItems, setFilteredItems] = useState<string[]>([]);
+
+  // Using rtk query to fetch dynamic values based on variableId
+  const variableId = dashboardVariable.id;
+  const queryString = `variableId=${variableId}`;
+  const { data: dynamicValues, isLoading, isError } = useGetDashboardVariableSelectionDynamicValuesQuery(queryString);
+
+  const allItems = dynamicValues ? dynamicValues : [];
+
+  // Dynamic search
+  const searchDynamic = (event: AutoCompleteCompleteEvent) => {
+    const query = event.query.toLowerCase();
+    const filtered = allItems.map(item => item.label).filter(item =>
+      item.toLowerCase().includes(query)
+    );
+    setFilteredItems(filtered);
+  };
+
+  // Set the filters whenever selectionDynamicValues change
+  useEffect(() => {
+    console.log(`Selection Dynamic Values changed:`, selectionDynamicValues);
+    if (selectionDynamicValues.length > 0) {
+      const filter: SqlExpression = {
+        variableName: dashboardVariable.variableName,
+        // @ts-ignore
+        operator: '$in',
+        value: selectionDynamicValues
+      };
+      setFilters(prev => {
+        // Remove any existing filter for this variable and replace with the new one
+        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);
+        return [...filtered, filter];
+      });
+    }
+    // else {
+    //   // If no values selected, remove the filter for this variable
+    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+    // }
+  }, [selectionDynamicValues]);
+
+  useEffect(() => {
+    setSelectionDynamicValues([]);
+  }, [clearSignal]);
+
+  return (
+    <>
+      {isLoading && <ProgressSpinner></ProgressSpinner>}
+      {isError && <div>Error loading values</div>}
+      {!isLoading && !isError &&
+        <AutoComplete
+          value={selectionDynamicValues}
+          suggestions={filteredItems}
+          completeMethod={searchDynamic}
+          onChange={(e: AutoCompleteChangeEvent) => {
+            console.log('AutoComplete changed values are:');
+            console.log(e);
+            setSelectionDynamicValues(e.value)
+          }}
+          multiple
+          dropdown
+          placeholder={dashboardVariable.variableName}
+          className="solid-standard-autocomplete"
+          style={{ minHeight: 38 }}
+        />
+      }
+    </>
+  );
+}
+
+export const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {
+  // Initialize the selection static values state
+  // Pick the values from defaultValue if present, for default operator $in
+  const defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+  const defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');
+
+  // Selection Static Values
+  const [selectionStaticValues, setSelectionStaticValues] = useState<string[]>(defaultStaticValues);
+  const [filteredStaticItems, setFilteredStaticItems] = useState<string[]>([]);
+  const staticValues = dashboardVariable.selectionStaticValues || [];
+
+  // The values are in the format val:label, we need to extract the labels
+  const staticValueItems = staticValues.map((val: any) => ({ value: val.split(':')[0], label: val.split(':')[1] }));
+
+  // Static search
+  const searchStatic = (event: AutoCompleteCompleteEvent) => {
+    const query = event.query.toLowerCase();
+    const filtered = staticValueItems.map(
+      (item: { label: any; }) => item.label
+    ).filter((item: string) =>
+      item.toLowerCase().includes(query)
+    );
+    setFilteredStaticItems(filtered);
+  };
+
+  // Set the filters whenever selectionStaticValues change
+  useEffect(() => {
+    // console.log(`Selection Static Values changed:`, selectionStaticValues);
+    if (selectionStaticValues.length > 0) {
+      const filter: SqlExpression = {
+        variableName: dashboardVariable.variableName,
+        // @ts-ignore
+        operator: '$in',
+        value: selectionStaticValues
+      };
+      setFilters(prev => {
+        // Remove any existing filter for this variable and replace with the new one
+        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);
+        return [...filtered, filter];
+      });
+    }
+    // else {
+    //   // If no values selected, remove the filter for this variable
+    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+    // }
+  }, [selectionStaticValues]);
+
+  useEffect(() => {
+    setSelectionStaticValues([]);
+  }, [clearSignal]);
+
+  return (
+    <AutoComplete
+      value={selectionStaticValues}
+      suggestions={filteredStaticItems}
+      completeMethod={searchStatic}
+      onChange={(e: AutoCompleteChangeEvent) => setSelectionStaticValues(e.value)}
+      multiple
+      dropdown
+      placeholder={dashboardVariable.variableName}
+      className="solid-standard-autocomplete"
+      style={{ minHeight: 38 }}
+    />
+  );
+}
+
+export interface SolidDashboardVariableProps {
+  dashboardVariables: any;
+  filters: SqlExpression[];
+  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+}
+
+const SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboardVariables, filters, setFilters }) => {
+  const [clearSignal, setClearSignal] = useState(0);
+  const dashboardVariableComponents = dashboardVariables.map((dashboardVariable: any, index: number) => {
+    switch (dashboardVariable.variableType) {
+      case 'date':
+        return <DateVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      case 'selectionStatic':
+        return <SelectionStaticVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      case 'selectionDynamic':
+        return <SelectionDynamicVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;
+      default:
+        return null;
+    }
+  });
+
+  const clearAllFilters = () => {
+    setFilters([]);
+    setClearSignal(prev => prev + 1);  // triggers children to reset
+  };
+
+  // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...
+  return (
+    <div className="flex align-items-center gap-3">
+      {dashboardVariableComponents}
+      {filters.length > 0 && (
+        <Button
+          onClick={clearAllFilters}
+          size="small"
+          outlined
+          // severity="info"
+          icon="pi pi-filter-slash"
+        />
+      )}
+    </div>
+  );
+}
+
+export default SolidDashboardVariable;
+

package/dist/components/core/dashboard/SolidQuestionRenderer.d.ts

@@ -0,0 +1,9 @@
+import { SqlExpression } from '../../../types/solid-core';
+type SolidQuestionRendererProps = {
+    question: any;
+    filters: SqlExpression[];
+    isPreview: boolean;
+};
+export declare const SolidQuestionRenderer: ({ question, filters, isPreview }: SolidQuestionRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidQuestionRenderer.d.ts.map

package/dist/components/core/dashboard/SolidQuestionRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAS1D,KAAK,0BAA0B,GAAG;IAC9B,QAAQ,EAAE,GAAG,CAAC;IACd,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAQF,eAAO,MAAM,qBAAqB,qCAAmD,0BAA0B,4CAsD9G,CAAA"}

package/dist/components/core/dashboard/SolidQuestionRenderer.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import { Message } from 'primereact/message';
+import { MeterGroup } from 'primereact/metergroup';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import qs from 'qs';
+import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
+import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
+import styles from './SolidDashboard.module.css';
+export var SolidQuestionRenderer = function (_a) {
+    var _b, _c, _d, _e;
+    var question = _a.question, _f = _a.filters, filters = _f === void 0 ? [] : _f, _g = _a.isPreview, isPreview = _g === void 0 ? false : _g;
+    if (!question) {
+        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(Message, { text: "Preview Unavailable" }) }));
+    }
+    var textAlign = (_b = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _b !== void 0 ? _b : 'start';
+    if (!question) {
+        return (_jsx(_Fragment, { children: _jsx(Message, { text: "Preview Unavailable" }) }));
+    }
+    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
+    // load the question data.
+    var queryParams = qs.stringify({
+        isPreview: isPreview,
+        filters: filters,
+    });
+    var _h = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _h.data, questionDataIsLoading = _h.isLoading, questionDataError = _h.error;
+    // console.log(`Question data: `); console.log(questionData);
+    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);
+    // console.log(`Question data error: `); console.log(questionDataError);
+    var options = JSON.parse(question === null || question === void 0 ? void 0 : question.chartOptions);
+    // const kpi = questionData.data.kpi;
+    // const visualizationData = questionData.data.visualizationData;
+    // const visualizedAs = question.data.visualisedAs;
+    return (_jsxs(_Fragment, { children: [questionDataIsLoading && _jsx(ProgressSpinner, {}), !questionDataIsLoading &&
+                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4 h-full"), children: [_jsx("div", { className: "font-medium text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: question.name }), _jsx("div", { className: "mt-2 font-bold text-3xl text-".concat(textAlign, " ").concat(styles.SolidChartTitle), children: questionData.data.kpi }), _jsxs("div", { className: 'mt-3', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && _jsx(MeterGroup, { values: questionData.data.visualizationData.dataset, max: (_e = (_d = (_c = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _c === void 0 ? void 0 : _c.visualizationData) === null || _d === void 0 ? void 0 : _d.dataset) === null || _e === void 0 ? void 0 : _e.reduce(function (total, item) { return total + item.value; }, 0) }), question.visualisedAs === 'prime-datatable' && _jsx(PrimeReactDatatableRenderer, { options: options, visualizationData: questionData.data.visualizationData })] })] })] }));
+};
+//# sourceMappingURL=SolidQuestionRenderer.js.map

package/dist/components/core/dashboard/SolidQuestionRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/components/core/dashboard/SolidQuestionRenderer.tsx

@@ -0,0 +1,78 @@
+
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import { SqlExpression } from '../../../types/solid-core';
+import { Message } from 'primereact/message';
+import { MeterGroup } from 'primereact/metergroup';
+import { ProgressSpinner } from 'primereact/progressspinner';
+import qs from 'qs';
+import { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';
+import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
+import styles from './SolidDashboard.module.css';
+
+type SolidQuestionRendererProps = {
+    question: any;
+    filters: SqlExpression[];
+    isPreview: boolean;
+};
+
+type DataItem= {
+    value: number;
+    label?: string | HTMLElement;
+    color?: string;
+}
+
+export const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {
+    if (!question) {
+        return (
+            <div className={`${styles.SolidChartCardWrapper} p-4`}>
+                <Message text="Preview Unavailable" />
+            </div>
+        );
+    }
+
+    const textAlign = question?.textAlign ?? 'start'
+    if (!question) {
+        return (
+            <>
+                <Message text="Preview Unavailable" />
+            </>
+        )
+    }
+    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);
+
+    // load the question data.
+    const queryParams = qs.stringify(
+        {
+            isPreview,
+            filters,
+        },
+        // ensures proper handling of arrays
+        // { arrayFormat: 'indices' }
+    );
+    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });
+
+
+    // console.log(`Question data: `); console.log(questionData);
+    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);
+    // console.log(`Question data error: `); console.log(questionDataError);
+    const options = JSON.parse(question?.chartOptions);
+    // const kpi = questionData.data.kpi;
+    // const visualizationData = questionData.data.visualizationData;
+    // const visualizedAs = question.data.visualisedAs;
+    return (
+        <>
+            {questionDataIsLoading && <ProgressSpinner />}
+            {!questionDataIsLoading &&
+            <div className={`${styles.SolidChartCardWrapper} p-4 h-full`}>
+                <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>
+                <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>
+                <div className='mt-3'>
+                    {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs}  />}
+                    {question.visualisedAs === 'prime-meter-group' && <MeterGroup values={questionData.data.visualizationData.dataset}  max={questionData?.data?.visualizationData?.dataset?.reduce((total: number, item: DataItem) => total + item.value, 0)}/>}
+                    {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}
+                </div>
+            </div>
+    }
+        </>
+    )
+}

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.d.ts

@@ -0,0 +1,9 @@
+import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+type ChartJsRendererProps = {
+    options: any;
+    visualizationData: any;
+    visualizedAs: 'bar' | 'line' | 'pie';
+};
+export declare const ChartJsRenderer: ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChartJsRenderer.d.ts.map

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,oEAAoE,CAAC;AAG5E,KAAK,oBAAoB,GAAG;IACxB,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;IACvB,YAAY,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,CAAC;CACxC,CAAC;AACF,eAAO,MAAM,eAAe,iDAAkD,oBAAoB,4CAQjG,CAAA"}

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Bar, Line, Pie } from "react-chartjs-2";
+export var ChartJsRenderer = function (_a) {
+    var options = _a.options, visualizationData = _a.visualizationData, visualizedAs = _a.visualizedAs;
+    return (_jsxs(_Fragment, { children: [visualizedAs === 'bar' && _jsx(Bar, { options: options, data: visualizationData }), visualizedAs === 'line' && _jsx(Line, { options: options, data: visualizationData }), visualizedAs === 'pie' && _jsx(Pie, { data: visualizationData })] }));
+};
+//# sourceMappingURL=ChartJsRenderer.js.map

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartJsRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":";AACA,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAAkE;QAAhE,OAAO,aAAA,EAAE,iBAAiB,uBAAA,EAAE,YAAY,kBAAA;IACtE,OAAO,CACH,8BACK,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,GAAI,EAC5E,YAAY,KAAK,MAAM,IAAI,KAAC,IAAI,IAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,iBAAiB,GAAI,EAC9E,YAAY,KAAK,KAAK,IAAI,KAAC,GAAG,IAAC,IAAI,EAAE,iBAAiB,GAAI,IAC5D,CACN,CAAC;AACN,CAAC,CAAA"}

package/dist/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx

@@ -0,0 +1,18 @@
+
+import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Bar, Line, Pie } from "react-chartjs-2";
+
+type ChartJsRendererProps = {
+    options: any;
+    visualizationData: any;
+    visualizedAs: 'bar' | 'line' | 'pie';
+};
+export const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {
+    return (
+        <>
+            {visualizedAs === 'bar' && <Bar options={options} data={visualizationData} />}
+            {visualizedAs === 'line' && <Line options={options} data={visualizationData} />}
+            {visualizedAs === 'pie' && <Pie data={visualizationData} />}
+        </>
+    );
+}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.d.ts

@@ -0,0 +1,7 @@
+type PrimeReactDatatableRendererProps = {
+    options: any;
+    visualizationData: any;
+};
+declare const PrimeReactDatatableRenderer: ({ options, visualizationData }: PrimeReactDatatableRendererProps) => import("react/jsx-runtime").JSX.Element;
+export default PrimeReactDatatableRenderer;
+//# sourceMappingURL=PrimeReactDatatableRenderer.d.ts.map

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeReactDatatableRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":"AAMA,KAAK,gCAAgC,GAAG;IACpC,OAAO,EAAE,GAAG,CAAC;IACb,iBAAiB,EAAE,GAAG,CAAC;CAC1B,CAAA;AAED,QAAA,MAAM,2BAA2B,mCAAoC,gCAAgC,4CAwCpG,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { ProgressSpinner } from "primereact/progressspinner";
+var PrimeReactDatatableRenderer = function (_a) {
+    // {
+    //   "size": "small",
+    //   "showGridlines": true,
+    //   "stripedRows": true,
+    //   "pagination": {
+    //     "rows": 10,
+    //     "rowsPerPageOptions": [5, 10, 25, 50]
+    //   }
+    // }    
+    var _b, _c;
+    var options = _a.options, visualizationData = _a.visualizationData;
+    var size = (options === null || options === void 0 ? void 0 : options.size) || 'small';
+    var showGridlines = (options === null || options === void 0 ? void 0 : options.showGridLines) || false;
+    var stripedRows = (options === null || options === void 0 ? void 0 : options.stripedRows) || false;
+    var paginator = (options === null || options === void 0 ? void 0 : options.pagination) || false;
+    var rows = ((_b = options === null || options === void 0 ? void 0 : options.pagination) === null || _b === void 0 ? void 0 : _b.rows) || 10;
+    var rowsPerPageOptions = ((_c = options === null || options === void 0 ? void 0 : options.pagination) === null || _c === void 0 ? void 0 : _c.rowsPerPageOptions) || [5, 10, 25, 50];
+    if (!visualizationData) {
+        return (_jsx(_Fragment, { children: _jsx(ProgressSpinner, {}) }));
+    }
+    var columns = visualizationData.columns;
+    var data = visualizationData.rows;
+    return (_jsx(_Fragment, { children: _jsx(DataTable, { value: data, tableStyle: { minWidth: '50rem' }, size: size, showGridlines: showGridlines, stripedRows: stripedRows, paginator: paginator, rows: rows, rowsPerPageOptions: rowsPerPageOptions, children: columns.map(function (col, i) { return (_jsx(Column, { field: col.field, header: col.header }, col.field)); }) }) }));
+};
+export default PrimeReactDatatableRenderer;
+//# sourceMappingURL=PrimeReactDatatableRenderer.js.map

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrimeReactDatatableRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":";AACA,+EAA+E;AAC/E,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAO7D,IAAM,2BAA2B,GAAG,UAAC,EAAgE;IACjG,IAAI;IACJ,qBAAqB;IACrB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,kBAAkB;IAClB,4CAA4C;IAC5C,MAAM;IACN,QAAQ;;QAT2B,OAAO,aAAA,EAAE,iBAAiB,uBAAA;IAW7D,IAAM,IAAI,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,KAAI,OAAO,CAAC;IACtC,IAAM,aAAa,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,aAAa,KAAI,KAAK,CAAC;IACtD,IAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,KAAK,CAAC;IAClD,IAAM,SAAS,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,KAAI,KAAK,CAAC;IAC/C,IAAM,IAAI,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,IAAI,KAAI,EAAE,CAAC;IAC7C,IAAM,kBAAkB,GAAG,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,0CAAE,kBAAkB,KAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAEtF,IAAI,CAAC,iBAAiB,EAAE;QACpB,OAAO,CACH,4BACI,KAAC,eAAe,KAAG,GACpB,CACN,CAAC;KACL;IAED,IAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;IAC1C,IAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC;IAEpC,OAAO,CACH,4BACI,KAAC,SAAS,IAAC,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,kBAAkB,EAAE,kBAAkB,YAE/L,OAAO,CAAC,GAAG,CAAC,UAAC,GAAQ,EAAE,CAAS,IAAK,OAAA,CACjC,KAAC,MAAM,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,IAA/C,GAAG,CAAC,KAAK,CAA0C,CACnE,EAFoC,CAEpC,CAAC,GAEE,GACb,CACN,CAAA;AACL,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC"}

package/dist/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx

@@ -0,0 +1,54 @@
+
+// import "../../../../components/core/dashboard/chart-renderers/init-chartjs";
+import { Column } from "primereact/column";
+import { DataTable } from "primereact/datatable";
+import { ProgressSpinner } from "primereact/progressspinner";
+
+type PrimeReactDatatableRendererProps = {
+    options: any;
+    visualizationData: any;
+}
+
+const PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactDatatableRendererProps) => {
+    // {
+    //   "size": "small",
+    //   "showGridlines": true,
+    //   "stripedRows": true,
+    //   "pagination": {
+    //     "rows": 10,
+    //     "rowsPerPageOptions": [5, 10, 25, 50]
+    //   }
+    // }    
+
+    const size = options?.size || 'small';
+    const showGridlines = options?.showGridLines || false;
+    const stripedRows = options?.stripedRows || false;
+    const paginator = options?.pagination || false;
+    const rows = options?.pagination?.rows || 10;
+    const rowsPerPageOptions = options?.pagination?.rowsPerPageOptions || [5, 10, 25, 50];
+
+    if (!visualizationData) {
+        return (
+            <>
+                <ProgressSpinner />
+            </>
+        );
+    }
+
+    const columns = visualizationData.columns;
+    const data = visualizationData.rows;
+
+    return (
+        <>
+            <DataTable value={data} tableStyle={{ minWidth: '50rem' }} size={size} showGridlines={showGridlines} stripedRows={stripedRows} paginator={paginator} rows={rows} rowsPerPageOptions={rowsPerPageOptions} >
+                {
+                    columns.map((col: any, i: number) => (
+                        <Column key={col.field} field={col.field} header={col.header} />
+                    ))
+                }
+            </DataTable>
+        </>
+    )
+};
+
+export default PrimeReactDatatableRenderer;

package/dist/components/core/dashboard/chart-renderers/init-chartjs.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=init-chartjs.d.ts.map

package/dist/components/core/dashboard/chart-renderers/init-chartjs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init-chartjs.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/init-chartjs.ts"],"names":[],"mappings":""}

package/dist/components/core/dashboard/chart-renderers/init-chartjs.js

@@ -0,0 +1,4 @@
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, ArcElement, } from 'chart.js';
+// Only register once globally
+ChartJS.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Title, Tooltip, Legend, ArcElement);
+//# sourceMappingURL=init-chartjs.js.map

package/dist/components/core/dashboard/chart-renderers/init-chartjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"init-chartjs.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/init-chartjs.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,IAAI,OAAO,EAChB,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,YAAY,EACZ,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,GACb,MAAM,UAAU,CAAC;AAElB,8BAA8B;AAC9B,OAAO,CAAC,QAAQ,CACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,YAAY,EACZ,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,CACb,CAAC"}

package/dist/components/core/dashboard/chart-renderers/init-chartjs.ts

@@ -0,0 +1,25 @@
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+} from 'chart.js';
+
+// Only register once globally
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    LineElement,
+    PointElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement
+);

package/dist/components/core/dashboard/dashboard-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getNumberOfInputs: (matchMode: any) => number | null;
+//# sourceMappingURL=dashboard-utils.d.ts.map

package/dist/components/core/dashboard/dashboard-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-utils.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/dashboard-utils.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,iBAAiB,cAAe,GAAG,KAAG,MAAM,GAAG,IAsB3D,CAAA"}

package/dist/components/core/dashboard/dashboard-utils.js

@@ -0,0 +1,38 @@
+// export enum RuleMatchMode {
+//     EQUALS = '$equals',
+//     NOT_EQUALS = '$notEquals',
+//     CONTAINS = '$contains',
+//     NOT_CONTAINS = '$notContains',
+//     STARTS_WITH = '$startsWith',
+//     ENDS_WITH = '$endsWith',
+//     IN = '$in',
+//     NOT_IN = '$notIn',
+//     BETWEEN = '$between',
+//     LT = '$lt',
+//     LTE = '$lte',
+//     GT = '$gt',
+//     GTE = '$gte'
+// }
+export var getNumberOfInputs = function (matchMode) {
+    switch (matchMode) {
+        case '$between':
+            return 2;
+        case '$in':
+        case '$notIn':
+            return null;
+        case '$startsWith':
+        case '$contains':
+        case '$notContains':
+        case '$endsWith':
+        case '$equals':
+        case '$notEquals':
+        case '$lt':
+        case '$lte':
+        case '$gt':
+        case '$gte':
+            return 1;
+        default:
+            return 1; // Default to single input if no specific match is found
+    }
+};
+//# sourceMappingURL=dashboard-utils.js.map

package/dist/components/core/dashboard/dashboard-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-utils.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/dashboard-utils.ts"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,0BAA0B;AAC1B,iCAAiC;AACjC,8BAA8B;AAC9B,qCAAqC;AACrC,mCAAmC;AACnC,+BAA+B;AAC/B,kBAAkB;AAClB,yBAAyB;AACzB,4BAA4B;AAC5B,kBAAkB;AAClB,oBAAoB;AACpB,kBAAkB;AAClB,mBAAmB;AACnB,IAAI;AAEJ,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,SAAc;IAE5C,QAAQ,SAAS,EAAE;QACf,KAAK,UAAU;YACX,OAAO,CAAC,CAAC;QACb,KAAK,KAAK,CAAC;QACX,KAAK,QAAQ;YACT,OAAO,IAAI,CAAC;QAChB,KAAK,aAAa,CAAC;QACnB,KAAK,WAAW,CAAC;QACjB,KAAK,cAAc,CAAC;QACpB,KAAK,WAAW,CAAC;QACjB,KAAK,SAAS,CAAC;QACf,KAAK,YAAY,CAAC;QAClB,KAAK,KAAK,CAAC;QACX,KAAK,MAAM,CAAC;QACZ,KAAK,KAAK,CAAC;QACX,KAAK,MAAM;YACP,OAAO,CAAC,CAAC;QACb;YACI,OAAO,CAAC,CAAC,CAAC,wDAAwD;KACzE;AACL,CAAC,CAAA"}