ngwr 15.0.1 → 15.2.0

package/charts/candlestick-chart/styles/_index.scss

@@ -0,0 +1,307 @@
+@use '../../../theme/styles' as theme;
+@use '../../../popover/styles' as popover-styles; // the `.wr-tooltip` chip the hover tooltip renders into
+
+// Styles for the entry points this component's own markup renders. With `dataTable`,
+// the figures render as a `<wr-chart-table>` beside the plot, which its own sheet clips
+// out of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+// The lengths inside a candle, each against the candle's own height as every percentage
+// inside it is: the upper wick's share and the lower wick's, as the component writes
+// them, and the body's own height between them.
+$-upper: calc(var(--wr-candlestick-chart-upper, 0) * 1%);
+$-lower: calc(var(--wr-candlestick-chart-lower, 0) * 1%);
+$-body: calc(100% - $-upper - $-lower);
+
+// The body's height: its own, or `$min` where that is taller.
+@function _body-height($min) {
+  @return max($min, $-body);
+}
+
+// The wick at the `$near` end of a body `$min` tall, the other wick's share being `$far`;
+// for the upper one, that is also where the body starts. A body grown past its own height
+// takes the same from both wicks where both have it, so its middle stays on its true
+// middle; it is held inside the candle where one has not, so it never passes the high
+// or the low; and where the whole candle is shorter than the body it is centred on the
+// candle and neither wick is left. Measured from its own end, so the lower wick is the
+// upper one's mirror, and each stops at the grown edge rather than crossing a hollow
+// body's inside.
+@function _wick($min, $near, $far) {
+  // What the body leaves of the candle for the two wicks: below zero where it is taller.
+  $room: calc(100% - _body-height($min));
+  @return clamp(min(calc($room / 2), 0px), calc(($room + $near - $far) / 2), $room);
+}
+
+.wr-candlestick-chart {
+  --wr-candlestick-chart-font-family: var(--wr-font-family-base);
+  --wr-candlestick-chart-color: var(--wr-color-on-surface);
+  // A rising candle and a falling one, named as the waterfall's change up and change
+  // down are. The two intents sit within 1.004:1 of each other in luminance, so they are
+  // never the only thing that tells the candles apart: a rising body is hollow and a
+  // falling one filled, whatever these say. Both measure over 4:1 against the surface in
+  // either scheme, past the 3:1 WCAG 1.4.11 asks of a mark a reader needs.
+  --wr-candlestick-chart-increase-color: var(--wr-color-success);
+  --wr-candlestick-chart-decrease-color: var(--wr-color-danger);
+  // The room above and below the drawing inside the plot, which the y labels read to
+  // meet their gridlines.
+  --wr-candlestick-chart-plot-inset-y: var(--wr-space-sm);
+  --wr-candlestick-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-candlestick-chart-tick-gap: var(--wr-space-xs);
+  --wr-candlestick-chart-tick-font-size: var(--wr-text-xs);
+  --wr-candlestick-chart-tick-line-height: var(--wr-text-xs-leading);
+  --wr-candlestick-chart-tick-color: var(--wr-color-on-surface-muted);
+  // A body is 70% of its slot, never under 1px and never over this; the gap between two
+  // candles is the rest of the slot, so it closes as the candles crowd.
+  --wr-candlestick-chart-body-max-width: 1.5rem;
+  --wr-candlestick-chart-body-border-width: 1px;
+  --wr-candlestick-chart-wick-width: 1px;
+  // The band behind the candle being read, under the gridlines, so they read across it.
+  --wr-candlestick-chart-cursor-bg: var(--wr-color-hover);
+
+  display: block;
+  // The containing block of the out-of-flow `dataTable` copy, as on the line chart: a
+  // static host lets that 1px box resolve against an ancestor outside the chart and keep
+  // its place in an unpositioned scroller's content. No z-index, so no stacking context.
+  position: relative;
+  font-family: var(--wr-candlestick-chart-font-family);
+  color: var(--wr-candlestick-chart-color);
+
+  // The y labels at inline start, the plot beside them, and the period labels under the
+  // plot alone. A grid follows `direction`, so the gutter is on the right under RTL with
+  // no rule of its own; the drawing itself does not mirror — time runs left to right in
+  // a price chart in every language, as in every SVG chart here. The HTML layouts (bar,
+  // bullet, treemap) are the ones that mirror.
+  &__body {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  // As wide as the longest label: every label is in flow, in the one cell of a one-cell
+  // grid, so the column sizes to the widest while its height stays one label. Stretched
+  // to the plot's row, each label moves down from the top by its own gridline's share of
+  // the drawing, inside the plot's block padding, then up by half itself.
+  &__y-axis {
+    grid-column: 1;
+    grid-row: 1;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    padding-inline-end: var(--wr-candlestick-chart-tick-gap);
+    font-size: var(--wr-candlestick-chart-tick-font-size);
+    line-height: var(--wr-candlestick-chart-tick-line-height);
+    color: var(--wr-candlestick-chart-tick-color);
+    text-align: end;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // Shrunk to its text against the plot's side of the column, so its own direction can
+  // follow its text (`plaintext`), as the waterfall's and the box plot's ticks do: a
+  // price below zero is a `-` in front of digits, neither of which has a direction of its
+  // own, and under RTL the sign would land on the far side — `50-`.
+  &__y-tick {
+    $inset: var(--wr-candlestick-chart-plot-inset-y);
+
+    grid-area: 1 / 1;
+    align-self: start;
+    justify-self: end;
+    position: relative;
+    unicode-bidi: plaintext;
+    top: calc($inset + (100% - 2 * $inset) * var(--wr-candlestick-chart-y, 0) / 100);
+    transform: translateY(-50%);
+  }
+
+  &__plot {
+    grid-column: 2;
+    grid-row: 1;
+    position: relative;
+    padding-block: var(--wr-candlestick-chart-plot-inset-y);
+  }
+
+  // Edge to edge across the plot: the first and the last candle sit half a slot in, so
+  // no inline padding is needed to keep them off the frame.
+  &__drawing {
+    position: relative;
+    height: 100%;
+  }
+
+  &__grid-line {
+    position: absolute;
+    inset-inline: 0;
+    border-block-start: 1px solid var(--wr-candlestick-chart-grid-color);
+  }
+
+  // One slot wide, the full height of the drawing.
+  &__cursor {
+    position: absolute;
+    inset-block: 0;
+    width: calc(var(--wr-candlestick-chart-slot, 100) * 1%);
+    background: var(--wr-candlestick-chart-cursor-bg);
+    pointer-events: none;
+  }
+
+  // A body is drawn at least tall enough to show what tells a rising one from a falling
+  // one: its two edges and a 2px inside while hollow, or two dashes and the gap between
+  // them while dense. Shorter — a candle that barely moved — it would draw as a solid
+  // line in either direction, and leave colour the only channel. Both directions grow
+  // alike, so a small rise never looks larger than a fall of the same size, and a body
+  // grows into its own wicks, so the high and the low stay where they are (see the
+  // functions at the top).
+  $dash: 2px;
+  $body-min: calc(2 * var(--wr-candlestick-chart-body-border-width) + 2px);
+  $dense-body-min: 2 * $dash + 1px;
+
+  // From the high to the low, as wide as the body and centred on its slot. The colour is
+  // the candle's `color`, which the body and both wicks paint with.
+  &__candle {
+    position: absolute;
+    width: clamp(1px, calc(var(--wr-candlestick-chart-slot, 100) * 0.7%), var(--wr-candlestick-chart-body-max-width));
+    // rtl-ok: centred against a physical translateX, and the drawing's x does not flip with `direction`
+    transform: translateX(-50%);
+    pointer-events: none;
+
+    &--increase {
+      color: var(--wr-candlestick-chart-input-increase-color, var(--wr-candlestick-chart-increase-color));
+    }
+
+    &--decrease {
+      color: var(--wr-candlestick-chart-input-decrease-color, var(--wr-candlestick-chart-decrease-color));
+    }
+
+    // The wicks: above the body and below it, never through it, so a hollow body is
+    // empty. Each is a share of the candle's own height, written by the component.
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      // rtl-ok: centred against a physical translateX, and the drawing's x does not flip with `direction`
+      left: 50%;
+      width: var(--wr-candlestick-chart-wick-width);
+      // rtl-ok: the pair to `left: 50%` above
+      transform: translateX(-50%);
+      background: currentColor;
+    }
+
+    &::before {
+      top: 0;
+      height: max(0px, _wick($body-min, $-upper, $-lower));
+    }
+
+    &::after {
+      bottom: 0;
+      height: max(0px, _wick($body-min, $-lower, $-upper));
+    }
+  }
+
+  // Between the wicks, grown to the least height above when it is shorter — a candle
+  // that opened and closed on one price (a doji) included.
+  &__candle-body {
+    position: absolute;
+    inset-inline: 0;
+    top: _wick($body-min, $-upper, $-lower);
+    height: _body-height($body-min);
+    border: var(--wr-candlestick-chart-body-border-width) solid currentColor;
+  }
+
+  &__candle--decrease &__candle-body {
+    background: currentColor;
+  }
+
+  // A body under 4px wide has no inside to leave hollow — its two edges and at most a
+  // pixel between them read as one bar — so a rising body is DOTTED instead, solid
+  // pixels with gaps between them down its length, and a falling one stays solid. A
+  // pattern is a channel that survives greyscale, where a lighter tint of the colour
+  // would fall under 3:1 against the surface.
+  &--dense &__candle::before {
+    height: max(0px, _wick($dense-body-min, $-upper, $-lower));
+  }
+
+  &--dense &__candle::after {
+    height: max(0px, _wick($dense-body-min, $-lower, $-upper));
+  }
+
+  &--dense &__candle-body {
+    top: _wick($dense-body-min, $-upper, $-lower);
+    height: _body-height($dense-body-min);
+    border-width: 0;
+  }
+
+  &--dense &__candle--increase &__candle-body {
+    background: repeating-linear-gradient(to bottom, currentColor 0 $dash, transparent $dash 2 * $dash);
+  }
+
+  &__x-axis {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    margin-block-start: var(--wr-candlestick-chart-tick-gap);
+    font-size: var(--wr-candlestick-chart-tick-font-size);
+    line-height: var(--wr-candlestick-chart-tick-line-height);
+    color: var(--wr-candlestick-chart-tick-color);
+    font-variant-numeric: tabular-nums;
+    // The labels are absolutely positioned under their candles, so the strip has no
+    // content of its own to give it a height.
+    height: 1.25em;
+    // A `translateX` percentage means the LABEL's own width, so the room left beside it
+    // has to arrive in another unit — `cqw` is this strip's. Every label is out of flow,
+    // so the containment costs the layout nothing.
+    container-type: inline-size;
+    // A label held to its room is cut there, never past the strip.
+    overflow: hidden;
+  }
+
+  // Every label, a line each, laid out and never seen: the component measures it to
+  // decide how many labels fit. A line breaks only where the component put a break, and
+  // spaces collapse as a printed label's do, so the copy is exactly as wide as the widest
+  // label.
+  &__x-probe {
+    position: absolute;
+    width: max-content;
+    visibility: hidden;
+    white-space: pre-line;
+  }
+
+  &__x-label {
+    $x: var(--wr-candlestick-chart-x, 50);
+    $slot: var(--wr-candlestick-chart-x-slot, 100);
+
+    position: absolute;
+    // rtl-ok: the drawing's own x, which does not flip with `direction`
+    left: calc(100% * $x / 100);
+    // Centred under its candle. The component prints only the labels that fit there,
+    // measured as wide as the widest, so this clamp is the net under its estimate before
+    // a browser has measured: a label still too wide for its place near an end moves
+    // inwards, never past either end of the strip.
+    // rtl-ok: the drawing's own x, which does not flip with `direction`
+    transform: translateX(clamp(calc(-100cqw * $x / 100), -50%, calc(100cqw * (100 - $x) / 100 - 100%)));
+    // Its own room — every n-th slot, half the way to the next printed label on each
+    // side — so a label longer than the measure allowed for is ellipsised rather than
+    // run into its neighbour.
+    max-width: calc(100% * $slot / 100);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+// The candles keep their colours under forced colors, as every chart's marks do, and so
+// keep both channels: a mark painted with `background` would otherwise be reset to
+// `Canvas` and vanish into the page, taking the filled body with it. The grid and the
+// band are drawn in theme colours that mean nothing on a forced palette, so they take
+// the system's own: the band an outline in the selection colour, since a background is
+// reset.
+@media (forced-colors: active) {
+  .wr-candlestick-chart {
+    --wr-candlestick-chart-grid-color: GrayText;
+  }
+
+  .wr-candlestick-chart__candle {
+    forced-color-adjust: none;
+  }
+
+  .wr-candlestick-chart__cursor {
+    forced-color-adjust: none;
+    background: transparent;
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}

package/charts/chart-legend/styles/_index.scss

@@ -0,0 +1,143 @@
+@use '../../../theme/styles' as theme;
+
+// The hooks, and the placement a chart decides for itself, at zero specificity: a chart
+// that draws its legend with this list puts it on its own `__legend` element and sets
+// its margin, gap and alignment there, so `:where()` lets the chart's own rule win
+// whatever order the two sheets arrive in, and a chart re-points a hook from any
+// selector at all.
+:where(.wr-chart-legend) {
+  --wr-chart-legend-gap-y: var(--wr-space-sm);
+  --wr-chart-legend-gap-x: var(--wr-space-lg);
+  --wr-chart-legend-item-gap: var(--wr-space-sm);
+  --wr-chart-legend-font-size: var(--wr-text-xs);
+  --wr-chart-legend-color: var(--wr-color-on-surface);
+  --wr-chart-legend-label-font-weight: inherit;
+  --wr-chart-legend-value-color: var(--wr-color-on-surface-muted);
+  --wr-chart-legend-dot-size: 0.625rem;
+  --wr-chart-legend-marker-size: 0.75rem;
+  // A hidden series is struck through as well as muted, so its state is not carried by
+  // colour alone, and its key fades: the key is `aria-hidden`, the label says it.
+  --wr-chart-legend-hidden-color: var(--wr-color-on-surface-muted);
+  --wr-chart-legend-hidden-swatch-opacity: 0.35;
+  // 24px, WCAG 2.5.8's minimum target, for the rows of a `toggleable` legend.
+  --wr-chart-legend-toggle-min-height: 1.5rem;
+  --wr-chart-legend-toggle-padding-x: var(--wr-space-xs);
+  --wr-chart-legend-toggle-radius: var(--wr-border-radius-sm);
+  --wr-chart-legend-toggle-hover-bg: var(--wr-color-hover);
+
+  margin: 0;
+  gap: var(--wr-chart-legend-gap-y) var(--wr-chart-legend-gap-x);
+}
+
+// The structure every placement shares, at the class's own specificity: an app's own
+// `ul { padding-inline-start: … }` must not indent a standalone legend, and a
+// zero-specificity reset would lose to it.
+.wr-chart-legend {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wr-chart-legend__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wr-chart-legend-item-gap);
+  font-size: var(--wr-chart-legend-font-size);
+  color: var(--wr-chart-legend-color);
+}
+
+.wr-chart-legend__swatch {
+  flex: 0 0 auto;
+  // The key to colours the chart keeps under forced colors — its SVG fills and strokes
+  // stay — so a dot's inline `background`, which forced colors resets to `Canvas`,
+  // would leave the legend pointing at nothing.
+  forced-color-adjust: none;
+}
+
+.wr-chart-legend__swatch--dot {
+  width: var(--wr-chart-legend-dot-size);
+  height: var(--wr-chart-legend-dot-size);
+  border-radius: 50%;
+}
+
+// A short line rather than a dot, because it carries the series' dash pattern and a
+// 10px circle cannot show one. Its box is the stroke; a marker on it overhangs.
+.wr-chart-legend__swatch--line {
+  width: 1rem;
+  height: 0.125rem;
+  overflow: visible;
+}
+
+// Sized for the circle. Every shape has the circle's area, so a triangle's point and a
+// diamond's tips reach past the box, and an SVG clips at its own viewport by default.
+.wr-chart-legend__swatch--marker {
+  width: var(--wr-chart-legend-marker-size);
+  height: var(--wr-chart-legend-marker-size);
+  overflow: visible;
+}
+
+.wr-chart-legend__label {
+  font-weight: var(--wr-chart-legend-label-font-weight);
+}
+
+.wr-chart-legend__value {
+  color: var(--wr-chart-legend-value-color);
+  font-variant-numeric: tabular-nums;
+  // A value has no strong character of its own, so on an RTL page the minus of `-350` —
+  // a meter group keeps a negative segment's value on purpose — landed after the
+  // digits. Plaintext takes the direction from the text, as the tooltip's value does:
+  // the sign stays first, and a value written in Arabic still reads right to left.
+  unicode-bidi: plaintext;
+}
+
+// A whole row is the button: the key, the name and the value are one target, and the
+// name is the button's name. Its focus ring is the shared one in `_focus.scss`.
+.wr-chart-legend__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wr-chart-legend-item-gap);
+  min-height: var(--wr-chart-legend-toggle-min-height);
+  margin: 0;
+  padding: 0 var(--wr-chart-legend-toggle-padding-x);
+  border: 0;
+  border-radius: var(--wr-chart-legend-toggle-radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: background-color var(--wr-transition-short);
+
+  &:hover {
+    background: var(--wr-chart-legend-toggle-hover-bg);
+  }
+}
+
+// The word a hidden row of a legend that does not toggle carries for a screen reader.
+.wr-chart-legend__sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.wr-chart-legend__item--hidden {
+  .wr-chart-legend__label,
+  .wr-chart-legend__value {
+    color: var(--wr-chart-legend-hidden-color);
+  }
+
+  .wr-chart-legend__label {
+    text-decoration: line-through;
+  }
+
+  .wr-chart-legend__swatch {
+    opacity: var(--wr-chart-legend-hidden-swatch-opacity);
+  }
+}

package/charts/core/styles/_index.scss

@@ -0,0 +1,30 @@
+// Public Sass entry for the charts' shared parts. Nothing an app imports draws from
+// here directly: a chart that renders `<wr-chart-table>` loads this sheet from its
+// own `_index.scss`, the way every component loads the styles of what it renders.
+//
+// No theme load, and on purpose: these rules read no token, and an entry point that
+// cannot leave a `var(--wr-*)` unresolved has no reason to drag the token layer in.
+
+// A chart's data table, read in full by assistive technology and drawn nowhere.
+//
+// The clip pattern on the HOST rather than on the `<table>`: a table grows to fit its
+// cells whatever its width says, and `overflow` does not clip a table box in every
+// engine, so clipping the table itself can leave it painting. The host is an ordinary
+// box that collapses to 1px, sits out of flow — so it takes no room beside the chart
+// and adds no scroll — and clips everything inside it.
+//
+// Not `display: none`, `visibility: hidden` or `hidden`, each of which removes it
+// from the accessibility tree too, and not `clip-path` alone, which leaves the box
+// its full size for the layout and the scroll width.
+.wr-chart-table {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/charts/donut-chart/styles/_index.scss

@@ -1,16 +1,24 @@
 @use '../../../theme/styles' as theme;
 @use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
+// Styles for the entry points this component's own markup renders. The legend is a
+// `ul[wr-chart-legend]`, so `@use 'ngwr/charts/donut-chart'` alone draws it styled.
+@use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+
 .wr-donut-chart {
   --wr-donut-chart-gap: var(--wr-space-lg);
   --wr-donut-chart-font-family: var(--wr-font-family-base);
+  --wr-donut-chart-color: var(--wr-color-on-surface);
+  // The gap between two slices: each is stroked in the surface the chart sits on, so the
+  // gap is a shape that tells two slices apart without hue.
+  --wr-donut-chart-slice-gap-color: var(--wr-color-surface);
 
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   gap: var(--wr-donut-chart-gap);
   font-family: var(--wr-donut-chart-font-family);
-  color: var(--wr-color-on-surface);
+  color: var(--wr-donut-chart-color);
 
   &__surface {
     position: relative;
@@ -23,6 +31,10 @@
     height: auto;
   }
 
+  &__slice {
+    stroke: var(--wr-donut-chart-slice-gap-color);
+  }
+
   &__center {
     position: absolute;
     inset: 0;
@@ -51,15 +63,19 @@
     font-weight: var(--wr-donut-chart-center-value-font-weight);
     line-height: var(--wr-donut-chart-center-value-line-height);
     font-variant-numeric: tabular-nums;
+    // A `-` in front of digits has no direction of its own, so under RTL it would land
+    // on the digits' far side. Centred, so taking the text's own direction moves nothing.
+    unicode-bidi: plaintext;
   }
 
   &__center-label {
     --wr-donut-chart-center-label-margin-top: var(--wr-space-xs);
     --wr-donut-chart-center-label-font-size: var(--wr-text-xs);
+    --wr-donut-chart-center-label-color: var(--wr-color-on-surface-muted);
 
     margin-top: var(--wr-donut-chart-center-label-margin-top);
     font-size: var(--wr-donut-chart-center-label-font-size);
-    color: var(--wr-color-on-surface-muted);
+    color: var(--wr-donut-chart-center-label-color);
   }
 
   &__legend {
@@ -78,11 +94,17 @@
   &__legend-item {
     --wr-donut-chart-legend-item-gap: var(--wr-space-sm);
     --wr-donut-chart-legend-item-font-size: var(--wr-text-xs);
+    // A toggleable row's button lays out the key, the name and the value itself, from the
+    // shared legend's own hook, so that hook follows this one.
+    --wr-chart-legend-item-gap: var(--wr-donut-chart-legend-item-gap);
 
     display: inline-flex;
     align-items: center;
     gap: var(--wr-donut-chart-legend-item-gap);
     font-size: var(--wr-donut-chart-legend-item-font-size);
+    // The chart's own colour, as before the shared legend, which paints its rows
+    // `--wr-chart-legend-color`.
+    color: inherit;
   }
 
   &__swatch {
@@ -101,7 +123,21 @@
   }
 
   &__legend-value {
-    color: var(--wr-color-on-surface-muted);
+    --wr-donut-chart-legend-value-color: var(--wr-color-on-surface-muted);
+
+    color: var(--wr-donut-chart-legend-value-color);
     font-variant-numeric: tabular-nums;
+    // A value has no strong character of its own: the sign of `-10` stays before its
+    // digits on an RTL page.
+    unicode-bidi: plaintext;
+  }
+}
+
+// The SVG keeps its fills under forced colors, so the slices keep their colours and the
+// legend still keys them; the gap between them is drawn in the surface, which means
+// nothing on a forced palette, so it takes the page's own colour and still parts them.
+@media (forced-colors: active) {
+  .wr-donut-chart__slice {
+    stroke: Canvas;
   }
 }