@redvars/peacock 3.3.1 → 3.3.2

package/dist/chart-doughnut.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-doughnut.js","sources":["../../src/chart-doughnut/chart-doughnut.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 ChartDoughnutColor = {\n  color: string;\n};\n\nexport type ChartDoughnutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDoughnutColor[] = [];\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<ChartDoughnutItem>;\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 Doughnut\n * @tag wc-chart-doughnut\n * @rawTag chart-doughnut\n * @summary A doughnut 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-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n * <script>\n *   document.querySelector('wc-chart-doughnut').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 ChartDoughnut 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: ChartDoughnutItem[] = [];\n\n  /** Label displayed in the center of the doughnut. */\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<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartDoughnutColor>()\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<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\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<ChartDoughnutItem>>('.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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>>(\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<ChartDoughnutItem>>('.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,WAAW,GAAyB,EAAE;AAC5C,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,SAAS,IAAG;IACzE,WAAW,CAAC,IAAI,CAAC;QACf,KAAK,EAAE,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG;AACnC,KAAA,CAAC;AACJ,CAAC,CAAC;AAOF,SAAS,QAAQ,CAAqC,EAAK,EAAE,IAAY,EAAA;AACvE,IAAA,IAAI,KAAoC;AACxC,IAAA,QAAQ,CAAC,GAAG,IAAW,KAAI;QACzB,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,KAAK,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC;AAC7C,IAAA,CAAC;AACH;AAEA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQA,GAAU,CAAA;AAAtC,IAAA,WAAA,GAAA;;;QAOsC,IAAA,CAAA,KAAK,GAAW,CAAC;;QAGjB,IAAA,CAAA,MAAM,GAAW,EAAE;;QAI9D,IAAA,CAAA,UAAU,GAAY,IAAI;;QAGC,IAAA,CAAA,IAAI,GAAwB,EAAE;QAKjD,IAAA,CAAA,YAAY,GAAG,KAAK;AAEpB,QAAA,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AAC5C,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACzB,CAAC,EAAE,GAAG,CAAC;IA2MT;IAzME,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IAC1B;AAEA,IAAA,OAAO,CAAC,iBAAiC,EAAA;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;YACxB;QACF;QACA,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,CAAC;AAC9D,QAAA,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,qBAAqB,EAAE;QAC9B;IACF;IAEQ,UAAU,GAAA;QAChB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,GAAG;IAC3C;IAEQ,SAAS,GAAA;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3D;IAEQ,WAAW,GAAA;QACjB,MAAMC,KAAG,GAAGC,GACN;aACH,IAAI,CAAC,IAAI;aACT,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;AACtB,QAAA,OAAOD,KAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IACvB;IAEQ,cAAc,GAAA;AACpB,QAAA,OAAOE,OACQ;AACZ,aAAA,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;aACjC,KAAK,CAAC,WAAW,CAAC;IACvB;AAEQ,IAAA,YAAY,CAAC,OAAgB,EAAA;QACnC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;QAEtB,MAAM,QAAQ,GAAG,GAAG;AACpB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;AAChC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AACxC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,EAAE;QAE9B,MAAM,GAAG,GAAGC,MAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAEtC,MAAM,WAAW,GAAGC,GACd;AACH,aAAA,WAAW,CAAC,MAAM,GAAG,IAAI;aACzB,WAAW,CAAC,MAAM,CAAC;QAEtB,MAAM,SAAS,GAAGA,GACZ;AACH,aAAA,WAAW,CAAC,MAAM,GAAG,EAAE;AACvB,aAAA,WAAW,CAAC,MAAM,GAAG,EAAE,CAAC;;AAG3B,QAAA,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;QACxD;aACG,MAAM,CAAC,kBAAkB;AACzB,aAAA,IAAI,CAAC,WAAW,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA,CAAA,CAAG,CAAC;;QAGtE,MAAM,MAAM,GAAG;aACZ,MAAM,CAAC,gBAAgB;aACvB,SAAS,CAAoD,MAAM;AACnE,aAAA,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;aAC9B,IAAI,CAAC,MAAM;AACX,aAAA,IAAI,CAAC,OAAO,EAAE,KAAK;aACnB,KAAK,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC;QAEpE,IAAI,OAAO,EAAE;YACX;AACG,iBAAA,UAAU;iBACV,QAAQ,CAAC,QAAQ;AACjB,iBAAA,IAAI,CAACC,UAAiB;AACtB,iBAAA,SAAS,CAAC,GAAG,EAAE,UAAgC,CAAC,EAAA;gBAC/C,MAAM,IAAI,GAAG,IAAsB;;;AAGnC,gBAAA,MAAM,IAAI,GACR,IAAI,CAAC,UAAU,IAAI;oBACjB,UAAU,EAAE,CAAC,CAAC,UAAU;oBACxB,QAAQ,EAAE,CAAC,CAAC,UAAU;iBACvB;AACH,gBAAA,IAAI,CAAC,UAAU,GAAG,CAAC;AACnB,gBAAA,MAAM,MAAM,GAAGC,iBAAoB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,UAAU,CAAC;AAClE,gBAAA,MAAM,IAAI,GAAGA,iBAAoB,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC;gBAC5D,OAAO,CAAC,CAAS,KACf,WAAW,CAAC,EAAE,GAAG,CAAC,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;AAC/D,oBAAA,EAAE;AACN,YAAA,CAAC,CAAC;QACN;aAAO;;YAEL;iBACG,IAAI,CAAC,UAAgC,CAAC,EAAA;AACpC,gBAAA,IAAuB,CAAC,UAAU,GAAG,CAAC;AACzC,YAAA,CAAC;AACA,iBAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QACzC;;QAGA,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC;QACnC,IAAI,OAAO,EAAE;YACX;AACG,iBAAA,UAAU;iBACV,QAAQ,CAAC,QAAQ;AACjB,iBAAA,IAAI,CAACD,UAAiB;iBACtB,KAAK,CAAC,MAAM,EAAE,YAAA;gBACb,MAAM,GAAG,GAAGF,MAAS,CAAC,IAAsB,CAAC;gBAC7C,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC;gBACzC,MAAM,MAAM,GAAGG,iBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC;AACjD,gBAAA,OAAO,UAAU,CAAS,EAAA;AACxB,oBAAA,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACjC,gBAAA,CAAC;AACH,YAAA,CAAC,CAAC;QACN;aAAO;AACL,YAAA,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;QACpB;;QAGA,MAAM,eAAe,GAAG,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC;AAEtD,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;AACnB,YAAA,MAAM,QAAQ,GAAG,CAAC,CAAoC,KAAI;gBACxD,MAAM,IAAI,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;gBACpC,MAAM,IAAI,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;AAClC,gBAAA,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAsB;AAC7C,gBAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC;gBAC/D,IAAI,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC;gBAChD,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;AAC3D,YAAA,CAAC;AAED,YAAA,MAAM,WAAW,GAAG,CAAC,CAAoC,KAAI;gBAC3D,MAAM,GAAG,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;AACjC,gBAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC;gBAC/D,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,CAAC;gBAC/C,OAAO,CAAA,UAAA,EAAa,GAAG,CAAA,CAAA,CAAG;AAC5B,YAAA,CAAC;AAED,YAAA,MAAM,QAAQ,GAAG,CAAC,CAAoC,KAAI;AACxD,gBAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,UAAU,IAAI,CAAC;AAC/D,gBAAA,OAAO,QAAQ,GAAG,IAAI,CAAC,EAAE,GAAG,OAAO,GAAG,KAAK;AAC7C,YAAA,CAAC;YAED,MAAM,UAAU,GAAG;iBAChB,SAAS,CACR,gBAAgB;AAEjB,iBAAA,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;iBAC9B,IAAI,CAAC,UAAU;AACf,iBAAA,IAAI,CAAC,OAAO,EAAE,eAAe,CAAC;YAEjC,MAAM,OAAO,GAAG;iBACb,SAAS,CAAoD,aAAa;AAC1E,iBAAA,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;iBAC9B,IAAI,CAAC,MAAM;AACX,iBAAA,IAAI,CAAC,OAAO,EAAE,YAAY;AAC1B,iBAAA,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;YAEhC,IAAI,OAAO,EAAE;gBACX;AACG,qBAAA,UAAU;qBACV,QAAQ,CAAC,QAAQ;AACjB,qBAAA,IAAI,CAACD,UAAiB;AACtB,qBAAA,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;gBAC3B;AACG,qBAAA,UAAU;qBACV,QAAQ,CAAC,QAAQ;AACjB,qBAAA,IAAI,CAACA,UAAiB;AACtB,qBAAA,IAAI,CAAC,WAAW,EAAE,WAAW;AAC7B,qBAAA,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;YACnC;iBAAO;AACL,gBAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,CAAC;AACnC,gBAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,KAAK,CAAC,aAAa,EAAE,QAAQ,CAAC;YACvE;QACF;aAAO;YACL,eAAe,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC,MAAM,EAAE;YACpD,eAAe,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,MAAM,EAAE;QACnD;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOE,CAAI,CAAA;;;;;;;AAOC,cAAA,EAAA,IAAI,CAAC,KAAK;;;;;KAKrB;IACH;;AAnOO,aAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGhB,UAAA,CAAA;IADPC,CAAK,CAAC,KAAK;AACoB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGW,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGlB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAsB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAI/D,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACzC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGA,UAAA,CAAA;AAA1B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;AAAiC,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAG9B,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAiB,CAAA,EAAA,aAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AApBhC,aAAa,GAAA,UAAA,CAAA;IADzB;AACY,CAAA,EAAA,aAAa,CAqOzB;;;;"}
+{"version":3,"file":"chart-doughnut.js","sources":["../../src/chart-doughnut/chart-doughnut.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 ChartDoughnutColor = {\n  color: string;\n};\n\nexport type ChartDoughnutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDoughnutColor[] = [];\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<ChartDoughnutItem>;\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 Doughnut\n * @tag wc-chart-doughnut\n * @rawTag chart-doughnut\n * @summary A doughnut 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-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n * <script>\n *   document.querySelector('wc-chart-doughnut').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 ChartDoughnut 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: ChartDoughnutItem[] = [];\n\n  /** Label displayed in the center of the doughnut. */\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<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartDoughnutColor>()\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<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\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<ChartDoughnutItem>>('.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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>) => {\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<ChartDoughnutItem>>(\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<ChartDoughnutItem>>('.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-pie.js

@@ -1,6 +1,8 @@
-import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
+import { a as i, _ as __decorate, n, I as IndividualComponent, i as i$1, b } from './IndividualComponent-Dt5xirYG.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';
+import { o as ordinal, s as select, c as cubicInOut, i as interpolateNumber } from './transform-DSwFSqzD.js';
+import { p as pie, a as arc } from './pie-Dz0IDiPt.js';
+import './array-D5vjT2Xm.js';
 
 var css_248z = i`* {
   box-sizing: border-box;

package/dist/chart-pie.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-pie.js","sources":["../../src/chart-pie/chart-pie.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-pie.scss';\n\nexport type ChartPieColor = {\n  color: string;\n};\n\nexport type ChartPieItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartPieColor[] = [];\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<ChartPieItem>;\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 Pie\n * @tag wc-chart-pie\n * @rawTag chart-pie\n * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-pie width=\"400\"></wc-chart-pie>\n * <script>\n *   document.querySelector('wc-chart-pie').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 ChartPie 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: ChartPieItem[] = [];\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    // Reserve 100px on each side for labels and padding\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartPieItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartPieColor>()\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\n    const svg = d3.select(this.svgElement);\n\n    const pieArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\n      .innerRadius(0)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\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<ChartPieItem>>('.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            pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';\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 => pieArc(d) ?? '');\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<ChartPieItem>) => {\n        const posA = pieArc.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<ChartPieItem>) => {\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<ChartPieItem>) => {\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<ChartPieItem>>(\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<ChartPieItem>>('.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          </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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"}
+{"version":3,"file":"chart-pie.js","sources":["../../src/chart-pie/chart-pie.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-pie.scss';\n\nexport type ChartPieColor = {\n  color: string;\n};\n\nexport type ChartPieItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartPieColor[] = [];\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<ChartPieItem>;\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 Pie\n * @tag wc-chart-pie\n * @rawTag chart-pie\n * @summary A pie chart is a circular statistical graphic that visually represents numerical proportions.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-pie width=\"400\"></wc-chart-pie>\n * <script>\n *   document.querySelector('wc-chart-pie').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 ChartPie 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: ChartPieItem[] = [];\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    // Reserve 100px on each side for labels and padding\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartPieItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartPieColor>()\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\n    const svg = d3.select(this.svgElement);\n\n    const pieArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\n      .innerRadius(0)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartPieItem>>()\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<ChartPieItem>>('.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            pieArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ?? '';\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 => pieArc(d) ?? '');\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<ChartPieItem>) => {\n        const posA = pieArc.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<ChartPieItem>) => {\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<ChartPieItem>) => {\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<ChartPieItem>>(\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<ChartPieItem>>('.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          </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-stacked-bar.js

@@ -0,0 +1,401 @@
+import { _ as __decorate, n, I as IndividualComponent, i, b } from './IndividualComponent-Dt5xirYG.js';
+import { e } from './query-QBcUV-L_.js';
+import { o } from './style-map-DcB52w-l.js';
+import { o as ordinal, s as select } from './transform-DSwFSqzD.js';
+import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-DbnXQgvS.js';
+import { c as constant, a as array } from './array-D5vjT2Xm.js';
+import './directive-Cuw6h7YA.js';
+
+function none$1(series, order) {
+  if (!((n = series.length) > 1)) return;
+  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {
+    s0 = s1, s1 = series[order[i]];
+    for (j = 0; j < m; ++j) {
+      s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];
+    }
+  }
+}
+
+function none(series) {
+  var n = series.length, o = new Array(n);
+  while (--n >= 0) o[n] = n;
+  return o;
+}
+
+function stackValue(d, key) {
+  return d[key];
+}
+
+function stackSeries(key) {
+  const series = [];
+  series.key = key;
+  return series;
+}
+
+function stack() {
+  var keys = constant([]),
+      order = none,
+      offset = none$1,
+      value = stackValue;
+
+  function stack(data) {
+    var sz = Array.from(keys.apply(this, arguments), stackSeries),
+        i, n = sz.length, j = -1,
+        oz;
+
+    for (const d of data) {
+      for (i = 0, ++j; i < n; ++i) {
+        (sz[i][j] = [0, +value(d, sz[i].key, j, data)]).data = d;
+      }
+    }
+
+    for (i = 0, oz = array(order(sz)); i < n; ++i) {
+      sz[oz[i]].index = i;
+    }
+
+    offset(sz, oz);
+    return sz;
+  }
+
+  stack.keys = function(_) {
+    return arguments.length ? (keys = typeof _ === "function" ? _ : constant(Array.from(_)), stack) : keys;
+  };
+
+  stack.value = function(_) {
+    return arguments.length ? (value = typeof _ === "function" ? _ : constant(+_), stack) : value;
+  };
+
+  stack.order = function(_) {
+    return arguments.length ? (order = _ == null ? none : typeof _ === "function" ? _ : constant(Array.from(_)), stack) : order;
+  };
+
+  stack.offset = function(_) {
+    return arguments.length ? (offset = _ == null ? none$1 : _, stack) : offset;
+  };
+
+  return stack;
+}
+
+const chartColors = [];
+['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {
+    chartColors.push(`var(--color-${colorName})`);
+});
+const DEFAULT_WIDTH = 520;
+const DEFAULT_HEIGHT = 360;
+const BAR_RADIUS = 8;
+const DURATION = 450;
+function debounce(fn, wait) {
+    let timer;
+    return ((...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => fn(...args), wait);
+    });
+}
+/**
+ * @label Chart Stacked Bar
+ * @tag wc-chart-stacked-bar
+ * @rawTag chart-stacked-bar
+ * @summary A stacked bar chart that groups series by category using Material Design 3 tokens.
+ * @tags charts
+ *
+ * @example
+ * ```html
+ * <wc-chart-stacked-bar width="560" height="360"></wc-chart-stacked-bar>
+ * <script>
+ *   document.querySelector('wc-chart-stacked-bar').data = [
+ *     {
+ *       name: 'q1',
+ *       label: 'Q1',
+ *       segments: [
+ *         { name: 'mobile', label: 'Mobile', value: 40 },
+ *         { name: 'web', label: 'Web', value: 25 },
+ *         { name: 'store', label: 'Store', value: 15 },
+ *       ],
+ *     },
+ *     {
+ *       name: 'q2',
+ *       label: 'Q2',
+ *       segments: [
+ *         { name: 'mobile', label: 'Mobile', value: 32 },
+ *         { name: 'web', label: 'Web', value: 30 },
+ *         { name: 'store', label: 'Store', value: 18 },
+ *       ],
+ *     },
+ *   ];
+ * </script>
+ * ```
+ */
+let ChartStackedBar = class ChartStackedBar extends i {
+    constructor() {
+        super(...arguments);
+        /** Width of the chart in pixels. */
+        this.width = 0;
+        /** Height of the chart in pixels. */
+        this.height = DEFAULT_HEIGHT;
+        /** Margin around the chart drawing area. */
+        this.margin = 28;
+        /** Chart data array. Each item holds the stacked segments for a category. */
+        this.data = [];
+        /** Whether to render total value labels above each stack. */
+        this.showValues = true;
+        /** Whether to render the legend. */
+        this.showLegend = true;
+        this._initialized = false;
+        this._debouncedRenderChart = debounce(() => {
+            this._renderChart(true);
+        }, 200);
+    }
+    firstUpdated() {
+        this._renderChart(false);
+    }
+    updated(changedProperties) {
+        if (!this._initialized) {
+            this._initialized = true;
+            return;
+        }
+        const watchedProps = [
+            'width',
+            'height',
+            'margin',
+            'data',
+            'showValues',
+            'showLegend',
+        ];
+        const hasChanged = watchedProps.some(prop => changedProperties.has(prop));
+        if (hasChanged) {
+            this._debouncedRenderChart();
+        }
+    }
+    _getSegmentKeys() {
+        const keys = new Set();
+        this.data?.forEach(item => {
+            item.segments?.forEach(segment => keys.add(segment.name));
+        });
+        return Array.from(keys);
+    }
+    _getColorScale(keys) {
+        return ordinal()
+            .domain(keys)
+            .range(chartColors);
+    }
+    _getColorMap(keys, scale) {
+        const map = new Map();
+        keys.forEach(key => {
+            const override = this.data
+                .map(item => item.segments.find(seg => seg.name === key)?.color)
+                .find(color => !!color);
+            map.set(key, override || scale(key));
+        });
+        return map;
+    }
+    _getSegmentLabel(key) {
+        const segment = this.data
+            .map(item => item.segments.find(seg => seg.name === key))
+            .find(Boolean);
+        return segment?.label ?? key;
+    }
+    _getTotals() {
+        return this.data.map(item => item.segments.reduce((sum, seg) => sum + seg.value, 0));
+    }
+    _renderChart(animate) {
+        if (!this.svgElement)
+            return;
+        const width = this.width > 0 ? this.width : DEFAULT_WIDTH;
+        const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;
+        const margin = Math.max(this.margin, 16);
+        const data = this.data ?? [];
+        const svg = select(this.svgElement);
+        svg.attr('width', width).attr('height', height);
+        const innerWidth = Math.max(width - margin * 2, 0);
+        const innerHeight = Math.max(height - margin * 2, 0);
+        const container = svg.select('.chart-container');
+        container.attr('transform', `translate(${margin},${margin})`);
+        if (!data.length || innerWidth === 0 || innerHeight === 0) {
+            container.select('.bars').selectAll('*').remove();
+            container.select('.x-axis').selectAll('*').remove();
+            container.select('.y-grid').selectAll('*').remove();
+            container.select('.value-labels').selectAll('*').remove();
+            return;
+        }
+        const keys = this._getSegmentKeys();
+        const colorScale = this._getColorScale(keys);
+        const colorMap = this._getColorMap(keys, colorScale);
+        const totals = this._getTotals();
+        const xScale = band()
+            .domain(data.map(d => d.name))
+            .range([0, innerWidth])
+            .padding(0.3);
+        const maxValue = max(totals) ?? 0;
+        const yScale = linear()
+            .domain([0, maxValue || 1])
+            .nice()
+            .range([innerHeight, 0]);
+        const stackedSeries = stack()
+            .keys(keys)
+            .value((d, key) => d.segments.find(segment => segment.name === key)?.value ?? 0)(data);
+        const yGrid = container.select('.y-grid');
+        yGrid
+            .call(axisLeft(yScale)
+            .ticks(5)
+            .tickSize(-innerWidth)
+            .tickFormat(() => ''))
+            .selectAll('.tick text')
+            .remove();
+        yGrid.select('.domain').remove();
+        yGrid.selectAll('.tick line').attr('class', 'gridline');
+        const xAxis = container.select('.x-axis');
+        xAxis
+            .attr('transform', `translate(0,${innerHeight})`)
+            .call(axisBottom(xScale)
+            .tickSizeOuter(0)
+            .tickFormat(name => {
+            const entry = data.find(d => d.name === name);
+            return entry?.label ?? name;
+        }));
+        xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');
+        xAxis.selectAll('.tick line').remove();
+        xAxis
+            .selectAll('.tick text')
+            .attr('class', 'axis-label')
+            .attr('dy', '1.1em');
+        const barGroups = container
+            .select('.bars')
+            .selectAll('.bar-group')
+            .data(stackedSeries, series => series.key)
+            .join(enter => enter
+            .append('g')
+            .attr('class', 'bar-group')
+            .style('fill', series => colorMap.get(series.key) ?? ''), update => update, exit => exit.remove())
+            .style('fill', series => colorMap.get(series.key) ?? colorScale(series.key));
+        const segmentJoin = barGroups
+            .selectAll('rect')
+            .data(series => series, d => d.data.name)
+            .join(enter => enter
+            .append('rect')
+            .attr('class', 'stacked-segment')
+            .attr('x', d => xScale(d.data.name) ?? 0)
+            .attr('width', xScale.bandwidth())
+            .attr('y', innerHeight)
+            .attr('height', 0)
+            .attr('rx', BAR_RADIUS)
+            .attr('ry', BAR_RADIUS), update => update, exit => exit
+            .transition()
+            .duration(DURATION)
+            .attr('y', innerHeight)
+            .attr('height', 0)
+            .remove());
+        segmentJoin
+            .attr('x', d => xScale(d.data.name) ?? 0)
+            .attr('width', xScale.bandwidth())
+            .attr('rx', BAR_RADIUS)
+            .attr('ry', BAR_RADIUS);
+        if (animate) {
+            segmentJoin
+                .transition()
+                .duration(DURATION)
+                .attr('y', d => yScale(d[1]))
+                .attr('height', d => yScale(d[0]) - yScale(d[1]));
+        }
+        else {
+            segmentJoin
+                .attr('y', d => yScale(d[1]))
+                .attr('height', d => yScale(d[0]) - yScale(d[1]));
+        }
+        const totalLabels = container
+            .select('.value-labels')
+            .selectAll('text')
+            .data(this.showValues ? data : [], d => d.name)
+            .join(enter => enter
+            .append('text')
+            .attr('class', 'value-label')
+            .attr('text-anchor', 'middle')
+            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+            .attr('y', innerHeight - 6)
+            .text(d => d.segments
+            .reduce((sum, seg) => sum + seg.value, 0)
+            .toLocaleString()), update => update, exit => exit.remove());
+        const labelPosition = (item) => {
+            const total = item.segments.reduce((sum, seg) => sum + seg.value, 0);
+            const offset = yScale(total) - 8;
+            return Math.min(offset, innerHeight - 8);
+        };
+        if (animate) {
+            totalLabels
+                .transition()
+                .duration(DURATION)
+                .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+                .attr('y', d => labelPosition(d))
+                .text(d => d.segments
+                .reduce((sum, seg) => sum + seg.value, 0)
+                .toLocaleString());
+        }
+        else {
+            totalLabels
+                .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)
+                .attr('y', d => labelPosition(d))
+                .text(d => d.segments
+                .reduce((sum, seg) => sum + seg.value, 0)
+                .toLocaleString());
+        }
+    }
+    render() {
+        const keys = this._getSegmentKeys();
+        const colorScale = this._getColorScale(keys);
+        const colorMap = this._getColorMap(keys, colorScale);
+        const legendItems = keys.map(key => ({
+            name: this._getSegmentLabel(key),
+            color: colorMap.get(key) ?? colorScale(key),
+        }));
+        return b `
+      <div class="chart-frame">
+        <svg role="img" aria-label="Stacked bar chart">
+          <g class="chart-container">
+            <g class="y-grid"></g>
+            <g class="bars"></g>
+            <g class="x-axis"></g>
+            <g class="value-labels"></g>
+          </g>
+        </svg>
+        ${this.showLegend && legendItems.length
+            ? b `<div class="legend" role="list">
+              ${legendItems.map(item => b `<span class="legend-item" role="listitem">
+                  <span
+                    class="swatch"
+                    style=${o({ background: item.color })}
+                  ></span>
+                  <span>${item.name}</span>
+                </span>`)}
+            </div>`
+            : null}
+      </div>
+    `;
+    }
+};
+ChartStackedBar.styles = [css_248z];
+__decorate([
+    e('svg')
+], ChartStackedBar.prototype, "svgElement", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartStackedBar.prototype, "width", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], ChartStackedBar.prototype, "height", void 0);
+__decorate([
+    n({ type: Number })
+], ChartStackedBar.prototype, "margin", void 0);
+__decorate([
+    n({ type: Array })
+], ChartStackedBar.prototype, "data", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-values' })
+], ChartStackedBar.prototype, "showValues", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-legend' })
+], ChartStackedBar.prototype, "showLegend", void 0);
+ChartStackedBar = __decorate([
+    IndividualComponent
+], ChartStackedBar);
+
+export { ChartStackedBar };
+//# sourceMappingURL=chart-stacked-bar.js.map

package/dist/chart-stacked-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-stacked-bar.js","sources":["../node_modules/d3-shape/src/offset/none.js","../node_modules/d3-shape/src/order/none.js","../node_modules/d3-shape/src/stack.js","../../src/chart-bar/chart-stacked-bar.ts"],"sourcesContent":["export default function(series, order) {\n  if (!((n = series.length) > 1)) return;\n  for (var i = 1, j, s0, s1 = series[order[0]], n, m = s1.length; i < n; ++i) {\n    s0 = s1, s1 = series[order[i]];\n    for (j = 0; j < m; ++j) {\n      s1[j][1] += s1[j][0] = isNaN(s0[j][1]) ? s0[j][0] : s0[j][1];\n    }\n  }\n}\n","export default function(series) {\n  var n = series.length, o = new Array(n);\n  while (--n >= 0) o[n] = n;\n  return o;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport offsetNone from \"./offset/none.js\";\nimport orderNone from \"./order/none.js\";\n\nfunction stackValue(d, key) {\n  return d[key];\n}\n\nfunction stackSeries(key) {\n  const series = [];\n  series.key = key;\n  return series;\n}\n\nexport default function() {\n  var keys = constant([]),\n      order = orderNone,\n      offset = offsetNone,\n      value = stackValue;\n\n  function stack(data) {\n    var sz = Array.from(keys.apply(this, arguments), stackSeries),\n        i, n = sz.length, j = -1,\n        oz;\n\n    for (const d of data) {\n      for (i = 0, ++j; i < n; ++i) {\n        (sz[i][j] = [0, +value(d, sz[i].key, j, data)]).data = d;\n      }\n    }\n\n    for (i = 0, oz = array(order(sz)); i < n; ++i) {\n      sz[oz[i]].index = i;\n    }\n\n    offset(sz, oz);\n    return sz;\n  }\n\n  stack.keys = function(_) {\n    return arguments.length ? (keys = typeof _ === \"function\" ? _ : constant(Array.from(_)), stack) : keys;\n  };\n\n  stack.value = function(_) {\n    return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), stack) : value;\n  };\n\n  stack.order = function(_) {\n    return arguments.length ? (order = _ == null ? orderNone : typeof _ === \"function\" ? _ : constant(Array.from(_)), stack) : order;\n  };\n\n  stack.offset = function(_) {\n    return arguments.length ? (offset = _ == null ? offsetNone : _, stack) : offset;\n  };\n\n  return stack;\n}\n","import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-bar.scss';\n\nexport type ChartStackedSegment = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nexport type ChartStackedBarItem = {\n  name: string;\n  label?: string;\n  segments: ChartStackedSegment[];\n};\n\nconst chartColors: string[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push(`var(--color-${colorName})`);\n});\n\nconst DEFAULT_WIDTH = 520;\nconst DEFAULT_HEIGHT = 360;\nconst BAR_RADIUS = 8;\nconst DURATION = 450;\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 Stacked Bar\n * @tag wc-chart-stacked-bar\n * @rawTag chart-stacked-bar\n * @summary A stacked bar chart that groups series by category using Material Design 3 tokens.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-stacked-bar width=\"560\" height=\"360\"></wc-chart-stacked-bar>\n * <script>\n *   document.querySelector('wc-chart-stacked-bar').data = [\n *     {\n *       name: 'q1',\n *       label: 'Q1',\n *       segments: [\n *         { name: 'mobile', label: 'Mobile', value: 40 },\n *         { name: 'web', label: 'Web', value: 25 },\n *         { name: 'store', label: 'Store', value: 15 },\n *       ],\n *     },\n *     {\n *       name: 'q2',\n *       label: 'Q2',\n *       segments: [\n *         { name: 'mobile', label: 'Mobile', value: 32 },\n *         { name: 'web', label: 'Web', value: 30 },\n *         { name: 'store', label: 'Store', value: 18 },\n *       ],\n *     },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartStackedBar extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Height of the chart in pixels. */\n  @property({ type: Number, reflect: true }) height: number = DEFAULT_HEIGHT;\n\n  /** Margin around the chart drawing area. */\n  @property({ type: Number }) margin: number = 28;\n\n  /** Chart data array. Each item holds the stacked segments for a category. */\n  @property({ type: Array }) data: ChartStackedBarItem[] = [];\n\n  /** Whether to render total value labels above each stack. */\n  @property({ type: Boolean, attribute: 'show-values' }) showValues: boolean = true;\n\n  /** Whether to render the legend. */\n  @property({ type: Boolean, attribute: 'show-legend' }) showLegend: boolean = true;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 200);\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 = [\n      'width',\n      'height',\n      'margin',\n      'data',\n      'showValues',\n      'showLegend',\n    ];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getSegmentKeys() {\n    const keys = new Set<string>();\n    this.data?.forEach(item => {\n      item.segments?.forEach(segment => keys.add(segment.name));\n    });\n    return Array.from(keys);\n  }\n\n  private _getColorScale(keys: string[]) {\n    return d3\n      .scaleOrdinal<string, string>()\n      .domain(keys)\n      .range(chartColors);\n  }\n\n  private _getColorMap(\n    keys: string[],\n    scale: d3.ScaleOrdinal<string, string>,\n  ) {\n    const map = new Map<string, string>();\n    keys.forEach(key => {\n      const override = this.data\n        .map(item => item.segments.find(seg => seg.name === key)?.color)\n        .find(color => !!color);\n      map.set(key, override || scale(key));\n    });\n    return map;\n  }\n\n  private _getSegmentLabel(key: string) {\n    const segment = this.data\n      .map(item => item.segments.find(seg => seg.name === key))\n      .find(Boolean);\n    return segment?.label ?? key;\n  }\n\n  private _getTotals() {\n    return this.data.map(item =>\n      item.segments.reduce((sum, seg) => sum + seg.value, 0),\n    );\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const width = this.width > 0 ? this.width : DEFAULT_WIDTH;\n    const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;\n    const margin = Math.max(this.margin, 16);\n    const data = this.data ?? [];\n\n    const svg = d3.select(this.svgElement);\n    svg.attr('width', width).attr('height', height);\n\n    const innerWidth = Math.max(width - margin * 2, 0);\n    const innerHeight = Math.max(height - margin * 2, 0);\n\n    const container = svg.select<SVGGElement>('.chart-container');\n    container.attr('transform', `translate(${margin},${margin})`);\n\n    if (!data.length || innerWidth === 0 || innerHeight === 0) {\n      container.select('.bars').selectAll('*').remove();\n      container.select('.x-axis').selectAll('*').remove();\n      container.select('.y-grid').selectAll('*').remove();\n      container.select('.value-labels').selectAll('*').remove();\n      return;\n    }\n\n    const keys = this._getSegmentKeys();\n    const colorScale = this._getColorScale(keys);\n    const colorMap = this._getColorMap(keys, colorScale);\n\n    const totals = this._getTotals();\n    const xScale = d3\n      .scaleBand<string>()\n      .domain(data.map(d => d.name))\n      .range([0, innerWidth])\n      .padding(0.3);\n    const maxValue = d3.max(totals) ?? 0;\n    const yScale = d3\n      .scaleLinear()\n      .domain([0, maxValue || 1])\n      .nice()\n      .range([innerHeight, 0]);\n\n    const stackedSeries = d3\n      .stack<ChartStackedBarItem, string>()\n      .keys(keys)\n      .value(\n        (d, key) => d.segments.find(segment => segment.name === key)?.value ?? 0,\n      )(data);\n\n    const yGrid = container.select<SVGGElement>('.y-grid');\n    yGrid\n      .call(\n        d3\n          .axisLeft(yScale)\n          .ticks(5)\n          .tickSize(-innerWidth)\n          .tickFormat(() => ''),\n      )\n      .selectAll('.tick text')\n      .remove();\n    yGrid.select('.domain').remove();\n    yGrid.selectAll('.tick line').attr('class', 'gridline');\n\n    const xAxis = container.select<SVGGElement>('.x-axis');\n    xAxis\n      .attr('transform', `translate(0,${innerHeight})`)\n      .call(\n        d3\n          .axisBottom(xScale)\n          .tickSizeOuter(0)\n          .tickFormat(name => {\n            const entry = data.find(d => d.name === name);\n            return entry?.label ?? name;\n          }),\n      );\n    xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');\n    xAxis.selectAll('.tick line').remove();\n    xAxis\n      .selectAll('.tick text')\n      .attr('class', 'axis-label')\n      .attr('dy', '1.1em');\n\n    const barGroups = container\n      .select('.bars')\n      .selectAll<SVGGElement, d3.Series<ChartStackedBarItem, string>>(\n        '.bar-group',\n      )\n      .data(stackedSeries, series => series.key)\n      .join(\n        enter =>\n          enter\n            .append('g')\n            .attr('class', 'bar-group')\n            .style('fill', series => colorMap.get(series.key) ?? ''),\n        update => update,\n        exit => exit.remove(),\n      )\n      .style('fill', series => colorMap.get(series.key) ?? colorScale(series.key));\n\n    const segmentJoin = barGroups\n      .selectAll<SVGRectElement, d3.SeriesPoint<ChartStackedBarItem>>('rect')\n      .data(series => series, d => d.data.name)\n      .join(\n        enter =>\n          enter\n            .append('rect')\n            .attr('class', 'stacked-segment')\n            .attr('x', d => xScale(d.data.name) ?? 0)\n            .attr('width', xScale.bandwidth())\n            .attr('y', innerHeight)\n            .attr('height', 0)\n            .attr('rx', BAR_RADIUS)\n            .attr('ry', BAR_RADIUS),\n        update => update,\n        exit =>\n          exit\n            .transition()\n            .duration(DURATION)\n            .attr('y', innerHeight)\n            .attr('height', 0)\n            .remove(),\n      );\n\n    segmentJoin\n      .attr('x', d => xScale(d.data.name) ?? 0)\n      .attr('width', xScale.bandwidth())\n      .attr('rx', BAR_RADIUS)\n      .attr('ry', BAR_RADIUS);\n\n    if (animate) {\n      segmentJoin\n        .transition()\n        .duration(DURATION)\n        .attr('y', d => yScale(d[1]))\n        .attr('height', d => yScale(d[0]) - yScale(d[1]));\n    } else {\n      segmentJoin\n        .attr('y', d => yScale(d[1]))\n        .attr('height', d => yScale(d[0]) - yScale(d[1]));\n    }\n\n    const totalLabels = container\n      .select('.value-labels')\n      .selectAll<SVGTextElement, ChartStackedBarItem>('text')\n      .data(this.showValues ? data : [], d => d.name)\n      .join(\n        enter =>\n          enter\n            .append('text')\n            .attr('class', 'value-label')\n            .attr('text-anchor', 'middle')\n            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n            .attr('y', innerHeight - 6)\n            .text(d =>\n              d.segments\n                .reduce((sum, seg) => sum + seg.value, 0)\n                .toLocaleString(),\n            ),\n        update => update,\n        exit => exit.remove(),\n      );\n\n    const labelPosition = (item: ChartStackedBarItem) => {\n      const total = item.segments.reduce((sum, seg) => sum + seg.value, 0);\n      const offset = yScale(total) - 8;\n      return Math.min(offset, innerHeight - 8);\n    };\n\n    if (animate) {\n      totalLabels\n        .transition()\n        .duration(DURATION)\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => labelPosition(d))\n        .text(d =>\n          d.segments\n            .reduce((sum, seg) => sum + seg.value, 0)\n            .toLocaleString(),\n        );\n    } else {\n      totalLabels\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => labelPosition(d))\n        .text(d =>\n          d.segments\n            .reduce((sum, seg) => sum + seg.value, 0)\n            .toLocaleString(),\n        );\n    }\n  }\n\n  render() {\n    const keys = this._getSegmentKeys();\n    const colorScale = this._getColorScale(keys);\n    const colorMap = this._getColorMap(keys, colorScale);\n\n    const legendItems = keys.map(key => ({\n      name: this._getSegmentLabel(key),\n      color: colorMap.get(key) ?? colorScale(key),\n    }));\n\n    return html`\n      <div class=\"chart-frame\">\n        <svg role=\"img\" aria-label=\"Stacked bar chart\">\n          <g class=\"chart-container\">\n            <g class=\"y-grid\"></g>\n            <g class=\"bars\"></g>\n            <g class=\"x-axis\"></g>\n            <g class=\"value-labels\"></g>\n          </g>\n        </svg>\n        ${this.showLegend && legendItems.length\n          ? html`<div class=\"legend\" role=\"list\">\n              ${legendItems.map(\n                item => html`<span class=\"legend-item\" role=\"listitem\">\n                  <span\n                    class=\"swatch\"\n                    style=${styleMap({ background: item.color })}\n                  ></span>\n                  <span>${item.name}</span>\n                </span>`,\n              )}\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-chart-stacked-bar': ChartStackedBar;\n  }\n}\n"],"names":["orderNone","offsetNone","LitElement","d3\n            .scaleOrdinal","d3.select","d3\n            .scaleBand","d3.max","d3\n            .scaleLinear","d3\n            .stack","d3\n            .axisLeft","d3\n            .axisBottom","html","styleMap","styles","query","property"],"mappings":";;;;;;;;AAAe,eAAQ,CAAC,MAAM,EAAE,KAAK,EAAE;AACvC,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE;AAClC,EAAE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE;AAC9E,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AAClC,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE;AAC5B,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI;AACJ,EAAE;AACF;;ACRe,aAAQ,CAAC,MAAM,EAAE;AAChC,EAAE,IAAI,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,KAAK,CAAC,CAAC,CAAC;AACzC,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;AAC3B,EAAE,OAAO,CAAC;AACV;;ACCA,SAAS,UAAU,CAAC,CAAC,EAAE,GAAG,EAAE;AAC5B,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC;AACf;;AAEA,SAAS,WAAW,CAAC,GAAG,EAAE;AAC1B,EAAE,MAAM,MAAM,GAAG,EAAE;AACnB,EAAE,MAAM,CAAC,GAAG,GAAG,GAAG;AAClB,EAAE,OAAO,MAAM;AACf;;AAEe,cAAQ,GAAG;AAC1B,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,EAAE,CAAC;AACzB,MAAM,KAAK,GAAGA,IAAS;AACvB,MAAM,MAAM,GAAGC,MAAU;AACzB,MAAM,KAAK,GAAG,UAAU;;AAExB,EAAE,SAAS,KAAK,CAAC,IAAI,EAAE;AACvB,IAAI,IAAI,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,WAAW,CAAC;AACjE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE;AAChC,QAAQ,EAAE;;AAEV,IAAI,KAAK,MAAM,CAAC,IAAI,IAAI,EAAE;AAC1B,MAAM,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE;AACnC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,EAAE,IAAI,GAAG,CAAC;AAChE,MAAM;AACN,IAAI;;AAEJ,IAAI,KAAK,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,EAAE;AACnD,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC;AACzB,IAAI;;AAEJ,IAAI,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC;AAClB,IAAI,OAAO,EAAE;AACb,EAAE;;AAEF,EAAE,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC,EAAE;AAC3B,IAAI,OAAO,SAAS,CAAC,MAAM,IAAI,IAAI,GAAG,OAAO,CAAC,KAAK,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,IAAI;AAC1G,EAAE,CAAC;;AAEH,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,EAAE;AAC5B,IAAI,OAAO,SAAS,CAAC,MAAM,IAAI,KAAK,GAAG,OAAO,CAAC,KAAK,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,KAAK;AACjG,EAAE,CAAC;;AAEH,EAAE,KAAK,CAAC,KAAK,GAAG,SAAS,CAAC,EAAE;AAC5B,IAAI,OAAO,SAAS,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,IAAI,IAAI,GAAGD,IAAS,GAAG,OAAO,CAAC,KAAK,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,KAAK;AACpI,EAAE,CAAC;;AAEH,EAAE,KAAK,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE;AAC7B,IAAI,OAAO,SAAS,CAAC,MAAM,IAAI,MAAM,GAAG,CAAC,IAAI,IAAI,GAAGC,MAAU,GAAG,CAAC,EAAE,KAAK,IAAI,MAAM;AACnF,EAAE,CAAC;;AAEH,EAAE,OAAO,KAAK;AACd;;ACrCA,MAAM,WAAW,GAAa,EAAE;AAChC,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,SAAS,IAAG;AACzE,IAAA,WAAW,CAAC,IAAI,CAAC,eAAe,SAAS,CAAA,CAAA,CAAG,CAAC;AAC/C,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG;AACzB,MAAM,cAAc,GAAG,GAAG;AAC1B,MAAM,UAAU,GAAG,CAAC;AACpB,MAAM,QAAQ,GAAG,GAAG;AAEpB,SAAS,QAAQ,CAAqC,EAAK,EAAE,IAAY,EAAA;AACvE,IAAA,IAAI,KAAoC;AACxC,IAAA,QAAQ,CAAC,GAAG,IAAW,KAAI;QACzB,YAAY,CAAC,KAAK,CAAC;AACnB,QAAA,KAAK,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,CAAC;AAC7C,IAAA,CAAC;AACH;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQC,CAAU,CAAA;AAAxC,IAAA,WAAA,GAAA;;;QAOsC,IAAA,CAAA,KAAK,GAAW,CAAC;;QAGjB,IAAA,CAAA,MAAM,GAAW,cAAc;;QAG9C,IAAA,CAAA,MAAM,GAAW,EAAE;;QAGpB,IAAA,CAAA,IAAI,GAA0B,EAAE;;QAGJ,IAAA,CAAA,UAAU,GAAY,IAAI;;QAG1B,IAAA,CAAA,UAAU,GAAY,IAAI;QAEzE,IAAA,CAAA,YAAY,GAAG,KAAK;AAEpB,QAAA,IAAA,CAAA,qBAAqB,GAAG,QAAQ,CAAC,MAAK;AAC5C,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;QACzB,CAAC,EAAE,GAAG,CAAC;IAsST;IApSE,YAAY,GAAA;AACV,QAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IAC1B;AAEA,IAAA,OAAO,CAAC,iBAAiC,EAAA;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;AACtB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;YACxB;QACF;AACA,QAAA,MAAM,YAAY,GAAG;YACnB,OAAO;YACP,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,YAAY;YACZ,YAAY;SACb;AACD,QAAA,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACzE,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,qBAAqB,EAAE;QAC9B;IACF;IAEQ,eAAe,GAAA;AACrB,QAAA,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU;AAC9B,QAAA,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,IAAG;AACxB,YAAA,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AAC3D,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;IACzB;AAEQ,IAAA,cAAc,CAAC,IAAc,EAAA;AACnC,QAAA,OAAOC,OACQ;aACZ,MAAM,CAAC,IAAI;aACX,KAAK,CAAC,WAAW,CAAC;IACvB;IAEQ,YAAY,CAClB,IAAc,EACd,KAAsC,EAAA;AAEtC,QAAA,MAAM,GAAG,GAAG,IAAI,GAAG,EAAkB;AACrC,QAAA,IAAI,CAAC,OAAO,CAAC,GAAG,IAAG;AACjB,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC;iBACnB,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK;iBAC9D,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC;AACzB,YAAA,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,QAAQ,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC;AACtC,QAAA,CAAC,CAAC;AACF,QAAA,OAAO,GAAG;IACZ;AAEQ,IAAA,gBAAgB,CAAC,GAAW,EAAA;AAClC,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC;aAClB,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC;aACvD,IAAI,CAAC,OAAO,CAAC;AAChB,QAAA,OAAO,OAAO,EAAE,KAAK,IAAI,GAAG;IAC9B;IAEQ,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,IACvB,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,CACvD;IACH;AAEQ,IAAA,YAAY,CAAC,OAAgB,EAAA;QACnC,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE;AAEtB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,aAAa;AACzD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,cAAc;AAC7D,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AACxC,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE;QAE5B,MAAM,GAAG,GAAGC,MAAS,CAAC,IAAI,CAAC,UAAU,CAAC;AACtC,QAAA,GAAG,CAAC,IAAI,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,CAAC;AAE/C,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC;AAClD,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC;QAEpD,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAc,kBAAkB,CAAC;QAC7D,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,CAAA,UAAA,EAAa,MAAM,CAAA,CAAA,EAAI,MAAM,CAAA,CAAA,CAAG,CAAC;AAE7D,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,UAAU,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC,EAAE;AACzD,YAAA,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE;AACjD,YAAA,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE;AACnD,YAAA,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE;AACnD,YAAA,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE;YACzD;QACF;AAEA,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,EAAE;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;AAEpD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;QAChC,MAAM,MAAM,GAAGC,IACH;AACT,aAAA,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;AAC5B,aAAA,KAAK,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;aACrB,OAAO,CAAC,GAAG,CAAC;QACf,MAAM,QAAQ,GAAGC,GAAM,CAAC,MAAM,CAAC,IAAI,CAAC;QACpC,MAAM,MAAM,GAAGC,MACD;aACX,MAAM,CAAC,CAAC,CAAC,EAAE,QAAQ,IAAI,CAAC,CAAC;AACzB,aAAA,IAAI;AACJ,aAAA,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAE1B,MAAM,aAAa,GAAGC,KACd;aACL,IAAI,CAAC,IAAI;AACT,aAAA,KAAK,CACJ,CAAC,CAAC,EAAE,GAAG,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,CACzE,CAAC,IAAI,CAAC;QAET,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAc,SAAS,CAAC;QACtD;AACG,aAAA,IAAI,CACHC,QACW,CAAC,MAAM;aACf,KAAK,CAAC,CAAC;aACP,QAAQ,CAAC,CAAC,UAAU;AACpB,aAAA,UAAU,CAAC,MAAM,EAAE,CAAC;aAExB,SAAS,CAAC,YAAY;AACtB,aAAA,MAAM,EAAE;QACX,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,MAAM,EAAE;AAChC,QAAA,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;QAEvD,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,CAAc,SAAS,CAAC;QACtD;AACG,aAAA,IAAI,CAAC,WAAW,EAAE,CAAA,YAAA,EAAe,WAAW,GAAG;AAC/C,aAAA,IAAI,CACHC,UACa,CAAC,MAAM;aACjB,aAAa,CAAC,CAAC;aACf,UAAU,CAAC,IAAI,IAAG;AACjB,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;AAC7C,YAAA,OAAO,KAAK,EAAE,KAAK,IAAI,IAAI;QAC7B,CAAC,CAAC,CACL;AACH,QAAA,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,8BAA8B,CAAC;QACtE,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,MAAM,EAAE;QACtC;aACG,SAAS,CAAC,YAAY;AACtB,aAAA,IAAI,CAAC,OAAO,EAAE,YAAY;AAC1B,aAAA,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC;QAEtB,MAAM,SAAS,GAAG;aACf,MAAM,CAAC,OAAO;aACd,SAAS,CACR,YAAY;aAEb,IAAI,CAAC,aAAa,EAAE,MAAM,IAAI,MAAM,CAAC,GAAG;AACxC,aAAA,IAAI,CACH,KAAK,IACH;aACG,MAAM,CAAC,GAAG;AACV,aAAA,IAAI,CAAC,OAAO,EAAE,WAAW;AACzB,aAAA,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,EAC5D,MAAM,IAAI,MAAM,EAChB,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE;aAEtB,KAAK,CAAC,MAAM,EAAE,MAAM,IAAI,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;QAE9E,MAAM,WAAW,GAAG;aACjB,SAAS,CAAsD,MAAM;AACrE,aAAA,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;AACvC,aAAA,IAAI,CACH,KAAK,IACH;aACG,MAAM,CAAC,MAAM;AACb,aAAA,IAAI,CAAC,OAAO,EAAE,iBAAiB;AAC/B,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACvC,aAAA,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,SAAS,EAAE;AAChC,aAAA,IAAI,CAAC,GAAG,EAAE,WAAW;AACrB,aAAA,IAAI,CAAC,QAAQ,EAAE,CAAC;AAChB,aAAA,IAAI,CAAC,IAAI,EAAE,UAAU;AACrB,aAAA,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAC3B,MAAM,IAAI,MAAM,EAChB,IAAI,IACF;AACG,aAAA,UAAU;aACV,QAAQ,CAAC,QAAQ;AACjB,aAAA,IAAI,CAAC,GAAG,EAAE,WAAW;AACrB,aAAA,IAAI,CAAC,QAAQ,EAAE,CAAC;aAChB,MAAM,EAAE,CACd;QAEH;AACG,aAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;AACvC,aAAA,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,SAAS,EAAE;AAChC,aAAA,IAAI,CAAC,IAAI,EAAE,UAAU;AACrB,aAAA,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC;QAEzB,IAAI,OAAO,EAAE;YACX;AACG,iBAAA,UAAU;iBACV,QAAQ,CAAC,QAAQ;AACjB,iBAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD;aAAO;YACL;AACG,iBAAA,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;iBAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACrD;QAEA,MAAM,WAAW,GAAG;aACjB,MAAM,CAAC,eAAe;aACtB,SAAS,CAAsC,MAAM;aACrD,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI;AAC7C,aAAA,IAAI,CACH,KAAK,IACH;aACG,MAAM,CAAC,MAAM;AACb,aAAA,IAAI,CAAC,OAAO,EAAE,aAAa;AAC3B,aAAA,IAAI,CAAC,aAAa,EAAE,QAAQ;aAC5B,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC;AAC7D,aAAA,IAAI,CAAC,GAAG,EAAE,WAAW,GAAG,CAAC;AACzB,aAAA,IAAI,CAAC,CAAC,IACL,CAAC,CAAC;AACC,aAAA,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;AACvC,aAAA,cAAc,EAAE,CACpB,EACL,MAAM,IAAI,MAAM,EAChB,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CACtB;AAEH,QAAA,MAAM,aAAa,GAAG,CAAC,IAAyB,KAAI;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;YACpE,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;YAChC,OAAO,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC;AAC1C,QAAA,CAAC;QAED,IAAI,OAAO,EAAE;YACX;AACG,iBAAA,UAAU;iBACV,QAAQ,CAAC,QAAQ;iBACjB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC;iBAC7D,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC;AAC/B,iBAAA,IAAI,CAAC,CAAC,IACL,CAAC,CAAC;AACC,iBAAA,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;iBACvC,cAAc,EAAE,CACpB;QACL;aAAO;YACL;iBACG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,MAAM,CAAC,SAAS,EAAE,GAAG,CAAC;iBAC7D,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,aAAa,CAAC,CAAC,CAAC;AAC/B,iBAAA,IAAI,CAAC,CAAC,IACL,CAAC,CAAC;AACC,iBAAA,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;iBACvC,cAAc,EAAE,CACpB;QACL;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,EAAE;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QAC5C,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,CAAC;QAEpD,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;AACnC,YAAA,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC;YAChC,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,GAAG,CAAC;AAC5C,SAAA,CAAC,CAAC;AAEH,QAAA,OAAOC,CAAI,CAAA;;;;;;;;;;AAUL,QAAA,EAAA,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC;cAC7BA,CAAI,CAAA,CAAA;gBACA,WAAW,CAAC,GAAG,CACf,IAAI,IAAIA,CAAI,CAAA,CAAA;;;4BAGAC,CAAQ,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;;AAEtC,wBAAA,EAAA,IAAI,CAAC,IAAI,CAAA;wBACX,CACT;AACI,kBAAA;AACT,cAAE,IAAI;;KAEX;IACH;;AAhUO,eAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGhB,UAAA,CAAA;IADPC,CAAK,CAAC,KAAK;AACoB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAGW,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAGlB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAkC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAG/C,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAsB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAGrB,UAAA,CAAA;AAA1B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;AAAmC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGL,UAAA,CAAA;IAAtDA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAG3B,UAAA,CAAA;IAAtDA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE;AAA6B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAtBvE,eAAe,GAAA,UAAA,CAAA;IAD3B;AACY,CAAA,EAAA,eAAe,CAkU3B;;;;","x_google_ignoreList":[0,1,2]}