Recreate MetricsView Component for Data Visualization #101
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up
mxosman
changed the title
|
design nit: should we add a horizontal line on the top of the dropdowns? I see it in the agency dashboard as well as the old metrics view. |
terryttsai
reviewed
Oct 19, 2022
| [key: string]: Metric; | ||
| }>({}); | ||
|
|
||
| const filteredMetricSettings: MetricSettingsObj = Object.values( |
There was a problem hiding this comment.
Could we share the logic between here and MetricsConfiguration?
| return res; | ||
| }, {}); | ||
|
|
||
| const fetchAndSetReportSettings = async () => { |
There was a problem hiding this comment.
Same with fetchAndSetReportSettings? Would it be sufficient to share these functions, to avoid going the full route of creating a mobx store for metric settings?
There was a problem hiding this comment.
Though w a mobx store or some sort of global state, we could avoid having to re-fetch metric settings every time the user enters / leaves one of these pages
There was a problem hiding this comment.
I think I agree with @terryttsai here actually ... it seems worthwhile creating some sort of global state for this metric information, since we're now using it in two different views (do we also use it on Data Entry or is it not needed there?) and will likely use it in additional views later on. Can definitely be done in a followup PR, it's not urgent -- we can taskify for now and come back to it at the end of the sprint if there's time. In the meantime, I like the suggestion of factoring out the shared code!
Also, unrelated, but can we rename it? reportSettings confused me -- they're metric settings, not report settings, right? And really it's more like metric metadata?
There was a problem hiding this comment.
Very good points! I'll taskify and work on it in a follow up PR.
since we're now using it in two different views (do we also use it on Data Entry or is it not needed there?)
Unless I'm mistaken, we don't use this function or get any settings in the data entry.
Also, unrelated, but can we rename it?
reportSettingsconfused me -- they're metric settings, not report settings, right? And really it's more like metric metadata?
Haha - yeah, I guess they are technically metric settings for a report? Maybe that's why we went with that in the beginning. I'm good with fetchAndSetMetricSettings.
Oh strange! Great catch - I didn't mess with the data viz component at all. Perhaps the prior ones had a bottom-border on the heading? I'll take a look. |
Yeah - it looks like the top border was never added to the data viz component - it was just using the Tabs bottom border. I'll add a top border.
|
terryttsai
approved these changes
Oct 20, 2022
mxosman
added a commit
that referenced
this pull request
Oct 20, 2022
* Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
mxosman
added a commit
that referenced
this pull request
Oct 26, 2022
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
mxosman
added a commit
that referenced
this pull request
Oct 27, 2022
* Settings: Scaffolding (#59) * Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> * Rebase adjustments - updating imports, types and other react upgrade related adjustments * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (6/n) (#121) * Fix overflow scroll bars * Adjust overall spacing and font size, fix squished arrow in metric box * Adjust Context and update copy for items without tech definition Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>
mxosman
added a commit
that referenced
this pull request
Nov 8, 2022
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Rebase adjustments - updating imports, types and other react upgrade related adjustments Refactor settings to use routes
mxosman
added a commit
that referenced
this pull request
Nov 8, 2022
* Restructure settings files, rename, extract styles * Refactor settings page and set up existing components in new structure * Styling adjustment * Change text to Your Account * Settings: Metric Configuration (1/n) (#64) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Remove routing to old metrics page - remove from menu * Styling adjustment * Fix key warning Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Metric Details & Breakdowns (2/n) (#66) * Initial work on metric config refactor in settings * Continue iterating on refactor up to the breakdown page * Styling adjustment * Change MetricView to MetricConfiguration and update all imports - remove MetricViewMocks Restyle metric details up to breakdown dimensions New breakdown copy Refactor breakdowns with toggles * Refactor disaggregations to use checkboxes and remove toggle switch * Add definitions panel, add icon * Style clean up - comments * Clean up * Feedback: reduce height in metric boxes, only use filteredMetricSettings optimization Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Definitions (3/n) (#83) * Initial work on MetricDefinitions component * Continue fleshing out definitions component, move metric context config to overall metric definition panel, set up mocks for definitions, add and update types, fix adjustments dependent on changes * Adjust styles for scrolling * Clean up * Style and comment clean up * Fix type * Use undefined vs empty string * Fix key warning * Settings: Metric Configuration: Navigation (Table of Contents) (4/n) (#85) * Add table of contents navigation when inside of metric details, move shared state to settings page and pass state to menu and metric config, fix disaggregation issues, add styling for table of contents, fix bug in mocks, add types, various adjustments to accommodate new change * Clean up * Add comments Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Refactor & Clean Up (5/n) (#91) * Major clean up - separate components into their own files * Fix dimension bug * Fix switch agency bug * Minor clean up * Merge types with existing types and update all connected components * Clean up * Handle cases when settings array is empty or non-existent * Handle cases when settings array is empty or non-existent * Styling adjustments per prev feedback * Recreate MetricsView Component for Data Visualization (#101) * Recreate old MetricsView component Update route and add to menu Update styling Remove unnecessary code - minor refactor Clean up * Fix styling issue * Add spacing between header and data viz * Add border top to data viz dropdown * Update tooltip and link to direct users to Settings to change metric config Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Settings: Metric Configuration: Save Definitions (and Replace Mocks) (6/n) (#108) * [Summary] Remove mocks and implement definition saving functionality and UI update functionality * Revert to default values functionality * Fix revert to default for metric setting * Clean up comment * PR feedback: reverse the conditionals * Settings: Metric Configuration: Playtesting Followups - Misc. Styling Adjustments (1/n) (#110) * Remove tabs in metric list when agency has only one system * Change casing to capitalized case on Monthly Annual badges * Reduce spacing of Settings menu * Scroll gap adjustment * Settings: Metric Configuration: Playtesting Followups - Selection States (2/n) (#112) * Add arrow vector, add logic for persisting on click, update hover and active states, clean up * Settings: Metric Configuration: Playtesting Followups - Default Definition Hover State (3/n) (#113) * Add hover feature to display the default settings when user hovers over the revert button * Update to Choose instead of Revert per design * Clean up * Settings: Metric Configuration: Playtesting Followups - Enable Dimension Selection When Disaggregation is Off (4/n) (#115) * When disaggregation and dimensions are all off, checking on a dimension will turn on the disaggregation * Styling bug fixes * Implement responsiveness per design (#117) Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com> Rebase adjustments - updating imports, types and other react upgrade related adjustments Refactor settings to use routes
5 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of the change
Recreates the old MetricsView component to render data visualizations that were previously a part of the metric configuration. I only kept what was needed to render the metrics list and the data visualization. The metric boxes look different because I reused the metric box component from the new metric config (which are styled slightly differently).
Demo:
MetricsView-DataViz.mov
[Update] Added spacing between the right side header and the data viz:
Related issues
Closes #99
Checklists
Development
This box MUST be checked by the submitter prior to merging:
These boxes should be checked by the submitter prior to merging:
Code review
These boxes should be checked by reviewers prior to merging: