@quillsql/react 1.7.5 → 1.7.6

package/src/AddToDashboardModal.tsx

@@ -1,1220 +0,0 @@
-// @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,
-      withCredentials,
-    } = 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, withCredentials }
-      );
-    } 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} //TODO: resolve; this might be a problem
-                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>
-  );
-}