Skip to content

Commit

Permalink
feat(chartArea): issues/75 aggregated tooltips (#112)
Browse files Browse the repository at this point in the history 
* build, added victory package
* chartArea, aggregated tooltips display
* locales, update legend copy to match storyboard
* graphCardSelectors, minor reselect memoization issue
  • Loading branch information
@cdcabrera
cdcabrera committed Oct 16, 2019
1 parent 9937f12 commit 0031dfd
Show file tree
Hide file tree
Showing 11 changed files with 364 additions and 226 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,8 @@
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^6.1.1",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
"reselect": "^4.0.0",
"victory": "^33.1.1"
},
"devDependencies": {
"apidoc-mock": "^3.0.1",
Expand Down
8 changes: 4 additions & 4 deletions public/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"tooltipPreviousLabelWeekly": "from previous week",
"tooltipPreviousLabelMonthly": "from previous month",
"tooltipPreviousLabelQuarterly": "from previous quarter",
"tooltipSockets": "sockets on",
"tooltipSocketsThreshold": "Socket Threshold",
"legendSocketsLabel": "Sockets",
"legendSocketsThresholdLabel": "Socket Threshold"
"tooltipSockets": "systems on",
"tooltipSocketsThreshold": "Subscription Threshold",
"legendSocketsLabel": "Systems",
"legendSocketsThresholdLabel": "Subscription Threshold"
}
}
84 changes: 42 additions & 42 deletions src/common/__tests__/__snapshots__/graphHelpers.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,34 +4,34 @@ exports[`GraphHelpers should convert graph data and generate tooltips when usage
Object {
"chartData": Array [
Object {
"tooltip": "5 lorem tooltip label Jun 1",
"tooltip": "5 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 5,
},
Object {
"tooltip": "7 lorem tooltip label Jun 2
"tooltip": "7 lorem tooltip label June 2
+2 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 7,
},
Object {
"tooltip": "3 lorem tooltip label Jun 3
"tooltip": "3 lorem tooltip label June 3
-4 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 3,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4
"tooltip": "0 lorem tooltip label June 4
-3 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 5",
"tooltip": "0 lorem tooltip label June 5",
"x": 4,
"xAxisLabel": "Jun 5",
"y": 0,
Expand All @@ -46,31 +46,31 @@ exports[`GraphHelpers should convert graph data and return zeroed usage array if
Object {
"chartData": Array [
Object {
"tooltip": "0 lorem tooltip label Jun 1",
"tooltip": "0 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 2",
"tooltip": "0 lorem tooltip label June 2",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 3",
"tooltip": "0 lorem tooltip label June 3",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4",
"tooltip": "0 lorem tooltip label June 4",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 5",
"tooltip": "0 lorem tooltip label June 5",
"x": 4,
"xAxisLabel": "Jun 5",
"y": 0,
Expand All @@ -85,31 +85,31 @@ exports[`GraphHelpers should convert graph data and return zeroed usage array if
Object {
"chartData": Array [
Object {
"tooltip": "0 lorem tooltip label Jun 1",
"tooltip": "0 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 2",
"tooltip": "0 lorem tooltip label June 2",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 3",
"tooltip": "0 lorem tooltip label June 3",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4",
"tooltip": "0 lorem tooltip label June 4",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 5",
"tooltip": "0 lorem tooltip label June 5",
"x": 4,
"xAxisLabel": "Jun 5",
"y": 0,
Expand All @@ -124,31 +124,31 @@ exports[`GraphHelpers should convert graph data and returned zeroed array when u
Object {
"chartData": Array [
Object {
"tooltip": "0 lorem tooltip label Jun 1",
"tooltip": "0 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 2",
"tooltip": "0 lorem tooltip label June 2",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 3",
"tooltip": "0 lorem tooltip label June 3",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4",
"tooltip": "0 lorem tooltip label June 4",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jun 5",
"tooltip": "0 lorem tooltip label June 5",
"x": 4,
"xAxisLabel": "Jun 5",
"y": 0,
Expand All @@ -163,34 +163,34 @@ exports[`GraphHelpers should convert graph data and threshold data: threshold ch
Object {
"chartData": Array [
Object {
"tooltip": "5 lorem tooltip label Jun 1",
"tooltip": "5 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 5,
},
Object {
"tooltip": "7 lorem tooltip label Jun 2
"tooltip": "7 lorem tooltip label June 2
+2 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 7,
},
Object {
"tooltip": "3 lorem tooltip label Jun 3
"tooltip": "3 lorem tooltip label June 3
-4 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 3,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4
"tooltip": "0 lorem tooltip label June 4
-3 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "1 lorem tooltip label Jun 5
"tooltip": "1 lorem tooltip label June 5
+1 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 4,
"xAxisLabel": "Jun 5",
Expand Down Expand Up @@ -232,34 +232,34 @@ exports[`GraphHelpers should convert graph data and threshold data: threshold ch
Object {
"chartData": Array [
Object {
"tooltip": "5 lorem tooltip label Jun 1",
"tooltip": "5 lorem tooltip label June 1",
"x": 0,
"xAxisLabel": "Jun 1",
"y": 5,
},
Object {
"tooltip": "7 lorem tooltip label Jun 2
"tooltip": "7 lorem tooltip label June 2
+2 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 1,
"xAxisLabel": "Jun 2",
"y": 7,
},
Object {
"tooltip": "3 lorem tooltip label Jun 3
"tooltip": "3 lorem tooltip label June 3
-4 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 2,
"xAxisLabel": "Jun 3",
"y": 3,
},
Object {
"tooltip": "0 lorem tooltip label Jun 4
"tooltip": "0 lorem tooltip label June 4
-3 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 3,
"xAxisLabel": "Jun 4",
"y": 0,
},
Object {
"tooltip": "1 lorem tooltip label Jun 5
"tooltip": "1 lorem tooltip label June 5
+1 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 4,
"xAxisLabel": "Jun 5",
Expand All @@ -275,33 +275,33 @@ exports[`GraphHelpers should handle cross quarter labels: quarter granularity 1`
Object {
"chartData": Array [
Object {
"tooltip": "5 lorem tooltip label Apr",
"tooltip": "5 lorem tooltip label April",
"x": 0,
"xAxisLabel": "Apr",
"y": 5,
},
Object {
"tooltip": "0 lorem tooltip label Jul
"tooltip": "0 lorem tooltip label July
-5 t('curiosity-graph.tooltipPreviousLabelQuarterly')",
"x": 1,
"xAxisLabel": "Jul",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Oct",
"tooltip": "0 lorem tooltip label October",
"x": 2,
"xAxisLabel": "Oct",
"y": 0,
},
Object {
"tooltip": "0 lorem tooltip label Jan 2019",
"tooltip": "0 lorem tooltip label January 2019",
"x": 3,
"xAxisLabel": "Jan
2019",
"y": 0,
},
Object {
"tooltip": "7 lorem tooltip label Apr
"tooltip": "7 lorem tooltip label April
+7 t('curiosity-graph.tooltipPreviousLabelQuarterly')",
"x": 4,
"xAxisLabel": "Apr",
Expand All @@ -317,44 +317,44 @@ exports[`GraphHelpers should handle cross year labels: cross year 1`] = `
Object {
"chartData": Array [
Object {
"tooltip": "5 lorem tooltip label Dec 31",
"tooltip": "5 lorem tooltip label December 31",
"x": 0,
"xAxisLabel": "Dec 31",
"y": 5,
},
Object {
"tooltip": "7 lorem tooltip label Jan 1
"tooltip": "7 lorem tooltip label January 1
+2 t('curiosity-graph.tooltipPreviousLabelDaily')",
"x": 1,
"xAxisLabel": "Jan 1",
"y": 7,
},
Object {
"tooltip": "7 lorem tooltip label Jan 2",
"tooltip": "7 lorem tooltip label January 2",
"x": 2,
"xAxisLabel": "Jan 2",
"y": 7,
},
Object {
"tooltip": "7 lorem tooltip label Jan 3",
"tooltip": "7 lorem tooltip label January 3",
"x": 3,
"xAxisLabel": "Jan 3",
"y": 7,
},
Object {
"tooltip": "7 lorem tooltip label Jan 4",
"tooltip": "7 lorem tooltip label January 4",
"x": 4,
"xAxisLabel": "Jan 4",
"y": 7,
},
Object {
"tooltip": "7 lorem tooltip label Jan 5 2019",
"tooltip": "7 lorem tooltip label January 5 2019",
"x": 5,
"xAxisLabel": "Jan 5 2019",
"y": 7,
},
Object {
"tooltip": "7 lorem tooltip label Jan 6",
"tooltip": "7 lorem tooltip label January 6",
"x": 6,
"xAxisLabel": "Jan 6",
"y": 7,
Expand Down
Loading

0 comments on commit 0031dfd

Please sign in to comment.