@quillsql/react 1.6.9 → 1.7.1

package/lib/hooks/useSelectOnKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelectOnKeyDown.js","sourceRoot":"","sources":["../../src/hooks/useSelectOnKeyDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,IAAM,kBAAkB,GAAG,UACzB,aAAsC,EACtC,YAAsB,EACtB,SAAkB,EAClB,iBAA+C,EAC/C,KAAc;IAKd,IAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC;IACtB,IAAA,KAA8B,QAAQ,CAAC,gBAAgB,CAAC,EAAvD,UAAU,QAAA,EAAE,aAAa,QAA8B,CAAC;IAE/D,IAAM,eAAe,GAAG,UAAC,UAAkB,EAAE,YAAsB;QACjE,IAAI,UAAU,GAAG,CAAC;YAAE,OAAO,SAAS,CAAC;QACrC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,IAAM,uBAAuB,GAAG;YAC9B,IAAI,CAAC,SAAS,EAAE;gBACd,aAAa,CAAC,gBAAgB,CAAC,CAAC;aACjC;YACD,IAAI,CAAC,KAAK;gBAAE,OAAO,gBAAgB,CAAC;YACpC,IAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACjD,OAAO,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC;QAC/D,CAAC,CAAC;QAEF,aAAa,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,IAAM,YAAY,GAAG,eAAe,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAE/D,IAAM,UAAU,GAAG;QACjB,IAAM,OAAO,GAAG,UAAU,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpD,CAAC,CAAC;IAEF,IAAM,UAAU,GAAG;QACjB,IAAM,OAAO,GAAG,UAAU,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UAAC,CAA0D;QAC/E,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS,CAAC,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5B,MAAM;aACP;YACD,KAAK,WAAW,CAAC,CAAC;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5B,MAAM;aACP;YACD,KAAK,OAAO,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY,EAAE;oBAChB,aAAa,CAAC,YAAY,CAAC,CAAC;iBAC7B;gBACD,MAAM;aACP;YACD,KAAK,QAAQ,CAAC,CAAC;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,aAAa,CAAC,gBAAgB,CAAC,CAAC;gBAChC,MAAM;aACP;SACF;IACH,CAAC,CAAC;IACF,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"useSelectOnKeyDown.js","sourceRoot":"","sources":["../../src/hooks/useSelectOnKeyDown.tsx"],"names":[],"mappings":";;AAAA,iCAA4C;AAE5C,MAAM,kBAAkB,GAAG,CACzB,aAAsC,EACtC,YAAsB,EACtB,SAAkB,EAClB,iBAA+C,EAC/C,KAAc,EAId,EAAE;IACF,MAAM,gBAAgB,GAAG,CAAC,CAAC,CAAC;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,CAAC,UAAkB,EAAE,YAAsB,EAAE,EAAE;QACrE,IAAI,UAAU,GAAG,CAAC;YAAE,OAAO,SAAS,CAAC;QACrC,OAAO,YAAY,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,uBAAuB,GAAG,GAAG,EAAE;YACnC,IAAI,CAAC,SAAS,EAAE;gBACd,aAAa,CAAC,gBAAgB,CAAC,CAAC;aACjC;YACD,IAAI,CAAC,KAAK;gBAAE,OAAO,gBAAgB,CAAC;YACpC,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACjD,OAAO,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,YAAY,CAAC;QAC/D,CAAC,CAAC;QAEF,aAAa,CAAC,uBAAuB,EAAE,CAAC,CAAC;IAC3C,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,eAAe,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,OAAO,GAAG,UAAU,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACpD,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,MAAM,OAAO,GAAG,UAAU,GAAG,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAA0D,EAAE,EAAE;QACnF,IAAI,CAAC,SAAS,EAAE;YACd,OAAO;SACR;QAED,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS,CAAC,CAAC;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5B,MAAM;aACP;YACD,KAAK,WAAW,CAAC,CAAC;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5B,MAAM;aACP;YACD,KAAK,OAAO,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY,EAAE;oBAChB,aAAa,CAAC,YAAY,CAAC,CAAC;iBAC7B;gBACD,MAAM;aACP;YACD,KAAK,QAAQ,CAAC,CAAC;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBACzB,aAAa,CAAC,gBAAgB,CAAC,CAAC;gBAChC,MAAM;aACP;SACF;IACH,CAAC,CAAC;IACF,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;AACvC,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}

package/lib/index.js

@@ -1,10 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuill = exports.AddToDashboardModal = exports.ReportBuilder = exports.SQLEditor = exports.Table = exports.Chart = exports.QuillProvider = exports.Dashboard = void 0;
 // src/index.ts
-export { default as Dashboard } from './Dashboard';
-export { default as QuillProvider } from './QuillProvider';
-export { default as Chart } from './Chart';
-export { default as Table } from './Table';
-export { default as SQLEditor } from './SQLEditor';
-export { default as ReportBuilder } from './ReportBuilder';
-export { default as AddToDashboardModal } from './AddToDashboardModal';
-export { useQuill } from './hooks/useQuill';
+var Dashboard_1 = require("./Dashboard");
+Object.defineProperty(exports, "Dashboard", { enumerable: true, get: function () { return __importDefault(Dashboard_1).default; } });
+var QuillProvider_1 = require("./QuillProvider");
+Object.defineProperty(exports, "QuillProvider", { enumerable: true, get: function () { return __importDefault(QuillProvider_1).default; } });
+var Chart_1 = require("./Chart");
+Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return __importDefault(Chart_1).default; } });
+var Table_1 = require("./Table");
+Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var SQLEditor_1 = require("./SQLEditor");
+Object.defineProperty(exports, "SQLEditor", { enumerable: true, get: function () { return __importDefault(SQLEditor_1).default; } });
+var ReportBuilder_1 = require("./ReportBuilder");
+Object.defineProperty(exports, "ReportBuilder", { enumerable: true, get: function () { return __importDefault(ReportBuilder_1).default; } });
+var AddToDashboardModal_1 = require("./AddToDashboardModal");
+Object.defineProperty(exports, "AddToDashboardModal", { enumerable: true, get: function () { return __importDefault(AddToDashboardModal_1).default; } });
+var useQuill_1 = require("./hooks/useQuill");
+Object.defineProperty(exports, "useQuill", { enumerable: true, get: function () { return useQuill_1.useQuill; } });
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,eAAe;AACf,yCAAmD;AAA1C,uHAAA,OAAO,OAAa;AAC7B,iDAA2D;AAAlD,+HAAA,OAAO,OAAiB;AACjC,iCAA2C;AAAlC,+GAAA,OAAO,OAAS;AACzB,iCAA2C;AAAlC,+GAAA,OAAO,OAAS;AACzB,yCAAmD;AAA1C,uHAAA,OAAO,OAAa;AAC7B,iDAA2D;AAAlD,+HAAA,OAAO,OAAiB;AACjC,6DAAuE;AAA9D,2IAAA,OAAO,OAAuB;AACvC,6CAA4C;AAAnC,oGAAA,QAAQ,OAAA"}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@quillsql/react",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",
   "scripts": {
     "build": "tsc",
+    "build:foo": "rollup --config rollup.config.ts --configPlugin typescript",
     "watch": "tsc -w",
     "lint": "eslint 'src/**/*.{ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
@@ -18,6 +19,7 @@
   "dependencies": {
     "@heroicons/react": "^2.0.18",
     "@monaco-editor/react": "^4.5.1",
+    "@size-limit/webpack": "^8.2.6",
     "axios": "^1.3.5",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.0",
@@ -25,6 +27,7 @@
     "react-loader-spinner": "^5.3.4",
     "react-loading-skeleton": "^3.2.1",
     "recharts": "^2.5.0",
+    "size-limit": "^8.2.6",
     "tslib": "^2.5.0",
     "typescript": "^5.0.3"
   },
@@ -33,6 +36,9 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@size-limit/preset-small-lib": "^8.2.6",
     "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
@@ -42,6 +48,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "glob": "^10.2.2",
-    "prettier": "^2.8.7"
+    "prettier": "^2.8.7",
+    "rollup": "^3.28.0"
   }
 }

package/rollup.config.ts

@@ -0,0 +1,21 @@
+import typescript from '@rollup/plugin-typescript';
+import resolve from '@rollup/plugin-node-resolve';
+
+export default [
+  // {
+  //   input: 'src/index.ts',
+  //   output: {
+  //     file: 'lib/cjs/index.js',
+  //     format: 'cjs',
+  //   },
+  //   plugins: [typescript() , resolve()],
+  // },
+  {
+    input: 'src/index.ts',
+    output: {
+      file: 'lib/esm/index.js',
+      format: 'esm',
+    },
+    plugins: [typescript(), resolve()],
+  },
+];

package/src/AddToDashboardModal.tsx

@@ -97,7 +97,14 @@ export default function AddToDashboardModal({
   }, [schema]);
 
   const editChart = async ({ report, values, yAxisFields, columns, query }) => {
-    const { publicKey, orgId, authToken, queryEndpoint, queryHeaders } = client;
+    const {
+      publicKey,
+      orgId,
+      authToken,
+      queryEndpoint,
+      queryHeaders,
+      withCredentials,
+    } = client;
     const {
       xAxisLabel,
       yAxisLabel,
@@ -161,7 +168,7 @@ export default function AddToDashboardModal({
             task: 'create',
           },
         },
-        { headers: queryHeaders }
+        { headers: queryHeaders, withCredentials }
       );
     } else {
       response = await axios.post(
@@ -562,7 +569,7 @@ function FormikForm({
             {Object.keys(chartConfig).length > 0 && (
               <Chart
                 chartId="646e37a660feef000be67a93"
-                config={chartConfig}
+                config={chartConfig} //TODO: resolve; this might be a problem
                 colors={theme.chartColors}
                 containerStyle={{
                   width: '100%',

package/src/Chart.tsx

@@ -20,7 +20,6 @@ import axios from 'axios';
 import {
   ClientContext,
   DashboardContext,
-  DateFilterContext,
   ThemeContext,
   DashboardFiltersContext,
 } from './Context';
@@ -495,7 +494,6 @@ const Chart = ({
   query?: string;
 }) => {
   const { dispatch, dashboard } = useContext(DashboardContext);
-  const { dateFilterObj } = useContext(DateFilterContext);
   const { dashboardFilters } = useContext(DashboardFiltersContext);
   const [client, _] = useContext(ClientContext);
   const [theme] =
@@ -508,7 +506,6 @@ const Chart = ({
       config={config}
       dispatch={dispatch}
       dashboard={dashboard}
-      dateFilter={dateFilterObj}
       chartId={chartId}
       containerStyle={containerStyle}
       colors={chartColors}
@@ -521,71 +518,12 @@ const Chart = ({
   );
 };
 
-function didFiltersChange(filterObject1, filterObject2) {
-  // Both objects are null or undefined
-  if (!filterObject1 && !filterObject2) {
-    return false;
-  }
-
-  // One of the objects is null or undefined but the other is not
-  if (
-    (!filterObject1 || Object.keys(filterObject1).length === 0) &&
-    filterObject2 &&
-    Object.keys(filterObject2).length > 0
-  ) {
-    return true;
-  }
-
-  if (
-    (!filterObject2 || Object.keys(filterObject2).length === 0) &&
-    filterObject1 &&
-    Object.keys(filterObject1).length > 0
-  ) {
-    return true;
-  }
-
-  // Objects have different number of keys
-  if (
-    filterObject1 &&
-    filterObject2 &&
-    Object.keys(filterObject1).length !== Object.keys(filterObject2).length
-  ) {
-    return true;
-  }
-
-  for (const filterId in filterObject1) {
-    if (filterObject2 && !filterObject2.hasOwnProperty(filterId)) {
-      return true;
-    }
-
-    if (
-      filterObject1 &&
-      filterObject2 &&
-      JSON.stringify(filterObject1[filterId]) !==
-        JSON.stringify(filterObject2[filterId])
-    ) {
-      // If the selectedValue field exists and is not undefined in either object
-      if (
-        ('selectedValue' in filterObject1[filterId] &&
-          filterObject1[filterId].selectedValue !== undefined) ||
-        ('selectedValue' in filterObject2[filterId] &&
-          filterObject2[filterId].selectedValue !== undefined)
-      ) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-}
-
 const ChartUpdater: React.FC<ChartProps> = ({
   colors,
   chartId,
   config,
   containerStyle,
   dashboard,
-  dateFilter,
   dispatch,
   client,
   theme,
@@ -593,64 +531,28 @@ const ChartUpdater: React.FC<ChartProps> = ({
   dashboardFilters,
   query,
 }) => {
-  const [chartConfig, setChartConfig] = useState<any>(config || null);
   const [loading, setLoading] = useState(true);
-
   // console.log('chartConfig:', chartConfig);
   // console.log('chartConfig.rows:', chartConfig.rows);
   // console.log('chartConfig.xAxisField:', chartConfig.xAxisField);
 
   useEffect(() => {
-    if (isDateFilter && !dateFilter.startDate && !dateFilter.endDate) {
+    if (isDateFilter && !dateFilter) {
       return;
     }
 
     let isSubscribed = true;
-    async function getChartOptions(id: string, filtersChanged: boolean) {
+    async function getChartOptions() {
       if (isSubscribed) {
-        if (
-          dashboard &&
-          dashboard[id] &&
-          !filtersChanged &&
-          (!isDateFilter ||
-            dashboard[id].startDate === dateFilter.startDate ||
-            dashboard[id].endDate === dateFilter.endDate)
-        ) {
-          const {
-            xAxisField,
-            yAxisFields,
-            xAxisLabel,
-            yAxisLabel,
-            xAxisFormat,
-            chartType,
-            rows,
-            startDate,
-            endDate,
-            filters,
-          } = dashboard[id];
-          setChartConfig({
-            xAxisField,
-            yAxisFields,
-            xAxisLabel,
-            yAxisLabel,
-            xAxisFormat,
-            chartType,
-            rows,
-            startDate,
-            endDate,
-            filters,
-          });
-          setLoading(false);
-          return;
-        }
         const {
           publicKey,
           customerId,
           environment,
           queryEndpoint,
           queryHeaders,
+          withCredentials,
         } = client;
-
+        //queryEndpoint = undefined;
         setLoading(true);
         try {
           // if self-hosting option, only get metadata and query
@@ -666,38 +568,34 @@ const ChartUpdater: React.FC<ChartProps> = ({
             //     environment: environment || undefined,
             //   }
             // );
+            if (dashboardFilters['date_range'] && dashboard[chartId]) {
+              const dateFilter = dashboardFilters['date_range'];
+              dateFilter.dateField = dashboard[chartId].dateField;
+            }
             const resp = await axios.post(
               queryEndpoint,
-              { metadata: { id: chartId, task: 'item' } },
-              { headers: queryHeaders }
+              {
+                metadata: {
+                  id: chartId,
+                  task: 'item',
+                  filters: {
+                    ...Object.entries(dashboardFilters)
+                      .filter(([key]) => key !== 'date_range')
+                      .map(([, value]) => value),
+                    dateFilter,
+                  },
+                },
+              },
+              { headers: queryHeaders, withCredentials }
             );
 
             if (resp.data) {
-              const {
-                xAxisField,
-                yAxisFields,
-                xAxisLabel,
-                yAxisLabel,
-                xAxisFormat,
-                chartType,
-              } = resp.data;
-              setChartConfig({
-                xAxisField,
-                yAxisFields,
-                xAxisLabel,
-                yAxisLabel,
-                xAxisFormat,
-                chartType,
-                rows: resp.data.rows,
-                filters: dashboardFilters,
-              });
               setLoading(false);
               dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
-                id,
+                id: chartId,
                 data: {
                   ...resp.data,
-                  filters: dashboardFilters,
                 },
               });
             }
@@ -728,32 +626,11 @@ const ChartUpdater: React.FC<ChartProps> = ({
             );
             // console.log('RESP: ', resp.data);
             if (resp.data) {
-              const {
-                xAxisField,
-                yAxisFields,
-                xAxisLabel,
-                yAxisLabel,
-                xAxisFormat,
-                chartType,
-                rows,
-              } = resp.data;
-              setChartConfig({
-                xAxisField,
-                yAxisFields,
-                xAxisLabel,
-                yAxisLabel,
-                xAxisFormat,
-                chartType,
-                rows,
-                startDate: dateFilter && dateFilter.startDate,
-                endDate: dateFilter && dateFilter.endDate,
-                filters: dashboardFilters,
-              });
               setLoading(false);
               dispatch({
                 type: 'UPDATE_DASHBOARD_ITEM',
-                id,
-                data: { ...resp.data, filters: dashboardFilters },
+                id: chartId,
+                data: { ...resp.data },
               });
             }
           }
@@ -767,37 +644,31 @@ const ChartUpdater: React.FC<ChartProps> = ({
       setLoading(false);
       return;
     }
-    const filtersChanged = didFiltersChange(
-      dashboardFilters,
-      chartConfig?.filters
-    );
 
-    if (
-      (chartId && !chartConfig) ||
-      (chartId && chartConfig && filtersChanged) ||
-      (chartId &&
-        chartConfig &&
-        isDateFilter &&
-        dateFilter &&
-        (chartConfig.startDate !== dateFilter.startDate ||
-          chartConfig.endDate !== dateFilter.endDate))
-    ) {
-      getChartOptions(chartId, filtersChanged);
-    }
+    getChartOptions(); //when wouldn't you run this????? saw if statements before that implied you might not run this sometimes
+
     return () => {
       isSubscribed = false;
     };
-  }, [chartConfig, dateFilter, dashboardFilters]);
+  }, [dashboardFilters]);
 
   // console.log('DASHBOARD FILTERS: ', dashboardFilters);
 
   useEffect(() => {
     if (config) {
-      setChartConfig(config);
+      dispatch({
+        type: 'UPDATE_DASHBOARD_ITEM',
+        id: chartId,
+        data: { ...config },
+      });
     }
   }, [config]);
 
-  if (!chartConfig || loading) {
+  const dateFilter = Object.values(dashboardFilters).find(
+    filter => filter && filter.filterType === 'DATE_RANGE'
+  );
+
+  if (!dashboard[chartId] || loading) {
     return (
       <div
         // className="flex flex-col flex-1 h-[100%]"
@@ -841,18 +712,18 @@ const ChartUpdater: React.FC<ChartProps> = ({
     );
   }
 
-  if (chartConfig?.chartType === 'pie') {
-    const { xAxisField, yAxisFields } = chartConfig;
+  if (dashboard[chartId]?.chartType === 'pie') {
+    const { xAxisField, yAxisFields } = dashboard[chartId];
     return (
       <PieChart
         // @ts-ignore
         containerStyle={containerStyle}
-        data={chartConfig.rows.map(row => {
+        data={dashboard[chartId].rows.map(row => {
           return {
             ...row,
             count:
               parseInt(row[yAxisFields[0].field]) /
-              sumByKey(chartConfig.rows, yAxisFields[0].field),
+              sumByKey(dashboard[chartId].rows, yAxisFields[0].field),
           };
         })}
         category={yAxisFields[0].field}
@@ -863,48 +734,48 @@ const ChartUpdater: React.FC<ChartProps> = ({
     );
   }
 
-  if (chartConfig?.chartType === 'table') {
+  if (dashboard[chartId]?.chartType === 'table') {
     return (
       <TableChart
-        data={chartConfig.rows}
-        yAxisFields={chartConfig.yAxisFields}
+        data={dashboard[chartId].rows}
+        yAxisFields={dashboard[chartId].yAxisFields}
         theme={theme}
         containerStyle={containerStyle}
       />
     );
   }
 
-  if (chartConfig?.chartType === 'bar') {
+  if (dashboard[chartId]?.chartType === 'bar') {
     return (
       <BarList
-        data={chartConfig.rows}
+        data={dashboard[chartId].rows}
         theme={theme}
-        yAxisFields={chartConfig.yAxisFields}
-        xAxisFormat={chartConfig.xAxisFormat}
+        yAxisFields={dashboard[chartId].yAxisFields}
+        xAxisFormat={dashboard[chartId].xAxisFormat}
         colors={colors}
-        xAxisField={chartConfig.xAxisField}
+        xAxisField={dashboard[chartId].xAxisField}
         containerStyle={containerStyle}
       />
     );
   }
 
-  if (chartConfig?.chartType === 'column') {
+  if (dashboard[chartId]?.chartType === 'column') {
     return (
       <BarChart
         colors={colors}
         theme={theme}
-        yAxisFields={chartConfig.yAxisFields}
+        yAxisFields={dashboard[chartId].yAxisFields}
         // @ts-ignore
-        data={chartConfig.rows}
-        xAxisField={chartConfig.xAxisField}
-        xAxisLabel={chartConfig.xAxisLabel}
-        xAxisFormat={chartConfig.xAxisFormat}
+        data={dashboard[chartId].rows}
+        xAxisField={dashboard[chartId].xAxisField}
+        xAxisLabel={dashboard[chartId].xAxisLabel}
+        xAxisFormat={dashboard[chartId].xAxisFormat}
         containerStyle={containerStyle}
       />
     );
   }
 
-  if (chartConfig?.chartType === 'metric') {
+  if (dashboard[chartId]?.chartType === 'metric') {
     return (
       <div
         style={{
@@ -931,14 +802,14 @@ const ChartUpdater: React.FC<ChartProps> = ({
         }}
         // className="qq-flex qq-flex-col qq-text-xl"
       >
-        {chartConfig.rows.length > 0 &&
+        {dashboard[chartId].rows.length > 0 &&
           valueFormatter({
-            value: chartConfig.rows[0][chartConfig.xAxisField],
-            field: chartConfig.xAxisField,
+            value: dashboard[chartId].rows[0][dashboard[chartId].xAxisField],
+            field: dashboard[chartId].xAxisField,
             fields: [
               {
-                field: chartConfig.xAxisField,
-                format: chartConfig.xAxisFormat,
+                field: dashboard[chartId].xAxisField,
+                format: dashboard[chartId].xAxisFormat,
               },
             ],
           })}
@@ -949,12 +820,12 @@ const ChartUpdater: React.FC<ChartProps> = ({
   return (
     <LineChart
       colors={colors}
-      yAxisFields={chartConfig.yAxisFields}
+      yAxisFields={dashboard[chartId].yAxisFields}
       // @ts-ignore
-      data={chartConfig.rows}
-      xAxisField={chartConfig.xAxisField}
-      xAxisLabel={chartConfig.xAxisLabel}
-      xAxisFormat={chartConfig.xAxisFormat}
+      data={dashboard[chartId].rows}
+      xAxisField={dashboard[chartId].xAxisField}
+      xAxisLabel={dashboard[chartId].xAxisLabel}
+      xAxisFormat={dashboard[chartId].xAxisFormat}
       containerStyle={containerStyle}
       theme={theme}
     />

package/src/Context.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import React, { useState, createContext, useEffect, useReducer } from 'react';
 import { QuillTheme } from './QuillProvider';
@@ -33,8 +34,7 @@ export const EditVisualizationModalVisibleContext = createContext([
 export const ReportBuilderQueryContext = createContext(['', dummySetter]);
 export const SavedReportsQueryContext = createContext(['', dummySetter]);
 export const DashboardContext = createContext([{}, dummySetter]);
-export const DateFilterContext = createContext([{}, dummySetter]);
-export const DashboardFiltersContext = createContext({}, dummySetter);
+export const DashboardFiltersContext = createContext([{}, dummySetter]);
 
 const dashboardReducer = (state, action) => {
   switch (action.type) {
@@ -58,18 +58,6 @@ const dashboardReducer = (state, action) => {
   }
 };
 
-const dateFilterReducer = (state, action) => {
-  switch (action.type) {
-    case 'SET_GLOBAL_DATE_FILTER':
-      return {
-        ...state,
-        ...action.payload,
-      };
-    default:
-      return state;
-  }
-};
-
 const dashboardFiltersReducer = (state, action) => {
   switch (action.type) {
     case 'UPDATE_DASHBOARD_FILTER':
@@ -102,6 +90,7 @@ export const ContextProvider = ({
   userId,
   queryEndpoint,
   queryHeaders,
+  withCredentials,
 }) => {
   const [client, setClient] = useState(null);
   const [theme, setTheme] =
@@ -124,7 +113,6 @@ export const ContextProvider = ({
   const [editVisualizationModalVisible, setEditVisualizationModalVisible] =
     useState(false);
   const [dashboard, dispatch] = useReducer(dashboardReducer, {});
-  const [dateFilter, dateFilterDispatch] = useReducer(dateFilterReducer, {});
   const [dashboardFilters, dashboardFiltersDispatch] = useReducer(
     dashboardFiltersReducer,
     {}
@@ -148,6 +136,7 @@ export const ContextProvider = ({
         environment,
         queryEndpoint,
         queryHeaders,
+        withCredentials,
       });
     }
   }, [
@@ -158,6 +147,7 @@ export const ContextProvider = ({
     client,
     environment,
     queryEndpoint,
+    withCredentials,
     queryHeaders,
   ]);
 
@@ -233,21 +223,14 @@ export const ContextProvider = ({
                                     <DashboardContext.Provider
                                       value={{ dashboard, dispatch }}
                                     >
-                                      <DateFilterContext.Provider
+                                      <DashboardFiltersContext.Provider
                                         value={{
-                                          dateFilter,
-                                          dateFilterDispatch,
+                                          dashboardFilters,
+                                          dashboardFiltersDispatch,
                                         }}
                                       >
-                                        <DashboardFiltersContext.Provider
-                                          value={{
-                                            dashboardFilters,
-                                            dashboardFiltersDispatch,
-                                          }}
-                                        >
-                                          {children}
-                                        </DashboardFiltersContext.Provider>
-                                      </DateFilterContext.Provider>
+                                        {children}
+                                      </DashboardFiltersContext.Provider>
                                     </DashboardContext.Provider>
                                   </SavedReportsQueryContext.Provider>
                                 </ReportBuilderQueryContext.Provider>