@solidxai/core-ui 0.1.5-beta.0 → 0.1.5-beta.10

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

@@ -9,6 +9,42 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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)) {
@@ -18,59 +54,109 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import 'gridstack/dist/gridstack.min.css';
 import styles from './SolidDashboard.module.css';
 import { SolidQuestionRenderer } from './SolidQuestionRenderer';
-import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
-import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import qs from 'qs';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import ReactGridLayout, { useContainerWidth } from "react-grid-layout";
+import { useEffect, useRef } from 'react';
+import PrimeDataTableWrapper from './PrimeDataTableWrapper';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';
+import showToast from '../../../helpers/showToast';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { Toast } from 'primereact/toast';
+var generateDefaultLayout = function (questions) {
+    return questions.map(function (q, index) {
+        var col = index % 3;
+        var row = Math.floor(index / 3);
+        return {
+            i: String(q.name),
+            x: col * 4,
+            y: row * 4,
+            w: 4,
+            h: 4,
+        };
+    });
+};
 var SolidDashboardBody = function (_a) {
-    // const gridRef = useRef<HTMLDivElement>(null);
-    var questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b;
+    var dashboardId = _a.dashboardId, questions = _a.questions, _b = _a.filters, filters = _b === void 0 ? [] : _b, dashboardLayout = _a.dashboardLayout, setDashboardLayout = _a.setDashboardLayout;
+    var toast = useRef(null);
+    var sortedQuestions = __spreadArray([], questions, true).map(function (q, index) { return (__assign(__assign({}, q), { defaultIndex: index + 1 })); })
+        .sort(function (a, b) { var _a, _b; return ((_a = a.sequenceNumber) !== null && _a !== void 0 ? _a : a.defaultIndex) - ((_b = b.sequenceNumber) !== null && _b !== void 0 ? _b : b.defaultIndex); });
+    var _c = useContainerWidth(), width = _c.width, containerRef = _c.containerRef, mounted = _c.mounted;
+    var isLayoutReady = useRef(false);
+    var _d = useLazyGetUserDashboardLayoutByDashboardIdQuery(), fetchUserLayout = _d[0], _e = _d[1], userLayoutData = _e.data, isSuccess = _e.isSuccess, isLoading = _e.isLoading;
+    useEffect(function () {
+        if (!dashboardId || questions.length === 0)
+            return;
+        var loadLayout = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response, raw, savedLayout_1, layout, error_1;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _b.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, fetchUserLayout(dashboardId).unwrap()];
+                    case 1:
+                        response = _b.sent();
+                        raw = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.layout;
+                        savedLayout_1 = typeof raw === 'string' ? JSON.parse(raw) : raw;
+                        layout = savedLayout_1
+                            ? sortedQuestions.map(function (q) {
+                                var saved = savedLayout_1.find(function (s) { return s.i === String(q.name); });
+                                return saved !== null && saved !== void 0 ? saved : generateDefaultLayout([q])[0];
+                            })
+                            : generateDefaultLayout(sortedQuestions);
+                        setDashboardLayout(layout);
+                        setTimeout(function () { isLayoutReady.current = true; }, 100);
+                        return [3 /*break*/, 3];
+                    case 2:
+                        error_1 = _b.sent();
+                        if (error_1.status === 403) {
+                            showToast(toast, "error", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);
+                        }
+                        else {
+                            showToast(toast, "error", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);
+                        }
+                        return [3 /*break*/, 3];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        }); };
+        loadLayout();
+    }, [questions, dashboardId]);
     // useEffect(() => {
-    //   if (!gridRef.current) return;
-    //   // Initialize Gridstack on the specific ref
-    //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);
-    //   // Load widgets if provided
-    //   if (widgetOptions && widgetOptions.length > 0) {
-    //     grid.load(
-    //       widgetOptions.map((widget) => ({
-    //         ...widget,
-    //         content: `${widget.content ?? 'Widget'}`,
-    //       }))
-    //     );
-    //   }
-    //   // Cleanup on unmount
-    //   return () => {
-    //     grid.destroy(false);
-    //   };
-    // }, [dashboardOptions, widgetOptions]);
-    // Fallback sequencing
-    var questionsWithDefaultIndex = questions.map(function (q, index) { return (__assign(__assign({}, q), { defaultIndex: index + 1 })); });
-    var sortedQuestions = __spreadArray([], questionsWithDefaultIndex, true).sort(function (a, b) {
-        var _a, _b;
-        var aSeq = (_a = a.sequenceNumber) !== null && _a !== void 0 ? _a : a.defaultIndex;
-        var bSeq = (_b = b.sequenceNumber) !== null && _b !== void 0 ? _b : b.defaultIndex;
-        return aSeq - bSeq;
-    });
-    return (_jsx("div", { className: "p-4 overflow-y-auto ".concat(styles.SolidDashboardContentWrapper), children: _jsxs("div", { className: 'grid', children: [sortedQuestions
-                    .filter(function (question) { return question.visualisedAs !== 'prime-datatable'; })
-                    .map(function (question) { return (_jsx("div", { className: "col-4 p-3", children: _jsx(SolidQuestionRenderer, { question: question, filters: filters, isPreview: false }) }, question.id)); }), sortedQuestions
-                    .filter(function (question) { return question.visualisedAs === 'prime-datatable'; })
-                    .map(function (question) {
-                    var _a, _b;
-                    var queryParams = qs.stringify({ isPreview: false, filters: filters }, { arrayFormat: 'brackets' });
-                    var _c = useGetDashboardQuestionDataByIdQuery({
-                        id: question.id,
-                        qs: queryParams,
-                    }), questionData = _c.data, isLoading = _c.isLoading;
-                    if (isLoading)
-                        return _jsx(ProgressSpinner, {});
-                    var textAlign = (_a = question === null || question === void 0 ? void 0 : question.textAlign) !== null && _a !== void 0 ? _a : 'start';
-                    return (_jsx("div", { className: "col-12 p-3", children: _jsxs("div", { className: "".concat(styles.SolidChartCardWrapper, " p-4"), style: { maxHeight: '40vh', overflowY: 'scroll' }, 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 }), _jsx("div", { className: 'mt-3', children: _jsx(PrimeReactDatatableRenderer, { options: JSON.parse(question === null || question === void 0 ? void 0 : question.chartOptions), visualizationData: (_b = questionData === null || questionData === void 0 ? void 0 : questionData.data) === null || _b === void 0 ? void 0 : _b.visualizationData }) })] }) }, question.id));
-                })] }) }));
+    //   if (questions.length === 0) return;
+    //   const saved = getSavedLayout();
+    //   setDashboardLayout(generateLayout(sortedQuestions, saved));
+    //   // Delay the ready flag so onLayoutChange doesn't fire before we're set
+    //   setTimeout(() => { isLayoutReady.current = true; }, 100);
+    // }, [questions]);
+    var handleLayoutChange = function (newLayout) {
+        if (!isLayoutReady.current)
+            return;
+        // v2 passes LayoutItem[] at runtime despite the type saying Layout
+        var layoutArray = newLayout;
+        var updated = layoutArray.map(function (item) { return ({
+            i: item.i,
+            x: item.x,
+            y: item.y,
+            w: item.w,
+            h: item.h,
+        }); });
+        setDashboardLayout(updated);
+        // saving is handled by the parent/caller
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Toast, { ref: toast }), _jsx("div", { ref: containerRef, className: "p-4 ".concat(styles.SolidDashboardContentWrapper), style: { width: '100%', overflowY: 'auto', minHeight: 0 }, children: mounted && dashboardLayout.length > 0 && (_jsx(ReactGridLayout, { width: width, layout: dashboardLayout, gridConfig: {
+                        cols: 12,
+                        rowHeight: 120,
+                    }, dragConfig: {
+                        handle: ".drag-handle",
+                    }, resizeConfig: {
+                        enabled: true,
+                    }, onLayoutChange: handleLayoutChange, children: sortedQuestions.map(function (question) { return (_jsx("div", { className: "drag-handle cursor-move rounded shadow p-2 overflow-hidden", style: { backgroundColor: 'transparent' }, children: question.visualisedAs === "prime-datatable" ? (_jsx(PrimeDataTableWrapper, { question: question, filters: filters })) : (_jsx(SolidQuestionRenderer, { question: question, filters: filters, isPreview: false })) }, String(question.name))); }) })) })] }));
 };
 export default SolidDashboardBody;
 //# sourceMappingURL=SolidDashboardBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidDashboardBody.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport 'gridstack/dist/gridstack.min.css';\nimport { GridStackOptions, GridStackWidget } from 'gridstack';\nimport styles from './SolidDashboard.module.css'\nimport { SolidQuestionRenderer } from './SolidQuestionRenderer';\nimport { SqlExpression } from '../../../types/solid-core';\nimport PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';\nimport { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';\nimport qs from 'qs';\nimport { ProgressSpinner } from 'primereact/progressspinner';\n\nexport interface SolidDashboardBodyProps {\n  dashboardOptions?: GridStackOptions;\n  widgetOptions?: GridStackWidget[];\n  // Replace `any` with a proper `Question` type when available\n  questions: any[];\n  filters: SqlExpression[];\n}\n\nconst SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {\n  // const gridRef = useRef<HTMLDivElement>(null);\n\n  // useEffect(() => {\n  //   if (!gridRef.current) return;\n\n  //   // Initialize Gridstack on the specific ref\n  //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);\n\n  //   // Load widgets if provided\n  //   if (widgetOptions && widgetOptions.length > 0) {\n  //     grid.load(\n  //       widgetOptions.map((widget) => ({\n  //         ...widget,\n  //         content: `${widget.content ?? 'Widget'}`,\n  //       }))\n  //     );\n  //   }\n\n  //   // Cleanup on unmount\n  //   return () => {\n  //     grid.destroy(false);\n  //   };\n  // }, [dashboardOptions, widgetOptions]);\n\n\n  // Fallback sequencing\n  const questionsWithDefaultIndex = questions.map((q, index) => ({\n    ...q,\n    defaultIndex: index + 1,\n  }));\n\n\n  const sortedQuestions = [...questionsWithDefaultIndex].sort((a, b) => {\n    const aSeq = a.sequenceNumber ?? a.defaultIndex;\n    const bSeq = b.sequenceNumber ?? b.defaultIndex;\n    return aSeq - bSeq;\n  });\n\n\n  return (\n    <div className={`p-4 overflow-y-auto ${styles.SolidDashboardContentWrapper}`}>\n      {/* <div className=\"grid-stack\" ref={gridRef}></div> */}\n      <div className='grid'>\n        {/* {questions && questions.map((question: any) => {\n          return (\n            <div className='col-4 p-3'>\n              <SolidQuestionRenderer question={question} filters={filters} key={question.id} isPreview={false} />\n            </div>\n          )\n        })} */}\n        {sortedQuestions\n          .filter((question: any) => question.visualisedAs !== 'prime-datatable')\n          .map((question: any) => (\n            <div className=\"col-4 p-3\" key={question.id}>\n              <SolidQuestionRenderer\n                question={question}\n                filters={filters}\n                isPreview={false}\n              />\n            </div>\n          ))}\n\n        {sortedQuestions\n          .filter((question: any) => question.visualisedAs === 'prime-datatable')\n          .map((question: any) => {\n            const queryParams = qs.stringify({ isPreview: false, filters }, { arrayFormat: 'brackets' });\n\n            const { data: questionData, isLoading } = useGetDashboardQuestionDataByIdQuery({\n              id: question.id,\n              qs: queryParams,\n            });\n\n            if (isLoading) return <ProgressSpinner />;\n            const textAlign = question?.textAlign ?? 'start'\n\n            return (\n              <div className=\"col-12 p-3\" key={question.id}>\n                <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'scroll' }}>\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\n                    <PrimeReactDatatableRenderer\n                      options={JSON.parse(question?.chartOptions)}\n                      visualizationData={questionData?.data?.visualizationData}\n                    />\n                  </div>\n                </div>\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  );\n};\n\nexport default SolidDashboardBody;"]}
+{"version":3,"file":"SolidDashboardBody.js","sourceRoot":"","sources":["../../../../src/components/core/dashboard/SolidDashboardBody.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport 'gridstack/dist/gridstack.min.css';\nimport { GridStackOptions, GridStackWidget } from 'gridstack';\nimport styles from './SolidDashboard.module.css'\nimport { SolidQuestionRenderer } from './SolidQuestionRenderer';\nimport { SqlExpression } from '../../../types/solid-core';\nimport ReactGridLayout, { useContainerWidth, Layout, LayoutItem } from \"react-grid-layout\";\nimport { useEffect, useRef, useState } from 'react';\nimport PrimeDataTableWrapper from './PrimeDataTableWrapper';\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\nimport { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';\nimport showToast from '../../../helpers/showToast';\nimport { ERROR_MESSAGES } from '../../../constants/error-messages';\nimport { Toast } from 'primereact/toast';\n\nexport interface SolidDashboardBodyProps {\n  dashboardOptions?: GridStackOptions;\n  widgetOptions?: GridStackWidget[];\n  // Replace `any` with a proper `Question` type when available\n  dashboardId: string;\n  questions: any[];\n  filters: SqlExpression[];\n  dashboardLayout: GridItem[];\n  setDashboardLayout: (dashboardLayout: GridItem[]) => void;\n}\n\nexport type GridItem = {\n  i: string;\n  x: number;\n  y: number;\n  w: number;\n  h: number;\n};\n\n// Layout is Layout[] at runtime in v2 — the type definition is misleading\ntype LayoutArray = LayoutItem[];\n\n\nconst generateDefaultLayout = (questions: any[]): GridItem[] => {\n  return questions.map((q, index) => {\n    const col = index % 3;\n    const row = Math.floor(index / 3);\n    return {\n      i: String(q.name),\n      x: col * 4,   // 0, 4, 8 in a 12-col grid\n      y: row * 4,\n      w: 4,\n      h: 4,\n    };\n  });\n};\n\n\nconst SolidDashboardBody = ({ dashboardId, questions, filters = [], dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => {\n  const toast = useRef<Toast>(null);\n\n  const sortedQuestions = [...questions]\n    .map((q, index) => ({ ...q, defaultIndex: index + 1 }))\n    .sort((a, b) => (a.sequenceNumber ?? a.defaultIndex) - (b.sequenceNumber ?? b.defaultIndex));\n\n  const { width, containerRef, mounted } = useContainerWidth();\n  const isLayoutReady = useRef(false);\n\n  const [fetchUserLayout, { data: userLayoutData, isSuccess, isLoading }] =\n    useLazyGetUserDashboardLayoutByDashboardIdQuery();\n\n  useEffect(() => {\n    if (!dashboardId || questions.length === 0) return;\n    const loadLayout = async () => {\n      try {\n        const response = await fetchUserLayout(dashboardId).unwrap();\n        const raw = response?.data?.layout;\n        const savedLayout = typeof raw === 'string' ? JSON.parse(raw) : raw;\n\n        const layout = savedLayout\n          ? sortedQuestions.map((q) => {\n            const saved = (savedLayout as GridItem[]).find(s => s.i === String(q.name));\n            return saved ?? generateDefaultLayout([q])[0];\n          })\n          : generateDefaultLayout(sortedQuestions);\n\n        setDashboardLayout(layout);\n        setTimeout(() => { isLayoutReady.current = true; }, 100);\n      } catch (error: any) {\n        if (error.status === 403) {\n          showToast(toast, \"error\", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);\n        } else {\n          showToast(toast, \"error\", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);\n        }\n      }\n    };\n\n    loadLayout();\n  }, [questions, dashboardId]);\n\n\n  // useEffect(() => {\n  //   if (questions.length === 0) return;\n  //   const saved = getSavedLayout();\n  //   setDashboardLayout(generateLayout(sortedQuestions, saved));\n  //   // Delay the ready flag so onLayoutChange doesn't fire before we're set\n  //   setTimeout(() => { isLayoutReady.current = true; }, 100);\n  // }, [questions]);\n\n\n  const handleLayoutChange = (newLayout: Layout) => {\n    if (!isLayoutReady.current) return;\n\n    // v2 passes LayoutItem[] at runtime despite the type saying Layout\n    const layoutArray = newLayout as unknown as LayoutItem[];\n\n    const updated: GridItem[] = layoutArray.map(item => ({\n      i: item.i,\n      x: item.x,\n      y: item.y,\n      w: item.w,\n      h: item.h,\n    }));\n\n    setDashboardLayout(updated);\n    // saving is handled by the parent/caller\n  };\n\n  return (\n    <>\n      <Toast ref={toast} />\n      <div\n        ref={containerRef as React.RefObject<HTMLDivElement>}\n        className={`p-4 ${styles.SolidDashboardContentWrapper}`}\n        style={{ width: '100%', overflowY: 'auto', minHeight: 0 }}\n\n      >\n        {mounted && dashboardLayout.length > 0 && (\n          <ReactGridLayout\n            width={width}\n            layout={dashboardLayout}\n            gridConfig={{\n              cols: 12,\n              rowHeight: 120,\n            }}\n            dragConfig={{\n              handle: \".drag-handle\",\n            }}\n            resizeConfig={{\n              enabled: true,\n            }}\n            onLayoutChange={handleLayoutChange}\n          >\n            {sortedQuestions.map((question: any) => (\n              <div key={String(question.name)} className=\"drag-handle cursor-move rounded shadow p-2 overflow-hidden\" style={{ backgroundColor: 'transparent' }}>\n                {/* <div className=\" mb-2 font-bold\">\n                {question.name}\n              </div> */}\n                {question.visualisedAs === \"prime-datatable\" ? (\n                  <PrimeDataTableWrapper question={question} filters={filters} />\n                ) : (\n                  <SolidQuestionRenderer question={question} filters={filters} isPreview={false} />\n                )}\n              </div>\n            ))}\n          </ReactGridLayout>\n        )}\n      </div>\n    </>\n  );\n};\n\nexport default SolidDashboardBody;"]}

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

@@ -4,113 +4,165 @@ import { GridStackOptions, GridStackWidget } from 'gridstack';
 import styles from './SolidDashboard.module.css'
 import { SolidQuestionRenderer } from './SolidQuestionRenderer';
 import { SqlExpression } from '../../../types/solid-core';
-import PrimeReactDatatableRenderer from './chart-renderers/PrimeReactDatatableRenderer';
-import { useGetDashboardQuestionDataByIdQuery } from '../../../redux/api/dashboardQuestionApi';
-import qs from 'qs';
-import { ProgressSpinner } from 'primereact/progressspinner';
+import ReactGridLayout, { useContainerWidth, Layout, LayoutItem } from "react-grid-layout";
+import { useEffect, useRef, useState } from 'react';
+import PrimeDataTableWrapper from './PrimeDataTableWrapper';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import { useLazyGetUserDashboardLayoutByDashboardIdQuery } from '../../../redux/api/dashboardLayoutApi';
+import showToast from '../../../helpers/showToast';
+import { ERROR_MESSAGES } from '../../../constants/error-messages';
+import { Toast } from 'primereact/toast';
 
 export interface SolidDashboardBodyProps {
   dashboardOptions?: GridStackOptions;
   widgetOptions?: GridStackWidget[];
   // Replace `any` with a proper `Question` type when available
+  dashboardId: string;
   questions: any[];
   filters: SqlExpression[];
+  dashboardLayout: GridItem[];
+  setDashboardLayout: (dashboardLayout: GridItem[]) => void;
 }
 
-const SolidDashboardBody = ({ questions, filters = [] }: SolidDashboardBodyProps) => {
-  // const gridRef = useRef<HTMLDivElement>(null);
+export type GridItem = {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+};
 
-  // useEffect(() => {
-  //   if (!gridRef.current) return;
-
-  //   // Initialize Gridstack on the specific ref
-  //   const grid = GridStack.init(dashboardOptions || {}, gridRef.current);
-
-  //   // Load widgets if provided
-  //   if (widgetOptions && widgetOptions.length > 0) {
-  //     grid.load(
-  //       widgetOptions.map((widget) => ({
-  //         ...widget,
-  //         content: `${widget.content ?? 'Widget'}`,
-  //       }))
-  //     );
-  //   }
-
-  //   // Cleanup on unmount
-  //   return () => {
-  //     grid.destroy(false);
-  //   };
-  // }, [dashboardOptions, widgetOptions]);
-
-
-  // Fallback sequencing
-  const questionsWithDefaultIndex = questions.map((q, index) => ({
-    ...q,
-    defaultIndex: index + 1,
-  }));
-
-
-  const sortedQuestions = [...questionsWithDefaultIndex].sort((a, b) => {
-    const aSeq = a.sequenceNumber ?? a.defaultIndex;
-    const bSeq = b.sequenceNumber ?? b.defaultIndex;
-    return aSeq - bSeq;
+// Layout is Layout[] at runtime in v2 — the type definition is misleading
+type LayoutArray = LayoutItem[];
+
+
+const generateDefaultLayout = (questions: any[]): GridItem[] => {
+  return questions.map((q, index) => {
+    const col = index % 3;
+    const row = Math.floor(index / 3);
+    return {
+      i: String(q.name),
+      x: col * 4,   // 0, 4, 8 in a 12-col grid
+      y: row * 4,
+      w: 4,
+      h: 4,
+    };
   });
+};
+
+
+const SolidDashboardBody = ({ dashboardId, questions, filters = [], dashboardLayout, setDashboardLayout }: SolidDashboardBodyProps) => {
+  const toast = useRef<Toast>(null);
+
+  const sortedQuestions = [...questions]
+    .map((q, index) => ({ ...q, defaultIndex: index + 1 }))
+    .sort((a, b) => (a.sequenceNumber ?? a.defaultIndex) - (b.sequenceNumber ?? b.defaultIndex));
+
+  const { width, containerRef, mounted } = useContainerWidth();
+  const isLayoutReady = useRef(false);
+
+  const [fetchUserLayout, { data: userLayoutData, isSuccess, isLoading }] =
+    useLazyGetUserDashboardLayoutByDashboardIdQuery();
+
+  useEffect(() => {
+    if (!dashboardId || questions.length === 0) return;
+    const loadLayout = async () => {
+      try {
+        const response = await fetchUserLayout(dashboardId).unwrap();
+        const raw = response?.data?.layout;
+        const savedLayout = typeof raw === 'string' ? JSON.parse(raw) : raw;
+
+        const layout = savedLayout
+          ? sortedQuestions.map((q) => {
+            const saved = (savedLayout as GridItem[]).find(s => s.i === String(q.name));
+            return saved ?? generateDefaultLayout([q])[0];
+          })
+          : generateDefaultLayout(sortedQuestions);
+
+        setDashboardLayout(layout);
+        setTimeout(() => { isLayoutReady.current = true; }, 100);
+      } catch (error: any) {
+        if (error.status === 403) {
+          showToast(toast, "error", ERROR_MESSAGES.FORBIDDEN_ERROR, ERROR_MESSAGES.FORBIDDEN_ERROR);
+        } else {
+          showToast(toast, "error", ERROR_MESSAGES.SOMETHING_WRONG, ERROR_MESSAGES.SOMETHING_WRONG);
+        }
+      }
+    };
+
+    loadLayout();
+  }, [questions, dashboardId]);
+
+
+  // useEffect(() => {
+  //   if (questions.length === 0) return;
+  //   const saved = getSavedLayout();
+  //   setDashboardLayout(generateLayout(sortedQuestions, saved));
+  //   // Delay the ready flag so onLayoutChange doesn't fire before we're set
+  //   setTimeout(() => { isLayoutReady.current = true; }, 100);
+  // }, [questions]);
+
+
+  const handleLayoutChange = (newLayout: Layout) => {
+    if (!isLayoutReady.current) return;
+
+    // v2 passes LayoutItem[] at runtime despite the type saying Layout
+    const layoutArray = newLayout as unknown as LayoutItem[];
+
+    const updated: GridItem[] = layoutArray.map(item => ({
+      i: item.i,
+      x: item.x,
+      y: item.y,
+      w: item.w,
+      h: item.h,
+    }));
 
+    setDashboardLayout(updated);
+    // saving is handled by the parent/caller
+  };
 
   return (
-    <div className={`p-4 overflow-y-auto ${styles.SolidDashboardContentWrapper}`}>
-      {/* <div className="grid-stack" ref={gridRef}></div> */}
-      <div className='grid'>
-        {/* {questions && questions.map((question: any) => {
-          return (
-            <div className='col-4 p-3'>
-              <SolidQuestionRenderer question={question} filters={filters} key={question.id} isPreview={false} />
-            </div>
-          )
-        })} */}
-        {sortedQuestions
-          .filter((question: any) => question.visualisedAs !== 'prime-datatable')
-          .map((question: any) => (
-            <div className="col-4 p-3" key={question.id}>
-              <SolidQuestionRenderer
-                question={question}
-                filters={filters}
-                isPreview={false}
-              />
-            </div>
-          ))}
-
-        {sortedQuestions
-          .filter((question: any) => question.visualisedAs === 'prime-datatable')
-          .map((question: any) => {
-            const queryParams = qs.stringify({ isPreview: false, filters }, { arrayFormat: 'brackets' });
-
-            const { data: questionData, isLoading } = useGetDashboardQuestionDataByIdQuery({
-              id: question.id,
-              qs: queryParams,
-            });
-
-            if (isLoading) return <ProgressSpinner />;
-            const textAlign = question?.textAlign ?? 'start'
-
-            return (
-              <div className="col-12 p-3" key={question.id}>
-                <div className={`${styles.SolidChartCardWrapper} p-4`} style={{ maxHeight: '40vh', overflowY: 'scroll' }}>
-                  <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'>
-
-                    <PrimeReactDatatableRenderer
-                      options={JSON.parse(question?.chartOptions)}
-                      visualizationData={questionData?.data?.visualizationData}
-                    />
-                  </div>
-                </div>
+    <>
+      <Toast ref={toast} />
+      <div
+        ref={containerRef as React.RefObject<HTMLDivElement>}
+        className={`p-4 ${styles.SolidDashboardContentWrapper}`}
+        style={{ width: '100%', overflowY: 'auto', minHeight: 0 }}
+
+      >
+        {mounted && dashboardLayout.length > 0 && (
+          <ReactGridLayout
+            width={width}
+            layout={dashboardLayout}
+            gridConfig={{
+              cols: 12,
+              rowHeight: 120,
+            }}
+            dragConfig={{
+              handle: ".drag-handle",
+            }}
+            resizeConfig={{
+              enabled: true,
+            }}
+            onLayoutChange={handleLayoutChange}
+          >
+            {sortedQuestions.map((question: any) => (
+              <div key={String(question.name)} className="drag-handle cursor-move rounded shadow p-2 overflow-hidden" style={{ backgroundColor: 'transparent' }}>
+                {/* <div className=" mb-2 font-bold">
+                {question.name}
+              </div> */}
+                {question.visualisedAs === "prime-datatable" ? (
+                  <PrimeDataTableWrapper question={question} filters={filters} />
+                ) : (
+                  <SolidQuestionRenderer question={question} filters={filters} isPreview={false} />
+                )}
               </div>
-            )
-          })}
+            ))}
+          </ReactGridLayout>
+        )}
       </div>
-    </div>
+    </>
   );
 };
 

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,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"}
+{"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,4CAwD9G,CAAA"}

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

@@ -32,6 +32,6 @@ export var SolidQuestionRenderer = function (_a) {
     // 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: "".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' && _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

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

@@ -15,7 +15,7 @@ type SolidQuestionRendererProps = {
     isPreview: boolean;
 };
 
-type DataItem= {
+type DataItem = {
     value: number;
     label?: string | HTMLElement;
     color?: string;
@@ -63,16 +63,18 @@ export const SolidQuestionRenderer = ({ question, filters = [], isPreview = fals
         <>
             {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 className={`${styles.SolidChartCardWrapper} h-full`}>
+                    <div className='flex flex-col p-4 pb-3' style={{ borderBottom: "1px solid #e4e3e3" }}>
+                        <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>
+                    <div className='mt-3 flex-1 min-h-0 p-4 pt-2'>
+                        {['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>
-            </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,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"}
+{"version":3,"file":"ChartJsRenderer.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/dashboard/chart-renderers/ChartJsRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,oEAAoE,CAAC;AAI5E,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,4CAoCjG,CAAA"}