feat(aws-cloudwatch): support labels on pie charts (aws#28929).

When configured, show percentage labels are for each segment of pie chart.

Closes aws#28929

packages/@aws-cdk-testing/framework-integ/test/aws-cloudwatch/test/integ.dashboard-with-graphwidget-with-labels.ts

@@ -0,0 +1,41 @@
+import { App, Stack, StackProps } from 'aws-cdk-lib';
+import { IntegTest } from '@aws-cdk/integ-tests-alpha';
+import { Dashboard, GraphWidget, GraphWidgetView, Metric, Stats } from 'aws-cdk-lib/aws-cloudwatch';
+
+class DashboardWithGraphWidgetWithLabelsIntegrationTest extends Stack {
+  constructor(scope: App, id: string, props?: StackProps) {
+    super(scope, id, props);
+
+    const dashboard = new Dashboard(this, 'Dash');
+
+    const widget = new GraphWidget({
+      title: 'My fancy pie graph',
+      view: GraphWidgetView.PIE,
+      left: [
+        new Metric({
+          namespace: 'CDK/Test',
+          metricName: 'Metric',
+          label: 'Metric left 1 - sum',
+          statistic: Stats.SUM,
+        }),
+
+        new Metric({
+          namespace: 'CDK/Test',
+          metricName: 'Metric',
+          label: 'Metric left 2 - sum',
+          statistic: Stats.SUM,
+        }),
+      ],
+      labels: {
+        visible: true,
+      },
+    });
+
+    dashboard.addWidgets(widget);
+  }
+}
+
+const app = new App();
+new IntegTest(app, 'cdk-integ-dashboard-with-graph-widget-with-labels', {
+  testCases: [new DashboardWithGraphWidgetWithLabelsIntegrationTest(app, 'DashboardWithGraphWidgetWithLabelsIntegrationTest')],
+});

packages/aws-cdk-lib/aws-cloudwatch/lib/graph.ts

@@ -71,6 +71,21 @@ export interface YAxisProps {
   readonly showUnits?: boolean;
 }
 
+/**
+ * Properties for lables shown on the graph.
+ */
+export interface LabelProps {
+  /**
+   * Whether to display labels on chart.
+   *
+   * If false, no labels are shown directly on the pie chart;
+   * if true, each segment of the pie chat is labelled with the percentage contribution.
+   *
+   * @default false
+   */
+  readonly visible?: boolean;
+}
+
 /**
  * Properties for an AlarmWidget
  */
@@ -373,6 +388,13 @@ export interface GraphWidgetProps extends MetricWidgetProps {
    */
   readonly view?: GraphWidgetView;
 
+  /**
+   * Properties for the graph's labels. Only applicable for Pie charts.
+   *
+   * @default - None
+   */
+  readonly labels?: LabelProps;
+
   /**
    * Whether to show the value from the entire time range. Only applicable for Bar and Pie charts.
    *
@@ -507,6 +529,7 @@ export class GraphWidget extends ConcreteWidget {
           left: this.props.leftYAxis ?? undefined,
           right: this.props.rightYAxis ?? undefined,
         },
+        labels: this.props.labels,
         legend: this.props.legendPosition !== undefined ? { position: this.props.legendPosition } : undefined,
         liveData: this.props.liveData,
         setPeriodToTimeRange: this.props.setPeriodToTimeRange,

packages/aws-cdk-lib/aws-cloudwatch/test/graphs.test.ts

@@ -1086,4 +1086,30 @@ describe('Graphs', () => {
       },
     }]);
   });
+
+  test('add labels to GraphWidget', () => {
+    // GIVEN
+    const stack = new Stack();
+    const widget = new GraphWidget({
+      left: [new Metric({ namespace: 'CDK', metricName: 'Test' })],
+      view: GraphWidgetView.PIE,
+      labels: { visible: true },
+    });
+
+    // THEN
+    expect(stack.resolve(widget.toJson())).toEqual([{
+      type: 'metric',
+      width: 6,
+      height: 6,
+      properties: {
+        view: 'pie',
+        region: { Ref: 'AWS::Region' },
+        metrics: [
+          ['CDK', 'Test'],
+        ],
+        yAxis: {},
+        labels: { visible: true },
+      },
+    }]);
+  });
 });