From c8339307dcf257ef41bd5ddacc6ca53e97feea13 Mon Sep 17 00:00:00 2001 From: Yaliang <49084640+ylwu-amzn@users.noreply.github.com> Date: Thu, 30 Apr 2020 19:57:35 -0700 Subject: [PATCH] fix chart color (#76) * fix chart color * remove unused code --- .../components/FeatureChart/FeatureChart.tsx | 8 +- .../containers/AnomaliesChart.tsx | 5 +- .../AnomalyCharts/utils/anomalyChartUtils.ts | 41 ++++----- public/pages/AnomalyCharts/utils/constants.ts | 91 +++++++++++-------- .../containers/AnomalyHistory.tsx | 3 +- .../containers/AnomalyResultsLiveChart.tsx | 5 +- .../pages/DetectorResults/utils/constants.ts | 9 ++ 7 files changed, 93 insertions(+), 69 deletions(-) diff --git a/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx b/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx index 9c250e07..636dcf9a 100644 --- a/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx +++ b/public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx @@ -36,7 +36,10 @@ import { import { darkModeEnabled } from '../../../../utils/kibanaUtils'; import { prepareDataForChart } from '../../../utils/anomalyResultUtils'; import { CodeModal } from '../../../DetectorConfig/components/CodeModal/CodeModal'; -import { CHART_FIELDS, CHART_COLORS, FEATURE_CHART_THEME } from '../../utils/constants'; +import { + CHART_FIELDS, + FEATURE_CHART_THEME, +} from '../../utils/constants'; interface FeatureChartProps { feature: FeatureAttributes; @@ -134,7 +137,7 @@ export const FeatureChart = (props: FeatureChartProps) => { {props.feature.featureEnabled ? ( { yScaleType={ScaleType.Linear} xAccessor={CHART_FIELDS.PLOT_TIME} yAccessors={[CHART_FIELDS.DATA]} - color={[CHART_COLORS.FEATURE_DATA_COLOR]} data={featureData} /> diff --git a/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx b/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx index 09b3a867..d5a8d17c 100644 --- a/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx +++ b/public/pages/AnomalyCharts/containers/AnomaliesChart.tsx @@ -63,8 +63,8 @@ import { import { INITIAL_ANOMALY_SUMMARY, CHART_FIELDS, - CHART_COLORS, DATE_PICKER_QUICK_OPTIONS, + ANOMALY_CHART_THEME, } from '../utils/constants'; import { convertAlerts, @@ -343,6 +343,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => { end: moment(end).format(), }); }} + theme={ANOMALY_CHART_THEME} /> { yScaleType={ScaleType.Linear} xAccessor={CHART_FIELDS.PLOT_TIME} yAccessors={[CHART_FIELDS.CONFIDENCE]} - color={[CHART_COLORS.CONFIDENCE_COLOR]} data={zoomedAnomalies} /> { yScaleType={ScaleType.Linear} xAccessor={CHART_FIELDS.PLOT_TIME} yAccessors={[CHART_FIELDS.ANOMALY_GRADE]} - color={[CHART_COLORS.ANOMALY_GRADE_COLOR]} /> )} diff --git a/public/pages/AnomalyCharts/utils/anomalyChartUtils.ts b/public/pages/AnomalyCharts/utils/anomalyChartUtils.ts index ff6a4f84..4e6a23fd 100644 --- a/public/pages/AnomalyCharts/utils/anomalyChartUtils.ts +++ b/public/pages/AnomalyCharts/utils/anomalyChartUtils.ts @@ -21,6 +21,7 @@ import { AnomalySummary, } from '../../../models/interfaces'; import { dateFormatter, minuteDateFormatter } from '../../utils/helpers'; +import { RectAnnotationDatum } from '@elastic/charts'; export const getAlertsQuery = (monitorId: string, startTime: number) => { return { @@ -146,7 +147,7 @@ export const getAnomalySummary = (anomalies: any[]): AnomalySummary => { export const disabledHistoryAnnotations = ( dateRange: DateRange, detector?: Detector -) => { +): RectAnnotationDatum[] => { if (!detector || !detector.disabledTime) { return []; } @@ -155,25 +156,23 @@ export const disabledHistoryAnnotations = ( ? detector.enabledTime : dateRange.endDate.valueOf(); - if (startTime) { - const details = - detector.enabled && detector.enabledTime - ? `Detector was stopped from ${dateFormatter( - startTime - )} to ${dateFormatter(detector.enabledTime)}` - : `Detector was stopped from ${dateFormatter(startTime)} until now`; - const coordinateX0 = - startTime >= dateRange.startDate.valueOf() - ? startTime - : dateRange.startDate.valueOf(); - return [ - { - coordinates: { - x0: coordinateX0, - x1: endTime, - }, - details: details, + const details = + detector.enabled && detector.enabledTime + ? `Detector was stopped from ${dateFormatter( + startTime + )} to ${dateFormatter(detector.enabledTime)}` + : `Detector was stopped from ${dateFormatter(startTime)} until now`; + const coordinateX0 = + startTime >= dateRange.startDate.valueOf() + ? startTime + : dateRange.startDate.valueOf(); + return [ + { + coordinates: { + x0: coordinateX0, + x1: endTime, }, - ]; - } + details: details, + }, + ]; }; diff --git a/public/pages/AnomalyCharts/utils/constants.ts b/public/pages/AnomalyCharts/utils/constants.ts index 591e2183..5d1feab4 100644 --- a/public/pages/AnomalyCharts/utils/constants.ts +++ b/public/pages/AnomalyCharts/utils/constants.ts @@ -14,60 +14,77 @@ */ export const INITIAL_ANOMALY_SUMMARY = { - anomalyOccurrence: 0, - minAnomalyGrade: 0.0, - maxAnomalyGrade: 0.0, - minConfidence: 0.0, - maxConfidence: 0.0, - lastAnomalyOccurrence: '', + anomalyOccurrence: 0, + minAnomalyGrade: 0.0, + maxAnomalyGrade: 0.0, + minConfidence: 0.0, + maxConfidence: 0.0, + lastAnomalyOccurrence: '', }; - export enum ANOMALY_CHART_TITLE { - SAMPLE_ANOMALY_HISTORY = 'Sample anomaly history', - ANOMALY_HISTORY = 'Sample anomaly history', + SAMPLE_ANOMALY_HISTORY = 'Sample anomaly history', + ANOMALY_HISTORY = 'Sample anomaly history', } export enum CHART_FIELDS { - PLOT_TIME = 'plotTime', - ANOMALY_GRADE = 'anomalyGrade', - CONFIDENCE = 'confidence', - DATA = 'data', + PLOT_TIME = 'plotTime', + ANOMALY_GRADE = 'anomalyGrade', + CONFIDENCE = 'confidence', + DATA = 'data', } export enum CHART_COLORS { - ANOMALY_GRADE_COLOR = '#D13212', - FEATURE_DATA_COLOR = '#16191F', - CONFIDENCE_COLOR = '#017F75', + ANOMALY_GRADE_COLOR = '#D13212', + FEATURE_DATA_COLOR = '#16191F', + CONFIDENCE_COLOR = '#017F75', } -export const FEATURE_CHART_THEME = { +export const FEATURE_CHART_THEME = [ + { lineSeriesStyle: { - line: { - strokeWidth: 2, - visible: true, - opacity: 0.5, - }, - point: { - visible: true, - stroke: CHART_COLORS.FEATURE_DATA_COLOR, - }, + line: { + strokeWidth: 2, + visible: true, + opacity: 0.5, + }, + point: { + visible: true, + stroke: CHART_COLORS.FEATURE_DATA_COLOR, + }, }, -}; + }, + { + colors: { + vizColors: [CHART_COLORS.FEATURE_DATA_COLOR], + }, + }, +]; + +export const ANOMALY_CHART_THEME = [ + { + colors: { + vizColors: [ + CHART_COLORS.CONFIDENCE_COLOR, + CHART_COLORS.ANOMALY_GRADE_COLOR, + ], + }, + }, +]; export const DATE_PICKER_QUICK_OPTIONS = [ - { start: 'now-24h', end: 'now', label: 'last 24 hours' }, - { start: 'now-7d', end: 'now', label: 'last 7 days' }, - { start: 'now-30d', end: 'now', label: 'last 30 days' }, - { start: 'now-90d', end: 'now', label: 'last 90 days' }, + { start: 'now-24h', end: 'now', label: 'last 24 hours' }, + { start: 'now-7d', end: 'now', label: 'last 7 days' }, + { start: 'now-30d', end: 'now', label: 'last 30 days' }, + { start: 'now-90d', end: 'now', label: 'last 90 days' }, - { start: 'now/d', end: 'now', label: 'Today' }, - { start: 'now/w', end: 'now', label: 'Week to date' }, - { start: 'now/M', end: 'now', label: 'Month to date' }, - { start: 'now/y', end: 'now', label: 'Year to date' }, + { start: 'now/d', end: 'now', label: 'Today' }, + { start: 'now/w', end: 'now', label: 'Week to date' }, + { start: 'now/M', end: 'now', label: 'Month to date' }, + { start: 'now/y', end: 'now', label: 'Year to date' }, ]; export enum LIVE_CHART_CONFIG { - REFRESH_INTERVAL_IN_SECONDS = 30 * 1000, //poll anomaly result every 30 seconds - MONITORING_INTERVALS = 60, + REFRESH_INTERVAL_IN_SECONDS = 30 * 1000, //poll anomaly result every 30 seconds + MONITORING_INTERVALS = 60, } diff --git a/public/pages/DetectorResults/containers/AnomalyHistory.tsx b/public/pages/DetectorResults/containers/AnomalyHistory.tsx index a41ff8e4..dc2f7f0f 100644 --- a/public/pages/DetectorResults/containers/AnomalyHistory.tsx +++ b/public/pages/DetectorResults/containers/AnomalyHistory.tsx @@ -35,7 +35,7 @@ import { getAnomalyResultsWithDateRange, filterWithDateRange, } from '../../utils/anomalyResultUtils'; -import { get, isEmpty } from 'lodash'; +import { get } from 'lodash'; import { AnomalyResultsTable } from './AnomalyResultsTable'; import { AnomaliesChart } from '../../AnomalyCharts/containers/AnomaliesChart'; import { FeatureBreakDown } from '../../AnomalyCharts/containers/FeatureBreakDown'; @@ -161,7 +161,6 @@ export const AnomalyHistory = (props: AnomalyHistoryProps) => { )} unit={get(props.detector, 'detectionInterval.period.unit')} monitor={props.monitor} - noFeature={isEmpty(props.detector.featureAttributes)} /> {renderTabs()} diff --git a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx index 51f42fc8..4ded7d79 100644 --- a/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx +++ b/public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx @@ -47,11 +47,11 @@ import { } from '../../utils/anomalyResultUtils'; import { get } from 'lodash'; import { - CHART_COLORS, CHART_FIELDS, LIVE_CHART_CONFIG, } from '../../AnomalyCharts/utils/constants'; import { getFloorPlotTime } from '../../../../server/utils/helpers'; +import { LIVE_ANOMALY_CHART_THEME } from '../utils/constants'; interface AnomalyResultsLiveChartProps { detector: Detector; @@ -202,7 +202,7 @@ export const AnomalyResultsLiveChart = ( /> ) : null} - + diff --git a/public/pages/DetectorResults/utils/constants.ts b/public/pages/DetectorResults/utils/constants.ts index 26c6bee5..fafbe1b0 100644 --- a/public/pages/DetectorResults/utils/constants.ts +++ b/public/pages/DetectorResults/utils/constants.ts @@ -17,6 +17,7 @@ import { SORT_DIRECTION, AD_DOC_FIELDS, } from '../../../../server/utils/constants'; +import { CHART_COLORS } from '../../AnomalyCharts/utils/constants'; export const DEFAULT_QUERY_PARAMS = { from: 0, @@ -30,3 +31,11 @@ export enum ANOMALY_HISTORY_TABS { FEATURE_BREAKDOWN = 'featureBreakdown', ANOMALY_OCCURRENCE = 'anomalyOccurrence', } + +export const LIVE_ANOMALY_CHART_THEME = [ + { + colors: { + vizColors: [CHART_COLORS.ANOMALY_GRADE_COLOR], + }, + }, +];