@diagrammo/dgmo 0.8.8 → 0.8.9

package/dist/index.js

@@ -5334,52 +5334,26 @@ function buildChartCommons(parsed, palette, isDark) {
       fontFamily: FONT_FAMILY
     }
   } : void 0;
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text }
-  };
   return {
     textColor,
     axisLineColor,
     splitLineColor,
     gridOpacity,
     colors,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   };
 }
 function buildExtendedChartOption(parsed, palette, isDark) {
   if (parsed.error) {
     return {};
   }
-  const {
-    textColor,
-    axisLineColor,
-    gridOpacity,
-    colors,
-    titleConfig,
-    tooltipTheme
-  } = buildChartCommons(parsed, palette, isDark);
+  const { textColor, axisLineColor, gridOpacity, colors, titleConfig } = buildChartCommons(parsed, palette, isDark);
   if (parsed.type === "sankey") {
-    return buildSankeyOption(
-      parsed,
-      textColor,
-      colors,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildSankeyOption(parsed, textColor, colors, titleConfig);
   }
   if (parsed.type === "chord") {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildChordOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildChordOption(parsed, textColor, colors, bg, titleConfig);
   }
   if (parsed.type === "function") {
     return buildFunctionOption(
@@ -5389,8 +5363,7 @@ function buildExtendedChartOption(parsed, palette, isDark) {
       axisLineColor,
       gridOpacity,
       colors,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
   if (parsed.type === "scatter") {
@@ -5403,20 +5376,12 @@ function buildExtendedChartOption(parsed, palette, isDark) {
       gridOpacity,
       colors,
       bg,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
   if (parsed.type === "funnel") {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildFunnelOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildFunnelOption(parsed, textColor, colors, bg, titleConfig);
   }
   return buildHeatmapOption(
     parsed,
@@ -5424,11 +5389,10 @@ function buildExtendedChartOption(parsed, palette, isDark) {
     isDark,
     textColor,
     axisLineColor,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   );
 }
-function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme) {
+function buildSankeyOption(parsed, textColor, colors, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5447,17 +5411,15 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      show: false,
-      ...tooltipTheme
-    },
     series: [
       {
         type: "sankey",
         emphasis: {
           focus: "adjacency",
-          blurScope: "global"
+          blurScope: "global",
+          itemStyle: { opacity: 1 }
         },
+        blur: BLUR_DIM,
         nodeAlign: "left",
         nodeGap: 12,
         nodeWidth: 20,
@@ -5480,7 +5442,7 @@ function buildSankeyOption(parsed, textColor, colors, titleConfig, tooltipTheme)
     ]
   };
 }
-function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildChordOption(parsed, textColor, colors, bg, titleConfig) {
   const nodeSet = /* @__PURE__ */ new Set();
   if (parsed.links) {
     for (const link of parsed.links) {
@@ -5514,17 +5476,6 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipThe
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        if (p.data && p.data.source && p.data.target) {
-          return `${p.data.source} \u2192 ${p.data.target}: ${p.data.value}`;
-        }
-        return "";
-      }
-    },
     xAxis: { show: false },
     yAxis: { show: false },
     series: [
@@ -5583,11 +5534,13 @@ function buildChordOption(parsed, textColor, colors, bg, titleConfig, tooltipThe
         },
         emphasis: {
           focus: "adjacency",
+          itemStyle: { opacity: 1 },
           lineStyle: {
             width: 5,
             opacity: 1
           }
-        }
+        },
+        blur: BLUR_DIM
       }
     ]
   };
@@ -5601,7 +5554,7 @@ function evaluateExpression(expr, x) {
     return NaN;
   }
 }
-function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig, tooltipTheme) {
+function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, titleConfig) {
   const xRange = parsed.xRange ?? { min: -10, max: 10 };
   const samples = 200;
   const step = (xRange.max - xRange.min) / samples;
@@ -5634,19 +5587,13 @@ function buildFunctionOption(parsed, palette, textColor, axisLineColor, gridOpac
           opacity: 0.15
         }
       },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SELF,
+      blur: BLUR_DIM
     };
   });
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: {
-        type: "cross"
-      }
-    },
     legend: {
       data: (parsed.functions ?? []).map((fn) => fn.name),
       bottom: 10,
@@ -5895,7 +5842,7 @@ function dataToPixel(dataX, dataY, xMin, xMax, yMin, yMax, gridLeftPct, gridRigh
   const py = gridTopPx + (yMax - dataY) / (yMax - yMin) * plotHeight;
   return { px, py };
 }
-function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme) {
+function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpacity, colors, bg, titleConfig) {
   const points = parsed.scatterPoints ?? [];
   const defaultSize = 15;
   const hasCategories = points.some((p) => p.category !== void 0);
@@ -5911,11 +5858,9 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
   };
   const emphasisConfig = {
     focus: "self",
-    itemStyle: {
-      shadowBlur: 10,
-      shadowColor: "rgba(0, 0, 0, 0.3)"
-    }
+    itemStyle: { opacity: 1 }
   };
+  const blurConfig = BLUR_DIM;
   let series;
   if (hasCategories) {
     const categories2 = [
@@ -5946,7 +5891,8 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
           borderWidth: CHART_BORDER_WIDTH
         },
         label: labelConfig,
-        emphasis: emphasisConfig
+        emphasis: emphasisConfig,
+        blur: blurConfig
       };
     });
   } else {
@@ -5968,24 +5914,11 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
         type: "scatter",
         data,
         label: labelConfig,
-        emphasis: emphasisConfig
+        emphasis: emphasisConfig,
+        blur: blurConfig
       }
     ];
   }
-  const tooltip = {
-    trigger: "item",
-    ...tooltipTheme,
-    formatter: (params) => {
-      const p = params;
-      const xLabel = parsed.xlabel || "x";
-      const yLabel = parsed.ylabel || "y";
-      let html = `<strong>${p.name}</strong>`;
-      if (hasCategories) html += `<br/>${p.seriesName}`;
-      html += `<br/>${xLabel}: ${p.value[0]}<br/>${yLabel}: ${p.value[1]}`;
-      if (hasSize) html += `<br/>${parsed.sizelabel || "size"}: ${p.value[2]}`;
-      return html;
-    }
-  };
   const xValues = points.map((p) => p.x);
   const yValues = points.map((p) => p.y);
   const xMin = Math.min(...xValues);
@@ -6066,7 +5999,6 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
     ...CHART_BASE,
     title: titleConfig,
     ...legendConfig && { legend: legendConfig },
-    tooltip,
     grid: {
       left: `${gridLeft}%`,
       right: `${gridRight}%`,
@@ -6128,7 +6060,7 @@ function buildScatterOption(parsed, palette, textColor, axisLineColor, gridOpaci
     ...graphic && { graphic }
   };
 }
-function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig, tooltipTheme) {
+function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, titleConfig) {
   const bg = isDark ? palette.surface : palette.bg;
   const heatmapRows = parsed.heatmapRows ?? [];
   const columns = parsed.columns ?? [];
@@ -6146,16 +6078,6 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        const colName = columns[p.data[0]] ?? p.data[0];
-        const rowName = rowLabels[p.data[1]] ?? p.data[1];
-        return `${rowName} / ${colName}: <strong>${p.data[2]}</strong>`;
-      }
-    },
     grid: {
       left: "3%",
       right: "10%",
@@ -6225,19 +6147,15 @@ function buildHeatmapOption(parsed, palette, isDark, textColor, axisLineColor, t
           fontWeight: "bold"
         },
         emphasis: {
-          ...EMPHASIS_SELF,
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: "rgba(0, 0, 0, 0.5)"
-          }
-        }
+          ...EMPHASIS_SELF
+        },
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildFunnelOption(parsed, textColor, colors, bg, titleConfig) {
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
-  const topValue = sorted.length > 0 ? sorted[0].value : 1;
   const data = sorted.map((d) => {
     const stroke2 = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
     return {
@@ -6272,25 +6190,6 @@ function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTh
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme,
-      formatter: (params) => {
-        const p = params;
-        const val = p.value;
-        const prev = prevValueMap.get(p.name) ?? val;
-        const isFirst = p.dataIndex === 0;
-        if (isFirst) return "";
-        const parts = [];
-        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-        parts.push(`Step drop-off: ${stepDrop}%`);
-        if (topValue > 0) {
-          const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          parts.push(`Overall drop-off: ${totalDrop}%`);
-        }
-        return parts.join("<br/>");
-      }
-    },
     series: [
       {
         type: "funnel",
@@ -6308,11 +6207,9 @@ function buildFunnelOption(parsed, textColor, colors, bg, titleConfig, tooltipTh
           lineStyle: { color: textColor, opacity: 0.3 }
         },
         emphasis: {
-          ...EMPHASIS_SELF,
-          label: {
-            fontSize: 15
-          }
+          ...EMPHASIS_SELF
         },
+        blur: BLUR_DIM,
         data
       },
       {
@@ -6406,8 +6303,7 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
     splitLineColor,
     gridOpacity,
     colors,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   } = buildChartCommons(parsed, palette, isDark);
   const bg = isDark ? palette.surface : palette.bg;
   switch (parsed.type) {
@@ -6421,7 +6317,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "bar-stacked":
@@ -6434,7 +6329,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "line":
@@ -6447,7 +6341,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         gridOpacity,
         colors,
         titleConfig,
-        tooltipTheme,
         chartWidth
       ) : buildLineOption(
         parsed,
@@ -6457,7 +6350,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         splitLineColor,
         gridOpacity,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "area":
@@ -6469,7 +6361,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         splitLineColor,
         gridOpacity,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case "pie":
@@ -6479,7 +6370,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         false
       );
     case "doughnut":
@@ -6489,7 +6379,6 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         true
       );
     case "radar":
@@ -6499,8 +6388,7 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         isDark,
         textColor,
         gridOpacity,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
     case "polar-area":
       return buildPolarAreaOption(
@@ -6508,21 +6396,36 @@ function buildSimpleChartOption(parsed, palette, isDark, chartWidth) {
         textColor,
         getSegmentColors(palette, parsed.data.length),
         bg,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
   }
 }
 function makeChartGrid(options) {
+  const left = options.yLabel ? "12%" : "3%";
   return {
-    left: options.yLabel ? "12%" : "3%",
+    left,
     right: "4%",
     bottom: options.hasLegend ? "15%" : options.xLabel ? "10%" : "3%",
     top: options.hasTitle ? "15%" : "5%",
     containLabel: true
   };
 }
-function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
+function wrapLabel(text, maxChars) {
+  const words = text.split(" ");
+  const lines = [];
+  let current = "";
+  for (const word of words) {
+    if (current && current.length + 1 + word.length > maxChars) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = current ? current + " " + word : word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines.join("\n");
+}
+function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const labels = parsed.data.map((d) => d.label);
@@ -6537,7 +6440,11 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
       }
     };
   });
-  const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
+  const catLabels = isHorizontal ? labels.map((l) => wrapLabel(l, 12)) : labels;
+  const maxVisibleLen = Math.max(
+    ...catLabels.map((l) => Math.max(...l.split("\n").map((seg) => seg.length)))
+  );
+  const hCatGap = isHorizontal && yLabel ? Math.max(40, maxVisibleLen * 8 + 16) : void 0;
   const categoryAxis = makeGridAxis(
     "category",
     textColor,
@@ -6545,29 +6452,38 @@ function buildBarOption(parsed, textColor, axisLineColor, splitLineColor, gridOp
     splitLineColor,
     gridOpacity,
     isHorizontal ? yLabel : xLabel,
-    labels,
+    catLabels,
     hCatGap,
     !isHorizontal ? chartWidth : void 0
   );
+  const hValueGap = isHorizontal && xLabel ? 40 : void 0;
   const valueAxis = makeGridAxis(
     "value",
     textColor,
     axisLineColor,
     splitLineColor,
     gridOpacity,
-    isHorizontal ? xLabel : yLabel
+    isHorizontal ? xLabel : yLabel,
+    void 0,
+    hValueGap
   );
   return {
     ...CHART_BASE,
     title: titleConfig,
-    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    grid: makeChartGrid({
+      xLabel,
+      yLabel,
+      hasTitle: !!parsed.title,
+      isHorizontal
+    }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series: [
       {
         type: "bar",
         data,
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
@@ -6584,7 +6500,7 @@ function buildMarkArea(eras, labels, textColor, defaultColor) {
   if (eras.length === 0) return void 0;
   return {
     silent: false,
-    tooltip: { show: true },
+    tooltip: { show: false },
     data: eras.map((era) => {
       const startIdx = labels.indexOf(era.start);
       const endIdx = labels.indexOf(era.end);
@@ -6607,7 +6523,7 @@ function buildMarkArea(eras, labels, textColor, defaultColor) {
     })
   };
 }
-function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
+function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -6618,11 +6534,6 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       "category",
@@ -6653,12 +6564,13 @@ function buildLineOption(parsed, palette, textColor, axisLineColor, splitLineCol
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...markArea && { markArea }
       }
     ]
   };
 }
-function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, tooltipTheme, chartWidth) {
+function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, colors, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const seriesNames = parsed.seriesNames ?? [];
   const labels = parsed.data.map((d) => d.label);
@@ -6679,17 +6591,13 @@ function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLi
       lineStyle: { color, width: 3 },
       itemStyle: { color },
       emphasis: EMPHASIS_LINE,
+      blur: BLUR_DIM,
       ...idx === 0 && markArea && { markArea }
     };
   });
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     legend: {
       data: seriesNames,
       bottom: 10,
@@ -6724,7 +6632,7 @@ function buildMultiLineOption(parsed, palette, textColor, axisLineColor, splitLi
     series
   };
 }
-function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, tooltipTheme, chartWidth) {
+function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineColor, gridOpacity, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const lineColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const labels = parsed.data.map((d) => d.label);
@@ -6735,11 +6643,6 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: "axis",
-      ...tooltipTheme,
-      axisPointer: { type: "line" }
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       "category",
@@ -6771,6 +6674,7 @@ function buildAreaOption(parsed, palette, textColor, axisLineColor, splitLineCol
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...markArea && { markArea }
       }
     ]
@@ -6802,7 +6706,7 @@ function pieLabelLayout(parsed) {
   if (maxLen > 18) return { outerRadius: 55, fontSize: 13 };
   return { outerRadius: 70, fontSize: 14 };
 }
-function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme, isDoughnut) {
+function buildPieOption(parsed, textColor, colors, bg, titleConfig, isDoughnut) {
   const HIDE_AXES = { xAxis: { show: false }, yAxis: { show: false } };
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
@@ -6821,10 +6725,6 @@ function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme
     ...CHART_BASE,
     ...HIDE_AXES,
     title: titleConfig,
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     series: [
       {
         type: "pie",
@@ -6838,12 +6738,13 @@ function buildPieOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme
           fontSize
         },
         labelLine: { show: true },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig, tooltipTheme) {
+function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, titleConfig) {
   const bg = isDark ? palette.surface : palette.bg;
   const radarColor = parsed.color ?? parsed.seriesNameColors?.[0] ?? palette.primary;
   const values = parsed.data.map((d) => d.value);
@@ -6857,10 +6758,6 @@ function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, title
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     radar: {
       indicator,
       axisName: {
@@ -6897,12 +6794,13 @@ function buildRadarOption(parsed, palette, isDark, textColor, gridOpacity, title
             }
           }
         ],
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, tooltipTheme) {
+function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig) {
   const data = parsed.data.map((d, i) => {
     const stroke2 = d.color ?? colors[i % colors.length];
     return {
@@ -6920,10 +6818,6 @@ function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, toolti
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: "item",
-      ...tooltipTheme
-    },
     series: [
       {
         type: "pie",
@@ -6941,12 +6835,13 @@ function buildPolarAreaOption(parsed, textColor, colors, bg, titleConfig, toolti
           fontSize: pieLabelLayout(parsed).fontSize
         },
         labelLine: { show: true },
-        emphasis: EMPHASIS_SELF
+        emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM
       }
     ]
   };
 }
-function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, tooltipTheme, chartWidth) {
+function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor, gridOpacity, colors, bg, titleConfig, chartWidth) {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
   const isHorizontal = parsed.orientation === "horizontal";
   const seriesNames = parsed.seriesNames ?? [];
@@ -6975,7 +6870,8 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
         fontWeight: "bold",
         fontFamily: FONT_FAMILY
       },
-      emphasis: EMPHASIS_SELF
+      emphasis: EMPHASIS_SERIES,
+      blur: BLUR_DIM
     };
   });
   const hCatGap = isHorizontal && yLabel ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16) : void 0;
@@ -7016,7 +6912,7 @@ function buildBarStackedOption(parsed, textColor, axisLineColor, splitLineColor,
       hasLegend: true
     }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series
   };
 }
@@ -7100,7 +6996,7 @@ async function renderExtendedChartForExport(content, theme, palette, options) {
     chart.dispose();
   }
 }
-var EMPHASIS_SELF, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
+var EMPHASIS_SELF, EMPHASIS_SERIES, BLUR_DIM, EMPHASIS_LINE, CHART_BASE, CHART_BORDER_WIDTH, VALID_EXTENDED_TYPES, KNOWN_EXTENDED_OPTIONS, ECHART_EXPORT_WIDTH, ECHART_EXPORT_HEIGHT, STANDARD_CHART_TYPES;
 var init_echarts = __esm({
   "src/echarts.ts"() {
     "use strict";
@@ -7114,20 +7010,22 @@ var init_echarts = __esm({
     init_colors();
     init_parsing();
     init_chart();
-    EMPHASIS_SELF = { focus: "self", blurScope: "global" };
-    EMPHASIS_LINE = {
-      ...EMPHASIS_SELF,
-      scale: 2.5,
-      itemStyle: {
-        borderWidth: 2,
-        borderColor: "#fff",
-        shadowBlur: 8,
-        shadowColor: "rgba(0,0,0,0.4)"
-      }
+    EMPHASIS_SELF = {
+      focus: "self",
+      blurScope: "global",
+      itemStyle: { opacity: 1 }
+    };
+    EMPHASIS_SERIES = {
+      focus: "series",
+      blurScope: "global",
+      itemStyle: { opacity: 1 }
     };
+    BLUR_DIM = { itemStyle: { opacity: 0.15 }, lineStyle: { opacity: 0.15 } };
+    EMPHASIS_LINE = { ...EMPHASIS_SELF };
     CHART_BASE = {
       backgroundColor: "transparent",
-      animation: false
+      animation: false,
+      tooltip: { show: false }
     };
     CHART_BORDER_WIDTH = 2;
     VALID_EXTENDED_TYPES = /* @__PURE__ */ new Set([