fix(#6708): change domain order for union with (#8451)

Co-authored-by: GitHub Actions Bot <vega-actions-bot@users.noreply.github.com>

examples/compiled/arc_color_mappings.vg.json

@@ -0,0 +1,77 @@
+{
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "A simple pie chart with embedded data.",
+  "background": "white",
+  "padding": 5,
+  "width": 200,
+  "height": 200,
+  "data": [
+    {
+      "name": "source_0",
+      "values": [
+        {"category": 1, "value": 4},
+        {"category": 2, "value": 6},
+        {"category": 3, "value": 10},
+        {"category": 4, "value": 3},
+        {"category": 5, "value": 7},
+        {"category": 6, "value": 8}
+      ]
+    },
+    {
+      "name": "data_0",
+      "source": "source_0",
+      "transform": [
+        {
+          "type": "stack",
+          "groupby": [],
+          "field": "value",
+          "sort": {"field": ["category"], "order": ["ascending"]},
+          "as": ["value_start", "value_end"],
+          "offset": "zero"
+        },
+        {
+          "type": "filter",
+          "expr": "isValid(datum[\"value\"]) && isFinite(+datum[\"value\"])"
+        }
+      ]
+    }
+  ],
+  "marks": [
+    {
+      "name": "marks",
+      "type": "arc",
+      "style": ["arc"],
+      "from": {"data": "data_0"},
+      "encode": {
+        "update": {
+          "fill": {"scale": "color", "field": "category"},
+          "description": {
+            "signal": "\"value: \" + (format(datum[\"value\"], \"\")) + \"; category: \" + (isValid(datum[\"category\"]) ? datum[\"category\"] : \"\"+datum[\"category\"])"
+          },
+          "x": {"signal": "width", "mult": 0.5},
+          "y": {"signal": "height", "mult": 0.5},
+          "outerRadius": {"signal": "min(width,height)/2"},
+          "innerRadius": {"value": 0},
+          "startAngle": {"scale": "theta", "field": "value_end"},
+          "endAngle": {"scale": "theta", "field": "value_start"}
+        }
+      }
+    }
+  ],
+  "scales": [
+    {
+      "name": "theta",
+      "type": "linear",
+      "domain": {"data": "data_0", "fields": ["value_start", "value_end"]},
+      "range": [0, 6.283185307179586],
+      "zero": true
+    },
+    {
+      "name": "color",
+      "type": "ordinal",
+      "domain": {"fields": [[5, 6], {"data": "data_0", "field": "category"}]},
+      "range": ["purple", "green", "blue", "yellow", "magenta", "brown"]
+    }
+  ],
+  "legends": [{"fill": "color", "symbolType": "circle", "title": "category"}]
+}

examples/specs/arc_color_mappings.vl.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "description": "A simple pie chart with embedded data.",
+  "data": {
+    "values": [
+      {
+        "category": 1,
+        "value": 4
+      },
+      {
+        "category": 2,
+        "value": 6
+      },
+      {
+        "category": 3,
+        "value": 10
+      },
+      {
+        "category": 4,
+        "value": 3
+      },
+      {
+        "category": 5,
+        "value": 7
+      },
+      {
+        "category": 6,
+        "value": 8
+      }
+    ]
+  },
+  "mark": "arc",
+  "encoding": {
+    "theta": {
+      "field": "value",
+      "type": "quantitative"
+    },
+    "color": {
+      "field": "category",
+      "type": "nominal",
+      "scale": {
+        "range": [
+          "purple",
+          "green",
+          "blue",
+          "yellow",
+          "magenta",
+          "brown"
+        ],
+        "domain": {
+          "unionWith": [
+            5,
+            6
+          ]
+        }
+      },
+      "sort": null
+    }
+  }
+}

src/compile/scale/domain.ts

@@ -251,7 +251,7 @@ function parseSingleChannelDomain(
 
     const unionWith = convertDomainIfItIsDateTime(domain.unionWith, type, timeUnit);
 
-    return makeExplicit([...defaultDomain.value, ...unionWith]);
+    return makeExplicit([...unionWith, ...defaultDomain.value]);
   } else if (isSignalRef(domain)) {
     return makeExplicit([domain]);
   } else if (domain && domain !== 'unaggregated' && !isParameterDomain(domain)) {

test/compile/scale/domain.test.ts

@@ -50,7 +50,7 @@ describe('compile/scale', () => {
       });
 
       const xDomain = testParseDomainForChannel(model, 'x');
-      expect(xDomain).toEqual([{data: 'main', field: 'a'}, [0, 100]]);
+      expect(xDomain).toEqual([[0, 100], {data: 'main', field: 'a'}]);
     });
 
     it('correctly parse signal domain', () => {