feat: monotone smoothing

Author: J-Sek

packages/api-generator/src/locale/en/VSparkline.json

@@ -23,6 +23,7 @@
     "showLabels": "Show labels below each data point.",
     "showMarkers": "Show circle markers at each data point.",
     "smooth": "Controls the curve tension. `true` defaults to 8, `false` or `0` gives straight lines. Higher values produce smoother curves.",
+    "smoothMode": "The interpolation algorithm to use. `default` uses corner-rounding, `monotone` uses interpolation which prevents overshoot at local extrema. In `monotone` mode, **smooth** has value limit of 8 (larger values do not make the line any different).",
     "tooltip": "Displays a tooltip on the active data point. Requires **interactive**. Can be `true` or an object with `titleFormat`, `offset`, and `showCrosshair` options.",
     "type": "Choose between a trendline or bars.",
     "width": "Width of the SVG container."

packages/vuetify/src/components/VSparkline/VTrendline.tsx

@@ -4,7 +4,8 @@ import { VTooltip } from '@/components/VTooltip/VTooltip'
 // Utilities
 import { computed, Fragment, nextTick, ref, shallowRef, useId, watch } from 'vue'
 import { makeLineProps } from './util/line'
-import { genPath as _genPath } from './util/path'
+import { genMonotonePath } from './util/monotone'
+import { genRoundedPath } from './util/path'
 import { genericComponent, getPropertyFromItem, PREFERS_REDUCED_MOTION, propsFactory, useRender } from '@/util'
 import { easingPatterns, useTransition } from '@/util/easing'
 
@@ -180,8 +181,11 @@ export const VTrendline = genericComponent<VTrendlineSlots>()({
 
     function genPath (fill: boolean) {
       const smoothValue = typeof props.smooth === 'boolean' ? (props.smooth ? 8 : 0) : Number(props.smooth ?? 0)
+      const pathGen = props.smoothMode === 'monotone'
+        ? genMonotonePath
+        : genRoundedPath
 
-      return _genPath(
+      return pathGen(
         extendedPoints.value.slice(),
         smoothValue,
         fill,

packages/vuetify/src/components/VSparkline/util/line.ts

@@ -74,6 +74,10 @@ export const makeLineProps = propsFactory({
   showLabels: Boolean,
   showMarkers: Boolean,
   smooth: [Boolean, String, Number],
+  smoothMode: {
+    type: String as PropType<'default' | 'monotone'>,
+    default: 'default',
+  },
   interactive: Boolean,
   tooltip: {
     type: [Boolean, Object] as PropType<boolean | SparklineTooltipConfig>,

packages/vuetify/src/components/VSparkline/util/monotone.ts

@@ -0,0 +1,79 @@
+// Types
+import type { Point } from '../VTrendline'
+
+/**
+ * Monotone cubic Hermite interpolation (Fritsch-Carlson) converted to cubic Bezier.
+ * Prevents overshoot at local extrema (e.g. consecutive equal min/max values)
+ * by zeroing tangents at turning points and applying an alpha-beta constraint.
+ *
+ * `smooth` controls tension: 0 = straight lines, 8 (default true) = full curve.
+ */
+export function genMonotonePath (points: Point[], smooth: number, fill = false, height = 75) {
+  if (points.length === 0) return ''
+
+  const start = points[0]
+  const end = points[points.length - 1]
+
+  const prefix = fill
+    ? `M${start.x} ${height - start.x + 2} L${start.x} ${start.y}`
+    : `M${start.x} ${start.y}`
+
+  const suffix = fill ? `L${end.x} ${height - start.x + 2} Z` : ''
+
+  if (smooth === 0 || points.length < 3) {
+    return prefix + points.slice(1).map(point => `L${point.x} ${point.y}`).join('') + suffix
+  }
+
+  const tension = Math.min(smooth / 8, 1)
+  const n = points.length
+
+  const delta: number[] = []
+  for (let i = 0; i < n - 1; i++) {
+    const dx = points[i + 1].x - points[i].x
+    delta[i] = dx === 0 ? 0 : (points[i + 1].y - points[i].y) / dx
+  }
+
+  const tangent: number[] = new Array(n)
+  tangent[0] = delta[0]
+  tangent[n - 1] = delta[n - 2]
+
+  for (let i = 1; i < n - 1; i++) {
+    if (delta[i - 1] === 0 || delta[i] === 0 ||
+        (delta[i - 1] > 0) !== (delta[i] > 0)) {
+      tangent[i] = 0
+    } else {
+      tangent[i] = (delta[i - 1] + delta[i]) / 2
+    }
+  }
+
+  for (let i = 0; i < n - 1; i++) {
+    if (delta[i] === 0) {
+      tangent[i] = 0
+      tangent[i + 1] = 0
+    } else {
+      const alpha = tangent[i] / delta[i]
+      const beta = tangent[i + 1] / delta[i]
+      const squaredSum = alpha * alpha + beta * beta
+
+      if (squaredSum > 9) {
+        const tau = 3 / Math.sqrt(squaredSum)
+        tangent[i] = tau * alpha * delta[i]
+        tangent[i + 1] = tau * beta * delta[i]
+      }
+    }
+  }
+
+  const curves = points.slice(1).map((curr, index) => {
+    const prev = points[index]
+    const dx = curr.x - prev.x
+
+    const controlPoint1X = prev.x + dx * tension / 3
+    const controlPoint1Y = prev.y + tangent[index] * dx * tension / 3
+    const controlPoint2X = curr.x - dx * tension / 3
+    const controlPoint2Y = curr.y - tangent[index + 1] * dx * tension / 3
+
+    return `C${controlPoint1X} ${controlPoint1Y} ${controlPoint2X} ${controlPoint2Y} ${curr.x} ${curr.y}`
+  })
+
+  return prefix + curves.join('') + suffix
+}

packages/vuetify/src/components/VSparkline/util/path.ts

@@ -7,7 +7,7 @@ import { Point } from '../VSparkline'
 /**
  * From https://github.com/unsplash/react-trend/blob/master/src/helpers/DOM.helpers.js#L18
  */
-export function genPath (points: Point[], radius: number, fill = false, height = 75) {
+export function genRoundedPath (points: Point[], radius: number, fill = false, height = 75) {
   if (points.length === 0) return ''
   const start = points.shift()!
   const end = points[points.length - 1]