@taiga-ui/addon-charts 2.27.1 → 2.28.0

package/fesm5/taiga-ui-addon-charts-components-arc-chart.js

@@ -0,0 +1,131 @@
+import { __decorate, __param } from 'tslib';
+import { Inject, ChangeDetectorRef, Input, HostBinding, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { tuiDefaultProp, TuiRepeatTimesModule } from '@taiga-ui/cdk';
+
+// 3/4 with 1% safety offset
+var ARC = 0.76;
+var SIZE = {
+    m: 9,
+    l: 11,
+    xl: 16,
+};
+var WIDTH = {
+    m: 0.25,
+    l: 0.375,
+    xl: 0.5625,
+};
+var GAP = {
+    m: 0.125,
+    l: 0.1875,
+    xl: 0.25,
+};
+var TuiArcChartComponent = /** @class */ (function () {
+    function TuiArcChartComponent(sanitizer, changeDetectorRef) {
+        var _this = this;
+        this.sanitizer = sanitizer;
+        this.value = [];
+        this.size = 'm';
+        this.max = 100;
+        this.minLabel = '0%';
+        this.maxLabel = '100%';
+        this.initialized = false;
+        // So initial animation works
+        setTimeout(function () {
+            _this.initialized = true;
+            changeDetectorRef.markForCheck();
+        });
+    }
+    Object.defineProperty(TuiArcChartComponent.prototype, "width", {
+        get: function () {
+            return SIZE[this.size];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(TuiArcChartComponent.prototype, "strokeWidth", {
+        get: function () {
+            return WIDTH[this.size];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    TuiArcChartComponent.prototype.getInset = function (index) {
+        return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);
+    };
+    TuiArcChartComponent.prototype.getDiameter = function (index) {
+        return SIZE[this.size] - 2 * this.getInset(index);
+    };
+    TuiArcChartComponent.prototype.getLength = function (index) {
+        return Math.PI * this.getDiameter(index) * ARC;
+    };
+    TuiArcChartComponent.prototype.getOffset = function (index) {
+        return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));
+    };
+    TuiArcChartComponent.prototype.getColor = function (index) {
+        return this.sanitizer.bypassSecurityTrustStyle("var(--tui-chart-" + index + ", var(--tui-support-0" + (index + 1) + "))");
+    };
+    TuiArcChartComponent.ctorParameters = function () { return [
+        { type: DomSanitizer, decorators: [{ type: Inject, args: [DomSanitizer,] }] },
+        { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
+    ]; };
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiArcChartComponent.prototype, "value", void 0);
+    __decorate([
+        Input(),
+        HostBinding('attr.data-size'),
+        tuiDefaultProp()
+    ], TuiArcChartComponent.prototype, "size", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiArcChartComponent.prototype, "max", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiArcChartComponent.prototype, "minLabel", void 0);
+    __decorate([
+        Input(),
+        tuiDefaultProp()
+    ], TuiArcChartComponent.prototype, "maxLabel", void 0);
+    __decorate([
+        HostBinding('style.width.rem'),
+        HostBinding('style.height.rem')
+    ], TuiArcChartComponent.prototype, "width", null);
+    __decorate([
+        HostBinding('style.strokeWidth.rem')
+    ], TuiArcChartComponent.prototype, "strokeWidth", null);
+    TuiArcChartComponent = __decorate([
+        Component({
+            selector: 'tui-arc-chart',
+            template: "<svg\n    *tuiRepeatTimes=\"let index of value.length\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"-100 -100 200 200\"\n    focusable=\"false\"\n    class=\"t-svg\"\n    [style.top.em]=\"getInset(index)\"\n    [style.left.em]=\"getInset(index)\"\n    [style.width.em]=\"getDiameter(index)\"\n    [style.height.em]=\"getDiameter(index)\"\n>\n    <path\n        vector-effect=\"non-scaling-stroke\"\n        d=\"M -70 70 A 100 100 0 1 1 70 70\"\n    />\n    <path\n        vector-effect=\"non-scaling-stroke\"\n        d=\"M -70 70 A 100 100 0 1 1 70 70\"\n        class=\"t-value\"\n        [style.stroke]=\"getColor(index)\"\n        [style.strokeDasharray.em]=\"getLength(index)\"\n        [style.strokeDashoffset.em]=\"initialized ? getOffset(index) : getLength(index)\"\n    />\n</svg>\n<div class=\"t-content\">\n    <div class=\"t-wrapper\"><ng-content></ng-content></div>\n</div>\n<div class=\"t-percent\">\n    <span>{{minLabel}}</span>\n    <span>{{maxLabel}}</span>\n</div>\n",
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            styles: [":host{position:relative;display:block;flex-shrink:0}.t-svg{position:absolute;top:0;left:0;bottom:0;right:0;overflow:visible;fill:none;stroke:currentColor;stroke-linecap:round;color:var(--tui-secondary);font-size:1rem}.t-value{transition-property:stroke-dashoffset;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out}.t-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center;color:var(--tui-text-02);font:var(--tui-font-text-xs)}:host[data-size=xl] .t-content{font:var(--tui-font-text-m)}.t-wrapper{flex:1}.t-wrapper:first-line{color:var(--tui-text-01)}:host[data-size='m'] .t-wrapper:first-line{font:var(--tui-font-text-s);font-weight:700}:host[data-size='l'] .t-wrapper:first-line{font:var(--tui-font-text-m);font-weight:700}:host[data-size=xl] .t-wrapper:first-line{font:var(--tui-font-heading-5)}.t-percent{position:absolute;left:25%;bottom:11%;display:flex;width:50%;justify-content:space-between;font:var(--tui-font-text-xs);color:var(--tui-text-02)}:host[data-size=xl] .t-percent{font:var(--tui-font-text-m)}"]
+        }),
+        __param(0, Inject(DomSanitizer)),
+        __param(1, Inject(ChangeDetectorRef))
+    ], TuiArcChartComponent);
+    return TuiArcChartComponent;
+}());
+
+var TuiArcChartModule = /** @class */ (function () {
+    function TuiArcChartModule() {
+    }
+    TuiArcChartModule = __decorate([
+        NgModule({
+            imports: [TuiRepeatTimesModule],
+            declarations: [TuiArcChartComponent],
+            exports: [TuiArcChartComponent],
+        })
+    ], TuiArcChartModule);
+    return TuiArcChartModule;
+}());
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TuiArcChartComponent, TuiArcChartModule };
+//# sourceMappingURL=taiga-ui-addon-charts-components-arc-chart.js.map

package/fesm5/taiga-ui-addon-charts-components-arc-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"taiga-ui-addon-charts-components-arc-chart.js","sources":["ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.component.ts","ng://@taiga-ui/addon-charts/components/arc-chart/arc-chart.module.ts","ng://@taiga-ui/addon-charts/components/arc-chart/taiga-ui-addon-charts-components-arc-chart.ts"],"sourcesContent":["import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    HostBinding,\n    Inject,\n    Input,\n} from '@angular/core';\nimport {DomSanitizer, SafeValue} from '@angular/platform-browser';\nimport {tuiDefaultProp} from '@taiga-ui/cdk';\nimport {TuiSizeXL} from '@taiga-ui/core';\n\n// 3/4 with 1% safety offset\nconst ARC = 0.76;\n\nconst SIZE: Record<TuiSizeXL, number> = {\n    m: 9,\n    l: 11,\n    xl: 16,\n};\n\nconst WIDTH: Record<TuiSizeXL, number> = {\n    m: 0.25,\n    l: 0.375,\n    xl: 0.5625,\n};\n\nconst GAP: Record<TuiSizeXL, number> = {\n    m: 0.125,\n    l: 0.1875,\n    xl: 0.25,\n};\n\n@Component({\n    selector: 'tui-arc-chart',\n    templateUrl: './arc-chart.template.html',\n    styleUrls: ['./arc-chart.style.less'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TuiArcChartComponent {\n    @Input()\n    @tuiDefaultProp()\n    value: readonly number[] = [];\n\n    @Input()\n    @HostBinding('attr.data-size')\n    @tuiDefaultProp()\n    size: TuiSizeXL = 'm';\n\n    @Input()\n    @tuiDefaultProp()\n    max = 100;\n\n    @Input()\n    @tuiDefaultProp()\n    minLabel = '0%';\n\n    @Input()\n    @tuiDefaultProp()\n    maxLabel = '100%';\n\n    initialized = false;\n\n    constructor(\n        @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,\n        @Inject(ChangeDetectorRef) changeDetectorRef: ChangeDetectorRef,\n    ) {\n        // So initial animation works\n        setTimeout(() => {\n            this.initialized = true;\n            changeDetectorRef.markForCheck();\n        });\n    }\n\n    @HostBinding('style.width.rem')\n    @HostBinding('style.height.rem')\n    get width(): number {\n        return SIZE[this.size];\n    }\n\n    @HostBinding('style.strokeWidth.rem')\n    get strokeWidth(): number {\n        return WIDTH[this.size];\n    }\n\n    getInset(index: number): number {\n        return this.strokeWidth / 2 + index * (this.strokeWidth + GAP[this.size]);\n    }\n\n    getDiameter(index: number): number {\n        return SIZE[this.size] - 2 * this.getInset(index);\n    }\n\n    getLength(index: number): number {\n        return Math.PI * this.getDiameter(index) * ARC;\n    }\n\n    getOffset(index: number): number {\n        return this.getLength(index) * (1 - Math.min(this.value[index] / this.max, 1));\n    }\n\n    getColor(index: number): SafeValue {\n        return this.sanitizer.bypassSecurityTrustStyle(\n            `var(--tui-chart-${index}, var(--tui-support-0${index + 1}))`,\n        );\n    }\n}\n","import {NgModule} from '@angular/core';\nimport {TuiRepeatTimesModule} from '@taiga-ui/cdk';\n\nimport {TuiArcChartComponent} from './arc-chart.component';\n\n@NgModule({\n    imports: [TuiRepeatTimesModule],\n    declarations: [TuiArcChartComponent],\n    exports: [TuiArcChartComponent],\n})\nexport class TuiArcChartModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm5/taiga-ui-addon-charts-components.js

@@ -1,3 +1,4 @@
+export * from '@taiga-ui/addon-charts/components/arc-chart';
 export * from '@taiga-ui/addon-charts/components/axes';
 export * from '@taiga-ui/addon-charts/components/bar';
 export * from '@taiga-ui/addon-charts/components/bar-chart';

package/fesm5/taiga-ui-addon-charts-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"taiga-ui-addon-charts-components.js","sources":["ng://@taiga-ui/addon-charts/components/taiga-ui-addon-charts-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;AAAA;;"}
+{"version":3,"file":"taiga-ui-addon-charts-components.js","sources":["ng://@taiga-ui/addon-charts/components/taiga-ui-addon-charts-components.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;AAAA;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taiga-ui/addon-charts",
-  "version": "2.27.1",
+  "version": "2.28.0",
   "description": "Extension package for Taiga UI that adds various charts, graphs and related components.",
   "keywords": [
     "angular",
@@ -18,8 +18,8 @@
     "@angular/core": ">=9.0.0",
     "@ng-web-apis/common": "1.12.1",
     "@tinkoff/ng-polymorpheus": "3.1.12",
-    "@taiga-ui/cdk": "2.27.1",
-    "@taiga-ui/core": "2.27.1"
+    "@taiga-ui/cdk": "2.28.0",
+    "@taiga-ui/core": "2.28.0"
   },
   "main": "bundles/taiga-ui-addon-charts.umd.js",
   "module": "fesm5/taiga-ui-addon-charts.js",