Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(graphCardHelpers): issues/180 tooltip show all data facets #282

Merged
merged 1 commit into from
May 12, 2020

Conversation

cdcabrera
Copy link
Member

@cdcabrera cdcabrera commented May 12, 2020

What's included

  • fix(graphCardHelpers): issues/180 tooltip show all data facets
    • graphCardHelpers, update tooltip display to show all data facets
    • graphCardSelectors, pass has_data and has_infinite to graphCard
    • i18n, strings updated

Notes

19 scenarios tested. Logic for displaying no data and unlimited vs data. Unit test snapshots are in place and can be confirmed here,

exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display > 0 and NOT hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display > 0 and UNDEFINED hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display > 0 and hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for null and NOT hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for null and UNDEFINED hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for null and hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for zero and NOT hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for zero and UNDEFINED hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: data display for zero and hasData on report 1`] = `
Object {
"daily": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: no data granularity data display 1`] = `
Object {
"daily": "t(curiosity-graph.noDataErrorLabel)",
"monthly": "t(curiosity-graph.noDataErrorLabel)",
"quarterly": "t(curiosity-graph.noDataErrorLabel)",
"weekly": "t(curiosity-graph.noDataErrorLabel)",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for > 0 and NOT hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for > 0 and UNDEFINED hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for > 0 and hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for null and NOT hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for null and UNDEFINED hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for null and hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for zero and NOT hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for zero and UNDEFINED hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
}
`;
exports[`GraphCardHelpers getTooltips should return a formatted tooltip based on data and granularity: threshold display for zero and hasInfinite on threshold 1`] = `
Object {
"daily": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
"monthly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"quarterly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
}
`;
Each of these contains potentially MADE UP scenarios, with the updated logic this is what will render.

  • Reporting data
    • data display for null and has data = undefined will display 0 per each facet
    • data display for null and has data = false will display no data per each facet
    • data display for null and has data = true will display 0 per each facet
    • data display for >= 0 and has data = undefined will display said value per each facet
    • data display for >= 0 and has data = false will display no data per each facet
    • data display for >= 0 and has data = true will display said value per each facet
  • Capacity/Threshold data
    • threshold display for null and has infinite = undefined will display no data
    • threshold display for null and has infinite = false will display no data
    • threshold display for null and has infinite = true will display unlimited
    • threshold display for >= 0 and has infinite = undefined will display said value
    • threshold display for >= 0 and has infinite = false will display said value
    • threshold display for >= 0 and has infinite = true will display unlimited
  • Complete Missing data
    • data display for all missing data will result in a singular No data tooltip display

How to test

Local run check

  1. update the NPM packages with $ yarn
  2. $ yarn start
  3. hover over the graph to confirm tooltip display behavior

Example

May-11-2020 21-52-48

May-11-2020 21-57-09

Updates issue/story

#180

cdcabrera added a commit to cdcabrera/curiosity-frontend that referenced this pull request May 12, 2020
…ights#282)

* graphCardHelpers, update tooltip to display all data facets
* graphCardSelectors, pass has_data and has_infinite to graphCard
* i18n, strings updated
@codecov-io
Copy link

Codecov Report

Merging #282 into ci will increase coverage by 0.01%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##               ci     #282      +/-   ##
==========================================
+ Coverage   92.42%   92.44%   +0.01%     
==========================================
  Files          47       47              
  Lines        1030     1032       +2     
  Branches      244      245       +1     
==========================================
+ Hits          952      954       +2     
  Misses         72       72              
  Partials        6        6              
Impacted Files Coverage Δ
src/components/graphCard/graphCardHelpers.js 100.00% <100.00%> (ø)
src/redux/selectors/graphCardSelectors.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1404ad1...42c36d6. Read the comment docs.

@cdcabrera cdcabrera changed the title WIP fix(graphCardHelpers): issues/180 tooltip show all data facets fix(graphCardHelpers): issues/180 tooltip show all data facets May 12, 2020
…ights#282)

* graphCardHelpers, update tooltip to display all data facets
* graphCardSelectors, pass has_data and has_infinite to graphCard
* i18n, strings updated
@cdcabrera cdcabrera merged commit b359d1c into RedHatInsights:ci May 12, 2020
@cdcabrera cdcabrera mentioned this pull request May 19, 2020
cdcabrera added a commit that referenced this pull request May 19, 2020
* graphCardHelpers, update tooltip to display all data facets
* graphCardSelectors, pass has_data and has_infinite to graphCard
* i18n, strings updated
@cdcabrera cdcabrera mentioned this pull request May 20, 2020
cdcabrera added a commit that referenced this pull request May 20, 2020
* graphCardHelpers, update tooltip to display all data facets
* graphCardSelectors, pass has_data and has_infinite to graphCard
* i18n, strings updated
cdcabrera added a commit that referenced this pull request May 20, 2020
* graphCardHelpers, update tooltip to display all data facets
* graphCardSelectors, pass has_data and has_infinite to graphCard
* i18n, strings updated
kahowell added a commit to RedHatInsights/rhsm-subscriptions that referenced this pull request Apr 21, 2021
Tiny follow-up to #415

Without this change, days without any recorded usage show up in the
tooltip as "no data", rather than the cumulative total.

See RedHatInsights/curiosity-frontend#282 for
explanation of GUI logic wrt `has_data`.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants