diff --git a/packages/@aws-cdk/aws-cloudwatch/README.md b/packages/@aws-cdk/aws-cloudwatch/README.md index 9fd06668186d7..94959b6e8de80 100644 --- a/packages/@aws-cdk/aws-cloudwatch/README.md +++ b/packages/@aws-cdk/aws-cloudwatch/README.md @@ -241,6 +241,17 @@ dashboard.addWidgets(new GraphWidget({ })); ``` +The graph legend can be adjusted from the default position at bottom of the widget. + +```ts +dashboard.addWidgets(new GraphWidget({ + // ... + // ... + + legendPosition: LegendPosition.RIGHT, +})); +``` + ### Alarm widget An alarm widget shows the graph and the alarm line of a single alarm: diff --git a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts index e085e3ea9e2d8..0c98e288c34ca 100644 --- a/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts +++ b/packages/@aws-cdk/aws-cloudwatch/lib/graph.ts @@ -173,6 +173,13 @@ export interface GraphWidgetProps extends MetricWidgetProps { * @default - None */ readonly rightYAxis?: YAxisProps; + + /** + * Position of the legend + * + * @default - bottom + */ + readonly legendPosition?: LegendPosition; } /** @@ -210,6 +217,7 @@ export class GraphWidget extends ConcreteWidget { left: this.props.leftYAxis !== undefined ? this.props.leftYAxis : undefined, right: this.props.rightYAxis !== undefined ? this.props.rightYAxis : undefined, }, + legend: this.props.legendPosition !== undefined ? { position: this.props.legendPosition } : undefined, }, }]; } @@ -349,6 +357,26 @@ export class Color { public static readonly RED = '#d62728'; } +/** + * The position of the legend on a GraphWidget. + */ +export enum LegendPosition { + /** + * Legend appears below the graph (default). + */ + BOTTOM = 'bottom', + + /** + * Add shading above the annotation + */ + RIGHT = 'right', + + /** + * Add shading below the annotation + */ + HIDDEN = 'hidden' +} + function mapAnnotation(yAxis: string): ((x: HorizontalAnnotation) => any) { return (a: HorizontalAnnotation) => { return { ...a, yAxis }; diff --git a/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts b/packages/@aws-cdk/aws-cloudwatch/test/test.graphs.ts index 45f58c01bfc0f..9e4724eed05c9 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/core'; import { Test } from 'nodeunit'; -import { Alarm, AlarmWidget, Color, GraphWidget, LogQueryWidget, Metric, Shading, SingleValueWidget } from '../lib'; +import { Alarm, AlarmWidget, Color, GraphWidget, LegendPosition, LogQueryWidget, Metric, Shading, SingleValueWidget } from '../lib'; export = { 'add stacked property to graphs'(test: Test) { @@ -393,4 +393,33 @@ export = { test.deepEqual(stack.resolve(widget.toJson())[0].properties.annotations.horizontal[0], { yAxis: 'left', value: 100, color: '#d62728' }); test.done(); }, + + 'legend position is respected in constructor'(test: Test) { + // WHEN + const stack = new Stack(); + const widget = new GraphWidget({ + left: [new Metric({ namespace: 'CDK', metricName: 'Test' }) ], + legendPosition: LegendPosition.RIGHT, + }); + + // THEN + test.deepEqual(stack.resolve(widget.toJson()), [{ + type: 'metric', + width: 6, + height: 6, + properties: { + view: 'timeSeries', + region: { Ref: 'AWS::Region' }, + metrics: [ + ['CDK', 'Test'], + ], + yAxis: {}, + legend: { + position: 'right', + }, + }, + }]); + + test.done(); + }, }; \ No newline at end of file