@quillsql/react 1.5.0 → 1.5.1

package/lib/components/Dropdown/DropdownItem.js

@@ -38,7 +38,7 @@ var DropdownItem = React.forwardRef(function (props, ref) {
             width: '100%',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
-            padding: '0.75rem 2rem',
+            padding: '0.75rem 1.25rem',
             fontSize: '0.875rem',
             borderStyle: 'solid',
             borderBottomWidth: lastItem ? '0px' : '1px',

package/lib/components/Dropdown/DropdownItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAW3E,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,UAAC,KAAK,EAAE,GAAG;IACD,IAAA,KAAK,GAAuD,KAAK,MAA5D,EAAE,IAAI,GAAiD,KAAK,KAAtD,EAAE,IAAI,GAA2C,KAAK,KAAhD,EAAE,SAAS,GAAgC,KAAK,UAArC,EAAE,KAAK,GAAyB,KAAK,MAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAK,KAAK,UAAK,KAAK,EAAnE,2DAA2D,CAAF,CAAW;IACpE,IAAA,KACJ,UAAU,CAAC,oBAAoB,CAAC,EAD1B,aAAa,mBAAA,EAAE,iBAAiB,uBACN,CAAC;IAC3B,IAAA,YAAY,GAAK,UAAU,CAAC,mBAAmB,CAAC,aAApC,CAAqC;IACzD,IAAM,QAAQ,GAAG,aAAa,KAAK,KAAK,CAAC;IACzC,IAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;IAEzC,IAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChC,OAAO,CACL,0BACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,OAAO;YACvB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,OAAO,EAAE,cAAc;YACvB,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,OAAO;YACpB,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,SAAS;YAClD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO;YAC7C,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,KAAI,SAAS;SAC5C,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,KAAK,CAAC,EAA1B,CAA0B,IACrC,KAAK,cAET,qBACE,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU;gBAC7B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB;gBAC9B,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;aACzB,gBAEA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,IACZ,IACG,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA,uCAAuC;AACvC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAW3E,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,UAAC,KAAK,EAAE,GAAG;IACD,IAAA,KAAK,GAAuD,KAAK,MAA5D,EAAE,IAAI,GAAiD,KAAK,KAAtD,EAAE,IAAI,GAA2C,KAAK,KAAhD,EAAE,SAAS,GAAgC,KAAK,UAArC,EAAE,KAAK,GAAyB,KAAK,MAA9B,EAAE,QAAQ,GAAe,KAAK,SAApB,EAAK,KAAK,UAAK,KAAK,EAAnE,2DAA2D,CAAF,CAAW;IACpE,IAAA,KACJ,UAAU,CAAC,oBAAoB,CAAC,EAD1B,aAAa,mBAAA,EAAE,iBAAiB,uBACN,CAAC;IAC3B,IAAA,YAAY,GAAK,UAAU,CAAC,mBAAmB,CAAC,aAApC,CAAqC;IACzD,IAAM,QAAQ,GAAG,aAAa,KAAK,KAAK,CAAC;IACzC,IAAM,SAAS,GAAG,YAAY,KAAK,KAAK,CAAC;IAEzC,IAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAChC,OAAO,CACL,0BACE,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,OAAO;YACvB,KAAK,EAAE,MAAM;YACb,QAAQ,EAAE,QAAQ;YAClB,YAAY,EAAE,UAAU;YACxB,OAAO,EAAE,iBAAiB;YAC1B,QAAQ,EAAE,UAAU;YACpB,WAAW,EAAE,OAAO;YACpB,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,KAAI,SAAS;YAClD,UAAU,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,KAAI,OAAO;YAC7C,SAAS,EAAE,MAAM;YACjB,WAAW,EAAE,MAAM;YACnB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,KAAI,SAAS;SAC5C,EACD,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAM,OAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAG,KAAK,CAAC,EAA1B,CAA0B,IACrC,KAAK,cAET,qBACE,KAAK,EAAE;gBACL,MAAM,EAAE,CAAC;gBACT,UAAU,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU;gBAC7B,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB;gBAC9B,UAAU,EAAE,QAAQ;gBACpB,QAAQ,EAAE,QAAQ;gBAClB,YAAY,EAAE,UAAU;aACzB,gBAEA,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,IACZ,IACG,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/hooks/useQuill.d.ts

@@ -1 +1,13 @@
-export declare const useQuill: (chartId: string) => null;
+interface Report {
+    name: string;
+    rows: any[];
+    columns: Array<{
+        name: string;
+    }>;
+}
+export declare const useQuill: (chartId: string) => {
+    data: Report | null;
+    loading: boolean;
+    error: string | null;
+};
+export {};

package/lib/hooks/useQuill.js

@@ -41,21 +41,26 @@ export var useQuill = function (chartId) {
     // @ts-ignore
     var _a = useContext(DashboardContext), dashboard = _a.dashboard, dispatch = _a.dispatch;
     var client = useContext(ClientContext)[0];
-    var _b = useState(null), report = _b[0], setReport = _b[1];
+    var _b = useState(null), data = _b[0], setData = _b[1];
+    var _c = useState(true), loading = _c[0], setLoading = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
     useEffect(function () {
         var isSubscribed = true;
         function getChartOptions(id) {
             return __awaiter(this, void 0, void 0, function () {
-                var publicKey, customerId, environment, resp;
+                var publicKey, customerId, environment, resp, e_1;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
-                            if (!isSubscribed) return [3 /*break*/, 2];
+                            if (!isSubscribed) return [3 /*break*/, 4];
                             if (dashboard[id]) {
-                                setReport(dashboard[id]);
+                                setData(dashboard[id]);
                                 return [2 /*return*/];
                             }
                             publicKey = client.publicKey, customerId = client.customerId, environment = client.environment;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, axios.get('https://quill-344421.uc.r.appspot.com/item', {
                                     params: {
                                         id: chartId,
@@ -66,23 +71,44 @@ export var useQuill = function (chartId) {
                                         environment: environment || undefined,
                                     },
                                 })];
-                        case 1:
+                        case 2:
                             resp = _a.sent();
-                            setReport(resp.data);
+                            setLoading(false);
+                            setData(resp.data);
                             dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id: id, data: resp.data });
-                            _a.label = 2;
-                        case 2: return [2 /*return*/];
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _a.sent();
+                            if (typeof e_1 === 'string' || (typeof e_1 === 'object' && e_1 !== null)) {
+                                setError(stringifyIfObject(e_1));
+                            }
+                            else {
+                                setError('error');
+                            }
+                            return [3 /*break*/, 4];
+                        case 4: return [2 /*return*/];
                     }
                 });
             });
         }
-        if (chartId && !report) {
+        if (chartId && !data) {
             getChartOptions(chartId);
         }
         return function () {
             isSubscribed = false;
         };
     }, [chartId, dashboard]);
-    return report;
+    return { data: data, loading: loading, error: error };
 };
+function stringifyIfObject(e) {
+    if (typeof e === 'string') {
+        // do nothing if e is a string
+        return e;
+    }
+    else if (typeof e === 'object' && e !== null) {
+        // stringify e if it's an object
+        return JSON.stringify(e);
+    }
+    return e; // returns the input as is for other types
+}
 //# sourceMappingURL=useQuill.js.map

package/lib/hooks/useQuill.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQuill.js","sourceRoot":"","sources":["../../src/hooks/useQuill.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,OAAe;IACtC,aAAa;IACP,IAAA,KAA0B,UAAU,CAAC,gBAAgB,CAAC,EAApD,SAAS,eAAA,EAAE,QAAQ,cAAiC,CAAC;IACtD,IAAA,MAAM,GAAI,UAAU,CAAC,aAAa,CAAC,GAA7B,CAA8B;IACrC,IAAA,KAAsB,QAAQ,CAAC,IAAI,CAAC,EAAnC,MAAM,QAAA,EAAE,SAAS,QAAkB,CAAC;IAE3C,SAAS,CAAC;QACR,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,SAAe,eAAe,CAAC,EAAU;;;;;;iCACnC,YAAY,EAAZ,wBAAY;4BACd,IAAI,SAAS,CAAC,EAAE,CAAC,EAAE;gCACjB,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;gCACzB,sBAAO;6BACR;4BAEO,SAAS,GAA8B,MAAM,UAApC,EAAE,UAAU,GAAkB,MAAM,WAAxB,EAAE,WAAW,GAAK,MAAM,YAAX,CAAY;4BACzC,qBAAM,KAAK,CAAC,GAAG,CAC1B,4CAA4C,EAC5C;oCACE,MAAM,EAAE;wCACN,EAAE,EAAE,OAAO;wCACX,KAAK,EAAE,UAAU;wCACjB,SAAS,EAAE,SAAS;qCACrB;oCACD,OAAO,EAAE;wCACP,WAAW,EAAE,WAAW,IAAI,SAAS;qCACtC;iCACF,CACF,EAAA;;4BAZK,IAAI,GAAG,SAYZ;4BACD,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;4BACrB,QAAQ,CAAC,EAAE,IAAI,EAAE,uBAAuB,EAAE,EAAE,IAAA,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;;;;;SAEpE;QACD,IAAI,OAAO,IAAI,CAAC,MAAM,EAAE;YACtB,eAAe,CAAC,OAAO,CAAC,CAAC;SAC1B;QACD,OAAO;YACL,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"file":"useQuill.js","sourceRoot":"","sources":["../../src/hooks/useQuill.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,CAAC,IAAM,QAAQ,GAAG,UACtB,OAAe;IAMf,aAAa;IACP,IAAA,KAA0B,UAAU,CAAC,gBAAgB,CAAC,EAApD,SAAS,eAAA,EAAE,QAAQ,cAAiC,CAAC;IACtD,IAAA,MAAM,GAAI,UAAU,CAAC,aAAa,CAAC,GAA7B,CAA8B;IACrC,IAAA,KAAkB,QAAQ,CAAgB,IAAI,CAAC,EAA9C,IAAI,QAAA,EAAE,OAAO,QAAiC,CAAC;IAChD,IAAA,KAAwB,QAAQ,CAAC,IAAI,CAAC,EAArC,OAAO,QAAA,EAAE,UAAU,QAAkB,CAAC;IACvC,IAAA,KAAoB,QAAQ,CAAgB,IAAI,CAAC,EAAhD,KAAK,QAAA,EAAE,QAAQ,QAAiC,CAAC;IAExD,SAAS,CAAC;QACR,IAAI,YAAY,GAAG,IAAI,CAAC;QACxB,SAAe,eAAe,CAAC,EAAU;;;;;;iCACnC,YAAY,EAAZ,wBAAY;4BACd,IAAI,SAAS,CAAC,EAAE,CAAC,EAAE;gCACjB,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;gCACvB,sBAAO;6BACR;4BAEO,SAAS,GAA8B,MAAM,UAApC,EAAE,UAAU,GAAkB,MAAM,WAAxB,EAAE,WAAW,GAAK,MAAM,YAAX,CAAY;;;;4BAEvC,qBAAM,KAAK,CAAC,GAAG,CAC1B,4CAA4C,EAC5C;oCACE,MAAM,EAAE;wCACN,EAAE,EAAE,OAAO;wCACX,KAAK,EAAE,UAAU;wCACjB,SAAS,EAAE,SAAS;qCACrB;oCACD,OAAO,EAAE;wCACP,WAAW,EAAE,WAAW,IAAI,SAAS;qCACtC;iCACF,CACF,EAAA;;4BAZK,IAAI,GAAG,SAYZ;4BACD,UAAU,CAAC,KAAK,CAAC,CAAC;4BAClB,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;4BACnB,QAAQ,CAAC,EAAE,IAAI,EAAE,uBAAuB,EAAE,EAAE,IAAA,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;;;4BAEjE,IAAI,OAAO,GAAC,KAAK,QAAQ,IAAI,CAAC,OAAO,GAAC,KAAK,QAAQ,IAAI,GAAC,KAAK,IAAI,CAAC,EAAE;gCAClE,QAAQ,CAAC,iBAAiB,CAAC,GAAC,CAAC,CAAC,CAAC;6BAChC;iCAAM;gCACL,QAAQ,CAAC,OAAO,CAAC,CAAC;6BACnB;;;;;;SAGN;QACD,IAAI,OAAO,IAAI,CAAC,IAAI,EAAE;YACpB,eAAe,CAAC,OAAO,CAAC,CAAC;SAC1B;QACD,OAAO;YACL,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,OAAO,EAAE,IAAI,MAAA,EAAE,OAAO,SAAA,EAAE,KAAK,OAAA,EAAE,CAAC;AAClC,CAAC,CAAC;AAEF,SAAS,iBAAiB,CAAC,CAAkB;IAC3C,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE;QACzB,8BAA8B;QAC9B,OAAO,CAAC,CAAC;KACV;SAAM,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI,EAAE;QAC9C,gCAAgC;QAChC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;KAC1B;IACD,OAAO,CAAC,CAAC,CAAC,0CAA0C;AACtD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",

package/src/Chart.tsx

@@ -23,6 +23,7 @@ import {
   DashboardContext,
   DateFilterContext,
   ThemeContext,
+  DashboardFiltersContext,
 } from './Context';
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
@@ -555,6 +556,7 @@ const Chart = ({
 }) => {
   const { dispatch, dashboard } = useContext(DashboardContext);
   const { dateFilterObj } = useContext(DateFilterContext);
+  const { dashboardFilters } = useContext(DashboardFiltersContext);
   const [client, _] = useContext(ClientContext);
   const [theme] = useContext(ThemeContext);
   const chartColors = useMemo(() => {
@@ -572,10 +574,69 @@ const Chart = ({
       client={client}
       theme={theme}
       isDateFilter={dateFilter}
+      dashboardFilters={dashboardFilters}
     />
   );
 };
 
+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,
@@ -587,6 +648,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
   client,
   theme,
   isDateFilter,
+  dashboardFilters,
 }) => {
   const [chartConfig, setChartConfig] = useState<any>(config || null);
   const [loading, setLoading] = useState(true);
@@ -601,11 +663,12 @@ const ChartUpdater: React.FC<ChartProps> = ({
     }
 
     let isSubscribed = true;
-    async function getChartOptions(id: string) {
+    async function getChartOptions(id: string, filtersChanged: boolean) {
       if (isSubscribed) {
         if (
           dashboard &&
           dashboard[id] &&
+          !filtersChanged &&
           (!isDateFilter ||
             dashboard[id].startDate === dateFilter.startDate ||
             dashboard[id].endDate === dateFilter.endDate)
@@ -620,6 +683,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
             rows,
             startDate,
             endDate,
+            filters,
           } = dashboard[id];
           setChartConfig({
             xAxisField,
@@ -631,11 +695,13 @@ const ChartUpdater: React.FC<ChartProps> = ({
             rows,
             startDate,
             endDate,
+            filters,
           });
           setLoading(false);
           return;
         }
         const { publicKey, customerId, environment } = client;
+
         setLoading(true);
         try {
           const resp = await axios.get(
@@ -645,14 +711,17 @@ const ChartUpdater: React.FC<ChartProps> = ({
                 id: chartId,
                 orgId: customerId,
                 publicKey: publicKey,
-                startDate:
-                  dateFilter &&
-                  dateFilter.startDate &&
-                  dateFilter.startDate.toISOString(),
-                endDate:
-                  dateFilter &&
-                  dateFilter.endDate &&
-                  dateFilter.endDate.toISOString(),
+                filters: Object.keys(dashboardFilters).map(
+                  key => dashboardFilters[key]
+                ),
+                // startDate:
+                //   dateFilter &&
+                //   dateFilter.startDate &&
+                //   dateFilter.startDate.toISOString(),
+                // endDate:
+                //   dateFilter &&
+                //   dateFilter.endDate &&
+                //   dateFilter.endDate.toISOString(),
               },
               headers: {
                 environment: environment || undefined,
@@ -680,9 +749,14 @@ const ChartUpdater: React.FC<ChartProps> = ({
               rows,
               startDate: dateFilter && dateFilter.startDate,
               endDate: dateFilter && dateFilter.endDate,
+              filters: dashboardFilters,
             });
             setLoading(false);
-            dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
+            dispatch({
+              type: 'UPDATE_DASHBOARD_ITEM',
+              id,
+              data: { ...resp.data, filters: dashboardFilters },
+            });
           }
         } catch (e) {
           console.log('Error fetching chart: ', e);
@@ -694,8 +768,14 @@ const ChartUpdater: React.FC<ChartProps> = ({
       setLoading(false);
       return;
     }
+    const filtersChanged = didFiltersChange(
+      dashboardFilters,
+      chartConfig?.filters
+    );
+
     if (
       (chartId && !chartConfig) ||
+      (chartId && chartConfig && filtersChanged) ||
       (chartId &&
         chartConfig &&
         isDateFilter &&
@@ -703,12 +783,14 @@ const ChartUpdater: React.FC<ChartProps> = ({
         (chartConfig.startDate !== dateFilter.startDate ||
           chartConfig.endDate !== dateFilter.endDate))
     ) {
-      getChartOptions(chartId);
+      getChartOptions(chartId, filtersChanged);
     }
     return () => {
       isSubscribed = false;
     };
-  }, [chartConfig, dateFilter]);
+  }, [chartConfig, dateFilter, dashboardFilters]);
+
+  // console.log('DASHBOARD FILTERS: ', dashboardFilters);
 
   useEffect(() => {
     if (config) {

package/src/Context.tsx

@@ -31,6 +31,7 @@ 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);
 
 const dashboardReducer = (state, action) => {
   switch (action.type) {
@@ -66,6 +67,28 @@ const dateFilterReducer = (state, action) => {
   }
 };
 
+const dashboardFiltersReducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_DASHBOARD_FILTER':
+      return {
+        ...state,
+        [action.id]: {
+          ...state[action.id],
+          ...action.data,
+        },
+      };
+    case 'ADD_DASHBOARD_FILTER':
+      return {
+        ...state,
+        [action.id]: action.data,
+      };
+    case 'CLEAR_DASHBOARD_FILTERS':
+      return {};
+    default:
+      return state;
+  }
+};
+
 export const ContextProvider = ({
   children,
   containerStyle,
@@ -97,6 +120,10 @@ export const ContextProvider = ({
     useState(false);
   const [dashboard, dispatch] = useReducer(dashboardReducer, {});
   const [dateFilter, dateFilterDispatch] = useReducer(dateFilterReducer, {});
+  const [dashboardFilters, dashboardFiltersDispatch] = useReducer(
+    dashboardFiltersReducer,
+    {}
+  );
 
   // SETS INITIAL THEME
   useEffect(() => {
@@ -196,7 +223,14 @@ export const ContextProvider = ({
                                           dateFilterDispatch,
                                         }}
                                       >
-                                        {children}
+                                        <DashboardFiltersContext.Provider
+                                          value={{
+                                            dashboardFilters,
+                                            dashboardFiltersDispatch,
+                                          }}
+                                        >
+                                          {children}
+                                        </DashboardFiltersContext.Provider>
                                       </DateFilterContext.Provider>
                                     </DashboardContext.Provider>
                                   </SavedReportsQueryContext.Provider>