@quillsql/react 1.0.0

package/src/PieChart.tsx

@@ -0,0 +1,838 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react/display-name */
+import React, { useRef, useState, useEffect, CSSProperties } from 'react';
+import { twMerge } from 'tailwind-merge';
+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="flex items-center 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 BaseColors: { [key: string]: Color } = {
+  Slate: 'slate',
+  Gray: 'gray',
+  Zinc: 'zinc',
+  Neutral: 'neutral',
+  Stone: 'stone',
+  Red: 'red',
+  Orange: 'orange',
+  Amber: 'amber',
+  Yellow: 'yellow',
+  Lime: 'lime',
+  Green: 'green',
+  Emerald: 'emerald',
+  Teal: 'teal',
+  Cyan: 'cyan',
+  Sky: 'sky',
+  Blue: 'blue',
+  Indigo: 'indigo',
+  Violet: 'violet',
+  Purple: 'purple',
+  Fuchsia: 'fuchsia',
+  Pink: 'pink',
+  Rose: 'rose',
+};
+
+export const hexColors: { [color: string]: string } = {
+  [BaseColors.Slate]: '#64748b',
+  [BaseColors.Gray]: '#6b7280',
+  [BaseColors.Zinc]: '#71717a',
+  [BaseColors.Neutral]: '#737373',
+  [BaseColors.Stone]: '#78716c',
+  [BaseColors.Red]: '#ef4444',
+  [BaseColors.Orange]: '#f97316',
+  [BaseColors.Amber]: '#f59e0b',
+  [BaseColors.Yellow]: '#eab308',
+  [BaseColors.Lime]: '#84cc16',
+  [BaseColors.Green]: '#22c55e',
+  [BaseColors.Emerald]: '#10b981',
+  [BaseColors.Teal]: '#14b8a6',
+  [BaseColors.Cyan]: '#06b6d4',
+  [BaseColors.Sky]: '#0ea5e9',
+  [BaseColors.Blue]: '#3b82f6',
+  [BaseColors.Indigo]: '#6366f1',
+  [BaseColors.Violet]: '#8b5cf6',
+  [BaseColors.Purple]: '#a855f7',
+  [BaseColors.Fuchsia]: '#d946ef',
+  [BaseColors.Pink]: '#ec4899',
+  [BaseColors.Rose]: '#f43f5e',
+  [BaseColors.Black]: '#000000',
+  [BaseColors.White]: '#ffffff',
+};
+
+export const themeColorRange: Color[] = [
+  BaseColors.Cyan,
+  BaseColors.Sky,
+  BaseColors.Blue,
+  BaseColors.Indigo,
+  BaseColors.Violet,
+  BaseColors.Purple,
+  BaseColors.Fuchsia,
+  BaseColors.Slate,
+  BaseColors.Gray,
+  BaseColors.Zinc,
+  BaseColors.Neutral,
+  BaseColors.Stone,
+  BaseColors.Red,
+  BaseColors.Orange,
+  BaseColors.Amber,
+  BaseColors.Yellow,
+  BaseColors.Lime,
+  BaseColors.Green,
+  BaseColors.Emerald,
+  BaseColors.Teal,
+  BaseColors.Pink,
+  BaseColors.Rose,
+];
+
+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,
+}: {
+  children: React.ReactNode;
+}) => (
+  <div
+    // style={{ transform: 'translateX(-120px)' }}
+    className="bg-white text-sm rounded-md border 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;
+}
+
+export const ChartTooltipRow = ({
+  value,
+  name,
+  color,
+}: ChartTooltipRowProps) => (
+  <div className="flex items-center justify-between space-x-8">
+    <div className="flex items-center space-x-2">
+      <span
+        style={{ background: color, borderWidth: 2, borderColor: 'white' }}
+        className={twMerge(
+          // 'shrink-0',
+          // 'bg-black',
+          // 'bg-white',
+          // 'border-black',
+          // sizing.sm.height,
+          // sizing.sm.width,
+          'h-3',
+          'w-3',
+          'shadow',
+          'rounded-full'
+          // border.md.all,
+          // boxShadow.md
+        )}
+      />
+      <p
+        // className={twMerge(
+        //   'font-medium tabular-nums text-right whitespace-nowrap',
+        //   'text-[#212121] !important'
+        // )}
+        className="font-medium tabular-nums text-right whitespace-nowrap text-black"
+      >
+        {value}
+      </p>
+    </div>
+    <p
+      className={twMerge(
+        'text-right whitespace-nowrap',
+        // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+        'text-gray-500'
+        // fontWeight.sm
+      )}
+    >
+      {name}
+    </p>
+  </div>
+);
+
+export interface DonutChartTooltipProps {
+  active: boolean | undefined;
+  payload: any;
+  valueFormatter: ValueFormatter;
+}
+
+export const DonutChartTooltip = ({
+  active,
+  payload,
+  valueFormatter,
+}: DonutChartTooltipProps) => {
+  if (active && payload[0]) {
+    const payloadRow = payload[0];
+    return (
+      <ChartTooltipFrame>
+        <div
+          //   style={{ transform: 'translateX(-120px)' }}
+          className={twMerge('px-4', 'py-2')}
+        >
+          <ChartTooltipRow
+            value={valueFormatter(payloadRow.value)}
+            name={payloadRow.name}
+            color={payloadRow.payload.color}
+          />
+        </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) {
+    const 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,
+      ...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}
+        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}
+                />
+              )}
+            />
+          </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="text-sm text-gray-600 whitespace-nowrap overflow-hidden overflow-ellipsis text-sm font-normal"
+            >
+              {item.value}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export default PieChartWrapper;