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