Skip to content

Commit

Permalink
formatNumber; filter log tickFormat function
Browse files Browse the repository at this point in the history
  • Loading branch information
mbostock committed Jun 10, 2024
1 parent 7d48d4a commit d9a98e9
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 2 deletions.
8 changes: 8 additions & 0 deletions docs/features/formats.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
10 changes: 10 additions & 0 deletions src/format.d.ts
Original file line number Diff line number Diff line change
@@ -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*.
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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";
2 changes: 1 addition & 1 deletion src/marks/axis.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
82 changes: 82 additions & 0 deletions test/output/logTickFormatFunction.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions test/plots/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
5 changes: 5 additions & 0 deletions test/plots/log-tick-format.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import * as Plot from "@observablehq/plot";

export async function logTickFormatFunction() {
return Plot.plot({x: {type: "log", domain: [1, 4200], tickFormat: Plot.formatNumber()}});
}

0 comments on commit d9a98e9

Please sign in to comment.