solid-recharts 0.1.0

package/src/util/getRelativeCoordinate.ts

@@ -0,0 +1,84 @@
+// Ported from recharts 3.8.1 src/util/getRelativeCoordinate.ts (commit 7a23854).
+// Pure function — no framework surface — so behavior is byte-identical to recharts.
+
+import {
+  RelativePointer,
+  MousePointer,
+  SVGMousePointer,
+  SVGTouchPointer,
+  TouchPointer,
+} from "./types";
+
+/**
+ * Type guard to check if the pointer event is from an SVG element.
+ */
+function isSvgPointer(
+  pointer: MousePointer | TouchPointer,
+): pointer is SVGMousePointer | SVGTouchPointer {
+  return "getBBox" in pointer.currentTarget && typeof pointer.currentTarget.getBBox === "function";
+}
+
+/**
+ * Computes relative element coordinates from mouse or touch event.
+ *
+ * The output coordinates are relative to the top-left corner of the active element (= currentTarget),
+ * where the top-left corner is (0, 0).
+ * Moving right, the x-coordinate increases, and moving down, the y-coordinate increases.
+ *
+ * The coordinates are rounded to the nearest integer and account for CSS transform scale.
+ * So element that's scaled will return the same coordinates as element that's not scaled.
+ *
+ * In other words: you zoom in or out, numbers stay the same.
+ *
+ * This function works with both HTML elements and SVG elements.
+ *
+ * It works with both Mouse and Touch events.
+ * For Touch events, it returns an array of coordinates, one for each touch point.
+ * For Mouse events, it returns a single coordinate object.
+ *
+ * @since 3.8
+ * @param event The mouse or touch event from event handlers (works with both HTML and SVG elements)
+ * @returns Coordinates relative to the top-left corner of the element. Single object for Mouse events, array of objects for Touch events.
+ */
+export function getRelativeCoordinate(event: MousePointer): RelativePointer;
+export function getRelativeCoordinate(event: TouchPointer): Array<RelativePointer>;
+export function getRelativeCoordinate(
+  event: MousePointer | TouchPointer,
+): RelativePointer | Array<RelativePointer> {
+  const rect = event.currentTarget.getBoundingClientRect();
+
+  let scaleX: number, scaleY: number;
+
+  if (isSvgPointer(event)) {
+    // For SVG elements, use getBBox() to get the intrinsic size in SVG coordinates
+    const bbox = event.currentTarget.getBBox();
+    scaleX = bbox.width > 0 ? rect.width / bbox.width : 1;
+    scaleY = bbox.height > 0 ? rect.height / bbox.height : 1;
+  } else {
+    // For HTML elements, use offsetWidth/offsetHeight
+    const element = event.currentTarget;
+    scaleX = element.offsetWidth > 0 ? rect.width / element.offsetWidth : 1;
+    scaleY = element.offsetHeight > 0 ? rect.height / element.offsetHeight : 1;
+  }
+
+  const getCoordinates = (clientX: number, clientY: number): RelativePointer => ({
+    /*
+     * Here it's important to use:
+     * - event.clientX and event.clientY to get the mouse position relative to the viewport, including scroll.
+     * - pageX and pageY are not used because they are relative to the whole document, and ignore scroll.
+     * - rect.left and rect.top are used to get the position of the chart relative to the viewport.
+     * - offsetX and offsetY are not used because they are relative to the offset parent
+     *  which may or may not be the same as the clientX and clientY, depending on the position of the chart in the DOM
+     *  and surrounding element styles. CSS position: relative, absolute, fixed, will change the offset parent.
+     * - scaleX and scaleY are necessary for when the chart element is scaled using CSS `transform: scale(N)`.
+     */
+    relativeX: Math.round((clientX - rect.left) / scaleX),
+    relativeY: Math.round((clientY - rect.top) / scaleY),
+  });
+
+  if ("touches" in event) {
+    return Array.from(event.touches).map((touch) => getCoordinates(touch.clientX, touch.clientY));
+  }
+
+  return getCoordinates(event.clientX, event.clientY);
+}

package/src/util/getSliced.ts

@@ -0,0 +1,21 @@
+// Ported from recharts 3.8.1 src/util/getSliced.ts (commit 7a23854).
+//
+// Deviation: the reference's `Array.isArray(arr)` guard widens the already-typed
+// `ReadonlyArray<T>` to `any[]` (a TS limitation that leaks `any` out of
+// `slice`). A plain `boolean`-returning runtime check (no `arg is any[]`
+// predicate) preserves the same defensive behavior without the widening.
+const isRuntimeArray = (value: unknown): boolean => Array.isArray(value);
+
+export function getSliced<T>(
+  arr: ReadonlyArray<T>,
+  startIndex: number,
+  endIndex: number,
+): ReadonlyArray<T> {
+  if (!isRuntimeArray(arr)) {
+    return arr;
+  }
+  if (arr && startIndex + endIndex !== 0) {
+    return arr.slice(startIndex, endIndex + 1);
+  }
+  return arr;
+}

package/src/util/isDomainSpecifiedByUser.ts

@@ -0,0 +1,217 @@
+// Ported from recharts 3.8.1 src/util/isDomainSpecifiedByUser.ts (commit 7a23854).
+// Pure util — no framework surface — so behavior is byte-identical to recharts.
+
+import { MAX_VALUE_REG, MIN_VALUE_REG } from "./ChartUtils";
+import { isNumber } from "./DataUtils";
+import { AxisDomain, AxisDomainItem, NumberDomain } from "./types";
+import { isWellBehavedNumber } from "./isWellBehavedNumber";
+
+/**
+ * `Array.isArray` narrows the readonly `AxisDomain` union to `any[]` (a TS
+ * limitation), which would leak `any` into the destructured elements. This guard
+ * narrows to the well-typed 2-tuple so element types stay `AxisDomainItem`.
+ */
+function isDomainTuple(d: AxisDomain | undefined): d is Readonly<[AxisDomainItem, AxisDomainItem]> {
+  return Array.isArray(d) && d.length === 2;
+}
+
+export function isWellFormedNumberDomain(v: unknown): v is NumberDomain {
+  if (Array.isArray(v) && v.length === 2) {
+    // Read as `unknown` (not the `any` Array.isArray yields) and let
+    // isWellBehavedNumber narrow each element.
+    const min: unknown = v[0];
+    const max: unknown = v[1];
+    if (isWellBehavedNumber(min) && isWellBehavedNumber(max)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function extendDomain(
+  providedDomain: NumberDomain,
+  boundaryDomain: NumberDomain,
+  allowDataOverflow: boolean,
+): NumberDomain {
+  if (allowDataOverflow) {
+    // If the data are allowed to overflow - we're fine with whatever user provided
+    return providedDomain;
+  }
+  /*
+   * If the data are not allowed to overflow - we need to extend the domain.
+   * Means that effectively the user is allowed to make the domain larger
+   * but not smaller.
+   */
+  return [
+    Math.min(providedDomain[0], boundaryDomain[0]),
+    Math.max(providedDomain[1], boundaryDomain[1]),
+  ];
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ *
+ * This function does not accept data as an argument.
+ * This is to enable a performance optimization - if the domain is there,
+ * and we know what it is without traversing all the data,
+ * then we don't have to traverse all the data!
+ *
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param allowDataOverflow boolean, provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+export function numericalDomainSpecifiedWithoutRequiringData(
+  userDomain: AxisDomain | undefined,
+  allowDataOverflow: boolean,
+) {
+  if (!allowDataOverflow) {
+    // Cannot compute data overflow if the data is not provided
+    return undefined;
+  }
+  if (typeof userDomain === "function") {
+    // The user function expects the data to be provided as an argument
+    return undefined;
+  }
+  if (isDomainTuple(userDomain)) {
+    const [providedMin, providedMax] = userDomain;
+    let finalMin: string | number | undefined;
+    let finalMax: string | number | undefined;
+
+    if (isWellBehavedNumber(providedMin)) {
+      finalMin = providedMin;
+    } else if (typeof providedMin === "function") {
+      // The user function expects the data to be provided as an argument
+      return undefined;
+    }
+
+    if (isWellBehavedNumber(providedMax)) {
+      finalMax = providedMax;
+    } else if (typeof providedMax === "function") {
+      // The user function expects the data to be provided as an argument
+      return undefined;
+    }
+
+    const candidate = [finalMin, finalMax];
+    if (isWellFormedNumberDomain(candidate)) {
+      return candidate;
+    }
+  }
+  return undefined;
+}
+
+/**
+ * So Recharts allows users to provide their own domains,
+ * but it also places some expectations on what the domain is.
+ * We can improve on the typescript typing, but we also need a runtime test
+ * to observe that the user-provided domain is well-formed,
+ * that is: an array with exactly two numbers.
+ * If the user-provided domain is not well-formed,
+ * this function will return undefined - in which case we should traverse the data to calculate the real domain.
+ *
+ * This function is for parsing the numerical domain only.
+ *
+ * You are probably thinking, why does domain need tick count?
+ * Well it adjusts the domain based on where the "nice ticks" land, and nice ticks depend on the tick count.
+ *
+ * @param userDomain external prop, user provided, before validation. Can have various shapes: array, function, special magical strings inside too.
+ * @param dataDomain calculated from data. Can be undefined, as an option for performance optimization
+ * @param allowDataOverflow provided by users. If true then the data domain wins
+ *
+ * @return [min, max] domain if it's well-formed; undefined if the domain is invalid
+ */
+export function parseNumericalUserDomain(
+  userDomain: AxisDomain | undefined,
+  dataDomain: NumberDomain | undefined,
+  allowDataOverflow: boolean,
+): NumberDomain | undefined {
+  if (!allowDataOverflow && dataDomain == null) {
+    // Cannot compute data overflow if the data is not provided
+    return undefined;
+  }
+  if (typeof userDomain === "function" && dataDomain != null) {
+    try {
+      const result = userDomain(dataDomain, allowDataOverflow);
+      if (isWellFormedNumberDomain(result)) {
+        return extendDomain(result, dataDomain, allowDataOverflow);
+      }
+    } catch {
+      /* ignore the exception and compute domain from data later */
+    }
+  }
+  if (isDomainTuple(userDomain)) {
+    const [providedMin, providedMax] = userDomain;
+    let finalMin: string | number | undefined;
+    let finalMax: string | number | undefined;
+
+    if (providedMin === "auto") {
+      if (dataDomain != null) {
+        finalMin = Math.min(...dataDomain);
+      }
+    } else if (isNumber(providedMin)) {
+      finalMin = providedMin;
+    } else if (typeof providedMin === "function") {
+      try {
+        if (dataDomain != null) {
+          finalMin = providedMin(dataDomain[0]);
+        }
+      } catch {
+        /* ignore the exception and compute domain from data later */
+      }
+    } else if (typeof providedMin === "string" && MIN_VALUE_REG.test(providedMin)) {
+      const match = MIN_VALUE_REG.exec(providedMin);
+      if (match == null || match[1] == null || dataDomain == null) {
+        finalMin = undefined;
+      } else {
+        const value = +match[1];
+        finalMin = dataDomain[0] - value;
+      }
+    } else {
+      finalMin = dataDomain?.[0];
+    }
+
+    if (providedMax === "auto") {
+      if (dataDomain != null) {
+        finalMax = Math.max(...dataDomain);
+      }
+    } else if (isNumber(providedMax)) {
+      finalMax = providedMax;
+    } else if (typeof providedMax === "function") {
+      try {
+        if (dataDomain != null) {
+          finalMax = providedMax(dataDomain[1]);
+        }
+      } catch {
+        /* ignore the exception and compute domain from data later */
+      }
+    } else if (typeof providedMax === "string" && MAX_VALUE_REG.test(providedMax)) {
+      const match = MAX_VALUE_REG.exec(providedMax);
+      if (match == null || match[1] == null || dataDomain == null) {
+        finalMax = undefined;
+      } else {
+        const value = +match[1];
+        finalMax = dataDomain[1] + value;
+      }
+    } else {
+      finalMax = dataDomain?.[1];
+    }
+
+    const candidate = [finalMin, finalMax];
+    if (isWellFormedNumberDomain(candidate)) {
+      if (dataDomain == null) {
+        return candidate;
+      }
+      return extendDomain(candidate, dataDomain, allowDataOverflow);
+    }
+  }
+  return undefined;
+}

package/src/util/isWellBehavedNumber.ts

@@ -0,0 +1,10 @@
+// Ported from recharts 3.8.1 src/util/isWellBehavedNumber.ts (commit 7a23854).
+// Pure util — no framework surface — so behavior is byte-identical to recharts.
+
+export function isWellBehavedNumber(n: unknown): n is number {
+  return Number.isFinite(n);
+}
+
+export function isPositiveNumber(n: unknown): n is number {
+  return typeof n === "number" && n > 0 && Number.isFinite(n);
+}

package/src/util/objectPath.ts

@@ -0,0 +1,129 @@
+// Replaces es-toolkit/compat `get` — the deep-dataKey path engine behind
+// getValueByDataKey (`"nested.obj.children"`, `"arr[1].y"`, numeric keys, …).
+// Faithful port of es-toolkit's get/toPath/toKey/isDeepKey/isUnsafeProperty
+// (MIT), restricted to the string|number paths recharts dataKeys use and
+// adapted to this repo's type discipline (unknown + narrowing, no assertions).
+
+const isIndexable = (value: unknown): value is Record<PropertyKey, unknown> =>
+  (typeof value === "object" && value !== null) || typeof value === "function";
+
+const readKey = (object: unknown, key: string): unknown =>
+  isIndexable(object) ? object[key] : undefined;
+
+/** lodash `toKey` for numbers: `-0` stringifies to `"-0"`, not `"0"`. */
+const numberToKey = (value: number): string => (Object.is(value, -0) ? "-0" : String(value));
+
+const isDeepKey = (key: string): boolean =>
+  key.includes(".") || key.includes("[") || key.includes("]");
+
+/**
+ * lodash-style path tokenizer: `"a.b[0]['c.d']"` → `["a", "b", "0", "c.d"]`.
+ * Handles quoted bracket keys, backslash escapes inside quotes, and a leading
+ * dot (which yields a leading empty segment, matching lodash).
+ */
+export function toPath(deepKey: string): string[] {
+  const result: string[] = [];
+  const length = deepKey.length;
+  if (length === 0) {
+    return result;
+  }
+  let index = 0;
+  let key = "";
+  let quoteChar = "";
+  let bracket = false;
+  if (deepKey.charCodeAt(0) === 46) {
+    result.push("");
+    index++;
+  }
+  while (index < length) {
+    const char = deepKey[index];
+    if (quoteChar) {
+      if (char === "\\" && index + 1 < length) {
+        index++;
+        key += deepKey[index];
+      } else if (char === quoteChar) {
+        quoteChar = "";
+      } else {
+        key += char;
+      }
+    } else if (bracket) {
+      if (char === '"' || char === "'") {
+        quoteChar = char;
+      } else if (char === "]") {
+        bracket = false;
+        result.push(key);
+        key = "";
+      } else {
+        key += char;
+      }
+    } else if (char === "[") {
+      bracket = true;
+      if (key) {
+        result.push(key);
+        key = "";
+      }
+    } else if (char === ".") {
+      if (key) {
+        result.push(key);
+        key = "";
+      }
+    } else {
+      key += char;
+    }
+    index++;
+  }
+  if (key) {
+    result.push(key);
+  }
+  return result;
+}
+
+function getWithPath(object: unknown, path: readonly string[], defaultValue: unknown): unknown {
+  if (path.length === 0) {
+    return defaultValue;
+  }
+  let current: unknown = object;
+  for (let index = 0; index < path.length; index++) {
+    if (current == null) {
+      return defaultValue;
+    }
+    const segment = path[index];
+    if (segment === undefined || segment === "__proto__") {
+      return defaultValue;
+    }
+    current = readKey(current, segment);
+  }
+  return current === undefined ? defaultValue : current;
+}
+
+/**
+ * Resolves `path` against `object` — a direct own key wins over path syntax
+ * (so a literal `"a.b"` key is found before `"a.b"` is treated as a deep
+ * path), exactly like lodash/es-toolkit `get`.
+ *
+ * The generic overload is a DECLARED-UNSOUND seam (same boundary es-toolkit's
+ * `any`-typed `get` provided): a runtime string path can't prove its value's
+ * type, so the caller's expected type is taken on faith. The implementation
+ * works in honest `unknown`.
+ */
+export function get<T>(object: unknown, path: string | number, defaultValue?: T): T | undefined;
+export function get(object: unknown, path: string | number, defaultValue?: unknown): unknown {
+  if (object == null) {
+    return defaultValue;
+  }
+  if (typeof path === "number") {
+    const result = readKey(object, numberToKey(path));
+    return result === undefined ? defaultValue : result;
+  }
+  if (path === "__proto__") {
+    return defaultValue;
+  }
+  const direct = readKey(object, path);
+  if (direct !== undefined) {
+    return direct;
+  }
+  if (isDeepKey(path)) {
+    return getWithPath(object, toPath(path), defaultValue);
+  }
+  return defaultValue;
+}

package/src/util/payload/getUniqPayload.ts

@@ -0,0 +1,31 @@
+// Ported from recharts 3.8.1 src/util/payload/getUniqPayload.ts (commit 7a23854).
+// Pure util — no framework surface — so behavior is byte-identical to recharts.
+
+import { uniqBy } from "../collectionUtils";
+
+type UniqueFunc<T> = (entry: T) => unknown;
+
+/**
+ * This is configuration option that decides how to filter for unique values only:
+ *
+ * - `false` means "no filter"
+ * - `true` means "use recharts default filter"
+ * - function means "use return of this function as the default key"
+ */
+export type UniqueOption<T> = boolean | UniqueFunc<T>;
+
+export function getUniqPayload<T>(
+  payload: ReadonlyArray<T>,
+  option: UniqueOption<T> | undefined,
+  defaultUniqBy: UniqueFunc<T>,
+): ReadonlyArray<T> {
+  if (option === true) {
+    return uniqBy(payload, defaultUniqBy);
+  }
+
+  if (typeof option === "function") {
+    return uniqBy(payload, option);
+  }
+
+  return payload;
+}

package/src/util/propsAreEqual.ts

@@ -0,0 +1,137 @@
+// Ported from recharts 3.8.1 src/util/propsAreEqual.ts (commit 7a23854).
+//
+// Deviation: recharts imports `shallowEqual` from `react-redux`. A SolidJS port
+// has no react-redux, so we inline an equivalent one-level same-value compare.
+// react-redux's `shallowEqual` is just `Object.is` applied per own-enumerable
+// key (its internal `is` predates and mirrors `Object.is`), so the local
+// version below is behavior-identical — NaN compares equal, +0 and -0 do not.
+//
+// NOTE on relevance: recharts uses `propsAreEqual` only as the `React.memo`
+// comparator on Bar/Area/Line/Scatter/Legend/ReportEventSettings/etc. Solid
+// components do not re-render, so when those units are ported this comparator
+// will most likely be dropped or repurposed. The function itself is pure and
+// spec-tested, so we port it now and revisit its call sites in Tier 2.
+
+const propsToShallowCompare = new Set<string>([
+  "axisLine",
+  "tickLine",
+  "activeBar",
+  "activeDot",
+  "activeLabel",
+  "activeShape",
+  "allowEscapeViewBox",
+  "background",
+  "cursor",
+  "dot",
+  "label",
+  "line",
+  "margin",
+  "padding",
+  "position",
+  "shape",
+  "style",
+  "tick",
+  "wrapperStyle",
+  // radius can be an array of 4 numbers, easy to compare shallowly
+  "radius",
+  "throttledEvents",
+]);
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+/**
+ * One-level same-value comparison, equivalent to react-redux's `shallowEqual`.
+ * Uses `Object.is`, so two NaNs are equal and +0/-0 are not — matching the
+ * original.
+ */
+function shallowEqual(objA: unknown, objB: unknown): boolean {
+  if (Object.is(objA, objB)) {
+    return true;
+  }
+  if (!isRecord(objA) || !isRecord(objB)) {
+    return false;
+  }
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+  for (const key of keysA) {
+    if (!Object.hasOwn(objB, key) || !Object.is(objA[key], objB[key])) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * When comparing two values, returns true if they are the same value or
+ * are both NaN.
+ *
+ * If we used just a simple triple equals, we would get false negatives for two NaNs
+ * which could cause extra re-renders so let's have this instead.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#same-value-zero_equality
+ *
+ * @param x first value to compare
+ * @param y second value to compare
+ * return true if the same, false if different
+ */
+function sameValueZero(x: unknown, y: unknown): boolean {
+  if (x == null && y == null) {
+    /*
+     * treat null and undefined as equal. Internally in Recharts we make no difference between these two
+     * so there is no need to re-render.
+     */
+    return true;
+  }
+  if (typeof x === "number" && typeof y === "number") {
+    // x and y are equal (this is true for -0 and 0) or they are both NaN
+    return x === y || (x !== x && y !== y);
+  }
+  return x === y;
+}
+
+/**
+ * So usually React would compare only the first level of props using Object.is.
+ * However, in our case many props are objects or arrays, and our own docs recommend to do that!
+ * Therefore, we need a custom comparison function that does a shallow comparison of each prop value.
+ *
+ * Because charts can and do receive large props (typically the data array),
+ * we only limit this to a subset of known props that are likely to be objects/arrays.
+ *
+ * @param prevProps
+ * @param nextProps
+ */
+export function propsAreEqual<T extends Record<string, unknown>>(
+  prevProps: T,
+  nextProps: T,
+): boolean {
+  const allKeys = new Set<string>([...Object.keys(prevProps), ...Object.keys(nextProps)]);
+  for (const key of allKeys) {
+    /*
+     * If a key is on a special allowlist, go one level deeper
+     * and do a shallow comparison of the values.
+     */
+    if (propsToShallowCompare.has(key)) {
+      if (prevProps[key] == null && nextProps[key] == null) {
+        /*
+         * treat null and undefined as equal. Internally in Recharts we make no difference between these two
+         * so there is no need to re-render.
+         */
+        continue;
+      }
+      if (!shallowEqual(prevProps[key], nextProps[key])) {
+        return false;
+      }
+      /*
+       * Otherwise do a simple same-value comparison (with NaN support).
+       */
+    } else if (!sameValueZero(prevProps[key], nextProps[key])) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/util/resolveDefaultProps.tsx

@@ -0,0 +1,8 @@
+// SKIPPED — intentionally NOT ported to the SolidJS port.
+//
+// Reason: React defaultProps shim — use Solid merge()
+//
+// TODO: do not port this file as-is. The Solid-native port replaces it (see the
+// reason above). If a consumer needs this path, wire it to the Solid equivalent
+// instead. Tracked in scripts/porting-queue.mjs SKIP list and project memory.
+export {};

package/src/util/round.ts

@@ -0,0 +1,35 @@
+// Ported from recharts 3.8.1 src/util/round.ts (commit 7a23854).
+// Pure math — no framework surface — so behavior is byte-identical to recharts.
+
+// if you go lower than 3, wild wild things happen during rendering
+const defaultRoundPrecision = 4;
+
+export function round(num: number, roundPrecision: number = defaultRoundPrecision): number {
+  const factor = 10 ** roundPrecision;
+  const rounded = Math.round(num * factor) / factor;
+  if (Object.is(rounded, -0)) {
+    return 0;
+  }
+  return rounded;
+}
+
+/**
+ * This function will accept a string template literal and for each
+ * variable placeholder, it will round the value to avoid long float numbers in
+ * the SVG path which might cause rendering issues in some browsers.
+ */
+export function roundTemplateLiteral(
+  strings: TemplateStringsArray,
+  ...values: ReadonlyArray<number | string>
+): string {
+  return strings.reduce((result, string, i) => {
+    const value = values[i - 1];
+    if (typeof value === "string") {
+      return result + value + string;
+    }
+    if (value !== undefined) {
+      return result + round(value) + string;
+    }
+    return result + string;
+  }, "");
+}