🐛 Make skip option reactive

Adyen · Dec 11, 2023 · eefa96e · eefa96e
1 parent 909b672
commit eefa96e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/lib/src/components/core/lume-axis/composables/lume-skip.ts b/packages/lib/src/components/core/lume-axis/composables/lume-skip.ts
@@ -1,5 +1,6 @@
 import { computed, ref, Ref, watch } from 'vue';
 
+import { AxisOptions } from '@/composables/options';
 import { Scale } from '@/composables/scales';
 
 const SAFETY_MARGIN = 0.2; // 20% of the average width
@@ -9,12 +10,12 @@ const SAFETY_MARGIN = 0.2; // 20% of the average width
  *
  * @param scale A d3 scale.
  * @param tickRefs Template reference to the tick text elements
- * @param skipNumber Optional amount of ticks to skip
+ * @param options The axis options.
  */
 export function useSkip(
   scale: Ref<Scale>,
   tickRefs: Ref<Array<{ ref: SVGTextElement }>>,
-  skipNumber?: true | number
+  options: Ref<AxisOptions>
 ) {
   const avgLabelWidth = ref<number>();
 
@@ -36,6 +37,7 @@ export function useSkip(
   function showTick(index: number) {
     if (!tickRefs.value) return true;
 
+    const skipNumber = options.value.skip;
     const tickCount = tickRefs.value.length;
 
     if (index === 0) return true;

diff --git a/packages/lib/src/components/core/lume-axis/lume-axis.vue b/packages/lib/src/components/core/lume-axis/lume-axis.vue
@@ -178,7 +178,7 @@ const { allOptions } = useOptions<AxisOptions>(
   computedType.value === 'x' ? xOptions : yOptions
 );
 
-const { showTick } = useSkip(scale, tickRefs, allOptions.value.skip);
+const { showTick } = useSkip(scale, tickRefs, allOptions);
 
 const axisTransform = computed(() => {
   // if empty, aligns baseline to the bottom