@quillsql/react 1.6.1 → 1.6.3

package/src/AddToDashboardModal.tsx

@@ -0,0 +1,1213 @@
+// @ts-nocheck
+import React, { useContext, useMemo, useEffect, useState } from 'react';
+import { ClientContext, SchemaContext, ThemeContext } from './Context';
+import BigModal from './components/BigModal/BigModal';
+import { Formik, Form, Field } from 'formik';
+import {
+  differenceInDays,
+  differenceInHours,
+  differenceInMonths,
+  differenceInYears,
+  startOfDay,
+  startOfHour,
+  startOfMonth,
+  startOfYear,
+} from 'date-fns';
+import axios from 'axios';
+import Chart from './Chart';
+import { XMarkIcon } from '@heroicons/react/20/solid';
+import { QuillTheme } from './QuillProvider';
+
+function convertPostgresColumn(column) {
+  let format;
+
+  switch (column.dataTypeID) {
+    case 20: // int8
+    case 21: // int2
+    case 23: // int4
+      format = 'whole_number';
+      break;
+    case 700: // float4
+    case 701: // float8
+    case 1700: // numeric
+      format = 'two_decimal_places';
+      break;
+    case 1082: // date
+    case 1083: // time
+    case 1184: // timestamptz
+    case 1114: // timestamp
+      format = 'MMM_dd_yyyy';
+      break;
+    case 1043: // varchar
+    default:
+      format = 'string';
+  }
+
+  return {
+    label: column.name,
+    field: column.name,
+    format: format,
+  };
+}
+
+export default function AddToDashboardModal({
+  isOpen,
+  setIsOpen,
+  SelectComponent,
+  TextInputComponent,
+  ButtonComponent,
+  SecondaryButtonComponent,
+  rows,
+  columns,
+  query,
+  ModalComponent,
+  formHeaderStyle,
+  formLabelStyle,
+}) {
+  const [theme] =
+    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
+  const [client] = useContext(ClientContext);
+  const [schema, setSchema] = useContext(SchemaContext);
+
+  useEffect(() => {
+    let isSubscribed = true;
+    async function getSchema() {
+      const { publicKey, environment } = client;
+      if (!schema.length) {
+        const response3 = await axios.get(
+          `https://quill-344421.uc.r.appspot.com/schema2/${publicKey}/`,
+          {
+            headers: {
+              Authorization: `Bearer `,
+              environment: environment || undefined,
+            },
+          }
+        );
+        if (isSubscribed) {
+          setSchema(response3.data.tables);
+        }
+      }
+    }
+    if (isSubscribed) {
+      getSchema();
+    }
+    return () => {
+      isSubscribed = false;
+    };
+  }, [schema]);
+
+  const editChart = async ({ report, values, yAxisFields, columns, query }) => {
+    const { publicKey, orgId, authToken, queryEndpoint, queryHeaders } = client;
+    const {
+      xAxisLabel,
+      yAxisLabel,
+      chartName,
+      chartType,
+      xAxisField,
+      xAxisFormat,
+      dashboardName,
+      dateFieldTable,
+      dateField,
+    } = values;
+
+    if (!chartName) {
+      alert('Please enter a chart name');
+      return;
+    }
+
+    // if (!dashboardName) {
+    //   alert("Please choose a dashboard name");
+    //   return;
+    // }
+
+    // if (!xAxisLabel && chartType !== "pie" && chartType !== "table") {
+    //   alert("Please enter a label for the x-axis");
+    //   return;
+    // }
+
+    // if (!yAxisLabel && chartType !== "pie" && chartType !== "table") {
+    //   alert("Please enter a label for the y-axis");
+    //   return;
+    // }
+
+    for (let i = 0; i < yAxisFields.length; i++) {
+      if (!yAxisFields[i].label && chartType !== 'pie') {
+        alert(`Please enter a label for column '${yAxisFields[i].field}'`);
+        return;
+      }
+    }
+
+    if (!client || !organization) {
+      return;
+    }
+
+    let response;
+    if (queryEndpoint) {
+      response = await axios.post(
+        queryEndpoint,
+        {
+          metadata: {
+            name: chartName,
+            xAxisField,
+            yAxisFields,
+            xAxisLabel,
+            xAxisFormat,
+            yAxisLabel,
+            chartType,
+            dashboardName,
+            columns,
+            dateField: { table: dateFieldTable, field: dateField },
+            query: query,
+            task: 'create',
+          },
+        },
+        { headers: queryHeaders }
+      );
+    } else {
+      response = await axios.post(
+        `https://quill-344421.uc.r.appspot.com/dashedit/${publicKey}/${orgId}/`,
+        {
+          name: chartName,
+          xAxisField,
+          yAxisFields,
+          xAxisLabel,
+          xAxisFormat,
+          yAxisLabel,
+          chartType,
+          dashboardName,
+          columns,
+          dateField: { table: dateFieldTable, field: dateField },
+          query: query,
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${authToken}`,
+            environment: environment || undefined,
+          },
+        }
+      );
+    }
+    if (!response.data) {
+      return;
+    }
+    // setDashboard((dashboard) => {
+    //   return {
+    //     ...dashboard,
+    //     [response.data._id]: { ...existingVisualization, ...response.data }
+    //   }
+    // })
+    setIsOpen(false);
+    // TODO: fire callback instead so user can customize action
+    // navigate("/dashboards");
+  };
+  return (
+    // <BigModal theme={theme} showModal={isOpen} setShowModal={setIsOpen}>
+    <ModalComponent
+      isOpen={isOpen}
+      title={'Add to dashboard'}
+      onClose={() => setIsOpen(false)}
+    >
+      <ChartForm
+        editChart={editChart}
+        theme={theme}
+        schema={schema}
+        data={rows}
+        fields={columns}
+        // leave null for now
+        report={null}
+        query={query}
+        // organizationName={organization?.name}
+        SelectComponent={SelectComponent}
+        TextInputComponent={TextInputComponent}
+        ButtonComponent={ButtonComponent}
+        SecondaryButtonComponent={SecondaryButtonComponent}
+        formHeaderStyle={formHeaderStyle}
+        formLabelStyle={formLabelStyle}
+      />
+    </ModalComponent>
+    // </BigModal>
+  );
+}
+
+function ChartForm({
+  data,
+  fields,
+  theme,
+  saveVisualization,
+  report,
+  editChart,
+  schema,
+  query,
+  //   organizationName,
+  SelectComponent,
+  TextInputComponent,
+  ButtonComponent,
+  SecondaryButtonComponent,
+  formHeaderStyle,
+  formLabelStyle,
+}) {
+  const fieldOptions = Object.keys(data[0]).map(field => ({
+    value: field,
+    label: field,
+  }));
+  const [dateFieldOptions, setDateFieldOptions] = useState([]);
+
+  useEffect(() => {
+    const fetchReferencedTables = async () => {
+      const result = await getReferencedTables(query, 'PostgresQL', schema);
+      setDateFieldOptions(result);
+    };
+
+    fetchReferencedTables();
+  }, [query, schema]);
+
+  return (
+    <Formik
+      initialValues={{
+        xAxisField: report?.xAxisField || fieldOptions[0].value,
+        xAxisLabel: report?.xAxisLabel || '',
+        xAxisFormat: report?.xAxisFormat || FORMAT_OPTIONS[0].value,
+        yAxisLabel: report?.yAxisLabel || '',
+        chartName: report?.name,
+        chartType: report?.chartType || 'bar',
+        xAxisFieldLabel: '',
+        dashboardName: report?.dashboardName || '',
+        dateFieldTable:
+          (dateFieldOptions.length && dateFieldOptions[0].name) || '',
+        dateField:
+          (dateFieldOptions.length && dateFieldOptions[0].columns[0].name) ||
+          '',
+        template: report?.template || false,
+      }}
+      onSubmit={() => {}}
+    >
+      {({ values, isSubmitting, setFieldValue }) => (
+        <FormikForm
+          values={values}
+          isSubmitting={isSubmitting}
+          data={data}
+          fieldOptions={fieldOptions}
+          dateFieldOptions={dateFieldOptions}
+          theme={theme}
+          saveVisualization={saveVisualization}
+          report={report}
+          editChart={editChart}
+          fields={fields}
+          query={query}
+          setFieldValue={setFieldValue}
+          //   organizationName={organizationName}
+          SelectComponent={SelectComponent}
+          TextInputComponent={TextInputComponent}
+          ButtonComponent={ButtonComponent}
+          SecondaryButtonComponent={SecondaryButtonComponent}
+          formHeaderStyle={formHeaderStyle}
+          formLabelStyle={formLabelStyle}
+        />
+      )}
+    </Formik>
+  );
+}
+
+export function isValidDate(d) {
+  return d instanceof Date && !isNaN(d);
+}
+
+export const isArrayOfValidDates = (arr, field) =>
+  arr.every(
+    d => new Date(d[field]) instanceof Date && !isNaN(new Date(d[field]))
+  );
+
+export function formatDateBuckets(startDate, endDate) {
+  // Calculate the distance in hours
+  const distanceInHours = Math.abs(differenceInHours(endDate, startDate));
+
+  // Check if the distance is less than or equal to one hour
+  if (distanceInHours <= 1) {
+    return {
+      unit: 'hour',
+      format: 'h a',
+      startOf: startOfHour,
+    };
+  }
+
+  // Calculate the distance in days
+  const distanceInDays = Math.abs(differenceInDays(endDate, startDate));
+
+  // Check if the distance is less than or equal to one day
+  if (distanceInDays <= 1) {
+    return {
+      unit: 'day',
+      format: 'MMM d',
+      startOf: startOfDay,
+    };
+  }
+
+  // Calculate the distance in months
+  const distanceInMonths = Math.abs(differenceInMonths(endDate, startDate));
+
+  // Check if the distance is less than or equal to one month
+  if (distanceInMonths <= 1) {
+    return {
+      unit: 'month',
+      format: 'MMM yyyy',
+      startOf: startOfMonth,
+    };
+  }
+
+  // Calculate the distance in years
+  const distanceInYears = Math.abs(differenceInYears(endDate, startDate));
+
+  // Check if the distance is less than or equal to one year
+  if (distanceInYears <= 1) {
+    return {
+      unit: 'year',
+      format: 'yyyy',
+      startOf: startOfYear,
+    };
+  }
+
+  // Otherwise, the distance is more than one year
+  return {
+    unit: 'year',
+    format: 'yyyy',
+    startOf: startOfYear,
+  };
+}
+
+const FormTextInput = ({ field, form, ...props }) => {
+  const { theme, wider } = props;
+  return (
+    <input
+      className={`px-[12px] text-sm h-[38px] py-1.5 shadow-sm w-[245px] border-[#E7E7E7] ${'text-[#212121]'} border-[1px] bg-[white] rounded-md`}
+      type="text"
+      {...field}
+      {...props}
+    />
+  );
+};
+
+const POSTGRES_DATE_TYPES = [
+  'timestamp',
+  'date',
+  'timestamptz',
+  'time',
+  'timetz',
+];
+
+async function getReferencedTables(sqlQuery, databaseType, dbTables) {
+  //   const parser = new Parser();
+  let tables = [];
+  let withAliases = [];
+
+  const response = await axios.post(
+    'https://quill-344421.uc.r.appspot.com/astify',
+    { query: sqlQuery }
+  );
+  let ast = response.data.ast;
+  ast = ast.length ? ast[0] : ast;
+
+  if (ast.with && ast.with.length) {
+    for (let i = 0; i < ast.with.length; i++) {
+      withAliases.push(ast.with[i].name.value);
+      for (let j = 0; j < ast.with[i].stmt.from.length; j++)
+        tables.push(ast.with[i].stmt.from[j].table);
+    }
+  }
+  const tablesInQuery = [...tables, ...ast.from.map(elem => elem.table)].filter(
+    elem => !withAliases.includes(elem)
+  );
+  return dbTables
+    .filter(table => tablesInQuery.includes(table.displayName))
+    .map(table => {
+      return {
+        name: table.displayName,
+        columns: table.columns.filter(column =>
+          POSTGRES_DATE_TYPES.includes(column.fieldType)
+        ),
+      };
+    })
+    .filter(table => table.columns.length > 0);
+}
+
+const FORMAT_OPTIONS = [
+  { value: 'whole_number', label: 'whole number' },
+  { value: 'one_decimal_place', label: 'one decimal place' },
+  { value: 'dollar_amount', label: 'dollar amount' },
+  { value: 'MMM_yyyy', label: 'month' },
+  { value: 'MMM_dd-MMM_dd', label: 'week' },
+  { value: 'MMM_dd_yyyy', label: 'day' },
+  { value: 'MMM_dd_hh:mm_ap_pm', label: 'day and time' },
+  { value: 'hh_ap_pm', label: 'hour' },
+  { value: 'percent', label: 'percent' },
+  { value: 'string', label: 'string' },
+];
+
+function FormikForm({
+  values,
+  isSubmitting,
+  data,
+  fieldOptions,
+  dateFieldOptions,
+  theme,
+  report,
+  editChart,
+  fields,
+  query,
+  SelectComponent,
+  TextInputComponent,
+  ButtonComponent,
+  SecondaryButtonComponent,
+  setFieldValue,
+  organizationName,
+  formHeaderStyle,
+  formLabelStyle,
+}) {
+  const [chartConfig, setChartConfig] = useState({});
+  const [yAxisFields, setYAxisFields] = useState(
+    report
+      ? report.yAxisFields
+      : [
+          {
+            field:
+              fieldOptions.length > 1
+                ? fieldOptions[1].value
+                : fieldOptions[0].value,
+            label: '',
+            format: 'whole_number',
+          },
+        ]
+  );
+  const [columns, setColumns] = useState(
+    report && report.columns.length
+      ? report.columns
+      : fields?.length
+      ? fields.map(field => convertPostgresColumn(field))
+      : []
+  );
+
+  const handleAddYAxisField = () => {
+    setYAxisFields([
+      ...yAxisFields,
+      { label: '', field: '', format: 'whole_number' },
+    ]);
+  };
+
+  const handleDeleteYAxisField = index => {
+    setYAxisFields(yAxisFields => yAxisFields.filter((_, i) => index !== i));
+  };
+
+  const handleYAxisFieldChange = (index, value) => {
+    const newYAxisFields = [...yAxisFields];
+    newYAxisFields[index] = { ...newYAxisFields[index], field: value };
+    setYAxisFields(newYAxisFields);
+  };
+
+  const handleYAxisFieldFormatChange = (index, value) => {
+    const newYAxisFields = [...yAxisFields];
+    newYAxisFields[index] = { ...newYAxisFields[index], format: value };
+    setYAxisFields(newYAxisFields);
+  };
+
+  const handleYAxisFieldLabelChange = (index, value) => {
+    const newYAxisFields = [...yAxisFields];
+    newYAxisFields[index] = { ...newYAxisFields[index], label: value };
+    setYAxisFields(newYAxisFields);
+  };
+
+  const handleColumnFieldChange = (index, value) => {
+    const newColumns = [...columns];
+    newColumns[index] = { ...newColumns[index], field: value };
+    setColumns(newColumns);
+  };
+
+  const handleColumnFormatChange = (index, value) => {
+    const newColumns = [...columns];
+    newColumns[index] = { ...newColumns[index], format: value };
+    setColumns(newColumns);
+  };
+
+  const handleColumnLabelChange = (index, value) => {
+    const newColumns = [...columns];
+    newColumns[index] = { ...newColumns[index], label: value };
+    setColumns(newColumns);
+  };
+
+  useEffect(() => {
+    setChartConfig({ ...values, yAxisFields: yAxisFields, rows: data });
+  }, [values, yAxisFields]);
+
+  // console.log('VIBE: ', { report, values, yAxisFields, columns, query });
+
+  return (
+    <Form style={{ display: 'inline-block' }}>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          {/* <div
+            style={{
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+              fontSize: 20,
+              fontWeight: 600,
+            }}
+          >
+            {report ? 'Edit chart' : 'Add to dashboard'}
+          </div> */}
+          <div style={{ height: 20 }} />
+          <div style={{ marginLeft: -25 }}>
+            {Object.keys(chartConfig).length > 0 && (
+              <Chart
+                chartId="646e37a660feef000be67a93"
+                config={chartConfig}
+                colors={theme.chartColors}
+                containerStyle={{
+                  width: '100%',
+                  height: 300,
+                }}
+              />
+            )}
+          </div>
+          <div style={{ height: 20 }} />
+          <div
+            style={
+              formHeaderStyle || {
+                fontFamily: theme.fontFamily,
+                color: theme.primaryTextColor,
+                fontSize: theme.fontSize + 2,
+                fontWeight: 600,
+                marginTop: 20,
+              }
+            }
+          >
+            {'Chart'}
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div
+                style={
+                  formLabelStyle || {
+                    fontSize: '14px',
+                    marginBottom: '6px',
+                    fontWeight: '600',
+                    marginTop: 8,
+                    color: theme.secondaryTextColor,
+                    fontFamily: theme?.fontFamily,
+                  }
+                }
+              >
+                Name
+              </div>
+              <div style={{ minWidth: 200 }}>
+                <Field
+                  name="chartName"
+                  component={TextInputComponent}
+                  theme={theme}
+                  wider
+                />
+              </div>
+            </div>
+            <div style={{ width: 20 }} />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div
+                style={
+                  formLabelStyle || {
+                    fontFamily: theme.fontFamily,
+                    color: theme.secondaryTextColor,
+                    fontSize: theme.fontSize,
+                    fontWeight: theme.labelFontWeight,
+                    marginTop: 8,
+                    marginBottom: 6,
+                  }
+                }
+              >
+                Dashboard name
+              </div>
+              <div style={{ minWidth: 200 }}>
+                <Field
+                  name="dashboardName"
+                  component={TextInputComponent}
+                  theme={theme}
+                  wider
+                />
+              </div>
+            </div>
+            <div style={{ width: 20 }} />
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div
+                style={
+                  formLabelStyle || {
+                    fontFamily: theme.fontFamily,
+                    color: theme.secondaryTextColor,
+                    fontSize: theme.fontSize,
+                    fontWeight: theme.labelFontWeight,
+                    marginTop: 8,
+                  }
+                }
+              >
+                Chart type
+              </div>
+              <div style={{ minWidth: 200 }}>
+                <Field
+                  name="chartType"
+                  component={SelectComponent}
+                  theme={theme}
+                  options={[
+                    { label: 'bar', value: 'bar' },
+                    { label: 'line', value: 'line' },
+                    { label: 'column', value: 'column' },
+                    { label: 'pie', value: 'pie' },
+                    { label: 'metric', value: 'metric' },
+                    { label: 'table', value: 'table' },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            // justifyContent: 'space-between',
+            marginTop: 20,
+          }}
+        >
+          {values.chartType !== 'table' && (
+            <div style={{ display: 'flex', flexDirection: 'column' }}>
+              <div
+                style={
+                  formLabelStyle || {
+                    fontFamily: theme.fontFamily,
+                    color: theme.secondaryTextColor,
+                    fontSize: theme.fontSize,
+                    fontWeight: theme.labelFontWeight,
+                  }
+                }
+              >
+                {values.chartType === 'pie'
+                  ? 'Category column'
+                  : 'x-axis column'}
+              </div>
+              <div style={{ height: 6 }} />
+              <div
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
+              >
+                <div style={{ minWidth: 200 }}>
+                  <Field
+                    name="xAxisField"
+                    component={SelectComponent}
+                    theme={theme}
+                    options={fieldOptions}
+                  />
+                </div>
+                {/* {fieldOptions.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Field> */}
+                <div style={{ width: 20 }} />
+                <div style={{ minWidth: 200 }}>
+                  <Field
+                    name="xAxisLabel"
+                    component={TextInputComponent}
+                    theme={theme}
+                  />
+                </div>
+                <div style={{ width: 20 }} />
+                <div style={{ minWidth: 200 }}>
+                  <Field
+                    name="xAxisFormat"
+                    component={SelectComponent}
+                    theme={theme}
+                    options={FORMAT_OPTIONS}
+                  />
+                </div>
+                {/* {FORMAT_OPTIONS.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </Field> */}
+              </div>
+            </div>
+          )}
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            // justifyContent: 'space-between',
+            marginTop: 20,
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: theme.secondaryTextColor,
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                  minWidth: 200,
+                }
+              }
+            >
+              {values.chartType === 'table'
+                ? 'Columns'
+                : values.chartType === 'pie'
+                ? 'Quantity column'
+                : 'y-axis columns'}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              {yAxisFields.map((yAxisField, index) => (
+                <div
+                  key={`yAxisField-${index}`}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: index === 0 ? 6 : 10,
+                  }}
+                >
+                  <div style={{ minWidth: 200 }}>
+                    <Field
+                      name={`yAxisField-${index}`}
+                      component={SelectComponent}
+                      theme={theme}
+                      value={yAxisField.field}
+                      onChange={option => handleYAxisFieldChange(index, option)}
+                      options={fieldOptions}
+                    />
+                  </div>
+                </div>
+              ))}
+              {values.chartType !== 'pie' && (
+                <div style={{ marginTop: 12 }}>
+                  <SecondaryButtonComponent
+                    onClick={handleAddYAxisField}
+                    label="Add column +"
+                  />
+                </div>
+              )}
+              <div style={{ height: 10 }} />
+            </div>
+          </div>
+          <div style={{ width: 20 }} />
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'flex-start',
+            }}
+          >
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: 'transparent',
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                  minWidth: 200,
+                  //   marginBottom: 10,
+                }
+              }
+            >
+              y-axis label
+            </div>
+            {values.chartType !== 'pie' &&
+              yAxisFields.map((yAxisField, index) => (
+                <div
+                  key={`yAxisField-${index}`}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: index === 0 ? 6 : 10,
+                  }}
+                >
+                  <div style={{ minWidth: 200 }}>
+                    <Field
+                      name={`yAxisField-${index}`}
+                      component={TextInputComponent}
+                      theme={theme}
+                      placeholder="Enter column label"
+                      value={yAxisField.label}
+                      onChange={event =>
+                        handleYAxisFieldLabelChange(index, event.target.value)
+                      }
+                    />
+                  </div>
+                  <div style={{ width: 20 }} />
+                  <div style={{ minWidth: 200 }}>
+                    <Field
+                      name={`yAxisFieldFormat-${index}`}
+                      component={SelectComponent}
+                      theme={theme}
+                      value={yAxisField.format}
+                      onChange={option =>
+                        handleYAxisFieldFormatChange(index, option)
+                      }
+                      options={FORMAT_OPTIONS}
+                    />
+                  </div>
+                  <div
+                    onClick={() =>
+                      index > 0 ? handleDeleteYAxisField(index) : undefined
+                    }
+                    style={{
+                      cursor: index > 0 ? 'pointer' : undefined,
+                      paddingLeft: 6,
+                      paddingTop: 12,
+                      paddingBottom: 12,
+                      paddingRight: 6,
+                      maxHeight: 38,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <XMarkIcon
+                      style={{
+                        height: '20px',
+                        width: '20px',
+                        color:
+                          index > 0
+                            ? theme?.secondaryTextColor
+                            : 'rgba(0,0,0,0)',
+                      }}
+                      aria-hidden="true"
+                    />
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+        <div style={{ height: 20 }} />
+        <div
+          style={
+            formHeaderStyle || {
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+              fontSize: theme.fontSize + 2,
+              fontWeight: 600,
+            }
+          }
+        >
+          {'Table'}
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            // justifyContent: 'space-between',
+            // marginTop: 8,
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: theme.secondaryTextColor,
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                }
+              }
+            >
+              {'Columns'}
+            </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              {columns.map((yAxisField, index) => (
+                <div
+                  key={`column-${index}`}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    marginTop: index === 0 ? 6 : 10,
+                  }}
+                >
+                  <div style={{ minWidth: 200 }}>
+                    <Field
+                      name={`column-${index}`}
+                      component={SelectComponent}
+                      theme={theme}
+                      value={yAxisField.field}
+                      onChange={option =>
+                        handleColumnFieldChange(index, option)
+                      }
+                      options={fieldOptions}
+                    />
+                  </div>
+                </div>
+              ))}
+              <div style={{ height: 10 }} />
+            </div>
+          </div>
+          <div style={{ width: 20 }} />
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'flex-start',
+            }}
+          >
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: 'transparent',
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                  minWidth: 200,
+                  //   marginBottom: 10,
+                }
+              }
+            >
+              label
+            </div>
+            {columns.map((yAxisField, index) => (
+              <div
+                key={`column-${index}`}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  marginTop: index === 0 ? 6 : 10,
+                }}
+              >
+                <div style={{ minWidth: 200 }}>
+                  <Field
+                    name={`columnlabel-${index}`}
+                    component={TextInputComponent}
+                    theme={theme}
+                    placeholder="Enter column label"
+                    value={yAxisField.label}
+                    onChange={event =>
+                      handleColumnLabelChange(index, event.target.value)
+                    }
+                  />
+                </div>
+                <div style={{ width: 20 }} />
+                <div style={{ minWidth: 200 }}>
+                  <Field
+                    name={`columnFormat-${index}`}
+                    component={SelectComponent}
+                    theme={theme}
+                    value={yAxisField.format}
+                    onChange={option => handleColumnFormatChange(index, option)}
+                    options={FORMAT_OPTIONS}
+                  />
+                </div>
+                {/* <div
+                  style={{
+                    cursor: index > 0 ? 'pointer' : undefined,
+                    paddingLeft: 6,
+                    paddingTop: 12,
+                    paddingBottom: 12,
+                    paddingRight: 6,
+                    maxHeight: 38,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <XMarkIcon
+                    style={{
+                      height: '20px',
+                      width: '20px',
+                      color:
+                        index > 0 ? theme?.secondaryTextColor : 'rgba(0,0,0,0)',
+                    }}
+                    aria-hidden="true"
+                  />
+                </div> */}
+              </div>
+            ))}
+          </div>
+        </div>
+        <div style={{ height: 20 }} />
+        {/* <div
+          style={
+            formHeaderStyle || {
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+              fontSize: theme.fontSize + 2,
+              fontWeight: 600,
+              // marginTop: 20,
+            }
+          }
+        >
+          {'Filters'}
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: theme.secondaryTextColor,
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                  marginTop: 8,
+                  marginBottom: 6,
+                }
+              }
+            >
+              Date field table
+            </div>
+            <div style={{ minWidth: 200 }}>
+              <Field
+                name="dateFieldTable"
+                component={SelectComponent}
+                theme={theme}
+                options={dateFieldOptions.map(elem => {
+                  return { label: elem.name, value: elem.name };
+                })}
+              />
+            </div>
+          </div>
+          <div style={{ width: 20 }} />
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <div
+              style={
+                formLabelStyle || {
+                  fontFamily: theme.fontFamily,
+                  color: theme.secondaryTextColor,
+                  fontSize: theme.fontSize,
+                  fontWeight: theme.labelFontWeight,
+                  marginTop: 8,
+                  marginBottom: 6,
+                }
+              }
+            >
+              Date field
+            </div>
+            <div style={{ minWidth: 200 }}>
+              <Field
+                name="dateField"
+                component={SelectComponent}
+                theme={theme}
+                options={
+                  dateFieldOptions.filter(
+                    elem => elem.name === values.dateFieldTable
+                  ).length
+                    ? dateFieldOptions
+                        .filter(elem => elem.name === values.dateFieldTable)[0]
+                        .columns.map(elem => {
+                          return { label: elem.name, value: elem.name };
+                        })
+                    : []
+                }
+              />
+            </div>
+          </div>
+        </div> */}
+        {/* <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            // alignItems: "center",
+            // justifyContent: "space-between",
+            marginTop: 10,
+            marginBottom: 20,
+          }}
+        >
+          <div
+            style={{
+              fontFamily: theme.fontFamily,
+              color: theme.primaryTextColor,
+              fontSize: theme.fontSize + 2,
+              fontWeight: 600,
+              marginTop: 20,
+              marginBottom: 12,
+            }}
+          >
+            {"Access Control"}
+          </div>
+          <Tab.Group
+            className={`px-1 flex flex-row text-sm font-medium py-1 h-[38px] w-[500px] border-[#E7E7E7] ${"text-[#212121]"} bg-[#212121]/[0.03] rounded-md`}
+            selectedIndex={values.template === true ? 1 : 0}
+            onChange={(index) => {
+              if (index === 0) {
+                setFieldValue("template", false);
+              } else {
+                setFieldValue("template", true);
+              }
+            }}
+          >
+            <Tab.List>
+              <Tab
+                className={({ selected }) =>
+                  classNames(
+                    "w-full rounded-md py-1 text-sm font-medium leading-5 text-[#212121]",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
+                    selected
+                      ? "bg-white shadow"
+                      : "hover:bg-white/[0.12] text-[#212121]/[.3]"
+                  )
+                }
+              >
+                {`This Organization (${organizationName})`}
+              </Tab>
+              <Tab
+                className={({ selected }) =>
+                  classNames(
+                    "w-full rounded-md py-1 text-sm font-medium leading-5 text-[#212121]",
+                    "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
+                    selected
+                      ? "bg-white shadow"
+                      : "hover:bg-white/[0.12] text-[#212121]/[.3]"
+                  )
+                }
+              >
+                {"Global (All Organizations)"}
+              </Tab>
+            </Tab.List>
+          </Tab.Group>
+        </div> */}
+        <div style={{ height: 20 }} />
+        <ButtonComponent
+          onClick={() =>
+            editChart({ report, values, yAxisFields, columns, query })
+          }
+          label={report ? 'Save changes' : 'Add to dashboard'}
+        />
+      </div>
+    </Form>
+  );
+}