fix: avoid duplicate keys in ticks

Closes: #437
zakodium-oss · Nov 1, 2022 · cbd1391 · cbd1391
1 parent 34892fb
commit cbd1391
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "d3-shape": "^3.1.0",
     "immer": "^9.0.16",
     "ml-distance-euclidean": "^2.0.0",
-    "react-d3-utils": "^0.6.0"
+    "react-d3-utils": "^0.6.1"
   },
   "volta": {
     "node": "16.18.0"

diff --git a/src/components/Axis/Ticks.tsx b/src/components/Axis/Ticks.tsx
@@ -48,8 +48,7 @@ export function Ticks(props: Omit<TicksProps, 'children'>) {
     ...otherProps
   } = props;
 
-  // Primary Ticks
-  let elements: Array<JSX.Element | null> = primaryTicks.map((tick) => {
+  const primaryTickElements = primaryTicks.map((tick) => {
     const { line, text } = getPositions(tick.position);
     return (
       <Tick
@@ -64,15 +63,15 @@ export function Ticks(props: Omit<TicksProps, 'children'>) {
     );
   });
 
+  let secondaryTickElements: Array<JSX.Element | null> = [];
   if (secondaryTickLength !== 0) {
     // generate secondaryTicks according to the density of primaryTicks
     const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0;
     const mainTicksDensity = range / primaryTicks.length;
     const density = mainTicksDensity < 50 ? 5 : 10;
     const secondaryTicks = scale?.ticks(primaryTicks.length * density) || [];
 
-    // add secondaryTicks to the elements array
-    const secElements =
+    secondaryTickElements =
       secondaryTicks.map((tick) => {
         // exclude the main ticks
         if (primaryTicks.map((tick) => tick.position).includes(scale(tick))) {
@@ -90,9 +89,13 @@ export function Ticks(props: Omit<TicksProps, 'children'>) {
           />
         );
       }) || [];
-    elements = [...secElements, ...elements];
   }
-  return <>{elements}</>;
+  return (
+    <>
+      {secondaryTickElements}
+      {primaryTickElements}
+    </>
+  );
 }
 
 export function Tick(props: TickProps) {