@cdc/core 4.26.1 → 4.26.2

package/assets/icon-chart-area.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M64 64c0-17.7-14.3-32-32-32S0 46.3 0 64L0 400c0 44.2 35.8 80 80 80l400 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 416c-8.8 0-16-7.2-16-16L64 64zm96 288l288 0c17.7 0 32-14.3 32-32l0-68.2c0-7.6-2.7-15-7.7-20.8l-65.8-76.8c-12.1-14.2-33.7-15-46.9-1.8l-21 21c-10 10-26.4 9.2-35.4-1.6l-39.2-47c-12.6-15.1-35.7-15.4-48.7-.6L135.9 215c-5.1 5.8-7.9 13.3-7.9 21.1l0 84c0 17.7 14.3 32 32 32z"/></svg>

package/assets/icon-chart-radar.svg

@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
+    <!-- Outer pentagon (grid) -->
+    <path d="M256 32l211.25 153.5L175 478.5H337l81.25-293L256 32zm0 0L44.75 185.5L175 478.5h162L175 478.5 44.75 185.5 256 32z" fill="none" stroke="currentColor" stroke-width="20" stroke-linejoin="round"/>
+    <!-- Middle pentagon (grid ring) -->
+    <path d="M256 112l126.75 92.1L207.5 375.3h97l48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <path d="M256 112l-126.75 92.1L207.5 375.3h-97l-48.75-171.2L256 112z" fill="none" stroke="currentColor" stroke-width="12" stroke-opacity="0.4" stroke-linejoin="round"/>
+    <!-- Inner pentagon (grid ring) -->
+    <path d="M256 192l63.4 46L289 332.7h-66l-30-94.7L256 192z" fill="none" stroke="currentColor" stroke-width="8" stroke-opacity="0.3" stroke-linejoin="round"/>
+    <!-- Axis lines -->
+    <line x1="256" y1="256" x2="256" y2="32" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="467.25" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="337" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="175" y2="478.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <line x1="256" y1="256" x2="44.75" y2="185.5" stroke="currentColor" stroke-width="8" stroke-opacity="0.5"/>
+    <!-- Data polygon (filled) -->
+    <polygon points="256,80 400,200 350,420 162,420 112,200" fill="currentColor" fill-opacity="0.3" stroke="currentColor" stroke-width="16" stroke-linejoin="round"/>
+    <!-- Data points -->
+    <circle cx="256" cy="80" r="12" fill="currentColor"/>
+    <circle cx="400" cy="200" r="12" fill="currentColor"/>
+    <circle cx="350" cy="420" r="12" fill="currentColor"/>
+    <circle cx="162" cy="420" r="12" fill="currentColor"/>
+    <circle cx="112" cy="200" r="12" fill="currentColor"/>
+</svg>

package/assets/logo2.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.9.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="135 160 228 147" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0055B8;}
+	.st1{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M141.22,300.14H186h151.44c10.88,0,19.84-8.27,20.91-18.87c0.07-0.71,0.11-1.42,0.11-2.15V165.04H188.93
+		h-26.68c-7.26,0-13.65,3.68-17.43,9.27c-0.76,1.12-1.41,2.31-1.94,3.57c-1.06,2.52-1.65,5.28-1.65,8.18V300.14z"/>
+	<path class="st1" d="M162.25,160.83c-13.91,0-25.23,11.32-25.23,25.23v118.28h31.62h6.95h161.85c13.91,0,25.23-11.32,25.23-25.23
+		V160.83H162.25z M326.53,239.21c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-1.11,0-2.25,0.06-3.41,0.17l45.61-28.63h1.76v62.45l-31.15,12.59L326.53,239.21z M243.33,242.49
+		h-6.37c-0.31,0-0.56-0.25-0.56-0.56v-34.78c0-0.31,0.25-0.56,0.56-0.56h7.31c11.28,0,18.77,5.56,18.77,17.43
+		C263.04,237.79,255.72,242.49,243.33,242.49z M240.95,194.29h-17.32c-0.31,0-0.56,0.25-0.56,0.56v59.4c0,0.08,0.02,0.15,0.04,0.22
+		l-65.24,45.68h-6.1l40.05-44.48c2.03,0.34,4.03,0.51,5.93,0.51c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74
+		l-7.52-8.36c-0.2-0.23-0.56-0.25-0.78-0.05c-1.32,1.19-5.84,4.76-12.61,4.88c-8.53,0.14-17.17-6.93-17.17-19.2
+		c0-12.27,8.92-19.21,17.27-19.21c6.2,0,10.2,2.92,11.41,3.95c0.23,0.19,0.57,0.17,0.77-0.06l7.57-8.41c0.18-0.2,0.2-0.51,0.02-0.72
+		c-1.24-1.49-6.57-6.89-18.51-6.89c-5.92,0-12.69,1.53-18.48,5.1l12.88-33.56h76.66L240.95,194.29z M142.88,177.88
+		c0.53-1.26,1.18-2.45,1.94-3.57c3.78-5.59,10.18-9.27,17.43-9.27h26.35l-14.39,37.49c-5.11,4.98-8.62,12.23-8.62,22.3
+		c0,0.05,0,0.1,0,0.15l-24.37,63.49V186.06C141.22,183.16,141.81,180.39,142.88,177.88z M141.22,297.77l25.1-65.41
+		c2.66,12.93,12.13,19.81,21.77,22.47l-40.8,45.31h-6.07V297.77z M163.69,300.14l64.76-45.34h16.43c18.03,0,32.01-10.51,32.01-30.08
+		c0-21.2-13.14-29.7-31.38-30.37l27.92-29.3h77.01l-49.53,31.09c-9.9,4-18.58,12.87-18.58,28.7c0,14.08,6.93,22.65,15.44,27.19
+		l-119.11,48.12H163.69z M358.35,281.27c-1.08,10.6-10.03,18.87-20.91,18.87h-149.9l114.43-46.23c4.21,1.55,8.58,2.26,12.53,2.26
+		c11.85,0,18.13-6.24,19.55-7.87c0.19-0.21,0.19-0.53,0-0.74l-4.37-4.85l28.78-11.63v48.03
+		C358.46,279.84,358.43,280.56,358.35,281.27z"/>
+</g>
+
+</svg>

package/components/AdvancedEditor/EmbedEditor.tsx

@@ -1,31 +1,55 @@
 import React, { useState, useEffect, useMemo } from 'react'
-import { generateEmbedCode } from '../../helpers/embedCodeGenerator'
+import {
+  generateEmbedCode,
+  extractFilters,
+  initializeFilterState,
+  buildFilterUrlParams,
+  type FilterMetadata,
+  type FilterState
+} from '../../helpers/embed'
+import '../../helpers/embed' // Initialize embed helper for iframe resizing
 
 type EmbedEditorProps = {
   config?: any // Current visualization config
 }
 
+type TabId = 'preview' | 'code'
+
 /**
  * EmbedEditor - Provides "Share with Partners" functionality
  * Generates embed codes for iframe embedding of visualizations
+ * Now includes filter customization, preview, and embed code generation
  */
 export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
   const [configUrl, setConfigUrl] = useState<string | null>(null)
   const [showEmbedModal, setShowEmbedModal] = useState(false)
-  const [embedCode, setEmbedCode] = useState('')
-  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
   const [isExpanded, setIsExpanded] = useState(false)
+  const [activeTab, setActiveTab] = useState<TabId>('preview')
+  const [embedCodeCopied, setEmbedCodeCopied] = useState(false)
+
+  // Extract filters from config
+  const filters = useMemo(() => extractFilters(config), [config])
+
+  // Initialize filter state
+  const [filterState, setFilterState] = useState<Record<string, FilterState>>({})
+
+  // Update filter state when filters change
+  useEffect(() => {
+    if (filters.length > 0) {
+      setFilterState(initializeFilterState(filters))
+    }
+  }, [filters])
 
   // Check if all filters have setByQueryParameter
   const filtersAreValid = useMemo(() => {
     if (!config) return true
 
     // Check regular filters
-    const filters = config.filters || []
+    const regularFilters = config.filters || []
     // Check dashboard shared filters
     const sharedFilters = config.dashboard?.sharedFilters || []
 
-    const allFilters = [...filters, ...sharedFilters]
+    const allFilters = [...regularFilters, ...sharedFilters]
 
     // If no filters, valid
     if (allFilters.length === 0) return true
@@ -34,6 +58,20 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
     return allFilters.every((filter: any) => !!filter.setByQueryParameter)
   }, [config])
 
+  // Determine if we have valid filters to show
+  const hasFilters = filters.length > 0 && filtersAreValid
+
+  // Generate embed code with current filter settings
+  const embedCode = useMemo(() => {
+    if (!configUrl) return ''
+
+    const urlParams = buildFilterUrlParams(filters, filterState)
+    return generateEmbedCode({
+      configUrl,
+      urlParams
+    })
+  }, [configUrl, filters, filterState])
+
   // Detect configUrl from WCMS permalink or use dev fallback
   useEffect(() => {
     // Try to get config URL from WCMS permalink element
@@ -74,12 +112,33 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
       return
     }
 
-    const code = generateEmbedCode({ configUrl })
-    setEmbedCode(code)
+    setActiveTab('preview')
     setShowEmbedModal(true)
     setEmbedCodeCopied(false)
   }
 
+  // Handle filter value change
+  const handleFilterChange = (filterKey: string, value: string) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        value
+      }
+    }))
+  }
+
+  // Handle filter hide toggle
+  const handleHideToggle = (filterKey: string, hide: boolean) => {
+    setFilterState(prev => ({
+      ...prev,
+      [filterKey]: {
+        ...prev[filterKey],
+        hide
+      }
+    }))
+  }
+
   // Handle copying embed code from modal
   const handleCopyFromModal = async () => {
     try {
@@ -98,9 +157,6 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
     setEmbedCodeCopied(false)
   }
 
-  // Hide embed section until released
-  return null
-
   return (
     <>
       {/* Collapsible Share with Partners Section */}
@@ -155,8 +211,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
             ) : (
               <>
                 <p style={{ fontSize: '0.85em', marginBottom: '1em', color: '#666' }}>
-                  Generate embed codes for partners to add this visualization to their websites. Your visualization will
-                  need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                  Generate embed codes for partners to add this visualization to their website.
                 </p>
 
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5em' }}>
@@ -174,7 +229,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
         )}
       </div>
 
-      {/* Embed Code Modal */}
+      {/* Embed Code Modal with Tabs */}
       {showEmbedModal && (
         <div
           className='modal-overlay'
@@ -186,8 +241,9 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
             bottom: 0,
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             display: 'flex',
-            alignItems: 'center',
+            alignItems: 'flex-start',
             justifyContent: 'center',
+            paddingTop: '5vh',
             zIndex: 9999
           }}
           onClick={handleCloseModal}
@@ -198,12 +254,16 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               backgroundColor: 'white',
               borderRadius: '8px',
               boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-              maxWidth: '600px',
+              maxWidth: '800px',
               width: '90%',
-              margin: '20px'
+              maxHeight: '90vh',
+              margin: '20px',
+              display: 'flex',
+              flexDirection: 'column'
             }}
             onClick={e => e.stopPropagation()}
           >
+            {/* Modal Header */}
             <div
               className='modal-header'
               style={{
@@ -216,7 +276,7 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
                 borderRadius: '8px 8px 0 0'
               }}
             >
-              <h3 style={{ color: 'white', margin: 0 }}>Embed Code</h3>
+              <h3 style={{ color: 'white', margin: 0 }}>Share with Partners</h3>
               <button
                 onClick={handleCloseModal}
                 style={{
@@ -234,26 +294,196 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               </button>
             </div>
 
-            <div className='modal-body' style={{ padding: '20px' }}>
-              <p style={{ marginBottom: '10px', color: '#666' }}>Copy this code and paste it into your website:</p>
-              <textarea
-                readOnly
-                value={embedCode}
-                style={{
-                  width: '100%',
-                  height: '180px',
-                  fontFamily: 'monospace',
-                  fontSize: '0.85em',
-                  padding: '10px',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  resize: 'vertical',
-                  boxSizing: 'border-box'
-                }}
-                onFocus={e => e.target.select()}
-              />
+            {/* Tab Navigation */}
+            <div
+              style={{
+                display: 'flex',
+                borderBottom: '1px solid #e0e0e0',
+                backgroundColor: '#f5f5f5'
+              }}
+            >
+              {(['preview', 'code'] as TabId[]).map(tab => {
+                const tabLabels: Record<TabId, string> = {
+                  preview: 'Preview Visualization',
+                  code: 'Get Embed Code'
+                }
+
+                return (
+                  <button
+                    key={tab}
+                    onClick={() => setActiveTab(tab)}
+                    style={{
+                      flex: 1,
+                      padding: '12px 16px',
+                      border: 'none',
+                      backgroundColor: activeTab === tab ? 'white' : 'transparent',
+                      borderBottom: activeTab === tab ? '2px solid #005eaa' : '2px solid transparent',
+                      color: activeTab === tab ? '#005eaa' : '#666',
+                      fontWeight: activeTab === tab ? 'bold' : 'normal',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s'
+                    }}
+                  >
+                    {tabLabels[tab]}
+                  </button>
+                )
+              })}
             </div>
 
+            {/* Tab Content */}
+            <div
+              className='modal-body'
+              style={{
+                padding: '20px',
+                flex: 1,
+                overflow: 'auto'
+              }}
+            >
+              {/* Preview Tab - Contains filter controls (if filters exist) and preview */}
+              {activeTab === 'preview' && (
+                <div>
+                  {/* Filter Settings - only shown if there are valid filters */}
+                  {hasFilters && (
+                    <>
+                      <h4 style={{ marginTop: 0, marginBottom: '1rem' }}>Filter Settings</h4>
+                      <p style={{ marginBottom: '1rem', color: '#666' }}>
+                        Set default values and visibility for filters in the partner's embedded visualization.
+                      </p>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+                        {filters.map((filter, index) => {
+                          const state = filterState[filter.key] || { value: '', hide: false }
+                          const hasValues = filter.values && filter.values.length > 0
+
+                          return (
+                            <div
+                              key={filter.key || index}
+                              style={{
+                                padding: '1rem',
+                                background: 'white',
+                                border: '1px solid #ddd',
+                                borderRadius: '4px'
+                              }}
+                            >
+                              <label
+                                htmlFor={`filter-${index}`}
+                                style={{
+                                  display: 'block',
+                                  marginBottom: '0.5rem',
+                                  fontWeight: 'bold'
+                                }}
+                              >
+                                {filter.label}
+                              </label>
+
+                              {hasValues ? (
+                                <select
+                                  id={`filter-${index}`}
+                                  value={state.value}
+                                  onChange={e => handleFilterChange(filter.key, e.target.value)}
+                                  style={{
+                                    width: '100%',
+                                    padding: '0.5rem',
+                                    fontSize: '0.9rem',
+                                    border: '2px solid #d1d5db',
+                                    borderRadius: '6px',
+                                    backgroundColor: '#f9fafb',
+                                    cursor: 'pointer'
+                                  }}
+                                >
+                                  {filter.values?.map((value, valueIndex) => (
+                                    <option key={valueIndex} value={value}>
+                                      {value}
+                                    </option>
+                                  ))}
+                                </select>
+                              ) : (
+                                <div style={{ color: '#999', fontStyle: 'italic' }}>No values available</div>
+                              )}
+
+                              <div style={{ marginTop: '0.75rem' }}>
+                                <label
+                                  style={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    cursor: 'pointer',
+                                    fontWeight: 'normal'
+                                  }}
+                                >
+                                  <input
+                                    type='checkbox'
+                                    checked={state.hide}
+                                    onChange={e => handleHideToggle(filter.key, e.target.checked)}
+                                    style={{ marginRight: '0.5rem' }}
+                                  />
+                                  <span style={{ color: '#666' }}>Hide filter in embed</span>
+                                </label>
+                              </div>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </>
+                  )}
+
+                  {/* Preview Section - title only shown if there are filters */}
+                  {hasFilters && <h4 style={{ marginBottom: '1rem' }}>Preview</h4>}
+                  <p style={{ marginBottom: '1rem', color: '#666' }}>
+                    This shows how the visualization will appear on the partner website
+                    {hasFilters ? ' with your selected settings' : ''}. The partner will have control over the width of
+                    the embedded visualization. If you do not see the latest version of the visualization, save it and
+                    reopen this popup.
+                  </p>
+                  <div
+                    style={{
+                      border: '2px dashed #999',
+                      borderRadius: '4px',
+                      padding: '1rem'
+                    }}
+                  >
+                    <div
+                      key={`${configUrl}-${JSON.stringify(filterState)}`}
+                      data-cove-embed
+                      data-config-url={(() => {
+                        const urlParams = buildFilterUrlParams(filters, filterState)
+                        const params = new URLSearchParams()
+                        Object.entries(urlParams).forEach(([key, value]) => {
+                          if (value) params.set(key, value)
+                        })
+                        return params.toString() ? `${configUrl}?${params.toString()}` : configUrl || ''
+                      })()}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Embed Code Tab */}
+              {activeTab === 'code' && (
+                <div>
+                  <p style={{ marginBottom: '10px', color: '#666' }}>
+                    Copy this code and send it to a partner so they can add it to their site. Your visualization will
+                    need to be published to Link (www.cdc.gov) before it can be embedded by a partner.
+                  </p>
+                  <textarea
+                    readOnly
+                    value={embedCode}
+                    style={{
+                      width: '100%',
+                      height: '200px',
+                      fontFamily: 'monospace',
+                      fontSize: '0.85em',
+                      padding: '10px',
+                      border: '1px solid #ddd',
+                      borderRadius: '4px',
+                      resize: 'vertical',
+                      boxSizing: 'border-box'
+                    }}
+                    onFocus={e => e.target.select()}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Modal Footer */}
             <div
               className='modal-footer'
               style={{
@@ -267,9 +497,11 @@ export const EmbedEditor: React.FC<EmbedEditorProps> = ({ config }) => {
               <button className='btn btn-secondary' onClick={handleCloseModal}>
                 Close
               </button>
-              <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
-                {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
-              </button>
+              {activeTab === 'code' && (
+                <button className='btn btn-primary' onClick={handleCopyFromModal} style={{ minWidth: '120px' }}>
+                  {embedCodeCopied ? '✓ Copied!' : 'Copy to Clipboard'}
+                </button>
+              )}
             </div>
           </div>
         </div>

package/components/CustomColorsEditor/CustomColorsEditor.tsx

@@ -7,15 +7,13 @@ interface CustomColorsEditorProps {
   onChange: (colors: string[]) => void
   label?: string
   minColors?: number
-  maxColors?: number
 }
 
 const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
   colors = [],
   onChange,
   label = 'Custom Colors',
-  minColors = 1,
-  maxColors = 20
+  minColors = 1
 }) => {
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
 
@@ -26,11 +24,8 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
   }
 
   const handleAddColor = () => {
-    if (colors.length < maxColors) {
-      // Add a new color (default to the last color or a neutral color)
-      const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
-      onChange([...colors, defaultColor])
-    }
+    const defaultColor = colors.length > 0 ? colors[colors.length - 1] : '#3366cc'
+    onChange([...colors, defaultColor])
   }
 
   const handleRemoveColor = (index: number) => {
@@ -191,7 +186,6 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
       <button
         type="button"
         onClick={handleAddColor}
-        disabled={colors.length >= maxColors}
         className="btn-add-color"
       >
         + Add Color
@@ -200,7 +194,6 @@ const CustomColorsEditor: React.FC<CustomColorsEditorProps> = ({
       <div className="custom-colors-info">
         {colors.length} color{colors.length !== 1 ? 's' : ''}
         {colors.length < minColors && ` (minimum ${minColors} required)`}
-        {colors.length >= maxColors && ` (maximum reached)`}
       </div>
     </div>
   )

package/components/DataTable/helpers/getSeriesName.ts

@@ -16,6 +16,12 @@ export const getSeriesName = (column: string, config: TableConfig) => {
     return userDefinedSeries.name
   }
   if (config.runtimeSeriesLabels && config.runtimeSeriesLabels[column]) return config.runtimeSeriesLabels[column]
+
+  // For pie charts, use yAxis.label if the column is the yAxis data key
+  if (config.visualizationType === 'Pie' && column === config.yAxis?.dataKey && config.yAxis?.label) {
+    return config.yAxis.label
+  }
+
   const columnIsDataKey = column === config.xAxis?.dataKey
   const indexLabel = config.table?.indexLabel
   return columnIsDataKey && indexLabel ? indexLabel : getLabel(column, config)

package/components/EditorPanel/VizFilterEditor/NestedDropdownEditor.tsx

@@ -16,6 +16,7 @@ type NestedDropdownEditorProps = {
   updateField: Function
   updateFilterStyle: Function
   handleGroupingCustomOrder: (index1: number, index2: number) => void
+  onNestedDragAreaHover?: (isHovering: boolean) => void
 }
 
 const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
@@ -25,7 +26,8 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
   handleNameChange: handleGroupColumnNameChange,
   filterIndex,
   rawData,
-  updateField
+  updateField,
+  onNestedDragAreaHover
 }) => {
   const filter = config.filters[filterIndex]
   const subGrouping = filter?.subGrouping
@@ -159,7 +161,10 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
       <Select
         label='Filter Grouping'
         value={filter.columnName}
-        options={[{ value: '', label: '- Select Option -' }, ...columnNameOptions.map(opt => ({ value: opt, label: opt }))]}
+        options={[
+          { value: '', label: '- Select Option -' },
+          ...columnNameOptions.map(opt => ({ value: opt, label: opt }))
+        ]}
         onChange={e => handleGroupColumnNameChange(e.target.value)}
       />
 
@@ -168,9 +173,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
         value={subGrouping?.columnName ?? ''}
         options={[
           { value: '', label: '- Select Option -' },
-          ...columnNameOptions
-            .filter(option => option !== filter.columnName)
-            .map(opt => ({ value: opt, label: opt }))
+          ...columnNameOptions.filter(option => option !== filter.columnName).map(opt => ({ value: opt, label: opt }))
         ]}
         onChange={e => {
           handleSubGroupColumnNameChange(e.target.value)
@@ -222,7 +225,11 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
           onChange={e => handleGroupingOrderBy(e.target.value as OrderBy)}
         />
         {filter.order === 'cust' && (
-          <FilterOrder orderedValues={filter.orderedValues} handleFilterOrder={handleGroupingCustomOrder} />
+          <FilterOrder
+            orderedValues={filter.orderedValues}
+            handleFilterOrder={handleGroupingCustomOrder}
+            onNestedDragAreaHover={onNestedDragAreaHover}
+          />
         )}
       </div>
 
@@ -247,6 +254,7 @@ const NestedDropdownEditor: React.FC<NestedDropdownEditorProps> = ({
                     handleFilterOrder={(sourceIndex, destinationIndex) => {
                       handleSubGroupingCustomOrder(sourceIndex, destinationIndex, orderedSubGroupValues, groupName)
                     }}
+                    onNestedDragAreaHover={onNestedDragAreaHover}
                   />
                 </div>
               )

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -25,6 +25,7 @@ type VizFilterProps = {
 
 const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawData, hasFootnotes }) => {
   const openControls = useState({})
+  const [isNestedDragHovered, setIsNestedDragHovered] = useState(false)
   const dataColumns = useMemo(() => {
     return _.uniq(_.flatten(rawData?.map(row => Object.keys(row))))
   }, [rawData])
@@ -196,6 +197,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                         key={filter.id || `filter-${filterIndex}`}
                         draggableId={`filter-${filter.id || filterIndex}`}
                         index={filterIndex}
+                        isDragDisabled={isNestedDragHovered}
                       >
                         {(provided, snapshot) => (
                           <div
@@ -305,6 +307,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                                       handleFilterOrder={(index1, index2) =>
                                         handleFilterOrder(index1, index2, filterIndex)
                                       }
+                                      onNestedDragAreaHover={setIsNestedDragHovered}
                                     />
                                   )}
                                   {filter.order === 'column' && (
@@ -354,6 +357,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
                                   handleNameChange={value => handleNameChange(filterIndex, value)}
                                   updateField={updateField}
                                   updateFilterStyle={updateFilterStyle}
+                                  onNestedDragAreaHover={setIsNestedDragHovered}
                                 />
                               )}
                               {hasFootnotes && (