Sparkline

/* smbk-sparkline — Sparkline. Figma "Sparkline" 7580:152.
 * A small line in the series color, drawn from its values with no axes, ending in a dot on the last value;
 * with the area flag, a soft fill of the same color under it. It fills the width it is given and is as tall as
 * a small control. The SVG stretches to fit; the line keeps its width and the dot stays round, because the dot
 * is drawn outside the SVG. The plot holds the SVG and the dot, the same size as the block. The first time it
 * comes into view it is uncovered from left to right; nothing else moves. */

.smbk-sparkline {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--smbk-size-32);
}

/* The plot is the block's own box again, so its entrance clip never clips the block: Chromium's intersection
   observer counts a clip on the element it watches, and a block clipped to nothing never came into view. */
.smbk-sparkline__plot {
  position: relative;
  display: block;
  height: 100%;
}

.smbk-sparkline__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.smbk-sparkline__line {
  fill: none;
  stroke: var(--smbk-color-data-series);
  stroke-width: var(--smbk-border-width-emphasis);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.smbk-sparkline__area {
  fill: var(--smbk-color-data-series);
  fill-opacity: var(--smbk-opacity-ghost);
  stroke: none;
}

/* The end dot sits on the last value, centred on it, half past the right edge as Figma draws it. */
.smbk-sparkline__dot {
  position: absolute;
  width: var(--smbk-size-6);
  height: var(--smbk-size-6);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-color-data-series);
  translate: -50% -50%;
}

/* ---- motion: the entrance ----
   The wrapper marks the sparkline `data-entrance` the first time it comes into view (simbolik/components/entrance.ts):
   waiting while it is out of view, hidden; playing once it is seen, the line, its area and the end dot uncovered
   from left to right with the chart entrance purpose, as one edge moving across. The clip is on the plot, never on
   the block, which the entrance watches. The edges run a little past the sparkline, so the dot half past its end
   is never cut once uncovered. Without the mark (markup written by hand,
   the rendered pictures, after the entrance) it is simply drawn, and under reduced motion nothing moves. Only the
   clip changes, so nothing shifts. */

@media screen and (prefers-reduced-motion: no-preference) {
  .smbk-sparkline[data-entrance="waiting"] .smbk-sparkline__plot {
    clip-path: inset(-50% calc(100% + var(--smbk-size-6)) -50% calc(-1 * var(--smbk-size-6)));
  }

  .smbk-sparkline:is([data-entrance="load"], [data-entrance="playing"]) .smbk-sparkline__plot {
    animation: smbk-sparkline-reveal var(--smbk-motion-chart-entrance-reveal-duration) var(--smbk-motion-chart-entrance-easing) backwards;
  }
}

@keyframes smbk-sparkline-reveal {
  from {
    clip-path: inset(-50% calc(100% + var(--smbk-size-6)) -50% calc(-1 * var(--smbk-size-6)));
  }

  to {
    clip-path: inset(-50% calc(-1 * var(--smbk-size-6)) -50% calc(-1 * var(--smbk-size-6)));
  }
}

/* ---- high contrast (forced colors) ---- */
/* The browser would drop the line's color; the line and the dot take the text color instead, and the area goes. */

@media (forced-colors: active) {
  .smbk-sparkline__line {
    stroke: CanvasText;
  }

  .smbk-sparkline__area {
    display: none;
  }

  .smbk-sparkline__dot {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

{
  "name": "sparkline",
  "block": "smbk-sparkline",
  "summary": "A small line beside a figure that shows how it moved: rising, falling, steady or spiky. The figure carries the meaning.",
  "adapt": "css",
  "axes": {},
  "flags": {
    "area": {
      "description": "The soft fill under the line."
    }
  },
  "parts": [
    "plot",
    "svg",
    "area",
    "line",
    "dot"
  ],
  "figmaNodeId": "7580:152"
}