From dc26f7d93de386bc6f6c8bdd97cad7ffb1d5f6c4 Mon Sep 17 00:00:00 2001
From: kiwansim <emily.kiwan.sim@gmail.com>
Date: Tue, 2 Jan 2024 18:07:13 -0500
Subject: [PATCH] Update indicators timeline start years & select components
 (#841)

* Add url params for timeline indicators (#830)

* add indicator param to timeline route, and update history shallow on selection

* fix optional route definition

* replace url rather than adding to history

* swap summary for timeline in route tests

* fix links to timeline, reorg helper funs

* reset url to default indicator if param is invalid or missing

* remove console.log

---------

Co-authored-by: kiwan <kiwan.sim@gmail.com>

* Add Rent Stabilized Units indicator to Timeline (#837)

* change rent stab latest year to 2022

* add 2022 as rsunitslatestyear, update yml dependenc, add csv for tests

* update nycdb src branc

* add nycdb test data for rentstab and hpd_complaints

* add rentstab indicator to timeline

* update MonthlyTimelineData type to match SQL

* remove stacked bar denoting market rate units, add horizontal line for latest total unit count

* add link to THE CITY's map visualization

* run prettier

* fussing around with viz UI

* change minor variable to trigger deploy

* yaxis max handled in switch statement

* run lingui extract

---------

Co-authored-by: Maxwell Austensen <m.austensen@gmail.com>

* replace Dropdown with Select react component, refactor timespan and indicator selectors

* apply JF style to react select

* prettier

* update startYear for different indicators

* run prettier

* lingui

* remove commented out code

---------

Co-authored-by: Maxwell Austensen <maxwell@justfix.org>
Co-authored-by: Maxwell Austensen <m.austensen@gmail.com>
---
 client/src/components/Indicators.tsx         | 181 ++++++++++---------
 client/src/components/IndicatorsDatasets.tsx |  82 +++------
 client/src/components/IndicatorsViz.tsx      |  18 +-
 client/src/locales/en/messages.po            |  82 +++++----
 client/src/locales/es/messages.po            |  81 +++++----
 client/src/styles/Indicators.scss            |  20 ++
 wow/sql/address_indicatorhistory.sql         |   2 +-
 7 files changed, 243 insertions(+), 223 deletions(-)

diff --git a/client/src/components/Indicators.tsx b/client/src/components/Indicators.tsx
index d163c2cd5..82c97ab2a 100644
--- a/client/src/components/Indicators.tsx
+++ b/client/src/components/Indicators.tsx
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-
+import Select from "react-select";
 import Helpers from "../util/helpers";
 
 import IndicatorsViz from "../components/IndicatorsViz";
@@ -11,7 +11,7 @@ import { I18n } from "@lingui/core";
 import { t, Trans } from "@lingui/macro";
 
 import "styles/Indicators.css";
-import { IndicatorsDatasetRadio, INDICATORS_DATASETS } from "./IndicatorsDatasets";
+import { INDICATORS_DATASETS } from "./IndicatorsDatasets";
 import {
   indicatorsInitialState,
   IndicatorsProps,
@@ -23,7 +23,6 @@ import {
   indicatorsDatasetIds,
 } from "./IndicatorsTypes";
 import { NetworkErrorMessage } from "./NetworkErrorMessage";
-import { Dropdown } from "./Dropdown";
 import { AmplitudeEvent, logAmplitudeEvent } from "./Amplitude";
 import { withRouter } from "react-router-dom";
 import { RouteComponentProps } from "react-router";
@@ -33,7 +32,7 @@ type TimeSpanTranslationsMap = {
   [K in IndicatorsTimeSpan]: (i18n: I18n) => string;
 };
 
-const timeSpanTranslations: TimeSpanTranslationsMap = {
+const TIMESPAN_TRANSLATIONS: TimeSpanTranslationsMap = {
   month: (i18n) => i18n._(t`month`),
   quarter: (i18n) => i18n._(t`quarter`),
   year: (i18n) => i18n._(t`year`),
@@ -73,6 +72,7 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
       activeTimeSpan: indicator === "rentstabilizedunits" ? "year" : "quarter",
     };
     this.handleVisChange = this.handleVisChange.bind(this);
+    this.handleTimeSpanChange = this.handleTimeSpanChange.bind(this);
   }
 
   /** Shifts the X-axis 'left' or 'right', or 'reset' the X-axis to default */
@@ -119,28 +119,31 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
     this.props.history.replace(`${timelinePath}/${indicator}`);
   }
 
-  handleVisChange(selectedVis: IndicatorsDatasetId) {
-    if (selectedVis === "rentstabilizedunits") {
-      this.handleTimeSpanChange("year");
+  handleVisChange(selectedOption: any) {
+    const activeVis = selectedOption.value;
+
+    logAmplitudeEvent(`${activeVis.analyticsName}TimelineTab` as AmplitudeEvent);
+    window.gtag("event", `${activeVis.analyticsName}-timeline-tab`);
+
+    if (activeVis === "rentstabilizedunits") {
+      this.setState({
+        activeTimeSpan: "year",
+        monthsInGroup: 12,
+      });
     }
 
-    this.setState({
-      activeVis: selectedVis,
-    });
-    this.setUrlIndicator(selectedVis);
+    this.setState({ activeVis });
+    this.setUrlIndicator(activeVis);
   }
 
-  /** Changes viewing timespan to be by 'year', 'quarter', or 'month' */
-  handleTimeSpanChange(selectedTimeSpan: IndicatorsTimeSpan) {
-    var monthsInGroup = selectedTimeSpan === "quarter" ? 3 : selectedTimeSpan === "year" ? 12 : 1;
+  handleTimeSpanChange(selectedOption: any) {
+    const activeTimeSpan = selectedOption.value;
+    var monthsInGroup = activeTimeSpan === "quarter" ? 3 : activeTimeSpan === "year" ? 12 : 1;
 
-    logAmplitudeEvent(`${selectedTimeSpan}TimelineTab` as AmplitudeEvent);
-    window.gtag("event", `${selectedTimeSpan}-timeline-tab`);
+    logAmplitudeEvent(`${activeTimeSpan}TimelineTab` as AmplitudeEvent);
+    window.gtag("event", `${activeTimeSpan}-timeline-tab`);
 
-    this.setState({
-      activeTimeSpan: selectedTimeSpan,
-      monthsInGroup: monthsInGroup,
-    });
+    this.setState({ activeTimeSpan, monthsInGroup });
   }
 
   updateData() {
@@ -225,14 +228,19 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
       );
     } else {
       const { state, send } = this.props;
-
       const { detailAddr } = state.context.portfolioData;
-
-      const { activeVis } = this.state;
+      const {
+        defaultVis,
+        activeVis,
+        activeTimeSpan,
+        monthsInGroup,
+        xAxisStart,
+        xAxisViewableColumns,
+      } = this.state;
       const activeData = state.context.timelineData[activeVis];
 
       const xAxisLength = activeData.labels
-        ? Math.floor(activeData.labels.length / this.state.monthsInGroup)
+        ? Math.floor(activeData.labels.length / monthsInGroup)
         : 0;
       const indicatorDataTotal = activeData.values.total
         ? activeData.values.total.reduce((total: number, sum: number) => total + sum)
@@ -244,14 +252,29 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
         INDICATORS_DATASETS[datasetId].name(i18n)
       );
       const timeSpanSelectionNames = indicatorsTimeSpans.map((timeSpan) =>
-        timeSpanTranslations[timeSpan](i18n)
+        TIMESPAN_TRANSLATIONS[timeSpan](i18n)
       );
 
       const detailAddrStr = `${detailAddr.housenumber} ${Helpers.titleCase(
         detailAddr.streetname
       )}, ${Helpers.titleCase(detailAddr.boro)}`;
 
-      const datasetDescription = INDICATORS_DATASETS[this.state.activeVis];
+      const datasetDescription = INDICATORS_DATASETS[activeVis];
+
+      const indicatorOptions = indicatorsDatasetIds.map((id) => {
+        return {
+          label: INDICATORS_DATASETS[id].name(i18n),
+          value: id,
+        };
+      });
+
+      const timeSpanOptions = indicatorsTimeSpans.map((id) => {
+        return {
+          label: TIMESPAN_TRANSLATIONS[id](i18n),
+          value: id,
+          isDisabled: activeVis === "rentstabilizedunits" && id !== "year",
+        };
+      });
 
       return (
         <div className="Page Indicators">
@@ -272,25 +295,27 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
                       width: `${getDropdownWidthFromLongestSelection(datasetSelectionNames)}px`,
                     }}
                   >
-                    <span className="Indicators__linksTitle text-uppercase">
+                    <label
+                      id="indicator-dropdown-title"
+                      className="Indicators__linksTitle text-uppercase"
+                      htmlFor="indicator-dropdown"
+                      aria-label={`${i18n._(t`Display:`)} ${INDICATORS_DATASETS[activeVis].name(
+                        i18n
+                      )}`}
+                    >
                       <Trans>Display:</Trans>
-                    </span>{" "}
+                    </label>
                     <br />
-                    <Dropdown
-                      buttonLabel={INDICATORS_DATASETS[activeVis].name(i18n)}
-                      buttonAriaLabel={`${i18n._(t`Display:`)} ${INDICATORS_DATASETS[
-                        activeVis
-                      ].name(i18n)}`}
-                    >
-                      {indicatorsDatasetIds.map((datasetKey, i) => (
-                        <IndicatorsDatasetRadio
-                          key={i}
-                          id={datasetKey}
-                          activeId={activeVis}
-                          onChange={this.handleVisChange}
-                        />
-                      ))}
-                    </Dropdown>
+                    <Select
+                      id="indicator-dropdown"
+                      className="basic-single"
+                      classNamePrefix="select"
+                      aria-labelledby="indicator-dropdown-title"
+                      name="indicator-type"
+                      defaultValue={indicatorOptions.find((i) => i.value === defaultVis)}
+                      options={indicatorOptions}
+                      onChange={this.handleVisChange}
+                    />
                   </div>
                   <div
                     className="Indicators__linksContainer"
@@ -298,36 +323,31 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
                       width: `${getDropdownWidthFromLongestSelection(timeSpanSelectionNames)}px`,
                     }}
                   >
-                    <span className="Indicators__linksTitle text-uppercase">
+                    <label
+                      id="timespan-dropdown-title"
+                      className="Indicators__linksTitle text-uppercase"
+                      htmlFor="timespan-dropdown"
+                      aria-label={`${i18n._(t`View by:`)} ${TIMESPAN_TRANSLATIONS[activeTimeSpan](
+                        i18n
+                      )}`}
+                    >
                       <Trans>View by:</Trans>
-                    </span>
+                    </label>
                     <br />
-                    <Dropdown
-                      buttonLabel={timeSpanTranslations[this.state.activeTimeSpan](i18n)}
-                      buttonAriaLabel={`${i18n._(t`View by:`)} ${timeSpanTranslations[
-                        this.state.activeTimeSpan
-                      ](i18n)}`}
-                    >
-                      {indicatorsTimeSpans.map((timespan, i) => (
-                        <li className="menu-item" key={i}>
-                          <label
-                            className={
-                              "form-radio" +
-                              (this.state.activeTimeSpan === timespan ? " active" : "")
-                            }
-                          >
-                            <input
-                              type="radio"
-                              name={timespan}
-                              checked={this.state.activeTimeSpan === timespan ? true : false}
-                              onChange={() => this.handleTimeSpanChange(timespan)}
-                              disabled={activeVis === "rentstabilizedunits" && timespan !== "year"}
-                            />
-                            <i className="form-icon" /> {timeSpanTranslations[timespan](i18n)}
-                          </label>
-                        </li>
-                      ))}
-                    </Dropdown>
+                    <Select
+                      id="timespan-dropdown"
+                      className="basic-single"
+                      classNamePrefix="select"
+                      aria-labelledby="timespan-dropdown-title"
+                      name="timespan"
+                      defaultValue={
+                        activeVis === "rentstabilizedunits"
+                          ? timeSpanOptions.find((i) => i.value === "year")
+                          : timeSpanOptions.find((i) => i.value === "quarter")
+                      }
+                      options={timeSpanOptions}
+                      onChange={this.handleTimeSpanChange}
+                    />
                   </div>
                 </div>
                 <span className="title viz-title">
@@ -338,14 +358,10 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
                 <div className="Indicators__viz">
                   <button
                     aria-label={i18n._(t`Move chart data left.`)}
-                    aria-hidden={
-                      this.state.xAxisStart === 0 || this.state.activeTimeSpan === "year"
-                    }
-                    aria-disabled={
-                      this.state.xAxisStart === 0 || this.state.activeTimeSpan === "year"
-                    }
+                    aria-hidden={xAxisStart === 0 || activeTimeSpan === "year"}
+                    aria-disabled={xAxisStart === 0 || activeTimeSpan === "year"}
                     className={
-                      this.state.xAxisStart === 0 || this.state.activeTimeSpan === "year"
+                      xAxisStart === 0 || activeTimeSpan === "year"
                         ? "btn btn-off btn-axis-shift"
                         : "btn btn-axis-shift"
                     }
@@ -360,16 +376,13 @@ class IndicatorsWithoutI18n extends Component<IndicatorsWithRouterProps, Indicat
                   <button
                     aria-label={i18n._(t`Move chart data right.`)}
                     aria-hidden={
-                      this.state.xAxisStart + this.state.xAxisViewableColumns >= xAxisLength ||
-                      this.state.activeTimeSpan === "year"
+                      xAxisStart + xAxisViewableColumns >= xAxisLength || activeTimeSpan === "year"
                     }
                     aria-disabled={
-                      this.state.xAxisStart + this.state.xAxisViewableColumns >= xAxisLength ||
-                      this.state.activeTimeSpan === "year"
+                      xAxisStart + xAxisViewableColumns >= xAxisLength || activeTimeSpan === "year"
                     }
                     className={
-                      this.state.xAxisStart + this.state.xAxisViewableColumns >= xAxisLength ||
-                      this.state.activeTimeSpan === "year"
+                      xAxisStart + xAxisViewableColumns >= xAxisLength || activeTimeSpan === "year"
                         ? "btn btn-off btn-axis-shift"
                         : "btn btn-axis-shift"
                     }
diff --git a/client/src/components/IndicatorsDatasets.tsx b/client/src/components/IndicatorsDatasets.tsx
index bf185d7a2..924e56df2 100644
--- a/client/src/components/IndicatorsDatasets.tsx
+++ b/client/src/components/IndicatorsDatasets.tsx
@@ -1,21 +1,17 @@
 import React from "react";
 import { I18n } from "@lingui/core";
 import { t, Trans, plural } from "@lingui/macro";
-import { withI18n } from "@lingui/react";
 import { IndicatorsDatasetId } from "./IndicatorsTypes";
-import { AmplitudeEvent, logAmplitudeEvent } from "./Amplitude";
 
 /**
  * This interface encapsulates metadata about an Indicators dataset.
  */
 export interface IndicatorsDataset {
-  /** The localized name of the dataset, e.g. "HPD Complaints". */
+  // The localized name of the dataset, e.g. "HPD Complaints"
   name: (i18n: I18n) => string;
 
-  /**
-   * The name to use for the dataset in analytics. The type options must be defined here
-   * for it to recognize the template strings as valid values for the AmplitudeEvent type
-   */
+  // The name to use for the dataset in analytics. The type options must be defined here
+  // for it to recognize the template strings as valid values for the AmplitudeEvent type
   analyticsName:
     | "hpdcomplaints"
     | "hpdviolations"
@@ -24,20 +20,18 @@ export interface IndicatorsDataset {
     | "evictionfilings"
     | "rentstabilizedunits";
 
-  /**
-   * The localized name for a particular "quantity" of the dataset, e.g.
-   * "15 HPD Complaints issued since 2014".
-   */
+  // The localized name for a particular "quantity" of the dataset, e.g. "15 HPD Complaints issued since 2014".
   quantity: (i18n: I18n, value: number) => string;
 
-  /**
-   * The localized name for label on the Y-axis, when the given dataset is shown.
-   */
+  // Start year for the display data. Determined by several factors to ensure timelines are showing the most
+  // relevant and accurate yearly counts across different indicators.
+  // e.g. HPD Violations are confirmed to be reported starting Oct 2012.
+  startYear: number;
+
+  // The localized name for label on the Y-axis, when the given dataset is shown.
   yAxisLabel: (i18n: I18n) => string;
 
-  /**
-   * A localized explanation for what the dataset means, and where to find more information.
-   */
+  // A localized explanation for what the dataset means, and where to find more information.
   explanation: (i18n: I18n) => JSX.Element;
 }
 
@@ -53,10 +47,11 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
       i18n._(
         plural({
           value,
-          one: "One HPD Complaint Issued since 2014",
-          other: "# HPD Complaints Issued since 2014",
+          one: "One HPD Complaint Issued since 2012",
+          other: "# HPD Complaints Issued since 2012",
         })
       ),
+    startYear: 2012, // set to match HPD Violations startYear
     yAxisLabel: (i18n) => i18n._(t`Complaints Issued`),
     explanation: () => (
       <Trans render="span">
@@ -91,10 +86,11 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
       i18n._(
         plural({
           value,
-          one: "One HPD Violation Issued since 2010",
-          other: "# HPD Violations Issued since 2010",
+          one: "One HPD Violation Issued since 2012",
+          other: "# HPD Violations Issued since 2012",
         })
       ),
+    startYear: 2012, // HPD confirmed accuracy of violations data starting Oct 2012
     yAxisLabel: (i18n) => i18n._(t`Violations Issued`),
     explanation: () => (
       <Trans render="span">
@@ -137,6 +133,7 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
           other: "# Building Permit Applications since 2010",
         })
       ),
+    startYear: 2010, // Noticed a significant drop in reported numbers before 2010
     yAxisLabel: (i18n) => i18n._(t`Building Permits Applied For`),
     explanation: () => (
       <Trans render="span">
@@ -168,6 +165,7 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
           other: "# DOB/ECB Violations Issued since 2010",
         })
       ),
+    startYear: 2010, // Noticed a significant drop in reported numbers before 2010
     yAxisLabel: (i18n) => i18n._(t`Violations Issued`),
     explanation: () => (
       <Trans render="span">
@@ -219,6 +217,7 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
               other: "# Eviction Filings since 2017",
             })
           ),
+    startYear: 2017, // Data begins at 2017
     yAxisLabel: (i18n) => i18n._(t`Eviction Filings`),
     explanation: () => (
       <Trans render="span">
@@ -260,7 +259,8 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
   rentstabilizedunits: {
     name: (i18n) => i18n._(t`Rent Stabilized Units`),
     analyticsName: "rentstabilizedunits",
-    quantity: (i18n, value) => i18n._("Rent Stabilized Units registered since 2010"),
+    quantity: (i18n, value) => i18n._("Rent Stabilized Units registered since 2007"),
+    startYear: 2007, // Noticed a significant change in reported counts before 2007. Also, any older data may not be all that useful
     yAxisLabel: (i18n) => i18n._(t`Number of Units`),
     explanation: () => (
       <Trans render="span">
@@ -318,41 +318,3 @@ export const INDICATORS_DATASETS: IndicatorsDatasetMap = {
     ),
   },
 };
-
-const IndicatorsDatasetRadioWithoutI18n: React.FC<{
-  i18n: I18n;
-
-  /** The dataset ID which this radio button will activate. */
-  id: IndicatorsDatasetId;
-
-  /** The dataset ID of the currently active dataset. */
-  activeId: IndicatorsDatasetId;
-
-  /** A handler called when this radio button is selected. */
-  onChange: (id: IndicatorsDatasetId) => void;
-}> = ({ i18n, id, activeId, onChange }) => {
-  const dataset = INDICATORS_DATASETS[id];
-  const isActive = activeId === id;
-  const analyticsName = dataset.analyticsName;
-  const name = dataset.name(i18n);
-
-  return (
-    <li className="menu-item">
-      <label
-        className={"form-radio" + (isActive ? " active" : "")}
-        onClick={() => {
-          logAmplitudeEvent(`${analyticsName}TimelineTab` as AmplitudeEvent);
-          window.gtag("event", `${analyticsName}-timeline-tab`);
-        }}
-      >
-        <input type="radio" name={name} checked={isActive} onChange={() => onChange(id)} />
-        <i className="form-icon"></i> {name}
-      </label>
-    </li>
-  );
-};
-
-/**
- * Render a radio button for the dataset with the given ID.
- */
-export const IndicatorsDatasetRadio = withI18n()(IndicatorsDatasetRadioWithoutI18n);
diff --git a/client/src/components/IndicatorsViz.tsx b/client/src/components/IndicatorsViz.tsx
index bf6145e35..8979b8cdd 100644
--- a/client/src/components/IndicatorsViz.tsx
+++ b/client/src/components/IndicatorsViz.tsx
@@ -310,15 +310,17 @@ class IndicatorsVizImplementation extends Component<IndicatorVizImplementationPr
     var labelPosition: string = ""; // specific graph label value where we want to mark "Sold to Current Owner" (as YYYY-MM)
     var dateLocation = "current"; // last sale date is either in the 'past', 'future', or 'current' (default)
 
+    var xAxisStart =
+      this.props.activeTimeSpan === "year"
+        ? INDICATORS_DATASETS[this.props.activeVis].startYear - 2007
+        : this.props.xAxisStart;
+
     if (data.labels) {
       const lastColumnIndex =
-        Math.min(this.props.xAxisStart + this.props.xAxisViewableColumns, data.labels.length) - 1;
+        Math.min(xAxisStart + this.props.xAxisViewableColumns, data.labels.length) - 1;
 
-      if (
-        !this.props.lastSale.label ||
-        this.props.lastSale.label < data.labels[this.props.xAxisStart]
-      ) {
-        labelPosition = (data.labels[this.props.xAxisStart] || "").toString();
+      if (!this.props.lastSale.label || this.props.lastSale.label < data.labels[xAxisStart]) {
+        labelPosition = (data.labels[xAxisStart] || "").toString();
         dateLocation = "past";
       } else if (this.props.lastSale.label > data.labels[lastColumnIndex]) {
         labelPosition = (data.labels[lastColumnIndex] || "").toString();
@@ -399,9 +401,9 @@ class IndicatorsVizImplementation extends Component<IndicatorVizImplementationPr
         xAxes: [
           {
             ticks: {
-              min: data.labels ? data.labels[this.props.xAxisStart] : null,
+              min: data.labels ? data.labels[xAxisStart] : null,
               max: data.labels
-                ? data.labels[this.props.xAxisStart + this.props.xAxisViewableColumns - 1]
+                ? data.labels[xAxisStart + this.props.xAxisViewableColumns - 1]
                 : null,
               maxRotation: 45,
               minRotation: 45,
diff --git a/client/src/locales/en/messages.po b/client/src/locales/en/messages.po
index 9b6d90188..53d2c74d1 100644
--- a/client/src/locales/en/messages.po
+++ b/client/src/locales/en/messages.po
@@ -66,7 +66,7 @@ msgstr "311 Complaints Data"
 msgid "<0>If the landlord doesn't reside here, this property should be registered with HPD</0> because it has fewer than 3 residential units."
 msgstr "<0>If the landlord doesn't reside here, this property should be registered with HPD</0> because it has fewer than 3 residential units."
 
-#: src/components/IndicatorsDatasets.tsx:168
+#: src/components/IndicatorsDatasets.tsx:172
 msgid "<0>Rent stabilization</0> protects tenants by limiting rent increases and providing the right to lease renewals. Landlords register rent-stabilized units each year with NYS Homes and Community Renewal (HCR). Though the agency does not directly make this data available, the number of registered rent-stabilized units appears on public city property tax bills. JustFix and open-source community projects have extracted these numbers to compile a <1>dataset of building-level counts of rent-stabilized units</1> from 2007 to 2022.<2/><3/>A significant limitation of the data is that <4>landlords will sometimes fail to register the units</4> or do so late, and in the tax bills, it appears there are no rent-stabilized units. For this reason, you may see a sudden drop of registered units to zero, but this doesn’t necessarily reflect an actual loss of stabilized units. If you see a gradual decline in the number of stabilized units that is more likely to represent a true destabilization of units, especially if before 2019 when the passage of the Housing Stability and Tenant Protection Act of 2019 (HSTPA) greatly limited the ways units could be legally destabilized. Even when units are actually destabilized by landlords it does not mean that this was done legally. The only way to know for sure whether your apartment is rent stabilized, was illegally destabilized, or if you are being overcharged is to <5>request your rent history</5> from HCR. Once you receive it, you can use <6>this Learning Center article</6> to guide you in reading your rent history document."
 msgstr "<0>Rent stabilization</0> protects tenants by limiting rent increases and providing the right to lease renewals. Landlords register rent-stabilized units each year with NYS Homes and Community Renewal (HCR). Though the agency does not directly make this data available, the number of registered rent-stabilized units appears on public city property tax bills. JustFix and open-source community projects have extracted these numbers to compile a <1>dataset of building-level counts of rent-stabilized units</1> from 2007 to 2022.<2/><3/>A significant limitation of the data is that <4>landlords will sometimes fail to register the units</4> or do so late, and in the tax bills, it appears there are no rent-stabilized units. For this reason, you may see a sudden drop of registered units to zero, but this doesn’t necessarily reflect an actual loss of stabilized units. If you see a gradual decline in the number of stabilized units that is more likely to represent a true destabilization of units, especially if before 2019 when the passage of the Housing Stability and Tenant Protection Act of 2019 (HSTPA) greatly limited the ways units could be legally destabilized. Even when units are actually destabilized by landlords it does not mean that this was done legally. The only way to know for sure whether your apartment is rent stabilized, was illegally destabilized, or if you are being overcharged is to <5>request your rent history</5> from HCR. Once you receive it, you can use <6>this Learning Center article</6> to guide you in reading your rent history document."
 
@@ -82,7 +82,7 @@ msgstr "<0>This property should be registered with HPD</0> because it has more t
 msgid "<0>While the legal owner of a building is often a company (usually called an “LLC”), these names and business addresses registered with HPD offer a clearer picture of who really controls the building.</0><1>People listed here as “Head Officer” or “Owner” usually have ties to building ownership, while “Site Managers” are part of management. That being said, these names are self reported by the landlord, so they can be misleading.</1><2>Learn more about HPD registrations and how this information powers this tool on the <3>About page</3>.</2>"
 msgstr "<0>While the legal owner of a building is often a company (usually called an “LLC”), these names and business addresses registered with HPD offer a clearer picture of who really controls the building.</0><1>People listed here as “Head Officer” or “Owner” usually have ties to building ownership, while “Site Managers” are part of management. That being said, these names are self reported by the landlord, so they can be misleading.</1><2>Learn more about HPD registrations and how this information powers this tool on the <3>About page</3>.</2>"
 
-#: src/components/IndicatorsDatasets.tsx:98
+#: src/components/IndicatorsDatasets.tsx:100
 msgid "A DOB Violation is a notice that a property is not in compliance with applicable law, usually a building code. DOB Violations typically relate to building-wide services (like elevators or boilers), the structural integrity of a property, or illegal construction. Owners must cure all DOB Violations before they can file a new or amended Certificate of Occupancy (\"CO\").<0/><1/><2>Non-ECB</2> — typical violation, no court hearing needed<3/><4>ECB (Environment Control Board)</4> — a specific violation of New York City Construction Codes or Zoning Resolution. These violations come with additional penalties and require an owner to attend an <5>OATH hearing</5>. They fall into three classes: Class I (immediately hazardous), Class II (major), and Class III (lesser).<6/><7/>Read more about DOB Violations at the <8>official DOB page</8>."
 msgstr "A DOB Violation is a notice that a property is not in compliance with applicable law, usually a building code. DOB Violations typically relate to building-wide services (like elevators or boilers), the structural integrity of a property, or illegal construction. Owners must cure all DOB Violations before they can file a new or amended Certificate of Occupancy (\"CO\").<0/><1/><2>Non-ECB</2> — typical violation, no court hearing needed<3/><4>ECB (Environment Control Board)</4> — a specific violation of New York City Construction Codes or Zoning Resolution. These violations come with additional penalties and require an owner to attend an <5>OATH hearing</5>. They fall into three classes: Class I (immediately hazardous), Class II (major), and Class III (lesser).<6/><7/>Read more about DOB Violations at the <8>official DOB page</8>."
 
@@ -137,7 +137,7 @@ msgstr "All the public info on your landlord"
 msgid "Amount"
 msgstr "Amount"
 
-#: src/components/IndicatorsDatasets.tsx:136
+#: src/components/IndicatorsDatasets.tsx:139
 msgid "An “eviction filing” is a legal case for eviction commenced by a landlord against a tenant in Housing Court. Such a case can be commenced for nonpayment of rent (most commonly) or for a violation of the lease (such as a nuisance). The eviction filings number only represents cases filed in Housing Court (data from the New York State Office of Court Administration <0>via the Housing Data Coalition</0> in collaboration with the <1>Right to Counsel Coalition</1>) and not evictions carried out by NYC Marshals.<2/><3/>If you or someone you know is facing eviction and want to learn more about your rights, head over to <4>Housing Court Answers for more information</4>.<5/><6/>Due to privacy restrictions on the use of these data, eviction filings cannot be shown for buildings with fewer than 11 units."
 msgstr "An “eviction filing” is a legal case for eviction commenced by a landlord against a tenant in Housing Court. Such a case can be commenced for nonpayment of rent (most commonly) or for a violation of the lease (such as a nuisance). The eviction filings number only represents cases filed in Housing Court (data from the New York State Office of Court Administration <0>via the Housing Data Coalition</0> in collaboration with the <1>Right to Counsel Coalition</1>) and not evictions carried out by NYC Marshals.<2/><3/>If you or someone you know is facing eviction and want to learn more about your rights, head over to <4>Housing Court Answers for more information</4>.<5/><6/>Due to privacy restrictions on the use of these data, eviction filings cannot be shown for buildings with fewer than 11 units."
 
@@ -192,7 +192,7 @@ msgstr "Borough Management Office:"
 msgid "Building Permit Applications"
 msgstr "Building Permit Applications"
 
-#: src/components/IndicatorsDatasets.tsx:75
+#: src/components/IndicatorsDatasets.tsx:76
 #: src/components/IndicatorsViz.tsx:188
 msgid "Building Permits Applied For"
 msgstr "Building Permits Applied For"
@@ -313,7 +313,7 @@ msgstr "Close"
 #~ msgid "Close legend"
 #~ msgstr "Close legend"
 
-#: src/components/IndicatorsDatasets.tsx:14
+#: src/components/IndicatorsDatasets.tsx:13
 msgid "Complaints Issued"
 msgstr "Complaints Issued"
 
@@ -345,7 +345,7 @@ msgstr "Custom range"
 msgid "DOB Building Profile"
 msgstr "DOB Building Profile"
 
-#: src/components/IndicatorsDatasets.tsx:90
+#: src/components/IndicatorsDatasets.tsx:91
 msgid "DOB/ECB Violations"
 msgstr "DOB/ECB Violations"
 
@@ -373,8 +373,8 @@ msgstr "Demo Site"
 msgid "Disclaimer: The information in JustFix does not constitute legal advice and must not be used as a substitute for the advice of a lawyer qualified to give advice on legal issues pertaining to housing. We can help direct you to free legal services if necessary."
 msgstr "Disclaimer: The information in JustFix does not constitute legal advice and must not be used as a substitute for the advice of a lawyer qualified to give advice on legal issues pertaining to housing. We can help direct you to free legal services if necessary."
 
-#: src/components/Indicators.tsx:189
-#: src/components/Indicators.tsx:192
+#: src/components/Indicators.tsx:209
+#: src/components/Indicators.tsx:210
 msgid "Display:"
 msgstr "Display:"
 
@@ -433,8 +433,8 @@ msgstr "Enter minimum and maximum number of units, or leave either blank, then a
 #~ msgstr "Error"
 
 #: src/components/BuildingStatsTable.tsx:80
-#: src/components/IndicatorsDatasets.tsx:126
-#: src/components/IndicatorsDatasets.tsx:135
+#: src/components/IndicatorsDatasets.tsx:128
+#: src/components/IndicatorsDatasets.tsx:138
 #: src/components/IndicatorsViz.tsx:217
 msgid "Eviction Filings"
 msgstr "Eviction Filings"
@@ -548,16 +548,16 @@ msgstr "HEATING"
 msgid "HPD Building Profile"
 msgstr "HPD Building Profile"
 
-#: src/components/IndicatorsDatasets.tsx:7
+#: src/components/IndicatorsDatasets.tsx:5
 #: src/components/PortfolioTable.tsx:179
 msgid "HPD Complaints"
 msgstr "HPD Complaints"
 
-#: src/components/IndicatorsDatasets.tsx:15
+#: src/components/IndicatorsDatasets.tsx:14
 msgid "HPD Complaints are housing issues reported to the City <0>by a tenant calling 311</0>. When someone issues a complaint, the Department of Housing Preservation and Development begins a process of investigation that may lead to an official violation from the City. Complaints can be identified as:<1/><2/><3>Emergency</3> — reported to be hazardous/dire<4/><5>Non-Emergency</5> — all others<6/><7/>Read more about HPD Complaints and how to file them at the <8>official HPD page</8>."
 msgstr "HPD Complaints are housing issues reported to the City <0>by a tenant calling 311</0>. When someone issues a complaint, the Department of Housing Preservation and Development begins a process of investigation that may lead to an official violation from the City. Complaints can be identified as:<1/><2/><3>Emergency</3> — reported to be hazardous/dire<4/><5>Non-Emergency</5> — all others<6/><7/>Read more about HPD Complaints and how to file them at the <8>official HPD page</8>."
 
-#: src/components/IndicatorsDatasets.tsx:35
+#: src/components/IndicatorsDatasets.tsx:34
 #: src/components/PortfolioTable.tsx:212
 msgid "HPD Violations"
 msgstr "HPD Violations"
@@ -708,7 +708,7 @@ msgstr "Last 3 Years"
 msgid "Last Sale"
 msgstr "Last Sale"
 
-#: src/components/IndicatorsViz.tsx:439
+#: src/components/IndicatorsViz.tsx:441
 msgid "Last Sale Unknown"
 msgstr "Last Sale Unknown"
 
@@ -861,11 +861,11 @@ msgstr "More Mobile Friendly"
 msgid "Most Common 311 Complaints, Last 3 Years"
 msgstr "Most Common 311 Complaints, Last 3 Years"
 
-#: src/components/Indicators.tsx:220
+#: src/components/Indicators.tsx:233
 msgid "Move chart data left."
 msgstr "Move chart data left."
 
-#: src/components/Indicators.tsx:229
+#: src/components/Indicators.tsx:242
 msgid "Move chart data right."
 msgstr "Move chart data right."
 
@@ -913,7 +913,7 @@ msgstr "Next page"
 msgid "No"
 msgstr "No"
 
-#: src/components/IndicatorsDatasets.tsx:129
+#: src/components/IndicatorsDatasets.tsx:131
 msgid "No Eviction Filings Data Available for Properties with Fewer than 11 Units"
 msgstr "No Eviction Filings Data Available for Properties with Fewer than 11 Units"
 
@@ -958,7 +958,7 @@ msgstr "Not found"
 #~ msgid "Notice an inaccuracy? Click here."
 #~ msgstr "Notice an inaccuracy? Click here."
 
-#: src/components/IndicatorsDatasets.tsx:167
+#: src/components/IndicatorsDatasets.tsx:171
 #: src/components/PortfolioFilters.tsx:145
 msgid "Number of Units"
 msgstr "Number of Units"
@@ -1010,7 +1010,7 @@ msgstr "Owner Names"
 #~ msgid "Owner/Manager"
 #~ msgstr "Owner/Manager"
 
-#: src/components/IndicatorsDatasets.tsx:76
+#: src/components/IndicatorsDatasets.tsx:77
 msgid "Owners submit Building Permit Applications to the Department of Buildings before any construction project to get necessary approval. The number of applications filed can indicate how much construction the owner was planning.<0/><1/>Read more about DOB Building Applications/Permits at the <2>official NYC Buildings page</2>."
 msgstr "Owners submit Building Permit Applications to the Department of Buildings before any construction project to get necessary approval. The number of applications filed can indicate how much construction the owner was planning.<0/><1/>Read more about DOB Building Applications/Permits at the <2>official NYC Buildings page</2>."
 
@@ -1100,7 +1100,7 @@ msgstr "Read more in our Methodology section"
 msgid "Registration expired:"
 msgstr "Registration expired:"
 
-#: src/components/IndicatorsDatasets.tsx:164
+#: src/components/IndicatorsDatasets.tsx:167
 #: src/components/IndicatorsViz.tsx:228
 #: src/components/PortfolioFilters.tsx:139
 msgid "Rent Stabilized Units"
@@ -1110,9 +1110,13 @@ msgstr "Rent Stabilized Units"
 msgid "Rent Stabilized Units filter"
 msgstr "Rent Stabilized Units filter"
 
+#: src/components/IndicatorsDatasets.tsx:169
+msgid "Rent Stabilized Units registered since 2007"
+msgstr "Rent Stabilized Units registered since 2007"
+
 #: src/components/IndicatorsDatasets.tsx:166
-msgid "Rent Stabilized Units registered since 2010"
-msgstr "Rent Stabilized Units registered since 2010"
+#~ msgid "Rent Stabilized Units registered since 2010"
+#~ msgstr "Rent Stabilized Units registered since 2010"
 
 #: src/components/PropertiesSummary.tsx:126
 msgid "Rent stabilization"
@@ -1266,7 +1270,7 @@ msgstr "Since {year}"
 msgid "Site Manager"
 msgstr "Site Manager"
 
-#: src/components/IndicatorsViz.tsx:412
+#: src/components/IndicatorsViz.tsx:414
 msgid "Sold"
 msgstr "Sold"
 
@@ -1492,7 +1496,7 @@ msgstr "Timeline"
 msgid "Top Complaint"
 msgstr "Top Complaint"
 
-#: src/components/IndicatorsViz.tsx:374
+#: src/components/IndicatorsViz.tsx:376
 #: src/components/PortfolioTable.tsx:184
 #: src/components/PortfolioTable.tsx:225
 msgid "Total"
@@ -1558,8 +1562,8 @@ msgstr "View Detail"
 msgid "View Results"
 msgstr "View Results"
 
-#: src/components/Indicators.tsx:200
-#: src/components/Indicators.tsx:203
+#: src/components/Indicators.tsx:218
+#: src/components/Indicators.tsx:219
 msgid "View by:"
 msgstr "View by:"
 
@@ -1598,7 +1602,7 @@ msgstr "View portfolio"
 #~ msgstr "View portfolio map"
 
 #: src/components/IndicatorsDatasets.tsx:42
-#: src/components/IndicatorsDatasets.tsx:97
+#: src/components/IndicatorsDatasets.tsx:99
 msgid "Violations Issued"
 msgstr "Violations Issued"
 
@@ -1654,7 +1658,7 @@ msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you
 #~ msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more on our Methodology page</0>"
 #~ msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more on our Methodology page</0>"
 
-#: src/components/Indicators.tsx:243
+#: src/components/Indicators.tsx:253
 msgid "What are {0}?"
 msgstr "What are {0}?"
 
@@ -1846,7 +1850,7 @@ msgstr "{0} {1}, {2} currently has {3, plural, one {one open HPD violation} othe
 msgid "{numberOfHits} {numberOfHits, plural, one {search result} other {search results}}."
 msgstr "{numberOfHits} {numberOfHits, plural, one {search result} other {search results}}."
 
-#: src/components/IndicatorsViz.tsx:465
+#: src/components/IndicatorsViz.tsx:467
 msgid "{unitsres, plural, one {1 unit total} other {# units total}}"
 msgstr "{unitsres, plural, one {1 unit total} other {# units total}}"
 
@@ -1854,18 +1858,26 @@ msgstr "{unitsres, plural, one {1 unit total} other {# units total}}"
 msgid "{value, plural, one {One Building Permit Application since 2010} other {# Building Permit Applications since 2010}}"
 msgstr "{value, plural, one {One Building Permit Application since 2010} other {# Building Permit Applications since 2010}}"
 
-#: src/components/IndicatorsDatasets.tsx:92
+#: src/components/IndicatorsDatasets.tsx:93
 msgid "{value, plural, one {One DOB/ECB Violation Issued since 2010} other {# DOB/ECB Violations Issued since 2010}}"
 msgstr "{value, plural, one {One DOB/ECB Violation Issued since 2010} other {# DOB/ECB Violations Issued since 2010}}"
 
-#: src/components/IndicatorsDatasets.tsx:130
+#: src/components/IndicatorsDatasets.tsx:132
 msgid "{value, plural, one {One Eviction Filing since 2017} other {# Eviction Filings since 2017}}"
 msgstr "{value, plural, one {One Eviction Filing since 2017} other {# Eviction Filings since 2017}}"
 
+#: src/components/IndicatorsDatasets.tsx:7
+msgid "{value, plural, one {One HPD Complaint Issued since 2012} other {# HPD Complaints Issued since 2012}}"
+msgstr "{value, plural, one {One HPD Complaint Issued since 2012} other {# HPD Complaints Issued since 2012}}"
+
 #: src/components/IndicatorsDatasets.tsx:9
-msgid "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
-msgstr "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
+#~ msgid "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
+#~ msgstr "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
 
 #: src/components/IndicatorsDatasets.tsx:37
-msgid "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
-msgstr "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
+#~ msgid "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
+#~ msgstr "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
+
+#: src/components/IndicatorsDatasets.tsx:36
+msgid "{value, plural, one {One HPD Violation Issued since 2012} other {# HPD Violations Issued since 2012}}"
+msgstr "{value, plural, one {One HPD Violation Issued since 2012} other {# HPD Violations Issued since 2012}}"
diff --git a/client/src/locales/es/messages.po b/client/src/locales/es/messages.po
index dd3f34f52..ab4e78ab4 100644
--- a/client/src/locales/es/messages.po
+++ b/client/src/locales/es/messages.po
@@ -71,7 +71,7 @@ msgstr "Datos de quejas al 311"
 msgid "<0>If the landlord doesn't reside here, this property should be registered with HPD</0> because it has fewer than 3 residential units."
 msgstr "<0>Si el dueño no reside aquí, esta propiedad debería estar registrado con el HPD</0> porque tiene menos de 3 unidades residenciales."
 
-#: src/components/IndicatorsDatasets.tsx:168
+#: src/components/IndicatorsDatasets.tsx:172
 msgid "<0>Rent stabilization</0> protects tenants by limiting rent increases and providing the right to lease renewals. Landlords register rent-stabilized units each year with NYS Homes and Community Renewal (HCR). Though the agency does not directly make this data available, the number of registered rent-stabilized units appears on public city property tax bills. JustFix and open-source community projects have extracted these numbers to compile a <1>dataset of building-level counts of rent-stabilized units</1> from 2007 to 2022.<2/><3/>A significant limitation of the data is that <4>landlords will sometimes fail to register the units</4> or do so late, and in the tax bills, it appears there are no rent-stabilized units. For this reason, you may see a sudden drop of registered units to zero, but this doesn’t necessarily reflect an actual loss of stabilized units. If you see a gradual decline in the number of stabilized units that is more likely to represent a true destabilization of units, especially if before 2019 when the passage of the Housing Stability and Tenant Protection Act of 2019 (HSTPA) greatly limited the ways units could be legally destabilized. Even when units are actually destabilized by landlords it does not mean that this was done legally. The only way to know for sure whether your apartment is rent stabilized, was illegally destabilized, or if you are being overcharged is to <5>request your rent history</5> from HCR. Once you receive it, you can use <6>this Learning Center article</6> to guide you in reading your rent history document."
 msgstr "<0>Renta estabilizada</0> protege a los inquilinos al limitar los aumentos de renta y el derecho a la renovación del contrato de arrendamiento. Los dueños registran las unidades de renta estabilizada cada año con NYS Homes and Community Renewal (HCR). Aunque la agencia no facilita directamente estos datos, el número de unidades de renta estabilizada registradas aparece en las facturas públicas de impuestos de la ciudad. JustFix y proyectos comunitarios de fuentes abiertas han extraído estas cifras para generar <1>un registro de datos a nivel de edificio de las unidades de renta estabilizada </1> desde 2007 hasta 2022.<2/><3/>Una limitación importante de los datos es que <4>los dueños a veces no registran las unidades</4> o lo hacen tarde y, en las facturas de impuestos, parece que no hay unidades de renta estabilizada. Por este motivo, es posible que se observe un descenso repentino de las unidades registradas hasta cero, pero esto no refleja necesariamente una pérdida real de unidades con renta estabilizada. Si observa una disminución gradual en el número de unidades de renta estabilizada, es más probable que represente una verdadera desestabilización de unidades, especialmente si es antes de 2019, cuando la aprobación de la Ley de Estabilidad de la Vivienda y Protección del Inquilino de 2019 (HSTPA) limitó en enormemente las formas en que las unidades podrían desestabilizarse legalmente. Incluso cuando las unidades son realmente desestabilizadas por los dueños, no significa que esto se haya hecho legalmente. La única manera de saber con certeza si su apartamento es de renta estabilizada, fue desestabilizado ilegalmente, o si se le está cobrando de más es <5>solicitar su historial de renta</5> a HCR. Una vez que lo reciba, puede utilizar <6>este artículo del Centro de Aprendizaje</6> para guiarse en la lectura de su documento de historial de renta."
 
@@ -87,7 +87,7 @@ msgstr "<0>Esta propiedad debe estar registrada con en HPD</0> porque tiene más
 msgid "<0>While the legal owner of a building is often a company (usually called an “LLC”), these names and business addresses registered with HPD offer a clearer picture of who really controls the building.</0><1>People listed here as “Head Officer” or “Owner” usually have ties to building ownership, while “Site Managers” are part of management. That being said, these names are self reported by the landlord, so they can be misleading.</1><2>Learn more about HPD registrations and how this information powers this tool on the <3>About page</3>.</2>"
 msgstr "<0>Mientras el dueño legal de un edificio es, con frecuencia, una compañía (se llama muchas veces un “LLC”), estos nombres y direcciones de negocio registrado con HPD se ofrecen una idea más clara de quién controla el edificio.</0><1>Las personas enumeradas aquí como “Oficial Principal” o “Dueño” normalmente tienen una conexión con la propiedad del edificio, mientras que los \"Administradores del Sitio\" formen parte de la gerencia. Dicho eso, estos nombres son autoinformados por el dueño, y entonces pueden ser engañosos.</1><2>Aprende más acerca de registros de HPD y cómo esta información impulsa la herramienta en la <3>página “Acerca de”</3>.</2>"
 
-#: src/components/IndicatorsDatasets.tsx:98
+#: src/components/IndicatorsDatasets.tsx:100
 msgid "A DOB Violation is a notice that a property is not in compliance with applicable law, usually a building code. DOB Violations typically relate to building-wide services (like elevators or boilers), the structural integrity of a property, or illegal construction. Owners must cure all DOB Violations before they can file a new or amended Certificate of Occupancy (\"CO\").<0/><1/><2>Non-ECB</2> — typical violation, no court hearing needed<3/><4>ECB (Environment Control Board)</4> — a specific violation of New York City Construction Codes or Zoning Resolution. These violations come with additional penalties and require an owner to attend an <5>OATH hearing</5>. They fall into three classes: Class I (immediately hazardous), Class II (major), and Class III (lesser).<6/><7/>Read more about DOB Violations at the <8>official DOB page</8>."
 msgstr "Una violación de DOB es un aviso de que una propiedad no cumple con la ley aplicable, generalmente un código de edificios. Las violaciones de DOB generalmente se relacionan con servicios en todo el edificio (como ascensores o calderas), la integridad estructural de una propiedad o la construcción ilegal. Los dueños deben arreglar todas las violaciones de DOB antes de poder presentar un Certificado de ocupación (\"CO\") nuevo o enmendado.<0/><1/><2>No ECB</2> — infracción típica, no se necesita audiencia judicial<3/><4>ECB (Junta de Control Medioambiental)</4> — una violación específica de los Códigos de Construcción de la Ciudad de Nueva York o la Resolución de Zonificación. Estas violaciones vienen con sanciones adicionales y requieren que el dueño asista a una <5>audiencia de OATH</5>. Se dividen en tres clases: Clase I (peligro inmediato), Clase II (mayor) y Clase III (menor).<6/><7/>Encontrarás más información sobre las violaciones del DOB en la <8>página oficial del DOB</8>."
 
@@ -142,7 +142,7 @@ msgstr "Toda la información pública sobre el dueño/a de tu edificio"
 msgid "Amount"
 msgstr "Importe"
 
-#: src/components/IndicatorsDatasets.tsx:136
+#: src/components/IndicatorsDatasets.tsx:139
 msgid "An “eviction filing” is a legal case for eviction commenced by a landlord against a tenant in Housing Court. Such a case can be commenced for nonpayment of rent (most commonly) or for a violation of the lease (such as a nuisance). The eviction filings number only represents cases filed in Housing Court (data from the New York State Office of Court Administration <0>via the Housing Data Coalition</0> in collaboration with the <1>Right to Counsel Coalition</1>) and not evictions carried out by NYC Marshals.<2/><3/>If you or someone you know is facing eviction and want to learn more about your rights, head over to <4>Housing Court Answers for more information</4>.<5/><6/>Due to privacy restrictions on the use of these data, eviction filings cannot be shown for buildings with fewer than 11 units."
 msgstr "Una \"demanda de desalojo\" es un caso legal de desalojo iniciado por un dueño contra un inquilino en la Corte de Vivienda. Este caso puede iniciarse por falta de pago de la renta (lo más común) o por una violación del contrato de alquiler (como una molestia). La cifra de desalojos sólo representa los casos presentados ante la Corte de Vivienda (datos de la Oficina de Administración de la Corte del Estado de Nueva York <0>a través de la Coalición de Datos de Vivienda</0> en colaboración con la <1>Coalición del Derecho a la Defensa o RTC</1>) y no los desalojos llevados a cabo por los Alguaciles de la Ciudad de Nueva York.<2/><3/>Si usted o alguien que conoce se enfrenta a un desalojo y quiere saber más sobre sus derechos, diríjase a <4>Housing Court Answers para obtener más información</4>.<5/><6/>Debido a las restricciones de privacidad en el uso de estos datos, no se pueden mostrar los desalojos de edificios con menos de 11 unidades."
 
@@ -197,7 +197,7 @@ msgstr "Oficina de Gestión Municipal:"
 msgid "Building Permit Applications"
 msgstr "Solicitudes de Permisos de Construcción"
 
-#: src/components/IndicatorsDatasets.tsx:75
+#: src/components/IndicatorsDatasets.tsx:76
 #: src/components/IndicatorsViz.tsx:188
 msgid "Building Permits Applied For"
 msgstr "Permisos de Construcción Solicitados"
@@ -318,7 +318,7 @@ msgstr "Cerrar"
 #~ msgid "Close legend"
 #~ msgstr "Close legend"
 
-#: src/components/IndicatorsDatasets.tsx:14
+#: src/components/IndicatorsDatasets.tsx:13
 msgid "Complaints Issued"
 msgstr "Quejas Emitidas"
 
@@ -350,7 +350,7 @@ msgstr "Rango personalizadas"
 msgid "DOB Building Profile"
 msgstr "Perfil de edificio en DOB"
 
-#: src/components/IndicatorsDatasets.tsx:90
+#: src/components/IndicatorsDatasets.tsx:91
 msgid "DOB/ECB Violations"
 msgstr "Violaciones del DOB/ECB"
 
@@ -378,8 +378,8 @@ msgstr "Sitio Demo"
 msgid "Disclaimer: The information in JustFix does not constitute legal advice and must not be used as a substitute for the advice of a lawyer qualified to give advice on legal issues pertaining to housing. We can help direct you to free legal services if necessary."
 msgstr "Descargo de responsabilidad: La información en JustFix no constituye asesoramiento jurídico y no debe ser utilizado como sustituto del asesoramiento de un abogado cualificado para asesorar sobre cuestiones jurídicas relativas a la vivienda. Nosotros podemos ayudarte a dirigirte a servicios legales gratuitos si es necesario."
 
-#: src/components/Indicators.tsx:189
-#: src/components/Indicators.tsx:192
+#: src/components/Indicators.tsx:209
+#: src/components/Indicators.tsx:210
 msgid "Display:"
 msgstr "Mostrar:"
 
@@ -438,8 +438,8 @@ msgstr "Anote el número mínimo y máximo de unidades, o deje cualquiera de los
 #~ msgstr "Error"
 
 #: src/components/BuildingStatsTable.tsx:80
-#: src/components/IndicatorsDatasets.tsx:126
-#: src/components/IndicatorsDatasets.tsx:135
+#: src/components/IndicatorsDatasets.tsx:128
+#: src/components/IndicatorsDatasets.tsx:138
 #: src/components/IndicatorsViz.tsx:217
 msgid "Eviction Filings"
 msgstr "Demandas de desalojo"
@@ -553,16 +553,16 @@ msgstr "CALEFACCIÓN"
 msgid "HPD Building Profile"
 msgstr "Perfil de edificio del HPD"
 
-#: src/components/IndicatorsDatasets.tsx:7
+#: src/components/IndicatorsDatasets.tsx:5
 #: src/components/PortfolioTable.tsx:179
 msgid "HPD Complaints"
 msgstr "Quejas del HPD"
 
-#: src/components/IndicatorsDatasets.tsx:15
+#: src/components/IndicatorsDatasets.tsx:14
 msgid "HPD Complaints are housing issues reported to the City <0>by a tenant calling 311</0>. When someone issues a complaint, the Department of Housing Preservation and Development begins a process of investigation that may lead to an official violation from the City. Complaints can be identified as:<1/><2/><3>Emergency</3> — reported to be hazardous/dire<4/><5>Non-Emergency</5> — all others<6/><7/>Read more about HPD Complaints and how to file them at the <8>official HPD page</8>."
 msgstr "Las quejas de HPD son problemas de vivienda presentados a la Ciudad <0>por un inquilino al llamar al 311</0>. Cuando alguien presenta una queja, el Departamento de Preservación y Desarrollo de la Vivienda, DHCR por sus siglas en inglés, inicia un proceso de investigación que puede conducir a la emisión de una infracción oficial por parte de la Ciudad. Las quejas se pueden identificar como:<1/><2/><3>Emergencia</3> — se ha informado de que son peligrosas<4/><5>No-Emergencia</5> — todas las demás<6/><7/> Encontrarás más información sobre las quejas de HPD y cómo presentarlas en la página <8>oficial del HPD</8>."
 
-#: src/components/IndicatorsDatasets.tsx:35
+#: src/components/IndicatorsDatasets.tsx:34
 #: src/components/PortfolioTable.tsx:212
 msgid "HPD Violations"
 msgstr "Violaciones del HPD"
@@ -713,7 +713,7 @@ msgstr "Últimos 3 años"
 msgid "Last Sale"
 msgstr "Última venta"
 
-#: src/components/IndicatorsViz.tsx:439
+#: src/components/IndicatorsViz.tsx:441
 msgid "Last Sale Unknown"
 msgstr "Última venta desconocida"
 
@@ -866,11 +866,11 @@ msgstr "Más útil para dispositivos móviles"
 msgid "Most Common 311 Complaints, Last 3 Years"
 msgstr "Las quejas más comunes de 311, los últimos 3 años"
 
-#: src/components/Indicators.tsx:220
+#: src/components/Indicators.tsx:233
 msgid "Move chart data left."
 msgstr "Mover datos del gráfico a la izquierda."
 
-#: src/components/Indicators.tsx:229
+#: src/components/Indicators.tsx:242
 msgid "Move chart data right."
 msgstr "Mover datos del gráfico a la derecha."
 
@@ -918,7 +918,7 @@ msgstr "Página siguiente"
 msgid "No"
 msgstr "No"
 
-#: src/components/IndicatorsDatasets.tsx:129
+#: src/components/IndicatorsDatasets.tsx:131
 msgid "No Eviction Filings Data Available for Properties with Fewer than 11 Units"
 msgstr "No hay datos disponibles de demandas de desalojos en propiedades con menos de 11 unidades"
 
@@ -963,7 +963,7 @@ msgstr "No encontrado"
 #~ msgid "Notice an inaccuracy? Click here."
 #~ msgstr "Notice an inaccuracy? Click here."
 
-#: src/components/IndicatorsDatasets.tsx:167
+#: src/components/IndicatorsDatasets.tsx:171
 #: src/components/PortfolioFilters.tsx:145
 msgid "Number of Units"
 msgstr "Número de unidades"
@@ -1015,7 +1015,7 @@ msgstr "Dueños"
 #~ msgid "Owner/Manager"
 #~ msgstr "Owner/Manager"
 
-#: src/components/IndicatorsDatasets.tsx:76
+#: src/components/IndicatorsDatasets.tsx:77
 msgid "Owners submit Building Permit Applications to the Department of Buildings before any construction project to get necessary approval. The number of applications filed can indicate how much construction the owner was planning.<0/><1/>Read more about DOB Building Applications/Permits at the <2>official NYC Buildings page</2>."
 msgstr "Antes de empezar cualquier proyecto de construcción, el propietario somete un solicitud para conseguir permisos de construcción al Departamento de Edificios para obtener la autorización necesaria. El número de solicitudes que asociadas a un edificio te puede dar una idea de cuánta construcción planea hacer el propietario. <0/><1/> Encontrarás más información sobre Permisos de Construcción del DOB en la <2>página oficial de Edificios de NYC</2>."
 
@@ -1105,7 +1105,7 @@ msgstr "Más información sobre nuestra metodología"
 msgid "Registration expired:"
 msgstr "El registro ha caducado:"
 
-#: src/components/IndicatorsDatasets.tsx:164
+#: src/components/IndicatorsDatasets.tsx:167
 #: src/components/IndicatorsViz.tsx:228
 #: src/components/PortfolioFilters.tsx:139
 msgid "Rent Stabilized Units"
@@ -1115,9 +1115,13 @@ msgstr "Unidades con renta estabilizada"
 msgid "Rent Stabilized Units filter"
 msgstr "Filtro de Unidades con renta estabilizada"
 
+#: src/components/IndicatorsDatasets.tsx:169
+msgid "Rent Stabilized Units registered since 2007"
+msgstr ""
+
 #: src/components/IndicatorsDatasets.tsx:166
-msgid "Rent Stabilized Units registered since 2010"
-msgstr "Unidades de Renta Estabilizada registradas desde 2010"
+#~ msgid "Rent Stabilized Units registered since 2010"
+#~ msgstr "Unidades de Renta Estabilizada registradas desde 2010"
 
 #: src/components/PropertiesSummary.tsx:126
 msgid "Rent stabilization"
@@ -1271,7 +1275,7 @@ msgstr "Desde {year}"
 msgid "Site Manager"
 msgstr "Administrador del Sitio"
 
-#: src/components/IndicatorsViz.tsx:412
+#: src/components/IndicatorsViz.tsx:414
 msgid "Sold"
 msgstr "Vendido"
 
@@ -1497,7 +1501,7 @@ msgstr "Cronología"
 msgid "Top Complaint"
 msgstr "Queja principal"
 
-#: src/components/IndicatorsViz.tsx:374
+#: src/components/IndicatorsViz.tsx:376
 #: src/components/PortfolioTable.tsx:184
 #: src/components/PortfolioTable.tsx:225
 msgid "Total"
@@ -1563,8 +1567,8 @@ msgstr "Ver detalles"
 msgid "View Results"
 msgstr "Ver resultados"
 
-#: src/components/Indicators.tsx:200
-#: src/components/Indicators.tsx:203
+#: src/components/Indicators.tsx:218
+#: src/components/Indicators.tsx:219
 msgid "View by:"
 msgstr "Visualizar por:"
 
@@ -1603,7 +1607,7 @@ msgstr "Ver portafolio de edificios"
 #~ msgstr "View portfolio map"
 
 #: src/components/IndicatorsDatasets.tsx:42
-#: src/components/IndicatorsDatasets.tsx:97
+#: src/components/IndicatorsDatasets.tsx:99
 msgid "Violations Issued"
 msgstr "Violaciones emitidas"
 
@@ -1659,7 +1663,7 @@ msgstr "Hemos mejorado ¿Quién es el Dueño en NY? para profundizar en los dato
 #~ msgid "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more on our Methodology page</0>"
 #~ msgstr "We’ve improved Who Owns What to dig deeper into the data and offer you a more complete picture of buildings associated with your landlord. <0>Read more on our Methodology page</0>"
 
-#: src/components/Indicators.tsx:243
+#: src/components/Indicators.tsx:253
 msgid "What are {0}?"
 msgstr "¿Qué son {0}?"
 
@@ -1851,7 +1855,7 @@ msgstr "{0} {1}, {2} tiene {3, plural, one {una violación del HPD actual} other
 msgid "{numberOfHits} {numberOfHits, plural, one {search result} other {search results}}."
 msgstr "{numberOfHits} {numberOfHits, plural, one {resultado de búsqueda} other {resultados de búsqueda}}."
 
-#: src/components/IndicatorsViz.tsx:465
+#: src/components/IndicatorsViz.tsx:467
 msgid "{unitsres, plural, one {1 unit total} other {# units total}}"
 msgstr "{unitsres, plural, one {unidad} other {unidades}}"
 
@@ -1859,19 +1863,26 @@ msgstr "{unitsres, plural, one {unidad} other {unidades}}"
 msgid "{value, plural, one {One Building Permit Application since 2010} other {# Building Permit Applications since 2010}}"
 msgstr "{value, plural, one {Una Solicitud de Permiso de Construcción desde el 2010} other {# Solicitudes de Permiso de Construcción desde el 2010}}"
 
-#: src/components/IndicatorsDatasets.tsx:92
+#: src/components/IndicatorsDatasets.tsx:93
 msgid "{value, plural, one {One DOB/ECB Violation Issued since 2010} other {# DOB/ECB Violations Issued since 2010}}"
 msgstr "{value, plural, one {Una Violación del DOB/ECB emitida desde el 2010} other {# Violaciones del DOB/ECB emitidas desde el 2010}}"
 
-#: src/components/IndicatorsDatasets.tsx:130
+#: src/components/IndicatorsDatasets.tsx:132
 msgid "{value, plural, one {One Eviction Filing since 2017} other {# Eviction Filings since 2017}}"
 msgstr "{value, plural, one {Una demanda de desalojo desde 2017} other {# Demandas de desalojo desde 2017}}"
 
+#: src/components/IndicatorsDatasets.tsx:7
+msgid "{value, plural, one {One HPD Complaint Issued since 2012} other {# HPD Complaints Issued since 2012}}"
+msgstr ""
+
 #: src/components/IndicatorsDatasets.tsx:9
-msgid "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
-msgstr "{value, plural, one {Una Queja del HPD emitida desde el 2014} other {# Quejas del HPD emitidas desde el 2014}}"
+#~ msgid "{value, plural, one {One HPD Complaint Issued since 2014} other {# HPD Complaints Issued since 2014}}"
+#~ msgstr "{value, plural, one {Una Queja del HPD emitida desde el 2014} other {# Quejas del HPD emitidas desde el 2014}}"
 
 #: src/components/IndicatorsDatasets.tsx:37
-msgid "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
-msgstr "{value, plural, one {Una Violación del HPD emitida desde el 2010} other {# Violaciones del HPD emitidas desde el 2010}}"
+#~ msgid "{value, plural, one {One HPD Violation Issued since 2010} other {# HPD Violations Issued since 2010}}"
+#~ msgstr "{value, plural, one {Una Violación del HPD emitida desde el 2010} other {# Violaciones del HPD emitidas desde el 2010}}"
 
+#: src/components/IndicatorsDatasets.tsx:36
+msgid "{value, plural, one {One HPD Violation Issued since 2012} other {# HPD Violations Issued since 2012}}"
+msgstr ""
diff --git a/client/src/styles/Indicators.scss b/client/src/styles/Indicators.scss
index 520197e9c..0c9895648 100644
--- a/client/src/styles/Indicators.scss
+++ b/client/src/styles/Indicators.scss
@@ -101,6 +101,26 @@
         font-size: 1.5rem;
         margin: 0 2rem 0.4rem 0;
       }
+
+      .select__control {
+        border-color: $justfix-black;
+      }
+
+      .select__control--is-focused,
+      .select__control--menu-is-open {
+        box-shadow: 0 0 0 1px $justfix-black;
+      }
+
+      .select__menu {
+        .select__option--is-focused {
+          background-color: $justfix-grey-50;
+        }
+
+        .select__option--is-selected {
+          background-color: $justfix-white-200;
+          color: $justfix-black;
+        }
+      }
     }
   }
 
diff --git a/wow/sql/address_indicatorhistory.sql b/wow/sql/address_indicatorhistory.sql
index 0a79897b4..99ce03433 100644
--- a/wow/sql/address_indicatorhistory.sql
+++ b/wow/sql/address_indicatorhistory.sql
@@ -1,6 +1,6 @@
 WITH TIME_SERIES AS (
       SELECT TO_CHAR(I::DATE , 'YYYY-MM') AS MONTH 
-      FROM GENERATE_SERIES('2010-01-01', CURRENT_DATE - INTERVAL '1 MONTH', '1 MONTH'::INTERVAL) I
+      FROM GENERATE_SERIES('2007-01-01', CURRENT_DATE - INTERVAL '1 MONTH', '1 MONTH'::INTERVAL) I
     ),
     
     HPDVIOLATIONS AS (