lint error and diff cleanup

spotlight-client/package.json

@@ -19,6 +19,7 @@
     "@reach/router": "^1.3.4",
     "@types/classnames": "^2.2.11",
     "@types/d3-array": "^2.8.0",
+    "@types/d3-color": "^2.0.1",
     "@types/d3-format": "^2.0.0",
     "@types/d3-interpolate": "^2.0.0",
     "@types/d3-scale": "^3.2.2",
@@ -35,6 +36,7 @@
     "change-case": "^4.1.2",
     "classnames": "^2.2.6",
     "d3-array": "^2.9.1",
+    "d3-color": "^2.0.0",
     "d3-format": "^2.0.0",
     "d3-interpolate": "^2.0.1",
     "d3-scale": "^3.2.3",

spotlight-client/src/UiLibrary/Dropdown/Dropdown.tsx

@@ -21,7 +21,7 @@ import React, { useState } from "react";
 import Measure from "react-measure";
 import { animated, useSpring, useSprings } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
-import { colors } from "../colors";
+import { colors } from "..";
 import zIndex from "../zIndex";
 
 const BUTTON_HEIGHT = 40;

spotlight-client/src/UiLibrary/colors.ts

@@ -15,9 +15,6 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { color } from "d3-color";
-import { interpolateRgb } from "d3-interpolate";
-
 const gray = "#D6DCDC";
 const pine = "#00413E";
 const pineBright = "#25B894";
@@ -40,7 +37,7 @@ const dataVizColorMap = new Map([
   ["skyBlue", "#5F8FD9"],
 ]);
 
-export const colors = {
+export default {
   accent: pineBright,
   background: white,
   buttonBackground: white,
@@ -60,26 +57,3 @@ export const colors = {
   timeWindowStroke: pine,
   tooltipBackground: pineDark,
 };
-
-const FADE_AMOUNT = 0.45;
-
-export function highlightFade(
-  baseColor: string,
-  { useOpacity = false } = {}
-): string {
-  if (useOpacity) {
-    // in cases where we actually want the color to be transparent,
-    // this is a relatively straightforward opacity change
-    const fadedColor = color(baseColor);
-
-    // can't do anything with an invalid color
-    if (!fadedColor) return baseColor;
-
-    fadedColor.opacity = FADE_AMOUNT;
-    return fadedColor.toString();
-  }
-  // in cases where we don't want a transparent color (which is most cases),
-  // this will create a tint ramp from background color to baseColor;
-  // the ramp goes from 0 to 1 with values analogous to opacity
-  return interpolateRgb(colors.background, baseColor)(FADE_AMOUNT);
-}

spotlight-client/src/UiLibrary/index.ts

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-export * from "./colors";
+export { default as colors } from "./colors";
 export { default as typefaces } from "./typefaces";
 export { default as zIndex } from "./zIndex";
 export { default as Chevron } from "./Chevron";

spotlight-client/src/charts/ColorLegend.tsx

@@ -18,8 +18,9 @@
 import classNames from "classnames";
 import React from "react";
 import styled from "styled-components/macro";
-import { animation, highlightFade } from "../UiLibrary";
+import { animation } from "../UiLibrary";
 import { ItemToDisplay, ItemToHighlight } from "./types";
+import { highlightFade } from "./utils";
 
 const ColorLegendWrapper = styled.div`
   display: flex;

spotlight-client/src/charts/WindowedTimeSeries.tsx

@@ -21,10 +21,10 @@ import { format, isEqual } from "date-fns";
 import React, { useCallback, useEffect, useState } from "react";
 import MinimapXYFrame from "semiotic/lib/MinimapXYFrame";
 import styled from "styled-components/macro";
-import { animation, colors, highlightFade } from "../UiLibrary";
+import { animation, colors } from "../UiLibrary";
 import { formatAsNumber } from "../utils";
 import BaseChartWrapper from "./ChartWrapper";
-import { getDataWithPct } from "./utils";
+import { getDataWithPct, highlightFade } from "./utils";
 import ColorLegend from "./ColorLegend";
 import XHoverController from "./XHoverController";
 import { HistoricalPopulationBreakdownRecord } from "../metricsApi";

spotlight-client/src/charts/utils.ts

@@ -16,13 +16,15 @@
 // =============================================================================
 
 import { sum } from "d3-array";
+import { color } from "d3-color";
+import { interpolateRgb } from "d3-interpolate";
+import { colors } from "../UiLibrary";
 
 /**
  * Given a series of records, sums up their values and computes the value of each
  * as a percentage of that total. Returns a copy of the records with `pct` field
  * included as a number between 0 and 1.
  */
-// eslint-disable-next-line import/prefer-default-export
 export function getDataWithPct<RecordFormat extends { value: number }>(
   data: RecordFormat[]
 ): (RecordFormat & { pct: number })[] {
@@ -33,3 +35,26 @@ export function getDataWithPct<RecordFormat extends { value: number }>(
     pct: record.value / totalValue,
   }));
 }
+
+const FADE_AMOUNT = 0.45;
+
+export function highlightFade(
+  baseColor: string,
+  { useOpacity = false } = {}
+): string {
+  if (useOpacity) {
+    // in cases where we actually want the color to be transparent,
+    // this is a relatively straightforward opacity change
+    const fadedColor = color(baseColor);
+
+    // can't do anything with an invalid color
+    if (!fadedColor) return baseColor;
+
+    fadedColor.opacity = FADE_AMOUNT;
+    return fadedColor.toString();
+  }
+  // in cases where we don't want a transparent color (which is most cases),
+  // this will create a tint ramp from background color to baseColor;
+  // the ramp goes from 0 to 1 with values analogous to opacity
+  return interpolateRgb(colors.background, baseColor)(FADE_AMOUNT);
+}

yarn.lock

@@ -1983,7 +1983,7 @@
   resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-2.8.0.tgz#4b70ccb0c6d2ef28dac1e7e653b3ecd1f4b1d1ee"
   integrity sha512-Q0ubcGHAmCRPh90/hoYB4eKWhxYKUxphwSeQrlz2tiabQ8S9zqhaE2CZJtCaLH2cjqKcjr52WPvmOA7ha0O4ZA==
 
-"@types/d3-color@*":
+"@types/d3-color@*", "@types/d3-color@^2.0.1":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.1.tgz#570ea7f8b853461301804efa52bd790a640a26db"
   integrity sha512-u7LTCL7RnaavFSmob2rIAJLNwu50i6gFwY9cHFr80BrQURYQBRkJ+Yv47nA3Fm7FeRhdWTiVTeqvSeOuMAOzBQ==
@@ -4727,7 +4727,7 @@ d3-color@1, d3-color@^1.4.1:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
   integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
 
-"d3-color@1 - 2":
+"d3-color@1 - 2", d3-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==