@quillsql/react 1.1.8 → 1.2.0

package/src/BarList.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/display-name */
 // @ts-nocheck
 import React, { useState } from 'react';
-import { twMerge } from 'tailwind-merge';
+// import { twMerge } from 'tailwind-merge';
 import {
   Area,
   CartesianGrid,
@@ -96,7 +96,7 @@ const valueFormatter = (number: number) => {
   return number.toFixed(0);
 };
 
-function hexToRgbaWith10PercentAlpha(hex) {
+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);
@@ -137,27 +137,34 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       <div
         ref={ref}
         style={{
-          width: '100%',
+          // width: '100%',
           height: '100%',
           marginLeft: 25,
           // background: 'red',
           marginTop: 20,
-          paddingRight: 25,
+          // paddingRight: 25,
           overflow: 'hidden',
           boxSizing: 'content-box',
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginLeft: '1.5rem',
         }}
-        className={twMerge(
-          // makeBarListClassName('root'),
-          'qq-flex qq-justify-between',
-          'qq-space-x-6',
-          className
-        )}
+        // 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%', boxSizing: 'content-box' }}
+          // className="qq-relative-w-full"
+          style={{
+            // width: '100%',
+            height: '100%',
+            position: 'relative',
+            boxSizing: 'content-box',
+          }}
         >
           {data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
             //   const Icon = item.icon;
@@ -165,9 +172,14 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
 
             return (
               <div
-                className="qq-flex qq-flex-row qq-items-center"
+                // className="qq-flex qq-flex-row qq-items-center"
                 key={item[xAxisField] + idx}
-                style={{ boxSizing: 'content-box' }}
+                style={{
+                  boxSizing: 'content-box',
+                  display: 'flex',
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                }}
               >
                 <div
                   title={item[xAxisField]}
@@ -182,14 +194,18 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     style={{
                       color: theme?.chartLabelColor,
                       boxSizing: 'content-box',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
                       fontFamily:
                         theme?.chartLabelFontFamily || theme?.fontFamily,
+                      fontSize: theme?.fontSizeSmall || '0.875rem',
                     }}
-                    className={twMerge(
-                      // makeBarListClassName('barText'),
-                      'qq-whitespace-nowrap truncate',
-                      'qq-text-sm'
-                    )}
+                    // className={twMerge(
+                    // makeBarListClassName('barText'),
+                    //   'qq-whitespace-nowrap truncate',
+                    //   'qq-text-sm'
+                    // )}
                   >
                     {item[xAxisField]}
                   </p>
@@ -199,12 +215,19 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     width: '100%',
                     height: '100%',
                     boxSizing: 'content-box',
+                    display: 'flex',
+                    flexDirection: 'column',
                   }}
-                  className="qq-flex qq-flex-col"
+                  // className="qq-flex qq-flex-col"
                 >
                   <div
-                    className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
+                    // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      height: '2.25rem',
+                      borderRadius: '0.25rem',
+                      marginBottom: '0.5rem',
                       width: `${widths[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
                       backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
@@ -212,10 +235,16 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      className={twMerge(
-                        'qq-absolute qq-max-w-full qq-flex',
-                        'qq-ml-2'
-                      )}
+                      style={{
+                        position: 'absolute',
+                        display: 'flex',
+                        maxWidth: '100%',
+                        boxSizing: 'content-box',
+                      }}
+                      // className={twMerge(
+                      //   'qq-absolute qq-max-w-full qq-flex',
+                      //   'qq-ml-2'
+                      // )}
                     >
                       <p
                         style={{
@@ -223,20 +252,29 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                           fontFamily:
                             theme?.chartLabelFontFamily || theme?.fontFamily,
                           boxSizing: 'content-box',
+                          whiteSpace: 'nowrap',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          fontSize: theme?.fontSizeSmall || '0.875rem',
                         }}
-                        className={twMerge(
-                          // makeBarListClassName('barText'),
-                          'qq-whitespace-nowrap truncate',
-                          'qq-text-sm'
-                        )}
+                        // 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`}
+                    // className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      height: '2.25rem',
+                      borderRadius: '0.25rem',
+                      marginBottom: '0.5rem',
                       width: `${widths2[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
                       backgroundColor: hexToRgbaWith10PercentAlpha(colors[1]),
@@ -244,24 +282,34 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      style={{ boxSizing: 'content-box' }}
-                      className={twMerge(
-                        'qq-absolute qq-max-w-full qq-flex',
-                        'qq-ml-2'
-                      )}
+                      style={{
+                        boxSizing: 'content-box',
+                        position: 'absolute',
+                        maxWidth: '100%',
+                        display: 'flex',
+                        marginLeft: '0.5rem',
+                      }}
+                      // 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 || '0.875rem',
                         }}
-                        className={twMerge(
-                          // makeBarListClassName('barText'),
-                          'qq-whitespace-nowrap truncate',
-                          'qq-text-sm'
-                        )}
+                        // className={twMerge(
+                        // makeBarListClassName('barText'),
+                        //   'qq-whitespace-nowrap truncate',
+                        //   'qq-text-sm'
+                        // )}
                       >
                         {yAxisFields[1].label}
                         {/* {item[xAxisField]} */}
@@ -279,7 +327,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                 boxSizing: 'content-box',
                 fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
               }}
-              className="qq-text-sm"
+              // className="qq-text-sm"
             >
               ...{data.length - NUM_TO_SHOW} more
             </div>
@@ -287,33 +335,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         </div>
         {/* eslint-disable prettier/prettier */}
         <div
-          style={{ boxSizing: 'content-box' }}
-          className={
-            (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
-          }
+          style={{
+            boxSizing: 'content-box',
+            minWidth: 'min-content',
+            textAlign: 'right',
+          }}
+          // 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' }}
-              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'
-              )}
+              style={{
+                boxSizing: 'content-box',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
+                height: '2.25rem',
+              }}
+              // 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 || '0.875rem',
                 }}
-                className={twMerge(
-                  makeBarListClassName('labelText'),
-                  'qq-whitespace-nowrap truncate',
-                  'qq-text-sm'
-                )}
+                // className={twMerge(
+                //   makeBarListClassName('labelText'),
+                //   'qq-whitespace-nowrap truncate',
+                //   'qq-text-sm'
+                // )}
               >
                 {valueFormatter(item[yAxisFields[0].field])}
               </p>
@@ -328,32 +391,36 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
     <div
       ref={ref}
       style={{
-        width: '100%',
+        // width: '100%',
         boxSizing: 'content-box',
         height: '100%',
         // height: hei
         // marginLeft: 25,
         // background: 'red',
         marginTop: 20,
-        paddingRight: 25,
+        // paddingRight: 25,
         overflow: 'hidden',
+        display: 'flex',
+        marginLeft: '1.5rem',
+        justifyContent: 'space-between',
       }}
-      className={twMerge(
-        // makeBarListClassName('root'),
-        'qq-flex qq-justify-between qq-h-full qq-w-full',
-        'qq-space-x-6',
-        className
-      )}
+      // 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"
+        // className="qq-relative-w-full"
         style={{
           width: 'calc(100%)',
           boxSizing: 'content-box',
           height: '100%',
-          paddingLeft: 25,
+          paddingRight: 25,
+          position: 'relative',
         }}
       >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
@@ -363,33 +430,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           return (
             <div
               key={item[xAxisField] + 'label' + idx}
-              className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
+              // 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: '2.25rem',
+                marginBottom: '0.5rem',
+                borderRadius: '0.25rem',
               }}
             >
               <div
-                style={{ boxSizing: 'content-box' }}
-                className={twMerge(
-                  'qq-absolute qq-max-w-full qq-flex',
-                  'qq-ml-2'
-                )}
+                style={{
+                  boxSizing: 'content-box',
+                  position: 'absolute',
+                  maxWidth: '100%',
+                  display: 'flex',
+                  marginLeft: '0.5rem',
+                }}
+                // 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 || '0.875rem',
                   }}
-                  className={twMerge(
-                    // makeBarListClassName('barText'),
-                    'qq-whitespace-nowrap truncate',
-                    'qq-text-sm'
-                  )}
+                  // className={twMerge(
+                  // makeBarListClassName('barText'),
+                  //   'qq-whitespace-nowrap truncate',
+                  //   'qq-text-sm'
+                  // )}
                 >
                   {item[xAxisField]}
                 </p>
@@ -404,7 +486,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
               boxSizing: 'content-box',
               fontFamily: theme?.chartLabelFontFamily || theme?.fontFamily,
             }}
-            className="qq-text-sm"
+            // className="qq-text-sm"
           >
             ...{data.length - NUM_TO_SHOW} more
           </div>
@@ -412,33 +494,48 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       </div>
       {/* eslint-disable prettier/prettier */}
       <div
-        style={{ boxSizing: 'content-box' }}
-        className={
-          (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
-        }
+        style={{
+          boxSizing: 'content-box',
+          textAlign: 'right',
+          minWidth: 'min-content',
+        }}
+        // 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' }}
-            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'
-            )}
+            style={{
+              boxSizing: 'content-box',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'flex-end',
+              marginBottom: idx === data.length - 1 ? 0 : '0.5rem',
+              height: '2.25rem',
+            }}
+            // 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 || '0.875rem',
               }}
-              className={twMerge(
-                makeBarListClassName('labelText'),
-                'qq-whitespace-nowrap qq-truncate',
-                'qq-text-sm'
-              )}
+              // className={twMerge(
+              //   makeBarListClassName('labelText'),
+              //   'qq-whitespace-nowrap qq-truncate',
+              //   'qq-text-sm'
+              // )}
             >
               {valueFormatter(item[yAxisFields[0].field])}
             </p>