legends.d.ts 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
  1. import type {ScaleName, ScaleOptions} from "./scales.js";
  2. /** Options for generating a scale legend. */
  3. export interface LegendOptions {
  4. /**
  5. * The desired legend type; one of:
  6. *
  7. * - *ramp* - place labels underneath with a connecting line, and no wrapping
  8. * - *swatches* - place labels to the right, and allow wrapping
  9. *
  10. * The legend type can currently only be configured for a discrete *color*
  11. * scale of type *ordinal*, *quantile*, *quantize*, or *threshold*; for other
  12. * *color* scale types, or for *opacity* or *symbol* scales, the legend type
  13. * cannot be changed.
  14. */
  15. legend?: "ramp" | "swatches";
  16. /**
  17. * How to format tick values sampled from the scale’s domain. This may be a
  18. * function, which will be passed the tick value *t* and zero-based index *i*
  19. * and must return the corresponding string. If the domain is numbers, the
  20. * tick format may also be expressed as a [d3-format string][1]; or if the
  21. * domain is dates, the tick format may also be expressed as a [d3-time-format
  22. * string][2].
  23. *
  24. * [1]: https://d3js.org/d3-format#locale_format
  25. * [2]: https://d3js.org/d3-time-format#locale_format
  26. */
  27. tickFormat?: ScaleOptions["tickFormat"];
  28. /**
  29. * The [CSS font-variant][1] for tick labels. For non-ordinal scales, or
  30. * ordinal scales without an interval, this defaults to *tabular-nums*.
  31. *
  32. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant
  33. */
  34. fontVariant?: ScaleOptions["fontVariant"];
  35. /** Custom styles to override Plot’s defaults. */
  36. style?: string | Partial<CSSStyleDeclaration> | null;
  37. /**
  38. * The generated element’s class name used for Plot’s default stylesheet; by
  39. * default, a random string prefixed with “plot-”.
  40. */
  41. className?: string | null;
  42. /** The constant color the ramp; defaults to black. For *ramp* *opacity* legends only. */
  43. color?: string;
  44. /** The desired fill color of symbols; use *color* for a redundant encoding. For *symbol* legends only. */
  45. fill?: string;
  46. /** The desired fill opacity of symbols. For *symbol* legends only. */
  47. fillOpacity?: number;
  48. /** The desired opacity of the color swatches or ramp. For *color* legends only. */
  49. opacity?: number;
  50. /** The desired stroke color of symbols; use *color* for a redundant encoding. For *symbol* legends only. */
  51. stroke?: string;
  52. /** The desired stroke opacity of symbols. For *symbol* legends only. */
  53. strokeOpacity?: number;
  54. /** The desired stroke width of symbols. For *symbol* legends only. */
  55. strokeWidth?: number;
  56. /** The desired radius of symbols in pixels. For *symbol* legends only. */
  57. r?: number;
  58. /**
  59. * The width of the legend in pixels. For *ramp* legends, defaults to 240; for
  60. * *swatch* legends, defaults to undefined, allowing the swatches to wrap
  61. * based on content flow.
  62. */
  63. width?: number;
  64. /**
  65. * The height of the legend in pixels; defaults to 44 plus **tickSize**. For
  66. * *ramp* legends only.
  67. */
  68. height?: number;
  69. /** The top margin in pixels; defaults to 18. For *ramp* legends only. */
  70. marginTop?: number;
  71. /** The right margin in pixels; defaults to 0. For *ramp* legends only. */
  72. marginRight?: number;
  73. /** The bottom margin in pixels; defaults to 16 plus **tickSize**. For *ramp* legends only. */
  74. marginBottom?: number;
  75. /** The left margin in pixels; defaults to 0. For *ramp* legends only. */
  76. marginLeft?: number;
  77. /** A textual label to place above the legend. For *ramp* legends only. */
  78. label?: string | null;
  79. /**
  80. * The desired approximate number of axis ticks, or an explicit array of tick
  81. * values, or an interval such as *day* or *month*. For *ramp* legends only.
  82. */
  83. ticks?: ScaleOptions["ticks"];
  84. /**
  85. * The length of axis tick marks in pixels; negative values extend in the
  86. * opposite direction. For *ramp* legends only.
  87. */
  88. tickSize?: ScaleOptions["tickSize"];
  89. /**
  90. * If true, round the output value to the nearest integer (pixel); useful for
  91. * crisp edges when rendering. For *ramp* legends only.
  92. */
  93. round?: ScaleOptions["round"];
  94. /**
  95. * The [CSS columns property][1], for a multi-column layout. For *swatches*
  96. * legends only.
  97. *
  98. * [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/columns
  99. */
  100. columns?: string;
  101. /** The swatch width and height in pixels; defaults to 15; For *swatches* legends only. */
  102. swatchSize?: number;
  103. /** The swatch width in pixels; defaults to **swatchSize**; For *swatches* legends only. */
  104. swatchWidth?: number;
  105. /** The swatch height in pixels; defaults to **swatchSize**; For *swatches* legends only. */
  106. swatchHeight?: number;
  107. }
  108. /** Scale definitions and options for a standalone legend. */
  109. export type LegendScales = {[key in ScaleName]?: ScaleOptions | (key extends keyof LegendOptions ? LegendOptions[key] : never)} & Omit<LegendOptions, ScaleName>; // prettier-ignore
  110. /**
  111. * Generates a standalone legend for the scale defined by the given *options*,
  112. * returning either an SVG or HTML element depending on the scale and the
  113. * desired legend type. Currently supports only *color*, *opacity*, and *symbol*
  114. * scales.
  115. */
  116. export function legend(options?: LegendScales): SVGSVGElement | HTMLElement;