sn-charts 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/fesm2022/sn-charts.mjs +311 -0
- package/fesm2022/sn-charts.mjs.map +1 -0
- package/package.json +23 -0
- package/types/sn-charts.d.ts +113 -0
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# sn-charts
|
|
2
|
+
|
|
3
|
+
Native SVG chart components for Angular — **zero external dependencies**.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm i sn-charts
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Components
|
|
12
|
+
|
|
13
|
+
### Bar Chart
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import { ... } from 'sn-charts';
|
|
17
|
+
|
|
18
|
+
@Component({
|
|
19
|
+
imports: [SnBarChartComponent],
|
|
20
|
+
template: `
|
|
21
|
+
<sn-bar-chart [data]="data" color="#3b82f6" [height]="300"></sn-bar-chart>
|
|
22
|
+
`
|
|
23
|
+
})
|
|
24
|
+
export class MyComponent {
|
|
25
|
+
data = [
|
|
26
|
+
{ label: 'Jan', value: 30 },
|
|
27
|
+
{ label: 'Feb', value: 80 },
|
|
28
|
+
{ label: 'Mar', value: 45 },
|
|
29
|
+
];
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Line Chart
|
|
34
|
+
|
|
35
|
+
```typescript
|
|
36
|
+
import { ... } from 'sn-charts';
|
|
37
|
+
|
|
38
|
+
@Component({
|
|
39
|
+
imports: [SnLineChartComponent],
|
|
40
|
+
template: `
|
|
41
|
+
<sn-line-chart [data]="data" color="#ec4899" [fillArea]="true" [height]="300"></sn-line-chart>
|
|
42
|
+
`
|
|
43
|
+
})
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Pie / Donut Chart
|
|
47
|
+
|
|
48
|
+
```typescript
|
|
49
|
+
import { ... } from 'sn-charts';
|
|
50
|
+
|
|
51
|
+
@Component({
|
|
52
|
+
imports: [SnPieChartComponent],
|
|
53
|
+
template: `
|
|
54
|
+
<sn-pie-chart [data]="data" [size]="250" [donut]="true" [showLegend]="true"></sn-pie-chart>
|
|
55
|
+
`
|
|
56
|
+
})
|
|
57
|
+
export class MyComponent {
|
|
58
|
+
data = [
|
|
59
|
+
{ label: 'Direct', value: 40 },
|
|
60
|
+
{ label: 'Organic', value: 30, color: '#10b981' },
|
|
61
|
+
{ label: 'Social', value: 15 },
|
|
62
|
+
];
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## Features
|
|
67
|
+
|
|
68
|
+
- **Native SVG** — no Chart.js, D3, or other dependencies
|
|
69
|
+
- **Responsive** — automatically resizes to container width
|
|
70
|
+
- **Interactive** — hover tooltips on all chart types
|
|
71
|
+
- **Animated** — line draw animation, fade-in effects
|
|
72
|
+
- **Donut mode** — pie chart supports donut with center label
|
|
73
|
+
|
|
74
|
+
## Part of [sn-ui](https://github.com/nicosnapps/sn-ui)
|
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { HostListener, Input, Component } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
class SnBarChartComponent {
|
|
7
|
+
constructor(el) {
|
|
8
|
+
this.el = el;
|
|
9
|
+
/**
|
|
10
|
+
* Array of data points to render.
|
|
11
|
+
*/
|
|
12
|
+
this.data = [];
|
|
13
|
+
/**
|
|
14
|
+
* Primary color for the bars.
|
|
15
|
+
*/
|
|
16
|
+
this.color = '#4f46e5';
|
|
17
|
+
/**
|
|
18
|
+
* Height of the SVG visualization (width is generally responsive 100%).
|
|
19
|
+
*/
|
|
20
|
+
this.height = 300;
|
|
21
|
+
this.width = 600; // Will be calculated actively via ResizeObserver or container width
|
|
22
|
+
this.padding = 40;
|
|
23
|
+
this.maxValue = 0;
|
|
24
|
+
this.chartWidth = 0;
|
|
25
|
+
this.chartHeight = 0;
|
|
26
|
+
this.hoveredIndex = null;
|
|
27
|
+
}
|
|
28
|
+
ngOnInit() {
|
|
29
|
+
this.updateDimensions();
|
|
30
|
+
}
|
|
31
|
+
onResize() {
|
|
32
|
+
this.updateDimensions();
|
|
33
|
+
}
|
|
34
|
+
ngOnChanges(changes) {
|
|
35
|
+
if (changes['data'] || changes['height']) {
|
|
36
|
+
this.updateChart();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
ngAfterViewInit() {
|
|
40
|
+
// Initial calculation based on actual container bounds
|
|
41
|
+
setTimeout(() => this.updateDimensions(), 0);
|
|
42
|
+
}
|
|
43
|
+
updateDimensions() {
|
|
44
|
+
if (this.el.nativeElement) {
|
|
45
|
+
const parentWidth = this.el.nativeElement.parentElement?.clientWidth;
|
|
46
|
+
if (parentWidth && parentWidth > 0) {
|
|
47
|
+
this.width = parentWidth;
|
|
48
|
+
}
|
|
49
|
+
this.updateChart();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
updateChart() {
|
|
53
|
+
const maxDataVal = Math.max(...this.data.map(d => d.value), 0);
|
|
54
|
+
// Add 10% headroom to the top of the chart
|
|
55
|
+
this.maxValue = maxDataVal > 0 ? maxDataVal * 1.1 : 10;
|
|
56
|
+
// Calculate usable graphing area
|
|
57
|
+
this.chartWidth = Math.max(0, this.width - this.padding * 2);
|
|
58
|
+
this.chartHeight = Math.max(0, this.height - this.padding * 2);
|
|
59
|
+
}
|
|
60
|
+
getBarHeight(value) {
|
|
61
|
+
if (this.maxValue === 0)
|
|
62
|
+
return 0;
|
|
63
|
+
return (value / this.maxValue) * this.chartHeight;
|
|
64
|
+
}
|
|
65
|
+
getBarY(value) {
|
|
66
|
+
return this.height - this.padding - this.getBarHeight(value);
|
|
67
|
+
}
|
|
68
|
+
getBarX(index) {
|
|
69
|
+
if (this.data.length === 0)
|
|
70
|
+
return 0;
|
|
71
|
+
const barSpacing = this.chartWidth / this.data.length;
|
|
72
|
+
// Add 10% spacing between bars
|
|
73
|
+
return this.padding + index * barSpacing + (barSpacing * 0.1);
|
|
74
|
+
}
|
|
75
|
+
getBarWidth() {
|
|
76
|
+
if (this.data.length === 0)
|
|
77
|
+
return 0;
|
|
78
|
+
const barSpacing = this.chartWidth / this.data.length;
|
|
79
|
+
return barSpacing * 0.8;
|
|
80
|
+
}
|
|
81
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnBarChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
82
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SnBarChartComponent, isStandalone: true, selector: "sn-bar-chart", inputs: { data: "data", color: "color", height: "height" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-bar-chart-svg\">\n\n <!-- Y Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- X Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- Horizontal Grid Lines and Y-Axis Labels -->\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n <!-- Display rounded values for the quartiles -->\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Bars and X-Axis Labels -->\n <g class=\"sn-chart-bars\">\n @for(item of data; track item.label; let i = $index) {\n\n <!-- Interactive Bar Group -->\n <g class=\"sn-bar-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- The Bar -->\n <rect [attr.x]=\"getBarX(i)\" [attr.y]=\"getBarY(item.value)\" [attr.width]=\"getBarWidth()\"\n [attr.height]=\"getBarHeight(item.value)\" [attr.fill]=\"color\" class=\"sn-bar\"\n [class.sn-bar-hovered]=\"hoveredIndex === i\"></rect>\n\n <!-- Value Tooltip/Label (shows on hover) -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"getBarY(item.value) - 10\"\n class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n </g>\n\n <!-- X Axis Label under the bar -->\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"height - padding + 20\"\n class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n }\n </g>\n </svg>\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-container{position:relative;display:block;width:100%;overflow:hidden}.sn-bar-chart-svg{display:block;overflow:visible;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.sn-chart-axis{stroke:#d1d5db;stroke-width:1}.sn-chart-grid-line{stroke:#e5e7eb;stroke-width:1;stroke-dasharray:4 4}.sn-chart-label{transform-origin:center;fill:#6b7280;font-size:.75rem;line-height:1rem;font-weight:500}.sn-chart-label-y{text-anchor:end}.sn-chart-label-x{text-anchor:middle}.sn-bar-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-bar{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);rx:4}.sn-bar-hovered{opacity:.8}.sn-chart-tooltip-text{fill:#111827;font-size:.875rem;line-height:1.25rem;font-weight:600;text-anchor:middle;animation:fadeIn .2s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
|
|
83
|
+
}
|
|
84
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnBarChartComponent, decorators: [{
|
|
85
|
+
type: Component,
|
|
86
|
+
args: [{ selector: 'sn-bar-chart', standalone: true, imports: [CommonModule], template: "<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-bar-chart-svg\">\n\n <!-- Y Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- X Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- Horizontal Grid Lines and Y-Axis Labels -->\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n <!-- Display rounded values for the quartiles -->\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Bars and X-Axis Labels -->\n <g class=\"sn-chart-bars\">\n @for(item of data; track item.label; let i = $index) {\n\n <!-- Interactive Bar Group -->\n <g class=\"sn-bar-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- The Bar -->\n <rect [attr.x]=\"getBarX(i)\" [attr.y]=\"getBarY(item.value)\" [attr.width]=\"getBarWidth()\"\n [attr.height]=\"getBarHeight(item.value)\" [attr.fill]=\"color\" class=\"sn-bar\"\n [class.sn-bar-hovered]=\"hoveredIndex === i\"></rect>\n\n <!-- Value Tooltip/Label (shows on hover) -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"getBarY(item.value) - 10\"\n class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n </g>\n\n <!-- X Axis Label under the bar -->\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"height - padding + 20\"\n class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n }\n </g>\n </svg>\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-container{position:relative;display:block;width:100%;overflow:hidden}.sn-bar-chart-svg{display:block;overflow:visible;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.sn-chart-axis{stroke:#d1d5db;stroke-width:1}.sn-chart-grid-line{stroke:#e5e7eb;stroke-width:1;stroke-dasharray:4 4}.sn-chart-label{transform-origin:center;fill:#6b7280;font-size:.75rem;line-height:1rem;font-weight:500}.sn-chart-label-y{text-anchor:end}.sn-chart-label-x{text-anchor:middle}.sn-bar-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-bar{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);rx:4}.sn-bar-hovered{opacity:.8}.sn-chart-tooltip-text{fill:#111827;font-size:.875rem;line-height:1.25rem;font-weight:600;text-anchor:middle;animation:fadeIn .2s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"] }]
|
|
87
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], color: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], height: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], onResize: [{
|
|
94
|
+
type: HostListener,
|
|
95
|
+
args: ['window:resize']
|
|
96
|
+
}] } });
|
|
97
|
+
|
|
98
|
+
class SnLineChartComponent {
|
|
99
|
+
constructor(el) {
|
|
100
|
+
this.el = el;
|
|
101
|
+
this.data = [];
|
|
102
|
+
this.color = '#ec4899';
|
|
103
|
+
this.fillArea = true;
|
|
104
|
+
this.height = 300;
|
|
105
|
+
this.width = 600;
|
|
106
|
+
this.padding = 40;
|
|
107
|
+
this.maxValue = 0;
|
|
108
|
+
this.chartWidth = 0;
|
|
109
|
+
this.chartHeight = 0;
|
|
110
|
+
this.hoveredIndex = null;
|
|
111
|
+
this.linePath = '';
|
|
112
|
+
this.areaPath = '';
|
|
113
|
+
}
|
|
114
|
+
ngOnInit() {
|
|
115
|
+
this.updateDimensions();
|
|
116
|
+
}
|
|
117
|
+
onResize() {
|
|
118
|
+
this.updateDimensions();
|
|
119
|
+
}
|
|
120
|
+
ngOnChanges(changes) {
|
|
121
|
+
if (changes['data'] || changes['height']) {
|
|
122
|
+
this.updateChart();
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
ngAfterViewInit() {
|
|
126
|
+
setTimeout(() => this.updateDimensions(), 0);
|
|
127
|
+
}
|
|
128
|
+
updateDimensions() {
|
|
129
|
+
if (this.el.nativeElement) {
|
|
130
|
+
const parentWidth = this.el.nativeElement.parentElement?.clientWidth;
|
|
131
|
+
if (parentWidth && parentWidth > 0) {
|
|
132
|
+
this.width = parentWidth;
|
|
133
|
+
}
|
|
134
|
+
this.updateChart();
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
updateChart() {
|
|
138
|
+
const maxDataVal = Math.max(...this.data.map(d => d.value), 0);
|
|
139
|
+
this.maxValue = maxDataVal > 0 ? maxDataVal * 1.1 : 10;
|
|
140
|
+
this.chartWidth = Math.max(0, this.width - this.padding * 2);
|
|
141
|
+
this.chartHeight = Math.max(0, this.height - this.padding * 2);
|
|
142
|
+
this.generatePaths();
|
|
143
|
+
}
|
|
144
|
+
generatePaths() {
|
|
145
|
+
if (this.data.length === 0) {
|
|
146
|
+
this.linePath = '';
|
|
147
|
+
this.areaPath = '';
|
|
148
|
+
return;
|
|
149
|
+
}
|
|
150
|
+
const points = this.data.map((d, i) => {
|
|
151
|
+
return this.getPointX(i) + ',' + this.getPointY(d.value);
|
|
152
|
+
});
|
|
153
|
+
this.linePath = 'M ' + points.join(' L ');
|
|
154
|
+
if (this.fillArea) {
|
|
155
|
+
const startX = this.getPointX(0);
|
|
156
|
+
const endX = this.getPointX(this.data.length - 1);
|
|
157
|
+
const baseY = this.height - this.padding;
|
|
158
|
+
this.areaPath = this.linePath + ' L ' + endX + ',' + baseY + ' L ' + startX + ',' + baseY + ' Z';
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
getPointY(value) {
|
|
162
|
+
if (this.maxValue === 0)
|
|
163
|
+
return this.height - this.padding;
|
|
164
|
+
const heightPercentage = value / this.maxValue;
|
|
165
|
+
return this.height - this.padding - (heightPercentage * this.chartHeight);
|
|
166
|
+
}
|
|
167
|
+
getPointX(index) {
|
|
168
|
+
if (this.data.length <= 1)
|
|
169
|
+
return this.padding;
|
|
170
|
+
const pointSpacing = this.chartWidth / (this.data.length - 1);
|
|
171
|
+
return this.padding + index * pointSpacing;
|
|
172
|
+
}
|
|
173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnLineChartComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
174
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SnLineChartComponent, isStandalone: true, selector: "sn-line-chart", inputs: { data: "data", color: "color", fillArea: "fillArea", height: "height" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-line-chart-svg\">\n\n <!-- Definitions for Area Gradient -->\n <defs>\n <linearGradient id=\"areaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"color\" stop-opacity=\"0.3\"></stop>\n <stop offset=\"100%\" [attr.stop-color]=\"color\" stop-opacity=\"0.0\"></stop>\n </linearGradient>\n </defs>\n\n <!-- Grid and Axes -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Filled Area Under Line -->\n @if(fillArea && data.length > 0) {\n <path [attr.d]=\"areaPath\" fill=\"url(#areaGradient)\" class=\"sn-line-area\"></path>\n }\n\n <!-- The Line Path -->\n @if(data.length > 0) {\n <path [attr.d]=\"linePath\" fill=\"none\" [attr.stroke]=\"color\" class=\"sn-line-path\"></path>\n }\n\n <!-- Interactive Data Points -->\n <g class=\"sn-chart-points\">\n @for(item of data; track item.label; let i = $index) {\n\n <g class=\"sn-point-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- Hover Hitbox (Larger invisible circle for better ux) -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" r=\"15\" fill=\"transparent\"></circle>\n\n <!-- Visual Point Circle -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" [attr.r]=\"hoveredIndex === i ? 6 : 4\"\n [attr.fill]=\"hoveredIndex === i ? '#fff' : color\" [attr.stroke]=\"color\" stroke-width=\"2\"\n class=\"sn-line-point\"></circle>\n\n <!-- Tooltip Value -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"getPointY(item.value) - 15\" class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n\n <!-- X Axis Label -->\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"height - padding + 20\" class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n </g>\n }\n </g>\n </svg>\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-container{position:relative;display:block;width:100%;overflow:hidden}.sn-line-chart-svg{display:block;overflow:visible;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.sn-chart-axis{stroke:#d1d5db;stroke-width:1}.sn-chart-grid-line{stroke:#e5e7eb;stroke-width:1;stroke-dasharray:4 4}.sn-chart-label{fill:#6b7280;font-size:.75rem;line-height:1rem;font-weight:500}.sn-chart-label-y{text-anchor:end}.sn-chart-label-x{text-anchor:middle}.sn-line-path{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;animation:drawLine 1s ease-out forwards}.sn-line-area{animation:fadeIn 1.2s ease-out forwards}.sn-point-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-line-point{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-tooltip-text{fill:#111827;font-size:.875rem;line-height:1.25rem;font-weight:600;text-anchor:middle;animation:fadeIn .2s ease-out forwards}@keyframes drawLine{0%{stroke-dasharray:1000;stroke-dashoffset:1000}to{stroke-dasharray:1000;stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
|
|
175
|
+
}
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnLineChartComponent, decorators: [{
|
|
177
|
+
type: Component,
|
|
178
|
+
args: [{ selector: 'sn-line-chart', standalone: true, imports: [CommonModule], template: "<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-line-chart-svg\">\n\n <!-- Definitions for Area Gradient -->\n <defs>\n <linearGradient id=\"areaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"color\" stop-opacity=\"0.3\"></stop>\n <stop offset=\"100%\" [attr.stop-color]=\"color\" stop-opacity=\"0.0\"></stop>\n </linearGradient>\n </defs>\n\n <!-- Grid and Axes -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Filled Area Under Line -->\n @if(fillArea && data.length > 0) {\n <path [attr.d]=\"areaPath\" fill=\"url(#areaGradient)\" class=\"sn-line-area\"></path>\n }\n\n <!-- The Line Path -->\n @if(data.length > 0) {\n <path [attr.d]=\"linePath\" fill=\"none\" [attr.stroke]=\"color\" class=\"sn-line-path\"></path>\n }\n\n <!-- Interactive Data Points -->\n <g class=\"sn-chart-points\">\n @for(item of data; track item.label; let i = $index) {\n\n <g class=\"sn-point-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- Hover Hitbox (Larger invisible circle for better ux) -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" r=\"15\" fill=\"transparent\"></circle>\n\n <!-- Visual Point Circle -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" [attr.r]=\"hoveredIndex === i ? 6 : 4\"\n [attr.fill]=\"hoveredIndex === i ? '#fff' : color\" [attr.stroke]=\"color\" stroke-width=\"2\"\n class=\"sn-line-point\"></circle>\n\n <!-- Tooltip Value -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"getPointY(item.value) - 15\" class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n\n <!-- X Axis Label -->\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"height - padding + 20\" class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n </g>\n }\n </g>\n </svg>\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position)}.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position)}.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored)}.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored)}.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored)}.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5)}.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6)}.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-container{position:relative;display:block;width:100%;overflow:hidden}.sn-line-chart-svg{display:block;overflow:visible;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.sn-chart-axis{stroke:#d1d5db;stroke-width:1}.sn-chart-grid-line{stroke:#e5e7eb;stroke-width:1;stroke-dasharray:4 4}.sn-chart-label{fill:#6b7280;font-size:.75rem;line-height:1rem;font-weight:500}.sn-chart-label-y{text-anchor:end}.sn-chart-label-x{text-anchor:middle}.sn-line-path{stroke-width:2;stroke-linejoin:round;stroke-linecap:round;animation:drawLine 1s ease-out forwards}.sn-line-area{animation:fadeIn 1.2s ease-out forwards}.sn-point-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-line-point{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-chart-tooltip-text{fill:#111827;font-size:.875rem;line-height:1.25rem;font-weight:600;text-anchor:middle;animation:fadeIn .2s ease-out forwards}@keyframes drawLine{0%{stroke-dasharray:1000;stroke-dashoffset:1000}to{stroke-dasharray:1000;stroke-dashoffset:0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1))}.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2)}.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"] }]
|
|
179
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { data: [{
|
|
180
|
+
type: Input
|
|
181
|
+
}], color: [{
|
|
182
|
+
type: Input
|
|
183
|
+
}], fillArea: [{
|
|
184
|
+
type: Input
|
|
185
|
+
}], height: [{
|
|
186
|
+
type: Input
|
|
187
|
+
}], onResize: [{
|
|
188
|
+
type: HostListener,
|
|
189
|
+
args: ['window:resize']
|
|
190
|
+
}] } });
|
|
191
|
+
|
|
192
|
+
const DEFAULT_COLORS = [
|
|
193
|
+
'#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',
|
|
194
|
+
'#ec4899', '#06b6d4', '#84cc16', '#f97316', '#6366f1',
|
|
195
|
+
];
|
|
196
|
+
class SnPieChartComponent {
|
|
197
|
+
constructor() {
|
|
198
|
+
this.data = [];
|
|
199
|
+
this.size = 250;
|
|
200
|
+
this.donut = false;
|
|
201
|
+
this.donutWidth = 60;
|
|
202
|
+
this.showLegend = true;
|
|
203
|
+
this.hoveredIndex = null;
|
|
204
|
+
this.slices = [];
|
|
205
|
+
this.total = 0;
|
|
206
|
+
}
|
|
207
|
+
get cx() { return this.size / 2; }
|
|
208
|
+
get cy() { return this.size / 2; }
|
|
209
|
+
get radius() { return this.size / 2 - 10; }
|
|
210
|
+
get innerRadius() { return this.donut ? this.radius - this.donutWidth : 0; }
|
|
211
|
+
ngOnChanges(changes) {
|
|
212
|
+
if (changes['data'] || changes['size'] || changes['donut'] || changes['donutWidth']) {
|
|
213
|
+
this.calculateSlices();
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
calculateSlices() {
|
|
217
|
+
this.total = this.data.reduce((sum, d) => sum + d.value, 0);
|
|
218
|
+
if (this.total === 0) {
|
|
219
|
+
this.slices = [];
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
let currentAngle = -90; // Start from top
|
|
223
|
+
this.slices = this.data.map((d, i) => {
|
|
224
|
+
const percentage = d.value / this.total;
|
|
225
|
+
const angle = percentage * 360;
|
|
226
|
+
const startAngle = currentAngle;
|
|
227
|
+
const endAngle = currentAngle + angle;
|
|
228
|
+
currentAngle = endAngle;
|
|
229
|
+
const color = d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
|
|
230
|
+
return {
|
|
231
|
+
path: this.describeArc(this.cx, this.cy, this.radius, this.innerRadius, startAngle, endAngle),
|
|
232
|
+
color,
|
|
233
|
+
label: d.label,
|
|
234
|
+
value: d.value,
|
|
235
|
+
percentage: Math.round(percentage * 100),
|
|
236
|
+
labelX: this.getLabelX(startAngle, endAngle),
|
|
237
|
+
labelY: this.getLabelY(startAngle, endAngle),
|
|
238
|
+
};
|
|
239
|
+
});
|
|
240
|
+
}
|
|
241
|
+
polarToCartesian(cx, cy, r, angleDeg) {
|
|
242
|
+
const rad = (angleDeg * Math.PI) / 180;
|
|
243
|
+
return {
|
|
244
|
+
x: cx + r * Math.cos(rad),
|
|
245
|
+
y: cy + r * Math.sin(rad),
|
|
246
|
+
};
|
|
247
|
+
}
|
|
248
|
+
describeArc(cx, cy, outerR, innerR, startAngle, endAngle) {
|
|
249
|
+
const outerStart = this.polarToCartesian(cx, cy, outerR, endAngle);
|
|
250
|
+
const outerEnd = this.polarToCartesian(cx, cy, outerR, startAngle);
|
|
251
|
+
const largeArc = endAngle - startAngle > 180 ? 1 : 0;
|
|
252
|
+
if (innerR > 0) {
|
|
253
|
+
// Donut path
|
|
254
|
+
const innerStart = this.polarToCartesian(cx, cy, innerR, endAngle);
|
|
255
|
+
const innerEnd = this.polarToCartesian(cx, cy, innerR, startAngle);
|
|
256
|
+
return [
|
|
257
|
+
'M', outerStart.x, outerStart.y,
|
|
258
|
+
'A', outerR, outerR, 0, largeArc, 0, outerEnd.x, outerEnd.y,
|
|
259
|
+
'L', innerEnd.x, innerEnd.y,
|
|
260
|
+
'A', innerR, innerR, 0, largeArc, 1, innerStart.x, innerStart.y,
|
|
261
|
+
'Z'
|
|
262
|
+
].join(' ');
|
|
263
|
+
}
|
|
264
|
+
else {
|
|
265
|
+
// Full pie path
|
|
266
|
+
return [
|
|
267
|
+
'M', outerStart.x, outerStart.y,
|
|
268
|
+
'A', outerR, outerR, 0, largeArc, 0, outerEnd.x, outerEnd.y,
|
|
269
|
+
'L', cx, cy,
|
|
270
|
+
'Z'
|
|
271
|
+
].join(' ');
|
|
272
|
+
}
|
|
273
|
+
}
|
|
274
|
+
getLabelX(startAngle, endAngle) {
|
|
275
|
+
const midAngle = (startAngle + endAngle) / 2;
|
|
276
|
+
const labelRadius = this.donut ? (this.radius + this.innerRadius) / 2 : this.radius * 0.65;
|
|
277
|
+
return this.polarToCartesian(this.cx, this.cy, labelRadius, midAngle).x;
|
|
278
|
+
}
|
|
279
|
+
getLabelY(startAngle, endAngle) {
|
|
280
|
+
const midAngle = (startAngle + endAngle) / 2;
|
|
281
|
+
const labelRadius = this.donut ? (this.radius + this.innerRadius) / 2 : this.radius * 0.65;
|
|
282
|
+
return this.polarToCartesian(this.cx, this.cy, labelRadius, midAngle).y;
|
|
283
|
+
}
|
|
284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SnPieChartComponent, isStandalone: true, selector: "sn-pie-chart", inputs: { data: "data", size: "size", donut: "donut", donutWidth: "donutWidth", showLegend: "showLegend" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sn-pie-chart-wrapper\">\n <svg [attr.width]=\"size\" [attr.height]=\"size\" class=\"sn-pie-chart-svg\">\n @for(slice of slices; track slice.label; let i = $index) {\n <g class=\"sn-pie-slice-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" class=\"sn-pie-slice\"\n [class.sn-pie-slice-hovered]=\"hoveredIndex === i\"></path>\n\n @if(slice.percentage >= 8) {\n <text [attr.x]=\"slice.labelX\" [attr.y]=\"slice.labelY\" class=\"sn-pie-label\">\n {{ slice.percentage }}%\n </text>\n }\n </g>\n }\n\n <!-- Center text for donut -->\n @if(donut) {\n <text [attr.x]=\"cx\" [attr.y]=\"cy - 6\" class=\"sn-pie-center-total-label\">Total</text>\n <text [attr.x]=\"cx\" [attr.y]=\"cy + 14\" class=\"sn-pie-center-total-value\">{{ total }}</text>\n }\n </svg>\n\n <!-- Legend -->\n @if(showLegend) {\n <div class=\"sn-pie-legend\">\n @for(slice of slices; track slice.label; let i = $index) {\n <div class=\"sn-pie-legend-item\" [class.sn-pie-legend-item-hovered]=\"hoveredIndex === i\"\n (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <span class=\"sn-pie-legend-dot\" [style.background-color]=\"slice.color\"></span>\n <span class=\"sn-pie-legend-label\">{{ slice.label }}</span>\n <span class=\"sn-pie-legend-value\">{{ slice.value }} ({{ slice.percentage }}%)</span>\n </div>\n }\n </div>\n }\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to) }.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to) }.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to) }.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position) }.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position) }.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position) }.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position) }.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position) }.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position) }.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored) }.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored) }.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored) }.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored) }.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5) }.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6) }.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-pie-chart-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}.sn-pie-chart-svg{display:block;overflow:visible}.sn-pie-slice-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-pie-slice{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);stroke:#fff;stroke-width:2}.sn-pie-slice-hovered{opacity:.8;transform:scale(1.03);transform-origin:center}.sn-pie-label{fill:#fff;font-size:.75rem;line-height:1rem;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}.sn-pie-center-total-label{fill:#9ca3af;font-size:.75rem;line-height:1rem;font-weight:500;text-anchor:middle}.sn-pie-center-total-value{fill:#1f2937;font-size:1.125rem;line-height:1.75rem;font-weight:700;text-anchor:middle}.sn-pie-legend{display:flex;flex-direction:column;gap:.5rem}.sn-pie-legend-item{display:flex;cursor:pointer;align-items:center;gap:.5rem;border-radius:.375rem;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.sn-pie-legend-item:hover,.sn-pie-legend-item-hovered{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-pie-legend-dot{height:.75rem;width:.75rem;flex-shrink:0;border-radius:9999px}.sn-pie-legend-label{font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.sn-pie-legend-value{margin-left:auto;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)) }.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2) }.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
|
|
286
|
+
}
|
|
287
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SnPieChartComponent, decorators: [{
|
|
288
|
+
type: Component,
|
|
289
|
+
args: [{ selector: 'sn-pie-chart', standalone: true, imports: [CommonModule], template: "<div class=\"sn-pie-chart-wrapper\">\n <svg [attr.width]=\"size\" [attr.height]=\"size\" class=\"sn-pie-chart-svg\">\n @for(slice of slices; track slice.label; let i = $index) {\n <g class=\"sn-pie-slice-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" class=\"sn-pie-slice\"\n [class.sn-pie-slice-hovered]=\"hoveredIndex === i\"></path>\n\n @if(slice.percentage >= 8) {\n <text [attr.x]=\"slice.labelX\" [attr.y]=\"slice.labelY\" class=\"sn-pie-label\">\n {{ slice.percentage }}%\n </text>\n }\n </g>\n }\n\n <!-- Center text for donut -->\n @if(donut) {\n <text [attr.x]=\"cx\" [attr.y]=\"cy - 6\" class=\"sn-pie-center-total-label\">Total</text>\n <text [attr.x]=\"cx\" [attr.y]=\"cy + 14\" class=\"sn-pie-center-total-value\">{{ total }}</text>\n }\n </svg>\n\n <!-- Legend -->\n @if(showLegend) {\n <div class=\"sn-pie-legend\">\n @for(slice of slices; track slice.label; let i = $index) {\n <div class=\"sn-pie-legend-item\" [class.sn-pie-legend-item-hovered]=\"hoveredIndex === i\"\n (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <span class=\"sn-pie-legend-dot\" [style.background-color]=\"slice.color\"></span>\n <span class=\"sn-pie-legend-label\">{{ slice.label }}</span>\n <span class=\"sn-pie-legend-value\">{{ slice.value }} ({{ slice.percentage }}%)</span>\n </div>\n }\n </div>\n }\n</div>", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{left:0;right:0}.inset-y-0{top:0;bottom:0}.-bottom-12{bottom:-3rem}.-left-20{left:-5rem}.-left-8{left:-2rem}.-right-12{right:-3rem}.-right-20{right:-5rem}.-right-40{right:-10rem}.-top-20{top:-5rem}.-top-40{top:-10rem}.-top-8{top:-2rem}.left-0{left:0}.right-0{right:0}.right-4{right:1rem}.top-0{top:0}.top-1\\/2{top:50%}.top-4{top:1rem}.top-40{top:10rem}.-z-10{z-index:-10}.z-10{z-index:10}.z-20{z-index:20}.mx-1{margin-left:.25rem;margin-right:.25rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.ml-auto{margin-left:auto}.mr-1\\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-4{margin-right:1rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-auto{margin-top:auto}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.h-0{height:0px}.h-1{height:.25rem}.h-10{height:2.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-\\[400px\\]{height:400px}.h-\\[600px\\]{height:600px}.h-full{height:100%}.h-screen{height:100vh}.min-h-\\[400px\\]{min-height:400px}.w-0{width:0px}.w-1{width:.25rem}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-72{width:18rem}.w-\\[400px\\]{width:400px}.w-\\[600px\\]{width:600px}.w-auto{width:auto}.w-full{width:100%}.w-px{width:1px}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-\\[1400px\\]{max-width:1400px}.max-w-lg{max-width:32rem}.max-w-xl{max-width:36rem}.flex-1{flex:1 1 0%}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-y-1\\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-default{cursor:default}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.select-none{-webkit-user-select:none;user-select:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.content-center{align-content:center}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1\\.5>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.375rem * var(--tw-space-x-reverse));margin-left:calc(.375rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-0\\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.125rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.125rem * var(--tw-space-y-reverse))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-\\[2rem\\]{border-radius:2rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-300\\/50{border-color:#fcd34d80}.border-gray-100{--tw-border-opacity: 1;border-color:rgb(243 244 246 / var(--tw-border-opacity, 1))}.border-indigo-100{--tw-border-opacity: 1;border-color:rgb(224 231 255 / var(--tw-border-opacity, 1))}.border-slate-100{--tw-border-opacity: 1;border-color:rgb(241 245 249 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\\/50{border-color:#e2e8f080}.border-slate-200\\/60{border-color:#e2e8f099}.border-slate-700{--tw-border-opacity: 1;border-color:rgb(51 65 85 / var(--tw-border-opacity, 1))}.border-slate-800{--tw-border-opacity: 1;border-color:rgb(30 41 59 / var(--tw-border-opacity, 1))}.border-white{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))}.border-white\\/20{border-color:#fff3}.border-white\\/40{border-color:#fff6}.bg-amber-400{--tw-bg-opacity: 1;background-color:rgb(251 191 36 / var(--tw-bg-opacity, 1))}.bg-emerald-400{--tw-bg-opacity: 1;background-color:rgb(52 211 153 / var(--tw-bg-opacity, 1))}.bg-indigo-400\\/30{background-color:#818cf84d}.bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.bg-indigo-50\\/80{background-color:#eef2ffcc}.bg-indigo-500{--tw-bg-opacity: 1;background-color:rgb(99 102 241 / var(--tw-bg-opacity, 1))}.bg-indigo-500\\/5{background-color:#6366f10d}.bg-indigo-600{--tw-bg-opacity: 1;background-color:rgb(79 70 229 / var(--tw-bg-opacity, 1))}.bg-rose-400{--tw-bg-opacity: 1;background-color:rgb(251 113 133 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-200{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.bg-slate-300{--tw-bg-opacity: 1;background-color:rgb(203 213 225 / var(--tw-bg-opacity, 1))}.bg-slate-50{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.bg-slate-50\\/30{background-color:#f8fafc4d}.bg-slate-50\\/50{background-color:#f8fafc80}.bg-slate-50\\/80{background-color:#f8fafccc}.bg-slate-800{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.bg-slate-900{--tw-bg-opacity: 1;background-color:rgb(15 23 42 / var(--tw-bg-opacity, 1))}.bg-transparent{background-color:transparent}.bg-violet-500\\/5{background-color:#8b5cf60d}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\\/10{background-color:#ffffff1a}.bg-white\\/20{background-color:#fff3}.bg-white\\/70{background-color:#ffffffb3}.bg-white\\/80{background-color:#fffc}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-200{--tw-gradient-from: #fde68a var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 230 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-50\\/80{--tw-gradient-from: rgb(238 242 255 / .8) var(--tw-gradient-from-position);--tw-gradient-to: rgb(238 242 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-500{--tw-gradient-from: #6366f1 var(--tw-gradient-from-position);--tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-indigo-600{--tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);--tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.from-slate-100{--tw-gradient-from: #f1f5f9 var(--tw-gradient-from-position);--tw-gradient-to: rgb(241 245 249 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) }.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to) }.via-purple-600{--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #9333ea var(--tw-gradient-via-position), var(--tw-gradient-to) }.via-white{--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #fff var(--tw-gradient-via-position), var(--tw-gradient-to) }.to-amber-100{--tw-gradient-to: #fef3c7 var(--tw-gradient-to-position) }.to-indigo-800{--tw-gradient-to: #3730a3 var(--tw-gradient-to-position) }.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position) }.to-slate-50{--tw-gradient-to: #f8fafc var(--tw-gradient-to-position) }.to-transparent{--tw-gradient-to: transparent var(--tw-gradient-to-position) }.to-violet-600{--tw-gradient-to: #7c3aed var(--tw-gradient-to-position) }.bg-clip-text{-webkit-background-clip:text;background-clip:text}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-2\\.5{padding:.625rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0{padding-top:0;padding-bottom:0}.py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3\\.5{padding-top:.875rem;padding-bottom:.875rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-0{padding-bottom:0}.pb-10{padding-bottom:2.5rem}.pb-2{padding-bottom:.5rem}.pl-3{padding-left:.75rem}.pl-9{padding-left:2.25rem}.pr-10{padding-right:2.5rem}.pr-2{padding-right:.5rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\\[10px\\]{font-size:10px}.text-\\[11px\\]{font-size:11px}.text-\\[9px\\]{font-size:9px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-300{--tw-text-opacity: 1;color:rgb(110 231 183 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-indigo-100{--tw-text-opacity: 1;color:rgb(224 231 255 / var(--tw-text-opacity, 1))}.text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.text-indigo-600{--tw-text-opacity: 1;color:rgb(79 70 229 / var(--tw-text-opacity, 1))}.text-indigo-700{--tw-text-opacity: 1;color:rgb(67 56 202 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-slate-100{--tw-text-opacity: 1;color:rgb(241 245 249 / var(--tw-text-opacity, 1))}.text-slate-300{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.text-slate-400{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.text-slate-500{--tw-text-opacity: 1;color:rgb(100 116 139 / var(--tw-text-opacity, 1))}.text-slate-600{--tw-text-opacity: 1;color:rgb(71 85 105 / var(--tw-text-opacity, 1))}.text-slate-700{--tw-text-opacity: 1;color:rgb(51 65 85 / var(--tw-text-opacity, 1))}.text-slate-800{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.text-slate-900{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.text-transparent{color:transparent}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-200{--tw-text-opacity: 1;color:rgb(254 240 138 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-70{opacity:.7}.opacity-\\[0\\.03\\]{opacity:.03}.mix-blend-multiply{mix-blend-mode:multiply}.shadow-\\[0_20px_40px_-15px_rgba\\(0\\,0\\,0\\,0\\.05\\)\\]{--tw-shadow: 0 20px 40px -15px rgba(0,0,0,.05);--tw-shadow-colored: 0 20px 40px -15px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[0_8px_32px_-12px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\]{--tw-shadow: 0 8px 32px -12px rgba(0,0,0,.08);--tw-shadow-colored: 0 8px 32px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-\\[4px_0_24px_-12px_rgba\\(0\\,0\\,0\\,0\\.1\\)\\]{--tw-shadow: 4px 0 24px -12px rgba(0,0,0,.1);--tw-shadow-colored: 4px 0 24px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-inner{--tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05);--tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-indigo-100{--tw-shadow-color: #e0e7ff;--tw-shadow: var(--tw-shadow-colored) }.shadow-indigo-500\\/20{--tw-shadow-color: rgb(99 102 241 / .2);--tw-shadow: var(--tw-shadow-colored) }.shadow-indigo-500\\/30{--tw-shadow-color: rgb(99 102 241 / .3);--tw-shadow: var(--tw-shadow-colored) }.shadow-slate-200\\/50{--tw-shadow-color: rgb(226 232 240 / .5);--tw-shadow: var(--tw-shadow-colored) }.outline{outline-style:solid}.ring-1{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-slate-200\\/50{--tw-ring-color: rgb(226 232 240 / .5) }.ring-slate-200\\/60{--tw-ring-color: rgb(226 232 240 / .6) }.blur-2xl{--tw-blur: blur(40px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-3xl{--tw-blur: blur(64px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.blur-md{--tw-blur: blur(12px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow-sm{--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / .05));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-3xl{--tw-backdrop-blur: blur(64px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-md{--tw-backdrop-blur: blur(12px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur: blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-500{transition-duration:.5s}.duration-700{transition-duration:.7s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.sn-pie-chart-wrapper{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}.sn-pie-chart-svg{display:block;overflow:visible}.sn-pie-slice-group{cursor:pointer;outline:2px solid transparent;outline-offset:2px}.sn-pie-slice{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s;transition-timing-function:cubic-bezier(0,0,.2,1);stroke:#fff;stroke-width:2}.sn-pie-slice-hovered{opacity:.8;transform:scale(1.03);transform-origin:center}.sn-pie-label{fill:#fff;font-size:.75rem;line-height:1rem;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none}.sn-pie-center-total-label{fill:#9ca3af;font-size:.75rem;line-height:1rem;font-weight:500;text-anchor:middle}.sn-pie-center-total-value{fill:#1f2937;font-size:1.125rem;line-height:1.75rem;font-weight:700;text-anchor:middle}.sn-pie-legend{display:flex;flex-direction:column;gap:.5rem}.sn-pie-legend-item{display:flex;cursor:pointer;align-items:center;gap:.5rem;border-radius:.375rem;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.sn-pie-legend-item:hover,.sn-pie-legend-item-hovered{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.sn-pie-legend-dot{height:.75rem;width:.75rem;flex-shrink:0;border-radius:9999px}.sn-pie-legend-label{font-weight:500;--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.sn-pie-legend-value{margin-left:auto;--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30 *::selection{background-color:#6366f14d}.selection\\:text-indigo-900 *::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.selection\\:bg-indigo-500\\/30::selection{background-color:#6366f14d}.selection\\:text-indigo-900::selection{--tw-text-opacity: 1;color:rgb(49 46 129 / var(--tw-text-opacity, 1))}.hover\\:-translate-y-1:hover{--tw-translate-y: -.25rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:scale-\\[1\\.01\\]:hover{--tw-scale-x: 1.01;--tw-scale-y: 1.01;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\\:border-indigo-200:hover{--tw-border-opacity: 1;border-color:rgb(199 210 254 / var(--tw-border-opacity, 1))}.hover\\:border-indigo-300:hover{--tw-border-opacity: 1;border-color:rgb(165 180 252 / var(--tw-border-opacity, 1))}.hover\\:bg-indigo-50:hover{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100:hover{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-100\\/80:hover{background-color:#f1f5f9cc}.hover\\:bg-slate-200\\/50:hover{background-color:#e2e8f080}.hover\\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-700:hover{--tw-bg-opacity: 1;background-color:rgb(51 65 85 / var(--tw-bg-opacity, 1))}.hover\\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\\:bg-white:hover{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.hover\\:bg-white\\/90:hover{background-color:#ffffffe6}.hover\\:text-indigo-400:hover{--tw-text-opacity: 1;color:rgb(129 140 248 / var(--tw-text-opacity, 1))}.hover\\:text-slate-300:hover{--tw-text-opacity: 1;color:rgb(203 213 225 / var(--tw-text-opacity, 1))}.hover\\:text-slate-800:hover{--tw-text-opacity: 1;color:rgb(30 41 59 / var(--tw-text-opacity, 1))}.hover\\:text-slate-900:hover{--tw-text-opacity: 1;color:rgb(15 23 42 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.hover\\:shadow-md:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\\:outline:hover{outline-style:solid}.focus\\:border-indigo-500:focus{--tw-border-opacity: 1;border-color:rgb(99 102 241 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\\:ring-indigo-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)) }.focus\\:ring-indigo-500\\/20:focus{--tw-ring-color: rgb(99 102 241 / .2) }.group\\/btn:hover .group-hover\\/btn\\:translate-x-1\\.5{--tw-translate-x: .375rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-110{--tw-scale-x: 1.1;--tw-scale-y: 1.1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:scale-150{--tw-scale-x: 1.5;--tw-scale-y: 1.5;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\\:bg-indigo-50{--tw-bg-opacity: 1;background-color:rgb(238 242 255 / var(--tw-bg-opacity, 1))}.group:hover .group-hover\\:bg-white\\/40{background-color:#fff6}.group:hover .group-hover\\:text-indigo-500{--tw-text-opacity: 1;color:rgb(99 102 241 / var(--tw-text-opacity, 1))}.group\\/code:hover .group-hover\\/code\\:opacity-100,.group:hover .group-hover\\:opacity-100{opacity:1}@media(min-width:640px){.sm\\:block{display:block}.sm\\:inline-block{display:inline-block}.sm\\:flex{display:flex}.sm\\:w-64{width:16rem}.sm\\:flex-row{flex-direction:row}.sm\\:items-center{align-items:center}.sm\\:p-8{padding:2rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:text-5xl{font-size:3rem;line-height:1}}@media(min-width:768px){.md\\:flex{display:flex}.md\\:p-16{padding:4rem}}@media(min-width:1024px){.lg\\:hidden{display:none}}@media(min-width:1280px){.xl\\:col-span-2{grid-column:span 2 / span 2}.xl\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}\n"] }]
|
|
290
|
+
}], propDecorators: { data: [{
|
|
291
|
+
type: Input
|
|
292
|
+
}], size: [{
|
|
293
|
+
type: Input
|
|
294
|
+
}], donut: [{
|
|
295
|
+
type: Input
|
|
296
|
+
}], donutWidth: [{
|
|
297
|
+
type: Input
|
|
298
|
+
}], showLegend: [{
|
|
299
|
+
type: Input
|
|
300
|
+
}] } });
|
|
301
|
+
|
|
302
|
+
/*
|
|
303
|
+
* Public API Surface of sn-charts
|
|
304
|
+
*/
|
|
305
|
+
|
|
306
|
+
/**
|
|
307
|
+
* Generated bundle index. Do not edit.
|
|
308
|
+
*/
|
|
309
|
+
|
|
310
|
+
export { SnBarChartComponent, SnLineChartComponent, SnPieChartComponent };
|
|
311
|
+
//# sourceMappingURL=sn-charts.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sn-charts.mjs","sources":["../../../projects/sn-charts/src/lib/sn-bar-chart.component.ts","../../../projects/sn-charts/src/lib/sn-bar-chart.component.html","../../../projects/sn-charts/src/lib/sn-line-chart.component.ts","../../../projects/sn-charts/src/lib/sn-line-chart.component.html","../../../projects/sn-charts/src/lib/sn-pie-chart.component.ts","../../../projects/sn-charts/src/lib/sn-pie-chart.component.html","../../../projects/sn-charts/src/public-api.ts","../../../projects/sn-charts/src/sn-charts.ts"],"sourcesContent":["import { Component, Input, OnChanges, SimpleChanges, HostListener, ElementRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface SnBarChartData {\n label: string;\n value: number;\n}\n\n@Component({\n selector: 'sn-bar-chart',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './sn-bar-chart.component.html',\n styleUrls: ['./sn-bar-chart.component.scss'],\n})\nexport class SnBarChartComponent implements OnChanges {\n /**\n * Array of data points to render.\n */\n @Input() data: SnBarChartData[] = [];\n\n /**\n * Primary color for the bars.\n */\n @Input() color: string = '#4f46e5';\n\n /**\n * Height of the SVG visualization (width is generally responsive 100%).\n */\n @Input() height: number = 300;\n\n width: number = 600; // Will be calculated actively via ResizeObserver or container width\n padding: number = 40;\n\n maxValue: number = 0;\n chartWidth: number = 0;\n chartHeight: number = 0;\n\n hoveredIndex: number | null = null;\n\n constructor(private el: ElementRef) { }\n\n ngOnInit() {\n this.updateDimensions();\n }\n\n @HostListener('window:resize')\n onResize() {\n this.updateDimensions();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] || changes['height']) {\n this.updateChart();\n }\n }\n\n ngAfterViewInit() {\n // Initial calculation based on actual container bounds\n setTimeout(() => this.updateDimensions(), 0);\n }\n\n updateDimensions() {\n if (this.el.nativeElement) {\n const parentWidth = this.el.nativeElement.parentElement?.clientWidth;\n if (parentWidth && parentWidth > 0) {\n this.width = parentWidth;\n }\n this.updateChart();\n }\n }\n\n updateChart(): void {\n const maxDataVal = Math.max(...this.data.map(d => d.value), 0);\n // Add 10% headroom to the top of the chart\n this.maxValue = maxDataVal > 0 ? maxDataVal * 1.1 : 10;\n\n // Calculate usable graphing area\n this.chartWidth = Math.max(0, this.width - this.padding * 2);\n this.chartHeight = Math.max(0, this.height - this.padding * 2);\n }\n\n getBarHeight(value: number): number {\n if (this.maxValue === 0) return 0;\n return (value / this.maxValue) * this.chartHeight;\n }\n\n getBarY(value: number): number {\n return this.height - this.padding - this.getBarHeight(value);\n }\n\n getBarX(index: number): number {\n if (this.data.length === 0) return 0;\n const barSpacing = this.chartWidth / this.data.length;\n // Add 10% spacing between bars\n return this.padding + index * barSpacing + (barSpacing * 0.1);\n }\n\n getBarWidth(): number {\n if (this.data.length === 0) return 0;\n const barSpacing = this.chartWidth / this.data.length;\n return barSpacing * 0.8;\n }\n}\n","<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-bar-chart-svg\">\n\n <!-- Y Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- X Axis Line -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <!-- Horizontal Grid Lines and Y-Axis Labels -->\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n <!-- Display rounded values for the quartiles -->\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Bars and X-Axis Labels -->\n <g class=\"sn-chart-bars\">\n @for(item of data; track item.label; let i = $index) {\n\n <!-- Interactive Bar Group -->\n <g class=\"sn-bar-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- The Bar -->\n <rect [attr.x]=\"getBarX(i)\" [attr.y]=\"getBarY(item.value)\" [attr.width]=\"getBarWidth()\"\n [attr.height]=\"getBarHeight(item.value)\" [attr.fill]=\"color\" class=\"sn-bar\"\n [class.sn-bar-hovered]=\"hoveredIndex === i\"></rect>\n\n <!-- Value Tooltip/Label (shows on hover) -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"getBarY(item.value) - 10\"\n class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n </g>\n\n <!-- X Axis Label under the bar -->\n <text [attr.x]=\"getBarX(i) + getBarWidth() / 2\" [attr.y]=\"height - padding + 20\"\n class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n }\n </g>\n </svg>\n</div>","import { Component, Input, OnChanges, SimpleChanges, HostListener, ElementRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface SnLineChartData {\n label: string;\n value: number;\n}\n\n@Component({\n selector: 'sn-line-chart',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './sn-line-chart.component.html',\n styleUrls: ['./sn-line-chart.component.scss'],\n})\nexport class SnLineChartComponent implements OnChanges {\n @Input() data: SnLineChartData[] = [];\n @Input() color: string = '#ec4899';\n @Input() fillArea: boolean = true;\n @Input() height: number = 300;\n\n width: number = 600;\n padding: number = 40;\n\n maxValue: number = 0;\n chartWidth: number = 0;\n chartHeight: number = 0;\n\n hoveredIndex: number | null = null;\n\n linePath: string = '';\n areaPath: string = '';\n\n constructor(private el: ElementRef) { }\n\n ngOnInit() {\n this.updateDimensions();\n }\n\n @HostListener('window:resize')\n onResize() {\n this.updateDimensions();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] || changes['height']) {\n this.updateChart();\n }\n }\n\n ngAfterViewInit() {\n setTimeout(() => this.updateDimensions(), 0);\n }\n\n updateDimensions() {\n if (this.el.nativeElement) {\n const parentWidth = this.el.nativeElement.parentElement?.clientWidth;\n if (parentWidth && parentWidth > 0) {\n this.width = parentWidth;\n }\n this.updateChart();\n }\n }\n\n updateChart(): void {\n const maxDataVal = Math.max(...this.data.map(d => d.value), 0);\n this.maxValue = maxDataVal > 0 ? maxDataVal * 1.1 : 10;\n\n this.chartWidth = Math.max(0, this.width - this.padding * 2);\n this.chartHeight = Math.max(0, this.height - this.padding * 2);\n\n this.generatePaths();\n }\n\n generatePaths() {\n if (this.data.length === 0) {\n this.linePath = '';\n this.areaPath = '';\n return;\n }\n\n const points = this.data.map((d, i) => {\n return this.getPointX(i) + ',' + this.getPointY(d.value);\n });\n this.linePath = 'M ' + points.join(' L ');\n\n if (this.fillArea) {\n const startX = this.getPointX(0);\n const endX = this.getPointX(this.data.length - 1);\n const baseY = this.height - this.padding;\n this.areaPath = this.linePath + ' L ' + endX + ',' + baseY + ' L ' + startX + ',' + baseY + ' Z';\n }\n }\n\n getPointY(value: number): number {\n if (this.maxValue === 0) return this.height - this.padding;\n const heightPercentage = value / this.maxValue;\n return this.height - this.padding - (heightPercentage * this.chartHeight);\n }\n\n getPointX(index: number): number {\n if (this.data.length <= 1) return this.padding;\n const pointSpacing = this.chartWidth / (this.data.length - 1);\n return this.padding + index * pointSpacing;\n }\n}\n","<div class=\"sn-chart-container\" [style.height.px]=\"height\">\n <svg [attr.width]=\"width\" [attr.height]=\"height\" class=\"sn-line-chart-svg\">\n\n <!-- Definitions for Area Gradient -->\n <defs>\n <linearGradient id=\"areaGradient\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"color\" stop-opacity=\"0.3\"></stop>\n <stop offset=\"100%\" [attr.stop-color]=\"color\" stop-opacity=\"0.0\"></stop>\n </linearGradient>\n </defs>\n\n <!-- Grid and Axes -->\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding\" [attr.x2]=\"padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n <line [attr.x1]=\"padding\" [attr.y1]=\"height - padding\" [attr.x2]=\"width - padding\" [attr.y2]=\"height - padding\"\n class=\"sn-chart-axis\" />\n\n <g class=\"sn-chart-grid\">\n @for(i of [0, 1, 2, 3, 4]; track i) {\n <line [attr.x1]=\"padding\" [attr.y1]=\"padding + i * (chartHeight / 4)\" [attr.x2]=\"width - padding\"\n [attr.y2]=\"padding + i * (chartHeight / 4)\" class=\"sn-chart-grid-line\" />\n <text [attr.x]=\"padding - 10\" [attr.y]=\"padding + i * (chartHeight / 4) + 4\"\n class=\"sn-chart-label sn-chart-label-y\">\n {{ (maxValue - (i * maxValue / 4)) | number:'1.0-0' }}\n </text>\n }\n </g>\n\n <!-- Filled Area Under Line -->\n @if(fillArea && data.length > 0) {\n <path [attr.d]=\"areaPath\" fill=\"url(#areaGradient)\" class=\"sn-line-area\"></path>\n }\n\n <!-- The Line Path -->\n @if(data.length > 0) {\n <path [attr.d]=\"linePath\" fill=\"none\" [attr.stroke]=\"color\" class=\"sn-line-path\"></path>\n }\n\n <!-- Interactive Data Points -->\n <g class=\"sn-chart-points\">\n @for(item of data; track item.label; let i = $index) {\n\n <g class=\"sn-point-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <!-- Hover Hitbox (Larger invisible circle for better ux) -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" r=\"15\" fill=\"transparent\"></circle>\n\n <!-- Visual Point Circle -->\n <circle [attr.cx]=\"getPointX(i)\" [attr.cy]=\"getPointY(item.value)\" [attr.r]=\"hoveredIndex === i ? 6 : 4\"\n [attr.fill]=\"hoveredIndex === i ? '#fff' : color\" [attr.stroke]=\"color\" stroke-width=\"2\"\n class=\"sn-line-point\"></circle>\n\n <!-- Tooltip Value -->\n @if(hoveredIndex === i) {\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"getPointY(item.value) - 15\" class=\"sn-chart-tooltip-text\">\n {{ item.value }}\n </text>\n }\n\n <!-- X Axis Label -->\n <text [attr.x]=\"getPointX(i)\" [attr.y]=\"height - padding + 20\" class=\"sn-chart-label sn-chart-label-x\">\n {{ item.label }}\n </text>\n </g>\n }\n </g>\n </svg>\n</div>","import { Component, Input, OnChanges, SimpleChanges, ElementRef, HostListener } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nexport interface SnPieChartData {\n label: string;\n value: number;\n color?: string;\n}\n\nconst DEFAULT_COLORS = [\n '#3b82f6', '#ef4444', '#10b981', '#f59e0b', '#8b5cf6',\n '#ec4899', '#06b6d4', '#84cc16', '#f97316', '#6366f1',\n];\n\n@Component({\n selector: 'sn-pie-chart',\n standalone: true,\n imports: [CommonModule],\n templateUrl: './sn-pie-chart.component.html',\n styleUrls: ['./sn-pie-chart.component.scss'],\n})\nexport class SnPieChartComponent implements OnChanges {\n @Input() data: SnPieChartData[] = [];\n @Input() size: number = 250;\n @Input() donut: boolean = false;\n @Input() donutWidth: number = 60;\n @Input() showLegend: boolean = true;\n\n hoveredIndex: number | null = null;\n slices: PieSlice[] = [];\n total: number = 0;\n\n get cx(): number { return this.size / 2; }\n get cy(): number { return this.size / 2; }\n get radius(): number { return this.size / 2 - 10; }\n get innerRadius(): number { return this.donut ? this.radius - this.donutWidth : 0; }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes['data'] || changes['size'] || changes['donut'] || changes['donutWidth']) {\n this.calculateSlices();\n }\n }\n\n calculateSlices(): void {\n this.total = this.data.reduce((sum, d) => sum + d.value, 0);\n if (this.total === 0) {\n this.slices = [];\n return;\n }\n\n let currentAngle = -90; // Start from top\n this.slices = this.data.map((d, i) => {\n const percentage = d.value / this.total;\n const angle = percentage * 360;\n const startAngle = currentAngle;\n const endAngle = currentAngle + angle;\n currentAngle = endAngle;\n\n const color = d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];\n\n return {\n path: this.describeArc(this.cx, this.cy, this.radius, this.innerRadius, startAngle, endAngle),\n color,\n label: d.label,\n value: d.value,\n percentage: Math.round(percentage * 100),\n labelX: this.getLabelX(startAngle, endAngle),\n labelY: this.getLabelY(startAngle, endAngle),\n };\n });\n }\n\n private polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {\n const rad = (angleDeg * Math.PI) / 180;\n return {\n x: cx + r * Math.cos(rad),\n y: cy + r * Math.sin(rad),\n };\n }\n\n private describeArc(cx: number, cy: number, outerR: number, innerR: number, startAngle: number, endAngle: number): string {\n const outerStart = this.polarToCartesian(cx, cy, outerR, endAngle);\n const outerEnd = this.polarToCartesian(cx, cy, outerR, startAngle);\n const largeArc = endAngle - startAngle > 180 ? 1 : 0;\n\n if (innerR > 0) {\n // Donut path\n const innerStart = this.polarToCartesian(cx, cy, innerR, endAngle);\n const innerEnd = this.polarToCartesian(cx, cy, innerR, startAngle);\n return [\n 'M', outerStart.x, outerStart.y,\n 'A', outerR, outerR, 0, largeArc, 0, outerEnd.x, outerEnd.y,\n 'L', innerEnd.x, innerEnd.y,\n 'A', innerR, innerR, 0, largeArc, 1, innerStart.x, innerStart.y,\n 'Z'\n ].join(' ');\n } else {\n // Full pie path\n return [\n 'M', outerStart.x, outerStart.y,\n 'A', outerR, outerR, 0, largeArc, 0, outerEnd.x, outerEnd.y,\n 'L', cx, cy,\n 'Z'\n ].join(' ');\n }\n }\n\n private getLabelX(startAngle: number, endAngle: number): number {\n const midAngle = (startAngle + endAngle) / 2;\n const labelRadius = this.donut ? (this.radius + this.innerRadius) / 2 : this.radius * 0.65;\n return this.polarToCartesian(this.cx, this.cy, labelRadius, midAngle).x;\n }\n\n private getLabelY(startAngle: number, endAngle: number): number {\n const midAngle = (startAngle + endAngle) / 2;\n const labelRadius = this.donut ? (this.radius + this.innerRadius) / 2 : this.radius * 0.65;\n return this.polarToCartesian(this.cx, this.cy, labelRadius, midAngle).y;\n }\n}\n\ninterface PieSlice {\n path: string;\n color: string;\n label: string;\n value: number;\n percentage: number;\n labelX: number;\n labelY: number;\n}\n","<div class=\"sn-pie-chart-wrapper\">\n <svg [attr.width]=\"size\" [attr.height]=\"size\" class=\"sn-pie-chart-svg\">\n @for(slice of slices; track slice.label; let i = $index) {\n <g class=\"sn-pie-slice-group\" (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <path [attr.d]=\"slice.path\" [attr.fill]=\"slice.color\" class=\"sn-pie-slice\"\n [class.sn-pie-slice-hovered]=\"hoveredIndex === i\"></path>\n\n @if(slice.percentage >= 8) {\n <text [attr.x]=\"slice.labelX\" [attr.y]=\"slice.labelY\" class=\"sn-pie-label\">\n {{ slice.percentage }}%\n </text>\n }\n </g>\n }\n\n <!-- Center text for donut -->\n @if(donut) {\n <text [attr.x]=\"cx\" [attr.y]=\"cy - 6\" class=\"sn-pie-center-total-label\">Total</text>\n <text [attr.x]=\"cx\" [attr.y]=\"cy + 14\" class=\"sn-pie-center-total-value\">{{ total }}</text>\n }\n </svg>\n\n <!-- Legend -->\n @if(showLegend) {\n <div class=\"sn-pie-legend\">\n @for(slice of slices; track slice.label; let i = $index) {\n <div class=\"sn-pie-legend-item\" [class.sn-pie-legend-item-hovered]=\"hoveredIndex === i\"\n (mouseenter)=\"hoveredIndex = i\" (mouseleave)=\"hoveredIndex = null\">\n <span class=\"sn-pie-legend-dot\" [style.background-color]=\"slice.color\"></span>\n <span class=\"sn-pie-legend-label\">{{ slice.label }}</span>\n <span class=\"sn-pie-legend-value\">{{ slice.value }} ({{ slice.percentage }}%)</span>\n </div>\n }\n </div>\n }\n</div>","/*\n * Public API Surface of sn-charts\n */\n\nexport * from './lib/sn-bar-chart.component';\nexport * from './lib/sn-line-chart.component';\nexport * from './lib/sn-pie-chart.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAea,mBAAmB,CAAA;AAyB5B,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;AAxBtB;;AAEG;QACM,IAAA,CAAA,IAAI,GAAqB,EAAE;AAEpC;;AAEG;QACM,IAAA,CAAA,KAAK,GAAW,SAAS;AAElC;;AAEG;QACM,IAAA,CAAA,MAAM,GAAW,GAAG;AAE7B,QAAA,IAAA,CAAA,KAAK,GAAW,GAAG,CAAC;QACpB,IAAA,CAAA,OAAO,GAAW,EAAE;QAEpB,IAAA,CAAA,QAAQ,GAAW,CAAC;QACpB,IAAA,CAAA,UAAU,GAAW,CAAC;QACtB,IAAA,CAAA,WAAW,GAAW,CAAC;QAEvB,IAAA,CAAA,YAAY,GAAkB,IAAI;IAEI;IAEtC,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;IAC3B;IAGA,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;IAC3B;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE;QACtB;IACJ;IAEA,eAAe,GAAA;;QAEX,UAAU,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAChD;IAEA,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;YACvB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,EAAE,WAAW;AACpE,YAAA,IAAI,WAAW,IAAI,WAAW,GAAG,CAAC,EAAE;AAChC,gBAAA,IAAI,CAAC,KAAK,GAAG,WAAW;YAC5B;YACA,IAAI,CAAC,WAAW,EAAE;QACtB;IACJ;IAEA,WAAW,GAAA;QACP,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;;AAE9D,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,GAAG,GAAG,EAAE;;AAGtD,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;AAC5D,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IAClE;AAEA,IAAA,YAAY,CAAC,KAAa,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QACjC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,WAAW;IACrD;AAEA,IAAA,OAAO,CAAC,KAAa,EAAA;AACjB,QAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;IAChE;AAEA,IAAA,OAAO,CAAC,KAAa,EAAA;AACjB,QAAA,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;;AAErD,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,GAAG,UAAU,IAAI,UAAU,GAAG,GAAG,CAAC;IACjE;IAEA,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;AAAE,YAAA,OAAO,CAAC;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;QACrD,OAAO,UAAU,GAAG,GAAG;IAC3B;8GAvFS,mBAAmB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfhC,m/EAoDM,EAAA,MAAA,EAAA,CAAA,sr7BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDzCQ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIb,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,m/EAAA,EAAA,MAAA,EAAA,CAAA,sr7BAAA,CAAA,EAAA;;sBAQtB;;sBAKA;;sBAKA;;sBAiBA,YAAY;uBAAC,eAAe;;;ME/BpB,oBAAoB,CAAA;AAkB7B,IAAA,WAAA,CAAoB,EAAc,EAAA;QAAd,IAAA,CAAA,EAAE,GAAF,EAAE;QAjBb,IAAA,CAAA,IAAI,GAAsB,EAAE;QAC5B,IAAA,CAAA,KAAK,GAAW,SAAS;QACzB,IAAA,CAAA,QAAQ,GAAY,IAAI;QACxB,IAAA,CAAA,MAAM,GAAW,GAAG;QAE7B,IAAA,CAAA,KAAK,GAAW,GAAG;QACnB,IAAA,CAAA,OAAO,GAAW,EAAE;QAEpB,IAAA,CAAA,QAAQ,GAAW,CAAC;QACpB,IAAA,CAAA,UAAU,GAAW,CAAC;QACtB,IAAA,CAAA,WAAW,GAAW,CAAC;QAEvB,IAAA,CAAA,YAAY,GAAkB,IAAI;QAElC,IAAA,CAAA,QAAQ,GAAW,EAAE;QACrB,IAAA,CAAA,QAAQ,GAAW,EAAE;IAEiB;IAEtC,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;IAC3B;IAGA,QAAQ,GAAA;QACJ,IAAI,CAAC,gBAAgB,EAAE;IAC3B;AAEA,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACtC,IAAI,CAAC,WAAW,EAAE;QACtB;IACJ;IAEA,eAAe,GAAA;QACX,UAAU,CAAC,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAE,CAAC,CAAC;IAChD;IAEA,gBAAgB,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE;YACvB,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,aAAa,EAAE,WAAW;AACpE,YAAA,IAAI,WAAW,IAAI,WAAW,GAAG,CAAC,EAAE;AAChC,gBAAA,IAAI,CAAC,KAAK,GAAG,WAAW;YAC5B;YACA,IAAI,CAAC,WAAW,EAAE;QACtB;IACJ;IAEA,WAAW,GAAA;QACP,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;AAC9D,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,CAAC,GAAG,UAAU,GAAG,GAAG,GAAG,EAAE;AAEtD,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;AAC5D,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;QAE9D,IAAI,CAAC,aAAa,EAAE;IACxB;IAEA,aAAa,GAAA;QACT,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACxB,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;AAClB,YAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;YAClB;QACJ;AAEA,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAClC,YAAA,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5D,QAAA,CAAC,CAAC;QACF,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC;AAEzC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;AAChC,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;YACjD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO;YACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,KAAK,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI;QACpG;IACJ;AAEA,IAAA,SAAS,CAAC,KAAa,EAAA;AACnB,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC;AAAE,YAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO;AAC1D,QAAA,MAAM,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAC,QAAQ;AAC9C,QAAA,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,IAAI,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;IAC7E;AAEA,IAAA,SAAS,CAAC,KAAa,EAAA;AACnB,QAAA,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC;YAAE,OAAO,IAAI,CAAC,OAAO;AAC9C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;AAC7D,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,KAAK,GAAG,YAAY;IAC9C;8GAzFS,oBAAoB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,eAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECfjC,2rGAkEM,EAAA,MAAA,EAAA,CAAA,827BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDvDQ,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIb,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAPhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,EAAA,UAAA,EACb,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,2rGAAA,EAAA,MAAA,EAAA,CAAA,827BAAA,CAAA,EAAA;;sBAKtB;;sBACA;;sBACA;;sBACA;;sBAoBA,YAAY;uBAAC,eAAe;;;AE9BjC,MAAM,cAAc,GAAG;AACnB,IAAA,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;AACrD,IAAA,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS;CACxD;MASY,mBAAmB,CAAA;AAPhC,IAAA,WAAA,GAAA;QAQa,IAAA,CAAA,IAAI,GAAqB,EAAE;QAC3B,IAAA,CAAA,IAAI,GAAW,GAAG;QAClB,IAAA,CAAA,KAAK,GAAY,KAAK;QACtB,IAAA,CAAA,UAAU,GAAW,EAAE;QACvB,IAAA,CAAA,UAAU,GAAY,IAAI;QAEnC,IAAA,CAAA,YAAY,GAAkB,IAAI;QAClC,IAAA,CAAA,MAAM,GAAe,EAAE;QACvB,IAAA,CAAA,KAAK,GAAW,CAAC;AAwFpB,IAAA;IAtFG,IAAI,EAAE,GAAA,EAAa,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACzC,IAAI,EAAE,GAAA,EAAa,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;AACzC,IAAA,IAAI,MAAM,GAAA,EAAa,OAAO,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IAClD,IAAI,WAAW,KAAa,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC;AAEnF,IAAA,WAAW,CAAC,OAAsB,EAAA;QAC9B,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,YAAY,CAAC,EAAE;YACjF,IAAI,CAAC,eAAe,EAAE;QAC1B;IACJ;IAEA,eAAe,GAAA;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC;AAC3D,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,EAAE;YAChB;QACJ;AAEA,QAAA,IAAI,YAAY,GAAG,CAAC,EAAE,CAAC;AACvB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;YACjC,MAAM,UAAU,GAAG,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;AACvC,YAAA,MAAM,KAAK,GAAG,UAAU,GAAG,GAAG;YAC9B,MAAM,UAAU,GAAG,YAAY;AAC/B,YAAA,MAAM,QAAQ,GAAG,YAAY,GAAG,KAAK;YACrC,YAAY,GAAG,QAAQ;AAEvB,YAAA,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;YAElE,OAAO;gBACH,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,UAAU,EAAE,QAAQ,CAAC;gBAC7F,KAAK;gBACL,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,KAAK,EAAE,CAAC,CAAC,KAAK;gBACd,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,CAAC;gBACxC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC;gBAC5C,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC;aAC/C;AACL,QAAA,CAAC,CAAC;IACN;AAEQ,IAAA,gBAAgB,CAAC,EAAU,EAAE,EAAU,EAAE,CAAS,EAAE,QAAgB,EAAA;QACxE,MAAM,GAAG,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,IAAI,GAAG;QACtC,OAAO;YACH,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;YACzB,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;SAC5B;IACL;IAEQ,WAAW,CAAC,EAAU,EAAE,EAAU,EAAE,MAAc,EAAE,MAAc,EAAE,UAAkB,EAAE,QAAgB,EAAA;AAC5G,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC;AAClE,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC;AAClE,QAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;AAEpD,QAAA,IAAI,MAAM,GAAG,CAAC,EAAE;;AAEZ,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC;AAClE,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC;YAClE,OAAO;AACH,gBAAA,GAAG,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAC/B,gBAAA,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC3D,gBAAA,GAAG,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAC3B,gBAAA,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;gBAC/D;AACH,aAAA,CAAC,IAAI,CAAC,GAAG,CAAC;QACf;aAAO;;YAEH,OAAO;AACH,gBAAA,GAAG,EAAE,UAAU,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAC/B,gBAAA,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;gBAC3D,GAAG,EAAE,EAAE,EAAE,EAAE;gBACX;AACH,aAAA,CAAC,IAAI,CAAC,GAAG,CAAC;QACf;IACJ;IAEQ,SAAS,CAAC,UAAkB,EAAE,QAAgB,EAAA;QAClD,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC;QAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI;AAC1F,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC3E;IAEQ,SAAS,CAAC,UAAkB,EAAE,QAAgB,EAAA;QAClD,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC;QAC5C,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI;AAC1F,QAAA,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAC3E;8GAhGS,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAnB,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,UAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBhC,moDAmCM,EAAA,MAAA,EAAA,CAAA,wy8BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDlBQ,YAAY,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIb,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAP/B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EACZ,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EAAA,moDAAA,EAAA,MAAA,EAAA,CAAA,wy8BAAA,CAAA,EAAA;;sBAKtB;;sBACA;;sBACA;;sBACA;;sBACA;;;AE1BL;;AAEG;;ACFH;;AAEG;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "sn-charts",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^21.2.0",
|
|
6
|
+
"@angular/core": "^21.2.0"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"tslib": "^2.3.0"
|
|
10
|
+
},
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"module": "fesm2022/sn-charts.mjs",
|
|
13
|
+
"typings": "types/sn-charts.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
"./package.json": {
|
|
16
|
+
"default": "./package.json"
|
|
17
|
+
},
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./types/sn-charts.d.ts",
|
|
20
|
+
"default": "./fesm2022/sn-charts.mjs"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnChanges, ElementRef, SimpleChanges } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
interface SnBarChartData {
|
|
5
|
+
label: string;
|
|
6
|
+
value: number;
|
|
7
|
+
}
|
|
8
|
+
declare class SnBarChartComponent implements OnChanges {
|
|
9
|
+
private el;
|
|
10
|
+
/**
|
|
11
|
+
* Array of data points to render.
|
|
12
|
+
*/
|
|
13
|
+
data: SnBarChartData[];
|
|
14
|
+
/**
|
|
15
|
+
* Primary color for the bars.
|
|
16
|
+
*/
|
|
17
|
+
color: string;
|
|
18
|
+
/**
|
|
19
|
+
* Height of the SVG visualization (width is generally responsive 100%).
|
|
20
|
+
*/
|
|
21
|
+
height: number;
|
|
22
|
+
width: number;
|
|
23
|
+
padding: number;
|
|
24
|
+
maxValue: number;
|
|
25
|
+
chartWidth: number;
|
|
26
|
+
chartHeight: number;
|
|
27
|
+
hoveredIndex: number | null;
|
|
28
|
+
constructor(el: ElementRef);
|
|
29
|
+
ngOnInit(): void;
|
|
30
|
+
onResize(): void;
|
|
31
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
32
|
+
ngAfterViewInit(): void;
|
|
33
|
+
updateDimensions(): void;
|
|
34
|
+
updateChart(): void;
|
|
35
|
+
getBarHeight(value: number): number;
|
|
36
|
+
getBarY(value: number): number;
|
|
37
|
+
getBarX(index: number): number;
|
|
38
|
+
getBarWidth(): number;
|
|
39
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SnBarChartComponent, never>;
|
|
40
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SnBarChartComponent, "sn-bar-chart", never, { "data": { "alias": "data"; "required": false; }; "color": { "alias": "color"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
interface SnLineChartData {
|
|
44
|
+
label: string;
|
|
45
|
+
value: number;
|
|
46
|
+
}
|
|
47
|
+
declare class SnLineChartComponent implements OnChanges {
|
|
48
|
+
private el;
|
|
49
|
+
data: SnLineChartData[];
|
|
50
|
+
color: string;
|
|
51
|
+
fillArea: boolean;
|
|
52
|
+
height: number;
|
|
53
|
+
width: number;
|
|
54
|
+
padding: number;
|
|
55
|
+
maxValue: number;
|
|
56
|
+
chartWidth: number;
|
|
57
|
+
chartHeight: number;
|
|
58
|
+
hoveredIndex: number | null;
|
|
59
|
+
linePath: string;
|
|
60
|
+
areaPath: string;
|
|
61
|
+
constructor(el: ElementRef);
|
|
62
|
+
ngOnInit(): void;
|
|
63
|
+
onResize(): void;
|
|
64
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
65
|
+
ngAfterViewInit(): void;
|
|
66
|
+
updateDimensions(): void;
|
|
67
|
+
updateChart(): void;
|
|
68
|
+
generatePaths(): void;
|
|
69
|
+
getPointY(value: number): number;
|
|
70
|
+
getPointX(index: number): number;
|
|
71
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SnLineChartComponent, never>;
|
|
72
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SnLineChartComponent, "sn-line-chart", never, { "data": { "alias": "data"; "required": false; }; "color": { "alias": "color"; "required": false; }; "fillArea": { "alias": "fillArea"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
interface SnPieChartData {
|
|
76
|
+
label: string;
|
|
77
|
+
value: number;
|
|
78
|
+
color?: string;
|
|
79
|
+
}
|
|
80
|
+
declare class SnPieChartComponent implements OnChanges {
|
|
81
|
+
data: SnPieChartData[];
|
|
82
|
+
size: number;
|
|
83
|
+
donut: boolean;
|
|
84
|
+
donutWidth: number;
|
|
85
|
+
showLegend: boolean;
|
|
86
|
+
hoveredIndex: number | null;
|
|
87
|
+
slices: PieSlice[];
|
|
88
|
+
total: number;
|
|
89
|
+
get cx(): number;
|
|
90
|
+
get cy(): number;
|
|
91
|
+
get radius(): number;
|
|
92
|
+
get innerRadius(): number;
|
|
93
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
94
|
+
calculateSlices(): void;
|
|
95
|
+
private polarToCartesian;
|
|
96
|
+
private describeArc;
|
|
97
|
+
private getLabelX;
|
|
98
|
+
private getLabelY;
|
|
99
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SnPieChartComponent, never>;
|
|
100
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SnPieChartComponent, "sn-pie-chart", never, { "data": { "alias": "data"; "required": false; }; "size": { "alias": "size"; "required": false; }; "donut": { "alias": "donut"; "required": false; }; "donutWidth": { "alias": "donutWidth"; "required": false; }; "showLegend": { "alias": "showLegend"; "required": false; }; }, {}, never, never, true, never>;
|
|
101
|
+
}
|
|
102
|
+
interface PieSlice {
|
|
103
|
+
path: string;
|
|
104
|
+
color: string;
|
|
105
|
+
label: string;
|
|
106
|
+
value: number;
|
|
107
|
+
percentage: number;
|
|
108
|
+
labelX: number;
|
|
109
|
+
labelY: number;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
export { SnBarChartComponent, SnLineChartComponent, SnPieChartComponent };
|
|
113
|
+
export type { SnBarChartData, SnLineChartData, SnPieChartData };
|