@a.nemreen/dga-ui 0.3.13 → 0.3.14

package/README.md

@@ -64,6 +64,10 @@ Heavier shell pieces ship as separate FESMs so the primary bundle stays lean:
 import { DgaHeader } from '@a.nemreen/dga-ui/header';
 import { DgaCookies } from '@a.nemreen/dga-ui/cookies';
 import { DgaDatePicker } from '@a.nemreen/dga-ui/date-picker';
+import { DgaChart } from '@a.nemreen/dga-ui/chart';
+import { DgaChatbot } from '@a.nemreen/dga-ui/chatbot';
+import { DgaPageTransition } from '@a.nemreen/dga-ui/page-transition';
+import { DGA_SAUDI_CITIES } from '@a.nemreen/dga-ui/saudi-cities';
 ```
 
 Accessibility tools live in a separate package — [`@a.nemreen/a11y`](https://www.npmjs.com/package/@a.nemreen/a11y) — mount with `Accessibility.mount()`.

package/fesm2022/a.nemreen-dga-ui-chart.mjs

@@ -0,0 +1,445 @@
+import*as r from"@angular/core";import{input as c,booleanAttribute as y,signal as w,computed as o,ChangeDetectionStrategy as P,Component as D}from"@angular/core";import{dgaSafeCssColor as $}from"@a.nemreen/dga-ui";const N=["#1b8354","#3b82f6","#f59e0b","#ef4444","#64748b","#0d9488"];class S{type=c("bar",...ngDevMode?[{debugName:"type"}]:[]);series=c([],...ngDevMode?[{debugName:"series"}]:[]);labels=c([],...ngDevMode?[{debugName:"labels"}]:[]);datasets=c([],...ngDevMode?[{debugName:"datasets"}]:[]);legend=c(!0,{...ngDevMode?{debugName:"legend"}:{},transform:y});tooltip=c(!0,{...ngDevMode?{debugName:"tooltip"}:{},transform:y});grid=c(!0,{...ngDevMode?{debugName:"grid"}:{},transform:y});stacked=c(!1,{...ngDevMode?{debugName:"stacked"}:{},transform:y});smooth=c(!0,{...ngDevMode?{debugName:"smooth"}:{},transform:y});area=c(!1,{...ngDevMode?{debugName:"area"}:{},transform:y});dots=c(!0,{...ngDevMode?{debugName:"dots"}:{},transform:y});colors=c([],...ngDevMode?[{debugName:"colors"}]:[]);tooltipValueLabel=c("القيمة",...ngDevMode?[{debugName:"tooltipValueLabel"}]:[]);height=c(220,...ngDevMode?[{debugName:"height"}]:[]);label=c("رسم بياني",...ngDevMode?[{debugName:"label"}]:[]);width=400;pieSize=180;pad={t:16,r:12,b:28,l:36};hiddenNames=w(new Set,...ngDevMode?[{debugName:"hiddenNames"}]:[]);hiddenSeries=this.hiddenNames.asReadonly();hoveredCategoryIndex=w(null,...ngDevMode?[{debugName:"hoveredCategoryIndex"}]:[]);hoveredSlice=w(null,...ngDevMode?[{debugName:"hoveredSlice"}]:[]);isPieType=o(()=>this.type()==="pie"||this.type()==="donut",...ngDevMode?[{debugName:"isPieType"}]:[]);categories=o(()=>{if(this.labels().length)return this.labels();const e=this.datasets();if(e.length){const t=e.reduce((a,i)=>Math.max(a,i.data.length),0);return Array.from({length:t},(a,i)=>String(i+1))}return this.series().map(t=>t.label)},...ngDevMode?[{debugName:"categories"}]:[]);seriesList=o(()=>{const e=this.datasets();if(e.length)return e;const t=this.series();return t.length?[{name:this.label()||"",data:t.map(a=>a.value)}]:[]},...ngDevMode?[{debugName:"seriesList"}]:[]);visibleSeriesList=o(()=>this.seriesList().filter(e=>!this.hiddenNames().has(e.name)),...ngDevMode?[{debugName:"visibleSeriesList"}]:[]);piePoints=o(()=>{if(this.series().length)return this.series();const e=this.datasets();if(e.length){const t=this.labels();return e[0].data.map((a,i)=>({label:t[i]??String(i+1),value:a}))}return[]},...ngDevMode?[{debugName:"piePoints"}]:[]);visiblePiePoints=o(()=>this.piePoints().filter(e=>!this.hiddenNames().has(e.label)),...ngDevMode?[{debugName:"visiblePiePoints"}]:[]);showLegend=o(()=>this.legend()&&(this.isPieType()||this.seriesList().length>1),...ngDevMode?[{debugName:"showLegend"}]:[]);legendItems=o(()=>this.isPieType()?this.piePoints().map((e,t)=>({name:e.label,color:this.colorFor(t),value:e.value})):this.seriesList().map((e,t)=>({name:e.name,color:this.colorFor(t),value:null})),...ngDevMode?[{debugName:"legendItems"}]:[]);colorFor(e){const t=`var(--dga-chart-color-${e%6+1}, ${N[e%N.length]})`,a=this.colors()[e];return a?$(a,t):t}toggleSeries(e){this.hiddenNames.update(t=>{const a=this.isPieType()?this.piePoints().length:this.seriesList().length,i=new Set(t);return i.has(e)?i.delete(e):i.add(e),i.size>=a?t:i})}ariaLabel=o(()=>{const e=this.type()==="bar"?"أعمدة":this.type()==="line"?"خطي":this.type()==="donut"?"حلقي":"دائري",t=this.isPieType()?this.piePoints().map(a=>`${a.label}: ${a.value}`):this.seriesList().flatMap(a=>a.data.map((i,l)=>`${a.name?a.name+" ":""}${this.categories()[l]??l+1}: ${i}`));return`${this.label()} (${e}). ${t.join("، ")}`},...ngDevMode?[{debugName:"ariaLabel"}]:[]);plot=o(()=>{const e=this.height(),{t,r:a,b:i,l}=this.pad;return{x:l,y:t,w:this.width-l-a,h:e-t-i}},...ngDevMode?[{debugName:"plot"}]:[]);gridYs=o(()=>{const{y:e,h:t}=this.plot();return[e,e+t/2,e+t]},...ngDevMode?[{debugName:"gridYs"}]:[]);maxValue=o(()=>{const e=this.visibleSeriesList();if(!e.length)return 1;if(this.type()==="bar"&&this.stacked()){const a=this.categories().length;let i=0;for(let l=0;l<a;l++){let s=0;for(const d of e)s+=Math.max(0,d.data[l]??0);i=Math.max(i,s)}return i<=0?1:i}let t=0;for(const a of e)for(const i of a.data)t=Math.max(t,i);return t<=0?1:t},...ngDevMode?[{debugName:"maxValue"}]:[]);groupLayout=o(()=>{const{x:e,w:t}=this.plot(),a=Math.max(this.categories().length,1),i=12,l=Math.max(4,(t-i*(a-1))/a);return{x:e,groupW:l,groupGap:i,n:a}},...ngDevMode?[{debugName:"groupLayout"}]:[]);categoryTicks=o(()=>{const e=this.categories(),{x:t,groupW:a,groupGap:i}=this.groupLayout();return e.map((l,s)=>({index:s,category:l,x:t+s*(a+i)+a/2,hitX:t+s*(a+i),hitW:a}))},...ngDevMode?[{debugName:"categoryTicks"}]:[]);bars=o(()=>{const e=this.visibleSeriesList(),t=this.categories(),{y:a,h:i}=this.plot(),{x:l,groupW:s,groupGap:d}=this.groupLayout(),u=this.maxValue(),h=this.stacked(),b=e.length>1&&!h?4:0,m=h?s:Math.max(2,(s-b*Math.max(e.length-1,0))/Math.max(e.length,1)),v=[];for(let n=0;n<t.length;n++){const x=l+n*(s+d);if(h){let g=a+i;for(let p=0;p<e.length;p++){const f=e[p].data[n]??0,k=Math.max(0,f)/u*i;g-=k,v.push({seriesIndex:p,categoryIndex:n,x,y:g,w:m,h:k,value:f,color:this.colorFor(p),name:e[p].name,category:t[n]})}}else for(let g=0;g<e.length;g++){const p=e[g].data[n]??0,f=Math.max(0,p)/u*i;v.push({seriesIndex:g,categoryIndex:n,x:x+g*(m+b),y:a+i-f,w:m,h:f,value:p,color:this.colorFor(g),name:e[g].name,category:t[n]})}}return v},...ngDevMode?[{debugName:"bars"}]:[]);visibleLines=o(()=>{const e=this.visibleSeriesList(),t=this.categories(),{x:a,y:i,w:l,h:s}=this.plot(),d=this.maxValue(),u=t.length;if(!u)return[];const h=this.smooth(),b=i+s;return e.map((m,v)=>{const n=m.data.slice(0,u).map((f,k)=>{const M=u===1?a+l/2:a+k/(u-1)*l,L=i+s-Math.max(0,f)/d*s;return{x:M,y:L,value:f,category:t[k]}}),x=this.colorFor(v),g=h?this.smoothPathD(n):this.straightPathD(n),p=n.length>1?this.areaPathD(n,b,h):"";return{name:m.name,color:x,points:n,linePath:g,areaPath:p}})},...ngDevMode?[{debugName:"visibleLines"}]:[]);straightPathD(e){return e.length?e.map((t,a)=>`${a===0?"M":"L"} ${t.x} ${t.y}`).join(" "):""}smoothPathD(e){if(e.length<2)return e.length===1?`M ${e[0].x} ${e[0].y}`:"";const t=[`M ${e[0].x} ${e[0].y}`];for(let a=0;a<e.length-1;a++){const i=e[a===0?0:a-1],l=e[a],s=e[a+1],d=e[a+2<e.length?a+2:e.length-1],u=l.x+(s.x-i.x)/6,h=l.y+(s.y-i.y)/6,b=s.x-(d.x-l.x)/6,m=s.y-(d.y-l.y)/6;t.push(`C ${u} ${h}, ${b} ${m}, ${s.x} ${s.y}`)}return t.join(" ")}areaPathD(e,t,a){const i=a?this.smoothPathD(e):this.straightPathD(e),l=e[0],s=e[e.length-1];return`${i} L ${s.x} ${t} L ${l.x} ${t} Z`}pieSlices=o(()=>{const e=this.visiblePiePoints(),t=e.reduce((d,u)=>d+Math.max(0,u.value),0)||1,a=this.pieSize/2,i=this.pieSize/2,l=this.pieSize*.42;let s=-Math.PI/2;return e.map((d,u)=>{const h=Math.max(0,d.value)/t*Math.PI*2,b=s,m=s+h;s=m;const v=h>Math.PI?1:0,n=a+l*Math.cos(b),x=i+l*Math.sin(b),g=a+l*Math.cos(m),p=i+l*Math.sin(m),f=b+h/2;return{index:u,label:d.label,value:d.value,color:this.colorFor(u),d:`M ${a} ${i} L ${n} ${x} A ${l} ${l} 0 ${v} 1 ${g} ${p} Z`,midX:a+l*.65*Math.cos(f),midY:i+l*.65*Math.sin(f)}})},...ngDevMode?[{debugName:"pieSlices"}]:[]);onCategoryEnter(e){this.tooltip()&&this.hoveredCategoryIndex.set(e)}onCategoryLeave(){this.hoveredCategoryIndex.set(null)}onSliceEnter(e,t){this.tooltip()&&this.hoveredSlice.set({index:e,label:t.label,value:t.value})}onSliceLeave(){this.hoveredSlice.set(null)}categoryAriaLabel(e){const t=this.categories()[e]??"",a=this.visibleSeriesList().map(i=>`${i.name?i.name+" ":""}${i.data[e]??0}`);return`${t}: ${a.join("، ")}`}categoryTooltip=o(()=>{const e=this.hoveredCategoryIndex();if(e===null||!this.tooltip())return null;const t=this.categoryTicks()[e];if(!t)return null;const i=this.visibleSeriesList().map((l,s)=>({name:l.name||t.category,color:this.colorFor(s),value:l.data[e]??0}));return{x:t.x,y:this.plot().y,title:t.category,items:i}},...ngDevMode?[{debugName:"categoryTooltip"}]:[]);sliceTooltip=o(()=>{const e=this.hoveredSlice();if(!e||!this.tooltip())return null;const t=this.pieSlices()[e.index];return t?{x:t.midX,y:t.midY,title:t.label,items:[{name:this.tooltipValueLabel(),color:t.color,value:t.value}]}:null},...ngDevMode?[{debugName:"sliceTooltip"}]:[]);formatValue(e){return new Intl.NumberFormat(void 0,{maximumFractionDigits:2}).format(e)}pieTooltipStyle(e){const a=Math.min(Math.max(e.x,8),this.pieSize-8);return e.y<this.pieSize*.28?{left:`${a}px`,top:`${Math.min(e.y+12,this.pieSize-8)}px`,transform:"translate(-50%, 0)"}:{left:`${a}px`,top:`${Math.max(e.y-8,8)}px`,transform:"translate(-50%, -100%)"}}plotTooltipStyle(e){const t=this.height(),a=e.x/this.width*100,i=e.y/t*100;return{left:`${a}%`,top:`${i}%`,transform:"translate(-50%, calc(-100% - 8px))"}}static ɵfac=r.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.5",ngImport:r,type:S,deps:[],target:r.ɵɵFactoryTarget.Component});static ɵcmp=r.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.5",type:S,isStandalone:!0,selector:"dga-chart",inputs:{type:{classPropertyName:"type",publicName:"type",isSignal:!0,isRequired:!1,transformFunction:null},series:{classPropertyName:"series",publicName:"series",isSignal:!0,isRequired:!1,transformFunction:null},labels:{classPropertyName:"labels",publicName:"labels",isSignal:!0,isRequired:!1,transformFunction:null},datasets:{classPropertyName:"datasets",publicName:"datasets",isSignal:!0,isRequired:!1,transformFunction:null},legend:{classPropertyName:"legend",publicName:"legend",isSignal:!0,isRequired:!1,transformFunction:null},tooltip:{classPropertyName:"tooltip",publicName:"tooltip",isSignal:!0,isRequired:!1,transformFunction:null},grid:{classPropertyName:"grid",publicName:"grid",isSignal:!0,isRequired:!1,transformFunction:null},stacked:{classPropertyName:"stacked",publicName:"stacked",isSignal:!0,isRequired:!1,transformFunction:null},smooth:{classPropertyName:"smooth",publicName:"smooth",isSignal:!0,isRequired:!1,transformFunction:null},area:{classPropertyName:"area",publicName:"area",isSignal:!0,isRequired:!1,transformFunction:null},dots:{classPropertyName:"dots",publicName:"dots",isSignal:!0,isRequired:!1,transformFunction:null},colors:{classPropertyName:"colors",publicName:"colors",isSignal:!0,isRequired:!1,transformFunction:null},tooltipValueLabel:{classPropertyName:"tooltipValueLabel",publicName:"tooltipValueLabel",isSignal:!0,isRequired:!1,transformFunction:null},height:{classPropertyName:"height",publicName:"height",isSignal:!0,isRequired:!1,transformFunction:null},label:{classPropertyName:"label",publicName:"label",isSignal:!0,isRequired:!1,transformFunction:null}},host:{properties:{"attr.data-type":"type()"},classAttribute:"block w-full"},ngImport:r,template:`
+    <div class="flex w-full flex-col gap-md">
+      @if (isPieType()) {
+        <div class="flex flex-col items-center gap-lg sm:flex-row sm:items-start">
+          <div
+            class="relative shrink-0"
+            [style.width.px]="pieSize"
+            [style.height.px]="pieSize"
+          >
+            <svg
+              class="block h-full w-full"
+              [attr.viewBox]="'0 0 ' + pieSize + ' ' + pieSize"
+              role="img"
+              [attr.aria-label]="ariaLabel()"
+            >
+              @for (slice of pieSlices(); track slice.label + slice.index) {
+                <path
+                  [attr.d]="slice.d"
+                  [attr.fill]="slice.color"
+                  stroke="var(--dga-chart-dot-fill, #fff)"
+                  stroke-width="2"
+                  tabindex="0"
+                  [attr.aria-label]="slice.label + ': ' + formatValue(slice.value)"
+                  (pointerenter)="onSliceEnter(slice.index, slice)"
+                  (pointerleave)="onSliceLeave()"
+                  (focus)="onSliceEnter(slice.index, slice)"
+                  (blur)="onSliceLeave()"
+                />
+              }
+              @if (type() === 'donut') {
+                <circle
+                  [attr.cx]="pieSize / 2"
+                  [attr.cy]="pieSize / 2"
+                  [attr.r]="pieSize * 0.28"
+                  class="fill-surface"
+                />
+              }
+            </svg>
+            @if (sliceTooltip(); as tip) {
+              <div
+                class="dga-chart-tooltip"
+                role="tooltip"
+                [style]="pieTooltipStyle(tip)"
+              >
+                <div class="dga-chart-tooltip__title">{{ tip.title }}</div>
+                @for (line of tip.items; track line.name) {
+                  <div class="dga-chart-tooltip__row">
+                    <span [style.color]="line.color">{{ line.name }}:</span>
+                    <span class="dga-chart-tooltip__value">{{ formatValue(line.value) }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+          @if (showLegend()) {
+            <ul class="m-0 flex list-none flex-col gap-sm p-0" role="list">
+              @for (item of legendItems(); track item.name) {
+                <li>
+                  <button
+                    type="button"
+                    class="flex items-center gap-sm rounded-sm text-body-sm text-paragraph
+                           focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-focus"
+                    [class.opacity-40]="hiddenSeries().has(item.name)"
+                    (click)="toggleSeries(item.name)"
+                  >
+                    <span
+                      class="inline-block size-md shrink-0 rounded-full"
+                      [style.background]="item.color"
+                      aria-hidden="true"
+                    ></span>
+                    <span class="font-medium text-fg">{{ item.name }}</span>
+                    @if (item.value !== null) {
+                      <span class="text-muted">{{ formatValue(item.value) }}</span>
+                    }
+                  </button>
+                </li>
+              }
+            </ul>
+          }
+        </div>
+      } @else {
+        <div class="relative w-full">
+          <svg
+            class="block w-full"
+            [attr.viewBox]="'0 0 ' + width + ' ' + height()"
+            [attr.height]="height()"
+            role="img"
+            [attr.aria-label]="ariaLabel()"
+          >
+          @if (grid()) {
+            @for (y of gridYs(); track y) {
+              <line
+                [attr.x1]="pad.l"
+                [attr.x2]="width - pad.r"
+                [attr.y1]="y"
+                [attr.y2]="y"
+                stroke="var(--dga-chart-grid)"
+                stroke-width="1"
+              />
+            }
+          }
+
+          @if (type() === 'bar') {
+            @for (bar of bars(); track bar.categoryIndex + '-' + bar.seriesIndex) {
+              <rect
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.w"
+                [attr.height]="bar.h"
+                [attr.fill]="bar.color"
+                rx="2"
+              />
+            }
+          } @else {
+            @for (line of visibleLines(); track line.name) {
+              @if (area() && line.areaPath) {
+                <path
+                  [attr.d]="line.areaPath"
+                  [attr.fill]="line.color"
+                  fill-opacity="var(--dga-chart-area-opacity, 0.18)"
+                  stroke="none"
+                />
+              }
+              <path
+                [attr.d]="line.linePath"
+                fill="none"
+                [attr.stroke]="line.color"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+              />
+              @if (dots()) {
+                @for (pt of line.points; track pt.x) {
+                  <circle
+                    [attr.cx]="pt.x"
+                    [attr.cy]="pt.y"
+                    r="4"
+                    [attr.fill]="'var(--dga-chart-dot-fill, #fff)'"
+                    [attr.stroke]="line.color"
+                    stroke-width="2"
+                  />
+                }
+              }
+            }
+          }
+
+          @for (tick of categoryTicks(); track tick.category + tick.index) {
+            <rect
+              [attr.x]="tick.hitX"
+              [attr.y]="plot().y"
+              [attr.width]="tick.hitW"
+              [attr.height]="plot().h"
+              fill="transparent"
+              tabindex="0"
+              [attr.aria-label]="categoryAriaLabel(tick.index)"
+              (pointerenter)="onCategoryEnter(tick.index)"
+              (pointerleave)="onCategoryLeave()"
+              (focus)="onCategoryEnter(tick.index)"
+              (blur)="onCategoryLeave()"
+            />
+            <text
+              [attr.x]="tick.x"
+              [attr.y]="height() - 8"
+              text-anchor="middle"
+              font-size="11"
+              fill="var(--dga-chart-label)"
+            >
+              {{ tick.category }}
+            </text>
+          }
+
+          <text x="4" [attr.y]="pad.t + 4" font-size="10" fill="var(--dga-chart-text)">
+            {{ maxValue() }}
+          </text>
+          <text x="4" [attr.y]="height() - pad.b" font-size="10" fill="var(--dga-chart-text)">
+            0
+          </text>
+          </svg>
+
+          @if (categoryTooltip(); as tip) {
+            <div
+              class="dga-chart-tooltip"
+              role="tooltip"
+              [style]="plotTooltipStyle(tip)"
+            >
+              <div class="dga-chart-tooltip__title">{{ tip.title }}</div>
+              @for (line of tip.items; track line.name) {
+                <div class="dga-chart-tooltip__row">
+                  <span [style.color]="line.color">{{ line.name }}:</span>
+                  <span class="dga-chart-tooltip__value">{{ formatValue(line.value) }}</span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        @if (showLegend()) {
+          <ul class="m-0 flex list-none flex-wrap items-center gap-lg p-0" role="list">
+            @for (item of legendItems(); track item.name) {
+              <li>
+                <button
+                  type="button"
+                  class="flex items-center gap-sm rounded-sm text-body-sm text-paragraph
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [class.opacity-40]="hiddenSeries().has(item.name)"
+                  (click)="toggleSeries(item.name)"
+                >
+                  <span
+                    class="inline-block size-md shrink-0 rounded-full"
+                    [style.background]="item.color"
+                    aria-hidden="true"
+                  ></span>
+                  <span class="font-medium text-fg">{{ item.name }}</span>
+                </button>
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  `,isInline:!0,styles:[".dga-chart-tooltip{pointer-events:none;z-index:1;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}\n"],changeDetection:r.ChangeDetectionStrategy.OnPush})}r.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:r,type:S,decorators:[{type:D,args:[{selector:"dga-chart",standalone:!0,template:`
+    <div class="flex w-full flex-col gap-md">
+      @if (isPieType()) {
+        <div class="flex flex-col items-center gap-lg sm:flex-row sm:items-start">
+          <div
+            class="relative shrink-0"
+            [style.width.px]="pieSize"
+            [style.height.px]="pieSize"
+          >
+            <svg
+              class="block h-full w-full"
+              [attr.viewBox]="'0 0 ' + pieSize + ' ' + pieSize"
+              role="img"
+              [attr.aria-label]="ariaLabel()"
+            >
+              @for (slice of pieSlices(); track slice.label + slice.index) {
+                <path
+                  [attr.d]="slice.d"
+                  [attr.fill]="slice.color"
+                  stroke="var(--dga-chart-dot-fill, #fff)"
+                  stroke-width="2"
+                  tabindex="0"
+                  [attr.aria-label]="slice.label + ': ' + formatValue(slice.value)"
+                  (pointerenter)="onSliceEnter(slice.index, slice)"
+                  (pointerleave)="onSliceLeave()"
+                  (focus)="onSliceEnter(slice.index, slice)"
+                  (blur)="onSliceLeave()"
+                />
+              }
+              @if (type() === 'donut') {
+                <circle
+                  [attr.cx]="pieSize / 2"
+                  [attr.cy]="pieSize / 2"
+                  [attr.r]="pieSize * 0.28"
+                  class="fill-surface"
+                />
+              }
+            </svg>
+            @if (sliceTooltip(); as tip) {
+              <div
+                class="dga-chart-tooltip"
+                role="tooltip"
+                [style]="pieTooltipStyle(tip)"
+              >
+                <div class="dga-chart-tooltip__title">{{ tip.title }}</div>
+                @for (line of tip.items; track line.name) {
+                  <div class="dga-chart-tooltip__row">
+                    <span [style.color]="line.color">{{ line.name }}:</span>
+                    <span class="dga-chart-tooltip__value">{{ formatValue(line.value) }}</span>
+                  </div>
+                }
+              </div>
+            }
+          </div>
+          @if (showLegend()) {
+            <ul class="m-0 flex list-none flex-col gap-sm p-0" role="list">
+              @for (item of legendItems(); track item.name) {
+                <li>
+                  <button
+                    type="button"
+                    class="flex items-center gap-sm rounded-sm text-body-sm text-paragraph
+                           focus-visible:outline focus-visible:outline-2
+                           focus-visible:outline-offset-2 focus-visible:outline-focus"
+                    [class.opacity-40]="hiddenSeries().has(item.name)"
+                    (click)="toggleSeries(item.name)"
+                  >
+                    <span
+                      class="inline-block size-md shrink-0 rounded-full"
+                      [style.background]="item.color"
+                      aria-hidden="true"
+                    ></span>
+                    <span class="font-medium text-fg">{{ item.name }}</span>
+                    @if (item.value !== null) {
+                      <span class="text-muted">{{ formatValue(item.value) }}</span>
+                    }
+                  </button>
+                </li>
+              }
+            </ul>
+          }
+        </div>
+      } @else {
+        <div class="relative w-full">
+          <svg
+            class="block w-full"
+            [attr.viewBox]="'0 0 ' + width + ' ' + height()"
+            [attr.height]="height()"
+            role="img"
+            [attr.aria-label]="ariaLabel()"
+          >
+          @if (grid()) {
+            @for (y of gridYs(); track y) {
+              <line
+                [attr.x1]="pad.l"
+                [attr.x2]="width - pad.r"
+                [attr.y1]="y"
+                [attr.y2]="y"
+                stroke="var(--dga-chart-grid)"
+                stroke-width="1"
+              />
+            }
+          }
+
+          @if (type() === 'bar') {
+            @for (bar of bars(); track bar.categoryIndex + '-' + bar.seriesIndex) {
+              <rect
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.w"
+                [attr.height]="bar.h"
+                [attr.fill]="bar.color"
+                rx="2"
+              />
+            }
+          } @else {
+            @for (line of visibleLines(); track line.name) {
+              @if (area() && line.areaPath) {
+                <path
+                  [attr.d]="line.areaPath"
+                  [attr.fill]="line.color"
+                  fill-opacity="var(--dga-chart-area-opacity, 0.18)"
+                  stroke="none"
+                />
+              }
+              <path
+                [attr.d]="line.linePath"
+                fill="none"
+                [attr.stroke]="line.color"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+              />
+              @if (dots()) {
+                @for (pt of line.points; track pt.x) {
+                  <circle
+                    [attr.cx]="pt.x"
+                    [attr.cy]="pt.y"
+                    r="4"
+                    [attr.fill]="'var(--dga-chart-dot-fill, #fff)'"
+                    [attr.stroke]="line.color"
+                    stroke-width="2"
+                  />
+                }
+              }
+            }
+          }
+
+          @for (tick of categoryTicks(); track tick.category + tick.index) {
+            <rect
+              [attr.x]="tick.hitX"
+              [attr.y]="plot().y"
+              [attr.width]="tick.hitW"
+              [attr.height]="plot().h"
+              fill="transparent"
+              tabindex="0"
+              [attr.aria-label]="categoryAriaLabel(tick.index)"
+              (pointerenter)="onCategoryEnter(tick.index)"
+              (pointerleave)="onCategoryLeave()"
+              (focus)="onCategoryEnter(tick.index)"
+              (blur)="onCategoryLeave()"
+            />
+            <text
+              [attr.x]="tick.x"
+              [attr.y]="height() - 8"
+              text-anchor="middle"
+              font-size="11"
+              fill="var(--dga-chart-label)"
+            >
+              {{ tick.category }}
+            </text>
+          }
+
+          <text x="4" [attr.y]="pad.t + 4" font-size="10" fill="var(--dga-chart-text)">
+            {{ maxValue() }}
+          </text>
+          <text x="4" [attr.y]="height() - pad.b" font-size="10" fill="var(--dga-chart-text)">
+            0
+          </text>
+          </svg>
+
+          @if (categoryTooltip(); as tip) {
+            <div
+              class="dga-chart-tooltip"
+              role="tooltip"
+              [style]="plotTooltipStyle(tip)"
+            >
+              <div class="dga-chart-tooltip__title">{{ tip.title }}</div>
+              @for (line of tip.items; track line.name) {
+                <div class="dga-chart-tooltip__row">
+                  <span [style.color]="line.color">{{ line.name }}:</span>
+                  <span class="dga-chart-tooltip__value">{{ formatValue(line.value) }}</span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+
+        @if (showLegend()) {
+          <ul class="m-0 flex list-none flex-wrap items-center gap-lg p-0" role="list">
+            @for (item of legendItems(); track item.name) {
+              <li>
+                <button
+                  type="button"
+                  class="flex items-center gap-sm rounded-sm text-body-sm text-paragraph
+                         focus-visible:outline focus-visible:outline-2
+                         focus-visible:outline-offset-2 focus-visible:outline-focus"
+                  [class.opacity-40]="hiddenSeries().has(item.name)"
+                  (click)="toggleSeries(item.name)"
+                >
+                  <span
+                    class="inline-block size-md shrink-0 rounded-full"
+                    [style.background]="item.color"
+                    aria-hidden="true"
+                  ></span>
+                  <span class="font-medium text-fg">{{ item.name }}</span>
+                </button>
+              </li>
+            }
+          </ul>
+        }
+      }
+    </div>
+  `,changeDetection:P.OnPush,host:{class:"block w-full","[attr.data-type]":"type()"},styles:[".dga-chart-tooltip{pointer-events:none;z-index:1;min-width:max-content;max-width:min(16rem,calc(100vw - 2rem));border-radius:var(--radius-md, .375rem);border:1px solid var(--dga-chart-tooltip-border, var(--color-border, #e2e8f0));background:var(--dga-chart-tooltip-bg, var(--color-card, #fff));padding:.375rem .625rem;box-shadow:0 4px 12px #0000001f;font-size:.6875rem;line-height:1.35;white-space:nowrap}.dga-chart-tooltip__title{font-weight:600;color:var(--dga-chart-label, var(--color-fg, #0f172a));margin-bottom:.125rem}.dga-chart-tooltip__row{display:flex;align-items:baseline;gap:.375rem}.dga-chart-tooltip__value{font-variant-numeric:tabular-nums;font-weight:500}\n"]}]}],propDecorators:{type:[{type:r.Input,args:[{isSignal:!0,alias:"type",required:!1}]}],series:[{type:r.Input,args:[{isSignal:!0,alias:"series",required:!1}]}],labels:[{type:r.Input,args:[{isSignal:!0,alias:"labels",required:!1}]}],datasets:[{type:r.Input,args:[{isSignal:!0,alias:"datasets",required:!1}]}],legend:[{type:r.Input,args:[{isSignal:!0,alias:"legend",required:!1}]}],tooltip:[{type:r.Input,args:[{isSignal:!0,alias:"tooltip",required:!1}]}],grid:[{type:r.Input,args:[{isSignal:!0,alias:"grid",required:!1}]}],stacked:[{type:r.Input,args:[{isSignal:!0,alias:"stacked",required:!1}]}],smooth:[{type:r.Input,args:[{isSignal:!0,alias:"smooth",required:!1}]}],area:[{type:r.Input,args:[{isSignal:!0,alias:"area",required:!1}]}],dots:[{type:r.Input,args:[{isSignal:!0,alias:"dots",required:!1}]}],colors:[{type:r.Input,args:[{isSignal:!0,alias:"colors",required:!1}]}],tooltipValueLabel:[{type:r.Input,args:[{isSignal:!0,alias:"tooltipValueLabel",required:!1}]}],height:[{type:r.Input,args:[{isSignal:!0,alias:"height",required:!1}]}],label:[{type:r.Input,args:[{isSignal:!0,alias:"label",required:!1}]}]}});export{S as DgaChart};