@quillsql/react 1.5.0 → 1.5.1

package/src/Dashboard.tsx

@@ -1,15 +1,21 @@
 // @ts-nocheck
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState, useRef } from 'react';
 import Chart from './Chart';
 import {
   ClientContext,
   DashboardContext,
   DateFilterContext,
   ThemeContext,
+  DashboardFiltersContext,
 } from './Context';
 import { startOfToday, sub } from 'date-fns';
 import { DateRangePicker } from './DateRangePicker/index';
 import axios from 'axios';
+import Modal from './components/Modal/Modal';
+import { HoveredValueContext, SelectedValueContext } from './contexts';
+import { DropdownItem } from './components/Dropdown';
+import { ArrowDownHeadIcon } from './assets';
+import { useInternalState, useSelectOnKeyDown } from './hooks';
 
 interface DashboardProps {
   name?: string;
@@ -42,6 +48,8 @@ export default function Dashboard({
   const [client, _] = useContext(ClientContext);
   const [theme, _] = useContext(ThemeContext);
   const { dateFilter, dateFilterDispatch } = useContext(DateFilterContext);
+  const { dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
+  const [configFilters, setConfigFilters] = useState([]);
 
   const setGlobalDateFilter = (startDate, endDate) => {
     dateFilterDispatch({
@@ -59,7 +67,7 @@ export default function Dashboard({
         // );
 
         const response = await axios.get(
-          'https://quill-344421.uc.r.appspot.com/dashsections',
+          'https://quill-344421.uc.r.appspot.com/dashconfig',
           {
             params: {
               publicKey: publicKey,
@@ -76,7 +84,8 @@ export default function Dashboard({
           throw new Error(`HTTP error! Status: ${response.status}`);
         }
 
-        setDashboardSections(response.data);
+        setDashboardSections(response.data.sections);
+        setConfigFilters(response.data.filters || []);
       } catch (error) {
         console.error('Error fetching data:', error);
       }
@@ -105,21 +114,68 @@ export default function Dashboard({
     }
   };
 
+  const onChangeFilter = (value, filter) => {
+    dashboardFiltersDispatch({
+      type: 'ADD_DASHBOARD_FILTER',
+      id: filter._id,
+      data: {
+        ...filter,
+        selectedValue: filter.options.find(
+          elem => elem[removeQuotes(filter.field)] === value[2]
+        )[removeQuotes(filter.field)],
+      },
+    });
+  };
+
   if (!dashboardSections) {
     return null;
   }
   return (
     <div style={containerStyle}>
-      {!hideDateFilter ? (
-        <div style={{ width: 420, marginBottom: 25, marginLeft: 25 }}>
-          <DateRangePicker
-            // change to be set on the dashboard / section as default date range
-            defaultValue={[undefined, undefined, '90d']}
-            onValueChange={onChangeDateFilter}
-            theme={theme}
-          />
+      <div
+        style={{
+          display: 'flex',
+          boxSizing: 'content-box',
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        {!hideDateFilter ? (
+          <div style={{ width: 420, marginBottom: 25, marginLeft: 25 }}>
+            <div
+              style={{
+                marginBottom: 6,
+                fontWeight: '600',
+                color: theme.secondaryTextColor,
+                fontSize: 14,
+              }}
+            >
+              Date
+            </div>
+            <DateRangePicker
+              // change to be set on the dashboard / section as default date range
+              defaultValue={[undefined, undefined, '90d']}
+              onValueChange={onChangeDateFilter}
+              theme={theme}
+            />
+          </div>
+        ) : null}
+        <div style={{ width: 280, marginBottom: 25, marginLeft: 25 }}>
+          {configFilters.map((elem, index) => (
+            <Filter
+              key={'filter' + configFilters.field + index}
+              onValueChange={value => onChangeFilter(value, elem)}
+              defaultValue={[
+                undefined,
+                undefined,
+                elem.options[removeQuotes(elem.field)],
+              ]}
+              theme={theme}
+              filter={elem}
+            />
+          ))}
         </div>
-      ) : null}
+      </div>
       {Object.keys(dashboardSections)
         .sort(function (a, b) {
           return a.length - b.length;
@@ -504,3 +560,214 @@ export default function Dashboard({
     </div>
   );
 }
+
+function Filter({ defaultValue, theme, onValueChange, filter }) {
+  const dropdownOptions = [
+    { value: 'popupbagelsmardens', text: 'popupbagelsmardens' },
+    { value: 'popupbagelswestport', text: 'popupbagelswestport' },
+    { value: 'popupbagelseasthampton', text: 'popupbagelseasthampton' },
+    { value: 'popupbagelsgreenwich', text: 'popupbagelsgreenwich' },
+    { value: 'popupbagelsredding', text: 'popupbagelsredding' },
+    { value: 'popupbagelsthompson', text: 'popupbagelsthompson' },
+  ];
+  const dropdownRef = useRef(null);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [selectedValue, setSelectedValue] = useInternalState(
+    defaultValue,
+    undefined
+  );
+  const selectedDropdownValue = selectedValue ? selectedValue[2] ?? null : null;
+
+  const handleDropdownOptionClick = (dropdownValue: string) => {
+    setSelectedValue([undefined, undefined, dropdownValue]);
+    onValueChange?.([undefined, undefined, dropdownValue]);
+    setShowDropdown(false);
+  };
+
+  const [hoveredDropdownValue, handleDropdownKeyDown] = useSelectOnKeyDown(
+    handleDropdownOptionClick,
+    dropdownOptions.map((option: DateRangePickerOption) => option.value),
+    showDropdown,
+    setShowDropdown,
+    selectedDropdownValue as string
+  );
+
+  return (
+    <div style={{ position: 'relative', width: '100%' }}>
+      <div
+        style={{
+          marginBottom: 6,
+          fontWeight: '600',
+          color: theme.secondaryTextColor,
+          fontSize: 14,
+        }}
+      >
+        {filter.label}
+      </div>
+      <FilterDropdown
+        showDropdown={showDropdown}
+        setShowDropdown={setShowDropdown}
+        handleDropdownKeyDown={handleDropdownKeyDown}
+        dropdownRef={dropdownRef}
+        theme={theme}
+        selectedDropdownValue={selectedDropdownValue}
+        dropdownOptions={filter.options}
+        field={filter.field}
+        label={filter.labelField}
+      />
+      <FilterModal
+        showDropdown={showDropdown}
+        setShowDropdown={setShowDropdown}
+        dropdownRef={dropdownRef}
+        theme={theme}
+        hoveredDropdownValue={hoveredDropdownValue}
+        selectedDropdownValue={selectedDropdownValue}
+        dropdownOptions={filter.options}
+        handleDropdownOptionClick={handleDropdownOptionClick}
+        field={filter.field}
+        label={filter.labelField}
+      />
+    </div>
+  );
+}
+
+function removeQuotes(str) {
+  if (str.startsWith('"') && str.endsWith('"')) {
+    return str.slice(1, -1);
+  } else {
+    return str;
+  }
+}
+
+function FilterDropdown({
+  setShowDropdown,
+  dropdownRef,
+  showDropdown,
+  handleDropdownKeyDown,
+  theme,
+  dropdownPlaceholder = 'Select',
+  selectedDropdownValue,
+  dropdownOptions,
+  field,
+  label,
+}) {
+  const dropdownText = selectedDropdownValue
+    ? String(
+        dropdownOptions.find(
+          option => option[removeQuotes(field)] === selectedDropdownValue
+        )[removeQuotes(label)]
+      )
+    : dropdownPlaceholder;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderRadius: '0.375rem',
+        background: theme?.backgroundColor,
+        fontFamily: theme?.fontFamily,
+        boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+      }}
+    >
+      <button
+        type="button"
+        style={{
+          // fontFamily: theme?.fontFamily,
+          borderColor: theme?.borderColor || '#E5E7EB',
+          borderStyle: 'solid',
+          borderWidth: 1,
+          cursor: 'pointer',
+          marginLeft: -1,
+          borderRadius: '0.375rem',
+          // width: '12rem',
+          width: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          paddingLeft: '1rem',
+          paddingRight: '1rem',
+          display: 'inline-flex',
+          minHeight: 38,
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          background: theme?.backgroundColor,
+          fontSize: theme?.fontSizeSmall || '0.875rem',
+          // fontWeight: theme?.fontWeightMedium || '800',
+        }}
+        ref={dropdownRef}
+        onClick={() => setShowDropdown(!showDropdown)}
+        onKeyDown={handleDropdownKeyDown}
+        // disabled={disabled}
+      >
+        <p
+          style={{
+            margin: 0,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor || '#364153',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            fontWeight: theme?.fontWeightMedium || '500',
+            fontSize: theme?.fontSizeSmall || '0.875rem',
+          }}
+        >
+          {dropdownText}
+        </p>
+        <ArrowDownHeadIcon
+          style={{
+            height: '1.25rem',
+            width: '1.25rem',
+            flex: 'none',
+            color: theme?.secondaryTextColor,
+            marginRight: '-0.25rem',
+          }}
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+  );
+}
+
+function FilterModal({
+  setShowDropdown,
+  dropdownRef,
+  showDropdown,
+  theme,
+  selectedDropdownValue,
+  hoveredDropdownValue,
+  dropdownOptions,
+  handleDropdownOptionClick,
+  field,
+  label,
+}) {
+  return (
+    <Modal
+      showModal={showDropdown}
+      setShowModal={setShowDropdown}
+      parentRef={dropdownRef}
+      theme={theme}
+    >
+      <SelectedValueContext.Provider
+        value={{
+          selectedValue: selectedDropdownValue,
+          handleValueChange: handleDropdownOptionClick,
+        }}
+      >
+        <HoveredValueContext.Provider
+          value={{ hoveredValue: hoveredDropdownValue }}
+        >
+          {dropdownOptions.map((row, index: number) => (
+            <DropdownItem
+              key={row[removeQuotes(field)]}
+              value={row[removeQuotes(field)]}
+              text={row[removeQuotes(label)]}
+              theme={theme}
+              lastItem={dropdownOptions.length - 1 === index}
+            />
+          ))}
+        </HoveredValueContext.Provider>
+      </SelectedValueContext.Provider>
+    </Modal>
+  );
+}

package/src/components/Dropdown/DropdownItem.tsx

@@ -32,7 +32,7 @@ const DropdownItem = React.forwardRef<HTMLButtonElement, DropdownItemProps>(
           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/src/hooks/useQuill.ts

@@ -2,40 +2,63 @@ import { useContext, useEffect, useState } from 'react';
 import { ClientContext, DashboardContext } from '../Context';
 import axios from 'axios';
 
-export const useQuill = (chartId: string) => {
+interface Report {
+  name: string;
+  rows: any[];
+  columns: Array<{ name: string }>;
+}
+
+export const useQuill = (
+  chartId: string
+): {
+  data: Report | null;
+  loading: boolean;
+  error: string | null;
+} => {
   // @ts-ignore
   const { dashboard, dispatch } = useContext(DashboardContext);
   const [client] = useContext(ClientContext);
-  const [report, setReport] = useState(null);
+  const [data, setData] = useState<Report | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     let isSubscribed = true;
     async function getChartOptions(id: string) {
       if (isSubscribed) {
         if (dashboard[id]) {
-          setReport(dashboard[id]);
+          setData(dashboard[id]);
           return;
         }
         // @ts-ignore
         const { publicKey, customerId, environment } = client;
-        const resp = await axios.get(
-          'https://quill-344421.uc.r.appspot.com/item',
-          {
-            params: {
-              id: chartId,
-              orgId: customerId,
-              publicKey: publicKey,
-            },
-            headers: {
-              environment: environment || undefined,
-            },
+        try {
+          const resp = await axios.get(
+            'https://quill-344421.uc.r.appspot.com/item',
+            {
+              params: {
+                id: chartId,
+                orgId: customerId,
+                publicKey: publicKey,
+              },
+              headers: {
+                environment: environment || undefined,
+              },
+            }
+          );
+          setLoading(false);
+          setData(resp.data);
+          dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
+        } catch (e) {
+          if (typeof e === 'string' || (typeof e === 'object' && e !== null)) {
+            setError(stringifyIfObject(e));
+          } else {
+            setError('error');
           }
-        );
-        setReport(resp.data);
-        dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
+        }
       }
     }
-    if (chartId && !report) {
+    if (chartId && !data) {
       getChartOptions(chartId);
     }
     return () => {
@@ -43,5 +66,16 @@ export const useQuill = (chartId: string) => {
     };
   }, [chartId, dashboard]);
 
-  return report;
+  return { data, loading, error };
 };
+
+function stringifyIfObject(e: string | object) {
+  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
+}