ngwr 15.0.1 → 15.2.0

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

@@ -0,0 +1,245 @@
+@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. The legend is a
+// `ul[wr-chart-legend]`, so `@use 'ngwr/charts/scatter-chart'` alone draws it styled.
+@use '../../chart-legend/styles' as chart-legend-styles; // WrChartLegend
+// 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
+
+.wr-scatter-chart {
+  --wr-scatter-chart-font-family: var(--wr-font-family-base);
+  --wr-scatter-chart-color: var(--wr-color-on-surface);
+  // The room round the drawing inside the plot, which markers near either end overhang
+  // into — at least: it grows to the largest marker drawn (see `$inset` below). The y
+  // labels read the block one to meet the gridlines, the x labels the inline one to meet
+  // theirs.
+  --wr-scatter-chart-plot-inset-x: var(--wr-space-md);
+  --wr-scatter-chart-plot-inset-y: var(--wr-space-sm);
+  --wr-scatter-chart-legend-margin-bottom: var(--wr-space-md);
+  --wr-scatter-chart-grid-color: color-mix(in srgb, var(--wr-border-base) 70%, transparent);
+  --wr-scatter-chart-tick-gap: var(--wr-space-xs);
+  --wr-scatter-chart-tick-font-size: var(--wr-text-xs);
+  --wr-scatter-chart-tick-line-height: var(--wr-text-xs-leading);
+  --wr-scatter-chart-tick-color: var(--wr-color-on-surface-muted);
+  --wr-scatter-chart-title-font-size: var(--wr-text-xs);
+  --wr-scatter-chart-title-font-weight: var(--wr-font-weight-medium);
+  --wr-scatter-chart-title-color: var(--wr-color-on-surface-muted);
+  --wr-scatter-chart-title-gap: var(--wr-space-xs);
+  // Every marker is ringed in the surface colour, so two that touch stay two shapes
+  // rather than one blot: the palette's colours sit within about 1.06:1 of each other,
+  // and a ring is a shape that survives greyscale.
+  //
+  // A plain point is drawn solid. Drawn at 0.7, the primary marker measured 2.9:1 against
+  // the light surface and 2.6:1 against the dark one, under the 3:1 WCAG 1.4.11 asks of a
+  // mark a reader needs, where solid it is 4.9:1 and 4.1:1. A bubble chart is drawn at
+  // 0.7 all the same (`--bubbles`): its markers overlap as a rule, and a solid bubble hides
+  // every smaller one behind it, which costs more than the contrast does.
+  --wr-scatter-chart-point-opacity: 1;
+  --wr-scatter-chart-bubble-opacity: 0.7;
+  --wr-scatter-chart-point-ring: var(--wr-color-surface);
+  --wr-scatter-chart-point-ring-width: 1px;
+  --wr-scatter-chart-halo-width: 2px;
+
+  // The plot's padding: the inset tokens, or as far as the largest marker drawn reaches
+  // past its centre with its hover ring, if farther. The component writes that reach in
+  // px, sideways and up or down. The axes keep a point off the frame only when it lands
+  // exactly on it, so one a fraction of a step inside sits a few px from it, and a 20px
+  // bubble there would paint over the tick labels and past the chart's own box, where an
+  // `overflow: hidden` ancestor cuts it off.
+  $reach-x: calc(var(--wr-scatter-chart-reach-x, 0) * 1px + var(--wr-scatter-chart-halo-width) / 2);
+  $reach-y: calc(var(--wr-scatter-chart-reach-y, 0) * 1px + var(--wr-scatter-chart-halo-width) / 2);
+  $inset: max(var(--wr-scatter-chart-plot-inset-x), $reach-x);
+  $inset-y: max(var(--wr-scatter-chart-plot-inset-y), $reach-y);
+
+  // Where a tick is, for the x labels. The strip is as wide as the plot — the drawing
+  // plus its inline padding — and each label is handed its gridline's x as a percentage
+  // of the DRAWING, so the length from either side of the strip to the gridline is the
+  // padding plus that share of what is left.
+  $x: var(--wr-scatter-chart-x, 50);
+  $slot: var(--wr-scatter-chart-x-slot, 100);
+  $point: calc($inset + (100% - 2 * $inset) * $x / 100);
+  $room-start: calc($inset + (100cqw - 2 * $inset) * $x / 100);
+  $room-end: calc($inset + (100cqw - 2 * $inset) * (100 - $x) / 100);
+
+  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-scatter-chart-font-family);
+  color: var(--wr-scatter-chart-color);
+
+  &__legend {
+    margin-block-end: var(--wr-scatter-chart-legend-margin-bottom);
+  }
+
+  // The y labels at inline start, the plot beside them, and the x 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 keeps its x axis running left to right, as every
+  // SVG chart here does — the HTML layouts (bar, bullet, treemap) are the ones that mirror.
+  &__body {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  // The axes' names, set horizontally: the y one above the plot at the gutter's side,
+  // where a reader looks first, and the x one centred under its ticks. A name turned on
+  // its side reads in neither direction comfortably. A name is the host's own text, in
+  // whatever language, so it takes its direction from that text (`plaintext`): on an RTL
+  // page "Revenue, k$" read "$Revenue, k", its trailing sign carried to the page's start.
+  &__y-title,
+  &__x-title {
+    font-size: var(--wr-scatter-chart-title-font-size);
+    font-weight: var(--wr-scatter-chart-title-font-weight);
+    color: var(--wr-scatter-chart-title-color);
+    overflow-wrap: anywhere;
+    unicode-bidi: plaintext;
+  }
+
+  // Shrunk to its text at the gutter's side, so following its own direction does not move
+  // it across the chart.
+  &__y-title {
+    grid-column: 1 / -1;
+    grid-row: 1;
+    justify-self: start;
+    margin-block-end: var(--wr-scatter-chart-title-gap);
+    text-align: start;
+  }
+
+  &__x-title {
+    grid-column: 2;
+    grid-row: 4;
+    margin-block-start: var(--wr-scatter-chart-title-gap);
+    text-align: center;
+  }
+
+  // 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 — the line
+  // chart's y axis, for the same reasons.
+  &__y-axis {
+    grid-column: 1;
+    grid-row: 2;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr);
+    padding-inline-end: var(--wr-scatter-chart-tick-gap);
+    font-size: var(--wr-scatter-chart-tick-font-size);
+    line-height: var(--wr-scatter-chart-tick-line-height);
+    color: var(--wr-scatter-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`): a negative tick is a `-` in front of digits, neither of
+  // which has a direction, and under RTL the sign would land on the far side — `350-`.
+  &__y-tick {
+    grid-area: 1 / 1;
+    align-self: start;
+    justify-self: end;
+    position: relative;
+    unicode-bidi: plaintext;
+    top: calc($inset-y + (100% - 2 * $inset-y) * var(--wr-scatter-chart-y, 0) / 100);
+    transform: translateY(-50%);
+  }
+
+  &__plot {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    padding: $inset-y $inset;
+  }
+
+  // The plot's drawing by its class, never a bare `svg`: every point is an `<svg>` of
+  // its own, and the legend's keys are too. Overflow is visible because a marker near an
+  // end reaches past the drawing, over the plot's padding.
+  &__svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+
+  &__grid-line {
+    stroke: var(--wr-scatter-chart-grid-color);
+    stroke-width: 1px;
+  }
+
+  &--bubbles {
+    --wr-scatter-chart-point-opacity: var(--wr-scatter-chart-bubble-opacity);
+  }
+
+  &__marker {
+    fill-opacity: var(--wr-scatter-chart-point-opacity);
+    stroke: var(--wr-scatter-chart-point-ring);
+    stroke-width: var(--wr-scatter-chart-point-ring-width);
+    stroke-linejoin: round;
+  }
+
+  // Never hittable: it is drawn under the pointer, and the points it rings are found
+  // by position rather than by what is under the pointer.
+  &__halo {
+    pointer-events: none;
+    stroke-width: var(--wr-scatter-chart-halo-width);
+    stroke-linejoin: round;
+  }
+
+  &__x-axis {
+    grid-column: 2;
+    grid-row: 3;
+    position: relative;
+    margin-block-start: var(--wr-scatter-chart-tick-gap);
+    font-size: var(--wr-scatter-chart-tick-font-size);
+    line-height: var(--wr-scatter-chart-tick-line-height);
+    color: var(--wr-scatter-chart-tick-color);
+    font-variant-numeric: tabular-nums;
+    // The labels are absolutely positioned onto their gridlines, so the strip has no
+    // content of its own to give it a height: one line of their own leading. `1.25em` is
+    // a pixel short of the 16px line, so each label hung that far over what came next.
+    height: 1lh;
+    // 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;
+  }
+
+  &__x-tick {
+    position: absolute;
+    // rtl-ok: the drawing's own x, which does not flip with `direction`
+    left: $point;
+    // Centred on its gridline, but never past either end of the strip: the shift is the
+    // smaller of half the label and the room left on that side, so the first and last
+    // ticks, which sit on the frame, move inwards and the rest stay centred.
+    // rtl-ok: the drawing's own x, which does not flip with `direction`
+    transform: translateX(clamp(calc(-1 * $room-start), -50%, calc($room-end - 100%)));
+    // Its own slot, half the way to a neighbour on each side, cut back to the room
+    // between its gridline and the end of the strip.
+    max-width: min(
+      calc((100% - 2 * $inset) * $slot / 100),
+      calc($inset + (100% - 2 * $inset) * ($x + $slot / 2) / 100),
+      calc($inset + (100% - 2 * $inset) * (100 - $x + $slot / 2) / 100)
+    );
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    // As a y tick: the sign stays before the digits. The box is as wide as its text, so
+    // where it sits does not move.
+    unicode-bidi: plaintext;
+  }
+}
+
+// The SVG keeps its fills and strokes under forced colors, so the points keep their
+// series' colours and the legend still keys them. The ring and the grid are drawn in
+// theme colours that mean nothing on a forced palette: the ring takes the page's own
+// colour, which keeps touching points apart on any background, and the grid the
+// system's muted one.
+@media (forced-colors: active) {
+  .wr-scatter-chart {
+    --wr-scatter-chart-point-ring: Canvas;
+    --wr-scatter-chart-grid-color: GrayText;
+  }
+}

package/charts/sparkline/styles/_index.scss

@@ -1,6 +1,11 @@
 @use '../../../popover/styles'; // the `.wr-tooltip` chip the hover tooltip renders into
 
 .wr-sparkline {
+  // How much of the line's colour the `showArea` fill takes, and the ring round the hover
+  // marker: the surface the sparkline sits on, so the marker reads on the line under it.
+  --wr-sparkline-area-opacity: 0.15;
+  --wr-sparkline-marker-ring: var(--wr-color-surface);
+
   display: inline-block;
   // The hover marker is placed from this box's padding edge, measured off the drawing.
   position: relative;
@@ -11,6 +16,10 @@
     overflow: visible;
   }
 
+  &__area {
+    fill-opacity: var(--wr-sparkline-area-opacity);
+  }
+
   // The point the hover tooltip is reading. Placed by the component in SVG
   // coordinates, which do not flip with `direction`, and never hittable: it sits
   // under the pointer, and taking the `mousemove` would lose the line.
@@ -18,7 +27,7 @@
     position: absolute;
     width: 0.5rem;
     height: 0.5rem;
-    border: 2px solid var(--wr-color-surface);
+    border: 2px solid var(--wr-sparkline-marker-ring);
     border-radius: 50%;
     box-sizing: content-box;
     // rtl-ok: SVG coordinates, see above

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

@@ -0,0 +1,215 @@
+@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. With `dataTable`, the
+// figures render as a `<wr-chart-table>` beside the drawing, which its own sheet clips
+// out of sight.
+@use '../../core/styles' as core-styles; // WrChartTable
+
+.wr-treemap-chart {
+  --wr-treemap-chart-font-family: var(--wr-font-family-base);
+  // What the tiles' tints mix towards, and what shows behind them.
+  --wr-treemap-chart-bg: var(--wr-color-surface);
+  // The gap round every tile: an inset line in the surface colour on each, so two
+  // neighbours sit twice this apart. Drawn as an inset shadow, never a border or a margin:
+  // a margin takes area from the layout, and a border on a `border-box` tile is a floor
+  // under its size, so a sliver worth a fraction of a pixel would be drawn two wide and
+  // cover its group's edge. A faint separator by default, not a 3:1 boundary: the names,
+  // the nesting and the data table carry the reading, and `prefers-contrast: more` below
+  // turns it into a line that is one.
+  --wr-treemap-chart-gap: 1px;
+  --wr-treemap-chart-gap-color: var(--wr-color-surface);
+  --wr-treemap-chart-radius: var(--wr-border-radius-sm);
+  // How much of its colour a tile carries, mixed into the surface: a leaf more than a
+  // group, so the leaves stand on their group's strip and edge. Tints rather than the
+  // solid colour, so the names on them read in `on-surface` whatever the colour — a
+  // node's own `color` can be anything — and in both schemes, since the surface they mix
+  // into is a `light-dark()` pair.
+  --wr-treemap-chart-leaf-tint: 34%;
+  --wr-treemap-chart-group-tint: 14%;
+  // The names and values written inside the tiles. The layout leaves a tile its name
+  // only from about 36 × 22 px, and its value under it from 38 px tall, measured for
+  // this type and padding; a larger type is clipped by the tile rather than spilling.
+  --wr-treemap-chart-label-font-size: var(--wr-text-xs);
+  --wr-treemap-chart-label-line-height: var(--wr-text-xs-leading);
+  --wr-treemap-chart-label-color: var(--wr-color-on-surface);
+  --wr-treemap-chart-label-font-weight: var(--wr-font-weight-medium);
+  --wr-treemap-chart-header-font-weight: var(--wr-font-weight-semibold);
+  --wr-treemap-chart-value-font-weight: var(--wr-font-weight-regular);
+  // Between a group's name and its figure, in its strip.
+  --wr-treemap-chart-header-gap: var(--wr-space-xs);
+  --wr-treemap-chart-label-padding-x: var(--wr-space-xs);
+  --wr-treemap-chart-label-padding-y: calc(var(--wr-space-xs) / 2);
+  // The tile the tooltip is about, ringed inside its own edge so it covers no neighbour.
+  --wr-treemap-chart-active-ring: var(--wr-color-on-surface);
+  --wr-treemap-chart-active-ring-width: 2px;
+
+  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-treemap-chart-font-family);
+
+  // The tiles are positioned in percentages of this box, which is as wide as the chart
+  // and as tall as `height`.
+  &__plot {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--wr-treemap-chart-radius);
+    background: var(--wr-treemap-chart-bg);
+  }
+
+  &__tile {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    // The name and the value sit at the tile's inline-start edge as boxes of their own
+    // width, so each can take its direction from its own text and still line up with the
+    // tile's corner. `text-align: start` would resolve against the NAME's direction and
+    // put a Latin name on the left of an RTL tile.
+    align-items: flex-start;
+    overflow: hidden;
+    // No padding and no border: the tile is drawn at exactly the rectangle the layout gave
+    // it. The text carries its own padding, below, and the gap is a shadow inside the edge.
+    border-radius: var(--wr-treemap-chart-radius);
+    box-shadow: inset 0 0 0 var(--wr-treemap-chart-gap) var(--wr-treemap-chart-gap-color);
+    background: color-mix(
+      in srgb,
+      var(--wr-treemap-chart-tile-color, var(--wr-color-primary)) var(--wr-treemap-chart-leaf-tint),
+      var(--wr-treemap-chart-bg)
+    );
+    color: var(--wr-treemap-chart-label-color);
+    font-size: var(--wr-treemap-chart-label-font-size);
+    line-height: var(--wr-treemap-chart-label-line-height);
+
+    &--group {
+      background: color-mix(
+        in srgb,
+        var(--wr-treemap-chart-tile-color, var(--wr-color-primary)) var(--wr-treemap-chart-group-tint),
+        var(--wr-treemap-chart-bg)
+      );
+    }
+
+    &--active {
+      outline: var(--wr-treemap-chart-active-ring-width) solid var(--wr-treemap-chart-active-ring);
+      outline-offset: calc(-1 * var(--wr-treemap-chart-active-ring-width));
+    }
+  }
+
+  // A group's name and figure, in the strip the layout left above its children. Its
+  // height is written inline from the layout's own number. The figure WRAPS rather than
+  // shrinks when the two do not fit on one line, onto a second line the strip clips: the
+  // name is what tells the group apart, so it keeps the line, and a figure cut to `1…` says
+  // nothing the tooltip does not say in full.
+  &__header {
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    column-gap: var(--wr-treemap-chart-header-gap);
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: var(--wr-treemap-chart-label-padding-y) var(--wr-treemap-chart-label-padding-x) 0;
+    font-weight: var(--wr-treemap-chart-header-font-weight);
+  }
+
+  // A name and a value set their own direction (`dir="auto"` in the template), so a name's
+  // ellipsis lands at its own end. Held to the tile's width, since a box of its own width
+  // that will not wrap would otherwise be as wide as its text.
+  &__label,
+  &__value {
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  // A name is cut with an ellipsis; a value never is (see below).
+  &__label {
+    text-overflow: ellipsis;
+  }
+
+  // A leaf's name and value, in its corner. The padding is theirs rather than the tile's,
+  // so it can never make a tile bigger than its value: on a tile too small to be written
+  // in there is no text, and so no padding. The strip carries its own.
+  &__tile > &__label,
+  &__tile > &__value {
+    box-sizing: border-box;
+    padding-inline: var(--wr-treemap-chart-label-padding-x);
+  }
+
+  &__tile > &__label {
+    padding-block-start: var(--wr-treemap-chart-label-padding-y);
+  }
+
+  &__label {
+    flex: 0 1 auto;
+    font-weight: var(--wr-treemap-chart-label-font-weight);
+  }
+
+  &__header &__label {
+    font-weight: inherit;
+  }
+
+  &__value {
+    flex: none;
+    font-weight: var(--wr-treemap-chart-value-font-weight);
+    font-variant-numeric: tabular-nums;
+  }
+
+  // A leaf's value is printed whole or not at all, with no measuring, as the heatmap's
+  // values are: a wrapping flex line one line tall, led by a zero-width item. A value
+  // that fits its tile shares that first line; one that does not cannot join it, so it
+  // wraps onto a second line, under the first, where `overflow` hides it. `$12…` for
+  // $120K would print another number, and the tooltip and the data table carry it whole.
+  // The value in a group's strip already wraps out of sight past the name (see `__header`).
+  &__tile > &__value {
+    display: flex;
+    flex-wrap: wrap;
+    block-size: var(--wr-treemap-chart-label-line-height);
+
+    &::before {
+      content: '';
+      flex: 0 0 0;
+      block-size: 100%;
+    }
+  }
+}
+
+// A reader who asked for more contrast gets the gap as a line rather than a separator:
+// the muted ink, which the theme deepens under the same query. Measured in Chromium on
+// every tile of the docs page's charts, against the tile's own tint: 4.64:1 at the lowest
+// in light and 3.47:1 in dark — the warning tint, the brightest there — where the
+// surface-coloured gap reads 1.08–1.73:1 and 1.12–2.39:1. That holds for the palette and
+// the theme's own colours; a node's `color` can be anything. Not the theme's hairline:
+// it is solved against the page and its lightest fill, a tint is darker than either, and
+// it measured 1.97:1 and 1.49:1 on the same tiles.
+@media (prefers-contrast: more) {
+  .wr-treemap-chart {
+    --wr-treemap-chart-gap-color: var(--wr-color-on-surface-muted);
+  }
+}
+
+// Forced colors resets every tile's tinted background to `Canvas`, and that is left to
+// happen rather than opted out of, as the bars are: a bar painted as the page vanishes,
+// while a tile keeps its edge, its name and its place inside its group, which are what
+// tell the groups apart anyway. The edge is what has to survive, and the shadow that
+// draws the gap is dropped here, so it is an inset OUTLINE in the text colour — an outline
+// because, like the shadow, it takes no room and sets no floor under a tile's size. The
+// tile the tooltip is about keeps its wider outline, in the highlight colour.
+@media (forced-colors: active) {
+  .wr-treemap-chart__tile {
+    outline: var(--wr-treemap-chart-gap) solid CanvasText;
+    outline-offset: calc(-1 * var(--wr-treemap-chart-gap));
+  }
+
+  .wr-treemap-chart__tile--active {
+    outline: var(--wr-treemap-chart-active-ring-width) solid Highlight;
+    outline-offset: calc(-1 * var(--wr-treemap-chart-active-ring-width));
+  }
+}