ps-toolkit-ui 0.0.209 → 0.0.213

package/bundles/ps-toolkit-ui.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('jquery'), require('lodash'), require('jalali-moment'), require('@angular/router'), require('@angular/forms'), require('@angular/common'), require('@angular/platform-browser')) :
-    typeof define === 'function' && define.amd ? define('ps-toolkit-ui', ['exports', '@angular/core', 'jquery', 'lodash', 'jalali-moment', '@angular/router', '@angular/forms', '@angular/common', '@angular/platform-browser'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ps-toolkit-ui'] = {}, global.ng.core, global.$, global._, global.moment, global.ng.router, global.ng.forms, global.ng.common, global.ng.platformBrowser));
-}(this, (function (exports, core, $, _, moment, router, forms, common, platformBrowser) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('jquery'), require('lodash'), require('jalali-moment'), require('@angular/router'), require('@angular/forms'), require('@angular/common'), require('@angular/platform-browser'), require('highcharts')) :
+    typeof define === 'function' && define.amd ? define('ps-toolkit-ui', ['exports', '@angular/core', 'jquery', 'lodash', 'jalali-moment', '@angular/router', '@angular/forms', '@angular/common', '@angular/platform-browser', 'highcharts'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['ps-toolkit-ui'] = {}, global.ng.core, global.$, global._, global.moment, global.ng.router, global.ng.forms, global.ng.common, global.ng.platformBrowser, global.Highcharts));
+}(this, (function (exports, core, $, _, moment, router, forms, common, platformBrowser, Highcharts) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) { return e; } else {
@@ -7175,6 +7175,23 @@
         clock: [{ type: core.ViewChild, args: ['clock',] }]
     };
 
+    var ChartComponent = /** @class */ (function () {
+        function ChartComponent() {
+        }
+        return ChartComponent;
+    }());
+    ChartComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'lib-chart',
+                    template: "<div class=\"chart-con\" [style]=\"chart.style\">\r\n  <div *ngIf=\"chart.loading\" class=\"loading\">\r\n    <div class=\"text\" [innerHTML]=\"chart.l('LoadingTable', 'Processing')\"></div>\r\n  </div>\r\n  <div style=\"height: 100%\" [id]=\"this.chart.name + 'Chart'\"></div>\r\n</div>\r\n",
+                    styles: [".chart-con{direction:ltr;float:right;position:relative;width:100%}.chart-con .loading{background-color:#fff;height:100%;position:absolute;right:0;top:0;width:100%;z-index:9}.chart-con .loading .text{direction:rtl;font-family:VazirBold;height:40px;line-height:40px;position:absolute;text-align:center;top:calc(50% - 20px);width:100%}"]
+                },] }
+    ];
+    ChartComponent.ctorParameters = function () { return []; };
+    ChartComponent.propDecorators = {
+        chart: [{ type: core.Input }]
+    };
+
     var PsToolkitUiModule = /** @class */ (function () {
         function PsToolkitUiModule() {
         }
@@ -7198,7 +7215,7 @@
                         TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
                         FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
                         SafeStylePipe, LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
-                        ClockComponent
+                        ClockComponent, ChartComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -7214,7 +7231,7 @@
                         TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
                         FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
                         LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
-                        ClockComponent
+                        ClockComponent, ChartComponent
                     ]
                 },] }
     ];
@@ -7540,6 +7557,171 @@
         return TableRowClass;
     }());
 
+    var ChartClass = /** @class */ (function () {
+        function ChartClass(l, name) {
+            this.style = {};
+            this.loading = false;
+            this.options = {};
+            this.l = l;
+            this.name = name;
+        }
+        ChartClass.prototype.setChart = function (cOpt, categories) {
+            if (categories === void 0) { categories = []; }
+            var date = this.l('Date');
+            var min = Math.min.apply(Math, __spread([].concat.apply([], cOpt.series.map(function (o) { return o.data; }))));
+            var th = this;
+            var opt = {
+                chart: {
+                    type: 'line',
+                    spacing: [30, 30, 30, 30]
+                },
+                title: { text: null },
+                credits: { enabled: false },
+                yAxis: {
+                    visible: true, reverse: true,
+                    min: min,
+                    title: { text: null },
+                    labels: {
+                        useHTML: true,
+                        style: {
+                            fontFamily: 'VazirBold',
+                            direction: 'rtl',
+                            textAlign: 'center'
+                        },
+                        formatter: function () {
+                            return cOpt.unit ? cOpt.unit.replace('{}', this.value.toLocaleString()) : this.value.toLocaleString();
+                        }
+                    }
+                },
+                plotOptions: {
+                    line: {
+                        marker: {
+                            enabled: false
+                        }
+                    }
+                },
+                xAxis: {
+                    categories: categories,
+                    reversed: true,
+                    labels: {
+                        useHTML: true,
+                        style: {
+                            fontFamily: 'VazirBold',
+                            direction: 'rtl',
+                            textAlign: 'center'
+                        },
+                        step: Math.floor(categories.length / 5),
+                        formatter: function () {
+                            return this.value.split(' ')[0];
+                        }
+                    }
+                },
+                legend: {
+                    useHTML: true,
+                    rtl: true,
+                    itemMarginRight: 50,
+                    itemMarginLeft: 50,
+                    itemStyle: {
+                        fontFamily: 'VazirBold',
+                        direction: 'rtl'
+                    }
+                },
+                tooltip: {
+                    shared: true,
+                    crosshairs: true,
+                    useHTML: true,
+                    style: {
+                        fontFamily: 'VazirBold',
+                        direction: 'rtl',
+                        textAlign: 'center'
+                    },
+                    formatter: function () {
+                        var e_1, _a;
+                        var s = '<div>' + date + ' : ' + this.x + '</br>';
+                        try {
+                            for (var _b = __values(this.points.filter(function (x) { return x.y !== 0; })), _c = _b.next(); !_c.done; _c = _b.next()) {
+                                var p = _c.value;
+                                var symbol = th.getSymbol(p);
+                                s += (symbol ? symbol : '') + '<span class="rtl d-ib">' + (cOpt.showName ?
+                                    '<span style="' + (symbol ? '' : 'color: ' + p.color) + '" class="m-l-5">' +
+                                        p.series.name + '</span> ' : '') +
+                                    '<span style="' + (cOpt.showName ? '' : 'color: ' + p.color) + '">'
+                                    + (cOpt.unit ? cOpt.unit.replace('{}', p.y.toLocaleString()) : p.y.toLocaleString()) + '</span>' + '</span></br>';
+                            }
+                        }
+                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                        finally {
+                            try {
+                                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                        }
+                        s += '</div>';
+                        return s;
+                    }
+                },
+                series: []
+            };
+            this.options = this.merge(opt, cOpt);
+            Highcharts.chart(this.name + 'Chart', this.options);
+        };
+        ChartClass.prototype.getSymbol = function (point) {
+            var marker = null;
+            if (point.point.graphic && point.point.graphic.symbolName) {
+                switch (point.point.graphic.symbolName) {
+                    case 'circle':
+                        marker = '●';
+                        break;
+                    case 'diamond':
+                        marker = '♦';
+                        break;
+                    case 'square':
+                        marker = '■';
+                        break;
+                    case 'triangle':
+                        marker = '▲';
+                        break;
+                    case 'triangle-down':
+                        marker = '▼';
+                        break;
+                    default:
+                        marker = '●';
+                        break;
+                }
+                return '<span style="margin-left: 10px; color: ' + point.color + '">' + marker + '</span>';
+            }
+            return marker;
+        };
+        ChartClass.prototype.merge = function (b, c) {
+            var e_2, _a;
+            try {
+                for (var _b = __values(Object.keys(c)), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var k = _c.value;
+                    if (Object.keys(b).includes(k)) {
+                        if (c[k] != null && c[k].constructor === Object) {
+                            b[k] = this.merge(b[k], c[k]);
+                        }
+                        else {
+                            b[k] = c[k];
+                        }
+                    }
+                    else {
+                        b[k] = c[k];
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            return b;
+        };
+        return ChartClass;
+    }());
+
     /*
      * Public API Surface of ps-toolkit-ui
      */
@@ -7553,6 +7735,7 @@
     exports.AccordionRowClass = AccordionRowClass;
     exports.AlertComponent = AlertComponent;
     exports.BaseComponent = BaseComponent;
+    exports.ChartClass = ChartClass;
     exports.ConfirmComponent = ConfirmComponent;
     exports.DayClass = DayClass;
     exports.EnumUtils = EnumUtils;
@@ -7621,6 +7804,7 @@
     exports.ɵl = FormHiddenComponent;
     exports.ɵm = CalendarComponent;
     exports.ɵn = ClockComponent;
+    exports.ɵo = ChartComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });