fix: do not plot undefined/NaN

Author: tannerlinsley

docs/src/pages/index.js

@@ -113,7 +113,7 @@ const Home = props => {
                       <div className="leading-none">
                         <sup>
                           * Okay, there is a time and place for them, but not
-                          often and certainlly not here 😜.
+                          often and certainly not here 😜.
                         </sup>
                       </div>
                     </div>

src/components/Chart.tsx

@@ -669,6 +669,10 @@ function ChartInner<TDatum>({
         throw new Error('Invalid elementType')
       })()
 
+      if (primaryAxis.isInvalid || secondaryAxis.isInvalid) {
+        return null
+      }
+
       return (
         <Component
           key={axisId ?? '__default__'}

src/seriesTypes/Line.tsx

@@ -2,7 +2,7 @@ import { area, line } from 'd3-shape'
 import React from 'react'
 
 import { Axis, Series, Datum } from '../types'
-import { translate } from '../utils/Utils'
+import { isDefined, translate } from '../utils/Utils'
 import useChartContext from '../utils/chartContext'
 //
 import { monotoneX } from '../utils/curveMonotone'
@@ -36,30 +36,35 @@ export default function Line<TDatum>({
       {allSeries.map((series, i) => {
         const style = getSeriesStatusStyle(series, focusedDatum)
 
-        const areaPath =
-          secondaryAxis.elementType === 'area'
-            ? area<Datum<TDatum>>(
-                datum => getPrimary(datum, primaryAxis) ?? NaN,
-                datum =>
-                  clampPxToAxis(
-                    getSecondaryStart(datum, secondaryAxis) ?? NaN,
-                    secondaryAxis
-                  ),
-                datum =>
-                  clampPxToAxis(
-                    getSecondary(datum, secondaryAxis) ?? NaN,
-                    secondaryAxis
-                  )
-              ).curve(curve)(series.datums) ?? undefined
-            : undefined
+        let areaPath: null | string = null
+
+        if (secondaryAxis.elementType === 'area') {
+          const _x = (datum: Datum<TDatum>) => getPrimary(datum, primaryAxis)
+          const _y1 = (datum: Datum<TDatum>) =>
+            clampPxToAxis(
+              getSecondaryStart(datum, secondaryAxis),
+              secondaryAxis
+            )
+          const _y2 = (datum: Datum<TDatum>) =>
+            clampPxToAxis(getSecondary(datum, secondaryAxis), secondaryAxis)
+          const areaFn = area<Datum<TDatum>>(_x, _y1, _y2).curve(curve)
+
+          areaFn.defined(datum =>
+            [_x(datum), _y1(datum), _y2(datum)].every(isDefined)
+          )
+
+          areaPath = areaFn(series.datums)
+        }
+
+        const _x = (datum: Datum<TDatum>) => getPrimary(datum, primaryAxis)
+        const _y = (datum: Datum<TDatum>) => getSecondary(datum, secondaryAxis)
+        const lineFn = line<Datum<TDatum>>(_x, _y).curve(curve)
+        lineFn.defined(datum => [_x(datum), _y(datum)].every(isDefined))
 
         const linePath =
           secondaryAxis.elementType === 'area' ||
           secondaryAxis.elementType === 'line'
-            ? line<Datum<TDatum>>(
-                datum => getPrimary(datum, primaryAxis) ?? NaN,
-                datum => getSecondary(datum, secondaryAxis) ?? NaN
-              ).curve(curve)(series.datums) ?? undefined
+            ? lineFn(series.datums) ?? undefined
             : undefined
 
         const showDatumElements =
@@ -112,8 +117,8 @@ export default function Line<TDatum>({
                   ref={el => {
                     datum.element = el
                   }}
-                  cx={getX(datum, primaryAxis, secondaryAxis)}
-                  cy={getY(datum, primaryAxis, secondaryAxis)}
+                  cx={getX(datum, primaryAxis, secondaryAxis) || 0}
+                  cy={getY(datum, primaryAxis, secondaryAxis) || 0}
                   style={{
                     // @ts-ignore
                     r: radius,

src/types.ts

@@ -368,6 +368,7 @@ export type AxisTime<TDatum> = Omit<
   'format'
 > & {
   isPrimary?: boolean
+  isInvalid: boolean
   axisFamily: 'time'
   scale: ScaleTime<number, number, never>
   outerScale: ScaleTime<number, number, never>
@@ -386,6 +387,7 @@ export type AxisLinear<TDatum> = Omit<
   'format'
 > & {
   isPrimary?: boolean
+  isInvalid: boolean
   axisFamily: 'linear'
   scale: ScaleLinear<number, number, never>
   outerScale: ScaleLinear<number, number, never>
@@ -404,6 +406,7 @@ export type AxisBand<TDatum> = Omit<
   'format'
 > & {
   isPrimary?: boolean
+  isInvalid: boolean
   axisFamily: 'band'
   scale: ScaleBand<any>
   outerScale: ScaleBand<any>

src/utils/Utils.ts

@@ -70,3 +70,7 @@ function normalizeColor(
     fill: style.fill || style.color || defaults.fill || defaults.color,
   }
 }
+
+export function isDefined(num: number) {
+  return typeof num === 'number' && !Number.isNaN(num)
+}

src/utils/buildAxis.linear.ts

@@ -108,6 +108,8 @@ function buildTimeAxis<TDatum>(
 ): AxisTime<TDatum> {
   const scaleFn = options.scaleType === 'localTime' ? scaleTime : scaleUtc
 
+  let isInvalid = false
+
   // Now set the range
   const scale = scaleFn(range)
 
@@ -140,15 +142,15 @@ function buildTimeAxis<TDatum>(
   }
 
   if (minValue === undefined || maxValue === undefined) {
-    console.info({
+    console.info('Invalid scale min/max was detect for a chart:', {
       options,
       series,
       range,
       values: allDatums.map(d =>
         isPrimary ? d.primaryValue : d.secondaryValue
       ),
     })
-    throw new Error('Invalid scale min/max')
+    isInvalid = true
   }
 
   // Set the domain
@@ -200,6 +202,7 @@ function buildTimeAxis<TDatum>(
 
   return {
     ...options,
+    isInvalid,
     axisFamily: 'time',
     isVertical,
     scale,
@@ -222,6 +225,8 @@ function buildLinearAxis<TDatum>(
 ): AxisLinear<TDatum> {
   const scale = options.scaleType === 'log' ? scaleLog() : scaleLinear()
 
+  let isInvalid = false
+
   if (options.stacked) {
     stackSeries(series, options)
   }
@@ -279,15 +284,18 @@ function buildLinearAxis<TDatum>(
   }
 
   if (minValue === undefined || maxValue === undefined) {
-    console.info({
+    isInvalid = true
+    console.info('Invalid scale min/max', {
       options,
       series,
       range,
       values: allDatums.map(d =>
         isPrimary ? d.primaryValue : d.secondaryValue
       ),
     })
-    throw new Error('Invalid scale min/max')
+    minValue = minValue ?? 0
+    maxValue = maxValue ?? 0
+    // throw new Error('Invalid scale min/max')
   }
 
   // Set the domain
@@ -340,6 +348,7 @@ function buildLinearAxis<TDatum>(
 
   return {
     ...options,
+    isInvalid,
     axisFamily: 'linear',
     isVertical,
     scale,
@@ -361,6 +370,8 @@ function buildBandAxis<TDatum>(
 ): AxisBand<TDatum> {
   series = series.filter(d => d.secondaryAxisId === options.id)
 
+  let isInvalid = false
+
   const domain = Array.from(
     new Set(
       series
@@ -421,6 +432,7 @@ function buildBandAxis<TDatum>(
 
   return {
     ...options,
+    isInvalid,
     axisFamily: 'band',
     isVertical,
     scale,