[Library] Add ranking chart web component (#2840)

Add a Ranking Chart web component based on the ranking tile Example screenshot: ![Screenshot 2023-06-22 at 2 20 39 PM](https://github.com/datacommonsorg/website/assets/4034366/022ae49d-fe99-4d86-bd65-9c9755cd85ac)
datacommonsorg · Jun 22, 2023 · b2119da · b2119da
1 parent 797b080
commit b2119da
Show file tree

Hide file tree

Showing 4 changed files with 134 additions and 1 deletion.
diff --git a/experimental/datacommons-js/example.html b/experimental/datacommons-js/example.html
@@ -128,6 +128,20 @@ <h2>Map Web Component</h2>
         statVarName="Population Below Poverty Level Status in Past Year"
         statVarDcid="Count_Person_BelowPovertyLevelInThePast12Months"
       ></datacommons-map>
+      <h2>Ranking Web Component</h2>
+      <datacommons-ranking
+        title="US States with the Highest Population"
+        placeDcid="country/USA"
+        enclosedPlaceType="State"
+        variableDcid="Count_Person"
+      ></datacommons-ranking>
+      <datacommons-ranking
+        title="US States with the Lowest Population"
+        placeDcid="country/USA"
+        enclosedPlaceType="State"
+        variableDcid="Count_Person"
+        showLowest=true
+      ></datacommons-ranking>
       <!-- Map chart-->
       <h2 class="mt-4 mb-4">JS Map Chart</h2>
       <div id="map-example"></div>

diff --git a/static/js/components/tiles/ranking_tile.tsx b/static/js/components/tiles/ranking_tile.tsx
@@ -47,7 +47,7 @@ const HEADING_HEIGHT = 36;
 const PER_RANKING_HEIGHT = 24;
 const FOOTER_HEIGHT = 26;
 
-interface RankingTilePropType {
+export interface RankingTilePropType {
   id: string;
   place: NamedTypedPlace;
   enclosedPlaceType: string;

diff --git a/static/library/index.ts b/static/library/index.ts
@@ -22,9 +22,11 @@ import {
 } from "./components";
 import { DEFAULT_API_ENDPOINT } from "./constants";
 import { DatacommonsMapComponent } from "./map_component";
+import { DatacommonsRankingComponent } from "./ranking_component";
 
 globalThis.datacommons = {
   DatacommonsMapComponent,
+  DatacommonsRankingComponent,
   drawBar: renderBarComponent,
   drawLine: renderLineComponent,
   drawMap: renderMapComponent,

diff --git a/static/library/ranking_component.ts b/static/library/ranking_component.ts
@@ -0,0 +1,117 @@
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { css, CSSResult, LitElement, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import _ from "lodash";
+import React from "react";
+import ReactDOM from "react-dom";
+
+import tilesCssString from "!!raw-loader!sass-loader!../css/tiles.scss";
+
+import {
+  RankingTile,
+  RankingTilePropType,
+} from "../js/components/tiles/ranking_tile";
+import { DEFAULT_API_ENDPOINT } from "./constants";
+
+/**
+ * Web component for rendering a ranking tile.
+ *
+ * Example usage:
+ *
+ * <!-- Show a ranking of US States by population, highest to lowest -->
+ * <datacommons-ranking
+ *      title="US States with the Highest Population"
+ *      placeDcid="country/USA"
+ *      enclosedPlaceType="State"
+ *      variableDcid="Count_Person"
+ * ></datacommons-ranking>
+ *
+ * <!-- Show a ranking of US States by population, lowest to highest -->
+ * <datacommons-ranking
+ *      title="US States with the Lowest Population"
+ *      placeDcid="country/USA"
+ *      enclosedPlaceType="State"
+ *      variableDcid="Count_Person"
+ *      showLowest=true
+ * ></datacommons-ranking>
+ */
+@customElement("datacommons-ranking")
+export class DatacommonsRankingComponent extends LitElement {
+  // Inject tiles.scss styles directly into web component
+  static styles: CSSResult = css`
+    ${unsafeCSS(tilesCssString)}
+  `;
+
+  // Title of the chart
+  @property()
+  title!: string;
+
+  // DCID of the parent place
+  @property()
+  placeDcid!: string;
+
+  // Type of child place to rank (ex: State, County)
+  @property()
+  enclosedPlaceType!: string;
+
+  // DCID of the statistical variable to compare values for
+  @property()
+  variableDcid!: string;
+
+  // Optional: whether to show a lowest-to-highest ranking
+  // If not specified, defaults to highest-to-lowest
+  // To show places with lowest value first, set showLowest=true
+  @property()
+  showLowest: boolean;
+
+  render(): HTMLElement {
+    const rankingTileProps: RankingTilePropType = {
+      apiRoot: DEFAULT_API_ENDPOINT,
+      enclosedPlaceType: this.enclosedPlaceType,
+      id: `chart-${_.uniqueId()}`,
+      place: {
+        dcid: this.placeDcid,
+        name: "",
+        types: [],
+      },
+      rankingMetadata: {
+        diffBaseDate: "",
+        showHighest: !this.showLowest,
+        showLowest: this.showLowest,
+        showMultiColumn: false,
+      },
+      statVarSpec: [
+        {
+          denom: "",
+          log: false,
+          name: "",
+          scaling: 1,
+          statVar: this.variableDcid,
+          unit: "",
+        },
+      ],
+      title: this.title,
+    };
+    const mountPoint = document.createElement("span");
+    ReactDOM.render(
+      React.createElement(RankingTile, rankingTileProps),
+      mountPoint
+    );
+    return mountPoint;
+  }
+}