@anvme/nanocharts 1.0.0

package/dist/nanocharts.global.js

@@ -0,0 +1,604 @@
+"use strict";
+(() => {
+  // 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;
+  }
+})();
+//# sourceMappingURL=nanocharts.global.js.map