[Disaster Dashboard] Update histogram colors (#2221)

This is a followup PR to #2086 which makes the histograms use the color
of the event types instead of default red.

Because this is a followup, diffs currently include all changes made in
#2086. I'll message out when #2086 is merged and the diffs are easier to
read.

Screenshots:
<img width="1024" alt="Screenshot 2023-02-09 at 10 02 21 AM"
src="https://user-images.githubusercontent.com/4034366/217902251-e962cddb-43df-429d-a15f-3df9d092ab65.png">
<img width="1026" alt="Screenshot 2023-02-09 at 10 02 40 AM"
src="https://user-images.githubusercontent.com/4034366/217902271-71e6ac0e-f95f-4da6-8e09-3f857e96a1cb.png">
<img width="1025" alt="Screenshot 2023-02-09 at 10 02 58 AM"
src="https://user-images.githubusercontent.com/4034366/217902288-b08c2cd7-93db-43b7-9342-b82f3409d9d5.png">
<img width="1021" alt="Screenshot 2023-02-09 at 10 03 23 AM"
src="https://user-images.githubusercontent.com/4034366/217902317-fe4207b9-b789-40a3-95d2-696e025e3126.png">
<img width="1023" alt="Screenshot 2023-02-09 at 10 03 12 AM"
src="https://user-images.githubusercontent.com/4034366/217903076-d5c1d6de-a6a7-49a2-9c53-a0c94ed1754e.png">
<img width="1029" alt="Screenshot 2023-02-09 at 10 03 34 AM"
src="https://user-images.githubusercontent.com/4034366/217902337-0928c6ca-6815-4f18-990d-f5ff1dc64af0.png">
<img width="1026" alt="Screenshot 2023-02-09 at 10 03 53 AM"
src="https://user-images.githubusercontent.com/4034366/217902366-861d6daa-d218-42fc-aa1d-6bf21bf2fb67.png">

static/js/chart/draw.ts

@@ -589,7 +589,8 @@ function drawHistogram(
   chartWidth: number,
   chartHeight: number,
   dataPoints: DataPoint[],
-  unit?: string
+  unit?: string,
+  fillColor?: string
 ): void {
   const textList = dataPoints.map((dataPoint) => dataPoint.label);
   const values = dataPoints.map((dataPoint) => dataPoint.value);
@@ -630,7 +631,7 @@ function drawHistogram(
   addYAxis(yAxis, chartWidth, y, unit);
   updateXAxis(xAxis, bottomHeight, chartHeight, y);
 
-  const color = getColorFn(["A"])("A"); // we only need one color
+  const color = fillColor ? fillColor : getColorFn(["A"])("A"); // we only need one color
 
   chart
     .append("g")

static/js/components/subject_page/disaster_event_block.tsx

@@ -302,13 +302,16 @@ function renderTiles(
         );
       }
       case "HISTOGRAM": {
+        const eventTypeSpec =
+          props.eventTypeSpec[tile.histogramTileSpec.eventTypeKey];
         return (
           <HistogramTile
             key={id}
             id={id}
             title={tile.title}
             place={props.place}
             selectedDate={getDate(props.id)}
+            eventTypeSpec={eventTypeSpec}
             disasterEventData={
               disasterEventData[tile.histogramTileSpec.eventTypeKey] || {
                 eventPoints: [],

static/js/components/tiles/histogram_tile.tsx

@@ -28,12 +28,14 @@ import {
   DisasterEventPoint,
   DisasterEventPointData,
 } from "../../types/disaster_event_map_types";
+import { EventTypeSpec } from "../../types/subject_page_proto_types";
 import { getDateRange } from "../../utils/disaster_event_map_utils";
 import { ReplacementStrings } from "../../utils/tile_utils";
 import { ChartTileContainer } from "./chart_tile";
 
 interface HistogramTilePropType {
   disasterEventData: DisasterEventPointData;
+  eventTypeSpec: EventTypeSpec;
   id: string;
   place: NamedTypedPlace;
   selectedDate: string;
@@ -241,6 +243,13 @@ export function HistogramTile(props: HistogramTilePropType): JSX.Element {
   ): void {
     const elem = document.getElementById(props.id);
     elem.innerHTML = "";
-    drawHistogram(props.id, elem.clientWidth, elem.clientHeight, histogramData);
+    drawHistogram(
+      props.id,
+      elem.clientWidth,
+      elem.clientHeight,
+      histogramData,
+      undefined,
+      props.eventTypeSpec.color
+    );
   }
 }