cloudwatch: support bands in horizontal and vertical annotations
- 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
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