CareEvolution / MyDataHelpsUI

MyDataHelps UI React Component Library
MIT License
1 stars 2 forks source link

Add a new InsightMatrix component (formerly OverviewTable). #352

Closed greinard closed 2 weeks ago

greinard commented 3 weeks ago

Overview

This branch adds a new InsightMatrix component that can be used to compare multiple daily survey and daily data values in a tabular format.

The group-by data is first grouped by value threshold. The comparison data are then grouped by the same days in which the group-by data values met each threshold. This is intended to illustrate what the values from each of the comparison data looked like on the days when the values from the group-by data were within a given threshold (i.e. What did my step count look like when my mood rating was high?).

Thresholds, labels, colors, value calculators, value formatters, and value evaluators (good vs bad) can be customized on the group-by and comparison data types.

image image

I will revert the snapshot version number prior to merging.

Security

REMINDER: All file contents are public.

Checklist

Testing

Documentation

Summary by CodeRabbit

Release Notes

These changes enhance the functionality and user experience of the application, particularly around data visualization and internationalization.

coderabbitai[bot] commented 3 weeks ago

[!NOTE]

Reviews paused

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Walkthrough

This pull request introduces several enhancements primarily centered around the InsightMatrix component and its associated functionalities. Key changes include the addition of a new function argTypesToHide in the Storybook helpers, updates to the versioning in package.json, and the introduction of various new components, types, and utility functions related to the InsightMatrix. Additionally, multiple localization strings are added across different languages to support user interface messages. The overall structure of the project is enhanced to improve modularity and accessibility of the InsightMatrix features.

Changes

File Change Summary
.storybook/helpers.ts Added function argTypesToHide(propertiesToIgnore: string[]) to dynamically hide argument types.
package.json Version updated from 2.49.0 to 2.49.1-OverviewTable.3.
src/components/container/index.ts Added export for InsightMatrix and formatted existing exports.
src/helpers/index.ts Added export statement export * from './insight-matrix';.
src/helpers/strings-de.ts Added German entry "insight-matrix-no-comparison-data" and adjusted "therapy-minutes" order.
src/helpers/strings-en.ts Added English entry "insight-matrix-no-comparison-data" and formatted "therapy-minutes".
src/helpers/strings-es.ts Added Spanish entry "insight-matrix-no-comparison-data" and adjusted "therapy-minutes" order.
src/helpers/strings-fr.ts Added French entry "insight-matrix-no-comparison-data"; no other changes.
src/helpers/strings-it.ts Added Italian entry "insight-matrix-no-comparison-data" and adjusted "therapy-minutes" order.
src/helpers/strings-nl.ts Added Dutch entry "insight-matrix-no-comparison-data"; no other changes.
src/helpers/strings-pl.ts Added Polish entry "insight-matrix-no-comparison-data" and adjusted "therapy-minutes" order.
src/helpers/strings-pt.ts Added Portuguese entry "insight-matrix-no-comparison-data" and adjusted "therapy-minutes".
src/components/container/InsightMatrix/InsightMatrix.css Added new CSS classes for styling the InsightMatrix component.
src/components/container/InsightMatrix/InsightMatrix.previewData.ts Introduced preview data provider functionality for InsightMatrix.
src/components/container/InsightMatrix/InsightMatrix.stories.tsx Added Storybook configuration for InsightMatrix.
src/components/container/InsightMatrix/InsightMatrix.tsx Introduced the main InsightMatrix component with data handling and rendering logic.
src/components/container/InsightMatrix/index.ts Re-exported InsightMatrix component.
src/helpers/insight-matrix/index.ts Added multiple exports related to InsightMatrix functionalities.
src/helpers/insight-matrix/sample-data.ts Introduced function generateSampleData for creating sample datasets.
src/helpers/insight-matrix/survey-data-type.ts Defined SurveyDataType interface and related functions.
src/helpers/insight-matrix/types.ts Introduced several new TypeScript interfaces for InsightMatrix configurations.
src/helpers/insight-matrix/value-calculator.ts Added InsightMatrixValueCalculator interface and functions for value calculations.
src/helpers/insight-matrix/value-evaluator.ts Added InsightMatrixValueEvaluator interface and evaluation function.
src/helpers/insight-matrix/value-formatter.ts Defined InsightMatrixValueFormatter interface and multiple formatting functions.
src/helpers/insight-matrix/value-threshold.ts Introduced InsightMatrixValueThreshold interface and function for computing threshold days.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant InsightMatrix
    participant DataProvider
    participant Formatter
    participant Evaluator

    User->>InsightMatrix: Request data
    InsightMatrix->>DataProvider: Load data
    DataProvider-->>InsightMatrix: Return data
    InsightMatrix->>Evaluator: Evaluate data
    Evaluator-->>InsightMatrix: Return evaluation results
    InsightMatrix->>Formatter: Format data
    Formatter-->>InsightMatrix: Return formatted data
    InsightMatrix-->>User: Display data

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
🪧 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 , please review it.` - `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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` - `@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 using 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. ### Other keywords and placeholders - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. - Add `@coderabbitai` or `@coderabbitai title` anywhere in the PR title to generate the title automatically. ### 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://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
chrisnowak commented 3 weeks ago

@greinard I would consider a less broad name for this - OverviewTable is quite broad.

How about "InsightMatrix"? (Credit to ChatGPT). Feels like it a well distinguished name that captures the idea behind the component (participants having insights about their health) in a matrix

greinard commented 3 weeks ago

How about "InsightMatrix"?

I like that.

greinard commented 3 weeks ago

I have renamed the component to InsightMatrix. I'll update the PR title/description momentarily.

greinard commented 3 weeks ago

@coderabbitai pause

greinard commented 2 weeks ago

I think I have addressed or responded to all of the comments thus far. Please let me know if there is anything further that you would like me to revisit.

Thanks!

greinard commented 2 weeks ago

Thanks @reneefromhold.