chipping away at header + gridline alignments

Author: dreamwasp

packages/gamut/src/BarChart/BarRow.tsx

@@ -20,7 +20,7 @@ const rowBaseStyles = css({
   width: '100%',
   gap: 16,
   py: 8,
-  px: 0,
+  px: 16,
   bg: 'transparent',
   border: 'none',
   textDecoration: 'none',
@@ -72,19 +72,22 @@ export const BarRow = forwardRef<
     },
     ref
   ) => {
-    const { maxRange, unit, styleConfig, animate } = useBarChartContext();
+    const { minRange, maxRange, unit, styleConfig, animate } =
+      useBarChartContext();
 
     const isStacked = seriesTwoValue !== undefined;
     const displayValue = isStacked ? seriesTwoValue : seriesOneValue;
 
     const backgroundBarWidth = calculateBarWidth({
       value: displayValue,
+      minRange,
       maxRange,
     });
 
     const foregroundBarWidth = isStacked
       ? calculateBarWidth({
           value: seriesOneValue,
+          minRange,
           maxRange,
         })
       : 0;
@@ -111,7 +114,7 @@ export const BarRow = forwardRef<
           minWidth="200px"
         >
           {Icon && <Icon size={16} />}
-          <Text fontWeight='bold' truncate="ellipsis" truncateLines={1}>
+          <Text fontWeight="bold" truncate="ellipsis" truncateLines={1}>
             {yLabel}
           </Text>
         </FlexBox>

packages/gamut/src/BarChart/GridLines.tsx

@@ -5,26 +5,34 @@ import { Box } from '../Box';
 
 const GridLineContainer = styled(Box)(
   css({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
     bottom: 0,
     display: { _: 'none', sm: 'flex' },
+    left: '200px',
     pointerEvents: 'none',
+    position: 'absolute',
+    right: '60px',
+    top: 0,
+    borderLeft: 1,
+    borderRight: 1,
+    borderColor: 'background-disabled',
     zIndex: 0,
   })
 );
 
+const GridLineWrapper = styled(Box)(
+  css({
+    flex: 1,
+    display: 'flex',
+    height: '100%',
+  })
+);
+
 const GridLine = styled(Box)(
   css({
     borderLeft: 1,
     borderColorLeft: 'background-disabled',
     height: '100%',
-    flex: 1,
-    '&:first-of-type': {
-      borderLeft: 'none',
-    },
+    width: 0,
   })
 );
 
@@ -33,9 +41,13 @@ export interface GridLinesProps {
 }
 
 export const GridLines: React.FC<GridLinesProps> = ({ tickCount }) => {
-  const lines = Array.from({ length: tickCount }, (_, i) => (
-    <GridLine aria-hidden key={i} />
-  ));
+  const lines = Array.from({ length: tickCount - 2 }, (_, i) => {
+    return (
+      <GridLineWrapper aria-hidden justifyContent="center" key={i}>
+        <GridLine />
+      </GridLineWrapper>
+    );
+  });
 
   return <GridLineContainer aria-hidden>{lines}</GridLineContainer>;
 };

packages/gamut/src/BarChart/ScaleChartHeader.tsx

@@ -1,7 +1,7 @@
 import { css } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
 
-import { FlexBox } from '../Box';
+import { Box, FlexBox } from '../Box';
 import { Text } from '../Typography';
 import { useBarChartContext } from './BarChartProvider';
 import { formatNumberUSCompact, getLabel } from './utils';
@@ -21,37 +21,51 @@ const StyledLabelText = styled(Text)(
   })
 );
 
+const StyledHeaderContainer = styled(FlexBox)(
+  css({
+    marginLeft: '200px',
+    paddingRight: '60px',
+    width: 'calc(100% - 200px - 60px)',
+  })
+);
+
 export const ScaleChartHeader: React.FC<ScaleChartHeaderProps> = ({
   labelCount,
+  min,
   max,
 }) => {
   const { styleConfig } = useBarChartContext();
 
-  const scaleLabels = Array.from({ length: labelCount }, (_, i) => (
-    <StyledLabelText
-      data-testid="chart-header-label"
-      key={i}
-      textAlign="center"
-      textColor={styleConfig.textColor}
-      variant="p-small"
-    >
-      {formatNumberUSCompact({
-        num: getLabel({ labelCount, labelIndex: i, max }),
-      })}
-    </StyledLabelText>
-  ));
+  const scaleLabels = Array.from({ length: labelCount }, (_, i) => {
+    const isFirst = i === 0;
+    const isLast = i === labelCount - 1;
+    const textAlign = isFirst ? 'left' : isLast ? 'right' : 'center';
+
+    return (
+      <StyledLabelText
+        data-testid="chart-header-label"
+        key={i}
+        textAlign={textAlign}
+        textColor={styleConfig.textColor}
+        variant="p-small"
+      >
+        {formatNumberUSCompact({
+          num: getLabel({ labelCount, labelIndex: i, min, max }),
+        })}
+      </StyledLabelText>
+    );
+  });
 
   return (
-    <FlexBox
-      aria-hidden="true"
-      display={{ _: 'none', sm: 'flex' }}
-      justifyContent="space-between"
-      mb={8}
-      pl={{ _: 64, sm: 96 }}
-      pr={{ _: 40, sm: 64 }}
-      width="100%"
-    >
-      {scaleLabels}
-    </FlexBox>
+    <Box bg="red" width={1}>
+      <StyledHeaderContainer
+        aria-hidden="true"
+        display={{ _: 'none', sm: 'flex' }}
+        justifyContent="space-between"
+        mb={8}
+      >
+        {scaleLabels}
+      </StyledHeaderContainer>
+    </Box>
   );
 };

packages/gamut/src/BarChart/utils/index.tsx

@@ -20,12 +20,16 @@ export const calculatePercent = ({ value, total }: { value: number; total: numbe
 
 export const calculateBarWidth = ({
   value,
+  minRange,
   maxRange,
 }: {
   value: number;
+  minRange: number;
   maxRange: number;
 }) => {
-  return Math.floor(calculatePercent({ value, total: maxRange }));
+  const range = maxRange - minRange;
+  const adjustedValue = value - minRange;
+  return Math.floor(calculatePercent({ value: adjustedValue, total: range }));
 };
 
 // Calculate tick spacing and nice minimum and maximum data points on the axis.
@@ -141,13 +145,15 @@ export const getValuesSummary = ({
 export const getLabel = ({
   labelCount,
   labelIndex,
+  min,
   max,
 }: {
   labelCount: number;
   labelIndex: number;
+  min: number;
   max: number;
 }): number => {
   if (labelCount <= 1) return max;
   const incrementalDecimal = labelIndex / (labelCount - 1);
-  return Math.floor(incrementalDecimal * max);
+  return Math.floor(min + incrementalDecimal * (max - min));
 };