@redvars/peacock 3.2.10 → 3.3.0

package/dist/chart-donut.js

@@ -0,0 +1,307 @@
+import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
+import { e } from './query-QBcUV-L_.js';
+import { p as pie, o as ordinal, s as select, a as arc, c as cubicInOut, i as interpolateNumber } from './transform-DRuHEvar.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+}
+
+.title {
+  font-family: var(--typography-title-large-emphasized-font-family) !important;
+  font-size: var(--typography-title-large-emphasized-font-size) !important;
+  font-weight: var(--typography-title-large-emphasized-font-weight) !important;
+  line-height: var(--typography-title-large-emphasized-line-height) !important;
+  letter-spacing: var(--typography-title-large-emphasized-letter-spacing) !important;
+  fill: var(--color-on-surface);
+}
+
+.label {
+  font-family: var(--typography-title-medium-font-family) !important;
+  font-size: var(--typography-title-medium-font-size) !important;
+  font-weight: var(--typography-title-medium-font-weight) !important;
+  line-height: var(--typography-title-medium-line-height) !important;
+  letter-spacing: var(--typography-title-medium-letter-spacing) !important;
+  fill: var(--color-on-surface);
+}
+
+.arc {
+  cursor: pointer;
+  transition: filter 150ms ease;
+}
+.arc:hover {
+  filter: brightness(1.2);
+}
+
+.item-polyline {
+  fill: none;
+  stroke-width: 1;
+  stroke: var(--color-on-surface);
+}
+
+.item-label {
+  fill: var(--color-on-surface);
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+}`;
+
+const chartColors = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+    chartColors.push({
+        color: `var(--color-${colorName})`,
+    });
+});
+function debounce(fn, wait) {
+    let timer;
+    return ((...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    });
+}
+/**
+ * @label Chart Donut
+ * @tag wc-chart-donut
+ * @rawTag chart-donut
+ * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-donut width="400" label="Total"></wc-chart-donut>
+ * <script>
+ *   document.querySelector('wc-chart-donut').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+let ChartDonut = class ChartDonut extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Width (and height) of the chart in pixels. */
+        this.width = 0;
+        /** Margin around the chart. */
+        this.margin = 10;
+        /** Whether to show labels outside the chart. */
+        this.showLabels = true;
+        /** Chart data array. Each item should have name, value, and optional label and color. */
+        this.data = [];
+        this._initialized = false;
+        this._debouncedRenderChart = debounce(() => {
+            this._renderChart(true);
+        }, 300);
+    }
+    firstUpdated() {
+        this._renderChart(false);
+    }
+    updated(changedProperties) {
+        if (!this._initialized) {
+            this._initialized = true;
+            return;
+        }
+        const watchedProps = ['width', 'margin', 'showLabels', 'data'];
+        const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+        if (hasChanged) {
+            this._debouncedRenderChart();
+        }
+    }
+    _getRadius() {
+        return this.width / 2 - this.margin - 100;
+    }
+    _getTotal() {
+        return this.data.reduce((total, d) => total + d.value, 0);
+    }
+    _getPieData() {
+        const pie$1 = pie()
+            .sort(null)
+            .value(d => d.value);
+        return pie$1(this.data);
+    }
+    _getColorScale() {
+        return ordinal()
+            .domain(this.data.map(d => d.name))
+            .range(chartColors);
+    }
+    _renderChart(animate) {
+        if (!this.svgElement)
+            return;
+        const DURATION = 500;
+        const radius = this._getRadius();
+        const pieData = this._getPieData();
+        const colorScale = this._getColorScale();
+        const total = this._getTotal();
+        const svg = select(this.svgElement);
+        const doughnutArc = arc()
+            .innerRadius(radius * 0.72)
+            .outerRadius(radius);
+        const labelsArc = arc()
+            .innerRadius(radius + 10)
+            .outerRadius(radius + 10);
+        // Update SVG dimensions and center transform
+        svg.attr('width', this.width).attr('height', this.width);
+        svg
+            .select('.chart-container')
+            .attr('transform', `translate(${this.width / 2},${this.width / 2})`);
+        // Arc paths — keyed by name so D3 matches elements across updates
+        const $paths = svg
+            .select('.arc-container')
+            .selectAll('.arc')
+            .data(pieData, d => d.data.name)
+            .join('path')
+            .attr('class', 'arc')
+            .style('fill', d => d.data.color || colorScale(d.data.name).color);
+        if (animate) {
+            $paths
+                .transition()
+                .duration(DURATION)
+                .ease(cubicInOut)
+                .attrTween('d', function (d) {
+                const self = this;
+                // Interpolate from the last rendered angles to the new ones.
+                // New (entering) arcs start collapsed at their startAngle.
+                const prev = self._prevDatum ?? {
+                    startAngle: d.startAngle,
+                    endAngle: d.startAngle,
+                };
+                self._prevDatum = d;
+                const iStart = interpolateNumber(prev.startAngle, d.startAngle);
+                const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
+                return (t) => doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??
+                    '';
+            });
+        }
+        else {
+            // Initial render: draw immediately and seed previous-datum for later tweens
+            $paths
+                .each(function (d) {
+                this._prevDatum = d;
+            })
+                .attr('d', d => doughnutArc(d) ?? '');
+        }
+        // Animate the central total counter
+        const $title = svg.select('.title');
+        if (animate) {
+            $title
+                .transition()
+                .duration(DURATION)
+                .ease(cubicInOut)
+                .tween('text', function () {
+                const sel = select(this);
+                const start = parseFloat(sel.text()) || 0;
+                const interp = interpolateNumber(start, total);
+                return function (t) {
+                    sel.text(Math.round(interp(t)));
+                };
+            });
+        }
+        else {
+            $title.text(total);
+        }
+        // Label polylines and text
+        const $chartContainer = svg.select('.chart-container');
+        if (this.showLabels) {
+            const pointsFn = (d) => {
+                const posA = doughnutArc.centroid(d);
+                const posB = labelsArc.centroid(d);
+                const posC = posB.slice();
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
+                return [posA, posB, posC].map(p => p.join(',')).join(' ');
+            };
+            const transformFn = (d) => {
+                const pos = labelsArc.centroid(d);
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
+                return `translate(${pos})`;
+            };
+            const anchorFn = (d) => {
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                return midAngle < Math.PI ? 'start' : 'end';
+            };
+            const $polylines = $chartContainer
+                .selectAll('.item-polyline')
+                .data(pieData, d => d.data.name)
+                .join('polyline')
+                .attr('class', 'item-polyline');
+            const $labels = $chartContainer
+                .selectAll('.item-label')
+                .data(pieData, d => d.data.name)
+                .join('text')
+                .attr('class', 'item-label')
+                .text(d => d.data.label ?? '');
+            if (animate) {
+                $polylines
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('points', pointsFn);
+                $labels
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('transform', transformFn)
+                    .style('text-anchor', anchorFn);
+            }
+            else {
+                $polylines.attr('points', pointsFn);
+                $labels.attr('transform', transformFn).style('text-anchor', anchorFn);
+            }
+        }
+        else {
+            $chartContainer.selectAll('.item-polyline').remove();
+            $chartContainer.selectAll('.item-label').remove();
+        }
+    }
+    render() {
+        return b `
+      <div class="chart">
+        <svg>
+          <g class="chart-container">
+            <g class="arc-container"></g>
+            <text class="title" text-anchor="middle"></text>
+            <text class="label" text-anchor="middle" y="16">
+              ${this.label}
+            </text>
+          </g>
+        </svg>
+      </div>
+    `;
+    }
+};
+ChartDonut.styles = [css_248z];
+__decorate([
+    e('svg')
+], ChartDonut.prototype, "svgElement", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartDonut.prototype, "width", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartDonut.prototype, "margin", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'show-labels' })
+], ChartDonut.prototype, "showLabels", void 0);
+__decorate([
+    n({ type: Array })
+], ChartDonut.prototype, "data", void 0);
+__decorate([
+    n({ type: String })
+], ChartDonut.prototype, "label", void 0);
+ChartDonut = __decorate([
+    IndividualComponent
+], ChartDonut);
+
+export { ChartDonut };
+//# sourceMappingURL=chart-donut.js.map

package/dist/chart-donut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-donut.js","sources":["../../src/chart-donut/chart-donut.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-donut.scss';\n\nexport type ChartDonutColor = {\n  color: string;\n};\n\nexport type ChartDonutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDonutColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push({\n    color: `var(--color-${colorName})`,\n  });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n  _prevDatum?: d3.PieArcDatum<ChartDonutItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Donut\n * @tag wc-chart-donut\n * @rawTag chart-donut\n * @summary A donut chart is a circular chart with a blank center. The area in the center can be used to display information.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-donut width=\"400\" label=\"Total\"></wc-chart-donut>\n * <script>\n *   document.querySelector('wc-chart-donut').data = [\n *     { name: 'A', value: 30, label: 'Category A' },\n *     { name: 'B', value: 50, label: 'Category B' },\n *     { name: 'C', value: 20, label: 'Category C' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartDonut extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width (and height) of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Margin around the chart. */\n  @property({ type: Number, reflect: true }) margin: number = 10;\n\n  /** Whether to show labels outside the chart. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n  showLabels: boolean = true;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartDonutItem[] = [];\n\n  /** Label displayed in the center of the donut. */\n  @property({ type: String }) label?: string;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 300);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getRadius(): number {\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getTotal(): number {\n    return this.data.reduce((total, d) => total + d.value, 0);\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartDonutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartDonutColor>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const DURATION = 500;\n    const radius = this._getRadius();\n    const pieData = this._getPieData();\n    const colorScale = this._getColorScale();\n    const total = this._getTotal();\n\n    const svg = d3.select(this.svgElement);\n\n    const doughnutArc = d3\n      .arc<d3.PieArcDatum<ChartDonutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartDonutItem>>()\n      .innerRadius(radius + 10)\n      .outerRadius(radius + 10);\n\n    // Update SVG dimensions and center transform\n    svg.attr('width', this.width).attr('height', this.width);\n    svg\n      .select('.chart-container')\n      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n    // Arc paths — keyed by name so D3 matches elements across updates\n    const $paths = svg\n      .select('.arc-container')\n      .selectAll<SVGPathElement, d3.PieArcDatum<ChartDonutItem>>('.arc')\n      .data(pieData, d => d.data.name)\n      .join('path')\n      .attr('class', 'arc')\n      .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n    if (animate) {\n      $paths\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .attrTween('d', function (this: SVGPathElement, d) {\n          const self = this as ArcPathElement;\n          // Interpolate from the last rendered angles to the new ones.\n          // New (entering) arcs start collapsed at their startAngle.\n          const prev: { startAngle: number; endAngle: number } =\n            self._prevDatum ?? {\n              startAngle: d.startAngle,\n              endAngle: d.startAngle,\n            };\n          self._prevDatum = d;\n          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);\n          return (t: number) =>\n            doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??\n            '';\n        });\n    } else {\n      // Initial render: draw immediately and seed previous-datum for later tweens\n      $paths\n        .each(function (this: SVGPathElement, d) {\n          (this as ArcPathElement)._prevDatum = d;\n        })\n        .attr('d', d => doughnutArc(d) ?? '');\n    }\n\n    // Animate the central total counter\n    const $title = svg.select('.title');\n    if (animate) {\n      $title\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .tween('text', function (this: d3.BaseType) {\n          const sel = d3.select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = d3.interpolateNumber(start, total);\n          return function (t: number) {\n            sel.text(Math.round(interp(t)));\n          };\n        });\n    } else {\n      $title.text(total);\n    }\n\n    // Label polylines and text\n    const $chartContainer = svg.select('.chart-container');\n\n    if (this.showLabels) {\n      const pointsFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n        const posA = doughnutArc.centroid(d);\n        const posB = labelsArc.centroid(d);\n        const posC = posB.slice() as [number, number];\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return [posA, posB, posC].map(p => p.join(',')).join(' ');\n      };\n\n      const transformFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n        const pos = labelsArc.centroid(d);\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return `translate(${pos})`;\n      };\n\n      const anchorFn = (d: d3.PieArcDatum<ChartDonutItem>) => {\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        return midAngle < Math.PI ? 'start' : 'end';\n      };\n\n      const $polylines = $chartContainer\n        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDonutItem>>(\n          '.item-polyline',\n        )\n        .data(pieData, d => d.data.name)\n        .join('polyline')\n        .attr('class', 'item-polyline');\n\n      const $labels = $chartContainer\n        .selectAll<SVGTextElement, d3.PieArcDatum<ChartDonutItem>>('.item-label')\n        .data(pieData, d => d.data.name)\n        .join('text')\n        .attr('class', 'item-label')\n        .text(d => d.data.label ?? '');\n\n      if (animate) {\n        $polylines\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('transform', transformFn)\n          .style('text-anchor', anchorFn);\n      } else {\n        $polylines.attr('points', pointsFn);\n        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n      }\n    } else {\n      $chartContainer.selectAll('.item-polyline').remove();\n      $chartContainer.selectAll('.item-label').remove();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"chart\">\n        <svg>\n          <g class=\"chart-container\">\n            <g class=\"arc-container\"></g>\n            <text class=\"title\" text-anchor=\"middle\"></text>\n            <text class=\"label\" text-anchor=\"middle\" y=\"16\">\n              ${this.label}\n            </text>\n          </g>\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","pie","d3\n            .pie","d3\n            .scaleOrdinal","d3.select","d3\n            .arc","d3.easeCubicInOut","d3.interpolateNumber","html","styles","query","property"],"mappings":"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"}

package/dist/chart-doughnut.js

@@ -0,0 +1,307 @@
+import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
+import { e } from './query-QBcUV-L_.js';
+import { p as pie, o as ordinal, s as select, a as arc, c as cubicInOut, i as interpolateNumber } from './transform-DRuHEvar.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+}
+
+.title {
+  font-family: var(--typography-title-large-emphasized-font-family) !important;
+  font-size: var(--typography-title-large-emphasized-font-size) !important;
+  font-weight: var(--typography-title-large-emphasized-font-weight) !important;
+  line-height: var(--typography-title-large-emphasized-line-height) !important;
+  letter-spacing: var(--typography-title-large-emphasized-letter-spacing) !important;
+  fill: var(--color-on-surface);
+}
+
+.label {
+  font-family: var(--typography-title-medium-font-family) !important;
+  font-size: var(--typography-title-medium-font-size) !important;
+  font-weight: var(--typography-title-medium-font-weight) !important;
+  line-height: var(--typography-title-medium-line-height) !important;
+  letter-spacing: var(--typography-title-medium-letter-spacing) !important;
+  fill: var(--color-on-surface);
+}
+
+.arc {
+  cursor: pointer;
+  transition: filter 150ms ease;
+}
+.arc:hover {
+  filter: brightness(1.2);
+}
+
+.item-polyline {
+  fill: none;
+  stroke-width: 1;
+  stroke: var(--color-on-surface);
+}
+
+.item-label {
+  fill: var(--color-on-surface);
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+}`;
+
+const chartColors = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+    chartColors.push({
+        color: `var(--color-${colorName})`,
+    });
+});
+function debounce(fn, wait) {
+    let timer;
+    return ((...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    });
+}
+/**
+ * @label Chart Doughnut
+ * @tag wc-chart-doughnut
+ * @rawTag chart-doughnut
+ * @summary A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-doughnut width="400" label="Total"></wc-chart-doughnut>
+ * <script>
+ *   document.querySelector('wc-chart-doughnut').data = [
+ *     { name: 'A', value: 30, label: 'Category A' },
+ *     { name: 'B', value: 50, label: 'Category B' },
+ *     { name: 'C', value: 20, label: 'Category C' },
+ *   ];
+ * </script>
+ * ```
+ */
+let ChartDoughnut = class ChartDoughnut extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Width (and height) of the chart in pixels. */
+        this.width = 0;
+        /** Margin around the chart. */
+        this.margin = 10;
+        /** Whether to show labels outside the chart. */
+        this.showLabels = true;
+        /** Chart data array. Each item should have name, value, and optional label and color. */
+        this.data = [];
+        this._initialized = false;
+        this._debouncedRenderChart = debounce(() => {
+            this._renderChart(true);
+        }, 300);
+    }
+    firstUpdated() {
+        this._renderChart(false);
+    }
+    updated(changedProperties) {
+        if (!this._initialized) {
+            this._initialized = true;
+            return;
+        }
+        const watchedProps = ['width', 'margin', 'showLabels', 'data'];
+        const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+        if (hasChanged) {
+            this._debouncedRenderChart();
+        }
+    }
+    _getRadius() {
+        return this.width / 2 - this.margin - 100;
+    }
+    _getTotal() {
+        return this.data.reduce((total, d) => total + d.value, 0);
+    }
+    _getPieData() {
+        const pie$1 = pie()
+            .sort(null)
+            .value(d => d.value);
+        return pie$1(this.data);
+    }
+    _getColorScale() {
+        return ordinal()
+            .domain(this.data.map(d => d.name))
+            .range(chartColors);
+    }
+    _renderChart(animate) {
+        if (!this.svgElement)
+            return;
+        const DURATION = 500;
+        const radius = this._getRadius();
+        const pieData = this._getPieData();
+        const colorScale = this._getColorScale();
+        const total = this._getTotal();
+        const svg = select(this.svgElement);
+        const doughnutArc = arc()
+            .innerRadius(radius * 0.72)
+            .outerRadius(radius);
+        const labelsArc = arc()
+            .innerRadius(radius + 10)
+            .outerRadius(radius + 10);
+        // Update SVG dimensions and center transform
+        svg.attr('width', this.width).attr('height', this.width);
+        svg
+            .select('.chart-container')
+            .attr('transform', `translate(${this.width / 2},${this.width / 2})`);
+        // Arc paths — keyed by name so D3 matches elements across updates
+        const $paths = svg
+            .select('.arc-container')
+            .selectAll('.arc')
+            .data(pieData, d => d.data.name)
+            .join('path')
+            .attr('class', 'arc')
+            .style('fill', d => d.data.color || colorScale(d.data.name).color);
+        if (animate) {
+            $paths
+                .transition()
+                .duration(DURATION)
+                .ease(cubicInOut)
+                .attrTween('d', function (d) {
+                const self = this;
+                // Interpolate from the last rendered angles to the new ones.
+                // New (entering) arcs start collapsed at their startAngle.
+                const prev = self._prevDatum ?? {
+                    startAngle: d.startAngle,
+                    endAngle: d.startAngle,
+                };
+                self._prevDatum = d;
+                const iStart = interpolateNumber(prev.startAngle, d.startAngle);
+                const iEnd = interpolateNumber(prev.endAngle, d.endAngle);
+                return (t) => doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??
+                    '';
+            });
+        }
+        else {
+            // Initial render: draw immediately and seed previous-datum for later tweens
+            $paths
+                .each(function (d) {
+                this._prevDatum = d;
+            })
+                .attr('d', d => doughnutArc(d) ?? '');
+        }
+        // Animate the central total counter
+        const $title = svg.select('.title');
+        if (animate) {
+            $title
+                .transition()
+                .duration(DURATION)
+                .ease(cubicInOut)
+                .tween('text', function () {
+                const sel = select(this);
+                const start = parseFloat(sel.text()) || 0;
+                const interp = interpolateNumber(start, total);
+                return function (t) {
+                    sel.text(Math.round(interp(t)));
+                };
+            });
+        }
+        else {
+            $title.text(total);
+        }
+        // Label polylines and text
+        const $chartContainer = svg.select('.chart-container');
+        if (this.showLabels) {
+            const pointsFn = (d) => {
+                const posA = doughnutArc.centroid(d);
+                const posB = labelsArc.centroid(d);
+                const posC = posB.slice();
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                posC[0] = radius * (midAngle < Math.PI ? 1 : -1);
+                return [posA, posB, posC].map(p => p.join(',')).join(' ');
+            };
+            const transformFn = (d) => {
+                const pos = labelsArc.centroid(d);
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                pos[0] = radius * (midAngle < Math.PI ? 1 : -1);
+                return `translate(${pos})`;
+            };
+            const anchorFn = (d) => {
+                const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;
+                return midAngle < Math.PI ? 'start' : 'end';
+            };
+            const $polylines = $chartContainer
+                .selectAll('.item-polyline')
+                .data(pieData, d => d.data.name)
+                .join('polyline')
+                .attr('class', 'item-polyline');
+            const $labels = $chartContainer
+                .selectAll('.item-label')
+                .data(pieData, d => d.data.name)
+                .join('text')
+                .attr('class', 'item-label')
+                .text(d => d.data.label ?? '');
+            if (animate) {
+                $polylines
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('points', pointsFn);
+                $labels
+                    .transition()
+                    .duration(DURATION)
+                    .ease(cubicInOut)
+                    .attr('transform', transformFn)
+                    .style('text-anchor', anchorFn);
+            }
+            else {
+                $polylines.attr('points', pointsFn);
+                $labels.attr('transform', transformFn).style('text-anchor', anchorFn);
+            }
+        }
+        else {
+            $chartContainer.selectAll('.item-polyline').remove();
+            $chartContainer.selectAll('.item-label').remove();
+        }
+    }
+    render() {
+        return b `
+      <div class="chart">
+        <svg>
+          <g class="chart-container">
+            <g class="arc-container"></g>
+            <text class="title" text-anchor="middle"></text>
+            <text class="label" text-anchor="middle" y="16">
+              ${this.label}
+            </text>
+          </g>
+        </svg>
+      </div>
+    `;
+    }
+};
+ChartDoughnut.styles = [css_248z];
+__decorate([
+    e('svg')
+], ChartDoughnut.prototype, "svgElement", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartDoughnut.prototype, "width", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartDoughnut.prototype, "margin", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'show-labels' })
+], ChartDoughnut.prototype, "showLabels", void 0);
+__decorate([
+    n({ type: Array })
+], ChartDoughnut.prototype, "data", void 0);
+__decorate([
+    n({ type: String })
+], ChartDoughnut.prototype, "label", void 0);
+ChartDoughnut = __decorate([
+    IndividualComponent
+], ChartDoughnut);
+
+export { ChartDoughnut };
+//# sourceMappingURL=chart-doughnut.js.map