text.d.ts 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242
  1. import type {ChannelValue, ChannelValueIntervalSpec, ChannelValueSpec} from "../channel.js";
  2. import type {Interval} from "../interval.js";
  3. import type {Data, FrameAnchor, MarkOptions, RenderableMark} from "../mark.js";
  4. /** Options for styling text (independent of anchor position). */
  5. export interface TextStyles {
  6. /**
  7. * The [text anchor][1] controls how text is aligned (typically horizontally)
  8. * relative to its anchor point; it is one of *start*, *end*, or *middle*. If
  9. * the frame anchor is *left*, *top-left*, or *bottom-left*, the default text
  10. * anchor is *start*; if the frame anchor is *right*, *top-right*, or
  11. * *bottom-right*, the default is *end*; otherwise it is *middle*.
  12. *
  13. * [1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor
  14. */
  15. textAnchor?: "start" | "middle" | "end";
  16. /**
  17. * The line height in ems; defaults to 1. The line height affects the
  18. * (typically vertical) separation between adjacent baselines of text, as well
  19. * as the separation between the text and its anchor point.
  20. */
  21. lineHeight?: number;
  22. /**
  23. * The line width in ems (e.g., 10 for about 20 characters); defaults to
  24. * infinity, disabling wrapping and clipping.
  25. *
  26. * If **textOverflow** is null, lines will be wrapped at the specified length.
  27. * If a line is split at a soft hyphen (\xad), a hyphen (-) will be displayed
  28. * at the end of the line. If **textOverflow** is not null, lines will be
  29. * clipped according to the given strategy.
  30. */
  31. lineWidth?: number;
  32. /**
  33. * How truncate (or wrap) lines of text longer than the given **lineWidth**;
  34. * one of:
  35. *
  36. * - null (default) - preserve overflowing characters (and wrap if needed)
  37. * - *clip* or *clip-end* - remove characters from the end
  38. * - *clip-start* - remove characters from the start
  39. * - *ellipsis* or *ellipsis-end* - replace characters from the end with an ellipsis (…)
  40. * - *ellipsis-start* - replace characters from the start with an ellipsis (…)
  41. * - *ellipsis-middle* - replace characters from the middle with an ellipsis (…)
  42. *
  43. * If no **title** was specified, if text requires truncation, a title
  44. * containing the non-truncated text will be implicitly added.
  45. */
  46. textOverflow?:
  47. | null
  48. | "clip"
  49. | "ellipsis"
  50. | "clip-start"
  51. | "clip-end"
  52. | "ellipsis-start"
  53. | "ellipsis-middle"
  54. | "ellipsis-end";
  55. /**
  56. * If true, changes the default **fontFamily** to *monospace*, and uses
  57. * simplified monospaced text metrics calculations.
  58. */
  59. monospace?: boolean;
  60. /**
  61. * The [font-family][1]; a constant; defaults to the plot’s font family, which
  62. * is typically [*system-ui*][2].
  63. *
  64. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
  65. * [2]: https://drafts.csswg.org/css-fonts-4/#valdef-font-family-system-ui
  66. */
  67. fontFamily?: string;
  68. /**
  69. * The [font size][1] in pixels; either a constant or a channel; defaults to
  70. * the plot’s font size, which is typically 10. When a number, it is
  71. * interpreted as a constant; otherwise it is interpreted as a channel.
  72. *
  73. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
  74. */
  75. fontSize?: ChannelValue;
  76. /**
  77. * The [font style][1]; a constant; defaults to the plot’s font style, which
  78. * is typically *normal*.
  79. *
  80. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-style
  81. */
  82. fontStyle?: string;
  83. /**
  84. * The [font variant][1]; a constant; if the **text** channel contains numbers
  85. * or dates, defaults to *tabular-nums* to facilitate comparing numbers;
  86. * otherwise defaults to the plot’s font style, which is typically *normal*.
  87. *
  88. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
  89. */
  90. fontVariant?: string;
  91. /**
  92. * The [font weight][1]; a constant; defaults to the plot’s font weight, which
  93. * is typically *normal*.
  94. *
  95. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
  96. */
  97. fontWeight?: string | number;
  98. }
  99. /** Options for the text mark. */
  100. export interface TextOptions extends MarkOptions, TextStyles {
  101. /**
  102. * The horizontal position channel specifying the text’s anchor point,
  103. * typically bound to the *x* scale.
  104. */
  105. x?: ChannelValueSpec;
  106. /**
  107. * The vertical position channel specifying the text’s anchor point, typically
  108. * bound to the *y* scale.
  109. */
  110. y?: ChannelValueSpec;
  111. /**
  112. * The text contents channel, possibly with line breaks (\n, \r\n, or \r). If
  113. * not specified, defaults to the zero-based index [0, 1, 2, …].
  114. */
  115. text?: ChannelValue;
  116. /**
  117. * The frame anchor specifies defaults for **x** and **y**, along with
  118. * **textAnchor** and **lineAnchor**, based on the plot’s frame; it may be one
  119. * of the four sides (*top*, *right*, *bottom*, *left*), one of the four
  120. * corners (*top-left*, *top-right*, *bottom-right*, *bottom-left*), or the
  121. * *middle* of the frame.
  122. */
  123. frameAnchor?: FrameAnchor;
  124. /**
  125. * The line anchor controls how text is aligned (typically vertically)
  126. * relative to its anchor point; it is one of *top*, *bottom*, or *middle*. If
  127. * the frame anchor is *top*, *top-left*, or *top-right*, the default line
  128. * anchor is *top*; if the frame anchor is *bottom*, *bottom-right*, or
  129. * *bottom-left*, the default is *bottom*; otherwise it is *middle*.
  130. */
  131. lineAnchor?: "top" | "middle" | "bottom";
  132. /**
  133. * The rotation angle in degrees clockwise; a constant or a channel; defaults
  134. * to 0°. When a number, it is interpreted as a constant; otherwise it is
  135. * interpreted as a channel.
  136. */
  137. rotate?: ChannelValue;
  138. }
  139. /** Options for the textX mark. */
  140. export interface TextXOptions extends Omit<TextOptions, "y"> {
  141. /**
  142. * The vertical position of the text’s anchor point, typically bound to the
  143. * *y* scale.
  144. */
  145. y?: ChannelValueIntervalSpec;
  146. /**
  147. * An interval (such as *day* or a number), to transform **y** values to the
  148. * middle of the interval.
  149. */
  150. interval?: Interval;
  151. }
  152. /** Options for the textY mark. */
  153. export interface TextYOptions extends Omit<TextOptions, "x"> {
  154. /**
  155. * The horizontal position of the text’s anchor point, typically bound to the
  156. * *x* scale.
  157. */
  158. x?: ChannelValueIntervalSpec;
  159. /**
  160. * An interval (such as *day* or a number), to transform **x** values to the
  161. * middle of the interval.
  162. */
  163. interval?: Interval;
  164. }
  165. /**
  166. * Returns a new text mark for the given *data* and *options*. The **text**
  167. * channel specifies the textual contents of the mark, which may be preformatted
  168. * with line breaks (\n, \r\n, or \r), or wrapped or clipped using the
  169. * **lineWidth** and **textOverflow** options.
  170. *
  171. * If **text** contains numbers or dates, a default formatter will be applied,
  172. * and the **fontVariant** will default to *tabular-nums* instead of *normal*.
  173. * For more control, consider [*number*.toLocaleString][1],
  174. * [*date*.toLocaleString][2], [d3-format][3], or [d3-time-format][4]. If
  175. * **text** is not specified, it defaults to the identity function for primitive
  176. * data (such as numbers, dates, and strings), and to the zero-based index [0,
  177. * 1, 2, …] for objects (so that something identifying is visible by default).
  178. *
  179. * If either **x** or **y** is not specified, the default is determined by the
  180. * **frameAnchor** option. If none of **x**, **y**, and **frameAnchor** are
  181. * specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*,
  182. * *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** =
  183. * [*y₀*, *y₁*, *y₂*, …].
  184. *
  185. * [1]: https://observablehq.com/@mbostock/number-formatting
  186. * [2]: https://observablehq.com/@mbostock/date-formatting
  187. * [3]: https://d3js.org/d3-format
  188. * [4]: https://d3js.org/d3-time-format
  189. */
  190. export function text(data?: Data, options?: TextOptions): Text;
  191. /**
  192. * Like text, but **x** defaults to the identity function, assuming that *data*
  193. * = [*x₀*, *x₁*, *x₂*, …]. For example to display tick label-like marks at the
  194. * top of the frame:
  195. *
  196. * ```js
  197. * Plot.textX([10, 15, 20, 25, 30], {frameAnchor: "top"})
  198. * ```
  199. *
  200. * If an **interval** is specified, such as *day*, **y** is transformed to the
  201. * middle of the interval.
  202. */
  203. export function textX(data?: Data, options?: TextXOptions): Text;
  204. /**
  205. * Like text, but **y** defaults to the identity function, assuming that *data*
  206. * = [*y₀*, *y₁*, *y₂*, …]. For example to display tick label-like marks on the
  207. * right of the frame:
  208. *
  209. * ```js
  210. * Plot.textY([10, 15, 20, 25, 30], {frameAnchor: "right"})
  211. * ```
  212. *
  213. * If an **interval** is specified, such as *day*, **x** is transformed to the
  214. * middle of the interval.
  215. */
  216. export function textY(data?: Data, options?: TextYOptions): Text;
  217. /** The text mark. */
  218. export class Text extends RenderableMark {}