feat: adjust tooltips based on selected scale

integers are shown as-is percents are shown to 5 non-zero digits non-percent decimals are shown as specified
gregdan3 · Aug 28, 2024 · da627fb · da627fb
1 parent b4d7c42
commit da627fb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 12 deletions.
diff --git a/src/utils/chart.ts b/src/utils/chart.ts
@@ -1,6 +1,6 @@
 import { htmlLegendPlugin, crossHairPlugin } from "@utils/plugins";
 import { FORMATTERS } from "@utils/ui.ts";
-import type { ScaleData } from "@utils/types";
+import type { ScaleData, FormatterFn } from "@utils/types";
 import type { Result, Row } from "@utils/sqlite";
 import type { ChartTypeRegistry, TooltipItem } from "chart.js/auto";
 import Chart from "chart.js/auto";
@@ -97,6 +97,7 @@ async function initUsageChart(
             display: false,
           },
           ticks: {
+            // @ts-expect-error: value can apparently be string but it never is
             callback: FORMATTERS[scale.axisNums],
           },
         },
@@ -164,6 +165,15 @@ async function initUsageChart(
   return chart;
 }
 
+function formatLabel(
+  ctx: TooltipItem<keyof ChartTypeRegistry>,
+  format: FormatterFn,
+): string {
+  // @ts-expect-error: it doesn't know about `raw`
+  const data = format(ctx.raw.occurrences);
+  return `${ctx.dataset.label}: ${data}`;
+}
+
 export async function reloadUsageChart(
   canvas: HTMLCanvasElement,
   data: Result[],
@@ -177,8 +187,12 @@ export async function reloadUsageChart(
       data: result.data,
     }));
     existingChart.options.scales!.y!.type = scale.axis;
+    // @ts-expect-error: value can apparently be string but it never is
     existingChart.options.scales!.y!.ticks!.callback =
       FORMATTERS[scale.axisNums];
+    existingChart.options.plugins!.tooltip!.callbacks!.label = (
+      ctx: TooltipItem<keyof ChartTypeRegistry>,
+    ) => formatLabel(ctx, FORMATTERS[scale.tooltipNums]);
     existingChart.update();
   }
 }
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
@@ -121,7 +121,7 @@ export const SCALES = {
     smoothable: true,
     axis: "linear",
     axisNums: "percent", // truncated to 2 significant digits
-    tooltipNums: "rawPercent", // truncated to 5 significant digits
+    tooltipNums: "longPercent", // truncated to 5 significant digits
   },
   cmsum: {
     label: "Cumulative",
@@ -145,7 +145,7 @@ export const SCALES = {
     smoothable: true,
     axis: "logarithmic",
     axisNums: "percent",
-    tooltipNums: "rawPercent",
+    tooltipNums: "longPercent",
   },
   logcm: {
     label: "Cumulative Log",
@@ -161,23 +161,23 @@ export const SCALES = {
     smoothable: false,
     axis: "linear",
     axisNums: "raw",
-    tooltipNums: "raw",
+    tooltipNums: "longRaw",
   },
   normrel: {
     label: "Relative Minmax",
     category: "useful",
     smoothable: true,
     axis: "linear",
     axisNums: "raw",
-    tooltipNums: "raw",
+    tooltipNums: "longRaw",
   },
   normcm: {
     label: "Cumulative Minmax",
     category: "useful",
     smoothable: false,
     axis: "linear",
     axisNums: "raw",
-    tooltipNums: "raw",
+    tooltipNums: "longRaw",
   },
   entropy: {
     label: "Absolute Entropy",
@@ -217,15 +217,15 @@ export const SCALES = {
     smoothable: false,
     axis: "linear",
     axisNums: "percent",
-    tooltipNums: "rawPercent",
+    tooltipNums: "longPercent",
   },
   // relderiv2: {
   //   label: "2nd Deriv Relative",
   //   category: "weird",
   //   smoothable: false,
   //   axis: "linear",
   //   axisNums: "percent",
-  //   tooltipNums: "rawPercent",
+  //   tooltipNums: "longPercent",
   // },
   zscore: {
     label: "Relative Z-Score",

diff --git a/src/utils/types.ts b/src/utils/types.ts
@@ -11,6 +11,7 @@ export const smoothings = SMOOTHINGS.map((n: string): number => {
 });
 
 export type Formatter = keyof typeof FORMATTERS;
+export type FormatterFn = (typeof FORMATTERS)[Formatter];
 export type Scale = keyof typeof SCALES;
 export type ScaleData = (typeof SCALES)[Scale];
 export type LengthParam = (typeof LENGTHS)[number];

diff --git a/src/utils/ui.ts b/src/utils/ui.ts
@@ -41,8 +41,11 @@ export function formatInteger(n: number): string {
   return scaled.toFixed(1).replace(/\.0$/, "") + suffix;
 }
 
-export function formatRaw(n: number): string {
-  return n.toString();
+export function formatRaw(n: number, sigDigits: number = 5): string {
+  if (n >= 1 || n === 0 || n <= -1) {
+    return n.toString();
+  }
+  return n.toFixed(sigDigits);
 }
 
 export function formatPercentage(n: number, sigDigits: number = 2): string {
@@ -62,8 +65,9 @@ export function formatPercentage(n: number, sigDigits: number = 2): string {
 }
 
 export const FORMATTERS = {
-  raw: formatRaw,
+  raw: (n: number) => formatRaw(n, 2),
+  longRaw: (n: number) => formatRaw(n, 5),
   percent: (n: number) => formatPercentage(n, 2),
-  rawPercent: (n: number) => formatPercentage(n, 5),
+  longPercent: (n: number) => formatPercentage(n, 5),
   int: formatInteger,
 } as const;