@quillsql/react 1.7.5 → 1.7.6

package/src/Chart.tsx

@@ -1,1337 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-import React, { useState, useEffect, useContext, useMemo } from 'react';
-import {
-  Area,
-  CartesianGrid,
-  ComposedChart as ReChartsAreaChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-  Bar,
-  BarChart as ReChartsBarChart,
-} from 'recharts';
-import { endOfWeek, format, isValid, startOfWeek } from 'date-fns';
-import { utcToZonedTime } from 'date-fns-tz';
-import BarList from './BarList';
-import PieChart, { findComplementaryAndAnalogousColors } from './PieChart';
-import axios from 'axios';
-import {
-  ClientContext,
-  DashboardContext,
-  ThemeContext,
-  DashboardFiltersContext,
-} from './Context';
-import TableChart from './TableChart';
-import { QuillTheme } from './QuillProvider';
-
-const colorValues = [
-  'slate',
-  'gray',
-  'zinc',
-  'neutral',
-  'stone',
-  'red',
-  'orange',
-  'amber',
-  'yellow',
-  'lime',
-  'green',
-  'emerald',
-  'teal',
-  'cyan',
-  'sky',
-  'blue',
-  'indigo',
-  'violet',
-  'purple',
-  'fuchsia',
-  'pink',
-  'rose',
-] as const;
-
-export type Color = (typeof colorValues)[number];
-
-interface ButtonProps {
-  text: string;
-  onClick?: () => void;
-  className?: string;
-}
-
-// const data = [
-//   {
-//     date: 'Jan 22',
-//     SemiAnalysis: 2890,
-//     'The Pragmatic Engineer': 2338,
-//   },
-//   {
-//     date: 'Feb 22',
-//     SemiAnalysis: 2756,
-//     'The Pragmatic Engineer': 2103,
-//   },
-//   {
-//     date: 'Mar 22',
-//     SemiAnalysis: 3322,
-//     'The Pragmatic Engineer': 2194,
-//   },
-//   {
-//     date: 'Apr 22',
-//     SemiAnalysis: 3470,
-//     'The Pragmatic Engineer': 2108,
-//   },
-//   {
-//     date: 'May 22',
-//     SemiAnalysis: 3475,
-//     'The Pragmatic Engineer': 1812,
-//   },
-//   {
-//     date: 'Jun 22',
-//     SemiAnalysis: 3129,
-//     'The Pragmatic Engineer': 1726,
-//   },
-// ];
-
-export const valueFormatter = ({ value, field, fields }) => {
-  if (
-    value === undefined ||
-    value === null ||
-    field === undefined ||
-    field === null
-  ) {
-    return '';
-  }
-
-  const fieldInfo = fields.find(f => f.field === field);
-
-  if (!fieldInfo) {
-    return '';
-  }
-
-  const formatType = fieldInfo.format;
-  const numValue = Number(value);
-  const absNumber = isNaN(numValue) ? 0 : Math.abs(numValue);
-
-  if (formatType === 'percent') {
-    if (absNumber < 1) {
-      return (absNumber * 100).toFixed(0) + '%';
-    } else {
-      return absNumber.toFixed(0) + '%';
-    }
-  }
-
-  if (formatType === 'dollar_amount') {
-    const formatter = new Intl.NumberFormat('en-US', {
-      style: 'currency',
-      currency: 'USD',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    });
-
-    if (absNumber >= 1000000) {
-      return formatter.format(numValue / 1000000) + 'M';
-    } else if (absNumber >= 1000) {
-      return formatter.format(numValue / 1000) + 'K';
-    } else {
-      return formatter.format(numValue);
-    }
-  }
-
-  if (formatType === 'whole_number') {
-    return Math.round(numValue).toString();
-  }
-
-  if (formatType === 'one_decimal_place') {
-    return numValue.toFixed(1);
-  }
-
-  if (
-    formatType === 'MMM_yyyy' ||
-    formatType === 'MMM_dd_yyyy' ||
-    formatType === 'hh_ap_pm' ||
-    formatType === 'MMM_dd-MMM_dd' ||
-    formatType === 'MMM_dd_hh:mm_ap_pm'
-  ) {
-    const dateValue = new Date(value);
-    const utcDate = utcToZonedTime(dateValue, 'UTC');
-    if (!isValid(utcDate)) {
-      return 'Invalid date';
-    }
-    if (formatType === 'MMM_yyyy') {
-      return format(utcDate, 'MMM yyyy');
-    }
-    if (formatType === 'MMM_dd_yyyy') {
-      return format(utcDate, 'dd MMM yyyy');
-    }
-    if (formatType === 'hh_ap_pm') {
-      return format(utcDate, 'hh:mm aa');
-    }
-    if (formatType === 'MMM_dd-MMM_dd') {
-      const start = startOfWeek(utcDate, { weekStartsOn: 1 }); // Monday
-      const end = endOfWeek(utcDate, { weekStartsOn: 1 }); // Sunday
-      let formattedDate = '';
-      // Check if start and end are in the same month
-      if (format(start, 'MMM') === format(end, 'MMM')) {
-        formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'dd')}`;
-      } else {
-        formattedDate = `${format(start, 'MMM dd')} - ${format(end, 'MMM dd')}`;
-      }
-      return formattedDate;
-    }
-    if (formatType === 'MMM_dd_hh:mm_ap_pm') {
-      const formatStr =
-        utcDate.getMinutes() === 0 ? 'MMM do h a' : 'MMM do h:mm a';
-      let formattedTime = format(utcDate, formatStr);
-      formattedTime =
-        formattedTime.slice(0, -2) + formattedTime.slice(-2).toLowerCase();
-      return formattedTime;
-    }
-  }
-
-  if (formatType === 'string') {
-    return value.toString();
-  }
-
-  return value.toString();
-};
-
-const yAxisFields = [
-  { field: 'avg_days', label: 'average days' },
-  { field: 'median_days', label: 'median days' },
-];
-
-const labelFormatter = (name: string) => {
-  // return yAxisFields.filter(elem => elem.field === name)[0].label;
-  return name;
-};
-
-export const ChartTooltipFrame = ({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-}) => (
-  <div
-    style={{
-      borderStyle: 'solid',
-      borderColor: theme?.borderColor || '#E5E7EB',
-      overflow: 'hidden',
-      borderWidth: 1,
-      background: theme?.backgroundColor || '#ffffff',
-      borderRadius: '6px',
-      boxShadow:
-        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    }}
-    // className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
-    // className={twMerge(
-    //   'bg-white',
-    //   'font-normal',
-    //   'border-[12px]',
-    //   'border-[1px]',
-    //   'text-[#212121]'
-    //   // boxShadow.lg
-    // )}
-  >
-    {children}
-  </div>
-);
-
-export interface ChartTooltipRowProps {
-  value: string;
-  name: string;
-  color: Color;
-  thee: any;
-}
-
-export const ChartTooltipRow = ({
-  value,
-  name,
-  color,
-  theme,
-}: ChartTooltipRowProps) => (
-  <div
-    style={{
-      marginRight: '24px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      width: '100%',
-      paddingTop: 2,
-      paddingBottom: 2,
-    }}
-    // className="qq-flex qq-items-center qq-justify-between qq-space-x-8"
-  >
-    <div
-      // className="qq-flex qq-items-center qq-space-x-2"
-      style={{
-        // marginLeft: '0.5rem',
-        display: 'flex',
-        alignItems: 'center',
-      }}
-    >
-      <span
-        style={{
-          background: color,
-          borderWidth: 2,
-          borderColor: 'white',
-          borderStyle: 'solid',
-          borderColor: 'white',
-          boxShadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-          height: '8px',
-          width: '8px',
-          borderRadius: 100,
-          marginRight: 4,
-        }}
-        // className={twMerge(
-        // 'shrink-0',
-        // 'bg-black',
-        // 'bg-white',
-        // 'border-black',
-        // sizing.sm.height,
-        // sizing.sm.width,
-        // 'qq-h-3',
-        // 'qq-w-3',
-        // 'qq-shadow',
-        // 'qq-rounded-full'
-        // border.md.all,
-        // boxShadow.md
-        // )}
-      />
-      <p
-        // className={twMerge(
-        //   'font-medium tabular-nums text-right whitespace-nowrap',
-        //   'text-[#212121] !important'
-        // )}
-        style={{
-          marginTop: 0,
-          marginBottom: 0,
-          fontFamily: theme?.fontFamily,
-          color: theme?.primaryTextColor,
-          fontSize: theme?.fontSizeSmall || '14px',
-          fontWeight: theme?.fontWeightMedium || '500',
-        }}
-        // className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
-      >
-        {value}
-      </p>
-    </div>
-    <p
-      style={{
-        marginTop: 0,
-        marginBottom: 0,
-        fontFamily: theme?.fontFamily,
-        color: theme?.secondaryTextColor,
-        textAlign: 'right',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        fontSize: theme?.fontSizeSmall || '14px',
-        fontWeight: theme?.fontWeightNormal || '400',
-      }}
-      // className={twMerge(
-      //   'qq-text-right qq-whitespace-nowrap',
-      // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-      // 'qq-text-gray-500'
-      // fontWeight.sm
-      // )}
-    >
-      {name}
-    </p>
-  </div>
-);
-
-export interface ChartTooltipProps {
-  active: boolean | undefined;
-  payload: any;
-  label: string;
-  colors: string[];
-  valueFormatter: any;
-  theme: any;
-}
-
-const ChartTooltip = ({
-  active,
-  payload,
-  label,
-  colors,
-  valueFormatter,
-  dateFormatter,
-  theme,
-}: ChartTooltipProps) => {
-  if (active && payload) {
-    return (
-      <ChartTooltipFrame theme={theme}>
-        <div
-          style={{
-            borderStyle: 'solid',
-            borderBottomColor: theme?.borderColor || '#E5E7EB',
-            background: theme?.backgroundColor || 'white',
-            borderTop: 'none',
-            borderLeft: 'none',
-            borderRight: 'none',
-            borderBottomWidth: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            paddingLeft: '16px',
-            paddingRight: '16px',
-            paddingTop: '8px',
-            paddingBottom: '8px',
-          }}
-          // className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-gray-200"
-          // className={
-          // twMerge()
-          // getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder)
-          //   .borderColor,
-          // spacing.twoXl.paddingX,
-          // spacing.sm.paddingY,
-          // border.sm.bottom
-          // }
-        >
-          <p
-            style={{
-              textAlign: 'left',
-              marginTop: 0,
-              marginBottom: 0,
-              fontFamily: theme?.fontFamily,
-              color: theme?.primaryTextColor,
-              fontSize: theme?.fontSizeSmall || '14px',
-              fontWeight: theme?.boldFontWeight || '500',
-              paddingTop: 2,
-              paddingBottom: 2,
-            }}
-            // className={twMerge(
-            //   'qq-text-elem',
-            //   'qq-text-black',
-            //   'qq-font-medium',
-            //   'qq-gray-700'
-            // getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
-            //   .textColor,
-            // fontWeight.md
-            // )}
-          >
-            {!isNaN(new Date(label)) && dateFormatter
-              ? dateFormatter(label)
-              : !isNaN(new Date(label))
-              ? format(new Date(label), 'MMM yyyy')
-              : label}
-            {/* {label} */}
-          </p>
-        </div>
-
-        <div
-          // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
-          style={{
-            paddingRight: '16px',
-            paddingLeft: '16px',
-            paddingTop: '8px',
-            paddingBottom: '8px',
-            // marginTop: '0.25rem',
-          }}
-          // className={
-          // twMerge()
-          // spacing.twoXl.paddingX,
-          // spacing.sm.paddingY,
-          // 'space-y-1'
-          // }
-        >
-          {payload.map(
-            ({ value, name }: { value: number; name: string }, idx: number) => (
-              <ChartTooltipRow
-                key={`id-${idx}`}
-                value={valueFormatter(value)}
-                name={labelFormatter(name)}
-                // color={categoryColors.get(name) ?? BaseColors.Blue}
-                color={colors[idx]}
-                theme={theme}
-              />
-            )
-          )}
-        </div>
-      </ChartTooltipFrame>
-    );
-  }
-  return null;
-};
-
-interface ChartProps {
-  colors: string[];
-  config?: any;
-  chartId?: string;
-  containerStyle?: React.CSSProperties;
-  dashboard: any;
-  dispatch: any;
-  client: any;
-  dateFilter?: any;
-  theme: any;
-  isDateFilter?: boolean;
-  query?: string;
-}
-
-// @ts-ignore
-function sumByKey(arr, key) {
-  // @ts-ignore
-  return arr.reduce((acc, cur) => {
-    const val = parseInt(cur[key], 10);
-    return isNaN(val) ? acc : acc + val;
-  }, 0);
-}
-
-const Chart = ({
-  chartId,
-  config,
-  colors,
-  containerStyle,
-  dateFilter,
-  query,
-}: {
-  chartId: string;
-  config?: any;
-  colors?: string[];
-  containerStyle?: React.CSSProperties;
-  dateFilter?: boolean;
-  query?: string;
-}) => {
-  const { dispatch, dashboard } = useContext(DashboardContext);
-  const { dashboardFilters } = useContext(DashboardFiltersContext);
-  const [client, _] = useContext(ClientContext);
-  const [theme] =
-    useContext<[QuillTheme, (theme: QuillTheme) => void]>(ThemeContext);
-  const chartColors = useMemo(() => {
-    return colors?.length ? colors : ['#6269E9', '#E14F62'];
-  }, [colors]);
-  return (
-    <ChartUpdater
-      config={config}
-      dispatch={dispatch}
-      dashboard={dashboard}
-      chartId={chartId}
-      containerStyle={containerStyle}
-      colors={chartColors}
-      client={client}
-      theme={theme}
-      isDateFilter={dateFilter}
-      dashboardFilters={dashboardFilters}
-      query={query}
-    />
-  );
-};
-
-const ChartUpdater: React.FC<ChartProps> = ({
-  colors,
-  chartId,
-  config,
-  containerStyle,
-  dashboard,
-  dispatch,
-  client,
-  theme,
-  isDateFilter,
-  dashboardFilters,
-  query,
-}) => {
-  const [loading, setLoading] = useState(true);
-  // console.log('chartConfig:', chartConfig);
-  // console.log('chartConfig.rows:', chartConfig.rows);
-  // console.log('chartConfig.xAxisField:', chartConfig.xAxisField);
-
-  useEffect(() => {
-    if (isDateFilter && !dateFilter) {
-      return;
-    }
-
-    let isSubscribed = true;
-    async function getChartOptions() {
-      if (isSubscribed) {
-        const {
-          publicKey,
-          customerId,
-          environment,
-          queryEndpoint,
-          queryHeaders,
-          withCredentials,
-        } = client;
-        //queryEndpoint = undefined;
-        setLoading(true);
-        try {
-          // if self-hosting option, only get metadata and query
-          if (queryEndpoint) {
-            // const resp = await axios.get(
-            //   'https://quill-344421.uc.r.appspot.com/selfhostitem',
-            //   {
-            //     params: {
-            //       id: chartId,
-            //       orgId: customerId,
-            //       publicKey: publicKey,
-            //     },
-            //     environment: environment || undefined,
-            //   }
-            // );
-            if (dashboardFilters['date_range'] && dashboard[chartId]) {
-              const dateFilter = dashboardFilters['date_range'];
-              dateFilter.dateField = dashboard[chartId].dateField;
-            }
-            const resp = await axios.post(
-              queryEndpoint,
-              {
-                metadata: {
-                  id: chartId,
-                  task: 'item',
-                  filters: {
-                    ...Object.entries(dashboardFilters)
-                      .filter(([key]) => key !== 'date_range')
-                      .map(([, value]) => value),
-                    dateFilter,
-                  },
-                },
-              },
-              { headers: queryHeaders, withCredentials }
-            );
-
-            if (resp.data) {
-              setLoading(false);
-              dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: chartId,
-                data: {
-                  ...resp.data,
-                },
-              });
-            }
-          } else {
-            const resp = await axios.get(
-              'https://quill-344421.uc.r.appspot.com/item',
-              {
-                params: {
-                  id: chartId,
-                  orgId: customerId,
-                  publicKey: publicKey,
-                  filters: Object.keys(dashboardFilters).map(
-                    key => dashboardFilters[key]
-                  ),
-                  // startDate:
-                  //   dateFilter &&
-                  //   dateFilter.startDate &&
-                  //   dateFilter.startDate.toISOString(),
-                  // endDate:
-                  //   dateFilter &&
-                  //   dateFilter.endDate &&
-                  //   dateFilter.endDate.toISOString(),
-                },
-                headers: {
-                  environment: environment || undefined,
-                },
-              }
-            );
-            // console.log('RESP: ', resp.data);
-            if (resp.data) {
-              setLoading(false);
-              dispatch({
-                type: 'UPDATE_DASHBOARD_ITEM',
-                id: chartId,
-                data: { ...resp.data },
-              });
-            }
-          }
-        } catch (e) {
-          console.log('Error fetching chart: ', e);
-          setLoading(false);
-        }
-      }
-    }
-    if (config) {
-      setLoading(false);
-      return;
-    }
-
-    getChartOptions(); //when wouldn't you run this????? saw if statements before that implied you might not run this sometimes
-
-    return () => {
-      isSubscribed = false;
-    };
-  }, [dashboardFilters]);
-
-  // console.log('DASHBOARD FILTERS: ', dashboardFilters);
-
-  useEffect(() => {
-    if (config) {
-      dispatch({
-        type: 'UPDATE_DASHBOARD_ITEM',
-        id: chartId,
-        data: { ...config },
-      });
-    }
-  }, [config]);
-
-  const dateFilter = Object.values(dashboardFilters).find(
-    filter => filter && filter.filterType === 'DATE_RANGE'
-  );
-
-  if (!dashboard[chartId] || 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',
-            borderRadius: 8,
-            overflow: 'hidden',
-          }}
-        >
-          <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>
-        </div>
-      </div>
-    );
-  }
-
-  if (dashboard[chartId]?.chartType === 'pie') {
-    const { xAxisField, yAxisFields } = dashboard[chartId];
-    return (
-      <PieChart
-        // @ts-ignore
-        containerStyle={containerStyle}
-        data={dashboard[chartId].rows.map(row => {
-          return {
-            ...row,
-            count:
-              parseInt(row[yAxisFields[0].field]) /
-              sumByKey(dashboard[chartId].rows, yAxisFields[0].field),
-          };
-        })}
-        category={yAxisFields[0].field}
-        index={xAxisField}
-        colors={colors}
-        theme={theme}
-      />
-    );
-  }
-
-  if (dashboard[chartId]?.chartType === 'table') {
-    return (
-      <TableChart
-        data={dashboard[chartId].rows}
-        yAxisFields={dashboard[chartId].yAxisFields}
-        theme={theme}
-        containerStyle={containerStyle}
-      />
-    );
-  }
-
-  if (dashboard[chartId]?.chartType === 'bar') {
-    return (
-      <BarList
-        data={dashboard[chartId].rows}
-        theme={theme}
-        yAxisFields={dashboard[chartId].yAxisFields}
-        xAxisFormat={dashboard[chartId].xAxisFormat}
-        colors={colors}
-        xAxisField={dashboard[chartId].xAxisField}
-        containerStyle={containerStyle}
-      />
-    );
-  }
-
-  if (dashboard[chartId]?.chartType === 'column') {
-    return (
-      <BarChart
-        colors={colors}
-        theme={theme}
-        yAxisFields={dashboard[chartId].yAxisFields}
-        // @ts-ignore
-        data={dashboard[chartId].rows}
-        xAxisField={dashboard[chartId].xAxisField}
-        xAxisLabel={dashboard[chartId].xAxisLabel}
-        xAxisFormat={dashboard[chartId].xAxisFormat}
-        containerStyle={containerStyle}
-      />
-    );
-  }
-
-  if (dashboard[chartId]?.chartType === 'metric') {
-    return (
-      <div
-        style={{
-          fontFamily: theme?.fontFamily,
-          fontSize: 32,
-          color: theme?.primaryTextColor,
-          fontWeight: '600',
-          textOverflow: 'ellipsis',
-          margin: 0,
-          paddingTop: 20,
-          paddingBottom: 20,
-          paddingLeft: 25,
-          paddingRight: 25,
-          whiteSpace: 'nowrap',
-          boxSizing: 'content-box',
-          display: 'block',
-          maxWidth: '100%',
-          textAlign: 'left',
-          overflow: 'hidden',
-          height: containerStyle?.height || '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          // background: 'red',
-        }}
-        // className="qq-flex qq-flex-col qq-text-xl"
-      >
-        {dashboard[chartId].rows.length > 0 &&
-          valueFormatter({
-            value: dashboard[chartId].rows[0][dashboard[chartId].xAxisField],
-            field: dashboard[chartId].xAxisField,
-            fields: [
-              {
-                field: dashboard[chartId].xAxisField,
-                format: dashboard[chartId].xAxisFormat,
-              },
-            ],
-          })}
-      </div>
-    );
-  }
-
-  return (
-    <LineChart
-      colors={colors}
-      yAxisFields={dashboard[chartId].yAxisFields}
-      // @ts-ignore
-      data={dashboard[chartId].rows}
-      xAxisField={dashboard[chartId].xAxisField}
-      xAxisLabel={dashboard[chartId].xAxisLabel}
-      xAxisFormat={dashboard[chartId].xAxisFormat}
-      containerStyle={containerStyle}
-      theme={theme}
-    />
-  );
-};
-
-function formatNumber(num, label) {
-  num = Number(num);
-  if (num < 1000) {
-    return num.toFixed(2) + ' ' + label;
-  }
-  if (num >= 1.0e6) {
-    return Math.round(num / 1.0e6).toLocaleString() + 'M';
-  } else {
-    return Math.round(num / 1.0e6).toLocaleString() + 'M';
-  }
-}
-
-//  @ts-ignore
-// function getDomain(data, fields) {
-//   //  @ts-ignore
-//   const fieldsArray = fields.map(elem => elem.field);
-//   const [minValue, maxValue] = data.reduce(
-//     //  @ts-ignore
-//     ([min, max], item) => [
-//       //  @ts-ignore
-//       Math.min(min, ...fieldsArray.map(field => item[field])),
-//       //  @ts-ignore
-//       Math.max(max, ...fieldsArray.map(field => item[field])),
-//     ],
-//     [Infinity, -Infinity]
-//   );
-
-//   const adjustedMin = Math.min(minValue, 0);
-//   const padding = Math.round(0.2 * (maxValue - minValue));
-//   const adjustedMax = maxValue + padding;
-
-//   return [adjustedMin, adjustedMax];
-// }
-function getDomain(data, fields) {
-  const fieldsArray = fields.map(elem => elem.field);
-  const numericValues = [];
-
-  data.forEach(item => {
-    fieldsArray.forEach(field => {
-      let value = item[field];
-      // Try to cast the value to a number
-      const numericValue = parseFloat(value);
-
-      if (!isNaN(numericValue)) {
-        value = numericValue;
-      }
-
-      if (typeof value === 'number') {
-        numericValues.push(value);
-      }
-    });
-  });
-
-  const [minValue, maxValue] = numericValues.reduce(
-    ([min, max], value) => [Math.min(min, value), Math.max(max, value)],
-    [Infinity, -Infinity]
-  );
-
-  const adjustedMin = Math.min(minValue, 0);
-  const padding = Math.round(0.2 * (maxValue - minValue));
-  const adjustedMax = maxValue + padding;
-
-  return [adjustedMin, adjustedMax];
-}
-
-const CustomizedTick = ({
-  x,
-  y,
-  payload,
-  theme,
-}: {
-  x: number;
-  y: number;
-  payload: any;
-  theme: any;
-}) => {
-  // const { x, y, payload } = props;
-  const maxLength = 10;
-  const value = payload.value;
-  const truncatedValue =
-    value.length > maxLength ? value.substring(0, maxLength) + '...' : value;
-  return (
-    <text
-      xlinkTitle={value}
-      fill={theme?.chartLabelColor}
-      fontSize={12}
-      x={x}
-      y={y + 15}
-      width={30}
-      textAnchor="middle"
-    >
-      {truncatedValue}
-    </text>
-  );
-};
-
-function BarChart({
-  colors,
-  yAxisFields,
-  data,
-  containerStyle,
-  xAxisField,
-  xAxisLabel,
-  xAxisFormat,
-  theme,
-}: {
-  colors: string[];
-  yAxisFields: any[];
-  data: any[];
-  containerStyle?: React.CSSProperties;
-  xAxisField: string;
-  xAxisLabel: string;
-  xAxisFormat: string;
-  theme: any;
-}) {
-  const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
-  return (
-    <div
-      style={{
-        ...containerStyle,
-        boxSizing: 'content-box',
-        // display: 'flex',
-        // flexDirection: 'column',
-        // flex: 1,
-        // height: '100%',
-        // minHeight: 400,
-        // minWidth: 400,
-        // height: 400,
-        // width: 800,
-        // width: '100%',
-      }}
-      // className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
-    >
-      <ResponsiveContainer width="100%" height={'100%'}>
-        <ReChartsBarChart
-          data={data}
-          // stackOffset={'none'}
-          layout={'horizontal'}
-        >
-          <CartesianGrid
-            strokeDasharray="3 3"
-            horizontal={true}
-            vertical={false}
-          />
-
-          <YAxis
-            // width={56}
-            // width={30}
-            // textAnchor="start"
-            hide={false}
-            axisLine={false}
-            tickLine={false}
-            type="number"
-            domain={getDomain(data, yAxisFields)}
-            // domain={[0, 150]}
-            tick={{ transform: 'translate(-3, 0)' }}
-            style={{
-              fontSize: '12px',
-              fontFamily: theme.chartLabelFontFamily,
-            }}
-            tickFormatter={tick =>
-              valueFormatter({
-                value: tick,
-                field: yAxisFields[0].field || 'what',
-                fields: yAxisFields,
-              })
-            }
-            // tickFormatter={valueFormatter}
-          />
-          <XAxis
-            hide={false}
-            dataKey={xAxisField}
-            // interval="preserveStartEnd"
-            tick={{ transform: 'translate(0, 6)' }}
-            //padding between labels and axis
-            style={{
-              fontSize: '12px',
-              // TODO: generalize
-              fontFamily: theme.chartLabelFontFamily,
-              marginTop: '20px',
-            }}
-            tickLine={false}
-            axisLine={false}
-            tickFormatter={tick =>
-              valueFormatter({
-                value: tick,
-                field: xAxisField,
-                fields: [{ field: xAxisField, format: xAxisFormat }],
-              })
-            }
-            // tickFormatter={tick => valueFormatter(tick, xAxisFormat)}
-          />
-          {/* <XAxis
-            hide={false}
-            dataKey={xAxisField}
-            interval="preserveStartEnd"
-            tick={{ transform: 'translate(0, 6)' }} //padding between labels and axis
-            style={{
-              fontSize: '12px',
-              // TODO: generalize
-              fontFamily: 'Inter; Helvetica',
-              marginTop: '20px',
-            }}
-            tickLine={false}
-            axisLine={false}
-          />
-          <YAxis
-            width={56}
-            hide={false}
-            axisLine={false}
-            tickLine={false}
-            type="number"
-            // domain={getDomain(data, yAxisFields)}
-            domain={[0, 5]}
-            tick={{ transform: 'translate(-3, 0)' }}
-            style={{
-              fontSize: '12px',
-              fontFamily: 'Inter; Helvetica',
-            }}
-            tickFormatter={valueFormatter}
-          /> */}
-          <Tooltip
-            wrapperStyle={{ outline: 'none' }}
-            isAnimationActive={false}
-            cursor={{ fill: '#d1d5db', opacity: '0.15' }}
-            content={({ active, payload, label }) => {
-              return (
-                <ChartTooltip
-                  theme={theme}
-                  active={active}
-                  payload={payload}
-                  label={label}
-                  dateFormatter={value =>
-                    valueFormatter({
-                      value,
-                      field: xAxisField,
-                      fields: [{ field: xAxisField, format: xAxisFormat }],
-                    })
-                  }
-                  valueFormatter={value =>
-                    valueFormatter({
-                      value,
-                      field: payload[0].dataKey,
-                      fields: yAxisFields,
-                    })
-                  }
-                  colors={newColors}
-                />
-              );
-            }}
-            position={{ y: 0 }}
-          />
-          {/* <Legend
-          verticalAlign="top"
-          height={100}
-          content={({ payload }) =>
-            ChartLegend({ payload }, categoryColors, setLegendHeight)
-          }
-        /> */}
-          {yAxisFields.map((elem, index) => (
-            <Bar
-              key={elem.field}
-              name={elem.label}
-              dataKey={elem.field}
-              type="linear"
-              // stackId={stack || relative ? "a" : undefined}
-              fill={newColors[index]}
-              // barSize={20}
-              isAnimationActive={true}
-            />
-          ))}
-        </ReChartsBarChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
-
-function LineChart({
-  colors,
-  yAxisFields,
-  data,
-  containerStyle,
-  xAxisField,
-  xAxisLabel,
-  xAxisFormat,
-  theme,
-}: {
-  colors: string[];
-  yAxisFields: any[];
-  data: any[];
-  containerStyle?: React.CSSProperties;
-  xAxisField: string;
-  xAxisLabel: string;
-  xAxisFormat: string;
-  theme: any;
-}) {
-  // console.log('CONTAINER: ', containerStyle);
-  if (!yAxisFields || !yAxisFields.length) {
-    return null;
-  }
-  return (
-    <div
-      style={{ ...containerStyle, boxSizing: 'content-box' }}
-      // className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
-    >
-      <ResponsiveContainer width="100%" height={'100%'}>
-        <ReChartsAreaChart data={data}>
-          <CartesianGrid
-            strokeDasharray="3 3"
-            horizontal={true}
-            vertical={false}
-          />
-          <XAxis
-            //   hide={!showXAxis}
-            dataKey={xAxisField}
-            tick={{ transform: 'translate(0, 6)' }}
-            //   ticks={
-            //     startEndOnly
-            //       ? [data[0][index], data[data.length - 1][index]]
-            //       : undefined
-            //   }
-            style={{
-              fontSize: '12px',
-              fontFamily:
-                theme?.chartLabelFontFamily ||
-                theme?.fontFamily ||
-                'Inter; Helvetica',
-              color: theme?.chartLabelColor || '#666666',
-            }}
-            // interval="preserveStartEnd"
-            interval="preserveStartEnd"
-            // interval={0}
-            tickLine={false}
-            axisLine={false}
-            padding={{ left: 10, right: 10 }}
-            minTickGap={5}
-            tickFormatter={tick =>
-              valueFormatter({
-                value: tick,
-                field: xAxisField,
-                fields: [{ field: xAxisField, format: xAxisFormat }],
-              })
-            }
-            // tickFormatter={tick => format(new Date(tick), 'MMM yyyy')}
-          />
-          <YAxis
-            // textAnchor="left"
-            // tickMargin={0}
-            // width={56}
-            // width={30}
-            //   hide={!showYAxis}
-            axisLine={false}
-            tickLine={false}
-            type="number"
-            //   domain={yAxisDomain as AxisDomain}
-            domain={getDomain(data, yAxisFields)}
-            tick={{ transform: 'translate(-3, 0)' }}
-            style={{
-              fontSize: '12px',
-              fontFamily:
-                theme?.chartLabelFontFamily ||
-                theme?.fontFamily ||
-                'Inter; Helvetica',
-              color: theme?.chartLabelColor || '#666666',
-            }}
-            tickFormatter={value =>
-              valueFormatter({
-                value,
-                field: yAxisFields[0].field,
-                fields: [
-                  ...yAxisFields,
-                  { field: xAxisField, format: xAxisFormat },
-                ],
-              })
-            }
-          />
-          <Tooltip
-            wrapperStyle={{ outline: 'none' }}
-            isAnimationActive={false}
-            cursor={{ stroke: '#d1d5db', strokeWidth: 1 }}
-            content={({ active, payload, label }) => {
-              return (
-                <ChartTooltip
-                  active={active}
-                  payload={payload}
-                  label={label}
-                  dateFormatter={value =>
-                    valueFormatter({
-                      value,
-                      field: xAxisField,
-                      fields: [{ field: xAxisField, format: xAxisFormat }],
-                    })
-                  }
-                  valueFormatter={value =>
-                    valueFormatter({
-                      value,
-                      field: payload[0].dataKey,
-                      fields: [
-                        ...yAxisFields,
-                        { field: xAxisField, format: xAxisFormat },
-                      ],
-                    })
-                  }
-                  colors={colors}
-                  theme={theme}
-                />
-              );
-            }}
-            position={{ y: 0 }}
-          />
-          {/* <Legend
-          verticalAlign="top"
-          height={100}
-          content={({ payload }) =>
-            ChartLegend({ payload }, categoryColors, setLegendHeight)
-          }
-        /> */}
-
-          {/* <defs>
-          <linearGradient id={'colorUj'} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor={'#E14F62'} stopOpacity={0.4} />
-            <stop
-              offset="95%"
-              stopColor={'rgba(0,0,0,0)'}
-              stopOpacity={0}
-            />
-          </linearGradient>
-        </defs> */}
-
-          {yAxisFields.map((elem, index) => (
-            <defs key={`defs${elem.field + index}`}>
-              <linearGradient
-                id={`gradient${index}`}
-                x1="0"
-                y1="0"
-                x2="0"
-                y2="1"
-              >
-                <stop offset="5%" stopColor={colors[index]} stopOpacity={0.4} />
-                <stop
-                  offset="95%"
-                  stopColor={'rgba(0,0,0,0)'}
-                  stopOpacity={0}
-                />
-              </linearGradient>
-            </defs>
-          ))}
-
-          {/* {categories.map(category => {
-          console.log('category: ', category);
-          return ( */}
-          {yAxisFields.map((elem, index) => (
-            <Area
-              key={elem.field}
-              name={elem.label}
-              type="linear"
-              dataKey={elem.field}
-              stroke={colors[index]}
-              // if hide area
-              // fill="transparent"
-              fill={`url(#gradient${index})`}
-              strokeWidth={2}
-              dot={false}
-              isAnimationActive={true}
-            />
-          ))}
-        </ReChartsAreaChart>
-      </ResponsiveContainer>
-    </div>
-  );
-}
-
-export default Chart;