@quillsql/react 1.7.5 → 1.7.6

package/src/PieChart.tsx

@@ -1,845 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable react/display-name */
-// @ts-nocheck
-import React, { useRef, useState, useEffect, CSSProperties } from 'react';
-import { Pie, PieChart, ResponsiveContainer, Tooltip, Legend } from 'recharts';
-
-// const data = [
-//   {
-//     name: 'Project Nile',
-//     pct_of_the_total: 0.208266213458027,
-//   },
-//   {
-//     name: 'GA_Columbus',
-//     pct_of_the_total: 0.102192710707096,
-//   },
-//   {
-//     name: 'IN_Indianapolis',
-//     pct_of_the_total: 0.0965229750772778,
-//   },
-//   {
-//     name: 'MO_St Louis',
-//     pct_of_the_total: 0.0732235559304729,
-//   },
-//   {
-//     name: 'AL_Birmingham',
-//     pct_of_the_total: 0.0555956813239389,
-//   },
-//   {
-//     name: 'FL_Fort Myers',
-//     pct_of_the_total: 0.0479532568651074,
-//   },
-//   {
-//     name: 'GA_Macon',
-//     pct_of_the_total: 0.0431507654834117,
-//   },
-//   {
-//     name: 'NC_Charlotte',
-//     pct_of_the_total: 0.034166792944838,
-//   },
-//   {
-//     name: 'AL_Montgomery',
-//     pct_of_the_total: 0.0298663023800594,
-//   },
-//   {
-//     name: 'TN_Memphis',
-//     pct_of_the_total: 0.0292140477651036,
-//   },
-//   {
-//     name: 'SC_Greenville',
-//     pct_of_the_total: 0.0288115667542858,
-//   },
-//   {
-//     name: 'SC_Columbia',
-//     pct_of_the_total: 0.0285805316472631,
-//   },
-//   {
-//     name: 'NC_Fayetteville',
-//     pct_of_the_total: 0.0279000448849207,
-//   },
-//   {
-//     name: 'SC_Spartanburg',
-//     pct_of_the_total: 0.0260196308313896,
-//   },
-//   {
-//     name: 'NC_Greensboro',
-//     pct_of_the_total: 0.0169521323221251,
-//   },
-//   {
-//     name: 'FL_Orlando',
-//     pct_of_the_total: 0.0167433815522564,
-//   },
-//   {
-//     name: 'FL_Tampa',
-//     pct_of_the_total: 0.0155513189530513,
-//   },
-//   {
-//     name: 'NC_Raleigh',
-//     pct_of_the_total: 0.0154308010765727,
-//   },
-//   {
-//     name: 'FL_Jacksonville',
-//     pct_of_the_total: 0.0152275224173022,
-//   },
-//   {
-//     name: 'GA_LaGrange',
-//     pct_of_the_total: 0.00867900369362145,
-//   },
-//   {
-//     name: 'GA_Augusta',
-//     pct_of_the_total: 0.0084582649800033,
-//   },
-//   {
-//     name: 'TX_San Antonio',
-//     pct_of_the_total: 0.00682971823492258,
-//   },
-//   {
-//     name: 'FL_North Port',
-//     pct_of_the_total: 0.00637954051173961,
-//   },
-//   {
-//     name: 'No Portfolio',
-//     pct_of_the_total: 0.00522734435854761,
-//   },
-// ];
-
-const useOnWindowResize = (
-  handler: { (): void },
-  initialWindowSize?: number
-) => {
-  const [windowSize, setWindowSize] = useState<undefined | number>(
-    initialWindowSize
-  );
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowSize(window.innerWidth);
-      handler();
-    };
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, [handler, windowSize]);
-};
-
-const ChartLegend = (categories: string[], colors: string[]) => {
-  const legendRef = useRef<HTMLDivElement>(null);
-
-  //   useOnWindowResize(() => {
-  //     const calculateHeight = (height: number | undefined) =>
-  //       height
-  //         ? Number(height) + 20 // 20px extra padding
-  //         : 60; // default height
-  //     setLegendHeight(calculateHeight(legendRef.current?.clientHeight));
-  //   });
-
-  return (
-    <div ref={legendRef} className="qq-flex qq-items-center qq-justify-end">
-      <Legend
-        // @ts-ignore
-        categories={categories}
-        colors={colors}
-      />
-    </div>
-  );
-};
-
-export type ValueFormatter = {
-  (value: number): string;
-};
-
-const iconVariantValues = [
-  'simple',
-  'light',
-  'shadow',
-  'solid',
-  'outlined',
-] as const;
-
-export type IconVariant = (typeof iconVariantValues)[number];
-
-export type HorizontalPosition = 'left' | 'right';
-
-export type VerticalPosition = 'top' | 'bottom';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'light';
-
-const deltaTypeValues = [
-  'increase',
-  'moderateIncrease',
-  'decrease',
-  'moderateDecrease',
-  'unchanged',
-] as const;
-
-export type DeltaType = (typeof deltaTypeValues)[number];
-
-const sizeValues = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
-
-export type Size = (typeof sizeValues)[number];
-
-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];
-
-const justifyContentValues = [
-  'start',
-  'end',
-  'center',
-  'between',
-  'around',
-  'evenly',
-] as const;
-export type JustifyContent = (typeof justifyContentValues)[number];
-
-const alignItemsValues = [
-  'start',
-  'end',
-  'center',
-  'baseline',
-  'stretch',
-] as const;
-export type AlignItems = (typeof alignItemsValues)[number];
-
-export type FlexDirection = 'row' | 'col' | 'row-reverse' | 'col-reverse';
-
-export const defaultValueFormatter: ValueFormatter = (value: number) =>
-  (value * 1).toFixed(1) + '%';
-
-export const sumNumericArray = (arr: number[]) =>
-  arr.reduce((prefixSum, num) => prefixSum + num, 0);
-
-// export const parseData = (data: any[], colors: any[]) =>
-//   data.map((dataPoint: any, idx: number) => {
-//     const baseColor = idx < colors.length ? colors[idx] : BaseColors.Gray;
-//     const hexCode = hexColors[baseColor ?? BaseColors.Gray];
-//     return {
-//       ...dataPoint,
-//       color: colors[idx],
-//       fill: colors[idx],
-//     };
-//   });
-
-// @ts-ignore
-export const parseData = (data, colors, categoryKey, valueKey) => {
-  const maxItems = 20;
-  const slicedData = data.slice(0, maxItems);
-
-  let totalValue = slicedData.reduce(
-    (acc, dataPoint) => acc + Number(dataPoint[valueKey]),
-    0
-  );
-
-  if (totalValue !== 100) {
-    slicedData.forEach(dataPoint => {
-      dataPoint[valueKey] = (Number(dataPoint[valueKey]) * 100) / totalValue;
-    });
-    totalValue = 100;
-  }
-
-  const parsedData = slicedData.map((dataPoint, idx) => {
-    const baseColor =
-      idx < colors.length ? colors[idx] : colors[colors.length - 1];
-    return {
-      ...dataPoint,
-      color: baseColor,
-      fill: baseColor,
-    };
-  });
-
-  if (data.length > maxItems) {
-    const otherData = data.slice(maxItems);
-    const otherSum = otherData.reduce(
-      (acc, dataPoint) => acc + Number(dataPoint[valueKey]),
-      0
-    );
-    const otherColor = colors[colors.length - 1];
-    const normalizedOtherSum = (otherSum * 100) / totalValue;
-    parsedData.push({
-      [categoryKey]: 'Other',
-      [valueKey]: normalizedOtherSum,
-      color: otherColor,
-      fill: otherColor,
-    });
-  }
-
-  return parsedData;
-};
-
-const calculateDefaultLabel = (data: any[], category: string) =>
-  sumNumericArray(data.map(dataPoint => dataPoint[category]));
-
-export const parseLabelInput = (
-  labelInput: string | undefined,
-  valueFormatter: ValueFormatter,
-  data: any[],
-  category: string
-) =>
-  labelInput
-    ? labelInput
-    : valueFormatter(calculateDefaultLabel(data, category));
-
-export const ChartTooltipFrame = ({
-  children,
-  theme,
-}: {
-  children: React.ReactNode;
-}) => (
-  <div
-    style={{
-      borderStyle: 'solid',
-      borderColor: theme?.borderColor || '#E5E7EB',
-      borderWidth: 1,
-      background: theme?.backgroundColor || '#ffffff',
-      fontSize: theme?.fontSize || '14px',
-      borderRadius: '6px',
-      boxShadow:
-        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    }}
-    // style={{ transform: 'translateX(-120px)' }}
-    // 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;
-  theme: any;
-}
-
-export const ChartTooltipRow = ({
-  value,
-  name,
-  color,
-  theme,
-}: ChartTooltipRowProps) => (
-  <div
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      minWidth: 120,
-      // minHeight: 27,
-      // margin: '0 2rem',
-    }}
-  >
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        // margin: '0 0.5rem',
-        // minWidth: 120,
-      }}
-    >
-      <span
-        style={{
-          background: color,
-          borderWidth: 2,
-          borderStyle: 'solid',
-          borderColor: 'white',
-          height: '8px',
-          width: '8px',
-          boxShadow:
-            '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-          borderRadius: '9999px',
-          marginRight: 5,
-        }}
-        // 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,
-          paddingTop: 2,
-          paddingBottom: 2,
-          fontSize: theme?.fontSizeSmall || '14px',
-          fontWeight: theme?.fontWeightMedium || '500',
-        }}
-        // className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap"
-      >
-        {value}
-      </p>
-    </div>
-    <p
-      style={{
-        marginTop: 0,
-        marginBottom: 0,
-        fontFamily: theme?.fontFamily,
-        color: theme?.secondaryTextColor,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        textAlign: 'right',
-        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 DonutChartTooltipProps {
-  active: boolean | undefined;
-  payload: any;
-  valueFormatter: ValueFormatter;
-  theme: any;
-}
-
-export const DonutChartTooltip = ({
-  active,
-  payload,
-  valueFormatter,
-  theme,
-}: DonutChartTooltipProps) => {
-  if (active && payload[0]) {
-    const payloadRow = payload[0];
-    return (
-      <ChartTooltipFrame theme={theme}>
-        <div
-          //   style={{ transform: 'translateX(-120px)' }}
-          // className={twMerge('qq-px-4', 'qq-py-2')}
-          style={{
-            paddingLeft: '1rem',
-            paddingRight: '1rem',
-            paddingTop: '8px',
-            paddingBottom: '8px',
-          }}
-        >
-          <ChartTooltipRow
-            value={valueFormatter(payloadRow.value)}
-            name={payloadRow.name}
-            color={payloadRow.payload.color}
-            theme={theme}
-          />
-        </div>
-      </ChartTooltipFrame>
-    );
-  }
-  return null;
-};
-
-type DonutChartVariant = 'donut' | 'pie';
-
-export interface DonutChartProps extends React.HTMLAttributes<HTMLDivElement> {
-  category?: string;
-  index?: string;
-  colors?: any[];
-  data: any[];
-  variant?: DonutChartVariant;
-  valueFormatter?: ValueFormatter;
-  label?: string;
-  showLabel?: boolean;
-  showAnimation?: boolean;
-  showTooltip?: boolean;
-  containerStyle?: CSSProperties;
-}
-
-// @ts-ignore
-export function findComplementaryAndAnalogousColors(color1, color2) {
-  // Calculate the hue of the first color
-  const color1HSL = rgbToHsl(hexToRgb(color1));
-  const color2HSL = rgbToHsl(hexToRgb(color2));
-  const color1Hue = color1HSL.h;
-
-  // Calculate the complementary color of the first color
-  const complementaryHue = (color1Hue + 180) % 360;
-  const complementaryColor = hslToRgb({
-    h: complementaryHue,
-    s: color1HSL.s,
-    l: color1HSL.l,
-  });
-
-  // Find an analogous hue to the first color
-  const analogousHue1 = (color1Hue + 30) % 360;
-  const analogousHue2 = (color1Hue - 30 + 360) % 360;
-
-  // Convert the analogous hues back to RGB colors
-  const analogousColor1 = hslToRgb({
-    h: analogousHue1,
-    s: color1HSL.s,
-    l: color1HSL.l,
-  });
-  const analogousColor2 = hslToRgb({
-    h: analogousHue2,
-    s: color1HSL.s,
-    l: color1HSL.l,
-  });
-
-  // Calculate the average hue between the two colors
-  const avgHue = (color1HSL.h + color2HSL.h) / 2;
-
-  // Generate a new HSL object with the average hue and the same saturation and lightness as color1
-  const analogousHsl = { h: avgHue, s: color1HSL.s, l: color1HSL.l };
-
-  return [
-    color1,
-    color2,
-    rgbToHex(hslToRgb(analogousHsl)),
-    // rgbToHex(complementaryColor),
-    // rgbToHex(analogousColor1),
-    // rgbToHex(analogousColor2),
-  ];
-}
-
-// @ts-ignore
-function hexToRgb(hex) {
-  const r = parseInt(hex.substring(1, 3), 16);
-  const g = parseInt(hex.substring(3, 5), 16);
-  const b = parseInt(hex.substring(5, 7), 16);
-  return { r, g, b };
-}
-
-// @ts-ignore
-function rgbToHex(rgb) {
-  const rHex = rgb.r.toString(16).padStart(2, '0');
-  const gHex = rgb.g.toString(16).padStart(2, '0');
-  const bHex = rgb.b.toString(16).padStart(2, '0');
-  return `#${rHex}${gHex}${bHex}`;
-}
-
-// @ts-ignore
-function rgbToHsl(rgb) {
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-
-  let h = 0,
-    s = 0,
-    l = (max + min) / 2;
-
-  if (max !== min) {
-    let d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-
-    switch (max) {
-      case r:
-        h = (g - b) / d + (g < b ? 6 : 0);
-        break;
-      case g:
-        h = (b - r) / d + 2;
-        break;
-      case b:
-        h = (r - g) / d + 4;
-        break;
-    }
-
-    h /= 6;
-  }
-
-  return { h: h * 360, s: s * 100, l: l * 100 };
-}
-
-// @ts-ignore
-function hslToRgb(hsl) {
-  const h = hsl.h / 360;
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-
-  let r, g, b;
-
-  if (s === 0) {
-    r = g = b = l;
-  } else {
-    // @ts-ignore
-    const hue2rgb = (p, q, t) => {
-      if (t < 0) t += 1;
-      if (t > 1) t -= 1;
-      if (t < 1 / 6) return p + (q - p) * 6 * t;
-      if (t < 1 / 2) return q;
-      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-      return p;
-    };
-
-    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    const p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
-  }
-
-  return {
-    r: Math.round(r * 255),
-    g: Math.round(g * 255),
-    b: Math.round(b * 255),
-  };
-}
-
-// @ts-ignore
-function generateColorGradientSteps(n, colors) {
-  const numColors = colors.length;
-
-  // If there are fewer than two colors, return the original array
-  if (numColors < 2) {
-    return colors;
-  }
-
-  // Initialize the output array with the first color
-  const output = [colors[0]];
-
-  // Calculate the number of gradient steps between each pair of colors
-  const stepsPerPair = Math.floor(n / (numColors - 1));
-
-  // Generate the gradient steps for each pair of colors
-  for (let i = 1; i < numColors; i++) {
-    const color1 = colors[i - 1];
-    const color2 = colors[i];
-    const gradientSteps = generateGradientSteps(color1, color2, stepsPerPair);
-    output.push(...gradientSteps);
-  }
-
-  // If there are remaining steps, add the last color as a stopgap measure
-  while (output.length < n) {
-    output.push(colors[numColors - 1]);
-  }
-
-  return output;
-}
-
-//@ts-ignore
-function generateGradientSteps(color1, color2, n) {
-  // Convert the colors to RGB objects
-  const rgb1 = hexToRgb(color1);
-  const rgb2 = hexToRgb(color2);
-
-  // Calculate the RGB color difference between the two colors
-  const diffR = rgb2.r - rgb1.r;
-  const diffG = rgb2.g - rgb1.g;
-  const diffB = rgb2.b - rgb1.b;
-
-  // Calculate the RGB gradient step size between the two colors
-  const stepR = diffR / (n + 1);
-  const stepG = diffG / (n + 1);
-  const stepB = diffB / (n + 1);
-
-  // Generate the RGB gradient steps
-  const gradientSteps = [];
-  for (let i = 1; i <= n; i++) {
-    const r = Math.round(rgb1.r + stepR * i);
-    const g = Math.round(rgb1.g + stepG * i);
-    const b = Math.round(rgb1.b + stepB * i);
-    gradientSteps.push(rgbToHex({ r, g, b }));
-  }
-
-  return gradientSteps;
-}
-
-const PieChartWrapper = React.forwardRef<HTMLDivElement, DonutChartProps>(
-  (props, ref) => {
-    const {
-      category = 'pct_of_the_total',
-      index = 'status',
-      data,
-      colors = [],
-      variant = 'donut',
-      valueFormatter = defaultValueFormatter,
-      label,
-      showLabel = true,
-      showAnimation = true,
-      showTooltip = true,
-      className,
-      containerStyle,
-      theme,
-      ...other
-    } = props;
-    const isDonut = variant == 'donut';
-
-    const parsedLabelInput = parseLabelInput(
-      label,
-      valueFormatter,
-      data,
-      category
-    );
-
-    const newColors = generateColorGradientSteps(
-      data.length,
-      findComplementaryAndAnalogousColors(colors[0], colors[1])
-    );
-
-    return (
-      <div
-        ref={ref}
-        style={{
-          ...containerStyle,
-          width: '100%',
-          // height: '100%',
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          boxSizing: 'content-box',
-        }}
-        // className={twMerge(
-        //   'w-full h-full flex flex-row items-center',
-        //   className
-        // )}
-        {...other}
-      >
-        <ResponsiveContainer width="100%" height="100%">
-          <PieChart>
-            <Pie
-              //   style={{ transform: 'translateX(-120px)' }}
-              data={parseData(
-                data,
-                colors.length >= data.length
-                  ? colors
-                  : generateColorGradientSteps(Math.min(21, data.length), [
-                      ...findComplementaryAndAnalogousColors(
-                        colors[0],
-                        colors[1]
-                      ),
-                      ...colors.slice(2),
-                    ]),
-                index,
-                category
-              )}
-              cx="50%"
-              cy="50%"
-              startAngle={90}
-              endAngle={-270}
-              innerRadius={isDonut ? '70%' : '0%'}
-              outerRadius="100%"
-              paddingAngle={0}
-              dataKey={category}
-              nameKey={index}
-              isAnimationActive={true}
-            />
-            {/* <Legend
-              layout="vertical"
-              align="center"
-              verticalAlign="middle"
-              wrapperStyle={{
-                paddingLeft: '20px',
-                transform: 'translateX(120px)',
-              }}
-              content={({ payload }) => (
-                <Legend2 payload={payload} colors={newColors} />
-              )}
-            /> */}
-            <Tooltip
-              wrapperStyle={{
-                outline: 'none',
-              }}
-              content={({ active, payload }) => (
-                <DonutChartTooltip
-                  active={active}
-                  payload={payload}
-                  valueFormatter={valueFormatter}
-                  theme={theme}
-                />
-              )}
-            />
-          </PieChart>
-        </ResponsiveContainer>
-      </div>
-    );
-  }
-);
-
-function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
-  return (
-    <div
-    // className="flex flex-col min-w-[130px] max-w-[130px] w-full"
-    >
-      {/* @ts-ignore */}
-      {payload.map((item, idx) => {
-        if (idx > 9) {
-          return null;
-        }
-        return (
-          <div
-            key={item.value}
-            // className="flex flex-row items-center min-w-[130px] max-w-[130px]"
-          >
-            <div
-              style={{
-                height: 8,
-                width: 8,
-                borderRadius: 8,
-                background: colors[idx],
-                marginRight: 8,
-                marginTop: 2,
-              }}
-            />
-            <div
-              style={{
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                display: 'block',
-                maxWidth: 120,
-              }}
-              // className="qq-text-sm qq-text-gray-600 qq-whitespace-nowrap qq-overflow-hidden qq-overflow-ellipsis qq-text-sm qq-font-normal"
-            >
-              {item.value}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-export default PieChartWrapper;