@solidxai/core-ui 0.1.12-beta.5 → 0.1.12-beta.6

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

@@ -0,0 +1,171 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import styles from './SolidDashboard.module.css';
+import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from "../../shad-cn-ui";
+export var DateVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.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
+    var defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue;
+    var defaultDatesArray = JSON.parse(defaultDatesString || '[]');
+    // Map the defaultDatesArray to Date objects
+    var defaultDates = defaultDatesArray.length === 2 ? [
+        new Date(defaultDatesArray[0]),
+        new Date(defaultDatesArray[1])
+    ] : null;
+    var _b = useState(defaultDates), dates = _b[0], setDates = _b[1];
+    useEffect(function () {
+        setDates(null); // reset UI
+    }, [clearSignal]);
+    return (_jsxs("div", { className: "flex align-items-center ".concat(styles.SolidDashboardDateRangeFilterWrapper), children: [_jsx(SolidDatePicker, { selectsRange: true, startDate: dates ? dates[0] : null, endDate: dates ? dates[1] : null, onChange: function (next) {
+                    var newDates = next;
+                    setDates(newDates);
+                    if (newDates && newDates[0] && newDates[1]) {
+                        var filter_1 = {
+                            variableName: dashboardVariable.variableName,
+                            // @ts-ignore
+                            operator: '$between',
+                            value: [
+                                newDates[0].toISOString().split('T')[0],
+                                newDates[1].toISOString().split('T')[0]
+                            ]
+                        };
+                        setFilters(function (prev) {
+                            // Remove any existing dashboardDate filter and replace with the new one
+                            // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');
+                            return [filter_1];
+                        });
+                    }
+                }, className: styles.SolidDashboardDateRangeFilter, inputClassName: "h-3rem w-full" }), _jsx("div", { className: "px-2", children: _jsx(SolidIcon, { name: "si-calendar", className: "opacity-50", "aria-hidden": true }) })] }));
+};
+export var SelectionDynamicVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
+    // Initialize the selection dynamic values state
+    // Pick the values from defaultValue if present, for default operator $in
+    var defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+    var defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');
+    // Selection Dynamic Values
+    var _b = useState(defaultDynamicValues), selectionDynamicValues = _b[0], setSelectionDynamicValues = _b[1];
+    var _c = useState([]), filteredItems = _c[0], setFilteredItems = _c[1];
+    // Using rtk query to fetch dynamic values based on variableId
+    var variableId = dashboardVariable.id;
+    var queryString = "variableId=".concat(variableId);
+    var _d = useGetDashboardVariableSelectionDynamicValuesQuery(queryString), dynamicValues = _d.data, isLoading = _d.isLoading, isError = _d.isError;
+    var allItems = dynamicValues ? dynamicValues : [];
+    // Dynamic search
+    var searchDynamic = function (event) {
+        var query = event.query.toLowerCase();
+        var filtered = allItems.map(function (item) { return item.label; }).filter(function (item) {
+            return item.toLowerCase().includes(query);
+        });
+        setFilteredItems(filtered);
+    };
+    // Set the filters whenever selectionDynamicValues change
+    useEffect(function () {
+        console.log("Selection Dynamic Values changed:", selectionDynamicValues);
+        if (selectionDynamicValues.length > 0) {
+            var filter_2 = {
+                variableName: dashboardVariable.variableName,
+                // @ts-ignore
+                operator: '$in',
+                value: selectionDynamicValues
+            };
+            setFilters(function (prev) {
+                // Remove any existing filter for this variable and replace with the new one
+                var filtered = prev.filter(function (f) { return f.variableName !== dashboardVariable.variableName; });
+                return __spreadArray(__spreadArray([], filtered, true), [filter_2], false);
+            });
+        }
+        // else {
+        //   // If no values selected, remove the filter for this variable
+        //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+        // }
+    }, [selectionDynamicValues]);
+    useEffect(function () {
+        setSelectionDynamicValues([]);
+    }, [clearSignal]);
+    return (_jsxs(_Fragment, { children: [isLoading && _jsx(SolidSpinner, {}), isError && _jsx("div", { children: "Error loading values" }), !isLoading && !isError &&
+                _jsx(SolidAutocomplete, { value: selectionDynamicValues, suggestions: filteredItems, completeMethod: searchDynamic, onChange: function (e) {
+                        setSelectionDynamicValues(e.value);
+                    }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } })] }));
+};
+export var SelectionStaticVariableFilterComponent = function (_a) {
+    var setFilters = _a.setFilters, clearSignal = _a.clearSignal, dashboardVariable = _a.dashboardVariable;
+    // Initialize the selection static values state
+    // Pick the values from defaultValue if present, for default operator $in
+    var defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;
+    var defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');
+    // Selection Static Values
+    var _b = useState(defaultStaticValues), selectionStaticValues = _b[0], setSelectionStaticValues = _b[1];
+    var _c = useState([]), filteredStaticItems = _c[0], setFilteredStaticItems = _c[1];
+    var staticValues = JSON.parse(dashboardVariable.selectionStaticValues || '[]') || [];
+    // The values are in the format val:label, we need to extract the labels
+    var staticValueItems = staticValues.map(function (val) { return ({ value: val.split(':')[0], label: val.split(':')[1] }); });
+    // Static search
+    var searchStatic = function (event) {
+        var query = event.query.toLowerCase();
+        var filtered = staticValueItems.map(function (item) { return item.label; }).filter(function (item) {
+            return item.toLowerCase().includes(query);
+        });
+        setFilteredStaticItems(filtered);
+    };
+    // Set the filters whenever selectionStaticValues change
+    useEffect(function () {
+        // console.log(`Selection Static Values changed:`, selectionStaticValues);
+        if (selectionStaticValues.length > 0) {
+            var filter_3 = {
+                variableName: dashboardVariable.variableName,
+                // @ts-ignore
+                operator: '$in',
+                value: selectionStaticValues
+            };
+            setFilters(function (prev) {
+                // Remove any existing filter for this variable and replace with the new one
+                var filtered = prev.filter(function (f) { return f.variableName !== dashboardVariable.variableName; });
+                return __spreadArray(__spreadArray([], filtered, true), [filter_3], false);
+            });
+        }
+        // else {
+        //   // If no values selected, remove the filter for this variable
+        //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));
+        // }
+    }, [selectionStaticValues]);
+    useEffect(function () {
+        setSelectionStaticValues([]);
+    }, [clearSignal]);
+    return (_jsx(SolidAutocomplete, { value: selectionStaticValues, suggestions: filteredStaticItems, completeMethod: searchStatic, onChange: function (e) { return setSelectionStaticValues(e.value); }, multiple: true, dropdown: true, placeholder: dashboardVariable.variableName, className: "solid-standard-autocomplete", style: { minHeight: 38 } }));
+};
+var SolidDashboardVariable = function (_a) {
+    var dashboardVariables = _a.dashboardVariables, filters = _a.filters, setFilters = _a.setFilters;
+    var _b = useState(0), clearSignal = _b[0], setClearSignal = _b[1];
+    var dashboardVariableComponents = dashboardVariables.map(function (dashboardVariable, index) {
+        switch (dashboardVariable.variableType) {
+            case 'date':
+                return _jsx(DateVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            case 'selectionStatic':
+                return _jsx(SelectionStaticVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            case 'selectionDynamic':
+                return _jsx(SelectionDynamicVariableFilterComponent, { setFilters: setFilters, clearSignal: clearSignal, dashboardVariable: dashboardVariable }, index);
+            default:
+                return null;
+        }
+    });
+    var clearAllFilters = function () {
+        setFilters([]);
+        setClearSignal(function (prev) { return 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 (_jsxs("div", { className: "flex align-items-center gap-3", children: [dashboardVariableComponents, filters.length > 0 && (_jsx(SolidButton, { onClick: clearAllFilters, size: "sm", outlined: true, icon: "si si-filter-slash" }))] }));
+};
+export default SolidDashboardVariable;
+//# sourceMappingURL=SolidDashboardVariable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SolidDashboardVariable.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardVariable.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SqlExpression } from \"../../../types/solid-core\";\nimport React, { Dispatch, SetStateAction, useEffect, useState } from \"react\";\nimport styles from './SolidDashboard.module.css';\nimport { useGetDashboardVariableSelectionDynamicValuesQuery } from \"../../../redux/api/dashboardApi\";\nimport { DashboardVariableRecord } from \"./SolidDashboard\";\nimport { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from \"../../shad-cn-ui\";\n\ntype Nullable<T> = T | null;\ntype AutoCompleteChangeEvent = { value: any };\ntype AutoCompleteCompleteEvent = { query: string };\n\n\nexport interface DashboardVariableFilterProps {\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n  clearSignal: number;\n  dashboardVariable: DashboardVariableRecord;\n}\n\ntype DateRange = [Date | null, Date | null] | null;\n\nexport const DateVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the default dates state\n  // If the dashboardVariable has a defaultOperator as Between and a defaultValue as two dates, we can set those as the initial values, otherwise null\n  const defaultDatesString = dashboardVariable.defaultOperator === '$between' && dashboardVariable.defaultValue\n  const defaultDatesArray = JSON.parse(defaultDatesString || '[]');\n  // Map the defaultDatesArray to Date objects\n  const defaultDates: DateRange = defaultDatesArray.length === 2 ? [\n    new Date(defaultDatesArray[0]),\n    new Date(defaultDatesArray[1])\n  ] : null;\n  const [dates, setDates] = useState<DateRange>(defaultDates);\n\n  useEffect(() => {\n    setDates(null);  // reset UI\n  }, [clearSignal]);\n  \n  return (\n    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>\n      <SolidDatePicker\n        selectsRange\n        startDate={dates ? dates[0] : null}\n        endDate={dates ? dates[1] : null}\n        onChange={(next: [Date | null, Date | null] | null) => {\n          const newDates = next;\n          setDates(newDates);\n\n          if (newDates && newDates[0] && newDates[1]) {\n            const filter: SqlExpression = {\n              variableName: dashboardVariable.variableName,\n              // @ts-ignore\n              operator: '$between',\n              value: [\n              newDates[0].toISOString().split('T')[0],\n              newDates[1].toISOString().split('T')[0]\n            ]\n            };\n            setFilters(prev => {\n              // Remove any existing dashboardDate filter and replace with the new one\n              // const filtered = prev.filter(f => f.variableName !== 'dashboardDate');\n              return [filter];\n            });\n          }\n\n        }}\n        className={styles.SolidDashboardDateRangeFilter}\n        inputClassName=\"h-3rem w-full\"\n      />\n      <div className=\"px-2\">\n        <SolidIcon name=\"si-calendar\" className=\"opacity-50\" aria-hidden />\n      </div>\n    </div>\n  )\n}\n\nexport const SelectionDynamicVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection dynamic values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultDynamicValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultDynamicValues = JSON.parse(defaultDynamicValuesString || '[]');\n\n  // Selection Dynamic Values\n  const [selectionDynamicValues, setSelectionDynamicValues] = useState<string[]>(defaultDynamicValues);\n  const [filteredItems, setFilteredItems] = useState<string[]>([]);\n\n  // Using rtk query to fetch dynamic values based on variableId\n  const variableId = dashboardVariable.id;\n  const queryString = `variableId=${variableId}`;\n  const { data: dynamicValues, isLoading, isError } = useGetDashboardVariableSelectionDynamicValuesQuery(queryString);\n\n  const allItems = dynamicValues ? dynamicValues : [];\n\n  // Dynamic search\n  const searchDynamic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = allItems.map(item => item.label).filter(item =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredItems(filtered);\n  };\n\n  // Set the filters whenever selectionDynamicValues change\n  useEffect(() => {\n    console.log(`Selection Dynamic Values changed:`, selectionDynamicValues);\n    if (selectionDynamicValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionDynamicValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionDynamicValues]);\n\n  useEffect(() => {\n    setSelectionDynamicValues([]);\n  }, [clearSignal]);\n\n  return (\n    <>\n      {isLoading && <SolidSpinner />}\n      {isError && <div>Error loading values</div>}\n      {!isLoading && !isError &&\n        <SolidAutocomplete\n          value={selectionDynamicValues}\n          suggestions={filteredItems}\n          completeMethod={searchDynamic}\n          onChange={(e: AutoCompleteChangeEvent) => {\n            setSelectionDynamicValues(e.value)\n          }}\n          multiple\n          dropdown\n          placeholder={dashboardVariable.variableName}\n          className=\"solid-standard-autocomplete\"\n          style={{ minHeight: 38 }}\n        />\n      }\n    </>\n  );\n}\n\nexport const SelectionStaticVariableFilterComponent: React.FC<DashboardVariableFilterProps> = ({ setFilters, clearSignal, dashboardVariable }) => {\n  // Initialize the selection static values state\n  // Pick the values from defaultValue if present, for default operator $in\n  const defaultStaticValuesString = dashboardVariable.defaultOperator === '$in' && dashboardVariable.defaultValue;\n  const defaultStaticValues = JSON.parse(defaultStaticValuesString || '[]');\n\n  // Selection Static Values\n  const [selectionStaticValues, setSelectionStaticValues] = useState<string[]>(defaultStaticValues);\n  const [filteredStaticItems, setFilteredStaticItems] = useState<string[]>([]);\n  const staticValues = JSON.parse(dashboardVariable.selectionStaticValues || '[]') || [];\n\n  // The values are in the format val:label, we need to extract the labels\n  const staticValueItems = staticValues.map((val: any) => ({ value: val.split(':')[0], label: val.split(':')[1] }));\n\n  // Static search\n  const searchStatic = (event: AutoCompleteCompleteEvent) => {\n    const query = event.query.toLowerCase();\n    const filtered = staticValueItems.map(\n      (item: { label: any; }) => item.label\n    ).filter((item: string) =>\n      item.toLowerCase().includes(query)\n    );\n    setFilteredStaticItems(filtered);\n  };\n\n  // Set the filters whenever selectionStaticValues change\n  useEffect(() => {\n    // console.log(`Selection Static Values changed:`, selectionStaticValues);\n    if (selectionStaticValues.length > 0) {\n      const filter: SqlExpression = {\n        variableName: dashboardVariable.variableName,\n        // @ts-ignore\n        operator: '$in',\n        value: selectionStaticValues\n      };\n      setFilters(prev => {\n        // Remove any existing filter for this variable and replace with the new one\n        const filtered = prev.filter(f => f.variableName !== dashboardVariable.variableName);\n        return [...filtered, filter];\n      });\n    }\n    // else {\n    //   // If no values selected, remove the filter for this variable\n    //   setFilters(prev => prev.filter(f => f.variableName !== dashboardVariable.variableName));\n    // }\n  }, [selectionStaticValues]);\n\n  useEffect(() => {\n    setSelectionStaticValues([]);\n  }, [clearSignal]);\n\n  return (\n    <SolidAutocomplete\n      value={selectionStaticValues}\n      suggestions={filteredStaticItems}\n      completeMethod={searchStatic}\n      onChange={(e: AutoCompleteChangeEvent) => setSelectionStaticValues(e.value)}\n      multiple\n      dropdown\n      placeholder={dashboardVariable.variableName}\n      className=\"solid-standard-autocomplete\"\n      style={{ minHeight: 38 }}\n    />\n  );\n}\n\nexport interface SolidDashboardVariableProps {\n  dashboardVariables: any;\n  filters: SqlExpression[];\n  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;\n}\n\nconst SolidDashboardVariable: React.FC<SolidDashboardVariableProps> = ({ dashboardVariables, filters, setFilters }) => {\n  const [clearSignal, setClearSignal] = useState(0);\n  const dashboardVariableComponents = dashboardVariables.map((dashboardVariable: any, index: number) => {\n    switch (dashboardVariable.variableType) {\n      case 'date':\n        return <DateVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionStatic':\n        return <SelectionStaticVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      case 'selectionDynamic':\n        return <SelectionDynamicVariableFilterComponent key={index} setFilters={setFilters} clearSignal={clearSignal} dashboardVariable={dashboardVariable} />;\n      default:\n        return null;\n    }\n  });\n\n  const clearAllFilters = () => {\n    setFilters([]);\n    setClearSignal(prev => prev + 1);  // triggers children to reset\n  };\n\n  // TODO [HP]: Currently this is static, we need this to be dynamic how we are invoking setFilters below has to be fully dynamic...\n  return (\n    <div className=\"flex align-items-center gap-3\">\n      {dashboardVariableComponents}\n      {filters.length > 0 && (\n        <SolidButton\n          onClick={clearAllFilters}\n          size=\"sm\"\n          outlined\n          icon=\"si si-filter-slash\"\n        />\n      )}\n    </div>\n  );\n}\n\nexport default SolidDashboardVariable;\n"]}

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

@@ -0,0 +1,259 @@
+
+import { SqlExpression } from "../../../types/solid-core";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import styles from './SolidDashboard.module.css';
+import { useGetDashboardVariableSelectionDynamicValuesQuery } from "../../../redux/api/dashboardApi";
+import { DashboardVariableRecord } from "./SolidDashboard";
+import { SolidAutocomplete, SolidButton, SolidDatePicker, SolidIcon, SolidSpinner } from "../../shad-cn-ui";
+
+type Nullable<T> = T | null;
+type AutoCompleteChangeEvent = { value: any };
+type AutoCompleteCompleteEvent = { query: string };
+
+
+export interface DashboardVariableFilterProps {
+  setFilters: Dispatch<SetStateAction<SqlExpression[]>>;
+  clearSignal: number;
+  dashboardVariable: DashboardVariableRecord;
+}
+
+type DateRange = [Date | null, Date | null] | null;
+
+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: DateRange = defaultDatesArray.length === 2 ? [
+    new Date(defaultDatesArray[0]),
+    new Date(defaultDatesArray[1])
+  ] : null;
+  const [dates, setDates] = useState<DateRange>(defaultDates);
+
+  useEffect(() => {
+    setDates(null);  // reset UI
+  }, [clearSignal]);
+  
+  return (
+    <div className={`flex align-items-center ${styles.SolidDashboardDateRangeFilterWrapper}`}>
+      <SolidDatePicker
+        selectsRange
+        startDate={dates ? dates[0] : null}
+        endDate={dates ? dates[1] : null}
+        onChange={(next: [Date | null, Date | null] | null) => {
+          const newDates = next;
+          setDates(newDates);
+
+          if (newDates && 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];
+            });
+          }
+
+        }}
+        className={styles.SolidDashboardDateRangeFilter}
+        inputClassName="h-3rem w-full"
+      />
+      <div className="px-2">
+        <SolidIcon name="si-calendar" className="opacity-50" aria-hidden />
+      </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 && <SolidSpinner />}
+      {isError && <div>Error loading values</div>}
+      {!isLoading && !isError &&
+        <SolidAutocomplete
+          value={selectionDynamicValues}
+          suggestions={filteredItems}
+          completeMethod={searchDynamic}
+          onChange={(e: AutoCompleteChangeEvent) => {
+            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 = JSON.parse(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 (
+    <SolidAutocomplete
+      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 && (
+        <SolidButton
+          onClick={clearAllFilters}
+          size="sm"
+          outlined
+          icon="si si-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":"AAGA,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAO1D,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,4CA4E9G,CAAA"}

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

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
+import { SolidMessage, SolidSpinner } from '../../shad-cn-ui';
+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;
+    var question = _a.question, _c = _a.filters, filters = _c === void 0 ? [] : _c, _d = _a.isPreview, isPreview = _d === void 0 ? false : _d;
+    if (!question) {
+        return (_jsx("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), children: _jsx(SolidMessage, { 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(SolidMessage, { 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 _e = useGetDashboardQuestionDataByIdQuery({ id: question.id, qs: queryParams }), questionData = _e.data, questionDataIsLoading = _e.isLoading, questionDataError = _e.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(SolidSpinner, {}), !questionDataIsLoading &&
+                _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " h-full"), children: [_jsxs("div", { className: 'flex flex-col p-4 pb-3', style: { borderBottom: "1px solid #e4e3e3" }, 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 flex-1 min-h-0 p-4 pt-2', children: [['bar', 'line', 'pie'].includes(question.visualisedAs) && _jsx(ChartJsRenderer, { options: options, visualizationData: questionData.data.visualizationData, visualizedAs: question.visualisedAs }), question.visualisedAs === 'prime-meter-group' && (function () {
+                                    var dataset = questionData.data.visualizationData.dataset;
+                                    var total = dataset.reduce(function (sum, it) { return sum + it.value; }, 0) || 1;
+                                    return (_jsx("div", { className: "solid-meter-group", children: dataset.map(function (item, idx) {
+                                            var percentage = Math.round((item.value / total) * 100);
+                                            return (_jsxs("div", { className: "solid-meter-group-row", children: [_jsx("span", { className: "solid-meter-group-label", children: item.label }), _jsx("div", { className: "solid-meter-group-bar", children: _jsx("div", { className: "solid-meter-group-bar-fill", style: { width: "".concat(percentage, "%"), backgroundColor: item.color || 'var(--solid-surface-accent)' } }) }), _jsxs("span", { className: "solid-meter-group-value", children: [percentage, "%"] })] }, "".concat(item.label, "-").concat(idx)));
+                                        }) }));
+                                })(), 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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","sourcesContent":["\nimport type { ReactNode } from 'react';\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport { SqlExpression } from '../../../types/solid-core';\nimport { SolidMessage, SolidSpinner } from '../../shad-cn-ui';\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 | ReactNode;\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                <SolidMessage text=\"Preview Unavailable\" />\n            </div>\n        );\n    }\n\n    const textAlign = question?.textAlign ?? 'start'\n    if (!question) {\n        return (\n            <SolidMessage text=\"Preview Unavailable\" />\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 && <SolidSpinner />}\n            {!questionDataIsLoading &&\n                <div className={`${styles.SolidChartCardWrapper} h-full`}>\n                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: \"1px solid #e4e3e3\" }}>\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>\n                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>\n                        {['bar', 'line', 'pie'].includes(question.visualisedAs) && <ChartJsRenderer options={options} visualizationData={questionData.data.visualizationData} visualizedAs={question.visualisedAs} />}\n                        {question.visualisedAs === 'prime-meter-group' && (() => {\n                            const dataset: DataItem[] = questionData.data.visualizationData.dataset;\n                            const total = dataset.reduce((sum, it) => sum + it.value, 0) || 1;\n                            return (\n                                <div className=\"solid-meter-group\">\n                                    {dataset.map((item: DataItem, idx: number) => {\n                                        const percentage = Math.round((item.value / total) * 100);\n                                        return (\n                                            <div key={`${item.label}-${idx}`} className=\"solid-meter-group-row\">\n                                                <span className=\"solid-meter-group-label\">{item.label}</span>\n                                                <div className=\"solid-meter-group-bar\">\n                                                    <div\n                                                        className=\"solid-meter-group-bar-fill\"\n                                                        style={{ width: `${percentage}%`, backgroundColor: item.color || 'var(--solid-surface-accent)' }}\n                                                    />\n                                                </div>\n                                                <span className=\"solid-meter-group-value\">{percentage}%</span>\n                                            </div>\n                                        );\n                                    })}\n                                </div>\n                            );\n                        })()}\n                        {question.visualisedAs === 'prime-datatable' && <PrimeReactDatatableRenderer options={options} visualizationData={questionData.data.visualizationData} />}\n                    </div>\n                </div>\n            }\n        </>\n    )\n}\n"]}