Add link to group bar chart x tick when it is a place (#391)

datacommonsorg · Sep 10, 2020 · e51f5d9 · e51f5d9
1 parent 0df95b8
commit e51f5d9
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 4 deletions.
diff --git a/static/css/draw.scss b/static/css/draw.scss
@@ -72,3 +72,8 @@ path.line {
 .label {
   font-size: 12px;
 }
+
+.place-tick {
+  cursor: pointer;
+  text-decoration: underline;
+}
diff --git a/static/js/chart/base.ts b/static/js/chart/base.ts
@@ -33,9 +33,12 @@ class DataGroup {
   // For example, the label of a data point could be date string, while the
   // label of the DataGroup is a place name.
   label: string;
-  constructor(label: string, value: DataPoint[]) {
+  // Label link to show on UI element (optional)
+  link?: string;
+  constructor(label: string, value: DataPoint[], link?: string) {
     this.value = value;
     this.label = label;
+    this.link = link;
   }
   sum(): number {
     return this.value

diff --git a/static/js/chart/draw.ts b/static/js/chart/draw.ts
@@ -305,6 +305,10 @@ function drawGroupBarChart(
   dataGroups: DataGroup[],
   unit?: string
 ): void {
+  const labelToLink = {};
+  for (const dataGroup of dataGroups) {
+    labelToLink[dataGroup.label] = dataGroup.link;
+  }
   const keys = dataGroups[0].value.map((dp) => dp.label);
   const x0 = d3
     .scaleBand()
@@ -352,6 +356,18 @@ function drawGroupBarChart(
     .attr("fill", (d) => colorFn(d.key));
 
   appendLegendElem(id, colorFn, keys);
+
+  // Add link to place name labels.
+  svg
+    .select(".x.axis")
+    .selectAll(".tick text")
+    .filter(function (this) {
+      return !!labelToLink[d3.select(this).text()];
+    })
+    .attr("class", "place-tick")
+    .on("click", function (this) {
+      window.open(labelToLink[d3.select(this).text()], "_blank");
+    });
 }
 
 /**

diff --git a/static/js/place/place_template.tsx b/static/js/place/place_template.tsx
@@ -824,7 +824,10 @@ class Chart extends Component<ChartPropType, ChartStateType> {
                 this.props.chartData
               ).then((data) => {
                 this.setState({
-                  dataGroups: data.getPlaceGroupWithStatsVar(),
+                  dataGroups: data.getPlaceGroupWithStatsVar(
+                    null,
+                    (dcid) => `/place?dcid=${dcid}`
+                  ),
                 });
               });
             });

diff --git a/static/js/shared/data_fetcher.ts b/static/js/shared/data_fetcher.ts
@@ -72,8 +72,13 @@ class StatsData {
    *
    * @param date? The date of the data point. By default pick the last date
    * in the time series.
+   *
+   * @param linkFn? An function to generate chart link from place dcid.
    */
-  getPlaceGroupWithStatsVar(date?: string): DataGroup[] {
+  getPlaceGroupWithStatsVar(
+    date?: string,
+    linkFn?: (s: string) => string
+  ): DataGroup[] {
     if (!date) {
       date = this.dates.slice(-1)[0];
     }
@@ -96,7 +101,11 @@ class StatsData {
         });
       }
       if (dataPoints.length > 0) {
-        result.push(new DataGroup(placeName, dataPoints));
+        const dg = new DataGroup(placeName, dataPoints);
+        if (linkFn) {
+          dg.link = linkFn(place);
+        }
+        result.push(dg);
       }
     }
     return result;