fix: color indexing

TanStack · Jul 25, 2021 · e0e985c · e0e985c · vercel · Jul 25, 2021
1 parent 52b871b
commit e0e985c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/src/components/Chart.tsx b/src/components/Chart.tsx
@@ -526,7 +526,7 @@ function ChartInner<TDatum>({
       const base = {
         color:
           getOptions().defaultColors[
-            series.index % (getOptions().defaultColors.length - 1)
+            series.index % getOptions().defaultColors.length
           ],
       }
 
@@ -544,7 +544,7 @@ function ChartInner<TDatum>({
         ...series[datum.seriesIndex]?.style,
         color:
           getOptions().defaultColors[
-            datum.seriesIndex % (getOptions().defaultColors.length - 1)
+            datum.seriesIndex % getOptions().defaultColors.length
           ],
       }
 

diff --git a/src/components/Voronoi.tsx b/src/components/Voronoi.tsx
@@ -71,7 +71,10 @@ function PrimaryVoronoi<TDatum>({
 
   return React.useMemo(() => {
     const columns = series[0].datums
-      .filter(datum => {
+      .filter((datum, i, all) => {
+        if (all.findIndex(d => d.primaryValue === datum.primaryValue) !== i) {
+          return false
+        }
         const primaryValue = datum.primaryValue
         return primaryValue !== 'undefined' && primaryValue !== null
       })
@@ -203,8 +206,8 @@ function PrimaryVoronoi<TDatum>({
       >
         {columns.map((column, i) => {
           return (
-            <React.Fragment key={`${column.primaryPx}_${i}`}>
-              {column.datumBoundaries.map(datumBoundary => {
+            <g key={`${column.primaryPx}_${i}`}>
+              {column.datumBoundaries.map((datumBoundary, i) => {
                 const x1 = !primaryAxis.isVertical
                   ? column.primaryStart
                   : datumBoundary.secondaryStart
@@ -229,7 +232,7 @@ function PrimaryVoronoi<TDatum>({
                 return (
                   <rect
                     {...{
-                      key: `${column.primaryPx}_${datumBoundary.datum.seriesIndex}`,
+                      key: i,
                       x,
                       y,
                       width,
@@ -248,7 +251,7 @@ function PrimaryVoronoi<TDatum>({
                   />
                 )
               })}
-            </React.Fragment>
+            </g>
           )
         })}
       </g>