@quillsql/react 1.7.5 → 1.7.7

package/src/Table.tsx

@@ -1,1074 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import axios from 'axios';
-import { ClientContext, DashboardContext, ThemeContext } from './Context';
-// import Skeleton from 'react-loading-skeleton';
-import { valueFormatter } from './Chart';
-// import { SpecialTable } from './SQLEditor';
-import { QuillTheme } from './QuillProvider';
-
-interface TableColumn {
-  label: string;
-  field: string;
-}
-
-interface ChartIdTableProps {
-  chartId: string;
-  containerStyle?: React.CSSProperties;
-  csvFilename?: string;
-}
-
-interface DataTableProps {
-  columns: TableColumn[];
-  rows: object[];
-  containerStyle?: React.CSSProperties;
-  csvFilename?: string;
-}
-
-const Table = ({
-  chartId,
-  columns,
-  rows,
-  containerStyle,
-  csvFilename,
-}: ChartIdTableProps | DataTableProps) => {
-  const { dispatch, dashboard } = useContext(DashboardContext);
-  const [client, _] = useContext(ClientContext);
-  const [theme] =
-    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
-
-  const downloadCSV = (rows, name) => {
-    // report.rows
-    if (!rows.length) {
-      return;
-    }
-    const json = rows; // JSON data passed as a prop
-    const fields = Object.keys(json[0]); // Assumes all objects have same keys
-    const csvRows = [];
-
-    // Header row
-    csvRows.push(fields.join(','));
-
-    // Data rows
-    for (const row of json) {
-      const values = fields.map(field => JSON.stringify(row[field] || ''));
-      csvRows.push(values.join(','));
-    }
-
-    // Create CSV string and create a 'blob' with it
-    const csvString = csvRows.join('\r\n');
-    const csvBlob = new Blob([csvString], { type: 'text/csv' });
-
-    // Create a download link and click it
-    const downloadLink = document.createElement('a');
-    downloadLink.download = `${name}.csv`;
-    downloadLink.href = URL.createObjectURL(csvBlob);
-    downloadLink.style.display = 'none';
-
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
-  };
-
-  if (!chartId && rows && columns) {
-    return (
-      <SpecialTable
-        showDownloadCsvButton
-        csvFilename={csvFilename || 'table'}
-        columns={columns}
-        rows={rows}
-        height={containerStyle?.height || '100%'}
-        theme={theme}
-      />
-    );
-  }
-
-  return (
-    <ChartUpdater
-      dispatch={dispatch}
-      dashboard={dashboard}
-      chartId={chartId}
-      containerStyle={containerStyle}
-      client={client}
-      theme={theme}
-      downloadCSV={downloadCSV}
-      csvFilename={csvFilename}
-    />
-  );
-};
-
-interface TableButtonComponentProps {
-  onClick: () => void;
-}
-
-export function SpecialTable({
-  columns,
-  rows,
-  height,
-  containerStyle,
-  loading,
-  LoadingComponent,
-  theme,
-  showDownloadCsvButton,
-  csvFilename,
-  DownloadCSVButtonComponent,
-  AddToDashboardButtonComponent,
-}: {
-  columns: any[];
-  rows: any[];
-  height: string;
-  containerStyle?: React.CSSProperties;
-  loading?: boolean;
-  LoadingComponent?: () => JSX.Element;
-  theme?: any;
-  showDownloadCsvButton?: boolean;
-  csvFilename?: string;
-  DownloadCSVButtonComponent?: (
-    props: TableButtonComponentProps
-  ) => JSX.Element;
-  AddToDashboardButtonComponent?: (
-    props: TableButtonComponentProps
-  ) => JSX.Element;
-}) {
-  const downloadCSV = () => {
-    // report.rows
-    if (!rows.length) {
-      return;
-    }
-    const json = rows; // JSON data passed as a prop
-    const fields = Object.keys(json[0]); // Assumes all objects have same keys
-    const csvRows = [];
-
-    // Header row
-    csvRows.push(fields.join(','));
-
-    // Data rows
-    for (const row of json) {
-      const values = fields.map(field => JSON.stringify(row[field] || ''));
-      csvRows.push(values.join(','));
-    }
-
-    // Create CSV string and create a 'blob' with it
-    const csvString = csvRows.join('\r\n');
-    const csvBlob = new Blob([csvString], { type: 'text/csv' });
-
-    // Create a download link and click it
-    const downloadLink = document.createElement('a');
-    downloadLink.download = `${csvFilename}.csv`;
-    downloadLink.href = URL.createObjectURL(csvBlob);
-    downloadLink.style.display = 'none';
-
-    document.body.appendChild(downloadLink);
-    downloadLink.click();
-    document.body.removeChild(downloadLink);
-  };
-  if (loading) {
-    return (
-      <div
-        style={{
-          ...containerStyle,
-          // paddingLeft: 25,
-          // paddingRight: 25,
-          // borderRadius: 8,
-          // marginTop: 25,
-          // overflow: 'visible',
-          width: '100%',
-          height: height,
-          // overflow: 'hidden',
-          // @ts-ignore
-          // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-        }}
-      >
-        <div
-          style={{
-            height: '100%',
-            overflow: 'scroll',
-            borderRadius: 6,
-            border: '1px solid rgb(229, 231, 235)',
-            padding: 0,
-            margin: 0,
-            // border: 'none',
-            boxSizing: 'border-box',
-            outline: 'none',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            // maxHeight: 600,
-          }}
-        >
-          {LoadingComponent && <LoadingComponent />}
-          {!LoadingComponent && (
-            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
-              <defs>
-                <linearGradient
-                  id="circleGradient"
-                  gradientUnits="objectBoundingBox"
-                >
-                  <stop offset="0%" stop-color="#F9F9FA" />
-                  <stop offset="5%" stop-color="#F9F9FA" />
-                  <stop offset="100%" stop-color="#D1D1D1" />
-                </linearGradient>
-                <mask id="mask">
-                  <circle cx="12" cy="12" r="12" fill="white" />
-                  <path
-                    id="sector"
-                    fill="black"
-                    d="M15,15 L15,1.8 A13.2,13.2 0 0,1 15,1.8 Z"
-                  >
-                    <animate
-                      attributeName="d"
-                      from="M15,15 L15,1.8 A13.2,13.2 0 0,0 15,1.8 Z"
-                      to="M15,15 L15,1.8 A13.2,13.2 0 1,1 15,1.8 Z"
-                      dur="2s"
-                      repeatCount="indefinite"
-                    />
-                  </path>
-                </mask>
-              </defs>
-              <g transform="rotate(0 15 15)">
-                <animateTransform
-                  attributeName="transform"
-                  attributeType="XML"
-                  type="rotate"
-                  from="0 12 12"
-                  to="360 12 12"
-                  dur="2s"
-                  repeatCount="indefinite"
-                />
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="12"
-                  fill="none"
-                  stroke="url(#circleGradient)"
-                  stroke-width="8"
-                  mask="url(#mask)"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
-      </div>
-    );
-  }
-  if (!columns || !columns.length || !rows) {
-    return null;
-  }
-
-  if (showDownloadCsvButton) {
-    return (
-      <div
-        style={{
-          ...containerStyle,
-          // paddingLeft: 25,
-          // paddingRight: 25,
-          // borderRadius: 8,
-          // marginTop: 25,
-          overflow: 'visible',
-          height: height,
-          // overflow: 'hidden',
-          // @ts-ignore
-          // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-        }}
-      >
-        <div style={{ height: 50, background: 'white' }} className="thead">
-          <div
-            role="row"
-            className="tr"
-            style={{
-              display: 'flex',
-              flex: '1 0 auto',
-              minWidth: '100px',
-              boxSizing: 'border-box',
-              alignItems: 'center',
-              height: 50,
-              // position: 'absolute',
-              // bottom: 0,
-            }}
-          >
-            {DownloadCSVButtonComponent && (
-              <DownloadCSVButtonComponent onClick={downloadCSV} />
-            )}
-            {!DownloadCSVButtonComponent && (
-              <div
-                onClick={downloadCSV}
-                style={{
-                  height: 40,
-                  minHeight: 40,
-                  color: theme?.primaryTextColor,
-                  boxSizing: 'content-box',
-                  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                  fontSize: theme?.fontSizeSmall || '14px',
-                  fontWeight: theme?.fontWeightMedium || '500',
-                  // marginTop: 8,
-                  marginLeft: 20,
-                  alignItems: 'center',
-                  display: 'flex',
-                  cursor: 'pointer',
-                }}
-              >
-                Download CSV
-              </div>
-            )}
-          </div>
-        </div>
-        <div
-          style={{
-            height: 'calc(100% - 50px)',
-            overflow: 'scroll',
-            borderRadius: 6,
-            border: '1px solid rgb(229, 231, 235)',
-            padding: 0,
-            margin: 0,
-            // border: 'none',
-            boxSizing: 'border-box',
-            outline: 'none',
-            // maxHeight: 600,
-          }}
-        >
-          <div role="table" className="table" style={{ minWidth: '0px' }}>
-            <div className="thead">
-              <div
-                role="row"
-                className="tr"
-                style={{
-                  display: 'flex',
-                  flex: '1 0 auto',
-                  minWidth: '100px',
-                  boxSizing: 'border-box',
-                }}
-              >
-                {/* @ts-ignore */}
-                {columns.map((column, index) => (
-                  <div
-                    key={'sqlcol' + index}
-                    // @ts-ignore
-                    style={{
-                      boxSizing: 'border-box',
-                      flex: '150 0 auto',
-                      minWidth: '50px',
-                      width: '150px',
-                      position: 'relative',
-                      cursor: 'pointer',
-                      background: 'rgb(249, 250, 251)',
-                      borderRight: '1px solid rgb(229, 231, 235)',
-                      whiteSpace: 'nowrap',
-                      display: 'flex',
-                      alignItems: 'center',
-                      overflowX: 'visible',
-                      margin: '0px',
-                      textOverflow: 'ellipsis',
-                      minHeight: '36px',
-                    }}
-                  >
-                    <div style={{ width: 16 }} />
-                    <div
-                      aria-haspopup="dialog"
-                      aria-expanded="false"
-                      aria-controls="mantine-r6-dropdown"
-                      // @ts-ignore
-                      style={{
-                        // fontFamily:
-                        //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                        WebkitTapHighlightColor: 'transparent',
-                        fontFamily: theme?.fontFamily,
-                        // color: 'rgb(55, 65, 81)',
-                        color: theme?.primaryTextColor,
-                        textDecoration: 'none',
-                        fontSize: theme?.fontSizeSmall || '14px',
-                        fontWeight: theme?.fontWeightMedium || '500',
-                        lineHeight: '20px', // 1.25rem * 16px = 20px
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                      }}
-                    >
-                      {column.label}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-            <div role="rowgroup" className="tbody">
-              {/* @ts-ignore */}
-              {!rows.length ? (
-                <div
-                  key={'sqlrow0'}
-                  role="row"
-                  className="tr"
-                  style={{
-                    display: 'flex',
-                    flex: '1 0 auto',
-                    minWidth: '100px',
-                    boxSizing: 'border-box',
-                  }}
-                >
-                  <div
-                    key={'sqlcell0'}
-                    role="cell"
-                    className="td airplane-1h7muk6"
-                    style={{
-                      boxSizing: 'border-box',
-                      flex: '150 0 auto',
-                      minWidth: '50px',
-                      width: '150px',
-                      display: 'flex',
-                      margin: '0px',
-                      textOverflow: 'ellipsis',
-                      minHeight: '36px',
-                      borderRight: '1px solid rgb(229, 231, 235)',
-                      overflow: 'hidden',
-                      borderTop: '1px solid rgb(229, 231, 235)',
-                    }}
-                  >
-                    <div
-                      style={{
-                        lineHeight: '24px',
-                        width: '100%',
-                        display: 'flex',
-                        cursor: 'default',
-                        position: 'relative',
-                      }}
-                      className="airplane-gowkln"
-                      data-testid="static-cell"
-                    >
-                      <div
-                        className="airplane-Text-root airplane-mzqt6k"
-                        aria-haspopup="dialog"
-                        aria-expanded="false"
-                        aria-controls="mantine-r8-dropdown"
-                        id="mantine-r8-target"
-                        style={{
-                          fontFamily:
-                            theme?.fontFamily ||
-                            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                          WebkitTapHighlightColor: 'transparent',
-                          // color: 'rgb(55, 65, 81)',
-                          color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                          textDecoration: 'none',
-                          fontWeight: 400,
-                          fontSize: theme?.fontSizeSmall || '14px',
-                          lineHeight: '20px',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          padding: '8px 16px',
-                        }}
-                      >
-                        No rows returned
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                rows.map((row, rowIndex) => (
-                  <div
-                    key={'sqlrow' + rowIndex}
-                    role="row"
-                    className="tr"
-                    style={{
-                      display: 'flex',
-                      flex: '1 0 auto',
-                      minWidth: '100px',
-                      boxSizing: 'border-box',
-                    }}
-                  >
-                    {/* @ts-ignore */}
-                    {columns.map((column, columnIndex) => (
-                      <div
-                        key={'sqlcell' + columnIndex}
-                        role="cell"
-                        className="td airplane-1h7muk6"
-                        style={{
-                          boxSizing: 'border-box',
-                          flex: '150 0 auto',
-                          minWidth: '50px',
-                          width: '150px',
-                          display: 'flex',
-                          margin: '0px',
-                          textOverflow: 'ellipsis',
-                          minHeight: '36px',
-                          borderRight: '1px solid rgb(229, 231, 235)',
-                          overflow: 'hidden',
-                          borderTop: '1px solid rgb(229, 231, 235)',
-                          borderBottom:
-                            rowIndex === rows.length - 1
-                              ? '1px solid rgb(229, 231, 235)'
-                              : undefined,
-                        }}
-                      >
-                        <div
-                          style={{
-                            lineHeight: '24px',
-                            width: '100%',
-                            display: 'flex',
-                            cursor: 'default',
-                            position: 'relative',
-                          }}
-                          className="airplane-gowkln"
-                          data-testid="static-cell"
-                        >
-                          <div
-                            className="airplane-Text-root airplane-mzqt6k"
-                            aria-haspopup="dialog"
-                            aria-expanded="false"
-                            aria-controls="mantine-r8-dropdown"
-                            id="mantine-r8-target"
-                            style={{
-                              fontFamily:
-                                theme?.fontFamily ||
-                                'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                              WebkitTapHighlightColor: 'transparent',
-                              // color: 'rgb(55, 65, 81)',
-                              color:
-                                theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                              textDecoration: 'none',
-                              fontWeight: 400,
-                              fontSize: theme?.fontSizeSmall || '14px',
-                              lineHeight: '20px',
-                              textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap',
-                              overflow: 'hidden',
-                              padding: '8px 16px',
-                            }}
-                          >
-                            {typeof row[column.field] === 'object'
-                              ? JSON.stringify(row[column.field]).length > 55
-                                ? JSON.stringify(row[column.field]).substring(
-                                    0,
-                                    52
-                                  ) + '...'
-                                : JSON.stringify(row[column.field])
-                              : row[column.field].length > 55
-                              ? row[column.field].substring(0, 52) + '...'
-                              : row[column.field]}
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                ))
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        ...containerStyle,
-        // paddingLeft: 25,
-        // paddingRight: 25,
-        // borderRadius: 8,
-        // marginTop: 25,
-        overflow: 'visible',
-        height: height,
-        // overflow: 'hidden',
-        // @ts-ignore
-        // boxShadow: 'rgba(231, 231, 231, 0.5) 0px 1px 2px 0px',
-      }}
-    >
-      <div
-        style={{
-          height: '100%',
-          overflow: 'scroll',
-          borderRadius: 6,
-          border: '1px solid rgb(229, 231, 235)',
-          padding: 0,
-          margin: 0,
-          // border: 'none',
-          boxSizing: 'border-box',
-          outline: 'none',
-          // maxHeight: 600,
-        }}
-      >
-        <div role="table" className="table" style={{ minWidth: '0px' }}>
-          <div className="thead">
-            <div
-              role="row"
-              className="tr"
-              style={{
-                display: 'flex',
-                flex: '1 0 auto',
-                minWidth: '100px',
-                boxSizing: 'border-box',
-              }}
-            >
-              {/* @ts-ignore */}
-              {columns.map((column, index) => (
-                <div
-                  key={'sqlcol' + index}
-                  // @ts-ignore
-                  style={{
-                    boxSizing: 'border-box',
-                    flex: '150 0 auto',
-                    minWidth: '50px',
-                    width: '150px',
-                    position: 'relative',
-                    cursor: 'pointer',
-                    background: 'rgb(249, 250, 251)',
-                    borderRight: '1px solid rgb(229, 231, 235)',
-                    whiteSpace: 'nowrap',
-                    display: 'flex',
-                    alignItems: 'center',
-                    overflowX: 'visible',
-                    margin: '0px',
-                    textOverflow: 'ellipsis',
-                    minHeight: '36px',
-                  }}
-                >
-                  <div style={{ width: 16 }} />
-                  <div
-                    aria-haspopup="dialog"
-                    aria-expanded="false"
-                    aria-controls="mantine-r6-dropdown"
-                    // @ts-ignore
-                    style={{
-                      // fontFamily:
-                      //   'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                      WebkitTapHighlightColor: 'transparent',
-                      fontFamily: theme?.fontFamily,
-                      // color: 'rgb(55, 65, 81)',
-                      color: theme?.primaryTextColor,
-                      textDecoration: 'none',
-                      fontSize: theme?.fontSizeSmall || '14px',
-                      fontWeight: theme?.fontWeightMedium || '500',
-                      lineHeight: '20px', // 1.25rem * 16px = 20px
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                    }}
-                  >
-                    {column.label}
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div role="rowgroup" className="tbody">
-            {/* @ts-ignore */}
-            {rows.map((row, rowIndex) => (
-              <div
-                key={'sqlrow' + rowIndex}
-                role="row"
-                className="tr"
-                style={{
-                  display: 'flex',
-                  flex: '1 0 auto',
-                  minWidth: '100px',
-                  boxSizing: 'border-box',
-                }}
-              >
-                {/* @ts-ignore */}
-                {columns.map((column, columnIndex) => (
-                  <div
-                    key={'sqlcell' + columnIndex}
-                    role="cell"
-                    className="td airplane-1h7muk6"
-                    style={{
-                      boxSizing: 'border-box',
-                      flex: '150 0 auto',
-                      minWidth: '50px',
-                      width: '150px',
-                      display: 'flex',
-                      margin: '0px',
-                      textOverflow: 'ellipsis',
-                      minHeight: '36px',
-                      borderRight: '1px solid rgb(229, 231, 235)',
-                      overflow: 'hidden',
-                      borderTop: '1px solid rgb(229, 231, 235)',
-                    }}
-                  >
-                    <div
-                      style={{
-                        lineHeight: '24px',
-                        width: '100%',
-                        display: 'flex',
-                        cursor: 'default',
-                        position: 'relative',
-                      }}
-                      className="airplane-gowkln"
-                      data-testid="static-cell"
-                    >
-                      <div
-                        className="airplane-Text-root airplane-mzqt6k"
-                        aria-haspopup="dialog"
-                        aria-expanded="false"
-                        aria-controls="mantine-r8-dropdown"
-                        id="mantine-r8-target"
-                        style={{
-                          fontFamily:
-                            theme?.fontFamily ||
-                            'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
-                          WebkitTapHighlightColor: 'transparent',
-                          // color: 'rgb(55, 65, 81)',
-                          color: theme?.secondaryTextColor || 'rgb(55, 65, 81)',
-                          textDecoration: 'none',
-                          fontWeight: 400,
-                          fontSize: theme?.fontSizeSmall || '14px',
-                          lineHeight: '20px',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          padding: '8px 16px',
-                        }}
-                      >
-                        {typeof row[column.field] === 'object'
-                          ? JSON.stringify(row[column.field]).length > 55
-                            ? JSON.stringify(row[column.field]).substring(
-                                0,
-                                52
-                              ) + '...'
-                            : JSON.stringify(row[column.field])
-                          : row[column.field].length > 55
-                          ? row[column.field].substring(0, 52) + '...'
-                          : row[column.field]}
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-const ChartUpdater = ({
-  chartId,
-  containerStyle,
-  dashboard,
-  dispatch,
-  client,
-  theme,
-  downloadCSV,
-  csvFilename,
-}: {
-  dispatch: any;
-  dashboard: object;
-  chartId: string;
-  containerStyle?: React.CSSProperties;
-  client: any;
-  theme: object;
-  downloadCSV: (rows: object[], name: string) => void;
-  csvFilename?: string;
-}) => {
-  const [chartConfig, setChartConfig] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    let isSubscribed = true;
-    async function getChartOptions(id: string) {
-      if (isSubscribed) {
-        // @ts-ignore
-        if (dashboard && dashboard[id]) {
-          const { columns, rows, name } = dashboard[id];
-          setChartConfig({
-            columns,
-            rows,
-            name,
-          });
-          setLoading(false);
-          return;
-        }
-        const { publicKey, customerId, environment } = client;
-        setLoading(true);
-        try {
-          const resp = await axios.get(
-            'https://quill-344421.uc.r.appspot.com/item',
-            {
-              params: {
-                id: chartId,
-                orgId: customerId,
-                publicKey: publicKey,
-              },
-              headers: {
-                environment: environment || undefined,
-              },
-            }
-          );
-          const { columns, rows, name } = resp.data;
-
-          setChartConfig({
-            columns,
-            rows,
-            name,
-          });
-          setLoading(false);
-          //   dispatch({ type: 'UPDATE_DASHBOARD_ITEM', id, data: resp.data });
-        } catch (e) {
-          console.log('Error fetching chart: ', e);
-          setLoading(false);
-        }
-      }
-    }
-    if (chartId && !chartConfig) {
-      getChartOptions(chartId);
-    }
-    return () => {
-      isSubscribed = false;
-    };
-  }, [chartConfig]);
-
-  const NUM_TO_SHOW = containerStyle?.height
-    ? Math.floor(containerStyle.height / 40) - 1
-    : 6;
-
-  const memoizedData = useMemo(() => {
-    if (!chartConfig || !chartConfig.rows || !chartConfig.rows.length) {
-      return [];
-    }
-    // Deep copy of data
-    const copiedData = JSON.parse(
-      JSON.stringify(
-        chartConfig && chartConfig.rows && chartConfig.rows.length
-          ? chartConfig.rows
-          : []
-      )
-    );
-
-    return copiedData.map(item => {
-      const fieldsWithFormattedValues = {};
-
-      for (const field of chartConfig.columns) {
-        const value = item[field.field];
-        fieldsWithFormattedValues[field.field] = valueFormatter({
-          value,
-          field: field.field,
-          fields: chartConfig.columns,
-        });
-      }
-
-      return fieldsWithFormattedValues;
-    });
-  }, [chartConfig]);
-
-  const handleDownloadCSV = () => {
-    downloadCSV(memoizedData, chartConfig.name);
-  };
-
-  if (!chartConfig || loading) {
-    return (
-      <div
-        // className="flex flex-col flex-1 h-[100%]"
-        style={{
-          ...containerStyle,
-          // marginLeft: 25,
-          // marginRight: 25,
-          boxSizing: 'content-box',
-          height: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          flex: 1,
-        }}
-      >
-        <div
-          style={{
-            height: containerStyle?.height || 300,
-            width: '100%',
-            boxSizing: 'content-box',
-          }}
-        >
-          <svg
-            width="100%"
-            height="100%"
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-          >
-            <rect width="100%" height="100%" fill="#F9F9FA" />
-
-            <defs fill="#F9F9FA">
-              <linearGradient
-                id="skeletonGradient"
-                x1="0%"
-                y1="0%"
-                x2="10%"
-                y2="0%"
-                gradientUnits="userSpaceOnUse"
-              >
-                <stop offset="0%" stop-color="rgba(255,255,255,0)" />
-                <stop offset="50%" stop-color="#FEFEFE" />
-                <stop offset="100%" stop-color="rgba(255,255,255,0)" />
-                <animate
-                  attributeName="x1"
-                  from="-100%"
-                  to="100%"
-                  dur="2s"
-                  repeatCount="indefinite"
-                />
-                <animate
-                  attributeName="x2"
-                  from="-50%"
-                  to="150%"
-                  dur="2s"
-                  repeatCount="indefinite"
-                />
-              </linearGradient>
-            </defs>
-
-            <rect width="50%" height="100%" fill="url(#skeletonGradient)">
-              <animate
-                attributeName="x"
-                from="-100%"
-                to="100%"
-                dur="2s"
-                repeatCount="indefinite"
-              />
-            </rect>
-          </svg>
-          {/* <Skeleton
-            count={1}
-            // height={containerStyle?.height}
-            height={
-              containerStyle?.height && containerStyle?.marginTop
-                ? containerStyle?.height + containerStyle?.marginTop
-                : containerStyle?.height
-                ? containerStyle?.height
-                : 300
-            }
-            borderRadius={8}
-            // highlightColor="#F7F7F8"
-            highlightColor="#FDFDFD"
-            // baseColor="#F3F4F6"
-            baseColor="#F9F9FA"
-            width="100%"
-          /> */}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <SpecialTable
-      showDownloadCsvButton
-      csvFilename={csvFilename || chartConfig.name}
-      columns={chartConfig.columns}
-      rows={memoizedData}
-      height={containerStyle?.height || '100%'}
-      theme={theme}
-    />
-  );
-};
-
-function Columns({ columns, data, theme, handleDownloadCSV, numToShow }) {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          // overflowX: 'scroll',
-          // overflowY: 'hidden',
-          overflow: 'scroll',
-          height: '100%',
-        }}
-      >
-        {columns.map(elem => (
-          <Column key={elem.field} column={elem} data={data} theme={theme} />
-        ))}
-      </div>
-
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          //   background: 'black',
-        }}
-      >
-        {data.length > numToShow && (
-          <div
-            style={{
-              color: theme?.chartLabelColor,
-              boxSizing: 'content-box',
-              fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-              fontSize: theme?.fontSizeSmall || '0.875rem',
-              marginLeft: 12,
-              marginTop: 8,
-            }}
-            // className="qq-text-sm"
-          >
-            ...{data.length - numToShow} more
-          </div>
-        )}
-        <div
-          onClick={handleDownloadCSV}
-          style={{
-            height: 40,
-            minHeight: 40,
-            color: theme?.primaryTextColor,
-            boxSizing: 'content-box',
-            fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-            fontSize: theme?.fontSizeSmall || '0.875rem',
-            fontWeight: theme?.fontWeightMedium || '500',
-            marginTop: 8,
-            marginLeft: 20,
-            cursor: 'pointer',
-          }}
-        >
-          Download CSV
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function Column({ column, data, theme }) {
-  return (
-    <div
-      style={{
-        paddingLeft: 20,
-        paddingRight: 20,
-        // width: 'max-content',
-        display: 'inline-flex',
-        flexDirection: 'column',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <div
-        style={{
-          height: 40,
-          minHeight: 40,
-          color: theme?.primaryTextColor,
-          boxSizing: 'content-box',
-          fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-          fontSize: theme?.fontSizeSmall || '0.875rem',
-          fontWeight: theme?.fontWeightMedium || '500',
-        }}
-      >
-        {column.label}
-      </div>
-      {data.map(elem => (
-        <Cell item={elem[column.field]} theme={theme} />
-      ))}
-    </div>
-  );
-}
-
-function Cell({ item, theme }) {
-  return (
-    <div
-      style={{
-        height: 40,
-        minHeight: 40,
-        whiteSpace: 'nowrap',
-        width: '100%',
-        fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-        fontSize: theme?.fontSizeSmall || '0.875rem',
-        color: theme?.chartLabelColor,
-      }}
-    >
-      {item}
-    </div>
-  );
-}
-
-export default Table;