[FX-5762] Completely hide axis when needed (#4447)

toptal · Aug 8, 2024 · 6f62aba · 6f62aba
1 parent d6c22e1
commit 6f62aba
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 21 deletions.
diff --git a/.changeset/pink-rings-suffer.md b/.changeset/pink-rings-suffer.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-charts': patch
+---
+
+- hide axis if every tick is skipped
diff --git a/packages/picasso-charts/src/BarChart/BarChart.tsx b/packages/picasso-charts/src/BarChart/BarChart.tsx
@@ -116,7 +116,7 @@ const BarChart = <T extends string>({
   customTooltip,
   allowTooltipEscapeViewBox,
   getBarColor = defaultGetBarColor,
-  labelKey,
+  labelKey = 'name',
   getBarLabelColor = defaultGetBarLabelColor,
   renderBarIndicators,
   testIds,
@@ -156,7 +156,7 @@ const BarChart = <T extends string>({
   const ticks = getD3Ticks(BOTTOM_DOMAIN, topDomain, NUMBER_OF_TICKS)
 
   const categoryAxisProps = {
-    dataKey: labelKey || 'name',
+    dataKey: labelKey,
     height: TICK_HEIGHT,
     interval: 0,
     tick: { width: TICK_WIDTH },
@@ -171,6 +171,10 @@ const BarChart = <T extends string>({
   const xAxisProps = horizontal ? categoryAxisProps : valueAxisProps
   const yAxisProps = !horizontal ? categoryAxisProps : valueAxisProps
 
+  // If ticks are not shown, the corresponding axis is not rendered to avoid empty space
+  const renderXAxis = showEveryNthTickOnXAxis !== 0
+  const renderYAxis = showEveryNthTickOnYAxis !== 0
+
   return (
     <div style={{ height, width }} className={className} {...rest}>
       <StyleOverrides />
@@ -190,24 +194,31 @@ const BarChart = <T extends string>({
             stroke={palette.grey.lighter2}
             vertical={!horizontal}
           />
-          <XAxis
-            {...xAxisProps}
-            type={horizontal ? 'category' : 'number'}
-            tickLine={TICK_LINE}
-            axisLine={AXIS_LINE}
-            minTickGap={MIN_TICK_GAP}
-            tickMargin={TICK_MARGIN}
-            interval={showEveryNthTickOnXAxis - 1}
-          />
-          <YAxis
-            {...yAxisProps}
-            type={horizontal ? 'number' : 'category'}
-            tickLine={TICK_LINE}
-            axisLine={AXIS_LINE}
-            minTickGap={MIN_TICK_GAP}
-            tickMargin={TICK_MARGIN}
-            interval={showEveryNthTickOnYAxis - 1}
-          />
+
+          {renderXAxis && (
+            <XAxis
+              {...xAxisProps}
+              type={horizontal ? 'category' : 'number'}
+              tickLine={TICK_LINE}
+              axisLine={AXIS_LINE}
+              minTickGap={MIN_TICK_GAP}
+              tickMargin={TICK_MARGIN}
+              interval={showEveryNthTickOnXAxis - 1}
+            />
+          )}
+
+          {renderYAxis && (
+            <YAxis
+              {...yAxisProps}
+              type={horizontal ? 'number' : 'category'}
+              tickLine={TICK_LINE}
+              axisLine={AXIS_LINE}
+              minTickGap={MIN_TICK_GAP}
+              tickMargin={TICK_MARGIN}
+              interval={showEveryNthTickOnYAxis - 1}
+            />
+          )}
+
           {tooltipElement}
           {dataKeys.map(dataKey => (
             <Bar
@@ -254,6 +265,7 @@ BarChart.defaultProps = {
   width: 'auto',
   tooltip: false,
   showBarLabel: true,
+  labelKey: 'name',
   layout: 'horizontal',
 }
 

diff --git a/packages/picasso-charts/src/BarChart/story/index.jsx b/packages/picasso-charts/src/BarChart/story/index.jsx
@@ -65,7 +65,8 @@ page
     takeScreenshot: false,
   })
   .addExample('BarChart/story/ShowEveryNthTick.example.tsx', {
-    title: 'Show every Nth tick on X or Y-axis',
+    title:
+      'Show every Nth tick on X or Y-axis (or hide axis labels completely)',
     description: `You can show every Nth tick for X-axis or Y-axis. "0" hides all ticks, "1" shows all ticks (default behavior). The example below has "showEveryNthTickOnXAxis={3}" (every third tick is shown on X-axis) and "showEveryNthTickOnYAxis={0}" (no ticks are shown on Y-axis).`,
     takeScreenshot: false,
   })