docs: update docs

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,
+  onlyMain: false,
 };
 HorizontalCentaines.storyName = 'Horizontal positive powers';
 

stories/hooks/LogTicks.stories.tsx

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

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;
+  onlyMain?: 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',
+    onlyMain = 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,
+    onlyMain,
+  });
   if (orientation === 'top') {
     return <HorizontalAxisTop {...other} ticks={ticks} ref={ref} />;
   }
@@ -275,13 +285,19 @@ function LogVerticalAxis(
   props: VerticalAxisProps<ScaleLogarithmic<number, number>> &
     VerticalOrientation,
 ) {
-  const { scale, scientificNotation, orientation = 'left', ...other } = props;
+  const {
+    scale,
+    scientificNotation,
+    orientation = 'left',
+    onlyMain = 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, onlyMain });
   if (orientation === 'left') {
     return <VerticalAxisLeft {...other} ticks={ticks} ref={ref} />;
   }
@@ -310,6 +326,7 @@ interface ExampleProps {
   domain: [number | Date, number | Date];
   type: 'linear' | 'log' | 'time';
   scientificNotation?: boolean;
+  onlyMain?: boolean;
 }
 interface VerticalOrientation {
   orientation?: 'left' | 'right';
@@ -321,6 +338,7 @@ interface HorizontalOrientation {
 export function HorizontalExample({
   domain,
   scientificNotation = false,
+  onlyMain = false,
   orientation,
   type,
 }: ExampleProps & HorizontalOrientation) {
@@ -357,6 +375,7 @@ export function HorizontalExample({
             y={width - 40}
             scale={scale}
             scientificNotation={scientificNotation}
+            onlyMain={onlyMain}
             width={width}
             type={type}
           />
@@ -370,6 +389,7 @@ export function VerticalExample({
   scientificNotation,
   orientation,
   type,
+  onlyMain,
 }: ExampleProps & VerticalOrientation) {
   const [state, setState] = useState<VerticalState[]>([]);
   const scaleType = useMemo(() => {
@@ -404,6 +424,7 @@ export function VerticalExample({
             y={10}
             scale={scale}
             scientificNotation={scientificNotation}
+            onlyMain={onlyMain}
             height={height}
             type={type}
           />
@@ -421,6 +442,7 @@ interface Props {
   speedAnimation: number;
   type: 'linear' | 'log' | 'time';
   scientificNotation?: boolean;
+  onlyMain?: boolean;
 }
 export function AutomaticHorizontalAxis({
   minSize,
@@ -429,6 +451,7 @@ export function AutomaticHorizontalAxis({
   maxValue,
   speedAnimation,
   scientificNotation = false,
+  onlyMain = false,
   type,
 }: Props) {
   const [width, setWidth] = useState(minSize);
@@ -469,6 +492,7 @@ export function AutomaticHorizontalAxis({
           scale={scale}
           width={width}
           scientificNotation={scientificNotation}
+          onlyMain={onlyMain}
           type={type}
         />
       </svg>
@@ -483,6 +507,7 @@ export function AutomaticVerticalAxis({
   maxValue,
   speedAnimation,
   scientificNotation,
+  onlyMain = false,
   type,
 }: Props) {
   const [height, setHeight] = useState(minSize);
@@ -525,6 +550,7 @@ export function AutomaticVerticalAxis({
           scale={scale}
           height={height}
           scientificNotation={scientificNotation}
+          onlyMain={onlyMain}
           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,