@solidstarters/solid-core-ui 1.1.210 → 1.1.212

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

@@ -0,0 +1,256 @@
+"use client";
+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.map

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AASnD,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"}
+{"version":3,"file":"SolidQuestionRenderer.d.ts","sourceRoot":"./","sources":["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

@@ -8,31 +8,29 @@ 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;
+export const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }) => {
     if (!question) {
-        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(Message, { text: "Preview Unavailable" }) }));
+        return (_jsx("div", { className: `${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';
+    const textAlign = question?.textAlign ?? '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,
+    const queryParams = qs.stringify({
+        isPreview,
+        filters,
     });
-    var _h = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _h.data, questionDataIsLoading = _h.isLoading, questionDataError = _h.error;
+    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);
-    var options = JSON.parse(question === null || question === void 0 ? void 0 : question.chartOptions);
+    const options = JSON.parse(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 })] })] })] }));
+                _jsxs("div", { className: `${styles.SolidChartCardWrapper} p-4 h-full`, children: [_jsx("div", { className: `font-medium text-${textAlign} ${styles.SolidChartTitle}`, children: question.name }), _jsx("div", { className: `mt-2 font-bold text-3xl text-${textAlign} ${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: questionData?.data?.visualizationData?.dataset?.reduce((total, item) => 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

@@ -1 +1 @@
-{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SolidQuestionRenderer.js","sourceRoot":"./","sources":["components/core/dashboard/SolidQuestionRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { Message } from 'primereact/message';\nimport { MeterGroup } from 'primereact/metergroup';\nimport { ProgressSpinner } from 'primereact/progressspinner';\nimport qs from 'qs';\nimport { ChartJsRenderer } from './chart-renderers/ChartJsRenderer';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport styles from './SolidDashboard.module.css';\n\ntype SolidQuestionRendererProps = {\n    question: any;\n    filters: SqlExpression[];\n    isPreview: boolean;\n};\n\ntype DataItem= {\n    value: number;\n    label?: string | HTMLElement;\n    color?: string;\n}\n\nexport const SolidQuestionRenderer = ({ question, filters = [], isPreview = false }: SolidQuestionRendererProps) => {\n    if (!question) {\n        return (\n            <div className={`${styles.SolidChartCardWrapper} p-4`}>\n                <Message text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <>\n                <Message text=\"Preview Unavailable\" />\n            </>\n        )\n    }\n    // console.log(`Rendering BarChartRenderer using question id: ${question.id}`);\n\n    // load the question data.\n    const queryParams = qs.stringify(\n        {\n            isPreview,\n            filters,\n        },\n        // ensures proper handling of arrays\n        // { arrayFormat: 'indices' }\n    );\n    const { data: questionData, isLoading: questionDataIsLoading, error: questionDataError } = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams });\n\n\n    // console.log(`Question data: `); console.log(questionData);\n    // console.log(`Question data is loading: `); console.log(questionDataIsLoading);\n    // console.log(`Question data error: `); console.log(questionDataError);\n    const options = JSON.parse(question?.chartOptions);\n    // const kpi = questionData.data.kpi;\n    // const visualizationData = questionData.data.visualizationData;\n    // const visualizedAs = question.data.visualisedAs;\n    return (\n        <>\n            {questionDataIsLoading && <ProgressSpinner />}\n            {!questionDataIsLoading &&\n            <div className={`${styles.SolidChartCardWrapper} p-4 h-full`}>\n                <div className={`font-medium text-${textAlign} ${styles.SolidChartTitle}`}>{question.name}</div>\n                <div className={`mt-2 font-bold text-3xl text-${textAlign} ${styles.SolidChartTitle}`}>{questionData.data.kpi}</div>\n                <div className='mt-3'>\n                    {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs}  />}\n                    {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)}/>}\n                    {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                </div>\n            </div>\n    }\n        </>\n    )\n}"]}

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

@@ -0,0 +1,78 @@
+"use client"
+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.map

@@ -1 +1 @@
-{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,0DAA0D,CAAC;AAGlE,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"}
+{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"./","sources":["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

@@ -2,8 +2,7 @@
 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;
+export const ChartJsRenderer = ({ options, visualizationData, 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

@@ -1 +1 @@
-{"version":3,"file":"ChartJsRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,0DAA0D,CAAC;AAClE,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"}
+{"version":3,"file":"ChartJsRenderer.js","sourceRoot":"./","sources":["components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AACZ,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAOjD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAwB,EAAE,EAAE;IAClG,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","sourcesContent":["\"use client\"\nimport \"../../../../components/core/dashboard/chart-renderers/init-chartjs\";\nimport { Bar, Line, Pie } from \"react-chartjs-2\";\n\ntype ChartJsRendererProps = {\n    options: any;\n    visualizationData: any;\n    visualizedAs: 'bar' | 'line' | 'pie';\n};\nexport const ChartJsRenderer = ({ options, visualizationData, visualizedAs }: ChartJsRendererProps) => {\n    return (\n        <>\n            {visualizedAs === 'bar' && <Bar options={options} data={visualizationData} />}\n            {visualizedAs === 'line' && <Line options={options} data={visualizationData} />}\n            {visualizedAs === 'pie' && <Pie data={visualizationData} />}\n        </>\n    );\n}"]}

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

@@ -0,0 +1,18 @@
+"use client"
+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.map

@@ -1 +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"}
+{"version":3,"file":"PrimeReactDatatableRenderer.d.ts","sourceRoot":"./","sources":["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

@@ -4,7 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Column } from "primereact/column";
 import { DataTable } from "primereact/datatable";
 import { ProgressSpinner } from "primereact/progressspinner";
-var PrimeReactDatatableRenderer = function (_a) {
+const PrimeReactDatatableRenderer = ({ options, visualizationData }) => {
     // {
     //   "size": "small",
     //   "showGridlines": true,
@@ -14,20 +14,18 @@ var PrimeReactDatatableRenderer = function (_a) {
     //     "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];
+    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 (_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)); }) }) }));
+    const columns = visualizationData.columns;
+    const 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((col, i) => (_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

@@ -1 +1 @@
-{"version":3,"file":"PrimeReactDatatableRenderer.js","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,qEAAqE;AACrE,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"}
+{"version":3,"file":"PrimeReactDatatableRenderer.js","sourceRoot":"./","sources":["components/core/dashboard/chart-renderers/PrimeReactDatatableRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,+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,MAAM,2BAA2B,GAAG,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAoC,EAAE,EAAE;IACrG,IAAI;IACJ,qBAAqB;IACrB,2BAA2B;IAC3B,yBAAyB;IACzB,oBAAoB;IACpB,kBAAkB;IAClB,4CAA4C;IAC5C,MAAM;IACN,QAAQ;IAER,MAAM,IAAI,GAAG,OAAO,EAAE,IAAI,IAAI,OAAO,CAAC;IACtC,MAAM,aAAa,GAAG,OAAO,EAAE,aAAa,IAAI,KAAK,CAAC;IACtD,MAAM,WAAW,GAAG,OAAO,EAAE,WAAW,IAAI,KAAK,CAAC;IAClD,MAAM,SAAS,GAAG,OAAO,EAAE,UAAU,IAAI,KAAK,CAAC;IAC/C,MAAM,IAAI,GAAG,OAAO,EAAE,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC;IAC7C,MAAM,kBAAkB,GAAG,OAAO,EAAE,UAAU,EAAE,kBAAkB,IAAI,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,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,CAAC;IAC1C,MAAM,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,CAAC,GAAQ,EAAE,CAAS,EAAE,EAAE,CAAC,CACjC,KAAC,MAAM,IAAiB,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,IAA/C,GAAG,CAAC,KAAK,CAA0C,CACnE,CAAC,GAEE,GACb,CACN,CAAA;AACL,CAAC,CAAC;AAEF,eAAe,2BAA2B,CAAC","sourcesContent":["\"use client\";\n// import \"../../../../components/core/dashboard/chart-renderers/init-chartjs\";\nimport { Column } from \"primereact/column\";\nimport { DataTable } from \"primereact/datatable\";\nimport { ProgressSpinner } from \"primereact/progressspinner\";\n\ntype PrimeReactDatatableRendererProps = {\n    options: any;\n    visualizationData: any;\n}\n\nconst PrimeReactDatatableRenderer = ({ options, visualizationData }: PrimeReactDatatableRendererProps) => {\n    // {\n    //   \"size\": \"small\",\n    //   \"showGridlines\": true,\n    //   \"stripedRows\": true,\n    //   \"pagination\": {\n    //     \"rows\": 10,\n    //     \"rowsPerPageOptions\": [5, 10, 25, 50]\n    //   }\n    // }    \n\n    const size = options?.size || 'small';\n    const showGridlines = options?.showGridLines || false;\n    const stripedRows = options?.stripedRows || false;\n    const paginator = options?.pagination || false;\n    const rows = options?.pagination?.rows || 10;\n    const rowsPerPageOptions = options?.pagination?.rowsPerPageOptions || [5, 10, 25, 50];\n\n    if (!visualizationData) {\n        return (\n            <>\n                <ProgressSpinner />\n            </>\n        );\n    }\n\n    const columns = visualizationData.columns;\n    const data = visualizationData.rows;\n\n    return (\n        <>\n            <DataTable value={data} tableStyle={{ minWidth: '50rem' }} size={size} showGridlines={showGridlines} stripedRows={stripedRows} paginator={paginator} rows={rows} rowsPerPageOptions={rowsPerPageOptions} >\n                {\n                    columns.map((col: any, i: number) => (\n                        <Column key={col.field} field={col.field} header={col.header} />\n                    ))\n                }\n            </DataTable>\n        </>\n    )\n};\n\nexport default PrimeReactDatatableRenderer;"]}

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

@@ -0,0 +1,54 @@
+"use client";
+// 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.map

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

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

@@ -1 +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"}
+{"version":3,"file":"init-chartjs.js","sourceRoot":"./","sources":["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","sourcesContent":["import {\n    Chart as ChartJS,\n    CategoryScale,\n    LinearScale,\n    BarElement,\n    LineElement,\n    PointElement,\n    Title,\n    Tooltip,\n    Legend,\n    ArcElement,\n} from 'chart.js';\n\n// Only register once globally\nChartJS.register(\n    CategoryScale,\n    LinearScale,\n    BarElement,\n    LineElement,\n    PointElement,\n    Title,\n    Tooltip,\n    Legend,\n    ArcElement\n);"]}

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.map

@@ -1 +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"}
+{"version":3,"file":"dashboard-utils.d.ts","sourceRoot":"./","sources":["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

@@ -13,7 +13,7 @@
 //     GT = '$gt',
 //     GTE = '$gte'
 // }
-export var getNumberOfInputs = function (matchMode) {
+export const getNumberOfInputs = (matchMode) => {
     switch (matchMode) {
         case '$between':
             return 2;