Merge branch 'main' into add-histogram

bento-platform · May 27, 2024 · b6d2732 · b6d2732
2 parents 805af82 + 8a052f6
commit b6d2732
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bento-charts",
-  "version": "2.6.4",
+  "version": "2.6.8",
   "description": "Charts library for Bento-platform",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,6 +33,10 @@
             {
               "type": "refactor",
               "release": "minor"
+            },
+            {
+              "type": "style",
+              "release": "patch"
             }
           ]
         }

diff --git a/src/Components/Charts/BentoPie.tsx b/src/Components/Charts/BentoPie.tsx
@@ -13,7 +13,8 @@ import {
 import type CSS from 'csstype';
 
 import {
-  TOOL_TIP_STYLE,
+  TOOLTIP_STYLE,
+  TOOLTIP_OTHER_PROPS,
   LABEL_STYLE,
   COUNT_STYLE,
   CHART_MISSING_FILL,
@@ -83,10 +84,6 @@ const BentoPie = ({
     };
   }, [transformedData, sort, chartThreshold]);
 
-  if (data.length === 0) {
-    return <NoData height={height} />;
-  }
-
   // ##################### Rendering #####################
   const onEnter: PieProps['onMouseEnter'] = useCallback((_data, index) => {
     setActiveIndex(index);
@@ -104,9 +101,13 @@ const BentoPie = ({
     setActiveIndex(undefined);
   }, []);
 
+  if (data.length === 0) {
+    return <NoData height={height} />;
+  }
+
   return (
-    <ChartWrapper>
-      <ResponsiveContainer width={width ?? "100%"} height={height}>
+    <ChartWrapper responsive={typeof width !== 'number'}>
+      <ResponsiveContainer width={width ?? '100%'} height={height}>
         <PieChart>
           <Pie
             data={data}
@@ -130,11 +131,7 @@ const BentoPie = ({
               return <Cell key={index} fill={fill} />;
             })}
           </Pie>
-          <Tooltip
-            content={<CustomTooltip totalCount={sum} />}
-            isAnimationActive={false}
-            allowEscapeViewBox={{ x: true, y: true }}
-          />
+          <Tooltip {...TOOLTIP_OTHER_PROPS} content={<CustomTooltip totalCount={sum} />} isAnimationActive={false} />
         </PieChart>
       </ResponsiveContainer>
     </ChartWrapper>
@@ -259,7 +256,7 @@ const CustomTooltip = ({
   const percentage = totalCount ? Math.round((value / totalCount) * 100) : 0;
 
   return name !== 'other' ? (
-    <div style={TOOL_TIP_STYLE}>
+    <div style={TOOLTIP_STYLE}>
       <p style={LABEL_STYLE}>{name}</p>
       <p style={COUNT_STYLE}>
         {' '}

diff --git a/src/Components/Charts/ChartWrapper.tsx b/src/Components/Charts/ChartWrapper.tsx
@@ -2,14 +2,15 @@ import React, { ForwardedRef, forwardRef, ReactNode } from 'react';
 import { CHART_WRAPPER_STYLE } from '../../constants/chartConstants';
 
 interface ChartWrapperProps {
+  responsive: boolean;
   children: ReactNode;
 }
 
-const ChartWrapper = forwardRef(({children}: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
-  <div style={CHART_WRAPPER_STYLE} ref={ref}>
+const ChartWrapper = forwardRef(({ responsive, children }: ChartWrapperProps, ref: ForwardedRef<HTMLDivElement>) => (
+  <div style={{ ...CHART_WRAPPER_STYLE, ...(responsive ? {} : { overflowX: 'auto', overflowY: 'hidden' }) }} ref={ref}>
     {children}
   </div>
 ));
-ChartWrapper.displayName = "ChartWrapper";
+ChartWrapper.displayName = 'ChartWrapper';
 
 export default ChartWrapper;
diff --git a/src/constants/chartConstants.ts b/src/constants/chartConstants.ts
@@ -79,14 +79,25 @@ export const DEFAULT_CHART_THEME: ChartTheme = {
 // ################### CHART STYLES ###################
 
 // common
-export const TOOL_TIP_STYLE: CSS.Properties = {
+export const TOOLTIP_OTHER_PROPS: {
+  wrapperStyle: CSS.Properties;
+  allowEscapeViewBox: { x: boolean; y: boolean };
+} = {
+  wrapperStyle: {
+    zIndex: 10,
+    maxWidth: '240px',
+  },
+  allowEscapeViewBox: { x: true, y: true },
+};
+
+export const TOOLTIP_STYLE: CSS.Properties = {
   backgroundColor: 'rgba(255, 255, 255, 0.9)',
+  backdropFilter: 'blur(4px)',
   padding: '5px',
-  border: '1px solid grey',
-  boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.9)',
-  borderRadius: '2px',
+  border: '1px solid #DDD',
+  boxShadow: '0px 0px 4px rgba(0, 0, 0, 0.1)',
+  borderRadius: '4px',
   textAlign: 'left',
-  zIndex: 1,
 };
 
 export const LABEL_STYLE: CSS.Properties = {
@@ -98,7 +109,7 @@ export const LABEL_STYLE: CSS.Properties = {
 
 export const COUNT_STYLE: CSS.Properties = {
   fontWeight: 'normal',
-  fontSize: '11px',
+  fontSize: '12px',
   padding: '0',
   margin: '0',
 };
@@ -107,8 +118,6 @@ export const CHART_WRAPPER_STYLE: CSS.Properties = {
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  overflowX: 'auto',
-  overflowY: 'hidden',
 };
 
 // bar chart

diff --git a/test/js/TestBarChart.tsx b/test/js/TestBarChart.tsx
@@ -35,7 +35,7 @@ const TestBarChart: React.FC = () => {
             { x: 'NB', y: 75 },
             { x: 'SB', y: 60 },
             { x: 'AU', y: 30 },
-            { x: 'XA', y: 80 },
+            { x: 'XA really really really really really really really really really really long label', y: 80 },
           ]}
           units="management units"
           height={sizeStateResponsive.height}

diff --git a/test/js/TestPieChart.tsx b/test/js/TestPieChart.tsx
@@ -4,19 +4,9 @@ import { PieChart } from '../../src/index';
 const TestPieChart = () => (
   <PieChart
     data={[
-      { x: 'AB', y: 50 },
+      { x: 'AB this is a very very very very very very very very very very long label', y: 50 },
       { x: 'NB', y: 75 },
       { x: 'SB', y: 60 },
-      { x: 'SB', y: 60 },
-      { x: 'SB', y: 60 },
-      { x: 'SB', y: 60 },
-      { x: 'AU', y: 30 },
-      { x: 'XA', y: 80 },
-      { x: 'BB', y: 50 },
-      { x: 'BC', y: 75 },
-      { x: 'BD', y: 60 },
-      { x: 'BE', y: 30 },
-      { x: 'BF', y: 80 },
     ]}
     onClick={(f) => {
       console.log(f);