@quillsql/react 1.6.8 → 1.7.0

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>

package/src/Dashboard.tsx

@@ -1,10 +1,10 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import React, { useContext, useEffect, useState, useRef } from 'react';
 import Chart from './Chart';
 import {
   ClientContext,
   DashboardContext,
-  DateFilterContext,
   ThemeContext,
   DashboardFiltersContext,
 } from './Context';
@@ -48,17 +48,9 @@ export default function Dashboard({
   const [client, _] = useContext(ClientContext);
   const [theme, _] =
     useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
-  const { dateFilter, dateFilterDispatch } = useContext(DateFilterContext);
   const { dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
   const [configFilters, setConfigFilters] = useState([]);
 
-  const setGlobalDateFilter = (startDate, endDate) => {
-    dateFilterDispatch({
-      type: 'SET_GLOBAL_DATE_FILTER',
-      payload: { startDate, endDate },
-    });
-  };
-
   React.useEffect(() => {
     async function getDashboards() {
       const {
@@ -67,13 +59,15 @@ export default function Dashboard({
         environment,
         queryEndpoint,
         queryHeaders,
+        withCredentials,
       } = client;
       try {
         // const response = await fetch(
         //   `https://quill-344421.uc.r.appspot.com/dashsections/${publicKey}/${customerId}/${name}`
         // );
 
-        if (queryEndpoint && queryHeaders) {
+        if (queryEndpoint) {
+          //&& queryHeaders
           const response = await axios.post(
             queryEndpoint,
             {
@@ -81,8 +75,10 @@ export default function Dashboard({
             },
             {
               headers: queryHeaders,
+              withCredentials,
             }
           );
+
           if (response.status !== 200) {
             throw new Error(`HTTP error! Status: ${response.status}`);
           }
@@ -120,17 +116,18 @@ export default function Dashboard({
     getDashboards();
   }, [name]);
 
-  const onChangeDateFilter = dateFilter => {
-    setGlobalDateFilter(dateFilter[0], dateFilter[1]);
-  };
-
   useEffect(() => {
     // change to be set on the dashboard / section as default date range
-    dateFilterDispatch({
-      type: 'SET_GLOBAL_DATE_FILTER',
-      payload: {
-        startDate: sub(startOfToday(), { days: 90 }),
-        endDate: new Date(),
+    const filter = {
+      startDate: sub(startOfToday(), { days: 90 }),
+      endDate: new Date(),
+      filterType: 'DATE_RANGE',
+    };
+    dashboardFiltersDispatch({
+      type: 'ADD_DASHBOARD_FILTER',
+      id: 'date_range',
+      data: {
+        ...filter,
       },
     });
   }, []);
@@ -141,10 +138,29 @@ export default function Dashboard({
     }
   };
 
+  const onChangeDateFilter = dateFilter => {
+    setGlobalDateFilter(dateFilter[0], dateFilter[1]);
+  };
+
+  const setGlobalDateFilter = (startDate, endDate) => {
+    const filter = {
+      startDate: startDate,
+      endDate: endDate,
+      filterType: 'DATE_RANGE',
+    };
+    dashboardFiltersDispatch({
+      type: 'ADD_DASHBOARD_FILTER',
+      id: 'date_range',
+      data: {
+        ...filter,
+      },
+    });
+  };
+
   const onChangeFilter = (value, filter) => {
     dashboardFiltersDispatch({
       type: 'ADD_DASHBOARD_FILTER',
-      id: filter._id,
+      id: 'date_range',
       data: {
         ...filter,
         selectedValue: filter.options.find(
@@ -391,7 +407,7 @@ export default function Dashboard({
                                         // marginBottom: 50,
                                         marginTop: 20,
                                       }}
-                                      isDateFilter={true}
+                                      dateFilter={true}
                                       chartId={elem._id}
                                       query={elem.queryString}
                                       // colors={theme.chartColors}
@@ -591,6 +607,7 @@ export default function Dashboard({
 }
 
 function Filter({ defaultValue, theme, onValueChange, filter }) {
+  //should be date as well as strings
   const dropdownOptions = [
     { value: 'popupbagelsmardens', text: 'popupbagelsmardens' },
     { value: 'popupbagelswestport', text: 'popupbagelswestport' },

package/src/QuillProvider.tsx

@@ -19,6 +19,7 @@ interface WithQueryEndpoint extends BaseQuillProviderProps {
   organizationId?: never;
   queryEndpoint: string;
   queryHeaders: object;
+  withCredentials?: boolean;
 }
 
 type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
@@ -60,6 +61,7 @@ const QuillProvider = ({
   environment,
   children,
   theme = defaultTheme,
+  withCredentials = false,
 }: QuillProviderProps) => {
   return (
     <ContextProvider
@@ -69,6 +71,7 @@ const QuillProvider = ({
       customerId={organizationId}
       queryEndpoint={queryEndpoint}
       queryHeaders={queryHeaders}
+      withCredentials={withCredentials}
     >
       {children}
     </ContextProvider>

package/src/ReportBuilder.tsx

@@ -161,15 +161,21 @@ export default function ReportBuilder({
   }, []);
 
   const runQuery = async query => {
-    const { publicKey, customerId, environment, queryEndpoint, queryHeaders } =
-      client;
+    const {
+      publicKey,
+      customerId,
+      environment,
+      queryEndpoint,
+      queryHeaders,
+      withCredentials,
+    } = client;
 
     let response;
     if (queryEndpoint) {
       response = await axios.post(
         queryEndpoint,
         { metadata: { query, task: 'query' } },
-        { headers: queryHeaders }
+        { headers: queryHeaders, withCredentials }
       );
     } else {
       response = await axios.post(