Add date of observations to charts (#409)

* add date info to charts * move date to title * address pr comments * fix tests Co-authored-by: beets <[email protected]>
datacommonsorg · Sep 15, 2020 · 4cde3d3 · 4cde3d3
1 parent 2092254
commit 4cde3d3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/server/webdriver_tests/place_explorer_test.py b/server/webdriver_tests/place_explorer_test.py
@@ -72,7 +72,7 @@ def test_demographics_link_and_switch_to_similar(self):
         age_charts = age_topic.find_elements_by_class_name("col")
         age_across_places_chart = age_charts[2]
         chart_title = age_across_places_chart.find_element_by_tag_name("h4").text
-        self.assertEqual("AGE ACROSS PLACES", chart_title)
+        self.assertEqual("AGE ACROSS PLACES(2018)", chart_title)
         origin = age_across_places_chart.find_element_by_class_name("svg-container").get_attribute("innerHTML")
         selects = Select(age_across_places_chart.find_element_by_tag_name("select"))
         # Select containing to see the change.

diff --git a/static/css/place/place.scss b/static/css/place/place.scss
@@ -171,6 +171,7 @@ $sidebar-top-padding: 132px;  // Keep in sync with place.ts: Y_SCROLL_LIMIT
 
 .chart-container h4 .sub-title {
   color: #999;
+  padding-left: .25rem;
 }
 
 .chart-container label {

diff --git a/static/js/place/place_template.tsx b/static/js/place/place_template.tsx
@@ -512,6 +512,7 @@ interface ChartStateType {
   dataPoints?: DataPoint[];
   dataGroups?: DataGroup[];
   elemWidth: number;
+  dateSelected?: string;
 }
 
 class Chart extends Component<ChartPropType, ChartStateType> {
@@ -521,7 +522,6 @@ class Chart extends Component<ChartPropType, ChartStateType> {
   parentRef: React.RefObject<HTMLOptionElement>;
   childrenRef: React.RefObject<HTMLOptionElement>;
   dcid: string;
-  titleSuffix: string;
   placeRelation: string;
 
   constructor(props: ChartPropType) {
@@ -540,7 +540,6 @@ class Chart extends Component<ChartPropType, ChartStateType> {
     this._handleWindowResize = this._handleWindowResize.bind(this);
     this._handlePlaceSelection = this._handlePlaceSelection.bind(this);
     this.dcid = props.dcid;
-    this.titleSuffix = "";
     // Default use similar places.
     if (this.props.placeType === "Country") {
       this.placeRelation = placeRelationEnum.CONTAINING;
@@ -558,12 +557,15 @@ class Chart extends Component<ChartPropType, ChartStateType> {
 
   render() {
     const config = this.props.config;
+    const dateString = this.state.dateSelected
+      ? "(" + this.state.dateSelected + ")"
+      : "";
     return (
       <div className="col" ref={this.chartElement}>
         <div className="chart-container">
           <h4>
             {config.title}
-            <span className="sub-title">{this.titleSuffix}</span>
+            <span className="sub-title">{dateString}</span>
           </h4>
           {config.axis === axisEnum.PLACE && (
             <div>
@@ -759,6 +761,7 @@ class Chart extends Component<ChartPropType, ChartStateType> {
         ).then((data) => {
           this.setState({
             dataPoints: data.getStatsPoint(dcid),
+            dateSelected: data.latestCommonDate,
           });
         });
         break;
@@ -817,6 +820,7 @@ class Chart extends Component<ChartPropType, ChartStateType> {
                     null,
                     (dcid) => `/place?dcid=${dcid}`
                   ),
+                  dateSelected: data.latestCommonDate,
                 });
               });
             });