Use full dataset for markup variables

Author: jayb

packages/core/components/EditorPanel/components/PanelMarkup.tsx

@@ -10,6 +10,8 @@ type PanelMarkupProps = {
   markupVariables: MarkupVariable[]
   /** Dataset to extract column names and values from */
   data: any[]
+  /** Optional unfiltered data source to prefer for editor mapping options */
+  editorData?: any[]
   /** Whether markup variables feature is enabled */
   enableMarkupVariables: boolean
   /** Callback when variables are added, updated, or removed */
@@ -30,16 +32,19 @@ const PanelMarkup: React.FC<PanelMarkupProps> = ({
   name,
   markupVariables,
   data,
+  editorData,
   enableMarkupVariables,
   onMarkupVariablesChange,
   onToggleEnable,
   withAccordion = true,
   dataMetadata
 }) => {
+  const sourceData = Array.isArray(editorData) && editorData.length ? editorData : data
+
   const content = (
     <MarkupVariablesEditor
       markupVariables={markupVariables || []}
-      data={data}
+      data={sourceData}
       onChange={onMarkupVariablesChange}
       enableMarkupVariables={enableMarkupVariables || false}
       onToggleEnable={onToggleEnable}
@@ -60,4 +65,4 @@ const PanelMarkup: React.FC<PanelMarkupProps> = ({
   )
 }
 
-export default PanelMarkup
+export default PanelMarkup

packages/core/helpers/tests/testStandaloneBuild.ts

@@ -6,7 +6,6 @@ import { promisify } from 'node:util'
 
 const execAsync = promisify(exec)
 
-
 function copyDirSync(src, dest) {
   fs.mkdirSync(dest, { recursive: true })
   for (const entry of fs.readdirSync(src, { withFileTypes: true })) {

packages/data-bite/examples/trend-arrow.json

@@ -0,0 +1,147 @@
+{
+  "type": "data-bite",
+  "dataBite": "",
+  "dataFunction": "Mean (Average)",
+  "dataColumn": "Rate",
+  "bitePosition": "Left",
+  "biteFontSize": 24,
+  "fontSize": "medium",
+  "biteBody": "",
+  "imageData": {
+    "display": "none",
+    "url": "",
+    "alt": "",
+    "options": []
+  },
+  "dataFormat": {
+    "roundToPlace": 0,
+    "commas": true,
+    "prefix": "",
+    "suffix": "%"
+  },
+  "biteStyle": "tp5",
+  "filters": [],
+  "subtext": "",
+  "title": "",
+  "theme": "theme-blue",
+  "shadow": false,
+  "visual": {
+    "border": true,
+    "accent": false,
+    "background": false,
+    "hideBackgroundColor": false,
+    "borderColorTheme": false,
+    "showTitle": true,
+    "useWrap": false
+  },
+  "general": {
+    "palette": {
+      "version": "1.0",
+      "backups": [
+        {
+          "name": "__​undefined__",
+          "version": "1.0",
+          "isReversed": "__​undefined__"
+        }
+      ]
+    },
+    "isCompactStyle": false
+  },
+  "trendIndicator": {
+    "mode": "numeric",
+    "column": "oldrate",
+    "numericRules": {
+      "upThreshold": 0,
+      "downThreshold": 0
+    },
+    "mappings": []
+  },
+  "markupVariables": [],
+  "enableMarkupVariables": false,
+  "errors": [],
+  "currentViewport": "lg",
+  "id": 16,
+  "category": "General",
+  "label": "Data Bite",
+  "subType": null,
+  "orientation": null,
+  "icon": {
+    "type": {},
+    "key": null,
+    "ref": null,
+    "props": {},
+    "_owner": null,
+    "_store": {}
+  },
+  "content": "Highlight a single aggregated value (e.g., sum or median).",
+  "visualizationType": null,
+  "activeVizButtonID": 16,
+  "dataMetadata": {
+    "lastUpdated": "January 15, 2026",
+    "source": "CDC NREVSS"
+  },
+  "dataFileName": "./data-with-metadata.json",
+  "dataFileSourceType": "file",
+  "dataDescription": {
+    "horizontal": false,
+    "series": false
+  },
+  "version": "4.26.4",
+  "migrations": {
+    "addColorMigration": true
+  },
+  "locale": "en-US",
+  "data": [
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Home",
+      "oldrate": "7"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Home",
+      "oldrate": "13"
+    },
+    {
+      "STATE": "FL",
+      "Rate": "10",
+      "Location": "Work",
+      "oldrate": "10"
+    },
+    {
+      "STATE": "GA",
+      "Rate": "12",
+      "Location": "Work",
+      "oldrate": "11"
+    }
+  ],
+  "formattedData": [
+    {
+      "STATE": "AL",
+      "Rate": "10",
+      "Location": "Home",
+      "oldrate": "7"
+    },
+    {
+      "STATE": "AK",
+      "Rate": "12",
+      "Location": "Home",
+      "oldrate": "13"
+    },
+    {
+      "STATE": "FL",
+      "Rate": "10",
+      "Location": "Work",
+      "oldrate": "10"
+    },
+    {
+      "STATE": "GA",
+      "Rate": "12",
+      "Location": "Work",
+      "oldrate": "11"
+    }
+  ],
+  "datasets": {}
+}

packages/data-bite/src/components/EditorPanel/EditorPanel.tsx

@@ -742,6 +742,7 @@ const EditorPanel: React.FC<DataBiteEditorPanelProps> = () => {
                 name='Markup Variables'
                 markupVariables={config.markupVariables || []}
                 data={data}
+                editorData={editorData}
                 enableMarkupVariables={config.enableMarkupVariables || false}
                 onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
                 onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}

packages/waffle-chart/src/components/EditorPanel.jsx

@@ -618,6 +618,7 @@ const EditorPanel = memo(props => {
           name='Markup Variables'
           markupVariables={config.markupVariables || []}
           data={data}
+          editorData={editorData}
           enableMarkupVariables={config.enableMarkupVariables || false}
           onMarkupVariablesChange={variables => updateField(null, null, 'markupVariables', variables)}
           onToggleEnable={enabled => updateField(null, null, 'enableMarkupVariables', enabled)}