fix chart color (#76)

* fix chart color * remove unused code
opendistro-for-elasticsearch · May 1, 2020 · c833930 · c833930
1 parent debf408
commit c833930
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 69 deletions.
diff --git 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) => {
             <Settings
               showLegend
               legendPosition={Position.Right}
-              theme={[FEATURE_CHART_THEME]}
+              theme={FEATURE_CHART_THEME}
             />
             {props.feature.featureEnabled ? (
               <RectAnnotation
@@ -162,7 +165,6 @@ export const FeatureChart = (props: FeatureChartProps) => {
               yScaleType={ScaleType.Linear}
               xAccessor={CHART_FIELDS.PLOT_TIME}
               yAccessors={[CHART_FIELDS.DATA]}
-              color={[CHART_COLORS.FEATURE_DATA_COLOR]}
               data={featureData}
             />
           </Chart>

diff --git 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}
                     />
                     <RectAnnotation
                       dataValues={disabledHistoryAnnotations(
@@ -384,7 +385,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
                       yScaleType={ScaleType.Linear}
                       xAccessor={CHART_FIELDS.PLOT_TIME}
                       yAccessors={[CHART_FIELDS.CONFIDENCE]}
-                      color={[CHART_COLORS.CONFIDENCE_COLOR]}
                       data={zoomedAnomalies}
                     />
                     <LineSeries
@@ -395,7 +395,6 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
                       yScaleType={ScaleType.Linear}
                       xAccessor={CHART_FIELDS.PLOT_TIME}
                       yAccessors={[CHART_FIELDS.ANOMALY_GRADE]}
-                      color={[CHART_COLORS.ANOMALY_GRADE_COLOR]}
                     />
                   </Chart>
                 )}

diff --git 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
@@ -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
@@ -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)}
       />
       <EuiTabs>{renderTabs()}</EuiTabs>
       <EuiSpacer />

diff --git 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}
               <Chart>
-                <Settings />
+                <Settings theme={LIVE_ANOMALY_CHART_THEME} />
                 <LineAnnotation
                   id="annotationNow"
                   domainType={AnnotationDomainTypes.XDomain}
@@ -230,7 +230,6 @@ export const AnomalyResultsLiveChart = (
                   yScaleType={ScaleType.Linear}
                   xAccessor={CHART_FIELDS.PLOT_TIME}
                   yAccessors={[CHART_FIELDS.ANOMALY_GRADE]}
-                  color={[CHART_COLORS.ANOMALY_GRADE_COLOR]}
                 />
               </Chart>
             </EuiFlexItem>

diff --git 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],
+    },
+  },
+];