@quillsql/react 1.7.4 → 1.7.6

package/src/Dashboard.tsx

@@ -1,819 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-import React, { useContext, useEffect, useState, useRef } from 'react';
-import Chart from './Chart';
-import {
-  ClientContext,
-  DashboardContext,
-  ThemeContext,
-  DashboardFiltersContext,
-} from './Context';
-import { startOfToday, sub } from 'date-fns';
-import { DateRangePicker } from './DateRangePicker/index';
-import axios from 'axios/index';
-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;
-  containerStyle?: React.CSSProperties;
-  maxColumnWidth?: number;
-  rowHeight?: number;
-  onClickDashboardItem?: (item: any) => void;
-  hideDateFilter?: boolean;
-}
-
-// const theme = {
-//   fontFamily: 'Inter; Helvetica',
-//   primaryTextColor: '#212121',
-//   secondaryTextColor: '#6C727F',
-//   chartLabelColor: '#666666',
-//   chartTickColor: '#CCCCCC',
-//   chartColors: ['#6269E9', '#E14F62'],
-// };
-
-export default function Dashboard({
-  name,
-  containerStyle,
-  maxColumnWidth,
-  rowHeight,
-  onClickDashboardItem,
-  hideDateFilter,
-}: DashboardProps) {
-  const [dashboardSections, setDashboardSections] = useState<any>(null);
-  const { dashboard } = useContext(DashboardContext);
-  const [client] = useContext(ClientContext);
-  const [theme] =
-    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
-  const { dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
-  const [configFilters, setConfigFilters] = useState([]);
-
-  React.useEffect(() => {
-    async function getDashboards() {
-      const {
-        publicKey,
-        customerId,
-        environment,
-        queryEndpoint,
-        queryHeaders,
-      } = client;
-      try {
-        // const response = await fetch(
-        //   `https://quill-344421.uc.r.appspot.com/dashsections/${publicKey}/${customerId}/${name}`
-        // );
-
-        if (queryEndpoint) {
-          //&& queryHeaders
-          // @ts-ignore
-          const response = await axios.post(
-            queryEndpoint,
-            {
-              metadata: { name, task: 'config' },
-            },
-            {
-              headers: queryHeaders,
-            }
-          );
-
-          if (response.status !== 200) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-          }
-
-          setDashboardSections(response.data.sections);
-          setConfigFilters(response.data.filters || []);
-          return;
-        }
-
-        const response = await axios.get(
-          'https://quill-344421.uc.r.appspot.com/dashconfig',
-          {
-            params: {
-              publicKey: publicKey,
-              orgId: customerId,
-              name: name,
-              task: 'dashconfig',
-            },
-            headers: {
-              environment: environment || undefined,
-            },
-          }
-        );
-
-        if (response.status !== 200) {
-          throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-
-        setDashboardSections(response.data.sections);
-        setConfigFilters(response.data.filters || []);
-      } catch (error) {
-        console.error('Error fetching data:', error);
-      }
-    }
-    getDashboards();
-  }, [name]);
-
-  useEffect(() => {
-    // change to be set on the dashboard / section as default date range
-    const filter = {
-      startDate: sub(startOfToday(), { days: 90 }),
-      endDate: new Date(),
-      filterType: 'DATE_RANGE',
-    };
-    dashboardFiltersDispatch({
-      type: 'ADD_DASHBOARD_FILTER',
-      id: 'date_range',
-      data: {
-        ...filter,
-      },
-    });
-  }, []);
-
-  const handleOnClickDashboardItem = id => {
-    if (dashboard[id]) {
-      onClickDashboardItem(dashboard[id]);
-    }
-  };
-
-  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: 'date_range',
-      data: {
-        ...filter,
-        selectedValue: filter.options.find(
-          elem => elem[removeQuotes(filter.field)] === value[2]
-        )[removeQuotes(filter.field)],
-      },
-    });
-  };
-
-  if (!dashboardSections) {
-    return null;
-  }
-  return (
-    <div style={containerStyle}>
-      <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,
-                fontFamily: theme.fontFamily,
-                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>
-      </div>
-      {Object.keys(dashboardSections)
-        .sort(function (a, b) {
-          return a.length - b.length;
-        })
-        .map((section, sectionIndex) => {
-          return (
-            <div
-              style={{
-                width: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-              }}
-              key={section + '' + sectionIndex}
-            >
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                <div style={{ height: sectionIndex > 0 ? 25 : 0 }} />
-                {section && (
-                  <h1
-                    style={{
-                      fontSize: 22,
-                      color: theme.primaryTextColor,
-                      fontFamily: theme.fontFamily,
-                      fontWeight: 'bold',
-                      // fontWeight: theme.headerFontWeight,
-                      marginBottom: 16,
-                      marginLeft: 25,
-                      textAlign: 'left',
-                      marginTop: 12,
-                    }}
-                  >
-                    {section}
-                  </h1>
-                )}
-              </div>
-              {dashboardSections[section].filter(
-                elem => elem.chartType === 'metric'
-              ).length ? (
-                <div
-                  style={{
-                    boxSizing: 'content-box',
-                    width: `100%`,
-                    listStyleType: 'none',
-                    marginBottom: 50,
-                    display: 'grid',
-                    gridGap: 25,
-                    gridTemplateColumns: `repeat(auto-fill,minmax(${
-                      maxColumnWidth || 400
-                    }px, 1fr))`,
-                    gridTemplateRows: `repeat(${170}px)`,
-                  }}
-                >
-                  {dashboardSections[section]
-                    .filter(elem => elem.chartType === 'metric')
-                    .map(
-                      (
-                        elem: {
-                          name:
-                            | string
-                            | number
-                            | boolean
-                            | React.ReactElement<
-                                any,
-                                string | React.JSXElementConstructor<any>
-                              >
-                            | React.ReactFragment
-                            | null
-                            | undefined;
-                          _id: string | undefined;
-                        },
-                        index: string
-                      ) => {
-                        return (
-                          <div
-                            onClick={
-                              onClickDashboardItem
-                                ? () => handleOnClickDashboardItem(elem._id)
-                                : undefined
-                            }
-                            // className={
-                            //   onClickDashboardItem
-                            //     ? 'hover:qq-bg-zinc-50'
-                            //     : undefined
-                            // }
-                            key={elem.name + '' + index}
-                            style={{
-                              // background: theme.elevatedCardColor,
-                              // borderRadius: theme.borderRadius,
-                              // boxShadow: theme.boxShadow,
-                              paddingTop: 12,
-                              boxSizing: 'content-box',
-                              borderRadius: 8,
-                              height: '100%',
-                              cursor: 'pointer',
-                              width: '100%',
-                            }}
-                          >
-                            <div
-                              // className="group-hover:bg-black"
-                              style={{
-                                width: '100%',
-                                boxSizing: 'content-box',
-                                height: '100%',
-                              }}
-                            >
-                              <div
-                                style={{
-                                  width: '100%',
-                                  boxSizing: 'content-box',
-                                  height: '100%',
-                                }}
-                              >
-                                <div
-                                  style={{
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    justifyContent: 'space-between',
-                                    boxSizing: 'content-box',
-                                  }}
-                                >
-                                  <div
-                                    // className="group-hover:bg-black"
-                                    style={{
-                                      display: 'flex',
-                                      flexDirection: 'row',
-                                      justifyContent: 'space-between',
-                                      boxSizing: 'content-box',
-                                      // alignItems: 'center',
-                                      // paddingLeft: theme.padding,
-                                      paddingRight: 25,
-                                      // paddingTop: theme.padding,
-                                    }}
-                                  >
-                                    <div
-                                      title={elem.name}
-                                      style={{
-                                        fontFamily: theme.fontFamily,
-                                        color: theme.primaryTextColor,
-                                        boxSizing: 'content-box',
-                                        // TODO: FIX SIZE
-                                        fontSize: 18,
-                                        // TODO: FIX WEIGHT
-                                        fontWeight: '500',
-                                        // fontSize: theme.headerFontSize,
-                                        // color: theme.fontColor,
-                                        // fontWeight: theme.headerFontWeight,
-                                        textOverflow: 'ellipsis',
-                                        // margin: 0,
-                                        marginLeft: 25,
-                                        padding: 0,
-                                        whiteSpace: 'nowrap',
-                                        display: 'block',
-                                        maxWidth: '100%',
-                                        overflow: 'hidden',
-                                      }}
-                                    >
-                                      {elem.name}
-                                    </div>
-                                    {onClickDashboardItem ? (
-                                      <div
-                                        // className="hover:bg-black"
-                                        style={{
-                                          fontFamily: theme.fontFamily,
-                                          boxSizing: 'content-box',
-                                          color: theme.primaryTextColor,
-                                          fontWeight: '500',
-                                          fontSize: 14,
-                                          minWidth: 14 * 7,
-                                          // background: 'red',
-                                          display: 'flex',
-                                          alignItems: 'center',
-                                          justifyContent: 'flex-end',
-                                        }}
-                                      >
-                                        {'view report →'}
-                                      </div>
-                                    ) : null}
-                                  </div>
-                                  {/* <div style={{ height: 20 }} /> */}
-                                  <div style={{ padding: 0 }}>
-                                    <Chart
-                                      containerStyle={{
-                                        display: 'flex',
-                                        // width: '100%',
-                                        height: 30,
-                                        // marginBottom: 50,
-                                        marginTop: 20,
-                                      }}
-                                      dateFilter={true}
-                                      chartId={elem._id}
-                                      query={elem.queryString}
-                                      // colors={theme.chartColors}
-                                      // updateDashboard={updateDashboard}
-                                    />
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      }
-                    )}
-                </div>
-              ) : null}
-              <div
-                style={{
-                  // width: `100%`,
-                  listStyleType: 'none',
-                  display: 'grid',
-                  gridGap: 25,
-                  boxSizing: 'content-box',
-                  gridTemplateColumns: `repeat(auto-fill,minmax(${
-                    maxColumnWidth || 400
-                  }px, 1fr))`,
-                  gridTemplateRows: `repeat(auto-fill, ${rowHeight || 400}px)`,
-                }}
-              >
-                {dashboardSections[section]
-                  .filter(elem => elem.chartType !== 'metric')
-                  .map(
-                    (
-                      elem: {
-                        name:
-                          | string
-                          | number
-                          | boolean
-                          | React.ReactElement<
-                              any,
-                              string | React.JSXElementConstructor<any>
-                            >
-                          | React.ReactFragment
-                          | null
-                          | undefined;
-                        _id: string | undefined;
-                      },
-                      index: string
-                    ) => {
-                      return (
-                        <div
-                          onClick={
-                            onClickDashboardItem
-                              ? () => handleOnClickDashboardItem(elem._id)
-                              : undefined
-                          }
-                          // className={
-                          //   onClickDashboardItem
-                          //     ? 'hover:qq-bg-zinc-50'
-                          //     : undefined
-                          // }
-                          // className="qq-shadow-md"
-                          key={elem.name + '' + index}
-                          // onClick={() => handleEditDashboardItem(elem)}
-                          // className="qq-shadow"
-                          style={{
-                            // background: theme.elevatedCardColor,
-                            // borderRadius: theme.borderRadius,
-                            // boxShadow: theme.boxShadow,
-                            height: '100%',
-                            cursor: 'pointer',
-                            boxSizing: 'content-box',
-                            // width: '100%',
-                            paddingRight: 25,
-                            minHeight: rowHeight || 400,
-                            borderRadius: 8,
-                            paddingTop: 20,
-                          }}
-                        >
-                          <div
-                            style={{
-                              width: '100%',
-                              height: '100%',
-                              boxSizing: 'content-box',
-                            }}
-                          >
-                            <div
-                              style={{
-                                width: '100%',
-                                height: '100%',
-                                boxSizing: 'content-box',
-                              }}
-                            >
-                              <div
-                                style={{
-                                  display: 'flex',
-                                  flexDirection: 'column',
-                                  justifyContent: 'space-between',
-                                  height: '100%',
-                                  boxSizing: 'content-box',
-                                }}
-                              >
-                                <div
-                                  style={{
-                                    display: 'flex',
-                                    flexDirection: 'row',
-                                    justifyContent: 'space-between',
-                                    boxSizing: 'content-box',
-                                    // alignItems: 'center',
-                                    // paddingLeft: theme.padding,
-                                    // paddingRight: theme.padding,
-                                    // paddingTop: theme.padding,
-                                  }}
-                                >
-                                  <div
-                                    style={{
-                                      fontFamily: theme.fontFamily,
-                                      color: theme.primaryTextColor,
-                                      boxSizing: 'content-box',
-                                      fontSize: 18,
-                                      fontWeight: '500',
-                                      // fontSize: theme.headerFontSize,
-                                      // color: theme.fontColor,
-                                      // fontWeight: theme.headerFontWeight,
-                                      textOverflow: 'ellipsis',
-                                      // margin: 0,
-                                      marginLeft: 25,
-                                      padding: 0,
-                                      whiteSpace: 'nowrap',
-                                      display: 'block',
-                                      maxWidth: '100%',
-                                      overflow: 'hidden',
-                                    }}
-                                  >
-                                    {elem.name}
-                                  </div>
-                                  {onClickDashboardItem ? (
-                                    <div
-                                      // className="hover:bg-black"
-                                      style={{
-                                        fontFamily: theme.fontFamily,
-                                        color: theme.primaryTextColor,
-                                        boxSizing: 'content-box',
-                                        fontWeight: '500',
-                                        fontSize: 14,
-                                        minWidth: 14 * 7,
-                                        // background: 'red',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'flex-end',
-                                      }}
-                                    >
-                                      {'view report →'}
-                                    </div>
-                                  ) : null}
-                                  {/* <Arrow fill={theme.fontColor} /> */}
-                                </div>
-                                {/* <div style={{ height: 20 }} /> */}
-                                <div
-                                  style={{
-                                    padding: 0,
-                                    height: '100%',
-                                    boxSizing: 'content-box',
-                                  }}
-                                >
-                                  <Chart
-                                    containerStyle={{
-                                      display: 'flex',
-                                      width: '100%',
-                                      // TODO: fix fixed height
-                                      height: 300,
-                                      marginBottom: 50,
-                                      marginTop: 30,
-                                    }}
-                                    isDateFilter={true}
-                                    chartId={elem._id}
-                                    colors={
-                                      theme.chartColors?.length
-                                        ? theme.chartColors
-                                        : undefined
-                                    }
-                                    // updateDashboard={updateDashboard}
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                    }
-                  )}
-              </div>
-            </div>
-          );
-        })}
-    </div>
-  );
-}
-
-function Filter({ defaultValue, theme, onValueChange, filter }) {
-  //should be date as well as strings
-  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,
-          fontFamily: theme.fontFamily,
-        }}
-      >
-        {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>
-  );
-}