| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242 |
- import type {ChannelValue, ChannelValueIntervalSpec, ChannelValueSpec} from "../channel.js";
- import type {Interval} from "../interval.js";
- import type {Data, FrameAnchor, MarkOptions, RenderableMark} from "../mark.js";
- /** Options for styling text (independent of anchor position). */
- export interface TextStyles {
- /**
- * The [text anchor][1] controls how text is aligned (typically horizontally)
- * relative to its anchor point; it is one of *start*, *end*, or *middle*. If
- * the frame anchor is *left*, *top-left*, or *bottom-left*, the default text
- * anchor is *start*; if the frame anchor is *right*, *top-right*, or
- * *bottom-right*, the default is *end*; otherwise it is *middle*.
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
- */
- textAnchor?: "start" | "middle" | "end";
- /**
- * The line height in ems; defaults to 1. The line height affects the
- * (typically vertical) separation between adjacent baselines of text, as well
- * as the separation between the text and its anchor point.
- */
- lineHeight?: number;
- /**
- * The line width in ems (e.g., 10 for about 20 characters); defaults to
- * infinity, disabling wrapping and clipping.
- *
- * If **textOverflow** is null, lines will be wrapped at the specified length.
- * If a line is split at a soft hyphen (\xad), a hyphen (-) will be displayed
- * at the end of the line. If **textOverflow** is not null, lines will be
- * clipped according to the given strategy.
- */
- lineWidth?: number;
- /**
- * How truncate (or wrap) lines of text longer than the given **lineWidth**;
- * one of:
- *
- * - null (default) - preserve overflowing characters (and wrap if needed)
- * - *clip* or *clip-end* - remove characters from the end
- * - *clip-start* - remove characters from the start
- * - *ellipsis* or *ellipsis-end* - replace characters from the end with an ellipsis (…)
- * - *ellipsis-start* - replace characters from the start with an ellipsis (…)
- * - *ellipsis-middle* - replace characters from the middle with an ellipsis (…)
- *
- * If no **title** was specified, if text requires truncation, a title
- * containing the non-truncated text will be implicitly added.
- */
- textOverflow?:
- | null
- | "clip"
- | "ellipsis"
- | "clip-start"
- | "clip-end"
- | "ellipsis-start"
- | "ellipsis-middle"
- | "ellipsis-end";
- /**
- * If true, changes the default **fontFamily** to *monospace*, and uses
- * simplified monospaced text metrics calculations.
- */
- monospace?: boolean;
- /**
- * The [font-family][1]; a constant; defaults to the plot’s font family, which
- * is typically [*system-ui*][2].
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
- * [2]: https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui
- */
- fontFamily?: string;
- /**
- * The [font size][1] in pixels; either a constant or a channel; defaults to
- * the plot’s font size, which is typically 10. When a number, it is
- * interpreted as a constant; otherwise it is interpreted as a channel.
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
- */
- fontSize?: ChannelValue;
- /**
- * The [font style][1]; a constant; defaults to the plot’s font style, which
- * is typically *normal*.
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
- */
- fontStyle?: string;
- /**
- * The [font variant][1]; a constant; if the **text** channel contains numbers
- * or dates, defaults to *tabular-nums* to facilitate comparing numbers;
- * otherwise defaults to the plot’s font style, which is typically *normal*.
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
- */
- fontVariant?: string;
- /**
- * The [font weight][1]; a constant; defaults to the plot’s font weight, which
- * is typically *normal*.
- *
- * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
- */
- fontWeight?: string | number;
- }
- /** Options for the text mark. */
- export interface TextOptions extends MarkOptions, TextStyles {
- /**
- * The horizontal position channel specifying the text’s anchor point,
- * typically bound to the *x* scale.
- */
- x?: ChannelValueSpec;
- /**
- * The vertical position channel specifying the text’s anchor point, typically
- * bound to the *y* scale.
- */
- y?: ChannelValueSpec;
- /**
- * The text contents channel, possibly with line breaks (\n, \r\n, or \r). If
- * not specified, defaults to the zero-based index [0, 1, 2, …].
- */
- text?: ChannelValue;
- /**
- * The frame anchor specifies defaults for **x** and **y**, along with
- * **textAnchor** and **lineAnchor**, based on the plot’s frame; it may be one
- * of the four sides (*top*, *right*, *bottom*, *left*), one of the four
- * corners (*top-left*, *top-right*, *bottom-right*, *bottom-left*), or the
- * *middle* of the frame.
- */
- frameAnchor?: FrameAnchor;
- /**
- * The line anchor controls how text is aligned (typically vertically)
- * relative to its anchor point; it is one of *top*, *bottom*, or *middle*. If
- * the frame anchor is *top*, *top-left*, or *top-right*, the default line
- * anchor is *top*; if the frame anchor is *bottom*, *bottom-right*, or
- * *bottom-left*, the default is *bottom*; otherwise it is *middle*.
- */
- lineAnchor?: "top" | "middle" | "bottom";
- /**
- * The rotation angle in degrees clockwise; a constant or a channel; defaults
- * to 0°. When a number, it is interpreted as a constant; otherwise it is
- * interpreted as a channel.
- */
- rotate?: ChannelValue;
- }
- /** Options for the textX mark. */
- export interface TextXOptions extends Omit<TextOptions, "y"> {
- /**
- * The vertical position of the text’s anchor point, typically bound to the
- * *y* scale.
- */
- y?: ChannelValueIntervalSpec;
- /**
- * An interval (such as *day* or a number), to transform **y** values to the
- * middle of the interval.
- */
- interval?: Interval;
- }
- /** Options for the textY mark. */
- export interface TextYOptions extends Omit<TextOptions, "x"> {
- /**
- * The horizontal position of the text’s anchor point, typically bound to the
- * *x* scale.
- */
- x?: ChannelValueIntervalSpec;
- /**
- * An interval (such as *day* or a number), to transform **x** values to the
- * middle of the interval.
- */
- interval?: Interval;
- }
- /**
- * Returns a new text mark for the given *data* and *options*. The **text**
- * channel specifies the textual contents of the mark, which may be preformatted
- * with line breaks (\n, \r\n, or \r), or wrapped or clipped using the
- * **lineWidth** and **textOverflow** options.
- *
- * If **text** contains numbers or dates, a default formatter will be applied,
- * and the **fontVariant** will default to *tabular-nums* instead of *normal*.
- * For more control, consider [*number*.toLocaleString][1],
- * [*date*.toLocaleString][2], [d3-format][3], or [d3-time-format][4]. If
- * **text** is not specified, it defaults to the identity function for primitive
- * data (such as numbers, dates, and strings), and to the zero-based index [0,
- * 1, 2, …] for objects (so that something identifying is visible by default).
- *
- * If either **x** or **y** is not specified, the default is determined by the
- * **frameAnchor** option. If none of **x**, **y**, and **frameAnchor** are
- * specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*,
- * *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** =
- * [*y₀*, *y₁*, *y₂*, …].
- *
- * [1]: https://observablehq.com/@mbostock/number-formatting
- * [2]: https://observablehq.com/@mbostock/date-formatting
- * [3]: https://d3js.org/d3-format
- * [4]: https://d3js.org/d3-time-format
- */
- export function text(data?: Data, options?: TextOptions): Text;
- /**
- * Like text, but **x** defaults to the identity function, assuming that *data*
- * = [*x₀*, *x₁*, *x₂*, …]. For example to display tick label-like marks at the
- * top of the frame:
- *
- * ```js
- * Plot.textX([10, 15, 20, 25, 30], {frameAnchor: "top"})
- * ```
- *
- * If an **interval** is specified, such as *day*, **y** is transformed to the
- * middle of the interval.
- */
- export function textX(data?: Data, options?: TextXOptions): Text;
- /**
- * Like text, but **y** defaults to the identity function, assuming that *data*
- * = [*y₀*, *y₁*, *y₂*, …]. For example to display tick label-like marks on the
- * right of the frame:
- *
- * ```js
- * Plot.textY([10, 15, 20, 25, 30], {frameAnchor: "right"})
- * ```
- *
- * If an **interval** is specified, such as *day*, **x** is transformed to the
- * middle of the interval.
- */
- export function textY(data?: Data, options?: TextYOptions): Text;
- /** The text mark. */
- export class Text extends RenderableMark {}
|