@editora/ui-core 0.1.24 → 0.2.0

package/dist/chart.cjs.js

@@ -1,8 +1,8 @@
 "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const J=require("./ElementBase-DxbvhLJs.js"),V=180,U=`
   :host {
-    --ui-chart-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --ui-chart-bg: var(--color-panel-solid, var(--ui-color-surface, #ffffff));
     --ui-chart-surface: color-mix(in srgb, var(--ui-color-surface, #ffffff) 97%, #ffffff 3%);
-    --ui-chart-border: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent);
+    --ui-chart-border: var(--ui-color-line-subtle, color-mix(in srgb, var(--ui-color-border, #cbd5e1) 74%, transparent));
     --ui-chart-text: var(--ui-color-text, #0f172a);
     --ui-chart-muted: var(--ui-color-muted, #526175);
     --ui-chart-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
@@ -10,7 +10,7 @@
     --ui-chart-success: var(--ui-color-success, #15803d);
     --ui-chart-warning: var(--ui-color-warning, #b45309);
     --ui-chart-danger: var(--ui-color-danger, #dc2626);
-    --ui-chart-radius: 16px;
+    --ui-chart-radius: calc(var(--ui-radius, 6px) + 4px);
     --ui-chart-shadow: none;
     --ui-chart-plot-height: 220px;
     --ui-chart-plot-min-height: 188px;
@@ -27,7 +27,7 @@
     position: relative;
     border: 1px solid var(--ui-chart-border);
     border-radius: var(--ui-chart-radius);
-    background: linear-gradient(160deg, var(--ui-chart-surface), var(--ui-chart-bg));
+    background: var(--ui-chart-bg);
     color: var(--ui-chart-text);
     box-shadow: var(--ui-chart-shadow);
     padding: 16px;
@@ -76,8 +76,8 @@
     display: grid;
     gap: 10px;
     padding: 10px 12px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
-    border-radius: 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     background: color-mix(in srgb, var(--ui-chart-surface) 96%, transparent);
   }
 
@@ -98,7 +98,7 @@
   .title {
     font-size: 15px;
     line-height: 1.35;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.01em;
     margin: 0;
   }
@@ -119,7 +119,7 @@
     margin: 0;
     font-size: 15px;
     line-height: 1.35;
-    font-weight: 700;
+    font-weight: 600;
     letter-spacing: 0.01em;
     color: var(--ui-chart-text);
   }
@@ -139,7 +139,7 @@
     min-block-size: 24px;
     padding: 0 10px;
     border-radius: 999px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 88%, transparent);
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 92%, transparent);
     font-size: 11px;
     line-height: 1;
@@ -149,19 +149,19 @@
   }
 
   .status-pill[data-state="success"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-success) 35%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-success) 13%, transparent);
   }
 
   .status-pill[data-state="error"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-danger) 35%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-danger) 12%, transparent);
   }
 
   .status-pill[data-state="loading"] {
-    color: var(--ui-chart-warning);
+    color: color-mix(in srgb, var(--ui-chart-warning) 74%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-warning) 32%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-warning) 10%, transparent);
   }
@@ -173,8 +173,8 @@
   }
 
   .metric {
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
-    border-radius: 10px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 8px 10px;
     background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
     min-inline-size: 0;
@@ -193,26 +193,26 @@
   .metric-value {
     font-size: 14px;
     line-height: 1.2;
-    font-weight: 700;
+    font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   .metric-value[data-tone="up"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 68%, var(--ui-chart-text));
   }
 
   .metric-value[data-tone="down"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 68%, var(--ui-chart-text));
   }
 
   .plot-shell {
     position: relative;
     inline-size: 100%;
     min-inline-size: 0;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 80%, transparent);
-    border-radius: 12px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     background: color-mix(in srgb, var(--ui-chart-surface) 97%, transparent);
     min-block-size: var(--ui-chart-plot-min-height);
     block-size: var(--ui-chart-plot-height);
@@ -357,8 +357,8 @@
     min-inline-size: 132px;
     max-inline-size: min(220px, calc(100% - 16px));
     padding: 10px 12px;
-    border-radius: 12px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 86%, transparent);
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 98%, transparent);
     box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
     color: var(--ui-chart-text);
@@ -371,7 +371,7 @@
   .tooltip-title {
     font-size: 12px;
     line-height: 1.2;
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .tooltip-list {
@@ -404,7 +404,7 @@
   }
 
   .tooltip-value {
-    font-weight: 700;
+    font-weight: 600;
     color: var(--ui-chart-text);
     white-space: nowrap;
   }
@@ -414,8 +414,8 @@
     align-items: center;
     justify-content: space-between;
     gap: 10px;
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
-    border-radius: 10px;
+    border: 1px solid transparent;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 8px 10px;
     font-size: 12px;
     line-height: 1.35;
@@ -425,7 +425,7 @@
 
   .insight strong {
     color: var(--ui-chart-text);
-    font-weight: 700;
+    font-weight: 600;
   }
 
   .legend {
@@ -435,9 +435,9 @@
   }
 
   .legend-item {
-    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    border: 1px solid transparent;
     background: color-mix(in srgb, var(--ui-chart-surface) 94%, transparent);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     min-block-size: 30px;
     display: inline-flex;
     align-items: center;
@@ -480,7 +480,7 @@
   .empty,
   .message {
     border: 1px dashed color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
-    border-radius: 10px;
+    border-radius: var(--ui-control-radius-2, var(--ui-radius, 6px));
     padding: 14px;
     text-align: center;
     font-size: 12px;
@@ -489,13 +489,13 @@
   }
 
   .message[data-tone="error"] {
-    color: var(--ui-chart-danger);
+    color: color-mix(in srgb, var(--ui-chart-danger) 68%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-danger) 30%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-danger) 10%, transparent);
   }
 
   .message[data-tone="success"] {
-    color: var(--ui-chart-success);
+    color: color-mix(in srgb, var(--ui-chart-success) 68%, var(--ui-chart-text));
     border-color: color-mix(in srgb, var(--ui-chart-success) 30%, var(--ui-chart-border));
     background: color-mix(in srgb, var(--ui-chart-success) 10%, transparent);
   }
@@ -613,45 +613,45 @@
       background-position: -220% 0;
     }
   }
-`,q=["var(--ui-color-primary, #2563eb)","var(--ui-color-success, #15803d)","var(--ui-color-warning, #b45309)","var(--ui-color-danger, #dc2626)","var(--ui-color-info, #0e7490)","var(--ui-color-accent, #7c3aed)"];function c(p){return p.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function M(p,t,e){return Math.max(t,Math.min(e,p))}function G(p,t,e){if(p)try{const i=JSON.parse(p);if(Array.isArray(i))return i.map((o,s)=>{if(typeof o=="number")return Number.isFinite(o)?{label:String(s+1),value:o}:null;if(o&&typeof o=="object"){const n=Number(o.value);if(!Number.isFinite(n))return null;const d=o.label,u=o.tone;return{label:typeof d=="string"&&d.trim()?d.trim():String(s+1),value:n,tone:typeof u=="string"&&u.trim()?u.trim():void 0}}return null}).filter(o=>!!o)}catch{return[]}const a=(t||"").split(",").map(i=>Number(i.trim())).filter(i=>Number.isFinite(i)),r=(e||"").split(",").map(i=>i.trim()).filter(Boolean);return a.map((i,o)=>({label:r[o]||String(o+1),value:i}))}function Q(p){return Array.isArray(p)?p.map((t,e)=>{if(typeof t=="number")return Number.isFinite(t)?{label:String(e+1),value:t}:null;if(t&&typeof t=="object"){const a=Number(t.value);if(!Number.isFinite(a))return null;const r=t.label,i=t.tone;return{label:typeof r=="string"&&r.trim()?r.trim():String(e+1),value:a,tone:typeof i=="string"&&i.trim()?i.trim():void 0}}return null}).filter(t=>!!t):[]}function tt(p){if(!p)return[];try{const t=JSON.parse(p);return Array.isArray(t)?t.map((a,r)=>{if(!a||typeof a!="object")return null;const i=a.name,o=Q(a.data);if(!o.length)return null;const s=a.tone,n=a.dash,d=Number(a.strokeWidth),u=Number(a.opacity),T=a.fill;return{name:typeof i=="string"&&i.trim()?i.trim():`Series ${r+1}`,data:o,tone:typeof s=="string"&&s.trim()?s.trim():void 0,dash:typeof n=="string"&&n.trim()?n.trim():void 0,strokeWidth:Number.isFinite(d)&&d>0?d:void 0,opacity:Number.isFinite(u)&&u>0?u:void 0,fill:typeof T=="boolean"?T:void 0}}).filter(a=>!!a):[]}catch{return[]}}function et(p){const t=p.map((a,r)=>({label:a.label?.trim()||String(r+1),value:Number(a.value),tone:typeof a.tone=="string"&&a.tone.trim()?a.tone.trim():void 0})).filter(a=>Number.isFinite(a.value));if(t.length<=V)return{points:t,truncated:0};const e=t.length-V;return{points:t.slice(t.length-V),truncated:e}}function at(p,t){const a=(p.length?p:t.length?[{name:"Series 1",data:t}]:[]).map(n=>{const d=et(n.data);return{name:n.name,data:d.points,tone:n.tone,fill:n.fill,dash:n.dash,strokeWidth:n.strokeWidth,opacity:n.opacity,truncated:d.truncated}}).filter(n=>n.data.length>0),r=new Set;a.forEach(n=>{n.data.forEach(d=>r.add(d.label))});let i=Array.from(r),o=a.reduce((n,d)=>Math.max(n,d.truncated),0);i.length>V&&(o+=i.length-V,i=i.slice(i.length-V));const s=a.map(n=>{const d=new Set(i);return{name:n.name,data:n.data.filter(u=>d.has(u.label)),tone:n.tone,fill:n.fill,dash:n.dash,strokeWidth:n.strokeWidth,opacity:n.opacity}});return{labels:i,series:s,truncated:o}}function K(p){return p==="loading"?"Updating":p==="error"?"Issue":p==="success"?"Stable":"Live"}function it(p){return p==="loading"||p==="error"||p==="success"?p:"idle"}class Z extends J.ElementBase{constructor(){super(...arguments),this._activeIndex=null,this._activePinned=!1,this._onClickBound=t=>this._onClick(t),this._onKeyDownBound=t=>this._onKeyDown(t),this._onPointerOverBound=t=>this._onPointerOver(t),this._onPointerLeaveBound=()=>this._onPointerLeave(),this._onFocusInBound=t=>this._onFocusIn(t)}static get observedAttributes(){return["data","series","values","labels","type","variant","title","subtitle","headless","state","disabled","interactive","show-legend","show-summary","value-prefix","value-suffix","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClickBound),this.root.addEventListener("keydown",this._onKeyDownBound),this.root.addEventListener("pointerover",this._onPointerOverBound),this.root.addEventListener("pointerleave",this._onPointerLeaveBound),this.root.addEventListener("focusin",this._onFocusInBound)}disconnectedCallback(){this.root.removeEventListener("click",this._onClickBound),this.root.removeEventListener("keydown",this._onKeyDownBound),this.root.removeEventListener("pointerover",this._onPointerOverBound),this.root.removeEventListener("pointerleave",this._onPointerLeaveBound),this.root.removeEventListener("focusin",this._onFocusInBound),super.disconnectedCallback()}attributeChangedCallback(t,e,a){e!==a&&((t==="disabled"||t==="state"||t==="interactive")&&(this._isInteractive()||(this._activeIndex=null,this._activePinned=!1)),super.attributeChangedCallback(t,e,a))}_data(){const t=G(this.getAttribute("data"),this.getAttribute("values"),this.getAttribute("labels")),e=tt(this.getAttribute("series"));return at(e,t)}_type(){const t=this.getAttribute("type");return t==="line"||t==="area"||t==="bar"||t==="donut"||t==="step"||t==="scatter"||t==="radial"?t:"line"}_state(){return it(this.getAttribute("state"))}_isDisabled(){return this.hasAttribute("disabled")||this._state()==="loading"}_isInteractive(){const t=(this.getAttribute("interactive")||"").trim().toLowerCase();return t==="false"||t==="0"||t==="off"?!1:!this._isDisabled()}_showLegend(){const t=(this.getAttribute("show-legend")||"").trim().toLowerCase();return t?t!=="false"&&t!=="0"&&t!=="off":!0}_showSummary(){const t=(this.getAttribute("show-summary")||"").trim().toLowerCase();return t?t!=="false"&&t!=="0"&&t!=="off":!0}_primarySeries(t){return t.series[0]||null}_valuePrefix(){return this.getAttribute("value-prefix")||""}_valueSuffix(){return this.getAttribute("value-suffix")||""}_resolveStats(t){const e=t.map(u=>u.value),a=e.reduce((u,T)=>u+T,0),r=e.length?a/e.length:0,i=e.length?Math.min(...e):0,o=e.length?Math.max(...e):0,s=e.length>1?e[e.length-1]-e[0]:0,n=e[0]||0,d=n!==0?s/Math.abs(n)*100:null;return{total:a,average:r,min:i,max:o,delta:s,deltaPct:d}}_valueDomain(t,e){const a=!!e?.includeZero,r=e?.fitPadding??.14,i=t.map(u=>u.value);let o=Math.min(...i),s=Math.max(...i);a&&(o=Math.min(0,o),s=Math.max(0,s));let n=s-o;if(n<=0){const u=Math.max(Math.abs(s)*.12,1);o-=u,s+=u,n=s-o}else{const u=n*r;a?(o-=u*.25,s+=u):(o-=u,s+=u),n=s-o}const d=o<=0&&s>=0;return{min:o,max:s,span:n,zeroInDomain:d}}_formatValue(t,e){const a=this._valuePrefix(),r=this._valueSuffix();try{const i=new Intl.NumberFormat(void 0,{maximumFractionDigits:Math.abs(t)>=100?0:1,...e}).format(t);return`${a}${i}${r}`}catch{return`${a}${t.toFixed(Math.abs(t)>=100?0:1)}${r}`}}_seriesTone(t,e){return t.tone||q[e%q.length]||"var(--ui-chart-accent)"}_pointTone(t,e,a){return t.tone||a||q[e%q.length]||"var(--ui-chart-accent)"}_seriesValueDetails(t,e,a){const r=t[a];return e.map((i,o)=>{const s=i.data.find(n=>n.label===r)||null;return{series:i.name,value:s?.value??null,tone:s?.tone||this._seriesTone(i,o)}})}_pointDetail(t,e,a,r){const i=this._primarySeries(e);if(!i)return null;const o=e.labels[t];if(!o)return null;const s=i.data.find(u=>u.label===o)||i.data[t];if(!s)return null;const n=this._resolveStats(i.data),d=this._seriesValueDetails(e.labels,e.series,t);return{index:t,label:o,value:s.value,tone:s.tone||this._seriesTone(i,0),series:i.name,seriesValues:d,type:a,total:n.total,min:n.min,max:n.max,source:r}}_emitPointSelect(t,e,a){const r=this._pointDetail(t,e,this._type(),a);r&&(this.dispatchEvent(new CustomEvent("point-select",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-point-select",{detail:r,bubbles:!0,composed:!0})))}_indexFromTarget(t){const e=t instanceof Element?t.closest("[data-point-index]"):null;if(!e)return null;const a=Number(e.getAttribute("data-point-index"));return!Number.isInteger(a)||a<0?null:a}_setActiveIndex(t,e){this._activeIndex=t,this._activePinned=e,this.requestRender()}_focusIndex(t){const e=this.root.querySelector(`.legend-item[data-point-index="${t}"]`);if(e)try{e.focus({preventScroll:!0})}catch{e.focus()}}_onPointerOver(t){if(!this._isInteractive()||this._activePinned)return;const e=this._indexFromTarget(t.target);e==null||this._activeIndex===e||(this._activeIndex=e,this.requestRender())}_onPointerLeave(){!this._isInteractive()||this._activePinned||this._activeIndex==null||(this._activeIndex=null,this.requestRender())}_onFocusIn(t){if(!this._isInteractive())return;const e=this._indexFromTarget(t.target);e==null||this._activeIndex===e||(this._activeIndex=e,this.requestRender())}_onClick(t){if(!this._isInteractive())return;const e=this._data();if(!e.labels.length||!e.series.length)return;const a=this._indexFromTarget(t.target);if(a==null||a>=e.labels.length)return;const r=!(this._activePinned&&this._activeIndex===a);this._activeIndex=a,this._activePinned=r,this.requestRender(),this._emitPointSelect(a,e,"pointer")}_onKeyDown(t){if(!this._isInteractive())return;const e=this._data();if(!e.labels.length||!e.series.length)return;const r=this._indexFromTarget(t.target)??this._activeIndex??0;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault();const o=M(r+1,0,e.labels.length-1);this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault();const o=M(r-1,0,e.labels.length-1);this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="Home"){t.preventDefault(),this._setActiveIndex(0,!0),this._focusIndex(0);return}if(t.key==="End"){t.preventDefault();const o=e.labels.length-1;this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="Escape"){if(!this._activePinned&&this._activeIndex==null)return;t.preventDefault(),this._setActiveIndex(null,!1);return}if(t.key!=="Enter"&&t.key!==" ")return;t.preventDefault();const i=M(r,0,e.labels.length-1);this._setActiveIndex(i,!0),this._emitPointSelect(i,e,"keyboard")}_axisXLabels(t){if(t.length<=8)return t.map(()=>"visible");const e=Math.max(1,Math.ceil(t.length/6));return t.map((a,r)=>r===0||r===t.length-1||r%e===0?"visible":"hidden")}_buildCartesianTicks(t,e){return[1,.75,.5,.25,0].map(a=>this._formatValue(t+(e-t)*a))}_plotCartesian(t,e,a){const $=t.labels,P=t.series,w=e==="bar",b=P.flatMap(g=>g.data.map(x=>x.value)),_=this._valueDomain(b.map((g,x)=>({label:String(x),value:g})),{includeZero:w}),F=_.min,l=_.max,v=_.span,f=$.length>1?208/($.length-1):0,S=_.zeroInDomain?0:F,h=6+(l-S)/v*48,k=[0,.25,.5,.75,1].map(g=>{const x=6+48*g,I=_.zeroInDomain&&Math.abs(x-h)<.5;return`<line x1="8" y1="${x.toFixed(2)}" x2="${216 .toFixed(2)}" y2="${x.toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="${I?"0.75":"0.45"}" />`}).join(""),L=P.map(g=>new Map(g.data.map(x=>[x.label,x]))),j=$.map((g,x)=>{const I=8+f*x,D=L.map(z=>z.get(g)).filter(z=>!!z).map(z=>6+(l-z.value)/v*48),C=D.length?Math.min(...D):6+48/2;return{xPct:M(I/220*100,0,100),yPct:M(C/64*100,0,100)}}),E=$.map((g,x)=>{const I=j[x];return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${x}" data-active="${a===x?"true":"false"}" style="--x:${I.xPct.toFixed(3)};--y:${I.yPct.toFixed(3)};" aria-label="${c(g)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");if(e==="bar"){const g=208/Math.max(1,$.length),x=M(g*.82,6,22),I=x/Math.max(1,P.length),D=P.map((C,z)=>{const N=this._seriesTone(C,z);return $.map((O,H)=>{const W=L[z].get(O);if(!W)return"";const m=8+H*g+(g-x)/2+I*z,y=6+(l-W.value)/v*48,A=Math.min(y,h),R=Math.max(1,Math.abs(h-y)),B=a===H,Y=a==null||B?C.opacity??1:.72;return`<rect x="${m.toFixed(2)}" y="${A.toFixed(2)}" width="${Math.max(2,I-1).toFixed(2)}" height="${R.toFixed(2)}" rx="1.4" fill="${c(N)}" opacity="${Y}" />`}).join("")}).join("");return{svg:`
+`,q=["var(--ui-color-primary, #2563eb)","var(--ui-color-success, #15803d)","var(--ui-color-warning, #b45309)","var(--ui-color-danger, #dc2626)","var(--ui-color-info, #0e7490)","var(--ui-color-accent, #7c3aed)"];function c(p){return p.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function M(p,t,e){return Math.max(t,Math.min(e,p))}function G(p,t,e){if(p)try{const i=JSON.parse(p);if(Array.isArray(i))return i.map((o,s)=>{if(typeof o=="number")return Number.isFinite(o)?{label:String(s+1),value:o}:null;if(o&&typeof o=="object"){const n=Number(o.value);if(!Number.isFinite(n))return null;const u=o.label,d=o.tone;return{label:typeof u=="string"&&u.trim()?u.trim():String(s+1),value:n,tone:typeof d=="string"&&d.trim()?d.trim():void 0}}return null}).filter(o=>!!o)}catch{return[]}const a=(t||"").split(",").map(i=>Number(i.trim())).filter(i=>Number.isFinite(i)),r=(e||"").split(",").map(i=>i.trim()).filter(Boolean);return a.map((i,o)=>({label:r[o]||String(o+1),value:i}))}function Q(p){return Array.isArray(p)?p.map((t,e)=>{if(typeof t=="number")return Number.isFinite(t)?{label:String(e+1),value:t}:null;if(t&&typeof t=="object"){const a=Number(t.value);if(!Number.isFinite(a))return null;const r=t.label,i=t.tone;return{label:typeof r=="string"&&r.trim()?r.trim():String(e+1),value:a,tone:typeof i=="string"&&i.trim()?i.trim():void 0}}return null}).filter(t=>!!t):[]}function tt(p){if(!p)return[];try{const t=JSON.parse(p);return Array.isArray(t)?t.map((a,r)=>{if(!a||typeof a!="object")return null;const i=a.name,o=Q(a.data);if(!o.length)return null;const s=a.tone,n=a.dash,u=Number(a.strokeWidth),d=Number(a.opacity),T=a.fill;return{name:typeof i=="string"&&i.trim()?i.trim():`Series ${r+1}`,data:o,tone:typeof s=="string"&&s.trim()?s.trim():void 0,dash:typeof n=="string"&&n.trim()?n.trim():void 0,strokeWidth:Number.isFinite(u)&&u>0?u:void 0,opacity:Number.isFinite(d)&&d>0?d:void 0,fill:typeof T=="boolean"?T:void 0}}).filter(a=>!!a):[]}catch{return[]}}function et(p){const t=p.map((a,r)=>({label:a.label?.trim()||String(r+1),value:Number(a.value),tone:typeof a.tone=="string"&&a.tone.trim()?a.tone.trim():void 0})).filter(a=>Number.isFinite(a.value));if(t.length<=V)return{points:t,truncated:0};const e=t.length-V;return{points:t.slice(t.length-V),truncated:e}}function at(p,t){const a=(p.length?p:t.length?[{name:"Series 1",data:t}]:[]).map(n=>{const u=et(n.data);return{name:n.name,data:u.points,tone:n.tone,fill:n.fill,dash:n.dash,strokeWidth:n.strokeWidth,opacity:n.opacity,truncated:u.truncated}}).filter(n=>n.data.length>0),r=new Set;a.forEach(n=>{n.data.forEach(u=>r.add(u.label))});let i=Array.from(r),o=a.reduce((n,u)=>Math.max(n,u.truncated),0);i.length>V&&(o+=i.length-V,i=i.slice(i.length-V));const s=a.map(n=>{const u=new Set(i);return{name:n.name,data:n.data.filter(d=>u.has(d.label)),tone:n.tone,fill:n.fill,dash:n.dash,strokeWidth:n.strokeWidth,opacity:n.opacity}});return{labels:i,series:s,truncated:o}}function K(p){return p==="loading"?"Updating":p==="error"?"Issue":p==="success"?"Stable":"Live"}function it(p){return p==="loading"||p==="error"||p==="success"?p:"idle"}class Z extends J.ElementBase{constructor(){super(...arguments),this._activeIndex=null,this._activePinned=!1,this._onClickBound=t=>this._onClick(t),this._onKeyDownBound=t=>this._onKeyDown(t),this._onPointerOverBound=t=>this._onPointerOver(t),this._onPointerLeaveBound=()=>this._onPointerLeave(),this._onFocusInBound=t=>this._onFocusIn(t)}static get observedAttributes(){return["data","series","values","labels","type","variant","title","subtitle","headless","state","disabled","interactive","show-legend","show-summary","value-prefix","value-suffix","aria-label"]}connectedCallback(){super.connectedCallback(),this.root.addEventListener("click",this._onClickBound),this.root.addEventListener("keydown",this._onKeyDownBound),this.root.addEventListener("pointerover",this._onPointerOverBound),this.root.addEventListener("pointerleave",this._onPointerLeaveBound),this.root.addEventListener("focusin",this._onFocusInBound)}disconnectedCallback(){this.root.removeEventListener("click",this._onClickBound),this.root.removeEventListener("keydown",this._onKeyDownBound),this.root.removeEventListener("pointerover",this._onPointerOverBound),this.root.removeEventListener("pointerleave",this._onPointerLeaveBound),this.root.removeEventListener("focusin",this._onFocusInBound),super.disconnectedCallback()}attributeChangedCallback(t,e,a){e!==a&&((t==="disabled"||t==="state"||t==="interactive")&&(this._isInteractive()||(this._activeIndex=null,this._activePinned=!1)),super.attributeChangedCallback(t,e,a))}_data(){const t=G(this.getAttribute("data"),this.getAttribute("values"),this.getAttribute("labels")),e=tt(this.getAttribute("series"));return at(e,t)}_type(){const t=this.getAttribute("type");return t==="line"||t==="area"||t==="bar"||t==="donut"||t==="step"||t==="scatter"||t==="radial"?t:"line"}_state(){return it(this.getAttribute("state"))}_isDisabled(){return this.hasAttribute("disabled")||this._state()==="loading"}_isInteractive(){const t=(this.getAttribute("interactive")||"").trim().toLowerCase();return t==="false"||t==="0"||t==="off"?!1:!this._isDisabled()}_showLegend(){const t=(this.getAttribute("show-legend")||"").trim().toLowerCase();return t?t!=="false"&&t!=="0"&&t!=="off":!0}_showSummary(){const t=(this.getAttribute("show-summary")||"").trim().toLowerCase();return t?t!=="false"&&t!=="0"&&t!=="off":!0}_primarySeries(t){return t.series[0]||null}_valuePrefix(){return this.getAttribute("value-prefix")||""}_valueSuffix(){return this.getAttribute("value-suffix")||""}_resolveStats(t){const e=t.map(d=>d.value),a=e.reduce((d,T)=>d+T,0),r=e.length?a/e.length:0,i=e.length?Math.min(...e):0,o=e.length?Math.max(...e):0,s=e.length>1?e[e.length-1]-e[0]:0,n=e[0]||0,u=n!==0?s/Math.abs(n)*100:null;return{total:a,average:r,min:i,max:o,delta:s,deltaPct:u}}_valueDomain(t,e){const a=!!e?.includeZero,r=e?.fitPadding??.14,i=t.map(d=>d.value);let o=Math.min(...i),s=Math.max(...i);a&&(o=Math.min(0,o),s=Math.max(0,s));let n=s-o;if(n<=0){const d=Math.max(Math.abs(s)*.12,1);o-=d,s+=d,n=s-o}else{const d=n*r;a?(o-=d*.25,s+=d):(o-=d,s+=d),n=s-o}const u=o<=0&&s>=0;return{min:o,max:s,span:n,zeroInDomain:u}}_formatValue(t,e){const a=this._valuePrefix(),r=this._valueSuffix();try{const i=new Intl.NumberFormat(void 0,{maximumFractionDigits:Math.abs(t)>=100?0:1,...e}).format(t);return`${a}${i}${r}`}catch{return`${a}${t.toFixed(Math.abs(t)>=100?0:1)}${r}`}}_seriesTone(t,e){return t.tone||q[e%q.length]||"var(--ui-chart-accent)"}_pointTone(t,e,a){return t.tone||a||q[e%q.length]||"var(--ui-chart-accent)"}_seriesValueDetails(t,e,a){const r=t[a];return e.map((i,o)=>{const s=i.data.find(n=>n.label===r)||null;return{series:i.name,value:s?.value??null,tone:s?.tone||this._seriesTone(i,o)}})}_pointDetail(t,e,a,r){const i=this._primarySeries(e);if(!i)return null;const o=e.labels[t];if(!o)return null;const s=i.data.find(d=>d.label===o)||i.data[t];if(!s)return null;const n=this._resolveStats(i.data),u=this._seriesValueDetails(e.labels,e.series,t);return{index:t,label:o,value:s.value,tone:s.tone||this._seriesTone(i,0),series:i.name,seriesValues:u,type:a,total:n.total,min:n.min,max:n.max,source:r}}_emitPointSelect(t,e,a){const r=this._pointDetail(t,e,this._type(),a);r&&(this.dispatchEvent(new CustomEvent("point-select",{detail:r,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-point-select",{detail:r,bubbles:!0,composed:!0})))}_indexFromTarget(t){const e=t instanceof Element?t.closest("[data-point-index]"):null;if(!e)return null;const a=Number(e.getAttribute("data-point-index"));return!Number.isInteger(a)||a<0?null:a}_setActiveIndex(t,e){this._activeIndex=t,this._activePinned=e,this.requestRender()}_focusIndex(t){const e=this.root.querySelector(`.legend-item[data-point-index="${t}"]`);if(e)try{e.focus({preventScroll:!0})}catch{e.focus()}}_onPointerOver(t){if(!this._isInteractive()||this._activePinned)return;const e=this._indexFromTarget(t.target);e==null||this._activeIndex===e||(this._activeIndex=e,this.requestRender())}_onPointerLeave(){!this._isInteractive()||this._activePinned||this._activeIndex==null||(this._activeIndex=null,this.requestRender())}_onFocusIn(t){if(!this._isInteractive())return;const e=this._indexFromTarget(t.target);e==null||this._activeIndex===e||(this._activeIndex=e,this.requestRender())}_onClick(t){if(!this._isInteractive())return;const e=this._data();if(!e.labels.length||!e.series.length)return;const a=this._indexFromTarget(t.target);if(a==null||a>=e.labels.length)return;const r=!(this._activePinned&&this._activeIndex===a);this._activeIndex=a,this._activePinned=r,this.requestRender(),this._emitPointSelect(a,e,"pointer")}_onKeyDown(t){if(!this._isInteractive())return;const e=this._data();if(!e.labels.length||!e.series.length)return;const r=this._indexFromTarget(t.target)??this._activeIndex??0;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault();const o=M(r+1,0,e.labels.length-1);this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault();const o=M(r-1,0,e.labels.length-1);this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="Home"){t.preventDefault(),this._setActiveIndex(0,!0),this._focusIndex(0);return}if(t.key==="End"){t.preventDefault();const o=e.labels.length-1;this._setActiveIndex(o,!0),this._focusIndex(o);return}if(t.key==="Escape"){if(!this._activePinned&&this._activeIndex==null)return;t.preventDefault(),this._setActiveIndex(null,!1);return}if(t.key!=="Enter"&&t.key!==" ")return;t.preventDefault();const i=M(r,0,e.labels.length-1);this._setActiveIndex(i,!0),this._emitPointSelect(i,e,"keyboard")}_axisXLabels(t){if(t.length<=8)return t.map(()=>"visible");const e=Math.max(1,Math.ceil(t.length/6));return t.map((a,r)=>r===0||r===t.length-1||r%e===0?"visible":"hidden")}_buildCartesianTicks(t,e){return[1,.75,.5,.25,0].map(a=>this._formatValue(t+(e-t)*a))}_plotCartesian(t,e,a){const $=t.labels,P=t.series,w=e==="bar",v=P.flatMap(g=>g.data.map(x=>x.value)),_=this._valueDomain(v.map((g,x)=>({label:String(x),value:g})),{includeZero:w}),F=_.min,l=_.max,b=_.span,f=$.length>1?208/($.length-1):0,S=_.zeroInDomain?0:F,h=6+(l-S)/b*48,k=[0,.25,.5,.75,1].map(g=>{const x=6+48*g,I=_.zeroInDomain&&Math.abs(x-h)<.5;return`<line x1="8" y1="${x.toFixed(2)}" x2="${216 .toFixed(2)}" y2="${x.toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="${I?"0.75":"0.45"}" />`}).join(""),L=P.map(g=>new Map(g.data.map(x=>[x.label,x]))),j=$.map((g,x)=>{const I=8+f*x,D=L.map(z=>z.get(g)).filter(z=>!!z).map(z=>6+(l-z.value)/b*48),C=D.length?Math.min(...D):6+48/2;return{xPct:M(I/220*100,0,100),yPct:M(C/64*100,0,100)}}),E=$.map((g,x)=>{const I=j[x];return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${x}" data-active="${a===x?"true":"false"}" style="--x:${I.xPct.toFixed(3)};--y:${I.yPct.toFixed(3)};" aria-label="${c(g)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");if(e==="bar"){const g=208/Math.max(1,$.length),x=M(g*.82,6,22),I=x/Math.max(1,P.length),D=P.map((C,z)=>{const N=this._seriesTone(C,z);return $.map((O,H)=>{const W=L[z].get(O);if(!W)return"";const m=8+H*g+(g-x)/2+I*z,y=6+(l-W.value)/b*48,A=Math.min(y,h),R=Math.max(1,Math.abs(h-y)),B=a===H,Y=a==null||B?C.opacity??1:.72;return`<rect x="${m.toFixed(2)}" y="${A.toFixed(2)}" width="${Math.max(2,I-1).toFixed(2)}" height="${R.toFixed(2)}" rx="1.4" fill="${c(N)}" opacity="${Y}" />`}).join("")}).join("");return{svg:`
           <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="none">
             <g class="plot-grid">${k}</g>
             ${D}
           </svg>
-        `,hits:E,anchors:j,yTicks:this._buildCartesianTicks(F,l)}}const X=P.map((g,x)=>{const I=this._seriesTone(g,x),D=$.map((m,y)=>{const A=L[x].get(m)||null,R=8+f*y,B=A?6+(l-A.value)/v*48:null;return{x:R,y:B,point:A,index:y}}),C=[];let z=[];D.forEach(m=>{if(!m.point||m.y==null){z.length&&C.push(z),z=[];return}z.push({x:m.x,y:m.y,point:m.point,index:m.index})}),z.length&&C.push(z);const N=m=>m.map((y,A)=>A===0?`M${y.x.toFixed(2)} ${y.y.toFixed(2)}`:e==="step"?`H${y.x.toFixed(2)} V${y.y.toFixed(2)}`:`L${y.x.toFixed(2)} ${y.y.toFixed(2)}`).join(" "),O=e==="area"?C.map(m=>{if(!(typeof g.fill=="boolean"?g.fill:x===0))return"";const A=N(m),R=m[0],B=m[m.length-1];return`<path d="${A} L ${B.x.toFixed(2)} ${h.toFixed(2)} L ${R.x.toFixed(2)} ${h.toFixed(2)} Z" fill="color-mix(in srgb, ${I} 18%, transparent)" opacity="${g.opacity??(x===0?1:.65)}" />`}).join(""):"",H=e==="scatter"?"":C.map(m=>`<path d="${N(m)}" fill="none" stroke="${c(I)}" stroke-width="${(g.strokeWidth||(x===0?1.9:1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash?`stroke-dasharray="${c(g.dash)}"`:""} opacity="${g.opacity??1}" />`).join(""),W=D.map(m=>{if(!m.point||m.y==null)return"";const y=a===m.index,A=y?2.35:1.6,R=a==null||y?g.opacity??1:.72;return`<circle cx="${m.x.toFixed(2)}" cy="${m.y.toFixed(2)}" r="${A.toFixed(2)}" fill="${c(this._pointTone(m.point,m.index,I))}" opacity="${R}" />`}).join("");return`${O}${H}${W}`}).join("");return{svg:`
+        `,hits:E,anchors:j,yTicks:this._buildCartesianTicks(F,l)}}const X=P.map((g,x)=>{const I=this._seriesTone(g,x),D=$.map((m,y)=>{const A=L[x].get(m)||null,R=8+f*y,B=A?6+(l-A.value)/b*48:null;return{x:R,y:B,point:A,index:y}}),C=[];let z=[];D.forEach(m=>{if(!m.point||m.y==null){z.length&&C.push(z),z=[];return}z.push({x:m.x,y:m.y,point:m.point,index:m.index})}),z.length&&C.push(z);const N=m=>m.map((y,A)=>A===0?`M${y.x.toFixed(2)} ${y.y.toFixed(2)}`:e==="step"?`H${y.x.toFixed(2)} V${y.y.toFixed(2)}`:`L${y.x.toFixed(2)} ${y.y.toFixed(2)}`).join(" "),O=e==="area"?C.map(m=>{if(!(typeof g.fill=="boolean"?g.fill:x===0))return"";const A=N(m),R=m[0],B=m[m.length-1];return`<path d="${A} L ${B.x.toFixed(2)} ${h.toFixed(2)} L ${R.x.toFixed(2)} ${h.toFixed(2)} Z" fill="color-mix(in srgb, ${I} 18%, transparent)" opacity="${g.opacity??(x===0?1:.65)}" />`}).join(""):"",H=e==="scatter"?"":C.map(m=>`<path d="${N(m)}" fill="none" stroke="${c(I)}" stroke-width="${(g.strokeWidth||(x===0?1.9:1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash?`stroke-dasharray="${c(g.dash)}"`:""} opacity="${g.opacity??1}" />`).join(""),W=D.map(m=>{if(!m.point||m.y==null)return"";const y=a===m.index,A=y?2.35:1.6,R=a==null||y?g.opacity??1:.72;return`<circle cx="${m.x.toFixed(2)}" cy="${m.y.toFixed(2)}" r="${A.toFixed(2)}" fill="${c(this._pointTone(m.point,m.index,I))}" opacity="${R}" />`}).join("");return`${O}${H}${W}`}).join("");return{svg:`
         <svg class="plot" part="plot" viewBox="0 0 220 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="none">
           <g class="plot-grid">${k}</g>
           ${X}
         </svg>
-      `,hits:E,anchors:j,yTicks:this._buildCartesianTicks(F,l)}}_plotRadial(t,e){const n=t.map(l=>l.value),d=Math.min(...n),u=Math.max(...n),T=Math.max(1,u-d),$=t.map((l,v)=>{const f=-Math.PI/2+Math.PI*2*v/t.length,h=10+(l.value-d)/T*18,k=32+Math.cos(f)*h,L=32+Math.sin(f)*h;return{x:k,y:L,point:l,index:v,angle:f}}),P=$.map((l,v)=>`${v===0?"M":"L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ")+" Z",w=[.25,.5,.75,1].map(l=>`<circle cx="32" cy="32" r="${(10+l*18).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""),b=$.map(l=>`<line x1="32" y1="32" x2="${(32+Math.cos(l.angle)*28).toFixed(2)}" y2="${(32+Math.sin(l.angle)*28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""),_=$.map(l=>{const v=this._pointTone(l.point,l.index),f=e===l.index;return`<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f?"2.35":"1.85"}" fill="${c(v)}" opacity="${e==null||f?"1":"0.74"}" />`}).join(""),F=$.map(l=>{const v=M(l.x/64*100,0,100).toFixed(3),f=M(l.y/64*100,0,100).toFixed(3),S=e===l.index,h=`${l.point.label}: ${this._formatValue(l.point.value)}`;return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S?"true":"false"}" style="--x:${v};--y:${f};" aria-label="${c(h)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");return{svg:`
+      `,hits:E,anchors:j,yTicks:this._buildCartesianTicks(F,l)}}_plotRadial(t,e){const n=t.map(l=>l.value),u=Math.min(...n),d=Math.max(...n),T=Math.max(1,d-u),$=t.map((l,b)=>{const f=-Math.PI/2+Math.PI*2*b/t.length,h=10+(l.value-u)/T*18,k=32+Math.cos(f)*h,L=32+Math.sin(f)*h;return{x:k,y:L,point:l,index:b,angle:f}}),P=$.map((l,b)=>`${b===0?"M":"L"}${l.x.toFixed(2)} ${l.y.toFixed(2)}`).join(" ")+" Z",w=[.25,.5,.75,1].map(l=>`<circle cx="32" cy="32" r="${(10+l*18).toFixed(2)}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""),v=$.map(l=>`<line x1="32" y1="32" x2="${(32+Math.cos(l.angle)*28).toFixed(2)}" y2="${(32+Math.sin(l.angle)*28).toFixed(2)}" stroke="var(--ui-chart-grid)" stroke-width="0.45" />`).join(""),_=$.map(l=>{const b=this._pointTone(l.point,l.index),f=e===l.index;return`<circle cx="${l.x.toFixed(2)}" cy="${l.y.toFixed(2)}" r="${f?"2.35":"1.85"}" fill="${c(b)}" opacity="${e==null||f?"1":"0.74"}" />`}).join(""),F=$.map(l=>{const b=M(l.x/64*100,0,100).toFixed(3),f=M(l.y/64*100,0,100).toFixed(3),S=e===l.index,h=`${l.point.label}: ${this._formatValue(l.point.value)}`;return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${l.index}" data-active="${S?"true":"false"}" style="--x:${b};--y:${f};" aria-label="${c(h)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");return{svg:`
         <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
           ${w}
-          ${b}
+          ${v}
           <path d="${P}" fill="color-mix(in srgb, var(--ui-chart-accent) 16%, transparent)" stroke="var(--ui-chart-accent)" stroke-width="1.2" />
           ${_}
         </svg>
-      `,hits:F,anchors:$.map(l=>({xPct:M(l.x/64*100,0,100),yPct:M(l.y/64*100,0,100)})),yTicks:[]}}_plotDonut(t,e){const a=t.reduce((w,b)=>w+Math.max(0,b.value),0),r=Math.max(1,a),i=18,o=7,s=32,n=32,d=2*Math.PI*i;let u=0;const T=t.map((w,b)=>{const l=Math.max(0,w.value)/r*d,v=this._pointTone(w,b),f=e===b,S=e==null||f?"1":"0.7",h=`
+      `,hits:F,anchors:$.map(l=>({xPct:M(l.x/64*100,0,100),yPct:M(l.y/64*100,0,100)})),yTicks:[]}}_plotDonut(t,e){const a=t.reduce((w,v)=>w+Math.max(0,v.value),0),r=Math.max(1,a),i=18,o=7,s=32,n=32,u=2*Math.PI*i;let d=0;const T=t.map((w,v)=>{const l=Math.max(0,w.value)/r*u,b=this._pointTone(w,v),f=e===v,S=e==null||f?"1":"0.7",h=`
           <circle
             cx="${s}"
             cy="${n}"
             r="${i}"
             fill="none"
-            stroke="${c(v)}"
+            stroke="${c(b)}"
             stroke-width="${f?o+.8:o}"
-            stroke-dasharray="${l.toFixed(3)} ${(d-l).toFixed(3)}"
-            stroke-dashoffset="${(-u).toFixed(3)}"
+            stroke-dasharray="${l.toFixed(3)} ${(u-l).toFixed(3)}"
+            stroke-dashoffset="${(-d).toFixed(3)}"
             transform="rotate(-90 ${s} ${n})"
             stroke-linecap="round"
             opacity="${S}"
           />
-        `;return u+=l,h}).join("");let $=0;const P=t.map((w,b)=>{const _=Math.max(0,w.value),l=_/r*Math.PI*2,v=-Math.PI/2+$+l/2,f=s+Math.cos(v)*(i+6),S=n+Math.sin(v)*(i+6);$+=l;const h=M(f/64*100,0,100).toFixed(3),k=M(S/64*100,0,100).toFixed(3),L=e===b,j=r>0?_/r*100:0,E=`${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j,{maximumFractionDigits:1})}%)`;return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${b}" data-active="${L?"true":"false"}" style="--x:${h};--y:${k};" aria-label="${c(E)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");return{svg:`
+        `;return d+=l,h}).join("");let $=0;const P=t.map((w,v)=>{const _=Math.max(0,w.value),l=_/r*Math.PI*2,b=-Math.PI/2+$+l/2,f=s+Math.cos(b)*(i+6),S=n+Math.sin(b)*(i+6);$+=l;const h=M(f/64*100,0,100).toFixed(3),k=M(S/64*100,0,100).toFixed(3),L=e===v,j=r>0?_/r*100:0,E=`${w.label}: ${this._formatValue(w.value)} (${this._formatValue(j,{maximumFractionDigits:1})}%)`;return`<button type="button" class="plot-hit" data-role="plot-hit" data-point-index="${v}" data-active="${L?"true":"false"}" style="--x:${h};--y:${k};" aria-label="${c(E)}" ${this._isInteractive()?"":"disabled"}></button>`}).join("");return{svg:`
         <svg class="plot" part="plot" viewBox="0 0 64 64" width="100%" height="100%" role="img" aria-label="${c(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
           <circle cx="${s}" cy="${n}" r="${i}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="${o}" />
           ${T}
           <text x="${s}" y="30" text-anchor="middle" font-size="4.5" fill="var(--ui-chart-muted)">Total</text>
           <text x="${s}" y="36" text-anchor="middle" font-size="6" font-weight="700" fill="var(--ui-chart-text)">${c(this._formatValue(a))}</text>
         </svg>
-      `,hits:P,anchors:t.map((w,b)=>{let _=0;for(let F=0;F<=b;F+=1){const f=Math.max(0,t[F].value)/r*Math.PI*2;if(F===b){const S=-Math.PI/2+_+f/2,h=s+Math.cos(S)*(i+6),k=n+Math.sin(S)*(i+6);return{xPct:M(h/64*100,0,100),yPct:M(k/64*100,0,100)}}_+=f}return{xPct:50,yPct:50}}),yTicks:[]}}_plot(t,e,a){const r=this._primarySeries(t);return r?e==="donut"?this._plotDonut(r.data,a):e==="radial"?this._plotRadial(r.data,a):this._plotCartesian(t,e,a):{svg:"",hits:"",anchors:[],yTicks:[]}}_ariaLabel(){const t=this.getAttribute("title")||"Chart";return this.getAttribute("aria-label")||t}_hasToolbarSlot(){return!!this.querySelector('[slot="header"]')}_hasSlot(t){return!!this.querySelector(`[slot="${t}"]`)}_tooltipMarkup(t,e){const a=this._activeIndex;if(a==null||!e.anchors[a])return"";const r=t.labels[a];if(!r)return"";const i=this._seriesValueDetails(t.labels,t.series,a).filter(s=>s.value!=null);if(!i.length)return"";const o=e.anchors[a];return`
+      `,hits:P,anchors:t.map((w,v)=>{let _=0;for(let F=0;F<=v;F+=1){const f=Math.max(0,t[F].value)/r*Math.PI*2;if(F===v){const S=-Math.PI/2+_+f/2,h=s+Math.cos(S)*(i+6),k=n+Math.sin(S)*(i+6);return{xPct:M(h/64*100,0,100),yPct:M(k/64*100,0,100)}}_+=f}return{xPct:50,yPct:50}}),yTicks:[]}}_plot(t,e,a){const r=this._primarySeries(t);return r?e==="donut"?this._plotDonut(r.data,a):e==="radial"?this._plotRadial(r.data,a):this._plotCartesian(t,e,a):{svg:"",hits:"",anchors:[],yTicks:[]}}_ariaLabel(){const t=this.getAttribute("title")||"Chart";return this.getAttribute("aria-label")||t}_hasToolbarSlot(){return!!this.querySelector('[slot="header"]')}_hasSlot(t){return!!this.querySelector(`[slot="${t}"]`)}_tooltipMarkup(t,e){const a=this._activeIndex;if(a==null||!e.anchors[a])return"";const r=t.labels[a];if(!r)return"";const i=this._seriesValueDetails(t.labels,t.series,a).filter(s=>s.value!=null);if(!i.length)return"";const o=e.anchors[a];return`
       <div class="tooltip" part="tooltip" style="--x:${o.xPct.toFixed(3)};--y:${o.yPct.toFixed(3)};">
         <div class="tooltip-title">${c(r)}</div>
         <div class="tooltip-list">
@@ -664,17 +664,17 @@
               `).join("")}
         </div>
       </div>
-    `}_activeInsight(t){const e=this._primarySeries(t);if(!e)return"";const a=this._activeIndex;if(a==null||!t.labels[a]){const s=this._resolveStats(e.data),n=s.delta>0?"up":s.delta<0?"down":"flat",d=`${s.delta>=0?"+":""}${this._formatValue(s.delta)}${s.deltaPct==null?"":` (${s.deltaPct>=0?"+":""}${this._formatValue(s.deltaPct,{maximumFractionDigits:1})}%)`}`;return`
+    `}_activeInsight(t){const e=this._primarySeries(t);if(!e)return"";const a=this._activeIndex;if(a==null||!t.labels[a]){const s=this._resolveStats(e.data),n=s.delta>0?"up":s.delta<0?"down":"flat",u=`${s.delta>=0?"+":""}${this._formatValue(s.delta)}${s.deltaPct==null?"":` (${s.deltaPct>=0?"+":""}${this._formatValue(s.deltaPct,{maximumFractionDigits:1})}%)`}`;return`
         <div class="insight" part="insight">
           <span>Range <strong>${this._formatValue(s.min)}</strong> to <strong>${this._formatValue(s.max)}</strong></span>
-          <strong data-tone="${n}">${c(d)}</strong>
+          <strong data-tone="${n}">${c(u)}</strong>
         </div>
       `}const r=t.labels[a],i=this._seriesValueDetails(t.labels,t.series,a).filter(s=>s.value!=null),o=i.reduce((s,n)=>s+(n.value||0),0);return`
       <div class="insight" part="insight">
         <span>Selected <strong>${c(r)}</strong></span>
         <strong>${c(this._formatValue(t.series.length>1?o:i[0]?.value||0))}</strong>
       </div>
-    `}render(){const t=this._data(),e=this._primarySeries(t),a=this._type(),r=this._state(),i=this._isDisabled(),o=this._isInteractive(),s=(this.getAttribute("title")||"").trim(),n=(this.getAttribute("subtitle")||"").trim(),d=this._showLegend(),u=this._showSummary(),T=this._hasToolbarSlot(),$=this._hasSlot("title"),P=this._hasSlot("subtitle"),w=$||P||!!s||!!n||r!=="idle";if(!e||!t.labels.length){const h=r==="error"?"Chart data failed to load":"No series data available";this.setContent(`
+    `}render(){const t=this._data(),e=this._primarySeries(t),a=this._type(),r=this._state(),i=this._isDisabled(),o=this._isInteractive(),s=(this.getAttribute("title")||"").trim(),n=(this.getAttribute("subtitle")||"").trim(),u=this._showLegend(),d=this._showSummary(),T=this._hasToolbarSlot(),$=this._hasSlot("title"),P=this._hasSlot("subtitle"),w=$||P||!!s||!!n||r!=="idle";if(!e||!t.labels.length){const h=r==="error"?"Chart data failed to load":"No series data available";this.setContent(`
         <style>${U}</style>
         <section class="frame" part="frame" data-state="${r}" data-disabled="${i?"true":"false"}" aria-disabled="${i?"true":"false"}">
           <div class="toolbar" part="toolbar" ${T?"":"hidden"}>
@@ -689,7 +689,7 @@
           </header>
           <div class="empty" part="empty">${c(h)}</div>
         </section>
-      `);return}this._activeIndex!=null&&(this._activeIndex<0||this._activeIndex>=t.labels.length)&&(this._activeIndex=null,this._activePinned=!1);const b=this._resolveStats(e.data),_=this._plot(t,a,this._activeIndex),F=this._axisXLabels(t.labels),l=t.series.length>1?t.series.map((h,k)=>`
+      `);return}this._activeIndex!=null&&(this._activeIndex<0||this._activeIndex>=t.labels.length)&&(this._activeIndex=null,this._activePinned=!1);const v=this._resolveStats(e.data),_=this._plot(t,a,this._activeIndex),F=this._axisXLabels(t.labels),l=t.series.length>1?t.series.map((h,k)=>`
               <div class="legend-item" aria-label="${c(h.name)}">
                 <span class="legend-dot" style="--dot:${c(this._seriesTone(h,k))};"></span>
                 <span>${c(h.name)}</span>
@@ -707,7 +707,7 @@
                 <span class="legend-dot" style="--dot:${c(j)};"></span>
                 <span>${c(h.label)}</span>
               </button>
-            `}).join(""),v=b.delta>0?"up":b.delta<0?"down":"flat",f=`${b.delta>=0?"+":""}${this._formatValue(b.delta)}`,S=r==="error"?'<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>':r==="success"?'<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>':"";this.setContent(`
+            `}).join(""),b=v.delta>0?"up":v.delta<0?"down":"flat",f=`${v.delta>=0?"+":""}${this._formatValue(v.delta)}`,S=r==="error"?'<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>':r==="success"?'<div class="message" part="message" data-tone="success">Data pipeline healthy. All metrics are up to date.</div>':"";this.setContent(`
       <style>${U}</style>
       <section
         class="frame"
@@ -730,23 +730,23 @@
           <span class="status-pill" data-state="${r}">${K(r)}</span>
         </header>
 
-        ${u?`
+        ${d?`
           <section class="summary" part="summary">
             <div class="metric" part="metric">
               <span class="metric-label">Total</span>
-              <span class="metric-value">${c(this._formatValue(b.total))}</span>
+              <span class="metric-value">${c(this._formatValue(v.total))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Average</span>
-              <span class="metric-value">${c(this._formatValue(b.average))}</span>
+              <span class="metric-value">${c(this._formatValue(v.average))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Peak</span>
-              <span class="metric-value">${c(this._formatValue(b.max))}</span>
+              <span class="metric-value">${c(this._formatValue(v.max))}</span>
             </div>
             <div class="metric" part="metric">
               <span class="metric-label">Delta</span>
-              <span class="metric-value" data-tone="${v}">${c(f)}</span>
+              <span class="metric-value" data-tone="${b}">${c(f)}</span>
             </div>
           </section>
         `:""}
@@ -774,7 +774,7 @@
 
         ${this._activeInsight(t)}
 
-        ${d?`<section class="legend" part="legend">${l}</section>`:""}
+        ${u?`<section class="legend" part="legend">${l}</section>`:""}
 
         ${t.truncated>0?`<div class="message" part="message">Showing last ${t.truncated+t.labels.length} records (truncated to ${V}).</div>`:""}