@a.nemreen/dga-ui 0.3.13 → 0.3.15

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

@@ -0,0 +1,471 @@
+import*as l from"@angular/core";import{input as h,booleanAttribute as v,signal as S,computed as n,viewChild as I,afterEveryRender as P,ChangeDetectionStrategy as D,Component as $}from"@angular/core";import{dgaSafeCssColor as z}from"@a.nemreen/dga-ui";const N=["#1b8354","#3b82f6","#f59e0b","#ef4444","#64748b","#0d9488"];class w{type=h("bar",...ngDevMode?[{debugName:"type"}]:[]);series=h([],...ngDevMode?[{debugName:"series"}]:[]);labels=h([],...ngDevMode?[{debugName:"labels"}]:[]);datasets=h([],...ngDevMode?[{debugName:"datasets"}]:[]);legend=h(!0,{...ngDevMode?{debugName:"legend"}:{},transform:v});tooltip=h(!0,{...ngDevMode?{debugName:"tooltip"}:{},transform:v});grid=h(!0,{...ngDevMode?{debugName:"grid"}:{},transform:v});stacked=h(!1,{...ngDevMode?{debugName:"stacked"}:{},transform:v});smooth=h(!0,{...ngDevMode?{debugName:"smooth"}:{},transform:v});area=h(!1,{...ngDevMode?{debugName:"area"}:{},transform:v});dots=h(!0,{...ngDevMode?{debugName:"dots"}:{},transform:v});colors=h([],...ngDevMode?[{debugName:"colors"}]:[]);tooltipValueLabel=h("القيمة",...ngDevMode?[{debugName:"tooltipValueLabel"}]:[]);height=h(220,...ngDevMode?[{debugName:"height"}]:[]);label=h("رسم بياني",...ngDevMode?[{debugName:"label"}]:[]);width=400;pieSize=180;pad={t:16,r:12,b:28,l:36};hiddenNames=S(new Set,...ngDevMode?[{debugName:"hiddenNames"}]:[]);hiddenSeries=this.hiddenNames.asReadonly();hoveredCategoryIndex=S(null,...ngDevMode?[{debugName:"hoveredCategoryIndex"}]:[]);hoveredSlice=S(null,...ngDevMode?[{debugName:"hoveredSlice"}]:[]);isPieType=n(()=>this.type()==="pie"||this.type()==="donut",...ngDevMode?[{debugName:"isPieType"}]:[]);categories=n(()=>{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=n(()=>{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=n(()=>this.seriesList().filter(e=>!this.hiddenNames().has(e.name)),...ngDevMode?[{debugName:"visibleSeriesList"}]:[]);piePoints=n(()=>{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=n(()=>this.piePoints().filter(e=>!this.hiddenNames().has(e.label)),...ngDevMode?[{debugName:"visiblePiePoints"}]:[]);showLegend=n(()=>this.legend()&&(this.isPieType()||this.seriesList().length>1),...ngDevMode?[{debugName:"showLegend"}]:[]);legendItems=n(()=>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?z(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=n(()=>{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,r)=>`${a.name?a.name+" ":""}${this.categories()[r]??r+1}: ${i}`));return`${this.label()} (${e}). ${t.join("، ")}`},...ngDevMode?[{debugName:"ariaLabel"}]:[]);plot=n(()=>{const e=this.height(),{t,r:a,b:i,l:r}=this.pad;return{x:r,y:t,w:this.width-r-a,h:e-t-i}},...ngDevMode?[{debugName:"plot"}]:[]);gridYs=n(()=>{const{y:e,h:t}=this.plot();return[e,e+t/2,e+t]},...ngDevMode?[{debugName:"gridYs"}]:[]);maxValue=n(()=>{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 r=0;r<a;r++){let s=0;for(const c of e)s+=Math.max(0,c.data[r]??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=n(()=>{const{x:e,w:t}=this.plot(),a=Math.max(this.categories().length,1),i=12,r=Math.max(4,(t-i*(a-1))/a);return{x:e,groupW:r,groupGap:i,n:a}},...ngDevMode?[{debugName:"groupLayout"}]:[]);categoryTicks=n(()=>{const e=this.categories(),{x:t,groupW:a,groupGap:i}=this.groupLayout();return e.map((r,s)=>({index:s,category:r,x:t+s*(a+i)+a/2,hitX:t+s*(a+i),hitW:a}))},...ngDevMode?[{debugName:"categoryTicks"}]:[]);bars=n(()=>{const e=this.visibleSeriesList(),t=this.categories(),{y:a,h:i}=this.plot(),{x:r,groupW:s,groupGap:c}=this.groupLayout(),d=this.maxValue(),g=this.stacked(),m=e.length>1&&!g?4:0,p=g?s:Math.max(2,(s-m*Math.max(e.length-1,0))/Math.max(e.length,1)),y=[];for(let o=0;o<t.length;o++){const x=r+o*(s+c);if(g){let u=a+i;for(let f=0;f<e.length;f++){const b=e[f].data[o]??0,k=Math.max(0,b)/d*i;u-=k,y.push({seriesIndex:f,categoryIndex:o,x,y:u,w:p,h:k,value:b,color:this.colorFor(f),name:e[f].name,category:t[o]})}}else for(let u=0;u<e.length;u++){const f=e[u].data[o]??0,b=Math.max(0,f)/d*i;y.push({seriesIndex:u,categoryIndex:o,x:x+u*(p+m),y:a+i-b,w:p,h:b,value:f,color:this.colorFor(u),name:e[u].name,category:t[o]})}}return y},...ngDevMode?[{debugName:"bars"}]:[]);visibleLines=n(()=>{const e=this.visibleSeriesList(),t=this.categories(),{x:a,y:i,w:r,h:s}=this.plot(),c=this.maxValue(),d=t.length;if(!d)return[];const g=this.smooth(),m=i+s;return e.map((p,y)=>{const o=p.data.slice(0,d).map((b,k)=>{const L=d===1?a+r/2:a+k/(d-1)*r,M=i+s-Math.max(0,b)/c*s;return{x:L,y:M,value:b,category:t[k]}}),x=this.colorFor(y),u=g?this.smoothPathD(o):this.straightPathD(o),f=o.length>1?this.areaPathD(o,m,g):"";return{name:p.name,color:x,points:o,linePath:u,areaPath:f}})},...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],r=e[a],s=e[a+1],c=e[a+2<e.length?a+2:e.length-1],d=r.x+(s.x-i.x)/6,g=r.y+(s.y-i.y)/6,m=s.x-(c.x-r.x)/6,p=s.y-(c.y-r.y)/6;t.push(`C ${d} ${g}, ${m} ${p}, ${s.x} ${s.y}`)}return t.join(" ")}areaPathD(e,t,a){const i=a?this.smoothPathD(e):this.straightPathD(e),r=e[0],s=e[e.length-1];return`${i} L ${s.x} ${t} L ${r.x} ${t} Z`}pieSlices=n(()=>{const e=this.visiblePiePoints(),t=e.reduce((c,d)=>c+Math.max(0,d.value),0)||1,a=this.pieSize/2,i=this.pieSize/2,r=this.pieSize*.42;let s=-Math.PI/2;return e.map((c,d)=>{const g=Math.max(0,c.value)/t*Math.PI*2,m=s,p=s+g;s=p;const y=g>Math.PI?1:0,o=a+r*Math.cos(m),x=i+r*Math.sin(m),u=a+r*Math.cos(p),f=i+r*Math.sin(p),b=m+g/2;return{index:d,label:c.label,value:c.value,color:this.colorFor(d),d:`M ${a} ${i} L ${o} ${x} A ${r} ${r} 0 ${y} 1 ${u} ${f} Z`,midX:a+r*.65*Math.cos(b),midY:i+r*.65*Math.sin(b)}})},...ngDevMode?[{debugName:"pieSlices"}]:[]);onCategoryEnter(e){this.tooltip()&&(this.syncPlotBox(),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=n(()=>{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((r,s)=>({name:r.name||t.category,color:this.colorFor(s),value:r.data[e]??0}));return{x:this.tooltipX(e,t.x),y:this.tooltipY(e),title:t.category,items:i}},...ngDevMode?[{debugName:"categoryTooltip"}]:[]);sliceTooltip=n(()=>{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%)"}}tooltipX(e,t){return this.type()==="bar"?t:this.visibleLines()[0]?.points[e]?.x??t}tooltipY(e){if(this.type()==="bar"){const t=this.bars().filter(a=>a.categoryIndex===e).map(a=>a.y);if(t.length)return Math.min(...t)}else{const t=this.visibleLines().map(a=>a.points[e]?.y).filter(a=>a!=null);if(t.length)return Math.min(...t)}return this.plot().y}plotSvg=I("plotSvg",...ngDevMode?[{debugName:"plotSvg"}]:[]);plotBox=S({width:0,height:0},...ngDevMode?[{debugName:"plotBox"}]:[]);lineLengths=S([],...ngDevMode?[{debugName:"lineLengths"}]:[]);constructor(){P(()=>this.measureLines())}measureLines(){if(this.type()!=="line"){this.lineLengths().length&&this.lineLengths.set([]);return}const e=this.plotSvg()?.nativeElement;if(!e)return;const t=[...e.querySelectorAll(".dga-chart-line")].map(i=>Math.ceil(i.getTotalLength())),a=this.lineLengths();t.length===a.length&&t.every((i,r)=>i===a[r])||this.lineLengths.set(t)}syncPlotBox(){const e=this.plotSvg()?.nativeElement;if(!e)return;const t=e.getBoundingClientRect();this.plotBox.set({width:t.width,height:t.height})}plotTooltipStyle(e){const t=this.plotBox(),a=this.width,i=this.height(),r=t.width>0&&t.height>0?Math.min(t.width/a,t.height/i):1,s=a*r,c=i*r,d=t.width>0?(t.width-s)/2:0,g=t.height>0?(t.height-c)/2:0,m=d+e.x*r,p=g+e.y*r,y=t.width>0?m/t.width:e.x/a,o=y<.16?"0":y>.84?"-100%":"-50%";return{left:`${m}px`,top:`${p}px`,transform:`translate(${o}, calc(-100% - 8px))`}}static ɵfac=l.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.1.5",ngImport:l,type:w,deps:[],target:l.ɵɵFactoryTarget.Component});static ɵcmp=l.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.1.5",type:w,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"},viewQueries:[{propertyName:"plotSvg",first:!0,predicate:["plotSvg"],descendants:!0,isSignal:!0}],ngImport:l,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
+                  class="dga-chart-slice"
+                  [attr.d]="slice.d"
+                  [attr.fill]="slice.color"
+                  [style.animation-delay.ms]="slice.index * 70"
+                  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
+            #plotSvg
+            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
+                class="dga-chart-bar"
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.w"
+                [attr.height]="bar.h"
+                [attr.fill]="bar.color"
+                [style.animation-delay.ms]="bar.categoryIndex * 80 + bar.seriesIndex * 40"
+                rx="2"
+              />
+            }
+          } @else {
+            @for (line of visibleLines(); track line.name; let lineIndex = $index) {
+              @if (area() && line.areaPath) {
+                <path
+                  class="dga-chart-area"
+                  [attr.d]="line.areaPath"
+                  [attr.fill]="line.color"
+                  [style.animation-delay.ms]="lineIndex * 120"
+                  fill-opacity="var(--dga-chart-area-opacity, 0.18)"
+                  stroke="none"
+                />
+              }
+              <path
+                class="dga-chart-line"
+                [class.dga-chart-line--play]="!!lineLengths()[lineIndex]"
+                [attr.d]="line.linePath"
+                [style.--dga-chart-length.px]="lineLengths()[lineIndex] || 1000"
+                fill="none"
+                [attr.stroke]="line.color"
+                [style.animation-delay.ms]="lineIndex * 120"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+              />
+              @if (dots()) {
+                @for (pt of line.points; track pt.x; let pointIndex = $index) {
+                  <circle
+                    class="dga-chart-dot"
+                    [attr.cx]="pt.x"
+                    [attr.cy]="pt.y"
+                    [style.animation-delay.ms]="lineIndex * 120 + pointIndex * 70 + 180"
+                    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{position:absolute;pointer-events:none;z-index:2;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}.dga-chart-bar{transform-box:fill-box;transform-origin:center bottom;animation:dga-chart-bar-in .62s cubic-bezier(.22,1,.36,1) both}.dga-chart-line{stroke-dasharray:var(--dga-chart-length, 1000);stroke-dashoffset:var(--dga-chart-length, 1000)}.dga-chart-line--play{animation:dga-chart-line-in .9s cubic-bezier(.22,1,.36,1) forwards}.dga-chart-area{opacity:1;animation:dga-chart-fade-in .7s ease-out both}.dga-chart-dot{transform-box:fill-box;transform-origin:center;animation:dga-chart-dot-in .36s cubic-bezier(.22,1,.36,1) both}.dga-chart-slice{transform-box:view-box;transform-origin:50% 50%;animation:dga-chart-slice-in .7s cubic-bezier(.22,1,.36,1) both}@keyframes dga-chart-bar-in{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dga-chart-line-in{0%{stroke-dashoffset:var(--dga-chart-length)}to{stroke-dashoffset:0}}@keyframes dga-chart-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chart-dot-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes dga-chart-slice-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.dga-chart-bar,.dga-chart-line,.dga-chart-line--play,.dga-chart-area,.dga-chart-dot,.dga-chart-slice{animation:none}.dga-chart-line{stroke-dashoffset:0}}\n"],changeDetection:l.ChangeDetectionStrategy.OnPush})}l.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.1.5",ngImport:l,type:w,decorators:[{type:$,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
+                  class="dga-chart-slice"
+                  [attr.d]="slice.d"
+                  [attr.fill]="slice.color"
+                  [style.animation-delay.ms]="slice.index * 70"
+                  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
+            #plotSvg
+            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
+                class="dga-chart-bar"
+                [attr.x]="bar.x"
+                [attr.y]="bar.y"
+                [attr.width]="bar.w"
+                [attr.height]="bar.h"
+                [attr.fill]="bar.color"
+                [style.animation-delay.ms]="bar.categoryIndex * 80 + bar.seriesIndex * 40"
+                rx="2"
+              />
+            }
+          } @else {
+            @for (line of visibleLines(); track line.name; let lineIndex = $index) {
+              @if (area() && line.areaPath) {
+                <path
+                  class="dga-chart-area"
+                  [attr.d]="line.areaPath"
+                  [attr.fill]="line.color"
+                  [style.animation-delay.ms]="lineIndex * 120"
+                  fill-opacity="var(--dga-chart-area-opacity, 0.18)"
+                  stroke="none"
+                />
+              }
+              <path
+                class="dga-chart-line"
+                [class.dga-chart-line--play]="!!lineLengths()[lineIndex]"
+                [attr.d]="line.linePath"
+                [style.--dga-chart-length.px]="lineLengths()[lineIndex] || 1000"
+                fill="none"
+                [attr.stroke]="line.color"
+                [style.animation-delay.ms]="lineIndex * 120"
+                stroke-width="2"
+                stroke-linejoin="round"
+                stroke-linecap="round"
+              />
+              @if (dots()) {
+                @for (pt of line.points; track pt.x; let pointIndex = $index) {
+                  <circle
+                    class="dga-chart-dot"
+                    [attr.cx]="pt.x"
+                    [attr.cy]="pt.y"
+                    [style.animation-delay.ms]="lineIndex * 120 + pointIndex * 70 + 180"
+                    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:D.OnPush,host:{class:"block w-full","[attr.data-type]":"type()"},styles:[".dga-chart-tooltip{position:absolute;pointer-events:none;z-index:2;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}.dga-chart-bar{transform-box:fill-box;transform-origin:center bottom;animation:dga-chart-bar-in .62s cubic-bezier(.22,1,.36,1) both}.dga-chart-line{stroke-dasharray:var(--dga-chart-length, 1000);stroke-dashoffset:var(--dga-chart-length, 1000)}.dga-chart-line--play{animation:dga-chart-line-in .9s cubic-bezier(.22,1,.36,1) forwards}.dga-chart-area{opacity:1;animation:dga-chart-fade-in .7s ease-out both}.dga-chart-dot{transform-box:fill-box;transform-origin:center;animation:dga-chart-dot-in .36s cubic-bezier(.22,1,.36,1) both}.dga-chart-slice{transform-box:view-box;transform-origin:50% 50%;animation:dga-chart-slice-in .7s cubic-bezier(.22,1,.36,1) both}@keyframes dga-chart-bar-in{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dga-chart-line-in{0%{stroke-dashoffset:var(--dga-chart-length)}to{stroke-dashoffset:0}}@keyframes dga-chart-fade-in{0%{opacity:0}to{opacity:1}}@keyframes dga-chart-dot-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes dga-chart-slice-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.dga-chart-bar,.dga-chart-line,.dga-chart-line--play,.dga-chart-area,.dga-chart-dot,.dga-chart-slice{animation:none}.dga-chart-line{stroke-dashoffset:0}}\n"]}]}],ctorParameters:()=>[],propDecorators:{type:[{type:l.Input,args:[{isSignal:!0,alias:"type",required:!1}]}],series:[{type:l.Input,args:[{isSignal:!0,alias:"series",required:!1}]}],labels:[{type:l.Input,args:[{isSignal:!0,alias:"labels",required:!1}]}],datasets:[{type:l.Input,args:[{isSignal:!0,alias:"datasets",required:!1}]}],legend:[{type:l.Input,args:[{isSignal:!0,alias:"legend",required:!1}]}],tooltip:[{type:l.Input,args:[{isSignal:!0,alias:"tooltip",required:!1}]}],grid:[{type:l.Input,args:[{isSignal:!0,alias:"grid",required:!1}]}],stacked:[{type:l.Input,args:[{isSignal:!0,alias:"stacked",required:!1}]}],smooth:[{type:l.Input,args:[{isSignal:!0,alias:"smooth",required:!1}]}],area:[{type:l.Input,args:[{isSignal:!0,alias:"area",required:!1}]}],dots:[{type:l.Input,args:[{isSignal:!0,alias:"dots",required:!1}]}],colors:[{type:l.Input,args:[{isSignal:!0,alias:"colors",required:!1}]}],tooltipValueLabel:[{type:l.Input,args:[{isSignal:!0,alias:"tooltipValueLabel",required:!1}]}],height:[{type:l.Input,args:[{isSignal:!0,alias:"height",required:!1}]}],label:[{type:l.Input,args:[{isSignal:!0,alias:"label",required:!1}]}],plotSvg:[{type:l.ViewChild,args:["plotSvg",{isSignal:!0}]}]}});export{w as DgaChart};