@quillsql/react 1.6.0 → 1.6.3

package/src/BarList.tsx

@@ -142,7 +142,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         style={{
           // width: '100%',
           height: '100%',
-          marginLeft: 25,
+          // marginLeft: 25,
           // background: 'red',
           marginTop: 20,
           // paddingRight: 25,
@@ -150,8 +150,8 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           boxSizing: 'content-box',
           display: 'flex',
           justifyContent: 'space-between',
-          marginLeft: '1.5rem',
-          width: 'calc(100% - 1.5rem)',
+          // marginLeft: '24px',
+          width: 'calc(100% - 24px)',
         }}
         // className={twMerge(
         //   // makeBarListClassName('root'),
@@ -206,7 +206,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                       textOverflow: 'ellipsis',
                       fontFamily:
                         theme?.chartLabelFontFamily || theme?.fontFamily,
-                      fontSize: theme?.fontSizeSmall || '0.875rem',
+                      fontSize: theme?.fontSizeSmall || '14px',
                     }}
                     // className={twMerge(
                     // makeBarListClassName('barText'),
@@ -237,9 +237,9 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     style={{
                       display: 'flex',
                       alignItems: 'center',
-                      height: '2.25rem',
-                      borderRadius: '0.25rem',
-                      marginBottom: '0.5rem',
+                      height: '36px',
+                      borderRadius: '4px',
+                      marginBottom: '8px',
                       width: `${widths[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
                       backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
@@ -252,7 +252,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                         display: 'flex',
                         maxWidth: '100%',
                         boxSizing: 'content-box',
-                        marginLeft: '0.5rem',
+                        marginLeft: '8px',
                       }}
                       // className={twMerge(
                       //   'qq-absolute qq-max-w-full qq-flex',
@@ -268,7 +268,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                           whiteSpace: 'nowrap',
                           overflow: 'hidden',
                           textOverflow: 'ellipsis',
-                          fontSize: theme?.fontSizeSmall || '0.875rem',
+                          fontSize: theme?.fontSizeSmall || '14px',
                         }}
                         // className={twMerge(
                         // makeBarListClassName('barText'),
@@ -285,9 +285,9 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     style={{
                       display: 'flex',
                       alignItems: 'center',
-                      height: '2.25rem',
-                      borderRadius: '0.25rem',
-                      marginBottom: '0.5rem',
+                      height: '36px',
+                      borderRadius: '4px',
+                      marginBottom: '8px',
                       width: `${widths2[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
                       backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
@@ -300,7 +300,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                         position: 'absolute',
                         maxWidth: '100%',
                         display: 'flex',
-                        marginLeft: '0.5rem',
+                        marginLeft: '8px',
                       }}
                       // className={twMerge(
                       //   'qq-absolute qq-max-w-full qq-flex',
@@ -316,7 +316,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                           textOverflow: 'ellipsis',
                           fontFamily:
                             theme?.chartLabelFontFamily || theme?.fontFamily,
-                          fontSize: theme?.fontSizeSmall || '0.875rem',
+                          fontSize: theme?.fontSizeSmall || '14px',
                         }}
                         // className={twMerge(
                         // makeBarListClassName('barText'),
@@ -339,7 +339,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 color: theme?.chartLabelColor,
                 boxSizing: 'content-box',
                 fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                fontSize: theme?.fontSizeSmall || '0.875rem',
+                fontSize: theme?.fontSizeSmall || '14px',
               }}
               // className="qq-text-sm"
             >
@@ -367,8 +367,8 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 display: 'flex',
                 justifyContent: 'flex-end',
                 alignItems: 'center',
-                marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
-                height: '2.25rem',
+                marginBottom: idx === data.length - 1 ? 0 : '8px',
+                height: '36px',
               }}
               // className={twMerge(
               //   makeBarListClassName('labelWrapper'),
@@ -385,7 +385,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                   whiteSpace: 'nowrap',
                   overflow: 'hidden',
                   textOverflow: 'ellipsis',
-                  fontSize: theme?.fontSizeSmall || '0.875rem',
+                  fontSize: theme?.fontSizeSmall || '14px',
                 }}
                 // className={twMerge(
                 //   makeBarListClassName('labelText'),
@@ -420,7 +420,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         // paddingRight: 25,
         overflow: 'hidden',
         display: 'flex',
-        marginLeft: '1.5rem',
+        marginLeft: 25,
         justifyContent: 'space-between',
       }}
       // className={twMerge(
@@ -457,9 +457,9 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
                 display: 'flex',
                 alignItems: 'center',
-                height: '2.25rem',
-                marginBottom: '0.5rem',
-                borderRadius: '0.25rem',
+                height: '36px',
+                marginBottom: '8px',
+                borderRadius: '4px',
               }}
             >
               <div
@@ -468,7 +468,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                   position: 'absolute',
                   maxWidth: '100%',
                   display: 'flex',
-                  marginLeft: '0.5rem',
+                  marginLeft: '8px',
                 }}
                 // className={twMerge(
                 //   'qq-absolute qq-max-w-full qq-flex',
@@ -484,7 +484,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     textOverflow: 'ellipsis',
                     fontFamily:
                       theme?.chartLabelFontFamily || theme?.fontFamily,
-                    fontSize: theme?.fontSizeSmall || '0.875rem',
+                    fontSize: theme?.fontSizeSmall || '14px',
                   }}
                   // className={twMerge(
                   // makeBarListClassName('barText'),
@@ -509,7 +509,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
               color: theme?.chartLabelColor,
               boxSizing: 'content-box',
               fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-              fontSize: theme?.fontSizeSmall || '0.875rem',
+              fontSize: theme?.fontSizeSmall || '14px',
             }}
             // className="qq-text-sm"
           >
@@ -537,8 +537,8 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'flex-end',
-              marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
-              height: '2.25rem',
+              marginBottom: idx === data.length - 1 ? 0 : '8px',
+              height: '36px',
             }}
             // className={twMerge(
             //   makeBarListClassName('labelWrapper'),
@@ -555,7 +555,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
-                fontSize: theme?.fontSizeSmall || '0.875rem',
+                fontSize: theme?.fontSizeSmall || '14px',
               }}
               // className={twMerge(
               //   makeBarListClassName('labelText'),

package/src/Chart.tsx

@@ -4,7 +4,6 @@ import React, { useState, useEffect, useContext, useMemo } from 'react';
 import {
   Area,
   CartesianGrid,
-  Legend,
   ComposedChart as ReChartsAreaChart,
   ResponsiveContainer,
   Tooltip,
@@ -13,7 +12,7 @@ import {
   Bar,
   BarChart as ReChartsBarChart,
 } from 'recharts';
-import { endOfWeek, format, isValid, parseISO, startOfWeek } from 'date-fns';
+import { endOfWeek, format, isValid, startOfWeek } from 'date-fns';
 import { utcToZonedTime } from 'date-fns-tz';
 import BarList from './BarList';
 import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
@@ -28,6 +27,7 @@ import {
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 import TableChart from './TableChart';
+import { QuillTheme } from './QuillProvider';
 
 const colorValues = [
   'slate',
@@ -95,69 +95,6 @@ interface ButtonProps {
 //   },
 // ];
 
-const data = [
-  {
-    date_trunc: '2022-04-01T00:00:00.000Z',
-    avg_days: 17.8471360852448,
-    median_days: 7.36806134259259,
-  },
-  {
-    date_trunc: '2022-05-01T00:00:00.000Z',
-    avg_days: 17.4874354062884,
-    median_days: 7.9372337962963,
-  },
-  {
-    date_trunc: '2022-06-01T00:00:00.000Z',
-    avg_days: 18.240144813895,
-    median_days: 7.89506365740741,
-  },
-  {
-    date_trunc: '2022-07-01T00:00:00.000Z',
-    avg_days: 16.2354793525833,
-    median_days: 7.548125,
-  },
-  {
-    date_trunc: '2022-08-01T00:00:00.000Z',
-    avg_days: 13.2098485657861,
-    median_days: 5.95611111111111,
-  },
-  {
-    date_trunc: '2022-09-01T00:00:00.000Z',
-    avg_days: 19.5792522310747,
-    median_days: 7.37486111111111,
-  },
-  {
-    date_trunc: '2022-10-01T00:00:00.000Z',
-    avg_days: 27.538275364544,
-    median_days: 13.9421527777778,
-  },
-  {
-    date_trunc: '2022-11-01T00:00:00.000Z',
-    avg_days: 21.6456397342308,
-    median_days: 10.1523958333333,
-  },
-  {
-    date_trunc: '2022-12-01T00:00:00.000Z',
-    avg_days: 15.5662888454861,
-    median_days: 8.40572916666667,
-  },
-  {
-    date_trunc: '2023-01-01T00:00:00.000Z',
-    avg_days: 11.2846224012116,
-    median_days: 5.96854166666667,
-  },
-  {
-    date_trunc: '2023-02-01T00:00:00.000Z',
-    avg_days: 9.69899060044893,
-    median_days: 5.82388310185185,
-  },
-  {
-    date_trunc: '2023-03-01T00:00:00.000Z',
-    avg_days: 7.18273680555556,
-    median_days: 4.78365162037037,
-  },
-];
-
 export const valueFormatter = ({ value, field, fields }) => {
   if (
     value === undefined ||
@@ -284,7 +221,7 @@ export const ChartTooltipFrame = ({
       overflow: 'hidden',
       borderWidth: 1,
       background: theme?.backgroundColor || '#ffffff',
-      borderRadius: '0.375rem',
+      borderRadius: '6px',
       boxShadow:
         '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
     }}
@@ -317,7 +254,7 @@ export const ChartTooltipRow = ({
 }: ChartTooltipRowProps) => (
   <div
     style={{
-      marginRight: '1.5rem',
+      marginRight: '24px',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
@@ -343,8 +280,8 @@ export const ChartTooltipRow = ({
           borderStyle: 'solid',
           borderColor: 'white',
           boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-          height: '0.5rem',
-          width: '0.5rem',
+          height: '8px',
+          width: '8px',
           borderRadius: 100,
           marginRight: 4,
         }}
@@ -373,7 +310,7 @@ export const ChartTooltipRow = ({
           marginBottom: 0,
           fontFamily: theme?.fontFamily,
           color: theme?.primaryTextColor,
-          fontSize: theme?.fontSizeSmall || '0.875rem',
+          fontSize: theme?.fontSizeSmall || '14px',
           fontWeight: theme?.fontWeightMedium || '500',
         }}
         // className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
@@ -391,7 +328,7 @@ export const ChartTooltipRow = ({
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        fontSize: theme?.fontSizeSmall || '0.875rem',
+        fontSize: theme?.fontSizeSmall || '14px',
         fontWeight: theme?.fontWeightNormal || '400',
       }}
       // className={twMerge(
@@ -438,10 +375,10 @@ const ChartTooltip = ({
             borderBottomWidth: 1,
             display: 'flex',
             flexDirection: 'column',
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
           }}
           // className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-gray-200"
           // className={
@@ -460,7 +397,7 @@ const ChartTooltip = ({
               marginBottom: 0,
               fontFamily: theme?.fontFamily,
               color: theme?.primaryTextColor,
-              fontSize: theme?.fontSizeSmall || '0.875rem',
+              fontSize: theme?.fontSizeSmall || '14px',
               fontWeight: theme?.boldFontWeight || '500',
               paddingTop: 2,
               paddingBottom: 2,
@@ -487,10 +424,10 @@ const ChartTooltip = ({
         <div
           // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
           style={{
-            paddingRight: '1rem',
-            paddingLeft: '1rem',
-            paddingTop: '0.5rem',
-            paddingBottom: '0.5rem',
+            paddingRight: '16px',
+            paddingLeft: '16px',
+            paddingTop: '8px',
+            paddingBottom: '8px',
             // marginTop: '0.25rem',
           }}
           // className={
@@ -561,7 +498,8 @@ const Chart = ({
   const { dateFilterObj } = useContext(DateFilterContext);
   const { dashboardFilters } = useContext(DashboardFiltersContext);
   const [client, _] = useContext(ClientContext);
-  const [theme] = useContext(ThemeContext);
+  const [theme] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
   const chartColors = useMemo(() => {
     return colors?.length ? colors : ['#6269E9', '#E14F62'];
   }, [colors]);
@@ -717,35 +655,23 @@ const ChartUpdater: React.FC<ChartProps> = ({
         try {
           // if self-hosting option, only get metadata and query
           if (queryEndpoint) {
-            const resp = await axios.get(
-              'https://quill-344421.uc.r.appspot.com/selfhostitem',
-              {
-                params: {
-                  id: chartId,
-                  orgId: customerId,
-                  publicKey: publicKey,
-                },
-                environment: environment || undefined,
-              }
-            );
-            const resp1 = await axios.post(
-              queryEndpoint,
-              { query: resp.data.queryString },
-              { headers: queryHeaders }
-            );
-
-            // const [resp1, resp] = await Promise.all([
-            //   axios.post(queryEndpoint, { query }, { headers: queryHeaders }),
-            //   axios.get('https://quill-344421.uc.r.appspot.com/selfhostitem', {
+            // const resp = await axios.get(
+            //   'https://quill-344421.uc.r.appspot.com/selfhostitem',
+            //   {
             //     params: {
             //       id: chartId,
             //       orgId: customerId,
             //       publicKey: publicKey,
             //     },
             //     environment: environment || undefined,
-            //   }),
-            // ]);
-            // console.log('RESP: ', resp.data);
+            //   }
+            // );
+            const resp = await axios.post(
+              queryEndpoint,
+              { metadata: { id: chartId, task: 'item' } },
+              { headers: queryHeaders }
+            );
+
             if (resp.data) {
               const {
                 xAxisField,
@@ -762,7 +688,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
                 yAxisLabel,
                 xAxisFormat,
                 chartType,
-                rows: resp1.data.rows,
+                rows: resp.data.rows,
                 filters: dashboardFilters,
               });
               setLoading(false);
@@ -771,8 +697,6 @@ const ChartUpdater: React.FC<ChartProps> = ({
                 id,
                 data: {
                   ...resp.data,
-                  rows: resp1.data.rows,
-                  fields: resp1.data.fields,
                   filters: dashboardFilters,
                 },
               });

package/src/Context.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { useState, createContext, useEffect, useReducer } from 'react';
+import { QuillTheme } from './QuillProvider';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const dummySetter = () => {};
@@ -15,7 +16,9 @@ export const SaveQueryModalStatusContext = createContext([
   dummySetter,
 ]);
 export const EditorQueryContext = createContext(['', dummySetter]);
-export const ThemeContext = createContext([null, dummySetter]);
+export const ThemeContext = createContext<
+  [QuillTheme, (theme: QuillTheme) => void]
+>([null, dummySetter]);
 export const ClientContext = createContext([null, dummySetter]);
 export const CreateVisualizationModalVisibleContext = createContext([
   false,
@@ -91,7 +94,6 @@ const dashboardFiltersReducer = (state, action) => {
 
 export const ContextProvider = ({
   children,
-  containerStyle,
   initialTheme,
   publicKey,
   environment,
@@ -102,7 +104,8 @@ export const ContextProvider = ({
   queryHeaders,
 }) => {
   const [client, setClient] = useState(null);
-  const [theme, setTheme] = useState(null);
+  const [theme, setTheme] =
+    useState<[QuillTheme, (theme: QuillTheme) => void]>(null);
   const [columns, setColumns] = useState(null);
   const [rows, setRows] = useState(null);
   const [schema, setSchema] = useState([]);
@@ -130,9 +133,9 @@ export const ContextProvider = ({
   // SETS INITIAL THEME
   useEffect(() => {
     if (!theme) {
-      setTheme({ ...initialTheme, containerStyle });
+      setTheme({ ...initialTheme });
     }
-  }, [initialTheme, containerStyle]);
+  }, [initialTheme]);
 
   // SETS INITIAL CLIENT
   useEffect(() => {

package/src/Dashboard.tsx

@@ -46,7 +46,8 @@ export default function Dashboard({
   const [dashboardSections, setDashboardSections] = useState<any>(null);
   const { dashboard } = useContext(DashboardContext);
   const [client, _] = useContext(ClientContext);
-  const [theme, _] = useContext(ThemeContext);
+  const [theme, _] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
   const { dateFilter, dateFilterDispatch } = useContext(DateFilterContext);
   const { dashboardFiltersDispatch } = useContext(DashboardFiltersContext);
   const [configFilters, setConfigFilters] = useState([]);
@@ -60,12 +61,37 @@ export default function Dashboard({
 
   React.useEffect(() => {
     async function getDashboards() {
-      const { publicKey, customerId, environment } = client;
+      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) {
+          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',
           {
@@ -73,6 +99,7 @@ export default function Dashboard({
               publicKey: publicKey,
               orgId: customerId,
               name: name,
+              task: 'dashconfig',
             },
             headers: {
               environment: environment || undefined,

package/src/QuillProvider.tsx

@@ -2,25 +2,67 @@
 import React, { useContext, useEffect } from 'react';
 import { ContextProvider } from './Context';
 
+interface BaseQuillProviderProps {
+  publicKey: string;
+  environment?: string;
+  theme?: QuillTheme;
+  children?: React.ReactNode;
+}
+
+interface WithOrganizationId extends BaseQuillProviderProps {
+  organizationId: string;
+  queryEndpoint?: never;
+  queryHeaders?: never;
+}
+
+interface WithQueryEndpoint extends BaseQuillProviderProps {
+  organizationId?: never;
+  queryEndpoint: string;
+  queryHeaders: object;
+}
+
+type QuillProviderProps = WithOrganizationId | WithQueryEndpoint;
+
+export interface QuillTheme {
+  fontFamily: string;
+  backgroundColor: string;
+  primaryTextColor: string;
+  secondaryTextColor: string;
+  chartLabelFontFamily: string;
+  chartLabelColor: string;
+  chartTickColor: string;
+  chartColors: string[];
+  borderColor: string;
+  primaryButtonColor: string;
+  borderWidth: number;
+}
+
+const defaultTheme = {
+  fontFamily: 'Inter; Helvetica',
+  backgroundColor: '#FFFFFF',
+  primaryTextColor: '#364153',
+  secondaryTextColor: '#6C727F',
+  chartLabelFontFamily: 'Inter; Helvetica',
+  chartLabelColor: '#666666',
+  chartTickColor: '#CCCCCC',
+  chartColors: ['#6269E9', '#E14F62'],
+  borderColor: '#CCCCCC',
+  primaryButtonColor: '#364153',
+  borderWidth: 1,
+};
+
 const QuillProvider = ({
   organizationId,
-  authToken,
   publicKey,
-  environment,
-  theme,
-  containerStyle,
-  runQueryButton,
-  saveQueryButton,
-  exportQueryButton,
   queryEndpoint,
   queryHeaders,
+  environment,
   children,
-}) => {
+  theme = defaultTheme,
+}: QuillProviderProps) => {
   return (
     <ContextProvider
-      containerStyle={containerStyle}
       initialTheme={theme}
-      authToken={authToken}
       publicKey={publicKey}
       environment={environment}
       customerId={organizationId}