Remove modular d3 imports for imports from d3 bundle

ts/graphs/BUILD.bazel

@@ -35,11 +35,6 @@ ts_library(
     ],
 )
 
-ts_library(
-    name = "types",
-    srcs = ["d3_missing.d.ts"],
-)
-
 ts_library(
     name = "lib",
     srcs = glob(
@@ -47,7 +42,6 @@ ts_library(
         exclude = ["bootstrap.ts"],
     ),
     deps = [
-        "types",
         "//ts/lib",
         "//ts/lib:backend_proto",
         "@npm//@types/d3",
@@ -96,7 +90,6 @@ eslint_test(
         [
             "*.ts",
         ],
-        exclude = ["d3_missing.d.ts"],
     ),
 )
 

ts/graphs/added.ts

@@ -7,10 +7,17 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, sum, Bin } from "d3-array";
-import { scaleLinear, scaleSequential } from "d3-scale";
+
+import {
+    extent,
+    histogram,
+    sum,
+    scaleLinear,
+    scaleSequential,
+    interpolateBlues,
+} from "d3";
+import type { Bin } from "d3";
 import type { HistogramData } from "./histogram-graph";
-import { interpolateBlues } from "d3-scale-chromatic";
 import type { I18n } from "anki/i18n";
 import { dayLabel } from "anki/time";
 import { GraphRange } from "./graph-helpers";
@@ -52,7 +59,7 @@ export function buildHistogram(
         return [null, []];
     }
 
-    const [xMinOrig, _xMax] = extent(data.daysAdded);
+    const [xMinOrig] = extent(data.daysAdded);
     let xMin = xMinOrig;
 
     // cap max to selected range

ts/graphs/buttons.ts

@@ -7,11 +7,17 @@
  */
 
 import pb from "anki/backend_proto";
-import { interpolateRdYlGn } from "d3-scale-chromatic";
-import "d3-transition";
-import { select, mouse } from "d3-selection";
-import { scaleLinear, scaleBand, scaleSequential } from "d3-scale";
-import { axisBottom, axisLeft } from "d3-axis";
+import {
+    interpolateRdYlGn,
+    select,
+    pointer,
+    scaleLinear,
+    scaleBand,
+    scaleSequential,
+    axisBottom,
+    axisLeft,
+    sum,
+} from "d3";
 import { showTooltip, hideTooltip } from "./tooltip";
 import {
     GraphBounds,
@@ -20,7 +26,6 @@ import {
     millisecondCutoffForRange,
 } from "./graph-helpers";
 import type { I18n } from "anki/i18n";
-import { sum } from "d3-array";
 
 type ButtonCounts = [number, number, number, number];
 
@@ -251,8 +256,8 @@ export function renderButtons(
         .attr("y", () => y(yMax!)!)
         .attr("width", xButton.bandwidth())
         .attr("height", () => y(0)! - y(yMax!)!)
-        .on("mousemove", function (this: any, d: Datum) {
-            const [x, y] = mouse(document.body);
+        .on("mousemove", (event: MouseEvent, d: Datum) => {
+            const [x, y] = pointer(event);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip);

ts/graphs/calendar.ts

@@ -7,10 +7,20 @@
  */
 
 import pb from "anki/backend_proto";
-import { interpolateBlues } from "d3-scale-chromatic";
-import "d3-transition";
-import { select, mouse } from "d3-selection";
-import { scaleLinear, scaleSequentialSqrt } from "d3-scale";
+import {
+    interpolateBlues,
+    select,
+    pointer,
+    scaleLinear,
+    scaleSequentialSqrt,
+    timeDay,
+    timeYear,
+    timeSunday,
+    timeMonday,
+    timeFriday,
+    timeSaturday,
+} from "d3";
+import type { CountableTimeInterval } from "d3";
 import { showTooltip, hideTooltip } from "./tooltip";
 import {
     GraphBounds,
@@ -18,15 +28,6 @@ import {
     RevlogRange,
     SearchDispatch,
 } from "./graph-helpers";
-import {
-    timeDay,
-    timeYear,
-    timeSunday,
-    timeMonday,
-    timeFriday,
-    timeSaturday,
-} from "d3-time";
-import type { CountableTimeInterval } from "d3-time";
 import type { I18n } from "anki/i18n";
 
 export interface GraphData {
@@ -206,8 +207,8 @@ export function renderCalendar(
         .attr("height", height - 2)
         .attr("x", (d) => x(d.weekNumber + 1)!)
         .attr("y", (d) => bounds.marginTop + d.weekDay * height)
-        .on("mousemove", function (this: any, d: any) {
-            const [x, y] = mouse(document.body);
+        .on("mousemove", (event: MouseEvent, d: DayDatum) => {
+            const [x, y] = pointer(event);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip)

ts/graphs/card-counts.ts

@@ -13,14 +13,14 @@ import {
     schemeBlues,
     schemeOranges,
     schemeReds,
-} from "d3-scale-chromatic";
-import "d3-transition";
-import { select } from "d3-selection";
-import { scaleLinear } from "d3-scale";
-import { pie, arc } from "d3-shape";
-import { interpolate } from "d3-interpolate";
+    select,
+    scaleLinear,
+    pie,
+    arc,
+    interpolate,
+    cumsum,
+} from "d3";
 import type { GraphBounds } from "./graph-helpers";
-import { cumsum } from "d3-array";
 import type { I18n } from "anki/i18n";
 
 type Count = [string, number, boolean, string];

ts/graphs/d3_missing.d.ts

@@ -1,4 +0,0 @@
-import "d3-array";
-declare module "d3-array" {
-    export function cumsum(arg0: any[], arg1?: (any) => number): Float64Array;
-}

ts/graphs/ease.ts

@@ -7,11 +7,17 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, sum, Bin } from "d3-array";
-import { scaleLinear, scaleSequential } from "d3-scale";
+import {
+    extent,
+    histogram,
+    sum,
+    scaleLinear,
+    scaleSequential,
+    interpolateRdYlGn,
+} from "d3";
+import type { Bin } from "d3";
 import { CardType } from "anki/cards";
 import type { HistogramData } from "./histogram-graph";
-import { interpolateRdYlGn } from "d3-scale-chromatic";
 import type { I18n } from "anki/i18n";
 import type { TableDatum, SearchDispatch } from "./graph-helpers";
 

ts/graphs/future-due.ts

@@ -7,11 +7,18 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, rollup, sum, Bin } from "d3-array";
-import { scaleLinear, scaleSequential } from "d3-scale";
+import {
+    extent,
+    histogram,
+    rollup,
+    sum,
+    scaleLinear,
+    scaleSequential,
+    interpolateGreens,
+} from "d3";
+import type { Bin } from "d3";
 import { CardQueue } from "anki/cards";
 import type { HistogramData } from "./histogram-graph";
-import { interpolateGreens } from "d3-scale-chromatic";
 import { dayLabel } from "anki/time";
 import type { I18n } from "anki/i18n";
 import { GraphRange } from "./graph-helpers";

ts/graphs/graph-helpers.ts

@@ -7,7 +7,7 @@
 @typescript-eslint/ban-ts-ignore: "off" */
 
 import pb from "anki/backend_proto";
-import type { Selection } from "d3-selection";
+import type { Selection } from "d3";
 import type { PreferencePayload } from "./preferences";
 import { postRequest } from "anki/postrequest";
 

ts/graphs/histogram-graph.ts

@@ -6,12 +6,20 @@
 @typescript-eslint/no-explicit-any: "off",
  */
 
-import "d3-transition";
-import { select, mouse } from "d3-selection";
-import { cumsum, max, Bin } from "d3-array";
-import { scaleLinear, ScaleLinear, ScaleSequential } from "d3-scale";
-import { axisBottom, axisLeft, axisRight } from "d3-axis";
-import { area, curveBasis } from "d3-shape";
+import {
+    select,
+    pointer,
+    cumsum,
+    max,
+    scaleLinear,
+    axisBottom,
+    axisLeft,
+    axisRight,
+    area,
+    curveBasis,
+} from "d3";
+
+import type { ScaleLinear, ScaleSequential, Bin } from "d3";
 import { showTooltip, hideTooltip } from "./tooltip";
 import { GraphBounds, setDataAvailable } from "./graph-helpers";
 
@@ -154,8 +162,10 @@ export function histogramGraph(
         .attr("y", () => y(yMax!)!)
         .attr("width", barWidth)
         .attr("height", () => y(0)! - y(yMax!)!)
-        .on("mousemove", function (this: any, _d: any, idx: number) {
-            const [x, y] = mouse(document.body);
+        .on("mousemove", (event: MouseEvent, _d: Bin<number, number>) => {
+            const [x, y] = pointer(event);
+            // TODO
+            const idx = 0;
             const pct = data.showArea ? (areaData[idx + 1] / data.total) * 100 : 0;
             showTooltip(data.hoverText(data, idx, areaData[idx + 1], pct), x, y);
         })

ts/graphs/hours.ts

@@ -7,11 +7,19 @@
  */
 
 import pb from "anki/backend_proto";
-import { interpolateBlues } from "d3-scale-chromatic";
-import "d3-transition";
-import { select, mouse } from "d3-selection";
-import { scaleLinear, scaleBand, scaleSequential } from "d3-scale";
-import { axisBottom, axisLeft, axisRight } from "d3-axis";
+import {
+    interpolateBlues,
+    select,
+    pointer,
+    scaleLinear,
+    scaleBand,
+    scaleSequential,
+    axisBottom,
+    axisLeft,
+    axisRight,
+    area,
+    curveBasis,
+} from "d3";
 import { showTooltip, hideTooltip } from "./tooltip";
 import {
     GraphBounds,
@@ -19,7 +27,6 @@ import {
     GraphRange,
     millisecondCutoffForRange,
 } from "./graph-helpers";
-import { area, curveBasis } from "d3-shape";
 import type { I18n } from "anki/i18n";
 
 type ButtonCounts = [number, number, number, number];
@@ -197,8 +204,8 @@ export function renderHours(
         .attr("y", () => y(yMax)!)
         .attr("width", x.bandwidth())
         .attr("height", () => y(0)! - y(yMax!)!)
-        .on("mousemove", function (this: any, d: Hour) {
-            const [x, y] = mouse(document.body);
+        .on("mousemove", (event: MouseEvent, d: Hour) => {
+            const [x, y] = pointer(event);
             showTooltip(tooltipText(d), x, y);
         })
         .on("mouseout", hideTooltip);

ts/graphs/intervals.ts

@@ -7,11 +7,19 @@
  */
 
 import type pb from "anki/backend_proto";
-import { extent, histogram, quantile, sum, mean, Bin } from "d3-array";
-import { scaleLinear, scaleSequential } from "d3-scale";
+import {
+    extent,
+    histogram,
+    quantile,
+    sum,
+    mean,
+    scaleLinear,
+    scaleSequential,
+    interpolateBlues,
+} from "d3";
+import type { Bin } from "d3";
 import { CardType } from "anki/cards";
 import type { HistogramData } from "./histogram-graph";
-import { interpolateBlues } from "d3-scale-chromatic";
 import type { I18n } from "anki/i18n";
 import type { TableDatum, SearchDispatch } from "./graph-helpers";
 import { timeSpan } from "anki/time";

ts/graphs/reviews.ts

@@ -12,16 +12,26 @@ import {
     interpolateReds,
     interpolateOranges,
     interpolatePurples,
-} from "d3-scale-chromatic";
-import "d3-transition";
-import { select, mouse } from "d3-selection";
-import { scaleLinear, scaleSequential } from "d3-scale";
-import { axisBottom, axisLeft, axisRight } from "d3-axis";
+    select,
+    pointer,
+    scaleLinear,
+    scaleSequential,
+    axisBottom,
+    axisLeft,
+    axisRight,
+    area,
+    curveBasis,
+    min,
+    histogram,
+    sum,
+    max,
+    cumsum,
+} from "d3";
+import type { Bin } from "d3";
+
 import { showTooltip, hideTooltip } from "./tooltip";
 import { GraphBounds, setDataAvailable, GraphRange } from "./graph-helpers";
 import type { TableDatum } from "./graph-helpers";
-import { area, curveBasis } from "d3-shape";
-import { min, histogram, sum, max, Bin, cumsum } from "d3-array";
 import { timeSpan, dayLabel } from "anki/time";
 import type { I18n } from "anki/i18n";
 
@@ -357,9 +367,10 @@ export function renderReviews(
         .attr("y", () => y(yMax!)!)
         .attr("width", barWidth)
         .attr("height", () => y(0)! - y(yMax!)!)
-        .on("mousemove", function (this: any, d: any, idx) {
-            const [x, y] = mouse(document.body);
-            showTooltip(tooltipText(d, areaData[idx + 1]), x, y);
+        .on("mousemove", (event: MouseEvent, d) => {
+            const idx = 0; // TODO
+            const [x, y] = pointer(event);
+            showTooltip(tooltipText(d as any /* TODO */, areaData[idx + 1]), x, y);
         })
         .on("mouseout", hideTooltip);