Skip to content

Commit

Permalink
fix(graphCardHelpers): issues/273 tooltip date ranges (#284)
Browse files Browse the repository at this point in the history 
* graphCardHelpers, tooltip date ranges for week, quarter granularity
  • Loading branch information
@cdcabrera
cdcabrera committed May 19, 2020
1 parent b359d1c commit c215b4c
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 53 deletions.
76 changes: 38 additions & 38 deletions src/components/graphCard/__tests__/__snapshots__/graphCardHelpers.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@ exports[`GraphCardHelpers getTooltipDate should return a formatted date based on
Object {
"daily": "June 1",
"monthly": "June 2019",
"quarterly": "June 2019",
"weekly": "June 1",
"quarterly": "Jun 2019 - Sep 2019",
"weekly": "Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -25,9 +25,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -38,9 +38,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -51,9 +51,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 50
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -64,9 +64,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -77,9 +77,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -90,9 +90,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -103,9 +103,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -116,9 +116,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -129,9 +129,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.hypervisorSocketsLabel, [object Object]): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -151,9 +151,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -164,9 +164,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 100
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -177,9 +177,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -190,9 +190,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -203,9 +203,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.noDataLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -216,9 +216,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -229,9 +229,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -242,9 +242,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): 0
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand All @@ -255,9 +255,9 @@ 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",
t(curiosity-graph.dateLabel): Jun 2019 - Sep 2019",
"weekly": "t(curiosity-graph.thresholdLabel): t(curiosity-graph.infiniteThresholdLabel)
t(curiosity-graph.dateLabel): June 1",
t(curiosity-graph.dateLabel): Jun 1 - Jun 8 2019",
}
`;

Expand Down
20 changes: 11 additions & 9 deletions src/components/graphCard/graphCardHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,23 +33,25 @@ const getChartXAxisLabelIncrement = granularity => {
*/
const getTooltipDate = ({ date, granularity }) => {
const momentDate = moment.utc(date);
let formattedDateTooltip;

switch (granularity) {
case GRANULARITY_TYPES.QUARTERLY:
formattedDateTooltip = dateHelpers.timestampQuarterFormats.yearLong;
break;
return `${momentDate.format(dateHelpers.timestampQuarterFormats.yearShort)} - ${momentDate
.add(1, 'quarter')
.format(dateHelpers.timestampQuarterFormats.yearShort)}`;

case GRANULARITY_TYPES.MONTHLY:
formattedDateTooltip = dateHelpers.timestampMonthFormats.yearLong;
break;
return momentDate.format(dateHelpers.timestampMonthFormats.yearLong);

case GRANULARITY_TYPES.WEEKLY:
return `${momentDate.format(dateHelpers.timestampDayFormats.short)} - ${momentDate
.add(1, 'week')
.format(dateHelpers.timestampDayFormats.yearShort)}`;

case GRANULARITY_TYPES.DAILY:
default:
formattedDateTooltip = dateHelpers.timestampDayFormats.long;
break;
return momentDate.format(dateHelpers.timestampDayFormats.long);
}

return momentDate.format(formattedDateTooltip);
};

/**
Expand Down
12 changes: 6 additions & 6 deletions src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ msgstr \\"\\"
msgid \\"curiosity-graph.cardHeading\\"
msgstr \\"\\"
#: src/components/graphCard/graphCardHelpers.js:75
#: src/components/graphCard/graphCardHelpers.js:77
msgid \\"curiosity-graph.dateLabel\\"
msgstr \\"\\"
Expand All @@ -49,16 +49,16 @@ msgstr \\"\\"
msgid \\"curiosity-graph.dropdownWeekly\\"
msgstr \\"\\"
#: src/components/graphCard/graphCardHelpers.js:83
#: src/components/graphCard/graphCardHelpers.js:85
msgid \\"curiosity-graph.infiniteThresholdLabel\\"
msgstr \\"\\"
#: src/components/graphCard/graphCardHelpers.js:97
#: src/components/graphCard/graphCardHelpers.js:99
msgid \\"curiosity-graph.noDataErrorLabel\\"
msgstr \\"\\"
#: src/components/graphCard/graphCardHelpers.js:84
#: src/components/graphCard/graphCardHelpers.js:89
#: src/components/graphCard/graphCardHelpers.js:86
#: src/components/graphCard/graphCardHelpers.js:91
msgid \\"curiosity-graph.noDataLabel\\"
msgstr \\"\\"
Expand All @@ -67,7 +67,7 @@ msgid \\"curiosity-graph.socketsHeading\\"
msgstr \\"\\"
#: src/components/graphCard/graphCard.js:134
#: src/components/graphCard/graphCardHelpers.js:86
#: src/components/graphCard/graphCardHelpers.js:88
msgid \\"curiosity-graph.thresholdLabel\\"
msgstr \\"\\"
Expand Down

0 comments on commit c215b4c

Please sign in to comment.