feat(cloudwatch): add support for yAxis to graph

Support setting for the y-axis on a graph: min, max, label, and showUnits.

Fixes aws#2385

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
  */

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';

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;
+ }
+}

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();
+ },
 };