@quillsql/react 1.7.4 → 1.7.6

package/src/BarList.tsx

@@ -1,580 +0,0 @@
-/* eslint-disable react/display-name */
-// @ts-nocheck
-import React, { useState } from 'react';
-// import { twMerge } from 'tailwind-merge';
-import {
-  Area,
-  CartesianGrid,
-  Legend,
-  ComposedChart as ReChartsAreaChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { format } from 'date-fns';
-import { valueFormatter } from './Chart';
-
-// const data = [
-//   { name: 'Pool and Spa', median_days: 56.5104166666667 },
-//   { name: 'Fencing & Gates', median_days: 56.1202719907407 },
-//   { name: 'Fireplace & Chimney', median_days: 51.5482581018519 },
-//   { name: 'Concrete, Driveway & Masonry', median_days: 49.6866608796296 },
-//   { name: 'Painting', median_days: 37.3942939814815 },
-//   { name: 'Roofing', median_days: 35.6859027777778 },
-//   { name: 'Flooring', median_days: 34.6166956018519 },
-//   { name: 'Irrigation, Landscaping & Trees', median_days: 27.4079456018519 },
-//   { name: 'Glass & Windows', median_days: 27.1180613425926 },
-//   { name: 'Remodeling Interior/Exterior', median_days: 24.9670775462963 },
-//   { name: 'Pests, Extermination & Wildlife', median_days: 20.7024537037037 },
-//   { name: 'Appliance', median_days: 18.7326157407407 },
-//   { name: 'Garage Doors', median_days: 18.0982175925926 },
-//   { name: 'Electrical', median_days: 16.1240740740741 },
-//   {
-//     name: '(HVAC) Heating, Ventilation & Air Conditioning',
-//     median_days: 16.0118576388889,
-//   },
-//   { name: 'Simple Maintenance Skills', median_days: 15.153130787037 },
-//   { name: 'Utilities', median_days: 13.4653240740741 },
-//   { name: 'Carpentry, Framing, Doors', median_days: 12.3884664351852 },
-//   {
-//     name: 'Cleaning, Sanitation & Restoration Services',
-//     median_days: 11.6931886574074,
-//   },
-//   { name: 'Awning & Sunshades', median_days: 10.3050983796296 },
-//   { name: 'Plumbing', median_days: 10.2094328703704 },
-//   { name: 'Carpet & Floor Cleaning', median_days: 8.9691087962963 },
-//   { name: 'Junk Removal & Hauling', median_days: 8.57038194444444 },
-//   { name: 'Locksmith', median_days: 4.49019097222222 },
-// ];
-
-type Bar = {
-  key?: string;
-  value: number;
-  name: string;
-  icon?: React.JSXElementConstructor<any>;
-  href?: string;
-  target?: string;
-};
-
-const getWidthsFromValues = (dataValues: number[]) => {
-  let maxValue = -Infinity;
-  dataValues.forEach(value => {
-    maxValue = Math.max(maxValue, value);
-  });
-
-  return dataValues.map(value => {
-    if (value === 0) return 0;
-    return Math.max((value / maxValue) * 100, 1);
-  });
-};
-
-interface YAxisField {
-  label: string;
-  field: string;
-  chartType?: string;
-}
-
-export interface BarListProps extends React.HTMLAttributes<HTMLDivElement> {
-  data: object[];
-  valueFormatter?: any;
-  color?: string;
-  showAnimation?: boolean;
-  xAxisField: string;
-  yAxisFields: YAxisField[];
-  containerStyle: any;
-  xAxisFormat: string;
-  colors: string[];
-  theme: any;
-}
-function makeBarListClassName(componentName: string) {
-  return (className: string) => {
-    return `BarList-${componentName}-${className};`;
-  };
-}
-
-// const valueFormatter = (number: number) => {
-// return '$ ' + Intl.NumberFormat('us').format(number).toString();
-//   return number.toFixed(0);
-// };
-
-export function hexToRgbaWith10PercentAlpha(hex) {
-  // Convert the hex color to RGB
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-
-  // Set the alpha value to 10%
-  const alpha = 0.1;
-
-  // Return the color as an rgba string
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-}
-
-const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
-  const {
-    data = [],
-    yAxisFields,
-    xAxisField,
-    xAxisFormat,
-    colors,
-    // valueFormatter = (value: any) => value,valueFormatter
-    showAnimation = true,
-    className,
-    containerStyle,
-    theme,
-    ...other
-  } = props;
-
-  const widths = getWidthsFromValues(
-    data.map(item => item[yAxisFields[0].field])
-  );
-
-  const NUM_TO_SHOW = Math.floor(containerStyle?.height / 40) - 1;
-
-  if (yAxisFields.length > 1) {
-    const widths2 = getWidthsFromValues(
-      data.map(item => item[yAxisFields[1].field])
-    );
-    return (
-      <div
-        ref={ref}
-        style={{
-          // width: '100%',
-          height: '100%',
-          // marginLeft: 25,
-          // background: 'red',
-          marginTop: 20,
-          // paddingRight: 25,
-          overflow: 'hidden',
-          boxSizing: 'content-box',
-          display: 'flex',
-          justifyContent: 'space-between',
-          // marginLeft: '24px',
-          width: 'calc(100% - 24px)',
-        }}
-        // className={twMerge(
-        //   // makeBarListClassName('root'),
-        //   'qq-space-x-6',
-        //   className
-        // )}
-        {...other}
-      >
-        <div
-          //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-          // className="qq-relative-w-full"
-          style={{
-            // width: '100%',
-            height: '100%',
-            position: 'relative',
-            boxSizing: 'content-box',
-            width: '100%',
-          }}
-        >
-          {data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
-            //   const Icon = item.icon;
-            const Icon = null;
-
-            return (
-              <div
-                // className="qq-flex qq-flex-row qq-items-center"
-                key={item[xAxisField] + idx}
-                style={{
-                  boxSizing: 'content-box',
-                  display: 'flex',
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  width: '100%',
-                }}
-              >
-                <div
-                  title={item[xAxisField]}
-                  style={{
-                    maxWidth: 130,
-                    boxSizing: 'content-box',
-                    minWidth: 130,
-                    overflow: 'hidden',
-                    width: '100%',
-                  }}
-                >
-                  <p
-                    style={{
-                      color: theme?.chartLabelColor,
-                      boxSizing: 'content-box',
-                      whiteSpace: 'nowrap',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      fontFamily:
-                        theme?.chartLabelFontFamily || theme?.fontFamily,
-                      fontSize: theme?.fontSizeSmall || '14px',
-                    }}
-                    // className={twMerge(
-                    // makeBarListClassName('barText'),
-                    //   'qq-whitespace-nowrap truncate',
-                    //   'qq-text-sm'
-                    // )}
-                  >
-                    {/* {item[xAxisField]} */}
-                    {valueFormatter({
-                      value: item[xAxisField],
-                      field: xAxisField,
-                      fields: [{ field: xAxisField, format: xAxisFormat }],
-                    })}
-                  </p>
-                </div>
-                <div
-                  style={{
-                    width: '100%',
-                    height: '100%',
-                    boxSizing: 'content-box',
-                    display: 'flex',
-                    flexDirection: 'column',
-                  }}
-                  // className="qq-flex qq-flex-col"
-                >
-                  <div
-                    // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      height: '36px',
-                      borderRadius: '4px',
-                      marginBottom: '8px',
-                      width: `${widths[idx]}%`,
-                      transition: showAnimation ? 'all 2s' : '',
-                      backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
-                      boxSizing: 'content-box',
-                    }}
-                  >
-                    <div
-                      style={{
-                        position: 'absolute',
-                        display: 'flex',
-                        maxWidth: '100%',
-                        boxSizing: 'content-box',
-                        marginLeft: '8px',
-                      }}
-                      // className={twMerge(
-                      //   'qq-absolute qq-max-w-full qq-flex',
-                      //   'qq-ml-2'
-                      // )}
-                    >
-                      <p
-                        style={{
-                          color: theme?.chartLabelColor,
-                          fontFamily:
-                            theme?.chartLabelFontFamily || theme?.fontFamily,
-                          boxSizing: 'content-box',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          fontSize: theme?.fontSizeSmall || '14px',
-                        }}
-                        // className={twMerge(
-                        // makeBarListClassName('barText'),
-                        //   'qq-whitespace-nowrap truncate',
-                        //   'qq-text-sm'
-                        // )}
-                      >
-                        {yAxisFields[0].label}
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-                    style={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      height: '36px',
-                      borderRadius: '4px',
-                      marginBottom: '8px',
-                      width: `${widths2[idx]}%`,
-                      transition: showAnimation ? 'all 2s' : '',
-                      backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
-                      boxSizing: 'content-box',
-                    }}
-                  >
-                    <div
-                      style={{
-                        boxSizing: 'content-box',
-                        position: 'absolute',
-                        maxWidth: '100%',
-                        display: 'flex',
-                        marginLeft: '8px',
-                      }}
-                      // className={twMerge(
-                      //   'qq-absolute qq-max-w-full qq-flex',
-                      //   'qq-ml-2'
-                      // )}
-                    >
-                      <p
-                        style={{
-                          color: theme?.chartLabelColor,
-                          boxSizing: 'content-box',
-                          whiteSpace: 'nowrap',
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          fontFamily:
-                            theme?.chartLabelFontFamily || theme?.fontFamily,
-                          fontSize: theme?.fontSizeSmall || '14px',
-                        }}
-                        // className={twMerge(
-                        // makeBarListClassName('barText'),
-                        //   'qq-whitespace-nowrap truncate',
-                        //   'qq-text-sm'
-                        // )}
-                      >
-                        {yAxisFields[1].label}
-                        {/* {item[xAxisField]} */}
-                      </p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-          {data.length > NUM_TO_SHOW && (
-            <div
-              style={{
-                color: theme?.chartLabelColor,
-                boxSizing: 'content-box',
-                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                fontSize: theme?.fontSizeSmall || '14px',
-              }}
-              // className="qq-text-sm"
-            >
-              ...{data.length - NUM_TO_SHOW} more
-            </div>
-          )}
-        </div>
-        {/* eslint-disable prettier/prettier */}
-        <div
-          style={{
-            boxSizing: 'content-box',
-            minWidth: 'min-content',
-            textAlign: 'right',
-            paddingLeft: 10,
-          }}
-          // className={
-          //   (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
-          // }
-        >
-          {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
-            <div
-              key={item[xAxisField] + 'label' + idx}
-              style={{
-                boxSizing: 'content-box',
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                marginBottom: idx === data.length - 1 ? 0 : '8px',
-                height: '36px',
-              }}
-              // className={twMerge(
-              //   makeBarListClassName('labelWrapper'),
-              //   'qq-flex qq-justify-end qq-items-center',
-              //   'qq-h-9',
-              //   idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
-              // )}
-            >
-              <p
-                style={{
-                  color: theme?.chartLabelColor,
-                  boxSizing: 'content-box',
-                  fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  fontSize: theme?.fontSizeSmall || '14px',
-                }}
-                // className={twMerge(
-                //   makeBarListClassName('labelText'),
-                //   'qq-whitespace-nowrap truncate',
-                //   'qq-text-sm'
-                // )}
-              >
-                {valueFormatter({
-                  value: item[yAxisFields[0].field],
-                  field: yAxisFields[0].field,
-                  fields: yAxisFields,
-                })}
-              </p>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      ref={ref}
-      style={{
-        // width: '100%',
-        boxSizing: 'content-box',
-        height: '100%',
-        // height: hei
-        // marginLeft: 25,
-        // background: 'red',
-        marginTop: 20,
-        // paddingRight: 25,
-        overflow: 'hidden',
-        display: 'flex',
-        marginLeft: 25,
-        justifyContent: 'space-between',
-      }}
-      // className={twMerge(
-      // makeBarListClassName('root'),
-      // 'qq-flex qq-justify-between qq-h-full qq-w-full',
-      // 'qq-space-x-6',
-      //   className
-      // )}
-      {...other}
-    >
-      <div
-        //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-        // className="qq-relative-w-full"
-        style={{
-          width: 'calc(100%)',
-          boxSizing: 'content-box',
-          height: '100%',
-          paddingRight: 25,
-          position: 'relative',
-        }}
-      >
-        {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
-          //   const Icon = item.icon;
-          const Icon = null;
-
-          return (
-            <div
-              key={item[xAxisField] + 'label' + idx}
-              // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
-              style={{
-                width: `${widths[idx]}%`,
-                transition: showAnimation ? 'all 2s' : '',
-                boxSizing: 'content-box',
-                backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
-                display: 'flex',
-                alignItems: 'center',
-                height: '36px',
-                marginBottom: '8px',
-                borderRadius: '4px',
-              }}
-            >
-              <div
-                style={{
-                  boxSizing: 'content-box',
-                  position: 'absolute',
-                  maxWidth: '100%',
-                  display: 'flex',
-                  marginLeft: '8px',
-                }}
-                // className={twMerge(
-                //   'qq-absolute qq-max-w-full qq-flex',
-                //   'qq-ml-2'
-                // )}
-              >
-                <p
-                  style={{
-                    color: theme?.chartLabelColor,
-                    boxSizing: 'content-box',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis',
-                    fontFamily:
-                      theme?.chartLabelFontFamily || theme?.fontFamily,
-                    fontSize: theme?.fontSizeSmall || '14px',
-                  }}
-                  // className={twMerge(
-                  // makeBarListClassName('barText'),
-                  //   'qq-whitespace-nowrap truncate',
-                  //   'qq-text-sm'
-                  // )}
-                >
-                  {/* {item[xAxisField]} */}
-                  {valueFormatter({
-                    value: item[xAxisField],
-                    field: xAxisField,
-                    fields: [{ field: xAxisField, format: xAxisFormat }],
-                  })}
-                </p>
-              </div>
-            </div>
-          );
-        })}
-        {data.length > NUM_TO_SHOW && (
-          <div
-            style={{
-              color: theme?.chartLabelColor,
-              boxSizing: 'content-box',
-              fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-              fontSize: theme?.fontSizeSmall || '14px',
-            }}
-            // className="qq-text-sm"
-          >
-            ...{data.length - NUM_TO_SHOW} more
-          </div>
-        )}
-      </div>
-      {/* eslint-disable prettier/prettier */}
-      <div
-        style={{
-          boxSizing: 'content-box',
-          textAlign: 'right',
-          minWidth: 'min-content',
-          paddingLeft: 10,
-        }}
-        // className={
-        //   (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
-        // }
-      >
-        {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
-          <div
-            key={item[xAxisField] + 'value' + idx}
-            style={{
-              boxSizing: 'content-box',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              marginBottom: idx === data.length - 1 ? 0 : '8px',
-              height: '36px',
-            }}
-            // className={twMerge(
-            //   makeBarListClassName('labelWrapper'),
-            //   'qq-flex qq-justify-end qq-items-center',
-            //   'qq-h-9',
-            //   idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
-            // )}
-          >
-            <p
-              style={{
-                color: theme?.chartLabelColor,
-                boxSizing: 'content-box',
-                fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                fontSize: theme?.fontSizeSmall || '14px',
-              }}
-              // className={twMerge(
-              //   makeBarListClassName('labelText'),
-              //   'qq-whitespace-nowrap qq-truncate',
-              //   'qq-text-sm'
-              // )}
-            >
-              {/* {valueFormatter(item[yAxisFields[0].field])} */}
-              {valueFormatter({
-                value: item[yAxisFields[0].field],
-                field: yAxisFields[0].field,
-                fields: yAxisFields,
-              })}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-});
-
-export default BarList;