fix: color mapping provide default colors when none exist (#4008)

Author: ChitlangeSahas

src/visualization/types/Graph/view.tsx

@@ -12,6 +12,7 @@ import {
   lineTransform,
   LineLayerConfig,
 } from '@influxdata/giraffe'
+import memoizeOne from 'memoize-one'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
@@ -196,12 +197,13 @@ const XYPlot: FC<Props> = ({
   let colorMapping = null
 
   if (isFlagEnabled('graphColorMapping')) {
+    const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
     const [, fillColumnMap] = createGroupIDColumn(result.table, groupKey)
     const {
       colorMappingForGiraffe,
       colorMappingForIDPE,
       needsToSaveToIDPE,
-    } = getColorMappingObjects(fillColumnMap, properties)
+    } = memoizedGetColorMappingObjects(fillColumnMap, properties)
     colorMapping = colorMappingForGiraffe
 
     // when the view is in a dashboard cell, and there is a need to save to IDPE, save it.

src/visualization/utils/colorMappingUtils.ts

@@ -1,6 +1,7 @@
 import {XYViewProperties} from 'src/types'
 import {addedDiff, deletedDiff} from 'deep-object-diff'
 import {getNominalColorScale} from '@influxdata/giraffe'
+import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 
 /**
  * Evaluates whether mappings need to be updated
@@ -158,8 +159,9 @@ export const generateSeriesToColorHex = (
   const cgMap = {...columnGroupMap}
   cgMap.mappings.forEach((graphLine, colorIndex) => {
     const id = getSeriesId(graphLine, columnGroupMap.columnKeys)
-    const colors = properties.colors.map(value => value.hex)
-    const fillScale = getNominalColorScale(columnGroupMap, colors)
+    const colors = properties.colors ?? DEFAULT_LINE_COLORS
+    const colorsHexArray = colors.map(value => value.hex)
+    const fillScale = getNominalColorScale(columnGroupMap, colorsHexArray)
     seriesToColorHex[id] = fillScale(colorIndex)
   })