fix(ui): fixed dark lines in checks (#17651)

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### Bug Fixes
 
 1. [17612](https://github.com/influxdata/influxdb/pull/17612): Fix card size and layout jank in dashboards index view
+1. [17651](https://github.com/influxdata/influxdb/pull/17651): Fix check graph font and lines defaulting to black causing graph to be unreadable
 
 ### UI Improvements
 

http/swagger.yml

@@ -8872,7 +8872,7 @@ components:
           description: Colors define color encoding of data into a visualization
           type: array
           items:
-            type: string
+            $ref: "#/components/schemas/DashboardColor"
     Axes:
       description: The viewport for a View's visualizations
       type: object

ui/src/shared/components/CheckPlot.tsx

@@ -16,6 +16,7 @@ import {getFormatter, filterNoisyColumns} from 'src/shared/utils/vis'
 // Constants
 import {VIS_THEME} from 'src/shared/constants'
 import {INVALID_DATA_COPY} from 'src/shared/copy/cell'
+import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 
 // Types
 import {
@@ -100,6 +101,11 @@ const CheckPlot: FunctionComponent<Props> = ({
 
   const yTicks = thresholdValues.length ? thresholdValues : null
 
+  const colorHexes =
+    colors && colors.length
+      ? colors.map(c => c.hex)
+      : DEFAULT_LINE_COLORS.map(c => c.hex)
+
   const config: Config = {
     ...VIS_THEME,
     table,
@@ -119,7 +125,7 @@ const CheckPlot: FunctionComponent<Props> = ({
         y: Y_COLUMN,
         fill: groupKey,
         interpolation: 'linear',
-        colors,
+        colors: colorHexes,
       },
       {
         type: 'custom',

ui/src/timeMachine/components/view_options/CheckOptions.tsx

@@ -1,49 +0,0 @@
-// Libraries
-import React, {FC} from 'react'
-import {connect} from 'react-redux'
-import {Form, Grid} from '@influxdata/clockface'
-
-// Components
-import HexColorSchemeDropdown from 'src/shared/components/HexColorSchemeDropdown'
-
-// Actions
-import {setColorHexes} from 'src/timeMachine/actions'
-
-// Constants
-import {GIRAFFE_COLOR_SCHEMES} from 'src/shared/constants'
-
-// Types
-import {CheckViewProperties} from 'src/types'
-
-interface OwnProps {
-  properties: CheckViewProperties
-}
-
-interface DispatchProps {
-  onSetColors: typeof setColorHexes
-}
-
-type Props = OwnProps & DispatchProps
-
-const CheckOptions: FC<Props> = ({properties: {colors}, onSetColors}) => {
-  return (
-    <Grid.Column>
-      <Form.Element label="Color Scheme">
-        <HexColorSchemeDropdown
-          colorSchemes={GIRAFFE_COLOR_SCHEMES}
-          selectedColorScheme={colors}
-          onSelectColorScheme={onSetColors}
-        />
-      </Form.Element>
-    </Grid.Column>
-  )
-}
-
-const mdtp = {
-  onSetColors: setColorHexes,
-}
-
-export default connect<{}, DispatchProps>(
-  null,
-  mdtp
-)(CheckOptions)

ui/src/timeMachine/components/view_options/OptionsSwitcher.tsx

@@ -9,7 +9,6 @@ import TableOptions from 'src/timeMachine/components/view_options/TableOptions'
 import HistogramOptions from 'src/timeMachine/components/view_options/HistogramOptions'
 import HeatmapOptions from 'src/timeMachine/components/view_options/HeatmapOptions'
 import ScatterOptions from 'src/timeMachine/components/view_options/ScatterOptions'
-import CheckOptions from 'src/timeMachine/components/view_options/CheckOptions'
 
 // Types
 import {View, NewView} from 'src/types'
@@ -44,8 +43,6 @@ class OptionsSwitcher extends PureComponent<Props> {
         return <HeatmapOptions {...view.properties} />
       case 'scatter':
         return <ScatterOptions {...view.properties} />
-      case 'check':
-        return <CheckOptions properties={view.properties} />
       default:
         return <div />
     }

ui/src/views/helpers/index.ts

@@ -281,7 +281,7 @@ const NEW_VIEW_CREATORS = {
           },
         },
       ],
-      colors: NINETEEN_EIGHTY_FOUR,
+      colors: DEFAULT_LINE_COLORS as Color[],
     },
   }),
   deadman: (): NewView<CheckViewProperties> => ({
@@ -308,7 +308,7 @@ const NEW_VIEW_CREATORS = {
           },
         },
       ],
-      colors: NINETEEN_EIGHTY_FOUR,
+      colors: DEFAULT_LINE_COLORS as Color[],
     },
   }),
   custom: (): NewView<TableViewProperties> => ({