@quillsql/react 1.1.8 → 1.2.0

package/src/Chart.tsx

@@ -1,15 +1,6 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import React, { useState, useEffect, useContext } from 'react';
-import { twMerge } from 'tailwind-merge';
-import {
-  Card,
-  Text,
-  Metric,
-  Flex,
-  ProgressBar,
-  AreaChart,
-} from '@tremor/react';
 import {
   Area,
   CartesianGrid,
@@ -207,9 +198,14 @@ export const ChartTooltipFrame = ({
     style={{
       borderStyle: 'solid',
       borderColor: theme.borderColor || '#E5E7EB',
+      overflow: 'hidden',
       borderWidth: 1,
+      background: theme?.backgroundColor || '#ffffff',
+      borderRadius: '0.375rem',
+      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="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -236,29 +232,53 @@ export const ChartTooltipRow = ({
   color,
   theme,
 }: ChartTooltipRowProps) => (
-  <div className="qq-flex qq-items-center qq-justify-between qq-space-x-8">
-    <div className="qq-flex qq-items-center qq-space-x-2">
+  <div
+    style={{
+      marginRight: '1.5rem',
+      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: '0.5rem',
+          width: '0.5rem',
+          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
-        )}
+        // 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(
@@ -270,8 +290,10 @@ export const ChartTooltipRow = ({
           marginBottom: 0,
           fontFamily: theme.fontFamily,
           color: theme.primaryTextColor,
+          fontSize: theme?.fontSizeSmall || '0.875rem',
+          fontWeight: theme?.fontWeightMedium || '500',
         }}
-        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
+        // className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
@@ -282,13 +304,19 @@ export const ChartTooltipRow = ({
         marginBottom: 0,
         fontFamily: theme.fontFamily,
         color: theme.secondaryTextColor,
+        textAlign: 'right',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        fontSize: theme?.fontSizeSmall || '0.875rem',
+        fontWeight: theme?.fontWeightNormal || '400',
       }}
-      className={twMerge(
-        'qq-text-right qq-whitespace-nowrap',
-        // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        'qq-text-gray-500'
-        // fontWeight.sm
-      )}
+      // className={twMerge(
+      //   'qq-text-right qq-whitespace-nowrap',
+      // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
+      // 'qq-text-gray-500'
+      // fontWeight.sm
+      // )}
     >
       {name}
     </p>
@@ -319,12 +347,19 @@ const ChartTooltip = ({
           style={{
             borderStyle: 'solid',
             borderBottomColor: theme.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
             borderTop: 'none',
             borderLeft: 'none',
             borderRight: 'none',
             borderBottomWidth: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
           }}
-          className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-gray-200"
+          // className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-gray-200"
           // className={
           // twMerge()
           // getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder)
@@ -341,16 +376,20 @@ const ChartTooltip = ({
               marginBottom: 0,
               fontFamily: theme.fontFamily,
               color: theme.primaryTextColor,
+              fontSize: theme?.fontSizeSmall || '0.875rem',
+              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
-            )}
+            // 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))
               ? format(new Date(label), 'MMM yyyy')
@@ -360,7 +399,14 @@ const ChartTooltip = ({
         </div>
 
         <div
-          className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
+          // className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
+          style={{
+            paddingRight: '1rem',
+            paddingLeft: '1rem',
+            paddingTop: '0.5rem',
+            paddingBottom: '0.5rem',
+            // marginTop: '0.25rem',
+          }}
           // className={
           // twMerge()
           // spacing.twoXl.paddingX,
@@ -552,12 +598,16 @@ const ChartUpdater: React.FC<ChartProps> = ({
   if (!chartConfig || loading) {
     return (
       <div
-        className="flex flex-col flex-1 h-[100%]"
+        // 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
@@ -671,9 +721,11 @@ const ChartUpdater: React.FC<ChartProps> = ({
           textAlign: 'left',
           overflow: 'hidden',
           height: containerStyle?.height || '100%',
+          display: 'flex',
+          flexDirection: 'column',
           // background: 'red',
         }}
-        className="qq-flex qq-flex-col qq-text-xl"
+        // className="qq-flex qq-flex-col qq-text-xl"
       >
         {formatNumber(
           chartConfig.rows[0][chartConfig.xAxisField],
@@ -782,8 +834,16 @@ function BarChart({
   const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
   return (
     <div
-      style={{ ...containerStyle, boxSizing: 'content-box' }}
-      className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
+      style={{
+        ...containerStyle,
+        boxSizing: 'content-box',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        height: '100%',
+        width: '100%',
+      }}
+      // className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
     >
       <ResponsiveContainer width="100%" height={'100%'}>
         <ReChartsBarChart

package/src/Dashboard.tsx

@@ -191,11 +191,11 @@ export default function Dashboard({
                                 ? () => handleOnClickDashboardItem(elem._id)
                                 : undefined
                             }
-                            className={
-                              onClickDashboardItem
-                                ? 'hover:qq-bg-zinc-50'
-                                : undefined
-                            }
+                            // className={
+                            //   onClickDashboardItem
+                            //     ? 'hover:qq-bg-zinc-50'
+                            //     : undefined
+                            // }
                             key={elem.name + '' + index}
                             style={{
                               // background: theme.elevatedCardColor,
@@ -355,11 +355,11 @@ export default function Dashboard({
                               ? () => handleOnClickDashboardItem(elem._id)
                               : undefined
                           }
-                          className={
-                            onClickDashboardItem
-                              ? 'hover:qq-bg-zinc-50'
-                              : undefined
-                          }
+                          // className={
+                          //   onClickDashboardItem
+                          //     ? 'hover:qq-bg-zinc-50'
+                          //     : undefined
+                          // }
                           // className="qq-shadow-md"
                           key={elem.name + '' + index}
                           // onClick={() => handleEditDashboardItem(elem)}