refactor: simplify histogram width calculation

qlik-oss · Mar 17, 2023 · 1cada65 · 1cada65
1 parent adf9df0
commit 1cada65
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 19 deletions.
diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/Histogram.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/Histogram.jsx
@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import React from 'react';
 import classes from '../helpers/classes';
 import { frequencyTextNone } from '../helpers/constants';
@@ -11,14 +12,15 @@ function Histogram({ qFrequency, histogram, checkboxes, isSelected, frequencyMax
 
   const width = getBarWidth({ qFrequency, checkboxes, frequencyMax });
   return (
-    <div
+    <Box
       className={joinClassNames([
         classes.bar,
         checkboxes && classes.barWithCheckbox,
         isSelected && (checkboxes ? classes.barSelectedWithCheckbox : classes.barSelected),
       ])}
-      style={{ width }}
-    />
+    >
+      <Box className="bar-filled" width={width} />
+    </Box>
   );
 }
 

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/components/ListBoxRoot.jsx
@@ -169,30 +169,41 @@ const RowColRoot = styled('div', {
   },
 
   [`& .${classes.bar}`]: {
-    border: `${barBorderWidthPx}px solid`,
-    borderColor: '#D9D9D9',
     height: dense ? '16px' : '20px',
     position: 'absolute',
     zIndex: '-1',
     alignSelf: 'center',
-    left: `${barPadPx}px`,
-    transition: 'width 0.2s',
-    backgroundColor: '#FAFAFA',
+    left: barPadPx,
+    width: `calc(100% - ${barPadPx * 2}px)`,
+    display: 'flex',
+    alignItems: 'center',
+    '& .bar-filled': {
+      border: `${barBorderWidthPx}px solid`,
+      borderColor: '#D9D9D9',
+      transition: 'width 0.2s',
+      backgroundColor: '#FAFAFA',
+      height: '100%',
+    },
   },
 
   [`& .${classes.barSelected}`]: {
-    opacity: '30%',
     zIndex: '0',
-    background: theme.palette.background.lighter,
+    '& .bar-filled': {
+      opacity: '30%',
+      background: theme.palette.background.lighter,
+    },
   },
 
   [`& .${classes.barWithCheckbox}`]: {
-    left: `${barWithCheckboxLeftPadPx}px`,
+    left: barWithCheckboxLeftPadPx,
+    width: `calc(100% - ${barWithCheckboxLeftPadPx + barPadPx}px)`,
   },
 
   [`& .${classes.barSelectedWithCheckbox}`]: {
-    background: '#BFE5D0',
-    borderColor: '#BFE5D0',
+    '& .bar-filled': {
+      background: '#BFE5D0',
+      borderColor: '#BFE5D0',
+    },
   },
 
   [`& .${classes.excludedTextWithCheckbox}`]: {

diff --git a/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/helpers/operations.js b/apis/nucleus/src/components/listbox/components/ListBoxRowColumn/helpers/operations.js
@@ -1,20 +1,17 @@
-import { barBorderWidthPx, barPadPx, barWithCheckboxLeftPadPx, frequencyTextNone } from './constants';
+import { frequencyTextNone } from './constants';
 
 export const joinClassNames = (namesArray) =>
   namesArray
     .filter((c) => !!c)
     .join(' ')
     .trim();
 
-export const getBarWidth = ({ qFrequency, checkboxes, frequencyMax }) => {
+export const getBarWidth = ({ qFrequency, frequencyMax }) => {
   const freqStr = String(qFrequency);
   const isPercent = freqStr.substring(freqStr.length - 1) === '%';
   const freq = parseFloat(isPercent ? freqStr : qFrequency);
-  const rightSlice = checkboxes
-    ? `(${barWithCheckboxLeftPadPx}px + ${barPadPx + barBorderWidthPx * 2}px)`
-    : `${barPadPx * 2 + barBorderWidthPx * 2}px`;
   const width = isPercent ? freq : (freq / frequencyMax) * 100;
-  return `calc(${width}% - ${rightSlice})`;
+  return `${width}%`;
 };
 
 export const getFrequencyText = (qFrequency) => qFrequency || frequencyTextNone;