Feat: add onlyMainTicks in useLogScale

src/hooks/useLogTicks.ts

@@ -20,6 +20,7 @@ export interface PrimaryLogTicks {
 interface Options {
   tickFormat?: (d: number) => string;
   minSpace?: number;
+  onlyMainTicks?: boolean;
 }
 
 const TEST_HEIGHT = '+1234567890';
@@ -35,13 +36,25 @@ function formatTicks<Scale extends ScaleContinuousNumeric<number, number>>(
   format: (d: number) => string,
   maxWordSpace: number,
   minSpace: number,
+  onlyMainTicks: boolean,
 ): PrimaryLogTicks[] {
-  const scaledTicks = ticks.filter((val) => isMainTick(val) === 1).map(scale);
+  const mainTicks = ticks.filter((val) => isMainTick(val) === 1);
+  const scaledTicks = mainTicks.map(scale);
   const mainTickSpace = Math.abs(scaledTicks[0] - scaledTicks[1]);
   const mainTickRatio = (maxWordSpace + minSpace) / mainTickSpace;
   const mainTicksStep = mainTickRatio >= 1 ? Math.ceil(mainTickRatio) : 1;
+  if (onlyMainTicks) {
+    return mainTicks
+      .filter((val, i) => i % mainTicksStep === 0)
+      .map((value) => {
+        const position = scale(value);
+        let label = format(value);
+        return { label, position, value };
+      });
+  }
 
   let mainTickCounter = 0;
+
   return ticks.map((value) => {
     const position = scale(value);
     let label = '';
@@ -54,7 +67,7 @@ function formatTicks<Scale extends ScaleContinuousNumeric<number, number>>(
 }
 
 export function useLogTicks<
-  Scale extends ScaleContinuousNumeric<number, number>
+  Scale extends ScaleContinuousNumeric<number, number>,
 >(
   scale: Scale,
   direction: Directions,
@@ -69,7 +82,7 @@ export function useLogTicks<
   const domain = scale.domain();
   if (!domain) throw new Error('Domain needs to be specified');
 
-  const { minSpace = 8 } = options;
+  const { minSpace = 8, onlyMainTicks = false } = options;
   const format = options?.tickFormat;
   const tickFormat = useCallback(
     (x: number) => (format ? format(x) : String(x)),
@@ -95,5 +108,12 @@ export function useLogTicks<
   }, [direction, domain, tickFormat, ref, ticks]);
 
   // Calculates the first paint density
-  return formatTicks(ticks, scale, tickFormat, maxStrSize, minSpace);
+  return formatTicks(
+    ticks,
+    scale,
+    tickFormat,
+    maxStrSize,
+    minSpace,
+    onlyMainTicks,
+  );
 }

stories/hooks/LinearPrimaryExamples.stories.tsx

@@ -4,7 +4,6 @@ import { HorizontalExample, VerticalExample } from './TestAxis';
 
 export default {
   title: 'Hooks/static/useLinearPrimaryTicks',
-  component: HorizontalExample || VerticalExample,
 } as Meta;
 interface Props {
   domain: [number, number];

stories/hooks/LinearPrimaryTicks.stories.tsx

@@ -13,7 +13,6 @@ interface Props {
 
 export default {
   title: 'Hooks/useLinearPrimaryTicks',
-  component: AutomaticVerticalAxis || AutomaticHorizontalAxis,
   args: {
     minSize: 50,
     maxSize: 500,

stories/hooks/LogExamples.stories.tsx

@@ -4,7 +4,6 @@ import { HorizontalExample, VerticalExample } from './TestAxis';
 
 export default {
   title: 'Hooks/static/useLogTicks',
-  component: HorizontalExample || VerticalExample,
 } as Meta;
 
 interface Props {
@@ -17,6 +16,7 @@ export function HorizontalCentaines(props: Props) {
 HorizontalCentaines.args = {
   domain: [10, 100000],
   scientificNotation: false,
+  onlyMainTicks: false,
 };
 HorizontalCentaines.storyName = 'Horizontal positive powers';
 

stories/hooks/LogTicks.stories.tsx

@@ -13,14 +13,13 @@ interface Props {
 
 export default {
   title: 'Hooks/useLogTicks',
-
-  component: AutomaticVerticalAxis || AutomaticHorizontalAxis,
   args: {
     minSize: 50,
     maxSize: 500,
     minValue: 10,
     maxValue: 10000,
     speedAnimation: 0.75,
+    onlyMainTicks: false,
     scientificNotation: false,
   },
 } as Meta;

stories/hooks/TestAxis.tsx

@@ -6,7 +6,7 @@ import {
   ScaleLogarithmic,
   scaleTime,
 } from 'd3-scale';
-import React, { forwardRef, useMemo, useRef, useEffect, useState } from 'react';
+import { forwardRef, useMemo, useRef, useEffect, useState } from 'react';
 
 import { useLinearPrimaryTicks, useLogTicks, useTimeTicks } from '../../src';
 
@@ -17,6 +17,7 @@ interface BaseAxis {
 interface ScaleAxis<T> {
   scale: T;
   scientificNotation?: boolean;
+  onlyMainTicks?: boolean;
 }
 interface TickAxis {
   ticks: Ticks[];
@@ -148,13 +149,22 @@ function LogHorizontalAxis(
   props: HorizontalAxisProps<ScaleLogarithmic<number, number>> &
     HorizontalOrientation,
 ) {
-  const { scale, scientificNotation, orientation = 'top', ...other } = props;
+  const {
+    scale,
+    scientificNotation,
+    orientation = 'top',
+    onlyMainTicks = false,
+    ...other
+  } = props;
   const ref = useRef<SVGGElement>(null);
   const tickFormat = useMemo(
     () => (scientificNotation ? toExponential : undefined),
     [scientificNotation],
   );
-  const ticks = useLogTicks(scale, 'horizontal', ref, { tickFormat });
+  const ticks = useLogTicks(scale, 'horizontal', ref, {
+    tickFormat,
+    onlyMainTicks,
+  });
   if (orientation === 'top') {
     return <HorizontalAxisTop {...other} ticks={ticks} ref={ref} />;
   }
@@ -275,13 +285,22 @@ function LogVerticalAxis(
   props: VerticalAxisProps<ScaleLogarithmic<number, number>> &
     VerticalOrientation,
 ) {
-  const { scale, scientificNotation, orientation = 'left', ...other } = props;
+  const {
+    scale,
+    scientificNotation,
+    orientation = 'left',
+    onlyMainTicks = false,
+    ...other
+  } = props;
   const ref = useRef<SVGGElement>(null);
   const tickFormat = useMemo(
     () => (scientificNotation ? toExponential : undefined),
     [scientificNotation],
   );
-  const ticks = useLogTicks(scale, 'vertical', ref, { tickFormat });
+  const ticks = useLogTicks(scale, 'vertical', ref, {
+    tickFormat,
+    onlyMainTicks,
+  });
   if (orientation === 'left') {
     return <VerticalAxisLeft {...other} ticks={ticks} ref={ref} />;
   }
@@ -310,6 +329,7 @@ interface ExampleProps {
   domain: [number | Date, number | Date];
   type: 'linear' | 'log' | 'time';
   scientificNotation?: boolean;
+  onlyMainTicks?: boolean;
 }
 interface VerticalOrientation {
   orientation?: 'left' | 'right';
@@ -321,6 +341,7 @@ interface HorizontalOrientation {
 export function HorizontalExample({
   domain,
   scientificNotation = false,
+  onlyMainTicks = false,
   orientation,
   type,
 }: ExampleProps & HorizontalOrientation) {
@@ -357,6 +378,7 @@ export function HorizontalExample({
             y={width - 40}
             scale={scale}
             scientificNotation={scientificNotation}
+            onlyMainTicks={onlyMainTicks}
             width={width}
             type={type}
           />
@@ -370,6 +392,7 @@ export function VerticalExample({
   scientificNotation,
   orientation,
   type,
+  onlyMainTicks,
 }: ExampleProps & VerticalOrientation) {
   const [state, setState] = useState<VerticalState[]>([]);
   const scaleType = useMemo(() => {
@@ -404,6 +427,7 @@ export function VerticalExample({
             y={10}
             scale={scale}
             scientificNotation={scientificNotation}
+            onlyMainTicks={onlyMainTicks}
             height={height}
             type={type}
           />
@@ -421,6 +445,7 @@ interface Props {
   speedAnimation: number;
   type: 'linear' | 'log' | 'time';
   scientificNotation?: boolean;
+  onlyMainTicks?: boolean;
 }
 export function AutomaticHorizontalAxis({
   minSize,
@@ -429,6 +454,7 @@ export function AutomaticHorizontalAxis({
   maxValue,
   speedAnimation,
   scientificNotation = false,
+  onlyMainTicks = false,
   type,
 }: Props) {
   const [width, setWidth] = useState(minSize);
@@ -469,6 +495,7 @@ export function AutomaticHorizontalAxis({
           scale={scale}
           width={width}
           scientificNotation={scientificNotation}
+          onlyMainTicks={onlyMainTicks}
           type={type}
         />
       </svg>
@@ -483,6 +510,7 @@ export function AutomaticVerticalAxis({
   maxValue,
   speedAnimation,
   scientificNotation,
+  onlyMainTicks = false,
   type,
 }: Props) {
   const [height, setHeight] = useState(minSize);
@@ -525,6 +553,7 @@ export function AutomaticVerticalAxis({
           scale={scale}
           height={height}
           scientificNotation={scientificNotation}
+          onlyMainTicks={onlyMainTicks}
           type={type}
         />
       </svg>

stories/hooks/TimeExamples.stories.tsx

@@ -4,7 +4,6 @@ import { HorizontalExample, VerticalExample } from './TestAxis';
 
 export default {
   title: 'Hooks/static/useTimeTicks',
-  component: HorizontalExample || VerticalExample,
 } as Meta;
 
 interface Props {

stories/hooks/TimeTicks.stories.tsx

@@ -12,7 +12,6 @@ interface Props {
 
 export default {
   title: 'Hooks/useTimeTicks',
-  component: AutomaticVerticalAxis || AutomaticHorizontalAxis,
   args: {
     minSize: 50,
     maxSize: 500,