From ed446ca3f471e573975861bf5a4ba4ee3c5ba0aa Mon Sep 17 00:00:00 2001 From: asalem Date: Tue, 7 Apr 2020 08:27:26 -0700 Subject: [PATCH 1/3] fix(ui): fixed dark lines in checks --- http/swagger.yml | 2 +- ui/src/shared/components/CheckPlot.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/http/swagger.yml b/http/swagger.yml index ed35977e285..b88f29f02db 100644 --- a/http/swagger.yml +++ b/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 diff --git a/ui/src/shared/components/CheckPlot.tsx b/ui/src/shared/components/CheckPlot.tsx index 96bf8b408d7..ecb11523f36 100644 --- a/ui/src/shared/components/CheckPlot.tsx +++ b/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 = ({ 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 = ({ y: Y_COLUMN, fill: groupKey, interpolation: 'linear', - colors, + colors: colorHexes, }, { type: 'custom', From 9c1ac6126fa958d60256c9654a42365f01b5a951 Mon Sep 17 00:00:00 2001 From: asalem Date: Tue, 7 Apr 2020 08:32:07 -0700 Subject: [PATCH 2/3] chore(ui): updated CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3517b26bc59..353d7ce468a 100644 --- a/CHANGELOG.md +++ b/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 From c9a9bfc9fcb96438f0195c3a6ec7c4e1307302ea Mon Sep 17 00:00:00 2001 From: asalem Date: Tue, 7 Apr 2020 09:33:31 -0700 Subject: [PATCH 3/3] fix(ui): updated to normalize default color selection, fixed TS errors and removed unused components --- .../components/view_options/CheckOptions.tsx | 49 ------------------- .../view_options/OptionsSwitcher.tsx | 3 -- ui/src/views/helpers/index.ts | 4 +- 3 files changed, 2 insertions(+), 54 deletions(-) delete mode 100644 ui/src/timeMachine/components/view_options/CheckOptions.tsx diff --git a/ui/src/timeMachine/components/view_options/CheckOptions.tsx b/ui/src/timeMachine/components/view_options/CheckOptions.tsx deleted file mode 100644 index a48825c51c2..00000000000 --- a/ui/src/timeMachine/components/view_options/CheckOptions.tsx +++ /dev/null @@ -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 = ({properties: {colors}, onSetColors}) => { - return ( - - - - - - ) -} - -const mdtp = { - onSetColors: setColorHexes, -} - -export default connect<{}, DispatchProps>( - null, - mdtp -)(CheckOptions) diff --git a/ui/src/timeMachine/components/view_options/OptionsSwitcher.tsx b/ui/src/timeMachine/components/view_options/OptionsSwitcher.tsx index db916a9d0e3..72ed9fe42f3 100644 --- a/ui/src/timeMachine/components/view_options/OptionsSwitcher.tsx +++ b/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 { return case 'scatter': return - case 'check': - return default: return
} diff --git a/ui/src/views/helpers/index.ts b/ui/src/views/helpers/index.ts index 2775a3b614e..dbc2ad41adf 100644 --- a/ui/src/views/helpers/index.ts +++ b/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 => ({ @@ -308,7 +308,7 @@ const NEW_VIEW_CREATORS = { }, }, ], - colors: NINETEEN_EIGHTY_FOUR, + colors: DEFAULT_LINE_COLORS as Color[], }, }), custom: (): NewView => ({