draw dots at line chart discontinuities

[mayberryzane]

Summary

• adds to the line charts when data is missing on either side (avoids confusing invisible points on the graphs)

How did you test this change?

• clicktested locally

Are there any deployment considerations?

• no

Does this work require review from our design team?

• @julian-highlight if you have any style recommendation for these dots, right now they're just 2px filled circles

[changeset-bot]

⚠️ No Changeset found

Latest commit: ef1490f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "rrdom" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrdom-nodejs" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-player" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrweb-snapshot" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/types" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@rrweb/web-extension" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "rrvideo" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[greptile-apps]

Pull Request Summary

• Feature Addition: Implements drawing dots at discontinuities in line charts to indicate missing data points. This enhances clarity in data visualization by marking invisible points on graphs where data is absent.
• Implementation Details: A CustomizedDot component is introduced within the Area component of the line chart. The logic identifies null values adjacent to non-null values and renders a dot at the non-null point, signaling a discontinuity.

Potential Pitfalls and Notes

• Design Consideration: The current implementation uses 2px filled circles for dots. Awaiting feedback from the design team for potential style adjustments.
• Testing: The feature has been click-tested locally, but further testing, especially automated tests, could ensure robustness.
• Deployment: No specific deployment considerations mentioned, indicating a straightforward integration into the main branch.

Opportunities

• Code Reuse: If similar patterns of data discontinuity visualization are needed elsewhere, the CustomizedDot component logic could be abstracted for reuse.
• Future Enhancements: Depending on user feedback, additional customization options for the dots (size, color, shape) could be introduced to better align with various design requirements.

[ccschmitz]

Did not click test, but LGTM!