pptx-glimpse 0.1.4 → 0.2.0

package/dist/index.cjs

@@ -3135,7 +3135,7 @@ function renderTextDecorations(x, y, segmentWidth, fontSizePx, props) {
   }
   return lines;
 }
-function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, fontResolver) {
+function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, fontResolver, vert) {
   const fontSize = (props.fontSize ?? defaultFontSize) * fontScale;
   const fontSizePx = fontSize * PX_PER_PT2;
   const parts = [];
@@ -3168,7 +3168,50 @@ function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, font
     }
     totalWidth += segWidth;
   };
-  if (needsScriptSplit(props)) {
+  const processCjkUpright = (segText, fontFamily, fontFamilyEa) => {
+    if (segText.length === 0) return;
+    const font = fontResolver.resolveFont(fontFamily, fontFamilyEa);
+    const fillAttrs = buildPathFillAttrs(props);
+    for (const char of segText) {
+      const charWidth = getTextMeasurer().measureTextWidth(
+        char,
+        fontSize,
+        props.bold,
+        fontFamily,
+        fontFamilyEa
+      );
+      if (font) {
+        const charX = x + totalWidth;
+        const path = font.getPath(char, charX, effectiveY, fontSizePx);
+        const pathData = path.toPathData(2);
+        if (pathData && pathData.length > 0) {
+          const cx = charX + charWidth / 2;
+          const cy = effectiveY - fontSizePx * (font.ascender + font.descender) / 2 / font.unitsPerEm;
+          parts.push(
+            `<g transform="rotate(-90, ${cx.toFixed(2)}, ${cy.toFixed(2)})"><path d="${pathData}" ${fillAttrs}/></g>`
+          );
+        }
+      }
+      if (props.underline || props.strikethrough) {
+        parts.push(
+          ...renderTextDecorations(x + totalWidth, effectiveY, charWidth, fontSizePx, props)
+        );
+      }
+      totalWidth += charWidth;
+    }
+  };
+  if (vert === "eaVert") {
+    const scriptParts = splitByScript(processedText);
+    for (const part of scriptParts) {
+      const ff = part.isEa ? props.fontFamilyEa ?? props.fontFamily : props.fontFamily;
+      const ffEa = part.isEa ? props.fontFamilyEa : props.fontFamilyEa;
+      if (part.isEa) {
+        processCjkUpright(part.text, ff, ffEa);
+      } else {
+        processSegment(part.text, ff, ffEa);
+      }
+    }
+  } else if (needsScriptSplit(props)) {
     const scriptParts = splitByScript(processedText);
     for (const part of scriptParts) {
       const ff = part.isEa ? props.fontFamilyEa : props.fontFamily;
@@ -3334,7 +3377,8 @@ function renderTextBodyAsPath(textBody, transform, fontResolver) {
             currentY,
             fontScale,
             defaultFontSize,
-            fontResolver
+            fontResolver,
+            bodyProperties.vert
           );
           if (result.svg) elements.push(result.svg);
           currentX += result.width;
@@ -3381,7 +3425,8 @@ function renderTextBodyAsPath(textBody, transform, fontResolver) {
           currentY,
           fontScale,
           defaultFontSize,
-          fontResolver
+          fontResolver,
+          bodyProperties.vert
         );
         if (result.svg) elements.push(result.svg);
         currentX += result.width;
@@ -3824,6 +3869,15 @@ function renderChart(element) {
       case "radar":
         parts.push(renderRadarChart(chart, plotX, plotY, plotW, plotH));
         break;
+      case "stock":
+        parts.push(renderStockChart(chart, plotX, plotY, plotW, plotH));
+        break;
+      case "surface":
+        parts.push(renderSurfaceChart(chart, plotX, plotY, plotW, plotH));
+        break;
+      case "ofPie":
+        parts.push(renderOfPieChart(chart, plotX, plotY, plotW, plotH));
+        break;
     }
   }
   if (chart.legend && chart.series.length > 0) {
@@ -4195,9 +4249,237 @@ function renderRadarChart(chart, x, y, w, h) {
   }
   return parts.join("");
 }
+function renderStockChart(chart, x, y, w, h) {
+  const parts = [];
+  const { series, categories } = chart;
+  if (series.length < 3) return "";
+  const highSeries = series[0];
+  const lowSeries = series[1];
+  const closeSeries = series[2];
+  const catCount = categories.length || highSeries.values.length;
+  if (catCount === 0) return "";
+  let maxVal = 0;
+  let minVal = Infinity;
+  for (const s of [highSeries, lowSeries, closeSeries]) {
+    for (const v of s.values) {
+      maxVal = Math.max(maxVal, v);
+      minVal = Math.min(minVal, v);
+    }
+  }
+  if (maxVal === minVal) return "";
+  parts.push(
+    `<line x1="${round3(x)}" y1="${round3(y + h)}" x2="${round3(x + w)}" y2="${round3(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
+  );
+  parts.push(
+    `<line x1="${round3(x)}" y1="${round3(y)}" x2="${round3(x)}" y2="${round3(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
+  );
+  for (let c = 0; c < catCount; c++) {
+    const label = categories[c] ?? "";
+    const labelX = x + (c + 0.5) * (w / catCount);
+    parts.push(
+      `<text x="${round3(labelX)}" y="${round3(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+    );
+  }
+  const range = maxVal - minVal;
+  for (let c = 0; c < catCount; c++) {
+    const cx = x + (c + 0.5) * (w / catCount);
+    const highVal = highSeries.values[c] ?? 0;
+    const lowVal = lowSeries.values[c] ?? 0;
+    const closeVal = closeSeries.values[c] ?? 0;
+    const highY = y + h - (highVal - minVal) / range * h;
+    const lowY = y + h - (lowVal - minVal) / range * h;
+    const closeY = y + h - (closeVal - minVal) / range * h;
+    parts.push(
+      `<line x1="${round3(cx)}" y1="${round3(highY)}" x2="${round3(cx)}" y2="${round3(lowY)}" stroke="#404040" stroke-width="2"/>`
+    );
+    const tickW = w / catCount * 0.2;
+    parts.push(
+      `<line x1="${round3(cx)}" y1="${round3(closeY)}" x2="${round3(cx + tickW)}" y2="${round3(closeY)}" stroke="#404040" stroke-width="2"/>`
+    );
+  }
+  return parts.join("");
+}
+function renderSurfaceChart(chart, x, y, w, h) {
+  const parts = [];
+  const { series, categories } = chart;
+  if (series.length === 0) return "";
+  const rows = series.length;
+  const cols = categories.length || Math.max(...series.map((s) => s.values.length));
+  if (cols === 0) return "";
+  let minVal = Infinity;
+  let maxVal = -Infinity;
+  for (const s of series) {
+    for (const v of s.values) {
+      minVal = Math.min(minVal, v);
+      maxVal = Math.max(maxVal, v);
+    }
+  }
+  if (minVal === maxVal) maxVal = minVal + 1;
+  const cellW = w / cols;
+  const cellH = h / rows;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const val = series[r].values[c] ?? 0;
+      const t = (val - minVal) / (maxVal - minVal);
+      const color = heatmapColor(t);
+      const cx = x + c * cellW;
+      const cy = y + r * cellH;
+      parts.push(
+        `<rect x="${round3(cx)}" y="${round3(cy)}" width="${round3(cellW)}" height="${round3(cellH)}" fill="${color}" stroke="#FFFFFF" stroke-width="0.5"/>`
+      );
+    }
+  }
+  for (let c = 0; c < cols; c++) {
+    const label = categories[c] ?? "";
+    if (label) {
+      const labelX = x + (c + 0.5) * cellW;
+      parts.push(
+        `<text x="${round3(labelX)}" y="${round3(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+      );
+    }
+  }
+  for (let r = 0; r < rows; r++) {
+    const label = series[r].name ?? "";
+    if (label) {
+      const labelY = y + (r + 0.5) * cellH;
+      parts.push(
+        `<text x="${round3(x - 5)}" y="${round3(labelY + 4)}" text-anchor="end" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+      );
+    }
+  }
+  return parts.join("");
+}
+function heatmapColor(t) {
+  const clamped = Math.max(0, Math.min(1, t));
+  let r, g, b;
+  if (clamped < 0.25) {
+    const s = clamped / 0.25;
+    r = 0;
+    g = Math.round(s * 255);
+    b = 255;
+  } else if (clamped < 0.5) {
+    const s = (clamped - 0.25) / 0.25;
+    r = 0;
+    g = 255;
+    b = Math.round((1 - s) * 255);
+  } else if (clamped < 0.75) {
+    const s = (clamped - 0.5) / 0.25;
+    r = Math.round(s * 255);
+    g = 255;
+    b = 0;
+  } else {
+    const s = (clamped - 0.75) / 0.25;
+    r = 255;
+    g = Math.round((1 - s) * 255);
+    b = 0;
+  }
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function renderOfPieChart(chart, x, y, w, h) {
+  const parts = [];
+  const series = chart.series[0];
+  if (!series || series.values.length === 0) return "";
+  const total = series.values.reduce((sum, v) => sum + v, 0);
+  if (total === 0) return "";
+  const splitPos = chart.splitPos ?? 2;
+  const secondPieSize = chart.secondPieSize ?? 75;
+  const isBarOfPie = chart.ofPieType === "bar";
+  const splitIdx = Math.max(0, series.values.length - splitPos);
+  const primaryValues = series.values.slice(0, splitIdx);
+  const secondaryValues = series.values.slice(splitIdx);
+  const secondaryTotal = secondaryValues.reduce((sum, v) => sum + v, 0);
+  const pieW = w * 0.45;
+  const pieCx = x + pieW / 2;
+  const pieCy = y + h / 2;
+  const pieR = Math.min(pieW, h) / 2 * 0.85;
+  let currentAngle = -Math.PI / 2;
+  for (let i = 0; i < primaryValues.length; i++) {
+    const val = primaryValues[i];
+    const sliceAngle = val / total * 2 * Math.PI;
+    const color = getPieSliceColor(i, chart);
+    const x1 = pieCx + pieR * Math.cos(currentAngle);
+    const y1 = pieCy + pieR * Math.sin(currentAngle);
+    const x2 = pieCx + pieR * Math.cos(currentAngle + sliceAngle);
+    const y2 = pieCy + pieR * Math.sin(currentAngle + sliceAngle);
+    const largeArc = sliceAngle > Math.PI ? 1 : 0;
+    parts.push(
+      `<path d="M${round3(pieCx)},${round3(pieCy)} L${round3(x1)},${round3(y1)} A${round3(pieR)},${round3(pieR)} 0 ${largeArc},1 ${round3(x2)},${round3(y2)} Z" ${fillAttr(color)}/>`
+    );
+    currentAngle += sliceAngle;
+  }
+  const otherAngleStart = currentAngle;
+  const otherSliceAngle = secondaryTotal / total * 2 * Math.PI;
+  const otherColor = { hex: "#D9D9D9", alpha: 1 };
+  if (primaryValues.length === 0 && secondaryValues.length > 0) {
+    parts.push(
+      `<circle cx="${round3(pieCx)}" cy="${round3(pieCy)}" r="${round3(pieR)}" ${fillAttr(otherColor)}/>`
+    );
+  } else if (secondaryTotal > 0) {
+    const x1 = pieCx + pieR * Math.cos(otherAngleStart);
+    const y1 = pieCy + pieR * Math.sin(otherAngleStart);
+    const x2 = pieCx + pieR * Math.cos(otherAngleStart + otherSliceAngle);
+    const y2 = pieCy + pieR * Math.sin(otherAngleStart + otherSliceAngle);
+    const largeArc = otherSliceAngle > Math.PI ? 1 : 0;
+    parts.push(
+      `<path d="M${round3(pieCx)},${round3(pieCy)} L${round3(x1)},${round3(y1)} A${round3(pieR)},${round3(pieR)} 0 ${largeArc},1 ${round3(x2)},${round3(y2)} Z" ${fillAttr(otherColor)}/>`
+    );
+  }
+  const secW = w * 0.25;
+  const secH = h * (secondPieSize / 100) * 0.85;
+  const secX = x + w * 0.65;
+  const secCy = y + h / 2;
+  const lineStartX = pieCx + pieR * Math.cos(otherAngleStart);
+  const lineStartY = pieCy + pieR * Math.sin(otherAngleStart);
+  const lineEndStartX = pieCx + pieR * Math.cos(otherAngleStart + otherSliceAngle);
+  const lineEndStartY = pieCy + pieR * Math.sin(otherAngleStart + otherSliceAngle);
+  parts.push(
+    `<line x1="${round3(lineStartX)}" y1="${round3(lineStartY)}" x2="${round3(secX)}" y2="${round3(secCy - secH / 2)}" stroke="#A6A6A6" stroke-width="1"/>`
+  );
+  parts.push(
+    `<line x1="${round3(lineEndStartX)}" y1="${round3(lineEndStartY)}" x2="${round3(secX)}" y2="${round3(secCy + secH / 2)}" stroke="#A6A6A6" stroke-width="1"/>`
+  );
+  if (isBarOfPie) {
+    let barY = secCy - secH / 2;
+    for (let i = 0; i < secondaryValues.length; i++) {
+      const val = secondaryValues[i];
+      const barH = secondaryTotal > 0 ? val / secondaryTotal * secH : 0;
+      const color = getPieSliceColor(splitIdx + i, chart);
+      parts.push(
+        `<rect x="${round3(secX)}" y="${round3(barY)}" width="${round3(secW)}" height="${round3(barH)}" ${fillAttr(color)}/>`
+      );
+      barY += barH;
+    }
+  } else {
+    const secPieCx = secX + secW / 2;
+    const secR = Math.min(secW, secH) / 2;
+    let secAngle = -Math.PI / 2;
+    if (secondaryValues.length === 1) {
+      const color = getPieSliceColor(splitIdx, chart);
+      parts.push(
+        `<circle cx="${round3(secPieCx)}" cy="${round3(secCy)}" r="${round3(secR)}" ${fillAttr(color)}/>`
+      );
+    } else {
+      for (let i = 0; i < secondaryValues.length; i++) {
+        const val = secondaryValues[i];
+        const sliceAngle = secondaryTotal > 0 ? val / secondaryTotal * 2 * Math.PI : 0;
+        const color = getPieSliceColor(splitIdx + i, chart);
+        const sx1 = secPieCx + secR * Math.cos(secAngle);
+        const sy1 = secCy + secR * Math.sin(secAngle);
+        const sx2 = secPieCx + secR * Math.cos(secAngle + sliceAngle);
+        const sy2 = secCy + secR * Math.sin(secAngle + sliceAngle);
+        const largeArc = sliceAngle > Math.PI ? 1 : 0;
+        parts.push(
+          `<path d="M${round3(secPieCx)},${round3(secCy)} L${round3(sx1)},${round3(sy1)} A${round3(secR)},${round3(secR)} 0 ${largeArc},1 ${round3(sx2)},${round3(sy2)} Z" ${fillAttr(color)}/>`
+        );
+        secAngle += sliceAngle;
+      }
+    }
+  }
+  return parts.join("");
+}
 function renderLegend(chart, chartW, chartH, position) {
   const parts = [];
-  const entries2 = chart.chartType === "pie" || chart.chartType === "doughnut" ? chart.categories.map((cat, i) => ({
+  const entries2 = chart.chartType === "pie" || chart.chartType === "doughnut" || chart.chartType === "ofPie" ? chart.categories.map((cat, i) => ({
     label: cat,
     color: getPieSliceColor(i, chart)
   })) : chart.series.map((s, i) => ({
@@ -5594,7 +5876,11 @@ var CHART_TYPE_MAP = [
   ["bubbleChart", "bubble"],
   ["areaChart", "area"],
   ["area3DChart", "area"],
-  ["radarChart", "radar"]
+  ["radarChart", "radar"],
+  ["stockChart", "stock"],
+  ["surfaceChart", "surface"],
+  ["surface3DChart", "surface"],
+  ["ofPieChart", "ofPie"]
 ];
 function parseChart(chartXml, colorResolver) {
   const parsed = parseXml(chartXml);
@@ -5605,7 +5891,17 @@ function parseChart(chartXml, colorResolver) {
   const plotArea = chart.plotArea;
   if (!plotArea) return null;
   const title = parseChartTitle(chart.title);
-  const { chartType, series, categories, barDirection, holeSize, radarStyle } = parseChartTypeAndData(plotArea, colorResolver);
+  const {
+    chartType,
+    series,
+    categories,
+    barDirection,
+    holeSize,
+    radarStyle,
+    ofPieType,
+    secondPieSize,
+    splitPos
+  } = parseChartTypeAndData(plotArea, colorResolver);
   if (!chartType) return null;
   const legend = parseLegend(chart.legend);
   return {
@@ -5616,6 +5912,9 @@ function parseChart(chartXml, colorResolver) {
     ...barDirection !== void 0 && { barDirection },
     ...holeSize !== void 0 && { holeSize },
     ...radarStyle !== void 0 && { radarStyle },
+    ...ofPieType !== void 0 && { ofPieType },
+    ...secondPieSize !== void 0 && { secondPieSize },
+    ...splitPos !== void 0 && { splitPos },
     legend
   };
 }
@@ -5634,15 +5933,23 @@ function parseChartTypeAndData(plotArea, colorResolver) {
     const holeSize = chartType === "doughnut" ? Number(holeSizeNode?.["@_val"] ?? 50) : void 0;
     const radarStyleNode = chartNode.radarStyle;
     const radarStyle = chartType === "radar" ? radarStyleNode?.["@_val"] ?? "standard" : void 0;
-    return { chartType, series, categories, barDirection, holeSize, radarStyle };
-  }
-  const knownTags = new Set(CHART_TYPE_MAP.map(([tag]) => tag));
-  const chartTags = ["surfaceChart", "surface3DChart", "stockChart", "ofPieChart"];
-  for (const tag of chartTags) {
-    if (!knownTags.has(tag) && plotArea[tag]) {
-      warn(`chart.${tag}`, `chart type "${tag}" not implemented`);
-      break;
-    }
+    const ofPieTypeNode = chartNode.ofPieType;
+    const ofPieType = chartType === "ofPie" ? ofPieTypeNode?.["@_val"] ?? "pie" : void 0;
+    const secondPieSizeNode = chartNode.secondPieSize;
+    const secondPieSize = chartType === "ofPie" ? Number(secondPieSizeNode?.["@_val"] ?? 75) : void 0;
+    const splitPosNode = chartNode.splitPos;
+    const splitPos = chartType === "ofPie" ? Number(splitPosNode?.["@_val"] ?? 2) : void 0;
+    return {
+      chartType,
+      series,
+      categories,
+      barDirection,
+      holeSize,
+      radarStyle,
+      ofPieType,
+      secondPieSize,
+      splitPos
+    };
   }
   return { chartType: null, series: [], categories: [] };
 }
@@ -7385,7 +7692,23 @@ function findMatchingPlaceholderStyle(placeholderType, placeholderIdx, styles) {
     if (byIdx?.lstStyle) return byIdx.lstStyle;
   }
   const byType = styles.find((s) => s.placeholderType === placeholderType);
-  return byType?.lstStyle;
+  if (byType?.lstStyle) return byType.lstStyle;
+  const fallbackType = getPlaceholderFallbackType(placeholderType);
+  if (fallbackType) {
+    const byFallback = styles.find((s) => s.placeholderType === fallbackType);
+    return byFallback?.lstStyle;
+  }
+  return void 0;
+}
+function getPlaceholderFallbackType(type) {
+  switch (type) {
+    case "ctrTitle":
+      return "title";
+    case "subTitle":
+      return "body";
+    default:
+      return void 0;
+  }
 }
 function getTxStyleForPlaceholder(placeholderType, txStyles) {
   if (!txStyles) return void 0;

package/dist/index.js

@@ -3092,7 +3092,7 @@ function renderTextDecorations(x, y, segmentWidth, fontSizePx, props) {
   }
   return lines;
 }
-function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, fontResolver) {
+function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, fontResolver, vert) {
   const fontSize = (props.fontSize ?? defaultFontSize) * fontScale;
   const fontSizePx = fontSize * PX_PER_PT2;
   const parts = [];
@@ -3125,7 +3125,50 @@ function renderSegmentAsPath(text, props, x, y, fontScale, defaultFontSize, font
     }
     totalWidth += segWidth;
   };
-  if (needsScriptSplit(props)) {
+  const processCjkUpright = (segText, fontFamily, fontFamilyEa) => {
+    if (segText.length === 0) return;
+    const font = fontResolver.resolveFont(fontFamily, fontFamilyEa);
+    const fillAttrs = buildPathFillAttrs(props);
+    for (const char of segText) {
+      const charWidth = getTextMeasurer().measureTextWidth(
+        char,
+        fontSize,
+        props.bold,
+        fontFamily,
+        fontFamilyEa
+      );
+      if (font) {
+        const charX = x + totalWidth;
+        const path = font.getPath(char, charX, effectiveY, fontSizePx);
+        const pathData = path.toPathData(2);
+        if (pathData && pathData.length > 0) {
+          const cx = charX + charWidth / 2;
+          const cy = effectiveY - fontSizePx * (font.ascender + font.descender) / 2 / font.unitsPerEm;
+          parts.push(
+            `<g transform="rotate(-90, ${cx.toFixed(2)}, ${cy.toFixed(2)})"><path d="${pathData}" ${fillAttrs}/></g>`
+          );
+        }
+      }
+      if (props.underline || props.strikethrough) {
+        parts.push(
+          ...renderTextDecorations(x + totalWidth, effectiveY, charWidth, fontSizePx, props)
+        );
+      }
+      totalWidth += charWidth;
+    }
+  };
+  if (vert === "eaVert") {
+    const scriptParts = splitByScript(processedText);
+    for (const part of scriptParts) {
+      const ff = part.isEa ? props.fontFamilyEa ?? props.fontFamily : props.fontFamily;
+      const ffEa = part.isEa ? props.fontFamilyEa : props.fontFamilyEa;
+      if (part.isEa) {
+        processCjkUpright(part.text, ff, ffEa);
+      } else {
+        processSegment(part.text, ff, ffEa);
+      }
+    }
+  } else if (needsScriptSplit(props)) {
     const scriptParts = splitByScript(processedText);
     for (const part of scriptParts) {
       const ff = part.isEa ? props.fontFamilyEa : props.fontFamily;
@@ -3291,7 +3334,8 @@ function renderTextBodyAsPath(textBody, transform, fontResolver) {
             currentY,
             fontScale,
             defaultFontSize,
-            fontResolver
+            fontResolver,
+            bodyProperties.vert
           );
           if (result.svg) elements.push(result.svg);
           currentX += result.width;
@@ -3338,7 +3382,8 @@ function renderTextBodyAsPath(textBody, transform, fontResolver) {
           currentY,
           fontScale,
           defaultFontSize,
-          fontResolver
+          fontResolver,
+          bodyProperties.vert
         );
         if (result.svg) elements.push(result.svg);
         currentX += result.width;
@@ -3781,6 +3826,15 @@ function renderChart(element) {
       case "radar":
         parts.push(renderRadarChart(chart, plotX, plotY, plotW, plotH));
         break;
+      case "stock":
+        parts.push(renderStockChart(chart, plotX, plotY, plotW, plotH));
+        break;
+      case "surface":
+        parts.push(renderSurfaceChart(chart, plotX, plotY, plotW, plotH));
+        break;
+      case "ofPie":
+        parts.push(renderOfPieChart(chart, plotX, plotY, plotW, plotH));
+        break;
     }
   }
   if (chart.legend && chart.series.length > 0) {
@@ -4152,9 +4206,237 @@ function renderRadarChart(chart, x, y, w, h) {
   }
   return parts.join("");
 }
+function renderStockChart(chart, x, y, w, h) {
+  const parts = [];
+  const { series, categories } = chart;
+  if (series.length < 3) return "";
+  const highSeries = series[0];
+  const lowSeries = series[1];
+  const closeSeries = series[2];
+  const catCount = categories.length || highSeries.values.length;
+  if (catCount === 0) return "";
+  let maxVal = 0;
+  let minVal = Infinity;
+  for (const s of [highSeries, lowSeries, closeSeries]) {
+    for (const v of s.values) {
+      maxVal = Math.max(maxVal, v);
+      minVal = Math.min(minVal, v);
+    }
+  }
+  if (maxVal === minVal) return "";
+  parts.push(
+    `<line x1="${round3(x)}" y1="${round3(y + h)}" x2="${round3(x + w)}" y2="${round3(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
+  );
+  parts.push(
+    `<line x1="${round3(x)}" y1="${round3(y)}" x2="${round3(x)}" y2="${round3(y + h)}" stroke="#D9D9D9" stroke-width="1"/>`
+  );
+  for (let c = 0; c < catCount; c++) {
+    const label = categories[c] ?? "";
+    const labelX = x + (c + 0.5) * (w / catCount);
+    parts.push(
+      `<text x="${round3(labelX)}" y="${round3(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+    );
+  }
+  const range = maxVal - minVal;
+  for (let c = 0; c < catCount; c++) {
+    const cx = x + (c + 0.5) * (w / catCount);
+    const highVal = highSeries.values[c] ?? 0;
+    const lowVal = lowSeries.values[c] ?? 0;
+    const closeVal = closeSeries.values[c] ?? 0;
+    const highY = y + h - (highVal - minVal) / range * h;
+    const lowY = y + h - (lowVal - minVal) / range * h;
+    const closeY = y + h - (closeVal - minVal) / range * h;
+    parts.push(
+      `<line x1="${round3(cx)}" y1="${round3(highY)}" x2="${round3(cx)}" y2="${round3(lowY)}" stroke="#404040" stroke-width="2"/>`
+    );
+    const tickW = w / catCount * 0.2;
+    parts.push(
+      `<line x1="${round3(cx)}" y1="${round3(closeY)}" x2="${round3(cx + tickW)}" y2="${round3(closeY)}" stroke="#404040" stroke-width="2"/>`
+    );
+  }
+  return parts.join("");
+}
+function renderSurfaceChart(chart, x, y, w, h) {
+  const parts = [];
+  const { series, categories } = chart;
+  if (series.length === 0) return "";
+  const rows = series.length;
+  const cols = categories.length || Math.max(...series.map((s) => s.values.length));
+  if (cols === 0) return "";
+  let minVal = Infinity;
+  let maxVal = -Infinity;
+  for (const s of series) {
+    for (const v of s.values) {
+      minVal = Math.min(minVal, v);
+      maxVal = Math.max(maxVal, v);
+    }
+  }
+  if (minVal === maxVal) maxVal = minVal + 1;
+  const cellW = w / cols;
+  const cellH = h / rows;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const val = series[r].values[c] ?? 0;
+      const t = (val - minVal) / (maxVal - minVal);
+      const color = heatmapColor(t);
+      const cx = x + c * cellW;
+      const cy = y + r * cellH;
+      parts.push(
+        `<rect x="${round3(cx)}" y="${round3(cy)}" width="${round3(cellW)}" height="${round3(cellH)}" fill="${color}" stroke="#FFFFFF" stroke-width="0.5"/>`
+      );
+    }
+  }
+  for (let c = 0; c < cols; c++) {
+    const label = categories[c] ?? "";
+    if (label) {
+      const labelX = x + (c + 0.5) * cellW;
+      parts.push(
+        `<text x="${round3(labelX)}" y="${round3(y + h + 15)}" text-anchor="middle" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+      );
+    }
+  }
+  for (let r = 0; r < rows; r++) {
+    const label = series[r].name ?? "";
+    if (label) {
+      const labelY = y + (r + 0.5) * cellH;
+      parts.push(
+        `<text x="${round3(x - 5)}" y="${round3(labelY + 4)}" text-anchor="end" font-size="10" fill="#595959">${escapeXml2(label)}</text>`
+      );
+    }
+  }
+  return parts.join("");
+}
+function heatmapColor(t) {
+  const clamped = Math.max(0, Math.min(1, t));
+  let r, g, b;
+  if (clamped < 0.25) {
+    const s = clamped / 0.25;
+    r = 0;
+    g = Math.round(s * 255);
+    b = 255;
+  } else if (clamped < 0.5) {
+    const s = (clamped - 0.25) / 0.25;
+    r = 0;
+    g = 255;
+    b = Math.round((1 - s) * 255);
+  } else if (clamped < 0.75) {
+    const s = (clamped - 0.5) / 0.25;
+    r = Math.round(s * 255);
+    g = 255;
+    b = 0;
+  } else {
+    const s = (clamped - 0.75) / 0.25;
+    r = 255;
+    g = Math.round((1 - s) * 255);
+    b = 0;
+  }
+  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
+}
+function renderOfPieChart(chart, x, y, w, h) {
+  const parts = [];
+  const series = chart.series[0];
+  if (!series || series.values.length === 0) return "";
+  const total = series.values.reduce((sum, v) => sum + v, 0);
+  if (total === 0) return "";
+  const splitPos = chart.splitPos ?? 2;
+  const secondPieSize = chart.secondPieSize ?? 75;
+  const isBarOfPie = chart.ofPieType === "bar";
+  const splitIdx = Math.max(0, series.values.length - splitPos);
+  const primaryValues = series.values.slice(0, splitIdx);
+  const secondaryValues = series.values.slice(splitIdx);
+  const secondaryTotal = secondaryValues.reduce((sum, v) => sum + v, 0);
+  const pieW = w * 0.45;
+  const pieCx = x + pieW / 2;
+  const pieCy = y + h / 2;
+  const pieR = Math.min(pieW, h) / 2 * 0.85;
+  let currentAngle = -Math.PI / 2;
+  for (let i = 0; i < primaryValues.length; i++) {
+    const val = primaryValues[i];
+    const sliceAngle = val / total * 2 * Math.PI;
+    const color = getPieSliceColor(i, chart);
+    const x1 = pieCx + pieR * Math.cos(currentAngle);
+    const y1 = pieCy + pieR * Math.sin(currentAngle);
+    const x2 = pieCx + pieR * Math.cos(currentAngle + sliceAngle);
+    const y2 = pieCy + pieR * Math.sin(currentAngle + sliceAngle);
+    const largeArc = sliceAngle > Math.PI ? 1 : 0;
+    parts.push(
+      `<path d="M${round3(pieCx)},${round3(pieCy)} L${round3(x1)},${round3(y1)} A${round3(pieR)},${round3(pieR)} 0 ${largeArc},1 ${round3(x2)},${round3(y2)} Z" ${fillAttr(color)}/>`
+    );
+    currentAngle += sliceAngle;
+  }
+  const otherAngleStart = currentAngle;
+  const otherSliceAngle = secondaryTotal / total * 2 * Math.PI;
+  const otherColor = { hex: "#D9D9D9", alpha: 1 };
+  if (primaryValues.length === 0 && secondaryValues.length > 0) {
+    parts.push(
+      `<circle cx="${round3(pieCx)}" cy="${round3(pieCy)}" r="${round3(pieR)}" ${fillAttr(otherColor)}/>`
+    );
+  } else if (secondaryTotal > 0) {
+    const x1 = pieCx + pieR * Math.cos(otherAngleStart);
+    const y1 = pieCy + pieR * Math.sin(otherAngleStart);
+    const x2 = pieCx + pieR * Math.cos(otherAngleStart + otherSliceAngle);
+    const y2 = pieCy + pieR * Math.sin(otherAngleStart + otherSliceAngle);
+    const largeArc = otherSliceAngle > Math.PI ? 1 : 0;
+    parts.push(
+      `<path d="M${round3(pieCx)},${round3(pieCy)} L${round3(x1)},${round3(y1)} A${round3(pieR)},${round3(pieR)} 0 ${largeArc},1 ${round3(x2)},${round3(y2)} Z" ${fillAttr(otherColor)}/>`
+    );
+  }
+  const secW = w * 0.25;
+  const secH = h * (secondPieSize / 100) * 0.85;
+  const secX = x + w * 0.65;
+  const secCy = y + h / 2;
+  const lineStartX = pieCx + pieR * Math.cos(otherAngleStart);
+  const lineStartY = pieCy + pieR * Math.sin(otherAngleStart);
+  const lineEndStartX = pieCx + pieR * Math.cos(otherAngleStart + otherSliceAngle);
+  const lineEndStartY = pieCy + pieR * Math.sin(otherAngleStart + otherSliceAngle);
+  parts.push(
+    `<line x1="${round3(lineStartX)}" y1="${round3(lineStartY)}" x2="${round3(secX)}" y2="${round3(secCy - secH / 2)}" stroke="#A6A6A6" stroke-width="1"/>`
+  );
+  parts.push(
+    `<line x1="${round3(lineEndStartX)}" y1="${round3(lineEndStartY)}" x2="${round3(secX)}" y2="${round3(secCy + secH / 2)}" stroke="#A6A6A6" stroke-width="1"/>`
+  );
+  if (isBarOfPie) {
+    let barY = secCy - secH / 2;
+    for (let i = 0; i < secondaryValues.length; i++) {
+      const val = secondaryValues[i];
+      const barH = secondaryTotal > 0 ? val / secondaryTotal * secH : 0;
+      const color = getPieSliceColor(splitIdx + i, chart);
+      parts.push(
+        `<rect x="${round3(secX)}" y="${round3(barY)}" width="${round3(secW)}" height="${round3(barH)}" ${fillAttr(color)}/>`
+      );
+      barY += barH;
+    }
+  } else {
+    const secPieCx = secX + secW / 2;
+    const secR = Math.min(secW, secH) / 2;
+    let secAngle = -Math.PI / 2;
+    if (secondaryValues.length === 1) {
+      const color = getPieSliceColor(splitIdx, chart);
+      parts.push(
+        `<circle cx="${round3(secPieCx)}" cy="${round3(secCy)}" r="${round3(secR)}" ${fillAttr(color)}/>`
+      );
+    } else {
+      for (let i = 0; i < secondaryValues.length; i++) {
+        const val = secondaryValues[i];
+        const sliceAngle = secondaryTotal > 0 ? val / secondaryTotal * 2 * Math.PI : 0;
+        const color = getPieSliceColor(splitIdx + i, chart);
+        const sx1 = secPieCx + secR * Math.cos(secAngle);
+        const sy1 = secCy + secR * Math.sin(secAngle);
+        const sx2 = secPieCx + secR * Math.cos(secAngle + sliceAngle);
+        const sy2 = secCy + secR * Math.sin(secAngle + sliceAngle);
+        const largeArc = sliceAngle > Math.PI ? 1 : 0;
+        parts.push(
+          `<path d="M${round3(secPieCx)},${round3(secCy)} L${round3(sx1)},${round3(sy1)} A${round3(secR)},${round3(secR)} 0 ${largeArc},1 ${round3(sx2)},${round3(sy2)} Z" ${fillAttr(color)}/>`
+        );
+        secAngle += sliceAngle;
+      }
+    }
+  }
+  return parts.join("");
+}
 function renderLegend(chart, chartW, chartH, position) {
   const parts = [];
-  const entries2 = chart.chartType === "pie" || chart.chartType === "doughnut" ? chart.categories.map((cat, i) => ({
+  const entries2 = chart.chartType === "pie" || chart.chartType === "doughnut" || chart.chartType === "ofPie" ? chart.categories.map((cat, i) => ({
     label: cat,
     color: getPieSliceColor(i, chart)
   })) : chart.series.map((s, i) => ({
@@ -5551,7 +5833,11 @@ var CHART_TYPE_MAP = [
   ["bubbleChart", "bubble"],
   ["areaChart", "area"],
   ["area3DChart", "area"],
-  ["radarChart", "radar"]
+  ["radarChart", "radar"],
+  ["stockChart", "stock"],
+  ["surfaceChart", "surface"],
+  ["surface3DChart", "surface"],
+  ["ofPieChart", "ofPie"]
 ];
 function parseChart(chartXml, colorResolver) {
   const parsed = parseXml(chartXml);
@@ -5562,7 +5848,17 @@ function parseChart(chartXml, colorResolver) {
   const plotArea = chart.plotArea;
   if (!plotArea) return null;
   const title = parseChartTitle(chart.title);
-  const { chartType, series, categories, barDirection, holeSize, radarStyle } = parseChartTypeAndData(plotArea, colorResolver);
+  const {
+    chartType,
+    series,
+    categories,
+    barDirection,
+    holeSize,
+    radarStyle,
+    ofPieType,
+    secondPieSize,
+    splitPos
+  } = parseChartTypeAndData(plotArea, colorResolver);
   if (!chartType) return null;
   const legend = parseLegend(chart.legend);
   return {
@@ -5573,6 +5869,9 @@ function parseChart(chartXml, colorResolver) {
     ...barDirection !== void 0 && { barDirection },
     ...holeSize !== void 0 && { holeSize },
     ...radarStyle !== void 0 && { radarStyle },
+    ...ofPieType !== void 0 && { ofPieType },
+    ...secondPieSize !== void 0 && { secondPieSize },
+    ...splitPos !== void 0 && { splitPos },
     legend
   };
 }
@@ -5591,15 +5890,23 @@ function parseChartTypeAndData(plotArea, colorResolver) {
     const holeSize = chartType === "doughnut" ? Number(holeSizeNode?.["@_val"] ?? 50) : void 0;
     const radarStyleNode = chartNode.radarStyle;
     const radarStyle = chartType === "radar" ? radarStyleNode?.["@_val"] ?? "standard" : void 0;
-    return { chartType, series, categories, barDirection, holeSize, radarStyle };
-  }
-  const knownTags = new Set(CHART_TYPE_MAP.map(([tag]) => tag));
-  const chartTags = ["surfaceChart", "surface3DChart", "stockChart", "ofPieChart"];
-  for (const tag of chartTags) {
-    if (!knownTags.has(tag) && plotArea[tag]) {
-      warn(`chart.${tag}`, `chart type "${tag}" not implemented`);
-      break;
-    }
+    const ofPieTypeNode = chartNode.ofPieType;
+    const ofPieType = chartType === "ofPie" ? ofPieTypeNode?.["@_val"] ?? "pie" : void 0;
+    const secondPieSizeNode = chartNode.secondPieSize;
+    const secondPieSize = chartType === "ofPie" ? Number(secondPieSizeNode?.["@_val"] ?? 75) : void 0;
+    const splitPosNode = chartNode.splitPos;
+    const splitPos = chartType === "ofPie" ? Number(splitPosNode?.["@_val"] ?? 2) : void 0;
+    return {
+      chartType,
+      series,
+      categories,
+      barDirection,
+      holeSize,
+      radarStyle,
+      ofPieType,
+      secondPieSize,
+      splitPos
+    };
   }
   return { chartType: null, series: [], categories: [] };
 }
@@ -7342,7 +7649,23 @@ function findMatchingPlaceholderStyle(placeholderType, placeholderIdx, styles) {
     if (byIdx?.lstStyle) return byIdx.lstStyle;
   }
   const byType = styles.find((s) => s.placeholderType === placeholderType);
-  return byType?.lstStyle;
+  if (byType?.lstStyle) return byType.lstStyle;
+  const fallbackType = getPlaceholderFallbackType(placeholderType);
+  if (fallbackType) {
+    const byFallback = styles.find((s) => s.placeholderType === fallbackType);
+    return byFallback?.lstStyle;
+  }
+  return void 0;
+}
+function getPlaceholderFallbackType(type) {
+  switch (type) {
+    case "ctrTitle":
+      return "title";
+    case "subTitle":
+      return "body";
+    default:
+      return void 0;
+  }
 }
 function getTxStyleForPlaceholder(placeholderType, txStyles) {
   if (!txStyles) return void 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pptx-glimpse",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A Node.js library to render PPTX as SVG / PNG.",
   "type": "module",
   "main": "./dist/index.cjs",