fixes dates displayed in legend of Digital Afterlife LinePlot (#123)

Datawheel · Feb 24, 2017 · b65017e · b65017e
1 parent beee377
commit b65017e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/app/components/profile/person/Person.jsx b/app/components/profile/person/Person.jsx
@@ -16,6 +16,7 @@ import {activateSearch} from "actions/users";
 import {fetchPerson, fetchOccupationRanks, fetchCountryRanks, fetchYearRanks, fetchPageviews, fetchCreationdates} from "actions/person";
 import "css/components/profile/person";
 import {LinePlot} from "d3plus-react";
+import {extent} from "d3-array";
 
 import {FORMATTERS} from "types";
 
@@ -87,7 +88,11 @@ class Person extends Component {
                     },
                     timeline: false,
                     tooltipConfig: {
-                      body: d => `<span class="center">${FORMATTERS.date(d.x)} - ${FORMATTERS.commas(d.langs || d.views)}</span>`
+                      body: d => {
+                        let date = d.x instanceof Array ? extent(d.x) : [d.x];
+                        date = date.length > 1 ? date.map(FORMATTERS.dateShort) : date.map(FORMATTERS.date);
+                        return `<span class="center">${date.join(" to ")} - ${FORMATTERS.commas(d.langs || d.views)}</span>`;
+                      }
                     }
                   }} />
       },

diff --git a/app/types/index.js b/app/types/index.js
@@ -44,6 +44,7 @@ export const FORMATTERS = {
   bigNum: format(".2s"),
   shareWhole: format(".0%"),
   date: timeFormat("%B %d, %Y"),
+  dateShort: timeFormat("%m/%d/%y"),
   year: y => y < 0 ? `${Math.abs(y)} BC` : Math.round(y),
   ordinal: n => {
     if (n > 3 && n < 21) return `${n}th`; // thanks kennebec