@editora/ui-core 0.1.9 → 0.1.12

package/dist/chart.cjs.js

@@ -0,0 +1,783 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const J=require("./ElementBase-1b301e7f.js"),V=180,U=`
+  :host {
+    --ui-chart-bg: color-mix(in srgb, var(--ui-color-surface, #ffffff) 94%, transparent);
+    --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-text: var(--ui-color-text, #0f172a);
+    --ui-chart-muted: var(--ui-color-muted, #64748b);
+    --ui-chart-grid: color-mix(in srgb, var(--ui-color-border, #cbd5e1) 45%, transparent);
+    --ui-chart-accent: var(--ui-color-primary, #2563eb);
+    --ui-chart-success: var(--ui-color-success, #16a34a);
+    --ui-chart-warning: var(--ui-color-warning, #d97706);
+    --ui-chart-danger: var(--ui-color-danger, #dc2626);
+    --ui-chart-radius: 16px;
+    --ui-chart-shadow: none;
+    --ui-chart-plot-height: 220px;
+    --ui-chart-plot-min-height: 188px;
+    --ui-chart-plot-min-width: 420px;
+
+    display: block;
+    min-inline-size: 0;
+    box-sizing: border-box;
+    color-scheme: light dark;
+    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  }
+
+  .frame {
+    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));
+    color: var(--ui-chart-text);
+    box-shadow: var(--ui-chart-shadow);
+    padding: 16px;
+    display: grid;
+    gap: 12px;
+    overflow: clip;
+  }
+
+  :host([variant="minimal"]) .frame {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    padding: 0;
+  }
+
+  :host([variant="contrast"]) {
+    --ui-chart-bg: #0b1220;
+    --ui-chart-surface: #0f172a;
+    --ui-chart-border: #334155;
+    --ui-chart-text: #e2e8f0;
+    --ui-chart-muted: #94a3b8;
+    --ui-chart-grid: color-mix(in srgb, #475569 74%, transparent);
+    --ui-chart-accent: #93c5fd;
+    --ui-chart-success: #34d399;
+    --ui-chart-warning: #fbbf24;
+    --ui-chart-danger: #f87171;
+    --ui-chart-shadow: none;
+  }
+
+  .frame[data-state="loading"] {
+    cursor: progress;
+  }
+
+  .frame[data-disabled="true"] {
+    opacity: 0.68;
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  .toolbar {
+    display: grid;
+    gap: 10px;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--ui-chart-surface) 96%, transparent);
+  }
+
+  .toolbar[hidden] {
+    display: none;
+  }
+
+  .toolbar ::slotted(*) {
+    display: block;
+  }
+
+  .meta {
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .title {
+    font-size: 15px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    margin: 0;
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--ui-chart-muted);
+  }
+
+  .title-slot,
+  .subtitle-slot {
+    display: contents;
+  }
+
+  .title-slot::slotted(*) {
+    margin: 0;
+    font-size: 15px;
+    line-height: 1.35;
+    font-weight: 700;
+    letter-spacing: 0.01em;
+    color: var(--ui-chart-text);
+  }
+
+  .subtitle-slot::slotted(*) {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.4;
+    color: var(--ui-chart-muted);
+  }
+
+  .status-pill {
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: 24px;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 88%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 92%, transparent);
+    font-size: 11px;
+    line-height: 1;
+    font-weight: 600;
+    color: var(--ui-chart-muted);
+    white-space: nowrap;
+  }
+
+  .status-pill[data-state="success"] {
+    color: var(--ui-chart-success);
+    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);
+    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);
+    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);
+  }
+
+  .summary {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+  }
+
+  .metric {
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 82%, transparent);
+    border-radius: 10px;
+    padding: 8px 10px;
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+    min-inline-size: 0;
+    display: grid;
+    gap: 4px;
+  }
+
+  .metric-label {
+    font-size: 11px;
+    line-height: 1;
+    color: var(--ui-chart-muted);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+  }
+
+  .metric-value {
+    font-size: 14px;
+    line-height: 1.2;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .metric-value[data-tone="up"] {
+    color: var(--ui-chart-success);
+  }
+
+  .metric-value[data-tone="down"] {
+    color: var(--ui-chart-danger);
+  }
+
+  .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;
+    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);
+    overflow: auto hidden;
+  }
+
+  .plot-body {
+    display: grid;
+    grid-template-columns: minmax(32px, auto) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) auto;
+    inline-size: 100%;
+    min-inline-size: calc(var(--ui-chart-plot-min-width) + 38px);
+    block-size: 100%;
+    min-block-size: 0;
+  }
+
+  .plot {
+    inline-size: 100%;
+    block-size: 100%;
+    display: block;
+  }
+
+  .axis-y {
+    grid-column: 1;
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 8px 6px 24px 0;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .axis-x {
+    grid-column: 2;
+    grid-row: 2;
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    align-items: start;
+    gap: 0;
+    padding: 6px 10px 8px;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1.2;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .axis-x-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .axis-x-label[data-hidden="true"] {
+    visibility: hidden;
+  }
+
+  .plot-stage {
+    position: relative;
+    grid-column: 2;
+    grid-row: 1;
+    min-inline-size: var(--ui-chart-plot-min-width);
+    min-block-size: 0;
+  }
+
+  .plot-grid line,
+  .plot-grid path {
+    transition: stroke 140ms ease;
+  }
+
+  .plot-hit-layer {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .plot-hit {
+    position: absolute;
+    inset-inline-start: calc(var(--x, 50) * 1%);
+    inset-block-start: calc(var(--y, 50) * 1%);
+    transform: translate(-50%, -50%);
+    inline-size: 22px;
+    block-size: 22px;
+    border: none;
+    border-radius: 999px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    background: transparent;
+    pointer-events: auto;
+    color: inherit;
+  }
+
+  .plot-hit::after {
+    content: '';
+    position: absolute;
+    inset: 7px;
+    border-radius: inherit;
+    border: 1px solid color-mix(in srgb, var(--ui-chart-accent) 30%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 70%, transparent);
+    transform: scale(0.85);
+    opacity: 0;
+    transition: opacity 140ms ease, transform 140ms ease;
+  }
+
+  .plot-hit:hover::after,
+  .plot-hit:focus-visible::after,
+  .plot-hit[data-active="true"]::after {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .plot-hit:focus-visible {
+    outline: 2px solid var(--ui-chart-accent);
+    outline-offset: 2px;
+  }
+
+  .axis-labels {
+    position: absolute;
+    inset-inline: 10px;
+    inset-block-end: 6px;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+    color: var(--ui-chart-muted);
+    font-size: 11px;
+    line-height: 1;
+  }
+
+  .tooltip {
+    position: absolute;
+    inset-inline-start: clamp(72px, calc(var(--x, 50) * 1%), calc(100% - 72px));
+    inset-block-start: clamp(10px, calc(var(--y, 20) * 1%), calc(100% - 72px));
+    transform: translate(-50%, calc(-100% - 10px));
+    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);
+    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);
+    display: grid;
+    gap: 8px;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .tooltip-title {
+    font-size: 12px;
+    line-height: 1.2;
+    font-weight: 700;
+  }
+
+  .tooltip-list {
+    display: grid;
+    gap: 6px;
+  }
+
+  .tooltip-row {
+    display: grid;
+    grid-template-columns: 8px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 8px;
+    font-size: 12px;
+    line-height: 1.2;
+  }
+
+  .tooltip-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    background: var(--dot, var(--ui-chart-accent));
+  }
+
+  .tooltip-series {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--ui-chart-muted);
+  }
+
+  .tooltip-value {
+    font-weight: 700;
+    color: var(--ui-chart-text);
+    white-space: nowrap;
+  }
+
+  .insight {
+    display: flex;
+    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;
+    padding: 8px 10px;
+    font-size: 12px;
+    line-height: 1.35;
+    color: var(--ui-chart-muted);
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+  }
+
+  .insight strong {
+    color: var(--ui-chart-text);
+    font-weight: 700;
+  }
+
+  .legend {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 8px;
+  }
+
+  .legend-item {
+    border: 1px solid color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    background: color-mix(in srgb, var(--ui-chart-surface) 94%, transparent);
+    border-radius: 10px;
+    min-block-size: 30px;
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    font-size: 12px;
+    line-height: 1;
+    color: var(--ui-chart-muted);
+    cursor: pointer;
+    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
+  }
+
+  .legend-item[data-active="true"],
+  .legend-item:hover {
+    border-color: color-mix(in srgb, var(--ui-chart-accent) 35%, var(--ui-chart-border));
+    background: color-mix(in srgb, var(--ui-chart-accent) 12%, transparent);
+    color: var(--ui-chart-text);
+  }
+
+  .legend-item:focus-visible {
+    outline: 2px solid var(--ui-chart-accent);
+    outline-offset: 2px;
+  }
+
+  .legend-item[disabled],
+  .plot-hit[disabled] {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .legend-dot {
+    inline-size: 8px;
+    block-size: 8px;
+    border-radius: 999px;
+    flex: 0 0 auto;
+    background: var(--dot, var(--ui-chart-accent));
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dot, var(--ui-chart-accent)) 35%, transparent);
+  }
+
+  .empty,
+  .message {
+    border: 1px dashed color-mix(in srgb, var(--ui-chart-border) 78%, transparent);
+    border-radius: 10px;
+    padding: 14px;
+    text-align: center;
+    font-size: 12px;
+    color: var(--ui-chart-muted);
+    background: color-mix(in srgb, var(--ui-chart-surface) 95%, transparent);
+  }
+
+  .message[data-tone="error"] {
+    color: var(--ui-chart-danger);
+    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);
+    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);
+  }
+
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background:
+      linear-gradient(90deg,
+        color-mix(in srgb, var(--ui-chart-surface) 88%, transparent) 0%,
+        color-mix(in srgb, var(--ui-chart-surface) 68%, transparent) 50%,
+        color-mix(in srgb, var(--ui-chart-surface) 88%, transparent) 100%);
+    background-size: 220% 100%;
+    animation: ui-chart-shimmer 1.1s linear infinite;
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    white-space: nowrap;
+    clip-path: inset(100%);
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+  }
+
+  :host([headless]) .frame {
+    display: none !important;
+  }
+
+  @media (max-width: 720px) {
+    :host {
+      --ui-chart-plot-height: 188px;
+      --ui-chart-plot-min-height: 168px;
+      --ui-chart-plot-min-width: 320px;
+    }
+
+    .frame {
+      padding: 12px;
+      gap: 10px;
+    }
+
+    .summary {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .legend-item,
+    .plot-hit::after,
+    .loading-overlay {
+      transition: none !important;
+      animation: none !important;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    .frame,
+    .metric,
+    .plot-shell,
+    .legend-item,
+    .insight,
+    .empty,
+    .message {
+      border-width: 2px;
+      box-shadow: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :host {
+      --ui-chart-bg: Canvas;
+      --ui-chart-surface: Canvas;
+      --ui-chart-border: CanvasText;
+      --ui-chart-text: CanvasText;
+      --ui-chart-muted: CanvasText;
+      --ui-chart-grid: CanvasText;
+      --ui-chart-accent: Highlight;
+      --ui-chart-success: Highlight;
+      --ui-chart-warning: Highlight;
+      --ui-chart-danger: Highlight;
+      --ui-chart-shadow: none;
+    }
+
+    .frame,
+    .metric,
+    .plot-shell,
+    .legend-item,
+    .insight,
+    .empty,
+    .message,
+    .status-pill {
+      forced-color-adjust: none;
+      background: Canvas;
+      color: CanvasText;
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+
+    .legend-dot {
+      background: Highlight;
+      box-shadow: none;
+    }
+  }
+
+  @keyframes ui-chart-shimmer {
+    from {
+      background-position: 220% 0;
+    }
+    to {
+      background-position: -220% 0;
+    }
+  }
+`,q=["var(--ui-color-primary, #2563eb)","var(--ui-color-success, #16a34a)","var(--ui-color-warning, #d97706)","var(--ui-color-danger, #dc2626)","var(--ui-color-info, #0891b2)","var(--ui-color-accent, #7c3aed)"];function u(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 r=JSON.parse(p);if(Array.isArray(r))return r.map((n,o)=>{if(typeof n=="number")return Number.isFinite(n)?{label:String(o+1),value:n}:null;if(n&&typeof n=="object"){const i=Number(n.value);if(!Number.isFinite(i))return null;const c=n.label,d=n.tone;return{label:typeof c=="string"&&c.trim()?c.trim():String(o+1),value:i,tone:typeof d=="string"&&d.trim()?d.trim():void 0}}return null}).filter(n=>!!n)}catch{return[]}const a=(t||"").split(",").map(r=>Number(r.trim())).filter(r=>Number.isFinite(r)),s=(e||"").split(",").map(r=>r.trim()).filter(Boolean);return a.map((r,n)=>({label:s[n]||String(n+1),value:r}))}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 s=t.label,r=t.tone;return{label:typeof s=="string"&&s.trim()?s.trim():String(e+1),value:a,tone:typeof r=="string"&&r.trim()?r.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,s)=>{if(!a||typeof a!="object")return null;const r=a.name,n=Q(a.data);if(!n.length)return null;const o=a.tone,i=a.dash,c=Number(a.strokeWidth),d=Number(a.opacity),T=a.fill;return{name:typeof r=="string"&&r.trim()?r.trim():`Series ${s+1}`,data:n,tone:typeof o=="string"&&o.trim()?o.trim():void 0,dash:typeof i=="string"&&i.trim()?i.trim():void 0,strokeWidth:Number.isFinite(c)&&c>0?c: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,s)=>{var r;return{label:((r=a.label)==null?void 0:r.trim())||String(s+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(i=>{const c=et(i.data);return{name:i.name,data:c.points,tone:i.tone,fill:i.fill,dash:i.dash,strokeWidth:i.strokeWidth,opacity:i.opacity,truncated:c.truncated}}).filter(i=>i.data.length>0),s=new Set;a.forEach(i=>{i.data.forEach(c=>s.add(c.label))});let r=Array.from(s),n=a.reduce((i,c)=>Math.max(i,c.truncated),0);r.length>V&&(n+=r.length-V,r=r.slice(r.length-V));const o=a.map(i=>{const c=new Set(r);return{name:i.name,data:i.data.filter(d=>c.has(d.label)),tone:i.tone,fill:i.fill,dash:i.dash,strokeWidth:i.strokeWidth,opacity:i.opacity}});return{labels:r,series:o,truncated:n}}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),s=e.length?a/e.length:0,r=e.length?Math.min(...e):0,n=e.length?Math.max(...e):0,o=e.length>1?e[e.length-1]-e[0]:0,i=e[0]||0,c=i!==0?o/Math.abs(i)*100:null;return{total:a,average:s,min:r,max:n,delta:o,deltaPct:c}}_valueDomain(t,e){const a=!!(e!=null&&e.includeZero),s=(e==null?void 0:e.fitPadding)??.14,r=t.map(d=>d.value);let n=Math.min(...r),o=Math.max(...r);a&&(n=Math.min(0,n),o=Math.max(0,o));let i=o-n;if(i<=0){const d=Math.max(Math.abs(o)*.12,1);n-=d,o+=d,i=o-n}else{const d=i*s;a?(n-=d*.25,o+=d):(n-=d,o+=d),i=o-n}const c=n<=0&&o>=0;return{min:n,max:o,span:i,zeroInDomain:c}}_formatValue(t,e){const a=this._valuePrefix(),s=this._valueSuffix();try{const r=new Intl.NumberFormat(void 0,{maximumFractionDigits:Math.abs(t)>=100?0:1,...e}).format(t);return`${a}${r}${s}`}catch{return`${a}${t.toFixed(Math.abs(t)>=100?0:1)}${s}`}}_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 s=t[a];return e.map((r,n)=>{const o=r.data.find(i=>i.label===s)||null;return{series:r.name,value:(o==null?void 0:o.value)??null,tone:(o==null?void 0:o.tone)||this._seriesTone(r,n)}})}_pointDetail(t,e,a,s){const r=this._primarySeries(e);if(!r)return null;const n=e.labels[t];if(!n)return null;const o=r.data.find(d=>d.label===n)||r.data[t];if(!o)return null;const i=this._resolveStats(r.data),c=this._seriesValueDetails(e.labels,e.series,t);return{index:t,label:n,value:o.value,tone:o.tone||this._seriesTone(r,0),series:r.name,seriesValues:c,type:a,total:i.total,min:i.min,max:i.max,source:s}}_emitPointSelect(t,e,a){const s=this._pointDetail(t,e,this._type(),a);s&&(this.dispatchEvent(new CustomEvent("point-select",{detail:s,bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("ui-point-select",{detail:s,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 s=!(this._activePinned&&this._activeIndex===a);this._activeIndex=a,this._activePinned=s,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 s=this._indexFromTarget(t.target)??this._activeIndex??0;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault();const n=M(s+1,0,e.labels.length-1);this._setActiveIndex(n,!0),this._focusIndex(n);return}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault();const n=M(s-1,0,e.labels.length-1);this._setActiveIndex(n,!0),this._focusIndex(n);return}if(t.key==="Home"){t.preventDefault(),this._setActiveIndex(0,!0),this._focusIndex(0);return}if(t.key==="End"){t.preventDefault();const n=e.labels.length-1;this._setActiveIndex(n,!0),this._focusIndex(n);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 r=M(s,0,e.labels.length-1);this._setActiveIndex(r,!0),this._emitPointSelect(r,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,s)=>s===0||s===t.length-1||s%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="${(8+208).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="${u(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="${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="${u(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="${I}" stroke-width="${(g.strokeWidth||(x===0?1.9:1.55)).toFixed(2)}" stroke-linecap="round" stroke-linejoin="round" ${g.dash?`stroke-dasharray="${u(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="${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="${u(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 i=t.map(l=>l.value),c=Math.min(...i),d=Math.max(...i),T=Math.max(1,d-c),$=t.map((l,v)=>{const f=-Math.PI/2+Math.PI*2*v/t.length,h=10+(l.value-c)/T*(28-10),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*(28-10)).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="${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="${u(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="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+          ${w}
+          ${b}
+          <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),s=Math.max(1,a),r=18,n=7,o=32,i=32,c=2*Math.PI*r;let d=0;const T=t.map((w,b)=>{const l=Math.max(0,w.value)/s*c,v=this._pointTone(w,b),f=e===b,S=e==null||f?"1":"0.7",h=`
+          <circle
+            cx="${o}"
+            cy="${i}"
+            r="${r}"
+            fill="none"
+            stroke="${v}"
+            stroke-width="${f?n+.8:n}"
+            stroke-dasharray="${l.toFixed(3)} ${(c-l).toFixed(3)}"
+            stroke-dashoffset="${(-d).toFixed(3)}"
+            transform="rotate(-90 ${o} ${i})"
+            stroke-linecap="round"
+            opacity="${S}"
+          />
+        `;return d+=l,h}).join("");let $=0;const P=t.map((w,b)=>{const _=Math.max(0,w.value),l=_/s*Math.PI*2,v=-Math.PI/2+$+l/2,f=o+Math.cos(v)*(r+6),S=i+Math.sin(v)*(r+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=s>0?_/s*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="${u(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="${u(this._ariaLabel())}" preserveAspectRatio="xMidYMid meet">
+          <circle cx="${o}" cy="${i}" r="${r}" fill="none" stroke="var(--ui-chart-grid)" stroke-width="${n}" />
+          ${T}
+          <text x="${o}" y="30" text-anchor="middle" font-size="4.5" fill="var(--ui-chart-muted)">Total</text>
+          <text x="${o}" y="36" text-anchor="middle" font-size="6" font-weight="700" fill="var(--ui-chart-text)">${u(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)/s*Math.PI*2;if(F===b){const S=-Math.PI/2+_+f/2,h=o+Math.cos(S)*(r+6),k=i+Math.sin(S)*(r+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 s=this._primarySeries(t);return s?e==="donut"?this._plotDonut(s.data,a):e==="radial"?this._plotRadial(s.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 s=t.labels[a];if(!s)return"";const r=this._seriesValueDetails(t.labels,t.series,a).filter(o=>o.value!=null);if(!r.length)return"";const n=e.anchors[a];return`
+      <div class="tooltip" part="tooltip" style="--x:${n.xPct.toFixed(3)};--y:${n.yPct.toFixed(3)};">
+        <div class="tooltip-title">${u(s)}</div>
+        <div class="tooltip-list">
+          ${r.map(o=>`
+                <div class="tooltip-row">
+                  <span class="tooltip-dot" style="--dot:${o.tone||"var(--ui-chart-accent)"};"></span>
+                  <span class="tooltip-series">${u(o.series)}</span>
+                  <span class="tooltip-value">${u(this._formatValue(o.value||0))}</span>
+                </div>
+              `).join("")}
+        </div>
+      </div>
+    `}_activeInsight(t){var o;const e=this._primarySeries(t);if(!e)return"";const a=this._activeIndex;if(a==null||!t.labels[a]){const i=this._resolveStats(e.data),c=i.delta>0?"up":i.delta<0?"down":"flat",d=`${i.delta>=0?"+":""}${this._formatValue(i.delta)}${i.deltaPct==null?"":` (${i.deltaPct>=0?"+":""}${this._formatValue(i.deltaPct,{maximumFractionDigits:1})}%)`}`;return`
+        <div class="insight" part="insight">
+          <span>Range <strong>${this._formatValue(i.min)}</strong> to <strong>${this._formatValue(i.max)}</strong></span>
+          <strong data-tone="${c}">${u(d)}</strong>
+        </div>
+      `}const s=t.labels[a],r=this._seriesValueDetails(t.labels,t.series,a).filter(i=>i.value!=null),n=r.reduce((i,c)=>i+(c.value||0),0);return`
+      <div class="insight" part="insight">
+        <span>Selected <strong>${u(s)}</strong></span>
+        <strong>${u(this._formatValue(t.series.length>1?n:((o=r[0])==null?void 0:o.value)||0))}</strong>
+      </div>
+    `}render(){const t=this._data(),e=this._primarySeries(t),a=this._type(),s=this._state(),r=this._isDisabled(),n=this._isInteractive(),o=(this.getAttribute("title")||"").trim(),i=(this.getAttribute("subtitle")||"").trim(),c=this._showLegend(),d=this._showSummary(),T=this._hasToolbarSlot(),$=this._hasSlot("title"),P=this._hasSlot("subtitle"),w=$||P||!!o||!!i||s!=="idle";if(!e||!t.labels.length){const h=s==="error"?"Chart data failed to load":"No series data available";this.setContent(`
+        <style>${U}</style>
+        <section class="frame" part="frame" data-state="${s}" data-disabled="${r?"true":"false"}" aria-disabled="${r?"true":"false"}">
+          <div class="toolbar" part="toolbar" ${T?"":"hidden"}>
+            <slot name="header"></slot>
+          </div>
+          <header class="header" part="header" ${w?"":"hidden"}>
+            <div class="meta">
+              ${$?'<slot class="title-slot" name="title"></slot>':o?`<h3 class="title" part="title">${u(o)}</h3>`:""}
+              ${P?'<slot class="subtitle-slot" name="subtitle"></slot>':i?`<p class="subtitle" part="subtitle">${u(i)}</p>`:""}
+            </div>
+            <span class="status-pill" data-state="${s}">${K(s)}</span>
+          </header>
+          <div class="empty" part="empty">${u(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)=>`
+              <div class="legend-item" aria-label="${u(h.name)}">
+                <span class="legend-dot" style="--dot:${this._seriesTone(h,k)};"></span>
+                <span>${u(h.name)}</span>
+              </div>
+            `).join(""):e.data.map((h,k)=>{const L=this._activeIndex===k,j=this._pointTone(h,k),E=`${h.label}: ${this._formatValue(h.value)}`;return`
+              <button
+                type="button"
+                class="legend-item"
+                data-role="legend-item"
+                data-point-index="${k}"
+                data-active="${L?"true":"false"}"
+                aria-label="${u(E)}"
+                ${n?"":"disabled"}
+              >
+                <span class="legend-dot" style="--dot:${j};"></span>
+                <span>${u(h.label)}</span>
+              </button>
+            `}).join(""),v=b.delta>0?"up":b.delta<0?"down":"flat",f=`${b.delta>=0?"+":""}${this._formatValue(b.delta)}`,S=s==="error"?'<div class="message" part="message" data-tone="error">Data source returned partial metrics. Review upstream mapping.</div>':s==="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"
+        part="frame"
+        data-state="${s}"
+        data-disabled="${r?"true":"false"}"
+        aria-disabled="${r?"true":"false"}"
+      >
+        <div class="sr-only" aria-live="polite">${u(o)} ${u(K(s))}</div>
+
+        <div class="toolbar" part="toolbar" ${T?"":"hidden"}>
+          <slot name="header"></slot>
+        </div>
+
+        <header class="header" part="header" ${w?"":"hidden"}>
+          <div class="meta">
+            ${$?'<slot class="title-slot" name="title"></slot>':o?`<h3 class="title" part="title">${u(o)}</h3>`:""}
+            ${P?'<slot class="subtitle-slot" name="subtitle"></slot>':i?`<p class="subtitle" part="subtitle">${u(i)}</p>`:""}
+          </div>
+          <span class="status-pill" data-state="${s}">${K(s)}</span>
+        </header>
+
+        ${d?`
+          <section class="summary" part="summary">
+            <div class="metric" part="metric">
+              <span class="metric-label">Total</span>
+              <span class="metric-value">${u(this._formatValue(b.total))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Average</span>
+              <span class="metric-value">${u(this._formatValue(b.average))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Peak</span>
+              <span class="metric-value">${u(this._formatValue(b.max))}</span>
+            </div>
+            <div class="metric" part="metric">
+              <span class="metric-label">Delta</span>
+              <span class="metric-value" data-tone="${v}">${u(f)}</span>
+            </div>
+          </section>
+        `:""}
+
+        <section class="plot-shell" part="plot-shell">
+          <div class="plot-body">
+            ${a==="donut"||a==="radial"?"":`
+              <div class="axis-y" part="axis-y">
+                ${_.yTicks.map(h=>`<span>${u(h)}</span>`).join("")}
+              </div>
+            `}
+            <div class="plot-stage">
+              ${_.svg}
+              <div class="plot-hit-layer" part="plot-hits">${_.hits}</div>
+              ${this._tooltipMarkup(t,_)}
+              ${s==="loading"?'<div class="loading-overlay" part="loading-overlay" aria-hidden="true"></div>':""}
+            </div>
+            ${a==="donut"||a==="radial"?"":`
+              <div class="axis-x" part="axis-x">
+                ${t.labels.map((h,k)=>`<span class="axis-x-label" data-hidden="${F[k]==="hidden"?"true":"false"}">${u(h)}</span>`).join("")}
+              </div>
+            `}
+          </div>
+        </section>
+
+        ${this._activeInsight(t)}
+
+        ${c?`<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>`:""}
+
+        ${S}
+      </section>
+    `)}shouldRenderOnAttributeChange(t,e,a){return!0}}typeof customElements<"u"&&!customElements.get("ui-chart")&&customElements.define("ui-chart",Z);exports.UIChart=Z;