fix: field formatter sanitizer for vega formatter (#9390)

* fix: field formatter sanitizer for vega formatter

* use exact name in assertion

Author: djbarnwal

web-common/src/components/vega/util.spec.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { parseExpression } from "vega-expression";
+import { sanitizeFieldName } from "./util";
+
+describe("sanitizeFieldName", () => {
+  it("keeps simple field names readable", () => {
+    expect(sanitizeFieldName("total_sales")).toBe("rill_total_sales");
+  });
+
+  it("returns a valid Vega expression function name for measure names with operators", () => {
+    const measureNames: [string, string][] = [
+      ["Total Sample Revenue", "rill_Total_u20_Sample_u20_Revenue"],
+      ["Sample Rate* Lift", "rill_Sample_u20_Rate_u2a__u20_Lift"],
+      [
+        "Share(%) | Variant A",
+        "rill_Share_u28__u25__u29__u20__u7c__u20_Variant_u20_A",
+      ],
+      [
+        "Share(%) | Baseline",
+        "rill_Share_u28__u25__u29__u20__u7c__u20_Baseline",
+      ],
+      [
+        "Avg Sample Value | Variant A",
+        "rill_Avg_u20_Sample_u20_Value_u20__u7c__u20_Variant_u20_A",
+      ],
+      [
+        "Avg Sample Value | Baseline",
+        "rill_Avg_u20_Sample_u20_Value_u20__u7c__u20_Baseline",
+      ],
+      [
+        "Success Rate | Variant A",
+        "rill_Success_u20_Rate_u20__u7c__u20_Variant_u20_A",
+      ],
+      [
+        "Success Rate | Baseline",
+        "rill_Success_u20_Rate_u20__u7c__u20_Baseline",
+      ],
+      ["Success Rate | Delta", "rill_Success_u20_Rate_u20__u7c__u20_Delta"],
+    ];
+
+    for (const [measureName, expectedFormatType] of measureNames) {
+      const formatType = sanitizeFieldName(measureName);
+
+      expect(formatType).toBe(expectedFormatType);
+      expect(() => parseExpression(`${formatType}(datum.value)`)).not.toThrow();
+    }
+  });
+});

web-common/src/components/vega/util.ts

@@ -31,13 +31,17 @@ export function sanitizeValuesForSpec(values: unknown[]) {
 }
 
 export function sanitizeFieldName(fieldName: string) {
-  const specialCharactersRemoved = sanitizeValueForVega(fieldName);
-  const sanitizedFieldName = specialCharactersRemoved.replace(" ", "__");
+  const sanitizedFieldName = Array.from(fieldName)
+    .map((char) => {
+      if (/[a-zA-Z0-9_$]/.test(char)) return char;
+      return `_u${char.codePointAt(0)?.toString(16) ?? "0"}_`;
+    })
+    .join("");
 
   /**
-   * Add a prefix to the beginning of the field
-   * name to avoid variables starting with a special
-   * character or number.
+   * Vega-Lite compiles custom formatType values as expression function calls.
+   * Keep this value to a JavaScript/Vega identifier-safe subset so measure
+   * names with spaces or operators can still be used as formatter names.
    */
-  return `rill_${sanitizedFieldName}`;
+  return `rill_${sanitizedFieldName || "field"}`;
 }