Time Series/Data Data Chart: Fix Coloring Errors

Overview

I noticed two coloring bugs in the Time Series Chart and Daily Data Chart.

The first is that this story for the TimeSeriesChart was clearly inverted:

The second is that this threshold story on the Daily Data Chart doesn't line up either; things are defaulting to the warning color instead of taking the "green" and "red" values for overThresholdBarColor

The first problem was fixed by correcting two small things. The first was that the code was simply setting the stroke color based on the area color, and the code that was generating the fill gradient was using the color property instead of the areaColor property to define it. I think this bug crept in all the way back when I implemented the TimeSeriesChart in the first place. I also made it so that it actually makes gradient definitions for both (the way that even a normal Line Chart technically uses a gradient), so that if we try and ever put Thresholds into the Area Chart we've got the ground work.

The second problem was caused by an improper type definition in the MultiSeriesBarChartOptions declaring the thresholds property as BarChartThreshold instead of ChartThreshold. The DailyDataChart was doing this conversion already (renaming overThresholdBarColor to overThresholdColor) but since the type was wrong (and strangely the code in DailyDataChart doesn't cause a compilation error even though it attempts to explicitly state the return type and there should have been a mismatch), the code creating the gradient definitions was looking for the wrong property. We also didn't have a story on the base TimeSeriesChart demonstrating this behavior so it slipped past. This slipped in here somehow https://github.com/CareEvolution/MyDataHelpsUI/pull/247/files#diff-a68632464648485a258a95a49e5707d140e4d6c1ee3d52c7ffd6fe751d89f840

These stories now look like this:

and this:

Security

REMINDER: All file contents are public.

[ ] I have ensured no secure credentials or sensitive information remain in code, metadata, comments, etc.
- [ ] Please verify that you double checked that .storybook/preview.js does not contain your participant access key details.
- [ ] There are no temporary testing changes committed such as API base URLs, access tokens, print/log statements, etc.
[ ] These changes do not introduce any security risks, or any such risks have been properly mitigated.

Describe briefly what security risks you considered, why they don't apply, or how they've been mitigated.

Checklist

Testing

[ ] MyDataHelps iOS app
[ ] MyDataHelps Android app
[ ] MyDataHelps website

Documentation

[ ] I have added relevant Storybook updates to this PR as well.
[ ] If this feature requires a developer doc update, tag @CareEvolution/api-docs.

Consider "Squash and merge" as needed to keep the commit history reasonable on main.

Reviewers

Assign to the appropriate reviewer(s). Minimally, a second set of eyes is needed ensure no non-public information is published. Consider also including:

Subject-matter experts
Style/editing reviewers
Others requested by the content owner

Summary by CodeRabbit

New Features
- Introduced a new story for the TimeSeriesChart component showcasing a bar chart with thresholds for better visual representation.
- Enhanced dynamic data fetching for the bar chart, improving usability and functionality.
Improvements
- Streamlined color handling logic, allowing for more explicit differentiation between fill and stroke styles in the TimeSeriesChart.
- Improved gradient definition for better visual distinction in area and bar charts.
Changes
- Updated the type of thresholds in MultiSeriesBarChartOptions for better data structure alignment.

Walkthrough

The changes enhance the TimeSeriesChart component by introducing a new story that features a bar chart with visual thresholds, improving data representation. The rendering logic for color handling has been streamlined by removing certain functions and modifying attribute definitions for greater clarity. Additionally, chart helper functions have been updated to better manage gradient colors, and the MultiSeriesBarChartOptions interface has been adjusted to accommodate new threshold data structures, increasing the component's flexibility and usability.

Changes

Files	Change Summary
`src/components/presentational/TimeSeriesChart/...`	Added a new story `barChartWithThresholds` showcasing a bar chart with thresholds and dynamic data.
`src/components/presentational/TimeSeriesChart/...`	Removed color handling functions and modified fill/stroke logic for clarity in chart rendering.
`src/helpers/chartHelpers.tsx`	Updated gradient color definitions in `createBarChartDefs` and `createAreaChartDefs` for better styling.
`src/helpers/chartOptions.ts`	Changed `thresholds` property type in `MultiSeriesBarChartOptions` from `BarChartThreshold` to `ChartThreshold`.

Recent review details

**Configuration used: CodeRabbit UI** **Review profile: CHILL**

Commits

Files that changed from the base of the PR and between 7359ad4f7b13e13f4d4dc1460da9fca040411b8e and 0f31cdfb9ff7db59ec577ab4e1c1586a5abddbb9.

Files selected for processing (4)

* src/components/presentational/TimeSeriesChart/TimeSeriesChart.stories.tsx (1 hunks) * src/components/presentational/TimeSeriesChart/TimeSeriesChart.tsx (3 hunks) * src/helpers/chartHelpers.tsx (2 hunks) * src/helpers/chartOptions.ts (1 hunks)

Additional comments not posted (4)

src/helpers/chartOptions.ts (1)
`73-73`: **Update the type of `thresholds` property.** The type of `thresholds` in the `MultiSeriesBarChartOptions` interface has been updated to `ChartThreshold[]`. Ensure that all instances of `MultiSeriesBarChartOptions` are compatible with this change.

src/helpers/chartHelpers.tsx (2)
`83-84`: **Update the gradient definitions for bar charts.** The `overThresholdBarColor` property has been replaced with `overThresholdColor` to define the gradient stops. This change ensures consistency in color usage for thresholds in bar charts. --- `98-107`: **Enhance gradient definitions for area charts.** Separate linear gradients are now created for the fill and stroke of each series in area charts. This allows for distinct styling of the area and stroke, improving the chart's appearance.

src/components/presentational/TimeSeriesChart/TimeSeriesChart.tsx (1)
`257-258`: **Update fill and stroke attributes for area charts.** The fill and stroke attributes now use modified gradient keys (`-fill` and `-stroke`). This change enhances the differentiation between fill and stroke styles.

---

Tips

### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configuration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

CareEvolution / MyDataHelpsUI