feat(custom): support single value graph widgets (#182)

Implicitly requested via #181 (reply in thread)

---

_By submitting this pull request, I confirm that my contribution is made under the terms of the Apache-2.0 license_

Author: Eugene Cheung

API.md

@@ -49930,6 +49930,7 @@ create a two sets of dashboards: standard set (interactive) and a copy (bitmap).
 | <code><a href="#cdk-monitoring-constructs.GraphWidgetType.STACKED_AREA">STACKED_AREA</a></code> | *No description.* |
 | <code><a href="#cdk-monitoring-constructs.GraphWidgetType.PIE">PIE</a></code> | *No description.* |
 | <code><a href="#cdk-monitoring-constructs.GraphWidgetType.BAR">BAR</a></code> | *No description.* |
+| <code><a href="#cdk-monitoring-constructs.GraphWidgetType.SINGLE_VALUE">SINGLE_VALUE</a></code> | *No description.* |
 
 ---
 
@@ -49953,6 +49954,11 @@ create a two sets of dashboards: standard set (interactive) and a copy (bitmap).
 ---
 
 
+##### `SINGLE_VALUE` <a name="SINGLE_VALUE" id="cdk-monitoring-constructs.GraphWidgetType.SINGLE_VALUE"></a>
+
+---
+
+
 ### HeaderLevel <a name="HeaderLevel" id="cdk-monitoring-constructs.HeaderLevel"></a>
 
 #### Members <a name="Members" id="Members"></a>

lib/common/widget/types.ts

@@ -2,43 +2,56 @@ import {
   GraphWidget,
   GraphWidgetProps,
   GraphWidgetView,
+  IWidget,
+  SingleValueWidget,
 } from "aws-cdk-lib/aws-cloudwatch";
 
 export enum GraphWidgetType {
   LINE = "Line",
   STACKED_AREA = "StackedArea",
   PIE = "Pie",
   BAR = "Bar",
+  SINGLE_VALUE = "SingleValue",
 }
 
 /**
  * Creates a graph widget of the desired type.
+ *
  * @param type graph type (e.g. Pie or Bar)
  * @param props graph widget properties
  */
 export function createGraphWidget(
   type: GraphWidgetType,
   props: GraphWidgetProps
-) {
+): IWidget {
   switch (type) {
-    case "Line":
+    case GraphWidgetType.LINE:
       return new GraphWidget(props);
-    case "Bar":
+
+    case GraphWidgetType.BAR:
       return new GraphWidget({
         ...props,
         view: GraphWidgetView.BAR,
       });
-    case "Pie":
+
+    case GraphWidgetType.PIE:
       return new GraphWidget({
         ...props,
         view: GraphWidgetView.PIE,
       });
-    case "StackedArea":
+
+    case GraphWidgetType.STACKED_AREA:
       return new GraphWidget({
         ...props,
         stacked: true,
       });
+
+    case GraphWidgetType.SINGLE_VALUE:
+      return new SingleValueWidget({
+        metrics: [...(props.left ?? []), ...(props.right ?? [])],
+      });
+
     default:
-      throw new Error("Unsupported graph type: " + type);
+      throw new Error(`Unsupported graph type: ${type}`);
   }
 }

lib/monitoring/custom/CustomMonitoring.ts

@@ -328,7 +328,7 @@ export class CustomMonitoring extends Monitoring {
     annotatedGroups: CustomMetricGroupWithAnnotations[],
     summary: boolean
   ) {
-    const widgets: GraphWidget[] = [];
+    const widgets: IWidget[] = [];
     const metricGroupWidgetWidth = recommendedWidgetWidth(
       annotatedGroups.length
     );

test/monitoring/custom/CustomMonitoring.test.ts

@@ -10,9 +10,11 @@ import {
 import {
   AxisPosition,
   CustomMonitoring,
+  GraphWidgetType,
   MetricFactory,
   MetricStatistic,
 } from "../../../lib";
+import { addMonitoringDashboardsToStack } from "../../utils/SnapshotUtil";
 import { TestMonitoringScope } from "../TestMonitoringScope";
 
 const namespace = "DummyCustomNamespace";
@@ -24,7 +26,7 @@ test("snapshot test", () => {
 
   let numAlarmsCreated = 0;
 
-  new CustomMonitoring(scope, {
+  const monitoring = new CustomMonitoring(scope, {
     alarmFriendlyName: "DummyAlarmName",
     humanReadableName: "DummyName",
     description:
@@ -68,6 +70,7 @@ test("snapshot test", () => {
       },
       {
         title: "DummyGroup2",
+        graphWidgetType: GraphWidgetType.BAR,
         metrics: [
           // regular metric
           new Metric({ metricName: "DummyMetric10", namespace, dimensionsMap }),
@@ -99,6 +102,7 @@ test("snapshot test", () => {
       },
       {
         title: "DummyGroup3",
+        graphWidgetType: GraphWidgetType.PIE,
         metrics: [
           // regular metric
           new Metric({ metricName: "DummyMetric20", namespace, dimensionsMap }),
@@ -145,6 +149,14 @@ test("snapshot test", () => {
           { label: "DummyAnnotation3", value: 20, fill: Shading.BELOW },
         ],
       },
+      {
+        title: "DummyGroup4",
+        graphWidgetType: GraphWidgetType.SINGLE_VALUE,
+        metrics: [
+          new Metric({ metricName: "DummyMetric40", namespace, dimensionsMap }),
+          new Metric({ metricName: "DummyMetric41", namespace, dimensionsMap }),
+        ],
+      },
     ],
     useCreatedAlarms: {
       consume(alarms) {
@@ -154,6 +166,8 @@ test("snapshot test", () => {
   });
 
   expect(numAlarmsCreated).toStrictEqual(6);
+
+  addMonitoringDashboardsToStack(stack, monitoring);
   expect(Template.fromStack(stack)).toMatchSnapshot();
 });