chordia-ui 3.7.0 → 3.7.2

package/src/components/chat/ChartRenderer.jsx

@@ -25,17 +25,116 @@ const AXIS_TICK = { fill: 'var(--text-muted, #666)', fontSize: 12 };
 const AXIS_LINE = { stroke: 'var(--border, #e0e0e0)' };
 const GRID_STROKE = 'var(--border, #e0e0e0)';
 const TOOLTIP_STYLE = {
-  contentStyle: {
-    backgroundColor: 'var(--paper-elevated, #fff)',
-    border: '1px solid var(--border, #e0e0e0)',
-    borderRadius: 'var(--radius-sm, 4px)',
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-    color: 'var(--text-ink, #1e2125)',
+  // pointerEvents: 'none' is critical — without it, the tooltip steals hover from chart elements
+  // and flickers (especially noticeable on pie slices).
+  // transition: 'none' disables Recharts' default position-slide animation, so the tooltip
+  // snaps to the active point instead of flying in from its previous location.
+  wrapperStyle: {
+    zIndex: 9999,
+    pointerEvents: 'none',
+    outline: 'none',
+    transition: 'none',
   },
-  labelStyle: { color: 'var(--text-strong, #1e2125)' },
 };
 const LEGEND_STYLE = { color: 'var(--text-ink, #1e2125)', fontSize: '12px' };
 
+// Custom tooltip with a clean light-bg card layout.
+// Each row has a colored dot (the series color) + dark text — always readable, no contrast tricks.
+const ChartTooltip = ({ active, payload, label }) => {
+  if (!active || !payload || !payload.length) return null;
+  return (
+    <div
+      className="chordia-chart-tooltip"
+      style={{
+        background: '#ffffff',
+        border: '1px solid rgba(52, 58, 64, 0.12)',
+        borderRadius: 8,
+        boxShadow: '0 8px 24px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06)',
+        padding: '10px 12px',
+        minWidth: 140,
+        maxWidth: 280,
+        maxHeight: 280,
+        overflowY: 'auto',
+        fontSize: 12,
+        lineHeight: 1.5,
+        color: '#1E2125',
+        // Re-enable pointer events on the inner content so the user can scroll with the wheel
+        // even though the wrapper above has pointerEvents: 'none' (which prevents hover flicker).
+        pointerEvents: 'auto',
+      }}
+    >
+      <style>{`
+        .chordia-chart-tooltip::-webkit-scrollbar { width: 8px; }
+        .chordia-chart-tooltip::-webkit-scrollbar-track { background: transparent; }
+        .chordia-chart-tooltip::-webkit-scrollbar-thumb {
+          background: rgba(52, 58, 64, 0.25);
+          border-radius: 4px;
+        }
+        .chordia-chart-tooltip::-webkit-scrollbar-thumb:hover {
+          background: rgba(52, 58, 64, 0.4);
+        }
+      `}</style>
+      {label !== undefined && label !== '' && (
+        <div
+          style={{
+            fontSize: 11,
+            fontWeight: 600,
+            letterSpacing: '0.02em',
+            color: '#6B7280',
+            textTransform: 'uppercase',
+            marginBottom: 6,
+            paddingBottom: 6,
+            borderBottom: '1px solid rgba(52, 58, 64, 0.08)',
+          }}
+        >
+          {label}
+        </div>
+      )}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {payload.map((entry, i) => {
+          const seriesColor = entry.color || entry.payload?.fill || '#9CA3AF';
+          return (
+            <div
+              key={i}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+                justifyContent: 'space-between',
+              }}
+            >
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                <span
+                  style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: '50%',
+                    background: seriesColor,
+                    flexShrink: 0,
+                  }}
+                />
+                <span
+                  style={{
+                    color: '#374151',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {entry.name}
+                </span>
+              </div>
+              <span style={{ color: '#111827', fontWeight: 600, marginLeft: 8 }}>
+                {entry.value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
 // Smart label: skip x_label if tick values already contain the label text
 const shouldShowAxisLabel = (label, tickValues) => {
   if (!label) return false;
@@ -46,21 +145,112 @@ const shouldShowAxisLabel = (label, tickValues) => {
 };
 
 // --- Export utilities ---
-const downloadPng = async (containerEl, title) => {
-  const svg = containerEl.querySelector('svg');
+const getChartSvg = (containerEl) => {
+  const wrappers = Array.from(containerEl.querySelectorAll('.recharts-wrapper'));
+  const largestWrapper = wrappers.length
+    ? wrappers.reduce((largest, current) => {
+      const largestRect = largest.getBoundingClientRect();
+      const currentRect = current.getBoundingClientRect();
+      return (currentRect.width * currentRect.height) > (largestRect.width * largestRect.height)
+        ? current
+        : largest;
+    })
+    : null;
+
+  if (largestWrapper) {
+    const surface = largestWrapper.querySelector('svg.recharts-surface');
+    if (surface) {
+      const rect = surface.getBoundingClientRect();
+      if (rect.width >= 100 && rect.height >= 100) return surface;
+    }
+  }
+
+  // Fallback: pick the largest SVG so we don't accidentally export icon SVGs.
+  const candidates = Array.from(containerEl.querySelectorAll('svg'));
+  if (!candidates.length) return null;
+
+  const largestSvg = candidates.reduce((largest, current) => {
+    const largestRect = largest.getBoundingClientRect();
+    const currentRect = current.getBoundingClientRect();
+    return (currentRect.width * currentRect.height) > (largestRect.width * largestRect.height)
+      ? current
+      : largest;
+  });
+
+  const largestRect = largestSvg.getBoundingClientRect();
+  if (largestRect.width < 100 || largestRect.height < 100) return null;
+
+  return largestSvg;
+};
+
+const escapeXml = (value) => String(value)
+  .replace(/&/g, '&amp;')
+  .replace(/</g, '&lt;')
+  .replace(/>/g, '&gt;')
+  .replace(/"/g, '&quot;')
+  .replace(/'/g, '&apos;');
+
+const buildExportSvg = ({ chartSvg, width, height, legendItems = [] }) => {
+  const baseSvg = chartSvg.cloneNode(true);
+  const legendLineHeight = 20;
+  const legendStartX = 16;
+  const legendRightPadding = 16;
+  const maxLegendX = width - legendRightPadding;
+  const legendRows = [];
+  let currentRow = [];
+  let currentRowWidth = 0;
+
+  legendItems.forEach(({ label, color }) => {
+    const itemWidth = Math.max(40, (String(label).length * 7) + 34);
+    if (currentRow.length && (legendStartX + currentRowWidth + itemWidth > maxLegendX)) {
+      legendRows.push(currentRow);
+      currentRow = [];
+      currentRowWidth = 0;
+    }
+    currentRow.push({ label, color, itemWidth });
+    currentRowWidth += itemWidth;
+  });
+  if (currentRow.length) legendRows.push(currentRow);
+
+  const exportLegendHeight = legendRows.length ? (legendRows.length * legendLineHeight) + 20 : 0;
+  const exportHeight = height + exportLegendHeight;
+
+  baseSvg.setAttribute('width', width);
+  baseSvg.setAttribute('height', height);
+  baseSvg.setAttribute('x', 0);
+  baseSvg.setAttribute('y', 0);
+
+  const legendMarkup = legendRows.map((row, rowIndex) => {
+    let cursorX = legendStartX;
+    const legendLineY = height + 20 + (rowIndex * legendLineHeight);
+    const rowMarkup = row.map(({ label, color, itemWidth }) => {
+      const line = `<line x1="${cursorX}" y1="${legendLineY}" x2="${cursorX + 10}" y2="${legendLineY}" stroke="${color}" stroke-width="2" />`;
+      const dot = `<circle cx="${cursorX + 5}" cy="${legendLineY}" r="2.5" fill="#fff" stroke="${color}" stroke-width="1.5" />`;
+      const text = `<text x="${cursorX + 14}" y="${legendLineY + 4}" fill="#666" font-size="12">${escapeXml(label)}</text>`;
+      cursorX += itemWidth;
+      return `${line}${dot}${text}`;
+    }).join('');
+    return rowMarkup;
+  }).join('');
+
+  return [
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${exportHeight}" viewBox="0 0 ${width} ${exportHeight}">`,
+    '<style>text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }</style>',
+    '<rect x="0" y="0" width="100%" height="100%" fill="#ffffff" />',
+    new XMLSerializer().serializeToString(baseSvg),
+    legendMarkup,
+    '</svg>',
+  ].join('');
+};
+
+const downloadPng = async (containerEl, title, legendItems = []) => {
+  const svg = getChartSvg(containerEl);
   if (!svg) return;
-  const clone = svg.cloneNode(true);
   // Ensure dimensions
-  const w = svg.clientWidth || 600;
-  const h = svg.clientHeight || 300;
-  clone.setAttribute('width', w);
-  clone.setAttribute('height', h);
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-  // Inline computed styles for export fidelity
-  const styleEl = document.createElement('style');
-  styleEl.textContent = `text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }`;
-  clone.insertBefore(styleEl, clone.firstChild);
-  const xml = new XMLSerializer().serializeToString(clone);
+  const svgRect = svg.getBoundingClientRect();
+  const w = svgRect.width || svg.clientWidth || Number(svg.getAttribute('width')) || 600;
+  const h = svgRect.height || svg.clientHeight || Number(svg.getAttribute('height')) || 300;
+  const xml = buildExportSvg({ chartSvg: svg, width: w, height: h, legendItems });
   const blob = new Blob([xml], { type: 'image/svg+xml;charset=utf-8' });
   const url = URL.createObjectURL(blob);
   const img = new Image();
@@ -83,6 +273,23 @@ const downloadPng = async (containerEl, title) => {
   img.src = url;
 };
 
+const downloadSvg = (containerEl, title, legendItems = []) => {
+  const svg = getChartSvg(containerEl);
+  if (!svg) return;
+  const svgRect = svg.getBoundingClientRect();
+  const w = svgRect.width || svg.clientWidth || Number(svg.getAttribute('width')) || 600;
+  const h = svgRect.height || svg.clientHeight || Number(svg.getAttribute('height')) || 300;
+
+  const xml = buildExportSvg({ chartSvg: svg, width: w, height: h, legendItems });
+  const blob = new Blob([xml], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.download = `${(title || 'chart').replace(/[^a-z0-9]+/gi, '_')}.svg`;
+  link.href = url;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+};
+
 const copyAsCsv = (series, allXValues) => {
   const header = ['', ...series.map(s => s.name)].join(',');
   const rows = allXValues.map(x => {
@@ -96,7 +303,7 @@ const copyAsCsv = (series, allXValues) => {
   navigator.clipboard.writeText(csv);
 };
 
-const ActionBar = ({ onDownload, onCopy, copied }) => (
+const ActionBar = ({ onDownloadPng, onCopy, copied }) => (
   <div style={{
     display: 'flex', gap: 6, justifyContent: 'flex-end',
     marginBottom: 8, opacity: 0.7, transition: 'opacity 0.15s',
@@ -109,7 +316,7 @@ const ActionBar = ({ onDownload, onCopy, copied }) => (
     }}>
       {copied ? '✓ Copied' : '📋 CSV'}
     </button>
-    <button onClick={onDownload} title="Download as PNG" style={{
+    <button onClick={onDownloadPng} title="Download as PNG" style={{
       background: 'none', border: '1px solid var(--border, #e0e0e0)',
       borderRadius: 'var(--radius-sm, 4px)', padding: '3px 8px',
       fontSize: 11, color: 'var(--text-muted, #666)', cursor: 'pointer',
@@ -120,7 +327,7 @@ const ActionBar = ({ onDownload, onCopy, copied }) => (
   </div>
 );
 
-const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
+const ChartRenderer = ({ chartType, title, xLabel, yLabel, series, compact = false }) => {
   const chartRef = useRef(null);
   const [copied, setCopied] = React.useState(false);
 
@@ -142,12 +349,35 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
 
   // Determine if axis labels are redundant
   const showXLabel = shouldShowAxisLabel(xLabel, allXValues);
-  const bottomMargin = showXLabel ? 20 : 5;
 
   // Check if x-axis labels are long (rotate them)
   const maxTickLen = Math.max(...allXValues.map(v => String(v).length));
   const rotateXTicks = maxTickLen > 12 || allXValues.length > 8;
 
+  // Bottom margin: stack space for tick labels + the axis label so they don't overlap
+  const xTickSpace = rotateXTicks ? 40 : 5;
+  const xLabelSpace = showXLabel ? 25 : 0;
+  const bottomMargin = xTickSpace + xLabelSpace;
+
+  // Estimate legend rows so we can reserve enough vertical space for it. Recharts
+  // doesn't auto-detect wrapping, so a multi-row legend collides with the x-axis label.
+  // Conservative estimate: ~4 items per row.
+  const legendRows = isSingleSeries ? 0 : Math.max(1, Math.ceil(seriesNames.length / 4));
+  const legendHeight = legendRows > 0 ? legendRows * 24 + (showXLabel ? 24 : 12) : 0;
+
+  // Bump chart container height so the wrapped legend gets its own space below the chart
+  // SVG instead of overlapping the x-axis label.
+  // In compact mode (e.g. AskCompass panel), shrink the base height so charts feel proportional
+  // to the smaller surface they're rendered in.
+  const baseChartHeight = compact ? 240 : 300;
+  const chartHeight = baseChartHeight + Math.max(0, (legendRows - 1) * 28);
+
+  // Always keep a gap between the x-axis (or its label) and the legend.
+  // Extra padding when an x-label is also present so all three layers (ticks → label → legend) breathe.
+  // zIndex: 0 ensures the legend never paints over the tooltip (which is zIndex: 1000).
+  const legendPaddingTop = showXLabel ? 24 : 12;
+  const legendWrapperStyle = { ...LEGEND_STYLE, paddingTop: legendPaddingTop, zIndex: 0 };
+
   const containerStyle = {
     background: 'var(--paper-elevated, #fff)',
     border: '1px solid var(--border, #e0e0e0)',
@@ -171,7 +401,13 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
     axisLine: AXIS_LINE,
     tickLine: AXIS_LINE,
     ...(showXLabel ? {
-      label: { value: xLabel, position: 'insideBottom', offset: -10, style: { textAnchor: 'middle', fill: 'var(--text-muted, #666)' } }
+      label: {
+        value: xLabel,
+        position: 'insideBottom',
+        // Push label below rotated ticks (which take ~40px) when present
+        offset: rotateXTicks ? -45 : -10,
+        style: { textAnchor: 'middle', fill: 'var(--text-muted, #666)' },
+      },
     } : {}),
   };
 
@@ -180,7 +416,14 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
     axisLine: AXIS_LINE,
     tickLine: AXIS_LINE,
     ...(yLabel ? {
-      label: { value: yLabel, angle: -90, position: 'insideLeft', style: { textAnchor: 'middle', fill: 'var(--text-muted, #666)' } }
+      width: 72,
+      label: {
+        value: yLabel,
+        angle: -90,
+        position: 'insideLeft',
+        offset: 10,
+        style: { textAnchor: 'middle', fill: 'var(--text-muted, #666)' },
+      },
     } : {}),
   };
 
@@ -188,13 +431,12 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
     switch (chartType) {
       case 'bar':
         return (
-          <ResponsiveContainer width="100%" height={300}>
-            <BarChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: rotateXTicks ? 40 : bottomMargin }}>
+          <ResponsiveContainer width="100%" height={chartHeight}>
+            <BarChart data={chartData} margin={{ top: 5, right: 30, left: yLabel ? 10 : 20, bottom: bottomMargin }}>
               <CartesianGrid strokeDasharray="3 3" stroke={GRID_STROKE} />
               <XAxis {...xAxisProps} />
               <YAxis {...yAxisProps} />
-              <Tooltip {...TOOLTIP_STYLE} />
-              {!isSingleSeries && <Legend wrapperStyle={LEGEND_STYLE} />}
+              {!isSingleSeries && <Legend wrapperStyle={legendWrapperStyle} height={legendHeight} />}
               {seriesNames.map((name, i) => (
                 <Bar key={name} dataKey={name} fill={COLORS[i % COLORS.length]} radius={[2, 2, 0, 0]} isAnimationActive={false}>
                   {isSingleSeries && chartData.map((_, idx) => (
@@ -202,6 +444,7 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
                   ))}
                 </Bar>
               ))}
+              <Tooltip wrapperStyle={TOOLTIP_STYLE.wrapperStyle} content={<ChartTooltip />} cursor={{ fill: 'rgba(94, 136, 176, 0.06)', stroke: 'rgba(52, 58, 64, 0.18)', strokeDasharray: '3 3' }} isAnimationActive={false} animationDuration={0} />
             </BarChart>
           </ResponsiveContainer>
         );
@@ -209,15 +452,14 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
       case 'horizontal_bar': {
         // Horizontal bar: swap X/Y, use YAxis for categories
         return (
-          <ResponsiveContainer width="100%" height={Math.max(300, chartData.length * 40)}>
+          <ResponsiveContainer width="100%" height={Math.max(compact ? 240 : 300, chartData.length * (compact ? 32 : 40))}>
             <BarChart data={chartData} layout="vertical" margin={{ top: 5, right: 30, left: 100, bottom: 5 }}>
               <CartesianGrid strokeDasharray="3 3" stroke={GRID_STROKE} />
               <XAxis type="number" tick={AXIS_TICK} axisLine={AXIS_LINE} tickLine={AXIS_LINE}
                 {...(yLabel ? { label: { value: yLabel, position: 'insideBottom', offset: -5, style: { textAnchor: 'middle', fill: 'var(--text-muted, #666)' } } } : {})}
               />
               <YAxis type="category" dataKey="x" tick={{ fill: 'var(--text-muted, #666)', fontSize: 11 }} width={90} axisLine={AXIS_LINE} tickLine={AXIS_LINE} />
-              <Tooltip {...TOOLTIP_STYLE} />
-              {!isSingleSeries && <Legend wrapperStyle={LEGEND_STYLE} />}
+              {!isSingleSeries && <Legend wrapperStyle={legendWrapperStyle} height={legendHeight} />}
               {seriesNames.map((name, i) => (
                 <Bar key={name} dataKey={name} fill={COLORS[i % COLORS.length]} radius={[0, 2, 2, 0]} isAnimationActive={false}>
                   {isSingleSeries && chartData.map((_, idx) => (
@@ -225,6 +467,7 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
                   ))}
                 </Bar>
               ))}
+              <Tooltip wrapperStyle={TOOLTIP_STYLE.wrapperStyle} content={<ChartTooltip />} cursor={{ fill: 'rgba(94, 136, 176, 0.06)', stroke: 'rgba(52, 58, 64, 0.18)', strokeDasharray: '3 3' }} isAnimationActive={false} animationDuration={0} />
             </BarChart>
           </ResponsiveContainer>
         );
@@ -232,13 +475,12 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
 
       case 'line':
         return (
-          <ResponsiveContainer width="100%" height={300}>
-            <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: rotateXTicks ? 40 : bottomMargin }}>
+          <ResponsiveContainer width="100%" height={chartHeight}>
+            <LineChart data={chartData} margin={{ top: 5, right: 30, left: yLabel ? 10 : 20, bottom: bottomMargin }}>
               <CartesianGrid strokeDasharray="3 3" stroke={GRID_STROKE} />
               <XAxis {...xAxisProps} />
               <YAxis {...yAxisProps} />
-              <Tooltip {...TOOLTIP_STYLE} />
-              <Legend wrapperStyle={LEGEND_STYLE} />
+              <Legend wrapperStyle={legendWrapperStyle} height={legendHeight} />
               {seriesNames.map((name, i) => (
                 <Line key={name} type="monotone" dataKey={name}
                   stroke={COLORS[i % COLORS.length]} strokeWidth={2}
@@ -247,19 +489,19 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
                   isAnimationActive={false}
                 />
               ))}
+              <Tooltip wrapperStyle={TOOLTIP_STYLE.wrapperStyle} content={<ChartTooltip />} cursor={{ fill: 'rgba(94, 136, 176, 0.06)', stroke: 'rgba(52, 58, 64, 0.18)', strokeDasharray: '3 3' }} isAnimationActive={false} animationDuration={0} />
             </LineChart>
           </ResponsiveContainer>
         );
 
       case 'area':
         return (
-          <ResponsiveContainer width="100%" height={300}>
-            <AreaChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: rotateXTicks ? 40 : bottomMargin }}>
+          <ResponsiveContainer width="100%" height={chartHeight}>
+            <AreaChart data={chartData} margin={{ top: 5, right: 30, left: yLabel ? 10 : 20, bottom: bottomMargin }}>
               <CartesianGrid strokeDasharray="3 3" stroke={GRID_STROKE} />
               <XAxis {...xAxisProps} />
               <YAxis {...yAxisProps} />
-              <Tooltip {...TOOLTIP_STYLE} />
-              <Legend wrapperStyle={LEGEND_STYLE} />
+              <Legend wrapperStyle={legendWrapperStyle} height={legendHeight} />
               {seriesNames.map((name, i) => (
                 <Area key={name} type="monotone" dataKey={name}
                   stroke={COLORS[i % COLORS.length]} strokeWidth={2}
@@ -267,6 +509,7 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
                   isAnimationActive={false}
                 />
               ))}
+              <Tooltip wrapperStyle={TOOLTIP_STYLE.wrapperStyle} content={<ChartTooltip />} cursor={{ fill: 'rgba(94, 136, 176, 0.06)', stroke: 'rgba(52, 58, 64, 0.18)', strokeDasharray: '3 3' }} isAnimationActive={false} animationDuration={0} />
             </AreaChart>
           </ResponsiveContainer>
         );
@@ -292,16 +535,16 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
           );
         };
         return (
-          <ResponsiveContainer width="100%" height={320}>
-            <PieChart>
-              <Pie data={pieData} cx="50%" cy="50%" outerRadius={100}
+          <ResponsiveContainer width="100%" height={compact ? 260 : 320}>
+            <PieChart margin={{ top: 16, right: 16, bottom: 16, left: 16 }}>
+              <Pie data={pieData} cx={compact ? "42%" : "38%"} cy="50%" outerRadius={compact ? 88 : 110}
                 dataKey="value" label={renderLabel} labelLine={{ stroke: 'var(--text-muted, #666)' }}
                 isAnimationActive={false}>
                 {pieData.map((entry, i) => (
                   <Cell key={i} fill={entry.fill} />
                 ))}
               </Pie>
-              <Tooltip {...TOOLTIP_STYLE} />
+              <Tooltip wrapperStyle={TOOLTIP_STYLE.wrapperStyle} content={<ChartTooltip />} cursor={{ fill: 'rgba(94, 136, 176, 0.06)', stroke: 'rgba(52, 58, 64, 0.18)', strokeDasharray: '3 3' }} isAnimationActive={false} animationDuration={0} />
             </PieChart>
           </ResponsiveContainer>
         );
@@ -367,9 +610,17 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
     }
   };
 
-  const handleDownload = useCallback(() => {
-    if (chartRef.current) downloadPng(chartRef.current, title);
-  }, [title]);
+  const showLegendInExport = chartType === 'line'
+    || chartType === 'area'
+    || ((chartType === 'bar' || chartType === 'horizontal_bar') && !isSingleSeries);
+
+  const exportLegendItems = showLegendInExport
+    ? seriesNames.map((name, i) => ({ label: name, color: COLORS[i % COLORS.length] }))
+    : [];
+
+  const handleDownloadPng = useCallback(() => {
+    if (chartRef.current) downloadPng(chartRef.current, title, exportLegendItems);
+  }, [title, exportLegendItems]);
 
   const handleCopy = useCallback(() => {
     copyAsCsv(series, allXValues);
@@ -382,7 +633,7 @@ const ChartRenderer = ({ chartType, title, xLabel, yLabel, series }) => {
   return (
     <div style={containerStyle}>
       {title && <div style={titleStyle}>{title}</div>}
-      {showActions && <ActionBar onDownload={handleDownload} onCopy={handleCopy} copied={copied} />}
+      {showActions && <ActionBar onDownloadPng={handleDownloadPng} onCopy={handleCopy} copied={copied} />}
       <div ref={chartRef}>
         {renderChart()}
       </div>