network flow: draw the KPI sparkline per the Sparkline Stat Panel design

KpiSparkLine.vue drew a single flat-opacity curve with a top-to-bottom
fade, no dot, no floor inset, and a fixed 15%-padded scale. Rewrite the
drawing to match the design:

- Stroke and fill fade from 50% opacity at the oldest sample to full
  opacity at the latest, via a shared SVG mask so the fade composes
  independently of whichever fill treatment is active.
- The latest non-null sample carries a dot, drawn with the same
  zero-length-path/non-scaling-stroke trick already used for the line,
  so it stays a true circle regardless of the card's aspect ratio.
- The area fill is flat by default; a state-tinted card fades it
  towards the floor instead, so it doesn't compete with the numbers.
- The plot stops 8px short of the bottom edge via a CSS height
  reduction, not viewBox math - an inset expressed in viewBox units
  would only equal 8 real pixels at one specific card height, since
  preserveAspectRatio="none" stretches non-uniformly.
- The vertical scale is now configurable: automatic with padding
  (default, unchanged) or a manual KpiValueRange. Out-of-range samples
  clamp to the edge and get a tick mark - the one part of this ticket
  with no confirmed visual reference in the design prototype.

CMK-38080

Change-Id: I083988f2cc54462402ef28428493395f03992c56