@quillsql/react 1.0.0

package/src/Context.tsx

@@ -0,0 +1,204 @@
+import React, { useState, createContext, useEffect, useReducer } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const dummySetter = () => {};
+
+export const SchemaContext = createContext([[], dummySetter]);
+export const ColumnsContext = createContext([null, dummySetter]);
+export const RowsContext = createContext([null, dummySetter]);
+export const SelectedSidebarIndexContext = createContext([0, dummySetter]);
+export const HistoryContext = createContext([[], dummySetter]);
+export const SavedQueriesContext = createContext([[], dummySetter]);
+export const SaveQueryModalStatusContext = createContext([
+  'HIDDEN',
+  dummySetter,
+]);
+export const EditorQueryContext = createContext(['', dummySetter]);
+export const ThemeContext = createContext([null, dummySetter]);
+export const ClientContext = createContext([null, dummySetter]);
+export const CreateVisualizationModalVisibleContext = createContext([
+  false,
+  dummySetter,
+]);
+export const ActiveVisualizationContext = createContext([null, dummySetter]);
+export const QueryResultsLoadingContext = createContext([false, dummySetter]);
+export const EditVisualizationModalVisibleContext = createContext([
+  false,
+  dummySetter,
+]);
+export const ReportBuilderQueryContext = createContext(['', dummySetter]);
+export const SavedReportsQueryContext = createContext(['', dummySetter]);
+export const DashboardContext = createContext([{}, dummySetter]);
+export const DateFilterContext = createContext([{}, dummySetter]);
+
+const dashboardReducer = (state, action) => {
+  switch (action.type) {
+    case 'UPDATE_DASHBOARD_ITEM':
+      return {
+        ...state,
+        [action.id]: {
+          ...state[action.id],
+          ...action.data,
+        },
+      };
+    case 'ADD_DASHBOARD_ITEM':
+      return {
+        ...state,
+        [action.id]: action.data,
+      };
+    default:
+      return state;
+  }
+};
+
+const dateFilterReducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_GLOBAL_DATE_FILTER':
+      return {
+        ...state,
+        ...action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export const ContextProvider = ({
+  children,
+  containerStyle,
+  initialTheme,
+  publicKey,
+  authToken,
+  customerId,
+  userId,
+}) => {
+  const [client, setClient] = useState(null);
+  const [theme, setTheme] = useState(null);
+  const [columns, setColumns] = useState(null);
+  const [rows, setRows] = useState(null);
+  const [schema, setSchema] = useState([]);
+  const [selectedSidebarIndex, setSelectedSidebarIndex] = useState(0);
+  const [history, setHistory] = useState([]);
+  const [savedQueries, setSavedQueries] = useState([]);
+  // REPORT_BUILDER, SQL_EDITOR, HIDDEN
+  const [saveQueryModalStatus, setSaveQueryModalStatus] = useState('HIDDEN');
+  const [editorQuery, setEditorQuery] = useState('');
+  const [savedReportsQuery, setSavedReportsQuery] = useState('');
+  const [reportBuilderQuery, setReportBuilderQuery] = useState('');
+  const [createVisualizationModalVisible, setCreateVisualizationModalVisible] =
+    useState(false);
+  const [activeVisualization, setActiveVisualization] = useState(null);
+  const [queryResultsLoading, setQueryResultsLoading] = useState(false);
+  const [editVisualizationModalVisible, setEditVisualizationModalVisible] =
+    useState(false);
+  const [dashboard, dispatch] = useReducer(dashboardReducer, {});
+  const [dateFilter, dateFilterDispatch] = useReducer(dateFilterReducer, {});
+
+  // SETS INITIAL THEME
+  useEffect(() => {
+    if (!theme) {
+      setTheme({ ...initialTheme, containerStyle });
+    }
+  }, [initialTheme, containerStyle]);
+
+  // SETS INITIAL CLIENT
+  useEffect(() => {
+    if (!client) {
+      setClient({
+        customerId,
+        userId,
+        authToken,
+        publicKey,
+      });
+    }
+  }, [customerId, userId, authToken, publicKey, client]);
+
+  if (!theme || !client) {
+    return null;
+  }
+
+  return (
+    <ClientContext.Provider value={[client, setClient]}>
+      <ThemeContext.Provider value={[theme, setTheme]}>
+        <SchemaContext.Provider value={[schema, setSchema]}>
+          <ColumnsContext.Provider value={[columns, setColumns]}>
+            <RowsContext.Provider value={[rows, setRows]}>
+              <SelectedSidebarIndexContext.Provider
+                value={[selectedSidebarIndex, setSelectedSidebarIndex]}
+              >
+                <HistoryContext.Provider value={[history, setHistory]}>
+                  <SavedQueriesContext.Provider
+                    value={[savedQueries, setSavedQueries]}
+                  >
+                    <SaveQueryModalStatusContext.Provider
+                      value={[saveQueryModalStatus, setSaveQueryModalStatus]}
+                    >
+                      <CreateVisualizationModalVisibleContext.Provider
+                        value={[
+                          createVisualizationModalVisible,
+                          setCreateVisualizationModalVisible,
+                        ]}
+                      >
+                        <EditorQueryContext.Provider
+                          value={[editorQuery, setEditorQuery]}
+                        >
+                          <ActiveVisualizationContext.Provider
+                            value={[
+                              activeVisualization,
+                              setActiveVisualization,
+                            ]}
+                          >
+                            <QueryResultsLoadingContext.Provider
+                              value={[
+                                queryResultsLoading,
+                                setQueryResultsLoading,
+                              ]}
+                            >
+                              <EditVisualizationModalVisibleContext.Provider
+                                value={[
+                                  editVisualizationModalVisible,
+                                  setEditVisualizationModalVisible,
+                                ]}
+                              >
+                                <ReportBuilderQueryContext.Provider
+                                  value={[
+                                    reportBuilderQuery,
+                                    setReportBuilderQuery,
+                                  ]}
+                                >
+                                  <SavedReportsQueryContext.Provider
+                                    value={[
+                                      savedReportsQuery,
+                                      setSavedReportsQuery,
+                                    ]}
+                                  >
+                                    <DashboardContext.Provider
+                                      value={{ dashboard, dispatch }}
+                                    >
+                                      <DateFilterContext.Provider
+                                        value={{
+                                          dateFilter,
+                                          dateFilterDispatch,
+                                        }}
+                                      >
+                                        {children}
+                                      </DateFilterContext.Provider>
+                                    </DashboardContext.Provider>
+                                  </SavedReportsQueryContext.Provider>
+                                </ReportBuilderQueryContext.Provider>
+                              </EditVisualizationModalVisibleContext.Provider>
+                            </QueryResultsLoadingContext.Provider>
+                          </ActiveVisualizationContext.Provider>
+                        </EditorQueryContext.Provider>
+                      </CreateVisualizationModalVisibleContext.Provider>
+                    </SaveQueryModalStatusContext.Provider>
+                  </SavedQueriesContext.Provider>
+                </HistoryContext.Provider>
+              </SelectedSidebarIndexContext.Provider>
+            </RowsContext.Provider>
+          </ColumnsContext.Provider>
+        </SchemaContext.Provider>
+      </ThemeContext.Provider>
+    </ClientContext.Provider>
+  );
+};

package/src/Dashboard.tsx

@@ -0,0 +1,379 @@
+import React, { useContext, useEffect, useState } from 'react';
+import Chart from './Chart';
+import {
+  ClientContext,
+  DashboardStateContext,
+  DashboardUpdateContext,
+  DateFilterContext,
+} from './Context';
+import { startOfToday, sub } from 'date-fns';
+import { DateRangePicker } from './DateRangePicker/index';
+
+interface DashboardProps {
+  name?: string;
+  containerStyle?: React.CSSProperties;
+  maxColumnWidth?: number;
+  rowHeight?: number;
+}
+
+const theme = {
+  fontFamily: 'Inter; Helvetica',
+  primaryTextColor: '#212121',
+  secondaryTextColor: '#6C727F',
+  chartLabelColor: '#666666',
+  chartTickColor: '#CCCCCC',
+  chartColors: ['#6269E9', '#E14F62'],
+};
+
+export default function Dashboard({
+  name,
+  containerStyle,
+  maxColumnWidth,
+  rowHeight,
+}: DashboardProps) {
+  const [dashboardSections, setDashboardSections] = useState<any>(null);
+  const [client, _] = useContext(ClientContext);
+  const { dateFilter, dateFilterDispatch } = useContext(DateFilterContext);
+
+  const setGlobalDateFilter = (startDate, endDate) => {
+    dateFilterDispatch({
+      type: 'SET_GLOBAL_DATE_FILTER',
+      payload: { startDate, endDate },
+    });
+  };
+
+  React.useEffect(() => {
+    async function getDashboards() {
+      const { publicKey, customerId, authToken } = client;
+      try {
+        const response = await fetch(
+          `https://quill-344421.uc.r.appspot.com/dashboardsections/${publicKey}/${customerId}/`
+        );
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        setDashboardSections(data);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+    getDashboards();
+  }, []);
+
+  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(),
+      },
+    });
+  }, []);
+
+  if (!dashboardSections) {
+    return null;
+  }
+  return (
+    <div style={containerStyle}>
+      <div style={{ width: 420, marginLeft: 25, marginBottom: 25 }}>
+        <DateRangePicker
+          // change to be set on the dashboard / section as default date range
+          defaultValue={[undefined, undefined, '90d']}
+          onValueChange={onChangeDateFilter}
+        />
+      </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.fontColor,
+                      fontFamily: theme.fontFamily,
+                      fontWeight: 'bold',
+                      // fontWeight: theme.headerFontWeight,
+                      marginBottom: 16,
+                      marginLeft: 25,
+                      textAlign: 'left',
+                      marginTop: 12,
+                    }}
+                  >
+                    {section}
+                  </h1>
+                )}
+              </div>
+              <div
+                style={{
+                  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
+                          // className="shadow-md"
+                          key={elem.name + '' + index}
+                          // onClick={() => handleEditDashboardItem(elem)}
+                          // className="shadow"
+                          style={{
+                            // background: theme.elevatedCardColor,
+                            // borderRadius: theme.borderRadius,
+                            // boxShadow: theme.boxShadow,
+                            height: '100%',
+                            cursor: 'pointer',
+                            width: '100%',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '100%',
+                              height: '100%',
+                            }}
+                          >
+                            <div
+                              style={{
+                                width: '100%',
+                                height: '100%',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  flexDirection: 'column',
+                                  justifyContent: 'space-between',
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    // alignItems: 'center',
+                                    // paddingLeft: theme.padding,
+                                    // paddingRight: theme.padding,
+                                    // paddingTop: theme.padding,
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      fontFamily: theme.fontFamily,
+                                      color: '#394150',
+                                      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>
+                                  {/* <Arrow fill={theme.fontColor} /> */}
+                                </div>
+                                {/* <div style={{ height: 20 }} /> */}
+                                <div style={{ padding: 0 }}>
+                                  <Chart
+                                    containerStyle={{
+                                      display: 'flex',
+                                      width: '100%',
+                                      height: 120,
+                                      marginBottom: 50,
+                                      marginTop: 20,
+                                    }}
+                                    chartId={elem._id}
+                                    colors={['#6269E9', '#E14F62']}
+                                    // updateDashboard={updateDashboard}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+                  )}
+              </div>
+              <div
+                style={{
+                  width: `100%`,
+                  listStyleType: 'none',
+                  display: 'grid',
+                  gridGap: 25,
+                  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
+                          // className="shadow-md"
+                          key={elem.name + '' + index}
+                          // onClick={() => handleEditDashboardItem(elem)}
+                          // className="shadow"
+                          style={{
+                            // background: theme.elevatedCardColor,
+                            // borderRadius: theme.borderRadius,
+                            // boxShadow: theme.boxShadow,
+                            height: '100%',
+                            cursor: 'pointer',
+                            width: '100%',
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: '100%',
+                              height: '100%',
+                            }}
+                          >
+                            <div
+                              style={{
+                                width: '100%',
+                                height: '100%',
+                              }}
+                            >
+                              <div
+                                style={{
+                                  display: 'flex',
+                                  flexDirection: 'column',
+                                  justifyContent: 'space-between',
+                                }}
+                              >
+                                <div
+                                  style={{
+                                    display: 'flex',
+                                    flexDirection: 'row',
+                                    justifyContent: 'space-between',
+                                    // alignItems: 'center',
+                                    // paddingLeft: theme.padding,
+                                    // paddingRight: theme.padding,
+                                    // paddingTop: theme.padding,
+                                  }}
+                                >
+                                  <div
+                                    style={{
+                                      fontFamily: theme.fontFamily,
+                                      color: '#394150',
+                                      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>
+                                  {/* <Arrow fill={theme.fontColor} /> */}
+                                </div>
+                                {/* <div style={{ height: 20 }} /> */}
+                                <div style={{ padding: 0 }}>
+                                  <Chart
+                                    containerStyle={{
+                                      display: 'flex',
+                                      width: '100%',
+                                      height: 300,
+                                      marginBottom: 50,
+                                      marginTop: 30,
+                                    }}
+                                    chartId={elem._id}
+                                    colors={['#6269E9', '#E14F62']}
+                                    // updateDashboard={updateDashboard}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    }
+                  )}
+              </div>
+            </div>
+          );
+        })}
+    </div>
+  );
+}