Skip to content
This repository has been archived by the owner on Aug 2, 2022. It is now read-only.

fix chart color #76

Merged
merged 2 commits into from
May 1, 2020
Merged

fix chart color #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59cbfd1
fix chart color
ylwu-amzn May 1, 2020
a11f4e7
remove unused code
ylwu-amzn May 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions public/pages/AnomalyCharts/components/FeatureChart/FeatureChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions public/pages/AnomalyCharts/containers/AnomaliesChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -343,6 +343,7 @@ export const AnomaliesChart = React.memo((props: AnomaliesChartProps) => {
end: moment(end).format(),
});
}}
theme={ANOMALY_CHART_THEME}
/>
<RectAnnotation
dataValues={disabledHistoryAnnotations(
Expand Down Expand Up @@ -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
Expand All @@ -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>
)}
Expand Down
41 changes: 20 additions & 21 deletions public/pages/AnomalyCharts/utils/anomalyChartUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -146,7 +147,7 @@ export const getAnomalySummary = (anomalies: any[]): AnomalySummary => {
export const disabledHistoryAnnotations = (
dateRange: DateRange,
detector?: Detector
) => {
): RectAnnotationDatum[] => {
if (!detector || !detector.disabledTime) {
return [];
}
Expand All @@ -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,
},
];
};
91 changes: 54 additions & 37 deletions public/pages/AnomalyCharts/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
3 changes: 1 addition & 2 deletions public/pages/DetectorResults/containers/AnomalyHistory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 />
Expand Down
5 changes: 2 additions & 3 deletions public/pages/DetectorResults/containers/AnomalyResultsLiveChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -202,7 +202,7 @@ export const AnomalyResultsLiveChart = (
/>
) : null}
<Chart>
<Settings />
<Settings theme={LIVE_ANOMALY_CHART_THEME} />
<LineAnnotation
id="annotationNow"
domainType={AnnotationDomainTypes.XDomain}
Expand Down Expand Up @@ -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>
Expand Down
9 changes: 9 additions & 0 deletions public/pages/DetectorResults/utils/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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],
},
},
];