From 83065ff13b3d418d4d9151182358ff42a23e10dc Mon Sep 17 00:00:00 2001 From: kpiljoong Date: Wed, 1 May 2019 17:33:14 +0900 Subject: [PATCH] feat(cloudwatch): add support for yAxis to graph Support setting for the y-axis on a graph: min, max, label, and showUnits. Fixes #2385 --- packages/@aws-cdk/aws-cloudwatch/lib/graph.ts | 44 ++++------------- packages/@aws-cdk/aws-cloudwatch/lib/index.ts | 1 + packages/@aws-cdk/aws-cloudwatch/lib/yaxis.ts | 49 +++++++++++++++++++ .../aws-cloudwatch/test/test.graphs.ts | 47 +++++++++++++++++- 4 files changed, 106 insertions(+), 35 deletions(-) create mode 100644 packages/@aws-cdk/aws-cloudwatch/lib/yaxis.ts diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts index fb28630a4bae3..a80db60c5f7b3 100644 --- a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts +++ b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts @@ -3,6 +3,7 @@ import { Alarm } from "./alarm"; import { Metric } from "./metric"; import { parseStatistic } from './util.statistic'; import { ConcreteWidget } from "./widget"; +import { YAxis } from "./yaxis"; /** * Basic properties for widgets that display metrics @@ -45,11 +46,9 @@ export interface AlarmWidgetProps extends MetricWidgetProps { readonly alarm: Alarm; /** - * Range of left Y axis - * - * @default 0..automatic + * Left Y axis */ - readonly leftAxisRange?: YAxisRange; + readonly leftYAxis?: YAxis; } /** @@ -78,7 +77,7 @@ export class AlarmWidget extends ConcreteWidget { alarms: [this.props.alarm.alarmArn] }, yAxis: { - left: this.props.leftAxisRange !== undefined ? this.props.leftAxisRange : { min: 0 } + left: this.props.leftYAxis !== undefined ? this.props.leftYAxis : { min: 0 } } } }]; @@ -115,18 +114,14 @@ export interface GraphWidgetProps extends MetricWidgetProps { readonly stacked?: boolean; /** - * Range of left Y axis - * - * @default 0..automatic + * Left Y axis */ - readonly leftAxisRange?: YAxisRange; + readonly leftYAxis?: YAxis; /** - * Range of right Y axis - * - * @default 0..automatic + * Right Y axis */ - readonly rightAxisRange?: YAxisRange; + readonly rightYAxis?: YAxis; } /** @@ -158,8 +153,8 @@ export class GraphWidget extends ConcreteWidget { (this.props.rightAnnotations || []).map(mapAnnotation('right'))) }, yAxis: { - left: this.props.leftAxisRange !== undefined ? this.props.leftAxisRange : { min: 0 }, - right: this.props.rightAxisRange !== undefined ? this.props.rightAxisRange : { min: 0 }, + left: this.props.leftYAxis !== undefined ? this.props.leftYAxis : { min: 0 }, + right: this.props.rightYAxis !== undefined ? this.props.rightYAxis : { min: 0 }, } } }]; @@ -204,25 +199,6 @@ export class SingleValueWidget extends ConcreteWidget { } } -/** - * A minimum and maximum value for either the left or right Y axis - */ -export interface YAxisRange { - /** - * The minimum value - * - * @default Automatic - */ - readonly min?: number; - - /** - * The maximum value - * - * @default Automatic - */ - readonly max?: number; -} - /** * Horizontal annotation to be added to a graph */ diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/index.ts b/packages/@aws-cdk/aws-cloudwatch/lib/index.ts index 5940a823ca866..e015d833e3b3f 100644 --- a/packages/@aws-cdk/aws-cloudwatch/lib/index.ts +++ b/packages/@aws-cdk/aws-cloudwatch/lib/index.ts @@ -5,6 +5,7 @@ export * from './layout'; export * from './metric'; export * from './text'; export * from './widget'; +export * from './yaxis'; // AWS::CloudWatch CloudFormation Resources: export * from './cloudwatch.generated'; diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/yaxis.ts b/packages/@aws-cdk/aws-cloudwatch/lib/yaxis.ts new file mode 100644 index 0000000000000..46a6539a46b03 --- /dev/null +++ b/packages/@aws-cdk/aws-cloudwatch/lib/yaxis.ts @@ -0,0 +1,49 @@ +/** + * Properties for a Y-Axis + */ +export interface YAxisProps { + /** + * The min value + * + * @default 0 + */ + readonly min?: number; + + /** + * The max value + * + * @default No maximum value + */ + readonly max?: number; + + /** + * The label + * + * @default No label + */ + readonly label?: string; + + /** + * Whether to show units + * + * @default None (means true) + */ + readonly showUnits?: boolean; +} + +/** + * An Y-Axis on a CloudWatch dashboard widget + */ +export class YAxis { + public readonly min?: number; + public readonly max?: number; + public readonly label?: string; + public readonly showUnits?: boolean; + + constructor(props: YAxisProps) { + this.min = props.min || 0; + this.max = props.max; + this.label = props.label; + this.showUnits = props.showUnits; + } +} diff --git a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts index 8a3073ffd0750..a248d2d6422d4 100644 --- a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts +++ b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts @@ -1,6 +1,6 @@ import { Stack } from '@aws-cdk/cdk'; import { Test } from 'nodeunit'; -import { AlarmWidget, GraphWidget, Metric, Shading, SingleValueWidget } from '../lib'; +import { AlarmWidget, GraphWidget, Metric, Shading, SingleValueWidget, YAxis } from '../lib'; export = { 'add metrics to graphs on either axis'(test: Test) { @@ -205,4 +205,49 @@ export = { test.done(); }, + + 'add yAxis to graph'(test: Test) { + // WHEN + const stack = new Stack(); + const widget = new GraphWidget({ + title: 'My fancy graph', + left: [ + new Metric({ namespace: 'CDK', metricName: 'Test' }) + ], + right: [ + new Metric({ namespace: 'CDK', metricName: 'Tast' }) + ], + leftYAxis: new YAxis({ + label: "Left yAxis", + max: 100 + }), + rightYAxis: new YAxis({ + label: "Right yAxis", + min: 10, + showUnits: false + }) + }); + + // THEN + test.deepEqual(stack.node.resolve(widget.toJson()), [{ + type: 'metric', + width: 6, + height: 6, + properties: { + view: 'timeSeries', + title: 'My fancy graph', + region: { Ref: 'AWS::Region' }, + metrics: [ + ['CDK', 'Test', { yAxis: 'left', period: 300, stat: 'Average' }], + ['CDK', 'Tast', { yAxis: 'right', period: 300, stat: 'Average' }] + ], + annotations: { horizontal: [] }, + yAxis: { + left: { label: "Left yAxis", min: 0, max: 100 }, + right: { label: "Right yAxis", min: 10, showUnits: false } } + } + }]); + + test.done(); + }, };