feat(custom): add graphWidgetWidth to allow for custom widths in CustomMetricGroup objects (#517)

Closes #487

---

_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

@@ -20,6 +20,7 @@ export const DefaultLogWidgetHeight = 7;
 /**
  * Suggests the best widget width, given the total number of widgets.
  * The main point is to make widgets as wide as possible, while saving vertical space and minimizing number of gaps.
+ *
  * @param numTotalWidgets total number of widgets to be placed
  */
 export function recommendedWidgetWidth(numTotalWidgets: number) {

lib/common/widget/size.ts

@@ -174,6 +174,13 @@ export interface CustomMetricGroup {
    * @see {GraphWidgetProps.setPeriodToTimeRange}
    */
   readonly graphWidgetSetPeriodToTimeRange?: boolean;
+  /**
+   * Width of graph widget. Note that widgets will overflow into new rows if the summed width
+   * exceeds 24.
+   *
+   * @default - Automatically calculcated width, generally as wide as possible considering all metrics' widgets.
+   */
+  readonly graphWidgetWidth?: number;
   /**
    * @deprecated use addToSummaryDashboard. addToSummaryDashboard will take precedence over important.
    * @see addToSummaryDashboard
@@ -207,17 +214,20 @@ export interface CustomMetricGroup {
 export interface CustomMonitoringProps extends BaseMonitoringProps {
   /**
    * optional description of the whole section, in markdown
-   * @default no description
+   *
+   * @default - no description
    */
   readonly description?: string;
   /**
    * optional height of the description widget, so the content fits
-   * @default minimum height (should fit one or two lines of text)
+   *
+   * @default - minimum height (should fit one or two lines of text)
    */
   readonly descriptionWidgetHeight?: number;
   /**
-   * height override
-   * @default default height
+   * Height override.
+   *
+   * @default - default height
    */
   readonly height?: number;
   /**
@@ -380,9 +390,6 @@ export class CustomMonitoring extends Monitoring {
     summary: boolean
   ) {
     const widgets: IWidget[] = [];
-    const metricGroupWidgetWidth = recommendedWidgetWidth(
-      annotatedGroups.length
-    );
     const metricGroupWidgetHeightDefault = summary
       ? DefaultSummaryWidgetHeight
       : DefaultGraphWidgetHeight;
@@ -416,7 +423,9 @@ export class CustomMonitoring extends Monitoring {
 
       const graphWidgetProps: GraphWidgetProps = {
         title,
-        width: metricGroupWidgetWidth,
+        width:
+          annotatedGroup.metricGroup.graphWidgetWidth ??
+          recommendedWidgetWidth(annotatedGroups.length),
         height: metricGroupWidgetHeight,
         left,
         right,

lib/monitoring/custom/CustomMonitoring.ts

@@ -39,6 +39,7 @@ test("snapshot test", () => {
       {
         title: "DummyGroup1",
         addToSummaryDashboard: true,
+        graphWidgetWidth: 6,
         metrics: [
           // regular metric
           new Metric({ metricName: "DummyMetric1", namespace, dimensionsMap }),
@@ -75,6 +76,7 @@ test("snapshot test", () => {
       {
         title: "DummyGroup2",
         graphWidgetType: GraphWidgetType.BAR,
+        graphWidgetWidth: 2,
         metrics: [
           // regular metric
           new Metric({ metricName: "DummyMetric10", namespace, dimensionsMap }),