aws / aws/aws-cdk

cloudwatch: support bands in horizontal and vertical annotations

Open
#29,070 2 comments 0 reactions 0 assignees View on GitHub
@aws-cdk/aws-cloudwatch effort/medium feature-request p2
Dominant language
TypeScript
Stars
12.9k
Forks
4.6k
Avg merge
2d 3h
Merged PRs (30d)
83

Description

### Describe the feature

Horizontal and Vertical annotations support declaring a band (from, to) as can be seen in **Horizontal Annotations** and **Vertical Annotations** sections in https://docs.aws.amazon.com/AmazonCloudWatch/latest/APIReference/CloudWatch-Dashboard-Body-Structure.html

The current implementation assumes just a single value with an above/below before/after shading
- https://github.com/aws/aws-cdk/blob/main/packages/aws-cdk-lib/aws-cloudwatch/lib/graph.ts#L721
- https://github.com/aws/aws-cdk/blob/main/packages/aws-cdk-lib/aws-cloudwatch/lib/graph.ts#L760

### Use Case

Showing bands in metrics widgets, and coloring cells in the yet-to-be-implemented table widget https://github.com/aws/aws-cdk/issues/28975

### Proposed Solution

A likely nice implementation would've been to change `HorizontalAnnotation` and `VerticalAnnotation` to classes with factory methods and a `toJson` or `render` method.

This, however, would be a breaking change.

As such, I'm not sure what the best approach would be, I can think of some options
1. Update the interfaces to have an additional field that captures the `label` and `value` of the other point in the range. This, however, will require widgets to check for that field, and render accordingly.
2. introduce new classes, new props fields, to replace the existing ones while marking them as deprecated. The challenge with this would be in naming those classes/fields as the good names are already taken

### Other Information

I might be able to contribute a change, if discussions here lead to an agreed on approach

### Acknowledgements

- [ ] I may be able to implement this feature request
- [ ] This feature might incur a breaking change

### CDK version used

2.125.0

### Environment details (OS name and version, etc.)

macOS

Contributor guide

Open the contributing guide

Research direction

Start in packages/aws-cdk-lib/aws-cloudwatch/lib/graph.ts at the horizontal and vertical annotation handling around lines 721 and 760, then compare it with the Horizontal Annotations and Vertical Annotations sections of the AWS CloudWatch Dashboard Body Structure documentation. Resolve a compatible API approach and ensure both annotation types can represent and render from/to bands without the proposed breaking change.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, typescript
Domain
cloud, data-visualization, observability
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.