@quillsql/react 1.0.0

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@quillsql/react",
+  "version": "1.0.0",
+  "access": "public",
+  "description": "Quill React components for building dashboards and reporting.",
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
+    "prettier": "prettier --check 'src/**/*.{ts,tsx}'",
+    "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
+    "build:css": "postcss src/styles.css -o lib/styles.css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@tremor/react": "^2.1.0",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.3.5",
+    "date-fns": "^2.29.3",
+    "react-loading-skeleton": "^3.2.1",
+    "recharts": "^2.5.0",
+    "tailwind-merge": "^1.12.0",
+    "tailwindcss": "^3.3.1",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.3"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.33",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.1",
+    "@typescript-eslint/parser": "^5.57.1",
+    "eslint": "^8.37.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "prettier": "^2.8.7"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/src/BarList.tsx

@@ -0,0 +1,236 @@
+/* eslint-disable react/display-name */
+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';
+
+// 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;
+  chartType: string;
+  yAxisFields: YAxisField[];
+}
+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);
+};
+
+const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
+  const {
+    data = [],
+    yAxisFields,
+    xAxisField,
+    color = 'blue',
+    // valueFormatter = (value: any) => value,valueFormatter
+    showAnimation = true,
+    className,
+    ...other
+  } = props;
+
+  const widths = getWidthsFromValues(data.map(item => item.median_days));
+
+  const rowHeight = 'h-9';
+
+  return (
+    <div
+      ref={ref}
+      style={{ width: '100%' }}
+      className={twMerge(
+        // makeBarListClassName('root'),
+        'flex justify-between',
+        'space-x-6',
+        className
+      )}
+      {...other}
+    >
+      <div
+        //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
+        className="relative-w-full bg-[#212121]"
+        style={{ width: '100%' }}
+      >
+        {data.map((item, idx) => {
+          //   const Icon = item.icon;
+          const Icon = null;
+
+          return (
+            <div
+              //   key={item.key ?? item.name}
+              key={item.name}
+              className={`flex items-center h-9 rounded mb-2`}
+              //   className={twMerge(
+              //     // makeBarListClassName('bar'),
+              //     'flex items-center',
+              //     rowHeight,
+              //     'bg-black',
+              //     'rounded',
+              //     idx === data.length - 1 ? 'mb-0' : 'mb-2'
+              //   )}
+              style={{
+                width: `${widths[idx]}%`,
+                transition: showAnimation ? 'all 2s' : '',
+                backgroundColor: color,
+              }}
+            >
+              <div className={twMerge('absolute max-w-full flex', 'ml-2')}>
+                <p
+                  className={twMerge(
+                    // makeBarListClassName('barText'),
+                    'whitespace-nowrap truncate',
+                    'text-gray-500',
+                    'text-sm'
+                  )}
+                >
+                  {item.name}
+                </p>
+                {/* {Icon ? (
+                  <Icon
+                    className={twMerge(
+                      makeBarListClassName('barIcon'),
+                      'flex-none',
+                      'h-5',
+                      'w-5',
+                      'mr-2.5',
+                      'text-gray-400'
+                    )}
+                    aria-hidden="true"
+                  />
+                ) : null} */}
+                {/* {item.href ? (
+                  <a
+                    href={item.href}
+                    target={item.target ?? '_blank'}
+                    rel="noreferrer"
+                    className={twMerge(
+                      makeBarListClassName('barLink'),
+                      'whitespace-nowrap truncate text-blue-500',
+                      'no-underline hover:underline visited:text-blue-500',
+                      'text-sm'
+                    )}
+                  >
+                    {item.name}
+                  </a>
+                ) : (
+                  <p
+                    className={twMerge(
+                      makeBarListClassName('barText'),
+                      'whitespace-nowrap truncate',
+                      'text-gray-500',
+                      'text-sm'
+                    )}
+                  >
+                    {item.name}
+                  </p>
+                )} */}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      {/* eslint-disable prettier/prettier */}
+      <div className={(makeBarListClassName('labels'), 'text-right min-w-min')}>
+        {data.map((item, idx) => (
+          <div
+            key={item[xAxisField]}
+            className={twMerge(
+              makeBarListClassName('labelWrapper'),
+              'flex justify-end items-center',
+              rowHeight,
+              idx === data.length - 1 ? 'mb-0' : 'mb-2'
+            )}
+          >
+            <p
+              className={twMerge(
+                makeBarListClassName('labelText'),
+                'whitespace-nowrap truncate',
+                'text-gray-500',
+                'text-sm'
+              )}
+            >
+              {valueFormatter(item[yAxisFields[0].field])}
+            </p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+});
+
+export default BarList;