@anvme/nanocharts 1.0.0

package/dist/index.cjs

@@ -0,0 +1,635 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NanoBarChart: () => NanoBarChart,
+  NanoLineChart: () => NanoLineChart,
+  NanoPieChart: () => NanoPieChart
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/shared.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function attachHoverListeners(container, svgEl, onUpdate, onLeave) {
+  var rafPending = false;
+  var lastCX = 0, lastCY = 0;
+  function schedule() {
+    if (!rafPending) {
+      rafPending = true;
+      requestAnimationFrame(function() {
+        rafPending = false;
+        var r = svgEl.getBoundingClientRect();
+        onUpdate(lastCX - r.left, lastCY - r.top);
+      });
+    }
+  }
+  container.addEventListener("mousemove", function(e) {
+    lastCX = e.clientX;
+    lastCY = e.clientY;
+    schedule();
+  }, { passive: true });
+  container.addEventListener("mouseleave", onLeave, { passive: true });
+  container.addEventListener("touchmove", function(e) {
+    var t = e.touches[0];
+    lastCX = t.clientX;
+    lastCY = t.clientY;
+    schedule();
+  }, { passive: true });
+  container.addEventListener("touchend", onLeave, { passive: true });
+}
+
+// src/line-chart.ts
+function NanoLineChart(containerId, config) {
+  var data = config.data;
+  var labels = config.labels;
+  var xLabel = config.xLabel || "";
+  var yLabel = config.yLabel || "";
+  var colors = config.colors || ["#215CAF", "#007894", "#00C9A7", "#DE4437", "#F69C3D"];
+  var padding = { top: 20, right: 30, bottom: 50, left: 60 };
+  var smooth = config.smooth === true;
+  var areaFill = config.areaFill === true;
+  var areaOpacity = config.areaOpacity !== void 0 ? config.areaOpacity : 0.1;
+  var showTicks = config.showTicks !== false;
+  var showGrid = config.showGrid !== false;
+  var gridDashed = config.gridDashed === true;
+  var strokeWidth = config.strokeWidth !== void 0 ? config.strokeWidth : 2.5;
+  var hoverEnabled = config.hover !== false;
+  var container = document.getElementById(containerId);
+  if (!container || !data.length || !data[0].length) return;
+  var chartWidth = config.width || container.clientWidth || 600;
+  var chartHeight = config.height || 350;
+  var plotWidth = chartWidth - padding.left - padding.right;
+  var plotHeight = chartHeight - padding.top - padding.bottom;
+  var plotBottom = padding.top + plotHeight;
+  var seriesIndex, pointIndex, minValue, maxValue;
+  minValue = maxValue = data[0][0];
+  for (seriesIndex = 0; seriesIndex < data.length; seriesIndex++)
+    for (pointIndex = 0; pointIndex < data[seriesIndex].length; pointIndex++) {
+      if (data[seriesIndex][pointIndex] < minValue) minValue = data[seriesIndex][pointIndex];
+      if (data[seriesIndex][pointIndex] > maxValue) maxValue = data[seriesIndex][pointIndex];
+    }
+  var range = maxValue - minValue || 1;
+  minValue -= range * 0.05;
+  maxValue += range * 0.05;
+  range = maxValue - minValue;
+  var pointCount = labels.length;
+  var stepX = pointCount > 1 ? plotWidth / (pointCount - 1) : 0;
+  var tickCount = 6;
+  var tickStep = range / (tickCount - 1);
+  var totalCoords = data.length * pointCount;
+  var coordsX = new Int16Array(totalCoords);
+  var coordsY = new Int16Array(totalCoords);
+  for (seriesIndex = 0; seriesIndex < data.length; seriesIndex++)
+    for (pointIndex = 0; pointIndex < pointCount; pointIndex++) {
+      var coordIndex = seriesIndex * pointCount + pointIndex;
+      coordsX[coordIndex] = padding.left + pointIndex * stepX | 0;
+      coordsY[coordIndex] = padding.top + plotHeight - (data[seriesIndex][pointIndex] - minValue) / range * plotHeight | 0;
+    }
+  var gridYPositions = new Int16Array(tickCount);
+  var gridLabels = new Array(tickCount);
+  var tickIndex;
+  for (tickIndex = 0; tickIndex < tickCount; tickIndex++) {
+    var tickValue = minValue + tickIndex * tickStep;
+    gridYPositions[tickIndex] = padding.top + plotHeight - (tickValue - minValue) / range * plotHeight | 0;
+    gridLabels[tickIndex] = tickValue.toFixed(1);
+  }
+  var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" width="' + chartWidth + '" height="' + chartHeight + '" viewBox="0 0 ' + chartWidth + " " + chartHeight + '" class="chart">';
+  if (showGrid) {
+    var gridPath = "";
+    for (tickIndex = 0; tickIndex < tickCount; tickIndex++)
+      gridPath += "M" + padding.left + "," + gridYPositions[tickIndex] + "H" + (padding.left + plotWidth);
+    svgMarkup += '<path d="' + gridPath + '" class="chart-grid"' + (gridDashed ? ' stroke-dasharray="3 4"' : "") + "/>";
+  }
+  for (seriesIndex = 0; seriesIndex < data.length; seriesIndex++) {
+    var ci = seriesIndex * pointCount;
+    var pathData = "M" + coordsX[ci] + "," + coordsY[ci];
+    if (smooth) {
+      for (pointIndex = 0; pointIndex < pointCount - 1; pointIndex++) {
+        var prevI = pointIndex ? pointIndex - 1 : 0;
+        var next2I = pointIndex + 2 < pointCount ? pointIndex + 2 : pointCount - 1;
+        var curX = coordsX[ci + pointIndex], curY = coordsY[ci + pointIndex];
+        var nextX = coordsX[ci + pointIndex + 1], nextY = coordsY[ci + pointIndex + 1];
+        var prevX = coordsX[ci + prevI], prevY = coordsY[ci + prevI];
+        var next2X = coordsX[ci + next2I], next2Y = coordsY[ci + next2I];
+        pathData += " C" + (curX + (nextX - prevX) / 6 | 0) + "," + (curY + (nextY - prevY) / 6 | 0) + " " + (nextX - (next2X - curX) / 6 | 0) + "," + (nextY - (next2Y - curY) / 6 | 0) + " " + nextX + "," + nextY;
+      }
+    } else {
+      for (pointIndex = 1; pointIndex < pointCount; pointIndex++)
+        pathData += "L" + coordsX[ci + pointIndex] + "," + coordsY[ci + pointIndex];
+    }
+    if (areaFill) {
+      var firstX = coordsX[ci], lastX = coordsX[ci + pointCount - 1];
+      svgMarkup += '<path d="' + pathData + " L" + lastX + "," + plotBottom + " L" + firstX + "," + plotBottom + ' Z" fill="' + colors[seriesIndex % colors.length] + '" fill-opacity="' + areaOpacity + '" stroke="none" pointer-events="none"/>';
+    }
+    svgMarkup += '<path d="' + pathData + '" class="chart-series" stroke="' + colors[seriesIndex % colors.length] + '"' + (strokeWidth !== 2.5 ? ' stroke-width="' + strokeWidth + '"' : "") + "/>";
+  }
+  svgMarkup += "</svg>";
+  var labelMarkup = '<div class="chart-labels">';
+  if (showTicks) {
+    for (tickIndex = 0; tickIndex < tickCount; tickIndex++)
+      labelMarkup += '<span class="chart-tick-y" style="left:' + (padding.left - 4) + "px;top:" + (gridYPositions[tickIndex] - 1) + 'px">' + gridLabels[tickIndex] + "</span>";
+    for (pointIndex = 0; pointIndex < pointCount; pointIndex++)
+      labelMarkup += '<span class="chart-tick-x" style="left:' + coordsX[pointIndex] + "px;top:" + (padding.top + plotHeight + 6) + 'px">' + labels[pointIndex] + "</span>";
+  }
+  if (xLabel)
+    labelMarkup += '<span class="chart-title" style="left:' + (padding.left + (plotWidth >> 1)) + "px;top:" + (chartHeight - 10) + 'px">' + xLabel + "</span>";
+  if (yLabel)
+    labelMarkup += '<span class="chart-title" style="left:4px;top:' + (padding.top - 14) + 'px;transform:none;text-align:left">' + yLabel + "</span>";
+  labelMarkup += "</div>";
+  container.style.cssText = "position:relative;width:" + chartWidth + "px;height:" + chartHeight + "px";
+  container.innerHTML = svgMarkup + labelMarkup;
+  if (!hoverEnabled) return;
+  var svg = container.firstChild;
+  var indicator = null;
+  var tooltip = null;
+  function ensureHoverElements() {
+    if (!indicator) {
+      indicator = document.createElementNS(SVG_NS, "circle");
+      indicator.setAttribute("r", "5");
+      indicator.setAttribute("class", "chart-indicator");
+      indicator.style.display = "none";
+      svg.appendChild(indicator);
+    }
+    if (!tooltip) {
+      tooltip = document.createElement("div");
+      tooltip.className = "chart-tooltip";
+      container.appendChild(tooltip);
+    }
+  }
+  attachHoverListeners(
+    container,
+    svg,
+    function(mouseX, mouseY) {
+      if (mouseX < padding.left || mouseX > padding.left + plotWidth || mouseY < padding.top || mouseY > padding.top + plotHeight) {
+        if (indicator) indicator.style.display = "none";
+        if (tooltip) tooltip.style.opacity = "0";
+        return;
+      }
+      ensureHoverElements();
+      var relativeX = mouseX - padding.left;
+      if (relativeX < 0) relativeX = 0;
+      if (relativeX > plotWidth) relativeX = plotWidth;
+      var nearestIndex = relativeX / stepX + 0.5 | 0;
+      if (nearestIndex >= pointCount) nearestIndex = pointCount - 1;
+      var bestSeriesIndex = 0;
+      var bestDistance = Math.abs(coordsY[nearestIndex] - mouseY);
+      for (var searchIndex = 1; searchIndex < data.length; searchIndex++) {
+        var distance = Math.abs(coordsY[searchIndex * pointCount + nearestIndex] - mouseY);
+        if (distance < bestDistance) {
+          bestDistance = distance;
+          bestSeriesIndex = searchIndex;
+        }
+      }
+      var pointX = coordsX[bestSeriesIndex * pointCount + nearestIndex];
+      var pointY = coordsY[bestSeriesIndex * pointCount + nearestIndex];
+      indicator.setAttribute("transform", "translate(" + pointX + "," + pointY + ")");
+      indicator.setAttribute("fill", colors[bestSeriesIndex % colors.length]);
+      indicator.style.display = "";
+      tooltip.innerHTML = "<b>Series " + (bestSeriesIndex + 1) + "</b><br>" + xLabel + ": " + labels[nearestIndex] + "<br>" + yLabel + ": " + data[bestSeriesIndex][nearestIndex];
+      tooltip.style.transform = "translate(" + pointX + "px," + (pointY - 40) + "px) translate(-50%,-100%)";
+      tooltip.style.opacity = "1";
+    },
+    function() {
+      if (indicator) indicator.style.display = "none";
+      if (tooltip) tooltip.style.opacity = "0";
+    }
+  );
+}
+
+// src/bar-chart.ts
+function NanoBarChart(containerId, config) {
+  var data = config.data;
+  var labels = config.labels;
+  var xLabel = config.xLabel || "";
+  var yLabel = config.yLabel || "";
+  var colors = config.colors || ["#215CAF", "#007894", "#00C9A7", "#DE4437", "#F69C3D"];
+  var stacked = config.stacked === true;
+  var horizontal = config.horizontal === true;
+  var showTicks = config.showTicks !== false;
+  var showGrid = config.showGrid !== false;
+  var gridDashed = config.gridDashed === true;
+  var hoverEnabled = config.hover !== false;
+  var barGap = config.barGap !== void 0 ? config.barGap : 0.2;
+  var padding = { top: 20, right: 30, bottom: 50, left: horizontal ? 80 : 60 };
+  var container = document.getElementById(containerId);
+  if (!container || !data.length || !data[0].length) return;
+  var chartWidth = config.width || container.clientWidth || 600;
+  var chartHeight = config.height || 350;
+  var plotWidth = chartWidth - padding.left - padding.right;
+  var plotHeight = chartHeight - padding.top - padding.bottom;
+  var plotBottom = padding.top + plotHeight;
+  var seriesCount = data.length;
+  var catCount = labels.length;
+  var si, ci, val, ti;
+  var minVal, maxVal;
+  if (stacked) {
+    minVal = 0;
+    maxVal = 0;
+    for (ci = 0; ci < catCount; ci++) {
+      var colSum = 0;
+      for (si = 0; si < seriesCount; si++) {
+        colSum += data[si][ci];
+        if (data[si][ci] < minVal) minVal = data[si][ci];
+      }
+      if (colSum > maxVal) maxVal = colSum;
+    }
+  } else {
+    minVal = maxVal = data[0][0];
+    for (si = 0; si < seriesCount; si++)
+      for (ci = 0; ci < catCount; ci++) {
+        val = data[si][ci];
+        if (val < minVal) minVal = val;
+        if (val > maxVal) maxVal = val;
+      }
+  }
+  if (minVal > 0) minVal = 0;
+  if (maxVal < 0) maxVal = 0;
+  var range = maxVal - minVal || 1;
+  maxVal += range * 0.05;
+  range = maxVal - minVal;
+  var tickCount = 6;
+  var tickStep = range / (tickCount - 1);
+  var gridPositions = new Int16Array(tickCount);
+  var gridLabels = new Array(tickCount);
+  var totalBars = seriesCount * catCount;
+  var barX = new Int16Array(totalBars);
+  var barY = new Int16Array(totalBars);
+  var barW = new Int16Array(totalBars);
+  var barH = new Int16Array(totalBars);
+  var groupSize;
+  var zeroY = 0;
+  if (horizontal) {
+    groupSize = plotHeight / catCount;
+    var zeroX = padding.left + (0 - minVal) / range * plotWidth | 0;
+    for (ti = 0; ti < tickCount; ti++) {
+      var tickVal = minVal + ti * tickStep;
+      gridPositions[ti] = padding.left + (tickVal - minVal) / range * plotWidth | 0;
+      gridLabels[ti] = tickVal % 1 === 0 ? tickVal.toString() : tickVal.toFixed(1);
+    }
+    var hBarHeight = groupSize * (1 - barGap) / seriesCount | 0;
+    var hGroupStart = (groupSize - hBarHeight * seriesCount) / 2 | 0;
+    for (si = 0; si < seriesCount; si++)
+      for (ci = 0; ci < catCount; ci++) {
+        var idx = si * catCount + ci;
+        val = data[si][ci];
+        var valX = padding.left + (val - minVal) / range * plotWidth | 0;
+        barY[idx] = padding.top + ci * groupSize + hGroupStart + si * hBarHeight | 0;
+        barH[idx] = hBarHeight;
+        if (val >= 0) {
+          barX[idx] = zeroX;
+          barW[idx] = valX - zeroX || 1;
+        } else {
+          barX[idx] = valX;
+          barW[idx] = zeroX - valX || 1;
+        }
+      }
+  } else {
+    groupSize = plotWidth / catCount;
+    zeroY = padding.top + plotHeight - (0 - minVal) / range * plotHeight | 0;
+    for (ti = 0; ti < tickCount; ti++) {
+      var tickVal = minVal + ti * tickStep;
+      gridPositions[ti] = padding.top + plotHeight - (tickVal - minVal) / range * plotHeight | 0;
+      gridLabels[ti] = tickVal % 1 === 0 ? tickVal.toString() : tickVal.toFixed(1);
+    }
+    if (stacked) {
+      var stackBarWidth = groupSize * (1 - barGap) | 0;
+      var stackBarOffset = (groupSize - stackBarWidth) / 2 | 0;
+      for (ci = 0; ci < catCount; ci++) {
+        var cumPos = 0;
+        for (si = 0; si < seriesCount; si++) {
+          var idx = si * catCount + ci;
+          val = data[si][ci];
+          var baseY = padding.top + plotHeight - (cumPos - minVal) / range * plotHeight | 0;
+          var topY = padding.top + plotHeight - (cumPos + val - minVal) / range * plotHeight | 0;
+          cumPos += val;
+          barX[idx] = padding.left + ci * groupSize + stackBarOffset | 0;
+          barY[idx] = Math.min(baseY, topY);
+          barW[idx] = stackBarWidth;
+          barH[idx] = Math.abs(topY - baseY) || 1;
+        }
+      }
+    } else {
+      var singleBarWidth = groupSize * (1 - barGap) / seriesCount | 0;
+      var groupBarStart = (groupSize - singleBarWidth * seriesCount) / 2 | 0;
+      for (si = 0; si < seriesCount; si++)
+        for (ci = 0; ci < catCount; ci++) {
+          var idx = si * catCount + ci;
+          val = data[si][ci];
+          var topY = padding.top + plotHeight - (val - minVal) / range * plotHeight | 0;
+          barX[idx] = padding.left + ci * groupSize + groupBarStart + si * singleBarWidth | 0;
+          barW[idx] = singleBarWidth;
+          if (val >= 0) {
+            barY[idx] = topY;
+            barH[idx] = zeroY - topY || 1;
+          } else {
+            barY[idx] = zeroY;
+            barH[idx] = topY - zeroY || 1;
+          }
+        }
+    }
+  }
+  var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" width="' + chartWidth + '" height="' + chartHeight + '" viewBox="0 0 ' + chartWidth + " " + chartHeight + '" class="chart">';
+  if (showGrid) {
+    var gridPath = "";
+    if (horizontal) {
+      for (ti = 0; ti < tickCount; ti++)
+        gridPath += "M" + gridPositions[ti] + "," + padding.top + "V" + plotBottom;
+    } else {
+      for (ti = 0; ti < tickCount; ti++)
+        gridPath += "M" + padding.left + "," + gridPositions[ti] + "H" + (padding.left + plotWidth);
+    }
+    svgMarkup += '<path d="' + gridPath + '" class="chart-grid"' + (gridDashed ? ' stroke-dasharray="3 4"' : "") + "/>";
+  }
+  if (minVal < 0) {
+    if (horizontal) {
+      var zx = padding.left + (0 - minVal) / range * plotWidth | 0;
+      svgMarkup += '<line x1="' + zx + '" y1="' + padding.top + '" x2="' + zx + '" y2="' + plotBottom + '" stroke="#999" stroke-width="1" shape-rendering="crispEdges"/>';
+    } else {
+      svgMarkup += '<line x1="' + padding.left + '" y1="' + zeroY + '" x2="' + (padding.left + plotWidth) + '" y2="' + zeroY + '" stroke="#999" stroke-width="1" shape-rendering="crispEdges"/>';
+    }
+  }
+  for (si = 0; si < seriesCount; si++) {
+    var color = colors[si % colors.length];
+    for (ci = 0; ci < catCount; ci++) {
+      var idx = si * catCount + ci;
+      svgMarkup += '<rect x="' + barX[idx] + '" y="' + barY[idx] + '" width="' + barW[idx] + '" height="' + barH[idx] + '" fill="' + color + '" class="chart-bar"/>';
+    }
+  }
+  svgMarkup += "</svg>";
+  var labelMarkup = '<div class="chart-labels">';
+  if (showTicks) {
+    if (horizontal) {
+      for (ti = 0; ti < tickCount; ti++)
+        labelMarkup += '<span class="chart-tick-x" style="left:' + gridPositions[ti] + "px;top:" + (plotBottom + 6) + 'px">' + gridLabels[ti] + "</span>";
+      for (ci = 0; ci < catCount; ci++) {
+        var centerY = padding.top + ci * groupSize + groupSize / 2 | 0;
+        labelMarkup += '<span class="chart-tick-y" style="left:' + (padding.left - 4) + "px;top:" + (centerY - 1) + 'px">' + labels[ci] + "</span>";
+      }
+    } else {
+      for (ti = 0; ti < tickCount; ti++)
+        labelMarkup += '<span class="chart-tick-y" style="left:' + (padding.left - 4) + "px;top:" + (gridPositions[ti] - 1) + 'px">' + gridLabels[ti] + "</span>";
+      for (ci = 0; ci < catCount; ci++) {
+        var centerX = padding.left + ci * groupSize + groupSize / 2 | 0;
+        labelMarkup += '<span class="chart-tick-x" style="left:' + centerX + "px;top:" + (plotBottom + 6) + 'px">' + labels[ci] + "</span>";
+      }
+    }
+  }
+  if (xLabel)
+    labelMarkup += '<span class="chart-title" style="left:' + (padding.left + (plotWidth >> 1)) + "px;top:" + (chartHeight - 10) + 'px">' + xLabel + "</span>";
+  if (yLabel)
+    labelMarkup += '<span class="chart-title" style="left:4px;top:' + (padding.top - 14) + 'px;transform:none;text-align:left">' + yLabel + "</span>";
+  labelMarkup += "</div>";
+  container.style.cssText = "position:relative;width:" + chartWidth + "px;height:" + chartHeight + "px";
+  container.innerHTML = svgMarkup + labelMarkup;
+  if (!hoverEnabled) return;
+  var svgEl = container.firstChild;
+  var highlight = null;
+  var tooltip = null;
+  function ensureHover() {
+    if (!highlight) {
+      highlight = document.createElementNS(SVG_NS, "rect");
+      highlight.setAttribute("class", "chart-indicator");
+      highlight.setAttribute("fill", "rgba(255,255,255,0.3)");
+      highlight.setAttribute("stroke", "#333");
+      highlight.setAttribute("stroke-width", "1");
+      highlight.style.display = "none";
+      svgEl.appendChild(highlight);
+    }
+    if (!tooltip) {
+      tooltip = document.createElement("div");
+      tooltip.className = "chart-tooltip";
+      container.appendChild(tooltip);
+    }
+  }
+  attachHoverListeners(
+    container,
+    svgEl,
+    function(mx, my) {
+      if (mx < padding.left || mx > padding.left + plotWidth || my < padding.top || my > plotBottom) {
+        if (highlight) highlight.style.display = "none";
+        if (tooltip) tooltip.style.opacity = "0";
+        return;
+      }
+      var nearCat;
+      if (horizontal) {
+        nearCat = (my - padding.top) / groupSize | 0;
+      } else {
+        nearCat = (mx - padding.left) / groupSize | 0;
+      }
+      if (nearCat >= catCount) nearCat = catCount - 1;
+      if (nearCat < 0) nearCat = 0;
+      var bestIdx = -1;
+      var bestDist = Infinity;
+      for (si = 0; si < seriesCount; si++) {
+        var idx2 = si * catCount + nearCat;
+        var cx = barX[idx2] + (barW[idx2] >> 1);
+        var cy = barY[idx2] + (barH[idx2] >> 1);
+        var dx = mx - cx, dy = my - cy;
+        var dist = dx * dx + dy * dy;
+        if (dist < bestDist) {
+          bestDist = dist;
+          bestIdx = idx2;
+        }
+      }
+      if (bestIdx === -1) return;
+      ensureHover();
+      var bsi = bestIdx / catCount | 0;
+      var bci = bestIdx % catCount;
+      highlight.setAttribute("x", "" + barX[bestIdx]);
+      highlight.setAttribute("y", "" + barY[bestIdx]);
+      highlight.setAttribute("width", "" + barW[bestIdx]);
+      highlight.setAttribute("height", "" + barH[bestIdx]);
+      highlight.setAttribute("stroke", colors[bsi % colors.length]);
+      highlight.style.display = "";
+      var tipX, tipY;
+      if (horizontal) {
+        tipX = barX[bestIdx] + barW[bestIdx];
+        tipY = barY[bestIdx] + (barH[bestIdx] >> 1);
+        tooltip.style.transform = "translate(" + (tipX + 8) + "px," + tipY + "px) translate(0,-50%)";
+      } else {
+        tipX = barX[bestIdx] + (barW[bestIdx] >> 1);
+        tipY = barY[bestIdx];
+        tooltip.style.transform = "translate(" + tipX + "px," + (tipY - 10) + "px) translate(-50%,-100%)";
+      }
+      tooltip.innerHTML = (seriesCount > 1 ? "<b>Series " + (bsi + 1) + "</b><br>" : "") + labels[bci] + ": " + data[bsi][bci];
+      tooltip.style.opacity = "1";
+    },
+    function() {
+      if (highlight) highlight.style.display = "none";
+      if (tooltip) tooltip.style.opacity = "0";
+    }
+  );
+}
+
+// src/pie-chart.ts
+var TWO_PI = Math.PI * 2;
+function NanoPieChart(containerId, config) {
+  var data = config.data;
+  var labels = config.labels;
+  var colors = config.colors || ["#215CAF", "#007894", "#00C9A7", "#DE4437", "#F69C3D", "#0d3a6e", "#003d4a", "#006651"];
+  var isDonut = config.donut === true;
+  var donutWidth = config.donutWidth !== void 0 ? config.donutWidth : 60;
+  var showLabels = config.showLabels !== false;
+  var hoverEnabled = config.hover !== false;
+  var container = document.getElementById(containerId);
+  if (!container) return;
+  var chartWidth = config.width || container.clientWidth || 350;
+  var chartHeight = config.height || chartWidth;
+  var sliceCount = data.length;
+  var centerX = chartWidth / 2;
+  var centerY = chartHeight / 2;
+  var outerR = Math.min(centerX, centerY) - (showLabels ? 40 : 10);
+  var innerR = isDonut ? Math.max(outerR - donutWidth, 0) : 0;
+  var i;
+  var total = 0;
+  for (i = 0; i < sliceCount; i++) total += data[i];
+  var startAngles = new Float64Array(sliceCount);
+  var endAngles = new Float64Array(sliceCount);
+  var percentages = new Float64Array(sliceCount);
+  var angle = -Math.PI / 2;
+  for (i = 0; i < sliceCount; i++) {
+    startAngles[i] = angle;
+    var sliceAngle = total > 0 ? data[i] / total * TWO_PI : 0;
+    percentages[i] = total > 0 ? data[i] / total * 100 : 0;
+    angle += sliceAngle;
+    endAngles[i] = angle;
+  }
+  var svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" width="' + chartWidth + '" height="' + chartHeight + '" viewBox="0 0 ' + chartWidth + " " + chartHeight + '" class="chart">';
+  for (i = 0; i < sliceCount; i++) {
+    if (endAngles[i] - startAngles[i] < 9e-3) continue;
+    var color = colors[i % colors.length];
+    var cos1 = Math.cos(startAngles[i]), sin1 = Math.sin(startAngles[i]);
+    var cos2 = Math.cos(endAngles[i]), sin2 = Math.sin(endAngles[i]);
+    var largeArc = endAngles[i] - startAngles[i] > Math.PI ? 1 : 0;
+    var ox1 = centerX + outerR * cos1, oy1 = centerY + outerR * sin1;
+    var ox2 = centerX + outerR * cos2, oy2 = centerY + outerR * sin2;
+    var pathData;
+    if (isDonut) {
+      var ix1 = centerX + innerR * cos1, iy1 = centerY + innerR * sin1;
+      var ix2 = centerX + innerR * cos2, iy2 = centerY + innerR * sin2;
+      pathData = "M" + ox1.toFixed(2) + "," + oy1.toFixed(2) + "A" + outerR + "," + outerR + " 0 " + largeArc + " 1 " + ox2.toFixed(2) + "," + oy2.toFixed(2) + "L" + ix2.toFixed(2) + "," + iy2.toFixed(2) + "A" + innerR + "," + innerR + " 0 " + largeArc + " 0 " + ix1.toFixed(2) + "," + iy1.toFixed(2) + "Z";
+    } else {
+      pathData = "M" + centerX.toFixed(2) + "," + centerY.toFixed(2) + "L" + ox1.toFixed(2) + "," + oy1.toFixed(2) + "A" + outerR + "," + outerR + " 0 " + largeArc + " 1 " + ox2.toFixed(2) + "," + oy2.toFixed(2) + "Z";
+    }
+    svgMarkup += '<path d="' + pathData + '" fill="' + color + '" class="chart-slice"/>';
+  }
+  svgMarkup += "</svg>";
+  var labelMarkup = '<div class="chart-labels">';
+  if (showLabels) {
+    var labelR = outerR + 20;
+    for (i = 0; i < sliceCount; i++) {
+      if (percentages[i] < 5) continue;
+      var midAngle = (startAngles[i] + endAngles[i]) / 2;
+      var lx = centerX + labelR * Math.cos(midAngle);
+      var ly = centerY + labelR * Math.sin(midAngle);
+      labelMarkup += '<span style="left:' + lx.toFixed(1) + "px;top:" + ly.toFixed(1) + 'px;transform:translate(-50%,-50%);text-align:center">' + labels[i] + " " + percentages[i].toFixed(0) + "%</span>";
+    }
+  }
+  labelMarkup += "</div>";
+  container.style.cssText = "position:relative;width:" + chartWidth + "px;height:" + chartHeight + "px";
+  container.innerHTML = svgMarkup + labelMarkup;
+  if (!hoverEnabled) return;
+  var svgEl = container.firstChild;
+  var highlight = null;
+  var tooltip = null;
+  var lastSlice = -1;
+  function ensureHover() {
+    if (!highlight) {
+      highlight = document.createElementNS(SVG_NS, "path");
+      highlight.setAttribute("class", "chart-indicator");
+      highlight.setAttribute("fill", "none");
+      highlight.setAttribute("stroke", "#fff");
+      highlight.setAttribute("stroke-width", "3");
+      highlight.style.display = "none";
+      svgEl.appendChild(highlight);
+    }
+    if (!tooltip) {
+      tooltip = document.createElement("div");
+      tooltip.className = "chart-tooltip";
+      container.appendChild(tooltip);
+    }
+  }
+  attachHoverListeners(
+    container,
+    svgEl,
+    function(mx, my) {
+      var dx = mx - centerX, dy = my - centerY;
+      var dist = Math.sqrt(dx * dx + dy * dy);
+      if (dist > outerR || dist < innerR) {
+        if (highlight) highlight.style.display = "none";
+        if (tooltip) tooltip.style.opacity = "0";
+        lastSlice = -1;
+        return;
+      }
+      var hoverAngle = Math.atan2(dy, dx);
+      if (hoverAngle < -Math.PI / 2) hoverAngle += TWO_PI;
+      var hitSlice = -1;
+      for (var s = 0; s < sliceCount; s++) {
+        if (hoverAngle >= startAngles[s] && hoverAngle < endAngles[s]) {
+          hitSlice = s;
+          break;
+        }
+      }
+      if (hitSlice === -1) return;
+      ensureHover();
+      if (hitSlice !== lastSlice) {
+        lastSlice = hitSlice;
+        var cos12 = Math.cos(startAngles[hitSlice]), sin12 = Math.sin(startAngles[hitSlice]);
+        var cos22 = Math.cos(endAngles[hitSlice]), sin22 = Math.sin(endAngles[hitSlice]);
+        var largeArc2 = endAngles[hitSlice] - startAngles[hitSlice] > Math.PI ? 1 : 0;
+        var ox12 = centerX + outerR * cos12, oy12 = centerY + outerR * sin12;
+        var ox22 = centerX + outerR * cos22, oy22 = centerY + outerR * sin22;
+        var hPath;
+        if (isDonut) {
+          var ix12 = centerX + innerR * cos12, iy12 = centerY + innerR * sin12;
+          var ix22 = centerX + innerR * cos22, iy22 = centerY + innerR * sin22;
+          hPath = "M" + ox12.toFixed(2) + "," + oy12.toFixed(2) + "A" + outerR + "," + outerR + " 0 " + largeArc2 + " 1 " + ox22.toFixed(2) + "," + oy22.toFixed(2) + "L" + ix22.toFixed(2) + "," + iy22.toFixed(2) + "A" + innerR + "," + innerR + " 0 " + largeArc2 + " 0 " + ix12.toFixed(2) + "," + iy12.toFixed(2) + "Z";
+        } else {
+          hPath = "M" + centerX.toFixed(2) + "," + centerY.toFixed(2) + "L" + ox12.toFixed(2) + "," + oy12.toFixed(2) + "A" + outerR + "," + outerR + " 0 " + largeArc2 + " 1 " + ox22.toFixed(2) + "," + oy22.toFixed(2) + "Z";
+        }
+        highlight.setAttribute("d", hPath);
+      }
+      highlight.style.display = "";
+      tooltip.innerHTML = "<b>" + labels[hitSlice] + "</b><br>" + data[hitSlice] + " (" + percentages[hitSlice].toFixed(1) + "%)";
+      tooltip.style.transform = "translate(" + mx + "px," + (my - 40) + "px) translate(-50%,-100%)";
+      tooltip.style.opacity = "1";
+    },
+    function() {
+      if (highlight) highlight.style.display = "none";
+      if (tooltip) tooltip.style.opacity = "0";
+      lastSlice = -1;
+    }
+  );
+}
+
+// src/index.ts
+if (typeof window !== "undefined") {
+  window.NanoLineChart = NanoLineChart;
+  window.NanoBarChart = NanoBarChart;
+  window.NanoPieChart = NanoPieChart;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NanoBarChart,
+  NanoLineChart,
+  NanoPieChart
+});
+//# sourceMappingURL=index.cjs.map