npm - @ds-mo/ui - Versions diffs - 2.11.1 → 2.11.2 - Mend

@ds-mo/ui 2.11.1 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/.build-stamp +1 -1
package/dist/components/ds-card-data-viz.js +1 -1
package/dist/components/ds-card-data-viz.js.map +1 -1
package/dist/components/ds-chart-donut.js +1 -1
package/dist/components/ds-chart-donut.js.map +1 -1
package/dist/types/components/CardDataViz/CardDataViz.d.ts +4 -0
package/package.json +1 -1
package/src/wc/components/CardDataViz/CardDataViz.tsx +35 -0

package/dist/.build-stamp CHANGED Viewed

	@@ -1 +1 @@
1	- ~~1783564915141~~
1	+ 1783569968436

package/dist/components/ds-card-data-viz.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as a,H as d,h as e,a as i,t as s}from"./index.js";import{d as r}from"./p-DOU4cbpc.js";const t=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400)}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends d{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}render(){return e(i,{key:"02e9e594d4fc518e57919d337abf2556dd46aece",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},e("header",{key:"7dca7e07f84ba9e2db3ef9844023f2ed95579df8",class:"card-data-viz__header"},e("div",{key:"3313cba7c0a3f61a0eaa1783447ee085e3044a1c",class:"card-data-viz__title-wrap"},e("ds-text",{key:"b0f60df9b266b8b2cac3a251aac24d760c5fccac",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),e("div",{key:"fc3e3a9af00d0f5dc464a914a959b18921400b85",class:"card-data-viz__body"},this.hasChartSlot&&e("div",{key:"5e200c314d92f4d7e73bb790717469151ac949a0",class:"card-data-viz__chart-region"},e("slot",{key:"1d5d010ffbbbfdb9cc2a01ca48b2f28720d201bf",name:"chart"})),this.hasLegendSlot&&e("div",{key:"7e9ef114d2ac528a03396343c1f9089790ebce88",class:"card-data-viz__legend-region"},e("slot",{key:"0b3dd934c157faec7202621cb20ef737d14c651c",name:"legend"}))))}get el(){return this}static get style(){return t()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){r()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
+import{p as a,H as e,h as d,a as i,t as s}from"./index.js";import{d as t}from"./p-DOU4cbpc.js";const r=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400)}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=a=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null};this.handleLegendHover=a=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return d(i,{key:"44bbd306b1f5532484182d5705946692fa3c9a52",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},d("header",{key:"e82b704e5d88ecd671f38b8a1b659738056d2758",class:"card-data-viz__header"},d("div",{key:"da783803752c8bd50f3c4c9e16c51e43031e3796",class:"card-data-viz__title-wrap"},d("ds-text",{key:"b523db239bb280e20035e558b15b7eeea79c0f50",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),d("div",{key:"21e6d2abcd0ad4df1b2f6c86ac8fe46661c574f6",class:"card-data-viz__body"},this.hasChartSlot&&d("div",{key:"2d40abd960557ea52240eca6077756f33808af29",class:"card-data-viz__chart-region"},d("slot",{key:"2db547e8a6e94f468b006adf54d0964ffffc2262",name:"chart"})),this.hasLegendSlot&&d("div",{key:"1b50a2606964865d08fdbd8fdcbf51d900d345e3",class:"card-data-viz__legend-region"},d("slot",{key:"32af5e2e45cd89ff89ee13350c8d3b37d5e9b781",name:"legend"}))))}get el(){return this}static get style(){return r()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){t()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
 //# sourceMappingURL=ds-card-data-viz.js.map

package/dist/components/ds-card-data-viz.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","xs","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","~~componentWillRender~~","el","querySelector","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n width: var(--_card-data-viz-width);\n max-width: 100%;\n border: none;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n overflow: hidden;\n}\n\n.card-data-viz__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n flex: 1 1 auto;\n min-width: 0;\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-data-viz__title {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200);\n min-height: var(--dimension-card-width-sm);\n border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-sizing: border-box;\n}\n\n/\n Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n /\n.card-data-viz__chart-region {\n display: flex;\n justify-content: center;\n padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n}\n\n/ 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. /\n.card-data-viz__legend-region {\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'xs' \| 'sm' \| 'md' \| 'lg';\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n xs: 'var(--dimension-card-width-xs)',\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\n/\n Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n /\n@Component({\n tag: 'ds-card-data-viz',\n styleUrl: 'CardDataViz.css',\n scoped: true,\n})\nexport class CardDataViz {\n @Element() el!: HTMLElement;\n\n /* Widget heading shown in the card header. /\n @Prop() heading!: string;\n\n /* Card width token. */\n @Prop() cardWidth: CardDataVizWidth = 'md';\n\n // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n // padded box plus a body gap next to nothing.\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n }\n\n render() {\n return (\n <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n <header class=\"card-data-viz__header\">\n <div class=\"card-data-viz__title-wrap\">\n <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n {this.heading}\n </ds-text>\n </div>\n </header>\n <div class=\"card-data-viz__body\">\n {this.hasChartSlot && (\n <div class=\"card-data-viz__chart-region\">\n <slot name=\"chart\" />\n </div>\n )}\n {this.hasLegendSlot && (\n <div class=\"card-data-viz__legend-region\">\n <slot name=\"legend\" />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,~~6kDCI7B~~,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,~~KAgClC~~,~~CA9BC~~,~~mBAAAC~~,~~GACEJ~~,KAAKE,eAAiBF,~~KAAKK~~,GAAGC,cAAc,~~2BAC5CN~~,KAAKG,gBAAkBH,~~KAAKK~~,GAAGC,cAAc,2B,CAG/C,~~MAAAC~~,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,~~yBAA0BtB~~,EAAgBU,KAAKC,~~aAClFO~~,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,~~MACjFf~~,~~KAAKgB~~,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,~~uBACRX~~,KAAKE,~~cACJM~~,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,~~WAGdjB~~,KAAKG,~~eACJK~~,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}
1	+ {"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","xs","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","componentWillRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n display: block;\n box-sizing: border-box;\n width: var(--_card-data-viz-width);\n max-width: 100%;\n border: none;\n border-radius: var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n overflow: hidden;\n}\n\n.card-data-viz__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--dimension-space-100);\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n background-color: var(--color-background-secondary);\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n flex: 1 1 auto;\n min-width: 0;\n display: flex;\n align-items: center;\n padding: var(--dimension-space-075);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-data-viz__title {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200);\n min-height: var(--dimension-card-width-sm);\n border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n background-color: var(--color-background-primary);\n box-sizing: border-box;\n}\n\n/\n Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n /\n.card-data-viz__chart-region {\n display: flex;\n justify-content: center;\n padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n}\n\n/ 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. /\n.card-data-viz__legend-region {\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'xs' \| 'sm' \| 'md' \| 'lg';\n\n/* Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-` and `ds-chart-legend`. /\ntype HoveredDatum = { label: string } \| null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. /\ntype SyncableSlot = HTMLElement & { activeLabel?: string \| null };\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n xs: 'var(--dimension-card-width-xs)',\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\n/\n Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n /\n@Component({\n tag: 'ds-card-data-viz',\n styleUrl: 'CardDataViz.css',\n scoped: true,\n})\nexport class CardDataViz {\n @Element() el!: HTMLElement;\n\n /* Widget heading shown in the card header. /\n @Prop() heading!: string;\n\n /* Card width token. /\n @Prop() cardWidth: CardDataVizWidth = 'md';\n\n // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n // padded box plus a body gap next to nothing.\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n }\n\n componentDidLoad() {\n // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n // ds-chart- + ds-chart-legend pair cross-highlights without every consumer having to\n // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n this.el.addEventListener('dsSliceHover', this.handleChartHover);\n this.el.addEventListener('dsItemHover', this.handleLegendHover);\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n }\n\n private handleChartHover = (e: Event) => {\n // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so\n // they're no longer direct children of the host by the time this fires.\n const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot \| null;\n if (!legend \|\| !('activeLabel' in legend)) return;\n legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n private handleLegendHover = (e: Event) => {\n const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot \| null;\n if (!chart \|\| !('activeLabel' in chart)) return;\n chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n };\n\n render() {\n return (\n <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n <header class=\"card-data-viz__header\">\n <div class=\"card-data-viz__title-wrap\">\n <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n {this.heading}\n </ds-text>\n </div>\n </header>\n <div class=\"card-data-viz__body\">\n {this.hasChartSlot && (\n <div class=\"card-data-viz__chart-region\">\n <slot name=\"chart\" />\n </div>\n )}\n {this.hasLegendSlot && (\n <div class=\"card-data-viz__legend-region\">\n <slot name=\"legend\" />\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,6kDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,MAqBzBH,KAAAI,iBAAoBC,IAI1B,MAAMC,EAASN,KAAKO,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEX,KAAAY,kBAAqBP,IAC3B,MAAMQ,EAAQb,KAAKO,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,CA4B7E,CA3DC,mBAAAG,GACEd,KAAKE,eAAiBF,KAAKO,GAAGC,cAAc,2BAC5CR,KAAKG,gBAAkBH,KAAKO,GAAGC,cAAc,2B,CAG/C,gBAAAO,GAKEf,KAAKO,GAAGS,iBAAiB,eAAgBhB,KAAKI,kBAC9CJ,KAAKO,GAAGS,iBAAiB,cAAehB,KAAKY,kB,CAG/C,oBAAAK,GACEjB,KAAKO,GAAGW,oBAAoB,eAAgBlB,KAAKI,kBACjDJ,KAAKO,GAAGW,oBAAoB,cAAelB,KAAKY,kB,CAkBlD,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,yBAA0BlC,EAAgBU,KAAKC,aAClFmB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,MACjF3B,KAAK4B,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACRvB,KAAKE,cACJkB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,WAGd7B,KAAKG,eACJiB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}

package/dist/components/ds-chart-donut.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as n,c as e,h as s,a as i,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as c}from"./p-bDf6yBQd.js";import{r as a}from"./p-BWUTr_XN.js";import{w as u,c as f,a as h}from"./p-CrCGIx8s.js";import{f as l}from"./p-DEpLlQZK.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let s=0;let i=n.length;while(s<i){const r=Math.ceil((s+i)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){s=r}else{i=r-1}}return s>0?`${n.slice(0,s)}…`:"…"}const p=Math.abs;const y=Math.atan2;const v=Math.cos;const g=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const k=2*_;function $(t){return t>1?0:t<-1?_:Math.acos(t)}function A(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function j(t){return t.innerRadius}function z(t){return t.outerRadius}function C(t){return t.startAngle}function E(t){return t.endAngle}function B(t){return t&&t.padAngle}function L(t,n,e,s,i,r,o,c){var a=e-t,u=s-n,f=o-i,h=c-r,l=h*a-f*u;if(l*l<M)return;l=(f*(n-r)-h*(t-i))/l;return[t+l*a,n+l*u]}function N(t,n,e,s,i,r,o){var c=t-e,a=n-s,u=(o?r:-r)/x(c*c+a*a),f=u*a,h=-u*c,l=t+f,d=n+h,p=e+f,y=s+h,v=(l+p)/2,m=(d+y)/2,b=p-l,M=y-d,_=b*b+M*M,w=i-r,k=l*y-p*d,$=(M<0?-1:1)*x(g(0,w*w*_-k*k)),A=(k*M-b*$)/_,j=(-k*b-M*$)/_,z=(k*M+b*$)/_,C=(-k*b+M*$)/_,E=A-v,B=j-m,L=z-v,N=C-m;if(E*E+B*B>L*L+N*N)A=z,j=C;return{cx:A,cy:j,x01:-f,y01:-h,x11:A*(i/w-1),y11:j*(i/w-1)}}function T(){var t=j,n=z,e=f(0),s=null,i=C,r=E,o=B,c=null,a=u(h);function h(){var u,f,h=+t.apply(this,arguments),l=+n.apply(this,arguments),d=i.apply(this,arguments)-w,g=r.apply(this,arguments)-w,j=p(g-d),z=g>d;if(!c)c=u=a();if(l<h)f=l,l=h,h=f;if(!(l>M))c.moveTo(0,0);else if(j>k-M){c.moveTo(l*v(d),l*b(d));c.arc(0,0,l,d,g,!z);if(h>M){c.moveTo(h*v(g),h*b(g));c.arc(0,0,h,g,d,z)}}else{var C=d,E=g,B=d,T=g,D=j,F=j,H=o.apply(this,arguments)/2,Q=H>M&&(s?+s.apply(this,arguments):x(h*h+l*l)),R=m(p(l-h)/2,+e.apply(this,arguments)),V=R,G=R,I,K;if(Q>M){var S=A(Q/h*b(H)),U=A(Q/l*b(H));if((D-=S*2)>M)S*=z?1:-1,B+=S,T-=S;else D=0,B=T=(d+g)/2;if((F-=U*2)>M)U*=z?1:-1,C+=U,E-=U;else F=0,C=E=(d+g)/2}var W=l*v(C),X=l*b(C),Z=h*v(T),q=h*b(T);if(R>M){var J=l*v(E),O=l*b(E),P=h*v(B),Y=h*b(B),tt;if(j<_){if(tt=L(W,X,P,Y,J,O,Z,q)){var nt=W-tt[0],et=X-tt[1],st=J-tt[0],it=O-tt[1],rt=1/b($((nt*st+et*it)/(x(nt*nt+et*et)*x(st*st+it*it)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);V=m(R,(h-ot)/(rt-1));G=m(R,(l-ot)/(rt+1))}else{V=G=0}}}if(!(F>M))c.moveTo(W,X);else if(G>M){I=N(P,Y,W,X,l,G,z);K=N(J,O,Z,q,l,G,z);c.moveTo(I.cx+I.x01,I.cy+I.y01);if(G<R)c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,l,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),!z);c.arc(K.cx,K.cy,G,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.moveTo(W,X),c.arc(0,0,l,C,E,!z);if(!(h>M)||!(D>M))c.lineTo(Z,q);else if(V>M){I=N(Z,q,J,O,h,-V,z);K=N(W,X,P,Y,h,-V,z);c.lineTo(I.cx+I.x01,I.cy+I.y01);if(V<R)c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,h,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),z);c.arc(K.cx,K.cy,V,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.arc(0,0,h,T,B,z)}c.closePath();if(u)return c=null,u+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[v(s)*e,b(s)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function F(t){return t}function H(){var t=F,n=D,e=null,s=f(0),i=f(k),r=f(0);function o(o){var c,a=(o=h(o)).length,u,f,l=0,d=new Array(a),p=new Array(a),y=+s.apply(this,arguments),v=Math.min(k,Math.max(-k,i.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/a,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(c=0;c<a;++c){if((x=p[d[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(c=0,f=l?(v-a*b)/l:0;c<a;++c,y=g){u=d[c],x=p[u],g=y+(x>0?x*f:0)+b,p[u]={data:o[u],index:c,value:x,startAngle:y,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),o):s};o.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const Q=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;user-select:none}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:pointer;transition:opacity var(--effect-motion-short-2)}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const R=.25;const V=0;const G=.82;const I=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.size=175;this.thickness=c.size200;this.cornerRadius=c.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText=""}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=t-n;const s=e*2*G;const i=this.data.reduce(((t,n)=>t+n.value),0);const r=this.centerValue??l(i);if(this.valueTextEl){const t=d(this.valueTextEl,r,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const o=this.centerCaption??"";if(this.captionTextEl&&o){const t=d(this.captionTextEl,o,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=a(this.cornerRadius,c.radius025);const r=t-n;const u=this.data.reduce(((t,n)=>t+n.value),0);const f=u<=0;const h=this.activeLabel??this.hoveredLabel;const d=T().innerRadius(r).outerRadius(t).cornerRadius(e).padAngle(this.gap*Math.PI/180);const p=f?[]:H().value((t=>t.value)).sort(null)(this.data);const y=f?T().innerRadius(r).outerRadius(t)({startAngle:0,endAngle:Math.PI*2}):null;const v=a(c.lineheightXl,32);const g=a(c.lineheightMd,20);const m=this.centerCaption?t-(V+g)/2:t;const b=t+(v+V)/2;const x=this.centerValue??l(u);const M=this.centerCaption??"";return s(i,{key:"334f7c40e714304872549b5a677353c5c88af4b2",class:"chart-donut"},s("div",{key:"27e87ee038ddae37a2198837e0a0aff4955e18d0",class:"chart-donut__wrapper",style:{width:`${this.size}px`,height:`${this.size}px`}},s("svg",{key:"03d4e8b4a96767adc01583145f5959c3c478f1e5",class:"chart-donut__svg",viewBox:`0 0 ${this.size} ${this.size}`,width:this.size,height:this.size},s("g",{key:"d6c87aafc09e67b0a38e9879fedd213eab896c6b",transform:`translate(${t}, ${t})`},f?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):p.map(((t,n)=>{const e=this.data[n];const i=h!=null&&e.label!==h;return s("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:i?R:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),s("text",{key:"076e6a1d4b6099a7c5f3367abfa9dd4f4bbb0f9d",class:"chart-donut__center-value",x:t,y:m,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||x),M&&s("text",{key:"349dc60e9cd4507f307fbce297940814b3d43593",class:"chart-donut__center-caption",x:t,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M))))}static get style(){return Q()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32]}]);function K(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),I)}break}}))}K();const S=I;const U=K;export{S as DsChartDonut,U as defineCustomElement};
+import{p as t,H as n,c as e,h as s,a as i,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{T as c}from"./p-bDf6yBQd.js";import{r as a}from"./p-BWUTr_XN.js";import{w as u,c as f,a as h}from"./p-CrCGIx8s.js";import{f as l}from"./p-DEpLlQZK.js";function d(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let s=0;let i=n.length;while(s<i){const r=Math.ceil((s+i)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){s=r}else{i=r-1}}return s>0?`${n.slice(0,s)}…`:"…"}const p=Math.abs;const y=Math.atan2;const v=Math.cos;const g=Math.max;const m=Math.min;const b=Math.sin;const x=Math.sqrt;const M=1e-12;const _=Math.PI;const w=_/2;const k=2*_;function $(t){return t>1?0:t<-1?_:Math.acos(t)}function A(t){return t>=1?w:t<=-1?-w:Math.asin(t)}function j(t){return t.innerRadius}function z(t){return t.outerRadius}function C(t){return t.startAngle}function E(t){return t.endAngle}function B(t){return t&&t.padAngle}function L(t,n,e,s,i,r,o,c){var a=e-t,u=s-n,f=o-i,h=c-r,l=h*a-f*u;if(l*l<M)return;l=(f*(n-r)-h*(t-i))/l;return[t+l*a,n+l*u]}function N(t,n,e,s,i,r,o){var c=t-e,a=n-s,u=(o?r:-r)/x(c*c+a*a),f=u*a,h=-u*c,l=t+f,d=n+h,p=e+f,y=s+h,v=(l+p)/2,m=(d+y)/2,b=p-l,M=y-d,_=b*b+M*M,w=i-r,k=l*y-p*d,$=(M<0?-1:1)*x(g(0,w*w*_-k*k)),A=(k*M-b*$)/_,j=(-k*b-M*$)/_,z=(k*M+b*$)/_,C=(-k*b+M*$)/_,E=A-v,B=j-m,L=z-v,N=C-m;if(E*E+B*B>L*L+N*N)A=z,j=C;return{cx:A,cy:j,x01:-f,y01:-h,x11:A*(i/w-1),y11:j*(i/w-1)}}function T(){var t=j,n=z,e=f(0),s=null,i=C,r=E,o=B,c=null,a=u(h);function h(){var u,f,h=+t.apply(this,arguments),l=+n.apply(this,arguments),d=i.apply(this,arguments)-w,g=r.apply(this,arguments)-w,j=p(g-d),z=g>d;if(!c)c=u=a();if(l<h)f=l,l=h,h=f;if(!(l>M))c.moveTo(0,0);else if(j>k-M){c.moveTo(l*v(d),l*b(d));c.arc(0,0,l,d,g,!z);if(h>M){c.moveTo(h*v(g),h*b(g));c.arc(0,0,h,g,d,z)}}else{var C=d,E=g,B=d,T=g,D=j,F=j,H=o.apply(this,arguments)/2,Q=H>M&&(s?+s.apply(this,arguments):x(h*h+l*l)),R=m(p(l-h)/2,+e.apply(this,arguments)),V=R,G=R,I,K;if(Q>M){var S=A(Q/h*b(H)),U=A(Q/l*b(H));if((D-=S*2)>M)S*=z?1:-1,B+=S,T-=S;else D=0,B=T=(d+g)/2;if((F-=U*2)>M)U*=z?1:-1,C+=U,E-=U;else F=0,C=E=(d+g)/2}var W=l*v(C),X=l*b(C),Z=h*v(T),q=h*b(T);if(R>M){var J=l*v(E),O=l*b(E),P=h*v(B),Y=h*b(B),tt;if(j<_){if(tt=L(W,X,P,Y,J,O,Z,q)){var nt=W-tt[0],et=X-tt[1],st=J-tt[0],it=O-tt[1],rt=1/b($((nt*st+et*it)/(x(nt*nt+et*et)*x(st*st+it*it)))/2),ot=x(tt[0]*tt[0]+tt[1]*tt[1]);V=m(R,(h-ot)/(rt-1));G=m(R,(l-ot)/(rt+1))}else{V=G=0}}}if(!(F>M))c.moveTo(W,X);else if(G>M){I=N(P,Y,W,X,l,G,z);K=N(J,O,Z,q,l,G,z);c.moveTo(I.cx+I.x01,I.cy+I.y01);if(G<R)c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,G,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,l,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),!z);c.arc(K.cx,K.cy,G,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.moveTo(W,X),c.arc(0,0,l,C,E,!z);if(!(h>M)||!(D>M))c.lineTo(Z,q);else if(V>M){I=N(Z,q,J,O,h,-V,z);K=N(W,X,P,Y,h,-V,z);c.lineTo(I.cx+I.x01,I.cy+I.y01);if(V<R)c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(K.y01,K.x01),!z);else{c.arc(I.cx,I.cy,V,y(I.y01,I.x01),y(I.y11,I.x11),!z);c.arc(0,0,h,y(I.cy+I.y11,I.cx+I.x11),y(K.cy+K.y11,K.cx+K.x11),z);c.arc(K.cx,K.cy,V,y(K.y11,K.x11),y(K.y01,K.x01),!z)}}else c.arc(0,0,h,T,B,z)}c.closePath();if(u)return c=null,u+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +r.apply(this,arguments))/2-_/2;return[v(s)*e,b(s)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function F(t){return t}function H(){var t=F,n=D,e=null,s=f(0),i=f(k),r=f(0);function o(o){var c,a=(o=h(o)).length,u,f,l=0,d=new Array(a),p=new Array(a),y=+s.apply(this,arguments),v=Math.min(k,Math.max(-k,i.apply(this,arguments)-y)),g,m=Math.min(Math.abs(v)/a,r.apply(this,arguments)),b=m*(v<0?-1:1),x;for(c=0;c<a;++c){if((x=p[d[c]=c]=+t(o[c],c,o))>0){l+=x}}if(n!=null)d.sort((function(t,e){return n(p[t],p[e])}));else if(e!=null)d.sort((function(t,n){return e(o[t],o[n])}));for(c=0,f=l?(v-a*b)/l:0;c<a;++c,y=g){u=d[c],x=p[u],g=y+(x>0?x*f:0)+b,p[u]={data:o[u],index:c,value:x,startAngle:y,endAngle:g,padAngle:m}}return p}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:f(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),o):s};o.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),o):i};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),o):r};return o}const Q=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:inherit;user-select:none}.chart-donut__wrapper.sc-ds-chart-donut{position:relative}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:2}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-size:var(--typography-fontsize-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default}`;const R=.25;const V=0;const G=.82;const I=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.data=[];this.size=175;this.thickness=c.size200;this.cornerRadius=c.radius025;this.gap=1;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText=""}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}componentDidRender(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=t-n;const s=e*2*G;const i=this.data.reduce(((t,n)=>t+n.value),0);const r=this.centerValue??l(i);if(this.valueTextEl){const t=d(this.valueTextEl,r,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const o=this.centerCaption??"";if(this.captionTextEl&&o){const t=d(this.captionTextEl,o,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.size/2;const n=a(this.thickness,c.size200);const e=a(this.cornerRadius,c.radius025);const r=t-n;const u=this.data.reduce(((t,n)=>t+n.value),0);const f=u<=0;const h=this.activeLabel??this.hoveredLabel;const d=T().innerRadius(r).outerRadius(t).cornerRadius(e).padAngle(this.gap*Math.PI/180);const p=f?[]:H().value((t=>t.value)).sort(null)(this.data);const y=f?T().innerRadius(r).outerRadius(t)({startAngle:0,endAngle:Math.PI*2}):null;const v=a(c.lineheightXl,32);const g=a(c.lineheightMd,20);const m=this.centerCaption?t-(V+g)/2:t;const b=t+(v+V)/2;const x=this.centerValue??l(u);const M=this.centerCaption??"";return s(i,{key:"334f7c40e714304872549b5a677353c5c88af4b2",class:"chart-donut"},s("div",{key:"27e87ee038ddae37a2198837e0a0aff4955e18d0",class:"chart-donut__wrapper",style:{width:`${this.size}px`,height:`${this.size}px`}},s("svg",{key:"03d4e8b4a96767adc01583145f5959c3c478f1e5",class:"chart-donut__svg",viewBox:`0 0 ${this.size} ${this.size}`,width:this.size,height:this.size},s("g",{key:"d6c87aafc09e67b0a38e9879fedd213eab896c6b",transform:`translate(${t}, ${t})`},f?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-label":"No data"}):p.map(((t,n)=>{const e=this.data[n];const i=h!=null&&e.label!==h;return s("path",{key:e.label,d:d(t)??undefined,fill:e.color??o(n),opacity:i?R:1,tabindex:0,role:"img","aria-label":`${e.label}: ${e.value}`,onMouseEnter:()=>this.handleHover(e),onMouseLeave:()=>this.handleHover(null),onFocus:()=>this.handleHover(e),onBlur:()=>this.handleHover(null)})}))),s("text",{key:"076e6a1d4b6099a7c5f3367abfa9dd4f4bbb0f9d",class:"chart-donut__center-value",x:t,y:m,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||x),M&&s("text",{key:"349dc60e9cd4507f307fbce297940814b3d43593",class:"chart-donut__center-caption",x:t,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M))))}static get style(){return Q()}},[2,"ds-chart-donut",{data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32]}]);function K(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),I)}break}}))}K();const S=I;const U=K;export{S as DsChartDonut,U as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map

package/dist/components/ds-chart-donut.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","DIMMED_OPACITY","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","size","thickness","TOKEN_DEFAULTS","size200","radius025","gap","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","handleHover","datum","label","dsSliceHover","emit","componentDidRender","radius","thicknessPx","resolveCssLengthPx","total","reduce","fullValueText","centerValue","formatCompactNumber","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","h","Host","key","class","style","width","height","viewBox","transform","undefined","fill","map","isDimmed","color","categoryColor","opacity","tabindex","role","onMouseEnter","onMouseLeave","onFocus","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/*\n Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n \n Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n /\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n el.textContent = text;\n if (maxWidth <= 0 \|\| el.getComputedTextLength() <= maxWidth) return text;\n\n let lo = 0;\n let hi = text.length;\n while (lo < hi) {\n const mid = Math.ceil((lo + hi) / 2);\n el.textContent = `${text.slice(0, mid)}…`;\n if (el.getComputedTextLength() <= maxWidth) {\n lo = mid;\n } else {\n hi = mid - 1;\n }\n }\n return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 pi;\n\nexport function acos(x) {\n return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n var x10 = x1 - x0, y10 = y1 - y0,\n x32 = x3 - x2, y32 = y3 - y2,\n t = y32 * x10 - x32 * y10;\n if (t * t < epsilon) return;\n t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n var x01 = x0 - x1,\n y01 = y0 - y1,\n lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n ox = lo * y01,\n oy = -lo * x01,\n x11 = x0 + ox,\n y11 = y0 + oy,\n x10 = x1 + ox,\n y10 = y1 + oy,\n x00 = (x11 + x10) / 2,\n y00 = (y11 + y10) / 2,\n dx = x10 - x11,\n dy = y10 - y11,\n d2 = dx * dx + dy * dy,\n r = r1 - rc,\n D = x11 * y10 - x10 * y11,\n d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n cx0 = (D * dy - dx * d) / d2,\n cy0 = (-D * dx - dy * d) / d2,\n cx1 = (D * dy + dx * d) / d2,\n cy1 = (-D * dx + dy * d) / d2,\n dx0 = cx0 - x00,\n dy0 = cy0 - y00,\n dx1 = cx1 - x00,\n dy1 = cy1 - y00;\n\n // Pick the closer of the two intersection points.\n // TODO Is there a faster way to determine which intersection to use?\n if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n return {\n cx: cx0,\n cy: cy0,\n x01: -ox,\n y01: -oy,\n x11: cx0 * (r1 / r - 1),\n y11: cy0 * (r1 / r - 1)\n };\n}\n\nexport default function() {\n var innerRadius = arcInnerRadius,\n outerRadius = arcOuterRadius,\n cornerRadius = constant(0),\n padRadius = null,\n startAngle = arcStartAngle,\n endAngle = arcEndAngle,\n padAngle = arcPadAngle,\n context = null,\n path = withPath(arc);\n\n function arc() {\n var buffer,\n r,\n r0 = +innerRadius.apply(this, arguments),\n r1 = +outerRadius.apply(this, arguments),\n a0 = startAngle.apply(this, arguments) - halfPi,\n a1 = endAngle.apply(this, arguments) - halfPi,\n da = abs(a1 - a0),\n cw = a1 > a0;\n\n if (!context) context = buffer = path();\n\n // Ensure that the outer radius is always larger than the inner radius.\n if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n // Is it a point?\n if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n // Or is it a circle or annulus?\n else if (da > tau - epsilon) {\n context.moveTo(r1 * cos(a0), r1 * sin(a0));\n context.arc(0, 0, r1, a0, a1, !cw);\n if (r0 > epsilon) {\n context.moveTo(r0 * cos(a1), r0 * sin(a1));\n context.arc(0, 0, r0, a1, a0, cw);\n }\n }\n\n // Or is it a circular or annular sector?\n else {\n var a01 = a0,\n a11 = a1,\n a00 = a0,\n a10 = a1,\n da0 = da,\n da1 = da,\n ap = padAngle.apply(this, arguments) / 2,\n rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n rc0 = rc,\n rc1 = rc,\n t0,\n t1;\n\n // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n if (rp > epsilon) {\n var p0 = asin(rp / r0 * sin(ap)),\n p1 = asin(rp / r1 * sin(ap));\n if ((da0 -= p0 * 2) > epsilon) p0 = (cw ? 1 : -1), a00 += p0, a10 -= p0;\n else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n if ((da1 -= p1 2) > epsilon) p1 = (cw ? 1 : -1), a01 += p1, a11 -= p1;\n else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n }\n\n var x01 = r1 cos(a01),\n y01 = r1 * sin(a01),\n x10 = r0 * cos(a10),\n y10 = r0 * sin(a10);\n\n // Apply rounded corners?\n if (rc > epsilon) {\n var x11 = r1 * cos(a11),\n y11 = r1 * sin(a11),\n x00 = r0 * cos(a00),\n y00 = r0 * sin(a00),\n oc;\n\n // Restrict the corner radius according to the sector angle. If this\n // intersection fails, it’s probably because the arc is too small, so\n // disable the corner radius entirely.\n if (da < pi) {\n if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n var ax = x01 - oc[0],\n ay = y01 - oc[1],\n bx = x11 - oc[0],\n by = y11 - oc[1],\n kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n rc0 = min(rc, (r0 - lc) / (kc - 1));\n rc1 = min(rc, (r1 - lc) / (kc + 1));\n } else {\n rc0 = rc1 = 0;\n }\n }\n }\n\n // Is the sector collapsed to a line?\n if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n // Does the sector’s outer ring have rounded corners?\n else if (rc1 > epsilon) {\n t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the outer ring just a circular arc?\n else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n // Is there no inner ring, and it’s a circular sector?\n // Or perhaps it’s an annular sector collapsed due to padding?\n if (!(r0 > epsilon) \|\| !(da0 > epsilon)) context.lineTo(x10, y10);\n\n // Does the sector’s inner ring (or point) have rounded corners?\n else if (rc0 > epsilon) {\n t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the inner ring just a circular arc?\n else context.arc(0, 0, r0, a10, a00, cw);\n }\n\n context.closePath();\n\n if (buffer) return context = null, buffer + \"\" \|\| null;\n }\n\n arc.centroid = function() {\n var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n return [cos(a) * r, sin(a) * r];\n };\n\n arc.innerRadius = function(_) {\n return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n };\n\n arc.outerRadius = function(_) {\n return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n };\n\n arc.cornerRadius = function(_) {\n return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n };\n\n arc.padRadius = function(_) {\n return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n };\n\n arc.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n };\n\n arc.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n };\n\n arc.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n };\n\n arc.context = function(_) {\n return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n };\n\n return arc;\n}\n","export default function(a, b) {\n return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n var value = identity,\n sortValues = descending,\n sort = null,\n startAngle = constant(0),\n endAngle = constant(tau),\n padAngle = constant(0);\n\n function pie(data) {\n var i,\n n = (data = array(data)).length,\n j,\n k,\n sum = 0,\n index = new Array(n),\n arcs = new Array(n),\n a0 = +startAngle.apply(this, arguments),\n da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n a1,\n p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n pa = p * (da < 0 ? -1 : 1),\n v;\n\n for (i = 0; i < n; ++i) {\n if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n sum += v;\n }\n }\n\n // Optionally sort the arcs by previously-computed values or by data.\n if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n // Compute the arcs! They are stored in the original data's order.\n for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n data: data[j],\n index: i,\n value: v,\n startAngle: a0,\n endAngle: a1,\n padAngle: p\n };\n }\n\n return arcs;\n }\n\n pie.value = function(_) {\n return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n };\n\n pie.sortValues = function(_) {\n return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n };\n\n pie.sort = function(_) {\n return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n };\n\n pie.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n };\n\n pie.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n };\n\n pie.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n };\n\n return pie;\n}\n",":host {\n display: inline-block;\n font-family: inherit;\n user-select: none;\n}\n\n.chart-donut__wrapper {\n position: relative;\n}\n\n.chart-donut__svg path {\n cursor: pointer;\n transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__svg path:focus-visible {\n outline: none;\n stroke: var(--color-interaction-focus);\n stroke-width: 2;\n}\n\n/* Matches ds-text's text-title-large variant. /\n.chart-donut__center-value {\n fill: var(--color-foreground-primary);\n font-size: var(--typography-fontsize-xl);\n font-weight: var(--typography-weight-semibold);\n letter-spacing: var(--typography-letterspacing-negative-double);\n cursor: default;\n}\n\n/ Matches ds-text's text-body-medium variant. /\n.chart-donut__center-caption {\n fill: var(--color-foreground-secondary);\n font-size: var(--typography-fontsize-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n cursor: default;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst DIMMED_OPACITY = 0.25;\n/* Gap between the center value and caption line boxes. /\nconst CENTER_GAP_PX = 0;\n/* Fraction of the inner-circle diameter center text is allowed to use before truncating. /\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n\n@Component({\n tag: 'ds-chart-donut',\n styleUrl: 'ChartDonut.css',\n scoped: true,\n})\nexport class ChartDonut {\n /* Slices to render. Set as a JS property (not an HTML attribute). /\n @Prop() data: ChartDatum[] = [];\n @Prop() size: number = 175;\n /* Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). /\n @Prop() thickness: number \| string = TOKEN_DEFAULTS.size200;\n /* Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). /\n @Prop() cornerRadius: number \| string = TOKEN_DEFAULTS.radius025;\n /* Gap between slices, in degrees. /\n @Prop() gap: number = 1;\n /* Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). /\n @Prop() centerValue: string \| undefined;\n /* Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. /\n @Prop() centerCaption: string \| undefined;\n /\n Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n * Falls back to this component's own pointer/focus hover when unset.\n /\n @Prop() activeLabel: string \| null = null;\n\n @State() private hoveredLabel: string \| null = null;\n /* Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. /\n @State() private displayedValueText: string = '';\n @State() private displayedCaptionText: string = '';\n\n /* Fires with the hovered/focused slice's datum, or `null` on leave/blur. /\n @Event() dsSliceHover!: EventEmitter<ChartDatum \| null>;\n\n private valueTextEl?: SVGTextElement;\n private captionTextEl?: SVGTextElement;\n\n private handleHover(datum: ChartDatum \| null) {\n this.hoveredLabel = datum?.label ?? null;\n this.dsSliceHover.emit(datum);\n }\n\n componentDidRender() {\n const radius = this.size / 2;\n const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n const innerRadius = radius - thicknessPx;\n const maxWidth = innerRadius 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n const fullValueText = this.centerValue ?? formatCompactNumber(total);\n if (this.valueTextEl) {\n const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n else this.valueTextEl.textContent = truncated;\n }\n\n const fullCaptionText = this.centerCaption ?? '';\n if (this.captionTextEl && fullCaptionText) {\n const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n else this.captionTextEl.textContent = truncated;\n }\n }\n\n render() {\n const radius = this.size / 2;\n const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n const innerRadius = radius - thicknessPx;\n const total = this.data.reduce((sum, d) => sum + d.value, 0);\n // d3's pie() divides each value by the total to get an angle — with an all-zero total\n // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n const isEmpty = total <= 0;\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. a sibling ds-chart-legend row).\n const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n .innerRadius(innerRadius)\n .outerRadius(radius)\n .cornerRadius(cornerRadiusPx)\n .padAngle((this.gap * Math.PI) / 180);\n\n const slices = isEmpty\n ? []\n : pie<ChartDatum>()\n .value(d => d.value)\n .sort(null)(this.data);\n\n const emptyRingPath = isEmpty\n ? arc<{ startAngle: number; endAngle: number }>()\n .innerRadius(innerRadius)\n .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n : null;\n\n // Precise vertical centering for the two-line center text, using the real line-height of\n // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n const fullValueText = this.centerValue ?? formatCompactNumber(total);\n const fullCaptionText = this.centerCaption ?? '';\n\n return (\n <Host class=\"chart-donut\">\n <div class=\"chart-donut__wrapper\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n <svg\n class=\"chart-donut__svg\"\n viewBox={`0 0 ${this.size} ${this.size}`}\n width={this.size}\n height={this.size}\n >\n <g transform={`translate(${radius}, ${radius})`}>\n {isEmpty ? (\n <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-label=\"No data\" />\n ) : (\n slices.map((slice, i) => {\n const datum = this.data[i];\n const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n return (\n <path\n key={datum.label}\n d={arcGenerator(slice) ?? undefined}\n fill={datum.color ?? categoryColor(i)}\n opacity={isDimmed ? DIMMED_OPACITY : 1}\n tabindex={0}\n role=\"img\"\n aria-label={`${datum.label}: ${datum.value}`}\n onMouseEnter={() => this.handleHover(datum)}\n onMouseLeave={() => this.handleHover(null)}\n onFocus={() => this.handleHover(datum)}\n onBlur={() => this.handleHover(null)}\n />\n );\n })\n )}\n </g>\n <text\n class=\"chart-donut__center-value\"\n x={radius}\n y={centerValueY}\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n ref={el => {\n this.valueTextEl = (el as SVGTextElement) ?? undefined;\n }}\n >\n {this.displayedValueText \|\| fullValueText}\n </text>\n {fullCaptionText && (\n <text\n class=\"chart-donut__center-caption\"\n x={radius}\n y={centerCaptionY}\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n ref={el => {\n this.captionTextEl = (el as SVGTextElement) ?? undefined;\n }}\n >\n {this.displayedCaptionText \|\| fullCaptionText}\n </text>\n )}\n </svg>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["truncateSvgTextToWidth","el","text","maxWidth","textContent","getComputedTextLength","lo","hi","length","mid","Math","ceil","slice","abs","atan2","cos","max","min","sin","sqrt","epsilon","pi","PI","halfPi","tau","acos","x","asin","arcInnerRadius","d","innerRadius","arcOuterRadius","outerRadius","arcStartAngle","startAngle","arcEndAngle","endAngle","arcPadAngle","padAngle","intersect","x0","y0","x1","y1","x2","y2","x3","y3","x10","y10","x32","y32","t","cornerTangents","r1","rc","cw","x01","y01","ox","oy","x11","y11","x00","y00","dx","dy","d2","r","D","cx0","cy0","cx1","cy1","dx0","dy0","dx1","dy1","cx","cy","arc","cornerRadius","constant","padRadius","context","path","withPath","buffer","r0","apply","this","arguments","a0","a1","da","moveTo","a01","a11","a00","a10","da0","da1","ap","rp","rc0","rc1","t0","t1","p0","p1","oc","ax","ay","bx","by","kc","lc","lineTo","closePath","centroid","a","_","descending","b","NaN","identity","pie","value","sortValues","sort","data","i","n","array","j","k","sum","index","Array","arcs","p","pa","v","chartDonutCss","DIMMED_OPACITY","CENTER_GAP_PX","CENTER_TEXT_SAFE_WIDTH_RATIO","ChartDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","size","thickness","TOKEN_DEFAULTS","size200","radius025","gap","activeLabel","hoveredLabel","displayedValueText","displayedCaptionText","handleHover","datum","label","dsSliceHover","emit","componentDidRender","radius","thicknessPx","resolveCssLengthPx","total","reduce","fullValueText","centerValue","formatCompactNumber","valueTextEl","truncated","fullCaptionText","centerCaption","captionTextEl","render","cornerRadiusPx","isEmpty","highlightLabel","arcGenerator","slices","emptyRingPath","valueLineHeight","lineheightXl","captionLineHeight","lineheightMd","centerValueY","centerCaptionY","h","Host","key","class","style","width","height","viewBox","transform","undefined","fill","map","isDimmed","color","categoryColor","opacity","tabindex","role","onMouseEnter","onMouseLeave","onFocus","onBlur","y","ref"],"sources":["src/wc/utils/truncate-svg-text.ts","node_modules/d3-shape/src/math.js","node_modules/d3-shape/src/arc.js","node_modules/d3-shape/src/descending.js","node_modules/d3-shape/src/identity.js","node_modules/d3-shape/src/pie.js","src/wc/components/ChartDonut/ChartDonut.css?tag=ds-chart-donut&encapsulation=scoped","src/wc/components/ChartDonut/ChartDonut.tsx"],"sourcesContent":["/*\n Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement —\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n \n Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n /\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n el.textContent = text;\n if (maxWidth <= 0 \|\| el.getComputedTextLength() <= maxWidth) return text;\n\n let lo = 0;\n let hi = text.length;\n while (lo < hi) {\n const mid = Math.ceil((lo + hi) / 2);\n el.textContent = `${text.slice(0, mid)}…`;\n if (el.getComputedTextLength() <= maxWidth) {\n lo = mid;\n } else {\n hi = mid - 1;\n }\n }\n return lo > 0 ? `${text.slice(0, lo)}…` : '…';\n}\n","export const abs = Math.abs;\nexport const atan2 = Math.atan2;\nexport const cos = Math.cos;\nexport const max = Math.max;\nexport const min = Math.min;\nexport const sin = Math.sin;\nexport const sqrt = Math.sqrt;\n\nexport const epsilon = 1e-12;\nexport const pi = Math.PI;\nexport const halfPi = pi / 2;\nexport const tau = 2 pi;\n\nexport function acos(x) {\n return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);\n}\n\nexport function asin(x) {\n return x >= 1 ? halfPi : x <= -1 ? -halfPi : Math.asin(x);\n}\n","import constant from \"./constant.js\";\nimport {abs, acos, asin, atan2, cos, epsilon, halfPi, max, min, pi, sin, sqrt, tau} from \"./math.js\";\nimport {withPath} from \"./path.js\";\n\nfunction arcInnerRadius(d) {\n return d.innerRadius;\n}\n\nfunction arcOuterRadius(d) {\n return d.outerRadius;\n}\n\nfunction arcStartAngle(d) {\n return d.startAngle;\n}\n\nfunction arcEndAngle(d) {\n return d.endAngle;\n}\n\nfunction arcPadAngle(d) {\n return d && d.padAngle; // Note: optional!\n}\n\nfunction intersect(x0, y0, x1, y1, x2, y2, x3, y3) {\n var x10 = x1 - x0, y10 = y1 - y0,\n x32 = x3 - x2, y32 = y3 - y2,\n t = y32 * x10 - x32 * y10;\n if (t * t < epsilon) return;\n t = (x32 * (y0 - y2) - y32 * (x0 - x2)) / t;\n return [x0 + t * x10, y0 + t * y10];\n}\n\n// Compute perpendicular offset line of length rc.\n// http://mathworld.wolfram.com/Circle-LineIntersection.html\nfunction cornerTangents(x0, y0, x1, y1, r1, rc, cw) {\n var x01 = x0 - x1,\n y01 = y0 - y1,\n lo = (cw ? rc : -rc) / sqrt(x01 * x01 + y01 * y01),\n ox = lo * y01,\n oy = -lo * x01,\n x11 = x0 + ox,\n y11 = y0 + oy,\n x10 = x1 + ox,\n y10 = y1 + oy,\n x00 = (x11 + x10) / 2,\n y00 = (y11 + y10) / 2,\n dx = x10 - x11,\n dy = y10 - y11,\n d2 = dx * dx + dy * dy,\n r = r1 - rc,\n D = x11 * y10 - x10 * y11,\n d = (dy < 0 ? -1 : 1) * sqrt(max(0, r * r * d2 - D * D)),\n cx0 = (D * dy - dx * d) / d2,\n cy0 = (-D * dx - dy * d) / d2,\n cx1 = (D * dy + dx * d) / d2,\n cy1 = (-D * dx + dy * d) / d2,\n dx0 = cx0 - x00,\n dy0 = cy0 - y00,\n dx1 = cx1 - x00,\n dy1 = cy1 - y00;\n\n // Pick the closer of the two intersection points.\n // TODO Is there a faster way to determine which intersection to use?\n if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1) cx0 = cx1, cy0 = cy1;\n\n return {\n cx: cx0,\n cy: cy0,\n x01: -ox,\n y01: -oy,\n x11: cx0 * (r1 / r - 1),\n y11: cy0 * (r1 / r - 1)\n };\n}\n\nexport default function() {\n var innerRadius = arcInnerRadius,\n outerRadius = arcOuterRadius,\n cornerRadius = constant(0),\n padRadius = null,\n startAngle = arcStartAngle,\n endAngle = arcEndAngle,\n padAngle = arcPadAngle,\n context = null,\n path = withPath(arc);\n\n function arc() {\n var buffer,\n r,\n r0 = +innerRadius.apply(this, arguments),\n r1 = +outerRadius.apply(this, arguments),\n a0 = startAngle.apply(this, arguments) - halfPi,\n a1 = endAngle.apply(this, arguments) - halfPi,\n da = abs(a1 - a0),\n cw = a1 > a0;\n\n if (!context) context = buffer = path();\n\n // Ensure that the outer radius is always larger than the inner radius.\n if (r1 < r0) r = r1, r1 = r0, r0 = r;\n\n // Is it a point?\n if (!(r1 > epsilon)) context.moveTo(0, 0);\n\n // Or is it a circle or annulus?\n else if (da > tau - epsilon) {\n context.moveTo(r1 * cos(a0), r1 * sin(a0));\n context.arc(0, 0, r1, a0, a1, !cw);\n if (r0 > epsilon) {\n context.moveTo(r0 * cos(a1), r0 * sin(a1));\n context.arc(0, 0, r0, a1, a0, cw);\n }\n }\n\n // Or is it a circular or annular sector?\n else {\n var a01 = a0,\n a11 = a1,\n a00 = a0,\n a10 = a1,\n da0 = da,\n da1 = da,\n ap = padAngle.apply(this, arguments) / 2,\n rp = (ap > epsilon) && (padRadius ? +padRadius.apply(this, arguments) : sqrt(r0 * r0 + r1 * r1)),\n rc = min(abs(r1 - r0) / 2, +cornerRadius.apply(this, arguments)),\n rc0 = rc,\n rc1 = rc,\n t0,\n t1;\n\n // Apply padding? Note that since r1 ≥ r0, da1 ≥ da0.\n if (rp > epsilon) {\n var p0 = asin(rp / r0 * sin(ap)),\n p1 = asin(rp / r1 * sin(ap));\n if ((da0 -= p0 * 2) > epsilon) p0 = (cw ? 1 : -1), a00 += p0, a10 -= p0;\n else da0 = 0, a00 = a10 = (a0 + a1) / 2;\n if ((da1 -= p1 2) > epsilon) p1 = (cw ? 1 : -1), a01 += p1, a11 -= p1;\n else da1 = 0, a01 = a11 = (a0 + a1) / 2;\n }\n\n var x01 = r1 cos(a01),\n y01 = r1 * sin(a01),\n x10 = r0 * cos(a10),\n y10 = r0 * sin(a10);\n\n // Apply rounded corners?\n if (rc > epsilon) {\n var x11 = r1 * cos(a11),\n y11 = r1 * sin(a11),\n x00 = r0 * cos(a00),\n y00 = r0 * sin(a00),\n oc;\n\n // Restrict the corner radius according to the sector angle. If this\n // intersection fails, it’s probably because the arc is too small, so\n // disable the corner radius entirely.\n if (da < pi) {\n if (oc = intersect(x01, y01, x00, y00, x11, y11, x10, y10)) {\n var ax = x01 - oc[0],\n ay = y01 - oc[1],\n bx = x11 - oc[0],\n by = y11 - oc[1],\n kc = 1 / sin(acos((ax * bx + ay * by) / (sqrt(ax * ax + ay * ay) * sqrt(bx * bx + by * by))) / 2),\n lc = sqrt(oc[0] * oc[0] + oc[1] * oc[1]);\n rc0 = min(rc, (r0 - lc) / (kc - 1));\n rc1 = min(rc, (r1 - lc) / (kc + 1));\n } else {\n rc0 = rc1 = 0;\n }\n }\n }\n\n // Is the sector collapsed to a line?\n if (!(da1 > epsilon)) context.moveTo(x01, y01);\n\n // Does the sector’s outer ring have rounded corners?\n else if (rc1 > epsilon) {\n t0 = cornerTangents(x00, y00, x01, y01, r1, rc1, cw);\n t1 = cornerTangents(x11, y11, x10, y10, r1, rc1, cw);\n\n context.moveTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc1 < rc) context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc1, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r1, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), !cw);\n context.arc(t1.cx, t1.cy, rc1, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the outer ring just a circular arc?\n else context.moveTo(x01, y01), context.arc(0, 0, r1, a01, a11, !cw);\n\n // Is there no inner ring, and it’s a circular sector?\n // Or perhaps it’s an annular sector collapsed due to padding?\n if (!(r0 > epsilon) \|\| !(da0 > epsilon)) context.lineTo(x10, y10);\n\n // Does the sector’s inner ring (or point) have rounded corners?\n else if (rc0 > epsilon) {\n t0 = cornerTangents(x10, y10, x11, y11, r0, -rc0, cw);\n t1 = cornerTangents(x01, y01, x00, y00, r0, -rc0, cw);\n\n context.lineTo(t0.cx + t0.x01, t0.cy + t0.y01);\n\n // Have the corners merged?\n if (rc0 < rc) context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t1.y01, t1.x01), !cw);\n\n // Otherwise, draw the two corners and the ring.\n else {\n context.arc(t0.cx, t0.cy, rc0, atan2(t0.y01, t0.x01), atan2(t0.y11, t0.x11), !cw);\n context.arc(0, 0, r0, atan2(t0.cy + t0.y11, t0.cx + t0.x11), atan2(t1.cy + t1.y11, t1.cx + t1.x11), cw);\n context.arc(t1.cx, t1.cy, rc0, atan2(t1.y11, t1.x11), atan2(t1.y01, t1.x01), !cw);\n }\n }\n\n // Or is the inner ring just a circular arc?\n else context.arc(0, 0, r0, a10, a00, cw);\n }\n\n context.closePath();\n\n if (buffer) return context = null, buffer + \"\" \|\| null;\n }\n\n arc.centroid = function() {\n var r = (+innerRadius.apply(this, arguments) + +outerRadius.apply(this, arguments)) / 2,\n a = (+startAngle.apply(this, arguments) + +endAngle.apply(this, arguments)) / 2 - pi / 2;\n return [cos(a) * r, sin(a) * r];\n };\n\n arc.innerRadius = function(_) {\n return arguments.length ? (innerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : innerRadius;\n };\n\n arc.outerRadius = function(_) {\n return arguments.length ? (outerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : outerRadius;\n };\n\n arc.cornerRadius = function(_) {\n return arguments.length ? (cornerRadius = typeof _ === \"function\" ? _ : constant(+_), arc) : cornerRadius;\n };\n\n arc.padRadius = function(_) {\n return arguments.length ? (padRadius = _ == null ? null : typeof _ === \"function\" ? _ : constant(+_), arc) : padRadius;\n };\n\n arc.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : startAngle;\n };\n\n arc.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : endAngle;\n };\n\n arc.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), arc) : padAngle;\n };\n\n arc.context = function(_) {\n return arguments.length ? ((context = _ == null ? null : _), arc) : context;\n };\n\n return arc;\n}\n","export default function(a, b) {\n return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;\n}\n","export default function(d) {\n return d;\n}\n","import array from \"./array.js\";\nimport constant from \"./constant.js\";\nimport descending from \"./descending.js\";\nimport identity from \"./identity.js\";\nimport {tau} from \"./math.js\";\n\nexport default function() {\n var value = identity,\n sortValues = descending,\n sort = null,\n startAngle = constant(0),\n endAngle = constant(tau),\n padAngle = constant(0);\n\n function pie(data) {\n var i,\n n = (data = array(data)).length,\n j,\n k,\n sum = 0,\n index = new Array(n),\n arcs = new Array(n),\n a0 = +startAngle.apply(this, arguments),\n da = Math.min(tau, Math.max(-tau, endAngle.apply(this, arguments) - a0)),\n a1,\n p = Math.min(Math.abs(da) / n, padAngle.apply(this, arguments)),\n pa = p * (da < 0 ? -1 : 1),\n v;\n\n for (i = 0; i < n; ++i) {\n if ((v = arcs[index[i] = i] = +value(data[i], i, data)) > 0) {\n sum += v;\n }\n }\n\n // Optionally sort the arcs by previously-computed values or by data.\n if (sortValues != null) index.sort(function(i, j) { return sortValues(arcs[i], arcs[j]); });\n else if (sort != null) index.sort(function(i, j) { return sort(data[i], data[j]); });\n\n // Compute the arcs! They are stored in the original data's order.\n for (i = 0, k = sum ? (da - n * pa) / sum : 0; i < n; ++i, a0 = a1) {\n j = index[i], v = arcs[j], a1 = a0 + (v > 0 ? v * k : 0) + pa, arcs[j] = {\n data: data[j],\n index: i,\n value: v,\n startAngle: a0,\n endAngle: a1,\n padAngle: p\n };\n }\n\n return arcs;\n }\n\n pie.value = function(_) {\n return arguments.length ? (value = typeof _ === \"function\" ? _ : constant(+_), pie) : value;\n };\n\n pie.sortValues = function(_) {\n return arguments.length ? (sortValues = _, sort = null, pie) : sortValues;\n };\n\n pie.sort = function(_) {\n return arguments.length ? (sort = _, sortValues = null, pie) : sort;\n };\n\n pie.startAngle = function(_) {\n return arguments.length ? (startAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : startAngle;\n };\n\n pie.endAngle = function(_) {\n return arguments.length ? (endAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : endAngle;\n };\n\n pie.padAngle = function(_) {\n return arguments.length ? (padAngle = typeof _ === \"function\" ? _ : constant(+_), pie) : padAngle;\n };\n\n return pie;\n}\n",":host {\n display: inline-block;\n font-family: inherit;\n user-select: none;\n}\n\n.chart-donut__wrapper {\n position: relative;\n}\n\n.chart-donut__svg path {\n cursor: default;\n transition: opacity var(--effect-motion-short-2);\n}\n\n.chart-donut__svg path:focus-visible {\n outline: none;\n stroke: var(--color-interaction-focus);\n stroke-width: 2;\n}\n\n/* Matches ds-text's text-title-large variant. /\n.chart-donut__center-value {\n fill: var(--color-foreground-primary);\n font-size: var(--typography-fontsize-xl);\n font-weight: var(--typography-weight-semibold);\n letter-spacing: var(--typography-letterspacing-negative-double);\n cursor: default;\n}\n\n/ Matches ds-text's text-body-medium variant. /\n.chart-donut__center-caption {\n fill: var(--color-foreground-secondary);\n font-size: var(--typography-fontsize-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n cursor: default;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\nimport { arc, pie } from 'd3-shape';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatCompactNumber, resolveCssLengthPx, truncateSvgTextToWidth, TOKEN_DEFAULTS } from '../../utils';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst DIMMED_OPACITY = 0.25;\n/* Gap between the center value and caption line boxes. /\nconst CENTER_GAP_PX = 0;\n/* Fraction of the inner-circle diameter center text is allowed to use before truncating. /\nconst CENTER_TEXT_SAFE_WIDTH_RATIO = 0.82;\n\n@Component({\n tag: 'ds-chart-donut',\n styleUrl: 'ChartDonut.css',\n scoped: true,\n})\nexport class ChartDonut {\n /* Slices to render. Set as a JS property (not an HTML attribute). /\n @Prop() data: ChartDatum[] = [];\n @Prop() size: number = 175;\n /* Ring thickness — number (px) or TokoMo length. Defaults to `--dimension-size-200` (16px). /\n @Prop() thickness: number \| string = TOKEN_DEFAULTS.size200;\n /* Corner radius on each slice — number (px) or TokoMo length. Defaults to `--dimension-radius-025` (2px). /\n @Prop() cornerRadius: number \| string = TOKEN_DEFAULTS.radius025;\n /* Gap between slices, in degrees. /\n @Prop() gap: number = 1;\n /* Primary center value; defaults to the sum of `data` values (e.g. \"187\", \"40.9%\"). /\n @Prop() centerValue: string \| undefined;\n /* Secondary caption below the center value (e.g. \"Total\", \"Normal\"). Rendered uppercase. /\n @Prop() centerCaption: string \| undefined;\n /\n Externally controlled highlight, matched by `label` — e.g. drive this from a sibling\n * `ds-chart-legend`'s `dsItemHover` event to keep chart and legend hover in sync.\n * Falls back to this component's own pointer/focus hover when unset.\n /\n @Prop() activeLabel: string \| null = null;\n\n @State() private hoveredLabel: string \| null = null;\n /* Center text, truncated with an ellipsis if it doesn't fit inside the inner circle. /\n @State() private displayedValueText: string = '';\n @State() private displayedCaptionText: string = '';\n\n /* Fires with the hovered/focused slice's datum, or `null` on leave/blur. /\n @Event() dsSliceHover!: EventEmitter<ChartDatum \| null>;\n\n private valueTextEl?: SVGTextElement;\n private captionTextEl?: SVGTextElement;\n\n private handleHover(datum: ChartDatum \| null) {\n this.hoveredLabel = datum?.label ?? null;\n this.dsSliceHover.emit(datum);\n }\n\n componentDidRender() {\n const radius = this.size / 2;\n const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n const innerRadius = radius - thicknessPx;\n const maxWidth = innerRadius 2 * CENTER_TEXT_SAFE_WIDTH_RATIO;\n const total = this.data.reduce((sum, d) => sum + d.value, 0);\n\n const fullValueText = this.centerValue ?? formatCompactNumber(total);\n if (this.valueTextEl) {\n const truncated = truncateSvgTextToWidth(this.valueTextEl, fullValueText, maxWidth);\n if (truncated !== this.displayedValueText) this.displayedValueText = truncated;\n else this.valueTextEl.textContent = truncated;\n }\n\n const fullCaptionText = this.centerCaption ?? '';\n if (this.captionTextEl && fullCaptionText) {\n const truncated = truncateSvgTextToWidth(this.captionTextEl, fullCaptionText, maxWidth);\n if (truncated !== this.displayedCaptionText) this.displayedCaptionText = truncated;\n else this.captionTextEl.textContent = truncated;\n }\n }\n\n render() {\n const radius = this.size / 2;\n const thicknessPx = resolveCssLengthPx(this.thickness, TOKEN_DEFAULTS.size200);\n const cornerRadiusPx = resolveCssLengthPx(this.cornerRadius, TOKEN_DEFAULTS.radius025);\n const innerRadius = radius - thicknessPx;\n const total = this.data.reduce((sum, d) => sum + d.value, 0);\n // d3's pie() divides each value by the total to get an angle — with an all-zero total\n // that's 0/0, producing NaN angles and broken paths. Render a flat neutral ring instead.\n const isEmpty = total <= 0;\n // Highlight/dim from either this component's own hover or an externally-synced label\n // (e.g. a sibling ds-chart-legend row).\n const highlightLabel = this.activeLabel ?? this.hoveredLabel;\n\n const arcGenerator = arc<{ startAngle: number; endAngle: number }>()\n .innerRadius(innerRadius)\n .outerRadius(radius)\n .cornerRadius(cornerRadiusPx)\n .padAngle((this.gap * Math.PI) / 180);\n\n const slices = isEmpty\n ? []\n : pie<ChartDatum>()\n .value(d => d.value)\n .sort(null)(this.data);\n\n const emptyRingPath = isEmpty\n ? arc<{ startAngle: number; endAngle: number }>()\n .innerRadius(innerRadius)\n .outerRadius(radius)({ startAngle: 0, endAngle: Math.PI * 2 })\n : null;\n\n // Precise vertical centering for the two-line center text, using the real line-height of\n // text-title-large (value) and text-body-medium (caption) rather than eyeballed em offsets.\n const valueLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightXl, 32);\n const captionLineHeight = resolveCssLengthPx(TOKEN_DEFAULTS.lineheightMd, 20);\n const centerValueY = this.centerCaption ? radius - (CENTER_GAP_PX + captionLineHeight) / 2 : radius;\n const centerCaptionY = radius + (valueLineHeight + CENTER_GAP_PX) / 2;\n\n // Show the full text before the post-render truncation pass has measured it (avoids a blank first paint).\n const fullValueText = this.centerValue ?? formatCompactNumber(total);\n const fullCaptionText = this.centerCaption ?? '';\n\n return (\n <Host class=\"chart-donut\">\n <div class=\"chart-donut__wrapper\" style={{ width: `${this.size}px`, height: `${this.size}px` }}>\n <svg\n class=\"chart-donut__svg\"\n viewBox={`0 0 ${this.size} ${this.size}`}\n width={this.size}\n height={this.size}\n >\n <g transform={`translate(${radius}, ${radius})`}>\n {isEmpty ? (\n <path d={emptyRingPath ?? undefined} fill=\"var(--color-background-faint-neutral)\" aria-label=\"No data\" />\n ) : (\n slices.map((slice, i) => {\n const datum = this.data[i];\n const isDimmed = highlightLabel != null && datum.label !== highlightLabel;\n return (\n <path\n key={datum.label}\n d={arcGenerator(slice) ?? undefined}\n fill={datum.color ?? categoryColor(i)}\n opacity={isDimmed ? DIMMED_OPACITY : 1}\n tabindex={0}\n role=\"img\"\n aria-label={`${datum.label}: ${datum.value}`}\n onMouseEnter={() => this.handleHover(datum)}\n onMouseLeave={() => this.handleHover(null)}\n onFocus={() => this.handleHover(datum)}\n onBlur={() => this.handleHover(null)}\n />\n );\n })\n )}\n </g>\n <text\n class=\"chart-donut__center-value\"\n x={radius}\n y={centerValueY}\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n ref={el => {\n this.valueTextEl = (el as SVGTextElement) ?? undefined;\n }}\n >\n {this.displayedValueText \|\| fullValueText}\n </text>\n {fullCaptionText && (\n <text\n class=\"chart-donut__center-caption\"\n x={radius}\n y={centerCaptionY}\n text-anchor=\"middle\"\n dominant-baseline=\"central\"\n ref={el => {\n this.captionTextEl = (el as SVGTextElement) ?? undefined;\n }}\n >\n {this.displayedCaptionText \|\| fullCaptionText}\n </text>\n )}\n </svg>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/components/CardDataViz/CardDataViz.d.ts CHANGED Viewed

@@ -13,6 +13,10 @@ export declare class CardDataViz {
     private hasChartSlot;
     private hasLegendSlot;
     componentWillRender(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleChartHover;
+    private handleLegendHover;
     render(): any;
 }
 //# sourceMappingURL=CardDataViz.d.ts.map

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/src/wc/components/CardDataViz/CardDataViz.tsx CHANGED Viewed

@@ -2,6 +2,12 @@ import { Component, Element, State, h, Host, Prop } from '@stencil/core';
 export type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';
+/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */
+type HoveredDatum = { label: string } | null;
+/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */
+type SyncableSlot = HTMLElement & { activeLabel?: string | null };
 const CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {
   xs: 'var(--dimension-card-width-xs)',
   sm: 'var(--dimension-card-width-sm)',
@@ -39,6 +45,35 @@ export class CardDataViz {
     this.hasLegendSlot = !!this.el.querySelector(':scope > [slot="legend"]');
   }
+  componentDidLoad() {
+    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any
+    // ds-chart-* + ds-chart-legend pair cross-highlights without every consumer having to
+    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted
+    // elements) since Stencil events bubble and the slot content can be swapped at runtime.
+    this.el.addEventListener('dsSliceHover', this.handleChartHover);
+    this.el.addEventListener('dsItemHover', this.handleLegendHover);
+  }
+  disconnectedCallback() {
+    this.el.removeEventListener('dsSliceHover', this.handleChartHover);
+    this.el.removeEventListener('dsItemHover', this.handleLegendHover);
+  }
+  private handleChartHover = (e: Event) => {
+    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates
+    // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so
+    // they're no longer direct children of the host by the time this fires.
+    const legend = this.el.querySelector('[slot="legend"]') as SyncableSlot | null;
+    if (!legend || !('activeLabel' in legend)) return;
+    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
+  private handleLegendHover = (e: Event) => {
+    const chart = this.el.querySelector('[slot="chart"]') as SyncableSlot | null;
+    if (!chart || !('activeLabel' in chart)) return;
+    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;
+  };
   render() {
     return (
       <Host class="card-data-viz" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>