formatNumber; filter log tickFormat function (#2078)

Author: mbostock

docs/features/formats.md

@@ -9,6 +9,14 @@ import * as d3 from "d3";
 
 These helper functions are provided for convenience as a **tickFormat** option for the [axis mark](../marks/axis.md), as the **text** option for a [text mark](../marks/text.md), or other use. See also [d3-format](https://d3js.org/d3-format), [d3-time-format](https://d3js.org/d3-time-format), and JavaScript’s built-in [date formatting](https://observablehq.com/@mbostock/date-formatting) and [number formatting](https://observablehq.com/@mbostock/number-formatting).
 
+## formatNumber(*locale*) {#formatNumber}
+
+```js
+Plot.formatNumber("en-US")(Math.PI) // "3.142"
+```
+
+Returns a function that formats a given number according to the specified *locale*. The *locale* is a [BCP 47 language tag](https://tools.ietf.org/html/bcp47) and defaults to U.S. English.
+
 ## formatIsoDate(*date*) {#formatIsoDate}
 
 ```js

src/format.d.ts

@@ -1,3 +1,13 @@
+/**
+ * Returns a function that formats a given number according to the specified
+ * *locale*.
+ *
+ * [1]: https://tools.ietf.org/html/bcp47
+ *
+ * @param locale - a [BCP 47 language tag][1]; defaults to U.S. English.
+ */
+export function formatNumber(locale?: string): (i: number) => string;
+
 /**
  * Returns a function that formats a given month number (from 0 = January to 11
  * = December) according to the specified *locale* and *format*.

src/index.js

@@ -53,6 +53,6 @@ export {select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, sel
 export {stackX, stackX1, stackX2, stackY, stackY1, stackY2} from "./transforms/stack.js";
 export {treeNode, treeLink} from "./transforms/tree.js";
 export {pointer, pointerX, pointerY} from "./interactions/pointer.js";
-export {formatIsoDate, formatWeekday, formatMonth} from "./format.js";
+export {formatIsoDate, formatNumber, formatWeekday, formatMonth} from "./format.js";
 export {scale} from "./scales.js";
 export {legend} from "./legends.js";

src/marks/axis.js

@@ -652,7 +652,7 @@ function inferTextChannel(scale, data, ticks, tickFormat, anchor) {
 // possible, or the default ISO format (2014-01-26). TODO We need a better way
 // to infer whether the ordinal scale is UTC or local time.
 export function inferTickFormat(scale, data, ticks, tickFormat, anchor) {
-  return typeof tickFormat === "function"
+  return typeof tickFormat === "function" && !(scale.type === "log" && scale.tickFormat)
     ? tickFormat
     : tickFormat === undefined && data && isTemporal(data)
     ? inferTimeFormat(scale.type, data, anchor) ?? formatDefault

test/marks/format-test.js

@@ -7,8 +7,7 @@ it("formatMonth(locale, format) does the right thing", () => {
   assert.strictEqual(Plot.formatMonth("en", "narrow")(0), "J");
 });
 
-// GitHub Actions does not support locales.
-it.skip("formatMonth('fr', format) does the right thing", () => {
+it("formatMonth('fr', format) does the right thing", () => {
   assert.strictEqual(Plot.formatMonth("fr", "long")(11), "décembre");
   assert.strictEqual(Plot.formatMonth("fr", "short")(11), "déc.");
   assert.strictEqual(Plot.formatMonth("fr", "narrow")(11), "D");
@@ -27,7 +26,7 @@ it("formatMonth(locale) has the expected default", () => {
   assert.strictEqual(Plot.formatMonth("en", undefined)(0), "Jan");
 });
 
-it.skip("formatMonth('fr') has the expected default", () => {
+it("formatMonth('fr') has the expected default", () => {
   assert.strictEqual(Plot.formatMonth("fr")(11), "déc.");
   assert.strictEqual(Plot.formatMonth("fr", undefined)(11), "déc.");
 });

test/output/logTickFormatFunction.svg

@@ -19,7 +19,7 @@ for (const [name, plot] of Object.entries(plots)) {
     reindexMarker(root);
     reindexClip(root);
     let expected;
-    let actual = beautify.html(root.outerHTML, {
+    let actual = beautify.html(root.outerHTML.replaceAll(" ", "\xa0"), {
       indent_size: 2,
       inline: ["title", "tspan", "span", "svg", "a", "i"],
       indent_inner_html: false

test/output/logTickFormatFunctionSv.svg

@@ -152,6 +152,7 @@ export * from "./linear-regression-cars.js";
 export * from "./linear-regression-mtcars.js";
 export * from "./linear-regression-penguins.js";
 export * from "./log-degenerate.js";
+export * from "./log-tick-format.js";
 export * from "./long-labels.js";
 export * from "./markers.js";
 export * from "./markov-chain.js";

test/plot.js

@@ -0,0 +1,9 @@
+import * as Plot from "@observablehq/plot";
+
+export async function logTickFormatFunction() {
+  return Plot.plot({x: {type: "log", domain: [1, 4200], tickFormat: Plot.formatNumber()}});
+}
+
+export async function logTickFormatFunctionSv() {
+  return Plot.plot({x: {type: "log", domain: [1, 4200], tickFormat: Plot.formatNumber("sv-SE")}});
+}