🚸 Improve tick padding behavior

Adyen · Aug 31, 2023 · 3f92886 · 3f92886
1 parent 08b1196
commit 3f92886
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 deletions.
diff --git a/packages/lib/src/components/core/lume-axis/composables/x-band-scale-axis.ts b/packages/lib/src/components/core/lume-axis/composables/x-band-scale-axis.ts
@@ -2,7 +2,7 @@ import { computed, Ref } from 'vue';
 import { ScaleBand } from 'd3';
 
 import { AxisOptions } from '@/composables/options';
-import { AXIS_BOTTOM_PADDING, AXIS_TEXT_HEIGHT } from '@/utils/constants';
+import { AXIS_GHOST_PADDING, AXIS_TEXT_HEIGHT } from '@/utils/constants';
 import { AxisMixin } from '../types';
 
 const useBandScaleAxis: AxisMixin = function (
@@ -31,8 +31,7 @@ const useBandScaleAxis: AxisMixin = function (
     return {
       x: -(width - scale.value.step()) / 2,
       width,
-      height:
-        options.value.tickPadding + AXIS_TEXT_HEIGHT + AXIS_BOTTOM_PADDING,
+      height: options.value.tickPadding + AXIS_TEXT_HEIGHT + AXIS_GHOST_PADDING,
     };
   }
 

diff --git a/packages/lib/src/components/core/lume-axis/composables/x-linear-scale-axis.ts b/packages/lib/src/components/core/lume-axis/composables/x-linear-scale-axis.ts
@@ -2,7 +2,7 @@ import { computed, Ref } from 'vue';
 import { ScaleLinear } from 'd3';
 
 import { AxisOptions } from '@/composables/options';
-import { AXIS_BOTTOM_PADDING, AXIS_TEXT_HEIGHT } from '@/utils/constants';
+import { AXIS_GHOST_PADDING, AXIS_TEXT_HEIGHT } from '@/utils/constants';
 import { AxisMixin } from '../types';
 
 const useLinearScaleAxis: AxisMixin = function (
@@ -23,7 +23,7 @@ const useLinearScaleAxis: AxisMixin = function (
 
   function getTickGhostAttributes() {
     const height =
-      options.value.tickPadding + AXIS_TEXT_HEIGHT + AXIS_BOTTOM_PADDING;
+      options.value.tickPadding + AXIS_TEXT_HEIGHT + AXIS_GHOST_PADDING;
     return {
       height,
       width: tickWidth.value,

diff --git a/packages/lib/src/components/core/lume-axis/composables/y-band-scale-axis.ts b/packages/lib/src/components/core/lume-axis/composables/y-band-scale-axis.ts
@@ -2,6 +2,7 @@ import { computed, Ref } from 'vue';
 import { ScaleBand } from 'd3';
 
 import { AxisOptions } from '@/composables/options';
+import { AXIS_GHOST_PADDING } from '@/utils/constants';
 import { AxisMixin } from '../types';
 
 const useBandScaleAxis: AxisMixin = function (
@@ -25,7 +26,8 @@ const useBandScaleAxis: AxisMixin = function (
     // If label element not yet rendered, assume one scale step, otherwise get its width.
     const width =
       (textRef ? textRef.getComputedTextLength?.() : 42) +
-      options.value.tickPadding * 2;
+      options.value.tickPadding +
+      AXIS_GHOST_PADDING;
     return {
       x: -width,
       width,

diff --git a/packages/lib/src/components/core/lume-axis/composables/y-linear-scale-axis.ts b/packages/lib/src/components/core/lume-axis/composables/y-linear-scale-axis.ts
@@ -3,6 +3,7 @@ import { ScaleLinear } from 'd3';
 
 import { AxisOptions } from '@/composables/options';
 import { AxisMixin } from '../types';
+import { AXIS_GHOST_PADDING } from '@/utils/constants';
 
 const useLinearScaleAxis: AxisMixin = function (
   scale: Ref<ScaleLinear<number, number>>,
@@ -22,7 +23,9 @@ const useLinearScaleAxis: AxisMixin = function (
 
   function getTickGhostAttributes(textRef: SVGTextElement) {
     const width =
-      (textRef?.getComputedTextLength?.() || 0) + options.value.tickPadding * 2;
+      (textRef?.getComputedTextLength?.() || 0) +
+      options.value.tickPadding +
+      AXIS_GHOST_PADDING;
     return {
       width,
       height: tickHeight.value,

diff --git a/packages/lib/src/components/core/lume-axis/lume-axis.vue b/packages/lib/src/components/core/lume-axis/lume-axis.vue
@@ -93,7 +93,11 @@ import { AxisOptions, useOptions, withOptions } from '@/composables/options';
 import { ComputedScaleBand, Scale } from '@/composables/scales';
 import { useSkip } from './composables/lume-skip';
 
-import { Orientation, ORIENTATIONS } from '@/utils/constants';
+import {
+  AXIS_GHOST_PADDING,
+  Orientation,
+  ORIENTATIONS,
+} from '@/utils/constants';
 import { isBandScale } from '@/utils/helpers';
 import { svgCheck } from '@/utils/svg-check';
 import { ContainerSize } from '@/types/size';
@@ -217,7 +221,7 @@ const isHovering = computed(
 );
 
 const axisLabelOffset = computed(
-  () => allOptions.value.tickPadding * 2 || AXIS_LABEL_OFFSET
+  () => allOptions.value.tickPadding + AXIS_GHOST_PADDING || AXIS_LABEL_OFFSET
 );
 
 const axisSize = computed(() => {

diff --git a/packages/lib/src/utils/constants.ts b/packages/lib/src/utils/constants.ts
@@ -131,7 +131,7 @@ export const PADDING_VERTICAL = 0.33; // space between bars is 1/2 of a bar's wi
 export const PADDING_HORIZONTAL = 0.5; // space between bars is a bar's width
 
 export const AXIS_TEXT_HEIGHT = 12;
-export const AXIS_BOTTOM_PADDING = 8;
+export const AXIS_GHOST_PADDING = 8;
 
 // Default radius for the tooltip anchor circle.
 // Adding a negligible radius for tooltip anchor, as firefox doesn't respect tooltip element positioning without the circle having actual radius.