From 85a0fcfbb23db56cc12fe637b16c208fadc6d5d1 Mon Sep 17 00:00:00 2001
From: Pianist038801 <steven@union.ai>
Date: Tue, 26 Oct 2021 12:58:32 -0400
Subject: [PATCH] feat: use opacity instead of dot

Signed-off-by: Pianist038801 <steven@union.ai>
---
 src/components/common/BarChart.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/common/BarChart.tsx b/src/components/common/BarChart.tsx
index b4dde32e7..e7cc956c4 100644
--- a/src/components/common/BarChart.tsx
+++ b/src/components/common/BarChart.tsx
@@ -41,13 +41,6 @@ const useStyles = makeStyles((theme: Theme) => ({
         cursor: 'pointer',
         width: '80%',
         marginLeft: '10%'
-    },
-    circle: {
-        borderRadius: '50%',
-        backgroundColor: 'purple',
-        height: 6,
-        marginTop: 3,
-        width: 6
     }
 }));
 
@@ -90,14 +83,12 @@ const BarChartItem: React.FC<BarChartItemProps> = ({
         <>
             <div
                 className={styles.itemBar}
-                style={{ backgroundColor: color, height: `${value}%` }}
-                onClick={onClick}
-            />
-            <div
-                className={styles.circle}
                 style={{
-                    backgroundColor: isSelected ? '#CC23E8' : 'transparent'
+                    backgroundColor: color,
+                    height: `${value}%`,
+                    opacity: isSelected ? '100%' : '50%'
                 }}
+                onClick={onClick}
             />
         </>
     );
@@ -177,8 +168,10 @@ export const BarChart: React.FC<BarChartProps> = ({
                         onClick={handleClickItem(item)}
                         key={`bar-chart-item-${index}`}
                         isSelected={
-                            item.metadata &&
-                            chartIds.includes(item.metadata.name)
+                            chartIds.length === 0
+                                ? true
+                                : item.metadata &&
+                                  chartIds.includes(item.metadata.name)
                         }
                     />
                 ))}