fhdp-charts 4.10.401 → 4.10.901

package/dist/source/charts/ChartTime24.js

@@ -1,375 +1,378 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var fh_forms_handler_1 = require("fh-forms-handler");
-var konva_1 = require("konva");
-var ChartTime24 = /** @class */ (function (_super) {
-    __extends(ChartTime24, _super);
-    function ChartTime24(componentObj, parent) {
-        var _this = _super.call(this, componentObj, parent) || this;
-        _this.barElements = [];
-        //? resize event
-        _this.resizeWindowBind = _this.resizeWindow.bind(_this);
-        //? base parameters
-        _this.hAxisName = componentObj.haxisName || '';
-        _this.vAxisName = componentObj.vaxisName || '';
-        _this.bgColor = componentObj.bgColor || '#f3f2ec';
-        _this.tooltipBgColor = componentObj.tooltipBgColor || 'black';
-        _this.axisLabelColor = componentObj.axisLabelColor || 'black';
-        _this.lineColor = componentObj.lineColor || 'LightSlateGrey';
-        _this.tooltipColor = componentObj.tooltipColor || 'white';
-        _this.fontFamily = componentObj.fontFamily || 'Calibri';
-        _this.barElements = componentObj.bars;
-        _this.highlightedValue = Number(componentObj.highlightedValue) || 22;
-        _this.highlightedStroke = Number(componentObj.highlightedStroke) || 3;
-        _this.gradation = Number(componentObj.gradation) || 2;
-        _this.maxValueX = Number(componentObj.maxValueX) || 26;
-        //? containers ids
-        _this.mainElementId = componentObj.mainElementId || 'chartContainer';
-        _this.scrollContainerId = componentObj.scrollContainerId || 'scrollContainer';
-        //? bar
-        _this.barBreakWidth = Number(componentObj.barBreakWidth) || 60;
-        _this.barHeight = Number(componentObj.barHeight) || 100;
-        _this.barBreakHeight = Number(componentObj.barBreakHeight) || 30;
-        _this.percentDarkColorOnMove = Number(componentObj.percentDarkColorOnMove) || 20;
-        //? base margin
-        _this.leftMarginChart = Number(componentObj.leftMarginChart) || 100;
-        _this.rightMarginChart = Number(componentObj.rightMarginChart) || 110;
-        _this.topMarginChart = Number(componentObj.topMarginChart) || 50;
-        _this.bottomMarginChart = Number(componentObj.bottomMarginChart) || 50;
-        //? scroll container
-        _this.scrollSizeChart = Number(componentObj.scrollSizeChart) || 23;
-        //? lines, value lines
-        _this.protrudingLinesHeight = Number(componentObj.protrudingLinesHeight) || 10;
-        _this.labelTextHeight = Number(componentObj.labelTextHeight) || 3;
-        _this.labelTextFontSize = Number(componentObj.labelTextFontSize) || 22;
-        _this.lineStrokeWidth = Number(componentObj.lineStrokeWidth) || 1;
-        //? legend
-        _this.topMarginLegend = Number(componentObj.topMarginLegend) || 20;
-        _this.legendColorWidth = Number(componentObj.legendColorWidth) || 40;
-        _this.legendColorHeight = Number(componentObj.legendColorHeight) || 20;
-        _this.legendFontSize = Number(componentObj.legendFontSize) || 18;
-        _this.legendBreakColorText = Number(componentObj.legendBreakColorText) || 5;
-        _this.legendElementBreakWidth = Number(componentObj.legendElementBreakWidth) || 25;
-        _this.legendElementBreakHeight = Number(componentObj.legendElementBreakHeight) || 3;
-        //? tooltip
-        _this.tooltipOpacity = Number(componentObj.tooltipOpacity) || 0.8;
-        _this.tooltipPointerWidth = Number(componentObj.tooltipPointerWidth) || 10;
-        _this.tooltipPointerHeight = Number(componentObj.tooltipPointerHeight) || 20;
-        _this.tooltipCornerRadius = Number(componentObj.tooltipCornerRadius) || 5;
-        _this.tooltipFontSize = Number(componentObj.tooltipFontSize) || 18;
-        _this.tooltipPadding = Number(componentObj.tooltipPadding) || 10;
-        //? label name prop
-        _this.labelNameFontSize = Number(componentObj.labelNameFontSize) || 22;
-        _this.labelNameBreak = Number(componentObj.labelNameBreak) || 13;
-        _this.resizeWindowBind = _this.resizeWindow.bind(_this);
-        _this.initResizeWindow();
-        return _this;
-    }
-    ChartTime24.prototype.create = function () {
-        var mainElement = document.createElement('div');
-        mainElement.id = this.mainElementId;
-        mainElement.style.display = 'flex';
-        this.component = mainElement;
-        this.wrap(false, false);
-        this.addStyles();
-        this.display();
-        this.buildChart(mainElement.id);
-        this.display();
-    };
-    ChartTime24.prototype.initResizeWindow = function () {
-        $(window).on('resize', this.resizeWindowBind);
-    };
-    ChartTime24.prototype.resizeWindow = function () {
-        this.destroy(true);
-        this.create();
-        this.initResizeWindow();
-    };
-    ChartTime24.prototype.destroy = function (removeFromParent) {
-        $(window).off('resize', this.resizeWindowBind);
-        _super.prototype.destroy.call(this, removeFromParent);
-    };
-    ChartTime24.prototype.update = function (change) {
-        _super.prototype.update.call(this, change);
-        this.destroy(true);
-        this.create();
-        this.resizeWindowBind = this.resizeWindow.bind(this);
-        this.initResizeWindow();
-    };
-    ChartTime24.prototype.buildChart = function (id) {
-        //? create hAxisLabels numbers
-        var _a = this.getHAxisLables(), hAxisLabels = _a.hAxisLabels, maxX = _a.maxX;
-        var maxXFullWidth = maxX + this.leftMarginChart + this.rightMarginChart;
-        var stageWidth = maxXFullWidth < this.htmlElement.offsetWidth ? maxXFullWidth : this.htmlElement.offsetWidth;
-        var chartLinesHeight = (this.barElements.length + 1) * this.barBreakHeight + this.barElements.length * this.barHeight;
-        var chartHeight = chartLinesHeight + this.protrudingLinesHeight + this.labelTextFontSize + this.labelTextHeight;
-        var stage = new konva_1.default.Stage({
-            container: id,
-            width: stageWidth,
-        });
-        var _b = this.createStaticLayer(stageWidth, chartLinesHeight), staticLayer = _b.staticLayer, background = _b.background;
-        var legendLayer = new konva_1.default.Layer({
-            x: this.leftMarginChart,
-        });
-        stage.add(staticLayer, legendLayer);
-        stage.draw();
-        //? create div for scroll stage
-        var baseContainer = document.getElementById(id);
-        var baseConvasContainer = baseContainer.childNodes[0];
-        var scrollLayer = this.createScrollLayer(hAxisLabels, maxX, chartLinesHeight);
-        var _c = this.createBarsLayer(legendLayer, stageWidth), barsLayer = _c.barsLayer, tooltipLayer = _c.tooltipLayer, maxLegendY = _c.maxLegendY;
-        var scrollContainer = document.createElement('div');
-        scrollContainer.id = this.scrollContainerId;
-        scrollContainer.style.overflow = 'auto';
-        scrollContainer.style.marginLeft = this.leftMarginChart + "px";
-        scrollContainer.style.height = chartHeight + this.scrollSizeChart + "px";
-        scrollContainer.style.position = 'relative';
-        scrollContainer.style.marginTop = this.topMarginChart + "px";
-        scrollContainer.style.marginRight = this.rightMarginChart + "px";
-        baseConvasContainer.appendChild(scrollContainer);
-        //? Resizze Legend
-        var legendY = chartHeight + this.scrollSizeChart + this.topMarginChart + this.topMarginLegend;
-        legendLayer.y(legendY);
-        var legendWidth = maxLegendY + this.legendColorHeight;
-        var allHeight = legendY + legendWidth + this.bottomMarginChart;
-        stage.height(allHeight);
-        background.height(allHeight);
-        //? scroll stage
-        var scrollStage = new konva_1.default.Stage({
-            container: scrollContainer.id,
-            width: maxX,
-            height: chartHeight,
-            x: this.lineStrokeWidth,
-        });
-        scrollStage.add(scrollLayer, barsLayer, tooltipLayer);
-        scrollStage.draw();
-    };
-    ChartTime24.prototype.getHAxisLables = function () {
-        var _this = this;
-        var maxTo = this.barElements.reduce(function (prev, curr) {
-            return (Number(prev.to) > Number(curr.to)) ? prev : curr;
-        });
-        var yearStart = 1;
-        var yearEnd = Number(maxTo.to) > this.maxValueX ? Math.ceil(Number(maxTo.to) / this.gradation) + 2 : Math.ceil(this.maxValueX / 2);
-        var hAxisLabels = Array(yearEnd - yearStart + 1).fill(0).map(function () { return _this.gradation * yearStart++; });
-        var baseMaxX = hAxisLabels.length * this.barBreakWidth + this.barBreakWidth;
-        var tooltipTextBox = new konva_1.default.Text({
-            text: maxTo.tooltipText.replace(/\\n/g, "\n"),
-            fontFamily: this.fontFamily,
-            fontSize: this.tooltipFontSize,
-        });
-        var valueOneGradation = this.barBreakWidth / this.gradation;
-        var widthBar = (Number(maxTo.to) * valueOneGradation + this.leftMarginChart) - (Number(maxTo.from) * valueOneGradation + this.leftMarginChart);
-        var barXMax = Number(maxTo.from) * valueOneGradation + widthBar;
-        var maxXTooltip = barXMax + Math.ceil(tooltipTextBox.textWidth) + 2 * this.tooltipPadding + this.tooltipPointerWidth;
-        var maxX = baseMaxX > maxXTooltip ? baseMaxX : maxXTooltip;
-        return { hAxisLabels: hAxisLabels, maxX: maxX };
-    };
-    ChartTime24.prototype.createScrollLayer = function (hAxisLabels, maxX, chartHeight) {
-        var _this = this;
-        var scrollLayer = new konva_1.default.Layer();
-        //? Create grid
-        var baseGridLine = new konva_1.default.Line({
-            points: [0, 0, 0, chartHeight, maxX, chartHeight],
-            stroke: this.lineColor,
-            strokeWidth: this.lineStrokeWidth,
-            lineCap: 'round',
-            lineJoin: 'round',
-        });
-        scrollLayer.add(baseGridLine);
-        //? labels and line OX
-        hAxisLabels.forEach(function (el, i) {
-            var configLabel = {
-                points: [(i + 1) * _this.barBreakWidth, 0, (i + 1) * _this.barBreakWidth, chartHeight + _this.protrudingLinesHeight],
-                stroke: _this.lineColor,
-                strokeWidth: _this.lineStrokeWidth,
-                lineCap: 'round',
-                lineJoin: 'round',
-            };
-            if (el === _this.highlightedValue) {
-                configLabel.strokeWidth = _this.highlightedStroke;
-            }
-            var labelText = new konva_1.default.Text({
-                x: (i + 1) * _this.barBreakWidth,
-                y: chartHeight + _this.protrudingLinesHeight + _this.labelTextHeight,
-                text: String(el),
-                fontSize: _this.labelTextFontSize,
-                fontFamily: _this.fontFamily,
-                fill: _this.axisLabelColor,
-            });
-            labelText.attrs.x -= (labelText.textWidth / 2);
-            var lineLabel = new konva_1.default.Line(configLabel);
-            scrollLayer.add(lineLabel);
-            scrollLayer.add(labelText);
-        });
-        return scrollLayer;
-    };
-    ChartTime24.prototype.createStaticLayer = function (width, chartHeight) {
-        var staticLayer = new konva_1.default.Layer();
-        //? Create background
-        var background = new konva_1.default.Rect({
-            width: width,
-            fill: this.bgColor,
-        });
-        staticLayer.add(background);
-        this.createAxisLabel(staticLayer, width, chartHeight);
-        return { staticLayer: staticLayer, background: background };
-    };
-    ChartTime24.prototype.createAxisLabel = function (staticLayer, width, chartHeight) {
-        //? Label X NAME
-        var labelXName = new konva_1.default.Text({
-            x: width - this.rightMarginChart + this.labelNameBreak,
-            y: chartHeight + this.protrudingLinesHeight + this.labelTextHeight + this.topMarginChart,
-            text: this.hAxisName,
-            fontSize: this.labelNameFontSize,
-            fontFamily: this.fontFamily,
-            fill: this.axisLabelColor,
-        });
-        staticLayer.add(labelXName);
-        //? Label Y NAME
-        var labelYName = new konva_1.default.Text({
-            x: this.leftMarginChart - this.labelNameBreak,
-            y: this.topMarginChart,
-            text: this.vAxisName,
-            fontSize: this.labelNameFontSize,
-            fontFamily: this.fontFamily,
-            fill: this.axisLabelColor,
-        });
-        labelYName.attrs.y -= labelYName.textHeight;
-        labelYName.attrs.x -= labelYName.textWidth;
-        staticLayer.add(labelYName);
-    };
-    ChartTime24.prototype.createBarsLayer = function (legendLayer, stageWidth) {
-        var _this = this;
-        var legendX = 0;
-        var legendY = 0;
-        var barsLayer = new konva_1.default.Layer();
-        var tooltip = new konva_1.default.Label({
-            opacity: this.tooltipOpacity,
-        });
-        tooltip.add(new konva_1.default.Tag({
-            fill: this.tooltipBgColor,
-            pointerDirection: 'left',
-            pointerWidth: this.tooltipPointerWidth,
-            pointerHeight: this.tooltipPointerHeight,
-            lineJoin: 'round',
-            cornerRadius: this.tooltipCornerRadius,
-        }));
-        var tooltipTextBox = new konva_1.default.Text({
-            text: '',
-            fontFamily: this.fontFamily,
-            fontSize: this.tooltipFontSize,
-            padding: this.tooltipPadding,
-            fill: this.tooltipColor,
-        });
-        tooltip.add(tooltipTextBox);
-        tooltip.hide();
-        this.barElements
-            .sort(function (a, b) { return (Number(a.position) > Number(b.position) ? 1 : -1); })
-            .forEach(function (el, i) {
-            var fromValue = Number(el.from);
-            var toValue = Number(el.to);
-            var valueOneGradation = _this.barBreakWidth / _this.gradation;
-            var barHeight = _this.barHeight;
-            var barBreakHeight = _this.barBreakHeight;
-            var bar = new konva_1.default.Rect({
-                width: (toValue * valueOneGradation + _this.leftMarginChart) - (fromValue * valueOneGradation + _this.leftMarginChart),
-                height: barHeight,
-                fill: el.color,
-                x: fromValue * valueOneGradation,
-                y: barHeight * i + barBreakHeight * (i + 1),
-            });
-            var darkColor = _this.darkenColor(el.color, _this.percentDarkColorOnMove);
-            bar.on('mousemove', function (e) {
-                this.fill(darkColor);
-                //? positioning tooltip
-                tooltip.position({
-                    x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
-                    y: barHeight * i + barBreakHeight * (i + 1) + barHeight / 2,
-                });
-                tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
-                tooltip.show();
-            });
-            bar.on('mouseout', function () {
-                this.fill(el.color);
-                tooltip.hide();
-            });
-            barsLayer.add(bar);
-            var legendParam = _this.createLegendByBar(legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, i, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth);
-            legendX = legendParam.legendX;
-            legendY = legendParam.legendY;
-        });
-        var tooltipLayer = new konva_1.default.Layer();
-        tooltipLayer.add(tooltip);
-        return { barsLayer: barsLayer, tooltipLayer: tooltipLayer, maxLegendY: legendY };
-    };
-    ChartTime24.prototype.createLegendByBar = function (legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, iter, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth) {
-        var legend = new konva_1.default.Rect({
-            width: this.legendColorWidth,
-            height: this.legendColorHeight,
-            fill: el.color,
-            x: legendX,
-            y: legendY,
-        });
-        var legendText = new konva_1.default.Text({
-            x: legendX + legend.attrs.width + this.legendBreakColorText,
-            y: legendY,
-            height: legend.attrs.height,
-            text: el.legendText,
-            fontSize: this.legendFontSize,
-            fontFamily: this.fontFamily,
-            fill: 'black',
-            verticalAlign: 'middle'
-        });
-        var sumWidthLegend = legend.attrs.width + this.legendElementBreakWidth + legendText.textWidth + this.legendBreakColorText;
-        var widthLegend = legendX + sumWidthLegend;
-        var scrollWidth = stageWidth - this.leftMarginChart - this.rightMarginChart;
-        if (widthLegend > scrollWidth) {
-            legendY += this.legendColorHeight + this.legendElementBreakHeight;
-            legendX = 0;
-            legend.y(legendY);
-            legend.x(legendX);
-            legendText.y(legendY);
-            legendText.x(legendX + legend.attrs.width + this.legendBreakColorText);
-        }
-        legendX += sumWidthLegend;
-        legendLayer.add(legend);
-        legendLayer.add(legendText);
-        legend.on('mousemove', function (e) {
-            this.fill(darkColor);
-            bar.fill(darkColor);
-            tooltip.position({
-                x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
-                y: barHeight * iter + barBreakHeight * (iter + 1) + barHeight / 2,
-            });
-            tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
-            tooltip.show();
-        });
-        legend.on('mouseout', function () {
-            this.fill(el.color);
-            bar.fill(el.color);
-            tooltip.hide();
-        });
-        return { legendX: legendX, legendY: legendY };
-    };
-    ChartTime24.prototype.darkenColor = function (color, percent) {
-        var num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) - amt, B = (num >> 8 & 0x00FF) - amt, G = (num & 0x0000FF) - amt;
-        return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1);
-    };
-    ;
-    return ChartTime24;
-}(fh_forms_handler_1.HTMLFormComponent));
-exports.ChartTime24 = ChartTime24;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartTime24 = void 0;
+var fh_forms_handler_1 = require("fh-forms-handler");
+var konva_1 = require("konva");
+var ChartTime24 = /** @class */ (function (_super) {
+    __extends(ChartTime24, _super);
+    function ChartTime24(componentObj, parent) {
+        var _this = _super.call(this, componentObj, parent) || this;
+        _this.barElements = [];
+        //? resize event
+        _this.resizeWindowBind = _this.resizeWindow.bind(_this);
+        //? base parameters
+        _this.hAxisName = componentObj.haxisName || '';
+        _this.vAxisName = componentObj.vaxisName || '';
+        _this.bgColor = componentObj.bgColor || '#f3f2ec';
+        _this.tooltipBgColor = componentObj.tooltipBgColor || 'black';
+        _this.axisLabelColor = componentObj.axisLabelColor || 'black';
+        _this.lineColor = componentObj.lineColor || 'LightSlateGrey';
+        _this.tooltipColor = componentObj.tooltipColor || 'white';
+        _this.fontFamily = componentObj.fontFamily || 'Calibri';
+        _this.barElements = componentObj.bars;
+        _this.highlightedValue = Number(componentObj.highlightedValue) || 22;
+        _this.highlightedStroke = Number(componentObj.highlightedStroke) || 3;
+        _this.gradation = Number(componentObj.gradation) || 2;
+        _this.maxValueX = Number(componentObj.maxValueX) || 26;
+        //? containers ids
+        _this.mainElementId = componentObj.mainElementId || 'chartContainer';
+        _this.scrollContainerId = componentObj.scrollContainerId || 'scrollContainer';
+        //? bar
+        _this.barBreakWidth = Number(componentObj.barBreakWidth) || 60;
+        _this.barHeight = Number(componentObj.barHeight) || 100;
+        _this.barBreakHeight = Number(componentObj.barBreakHeight) || 30;
+        _this.percentDarkColorOnMove = Number(componentObj.percentDarkColorOnMove) || 20;
+        //? base margin
+        _this.leftMarginChart = Number(componentObj.leftMarginChart) || 100;
+        _this.rightMarginChart = Number(componentObj.rightMarginChart) || 110;
+        _this.topMarginChart = Number(componentObj.topMarginChart) || 50;
+        _this.bottomMarginChart = Number(componentObj.bottomMarginChart) || 50;
+        //? scroll container
+        _this.scrollSizeChart = Number(componentObj.scrollSizeChart) || 23;
+        //? lines, value lines
+        _this.protrudingLinesHeight = Number(componentObj.protrudingLinesHeight) || 10;
+        _this.labelTextHeight = Number(componentObj.labelTextHeight) || 3;
+        _this.labelTextFontSize = Number(componentObj.labelTextFontSize) || 22;
+        _this.lineStrokeWidth = Number(componentObj.lineStrokeWidth) || 1;
+        //? legend
+        _this.topMarginLegend = Number(componentObj.topMarginLegend) || 20;
+        _this.legendColorWidth = Number(componentObj.legendColorWidth) || 40;
+        _this.legendColorHeight = Number(componentObj.legendColorHeight) || 20;
+        _this.legendFontSize = Number(componentObj.legendFontSize) || 18;
+        _this.legendBreakColorText = Number(componentObj.legendBreakColorText) || 5;
+        _this.legendElementBreakWidth = Number(componentObj.legendElementBreakWidth) || 25;
+        _this.legendElementBreakHeight = Number(componentObj.legendElementBreakHeight) || 3;
+        //? tooltip
+        _this.tooltipOpacity = Number(componentObj.tooltipOpacity) || 0.8;
+        _this.tooltipPointerWidth = Number(componentObj.tooltipPointerWidth) || 10;
+        _this.tooltipPointerHeight = Number(componentObj.tooltipPointerHeight) || 20;
+        _this.tooltipCornerRadius = Number(componentObj.tooltipCornerRadius) || 5;
+        _this.tooltipFontSize = Number(componentObj.tooltipFontSize) || 18;
+        _this.tooltipPadding = Number(componentObj.tooltipPadding) || 10;
+        //? label name prop
+        _this.labelNameFontSize = Number(componentObj.labelNameFontSize) || 22;
+        _this.labelNameBreak = Number(componentObj.labelNameBreak) || 13;
+        _this.resizeWindowBind = _this.resizeWindow.bind(_this);
+        _this.initResizeWindow();
+        return _this;
+    }
+    ChartTime24.prototype.create = function () {
+        var mainElement = document.createElement('div');
+        mainElement.id = this.mainElementId;
+        mainElement.style.display = 'flex';
+        this.component = mainElement;
+        this.wrap(false, false);
+        this.addStyles();
+        this.display();
+        this.buildChart(mainElement.id);
+        this.display();
+    };
+    ChartTime24.prototype.initResizeWindow = function () {
+        $(window).on('resize', this.resizeWindowBind);
+    };
+    ChartTime24.prototype.resizeWindow = function () {
+        this.destroy(true);
+        this.create();
+        this.initResizeWindow();
+    };
+    ChartTime24.prototype.destroy = function (removeFromParent) {
+        $(window).off('resize', this.resizeWindowBind);
+        _super.prototype.destroy.call(this, removeFromParent);
+    };
+    ChartTime24.prototype.update = function (change) {
+        _super.prototype.update.call(this, change);
+        this.destroy(true);
+        this.create();
+        this.resizeWindowBind = this.resizeWindow.bind(this);
+        this.initResizeWindow();
+    };
+    ChartTime24.prototype.buildChart = function (id) {
+        //? create hAxisLabels numbers
+        var _a = this.getHAxisLables(), hAxisLabels = _a.hAxisLabels, maxX = _a.maxX;
+        var maxXFullWidth = maxX + this.leftMarginChart + this.rightMarginChart;
+        var stageWidth = maxXFullWidth < this.htmlElement.offsetWidth ? maxXFullWidth : this.htmlElement.offsetWidth;
+        var chartLinesHeight = (this.barElements.length + 1) * this.barBreakHeight + this.barElements.length * this.barHeight;
+        var chartHeight = chartLinesHeight + this.protrudingLinesHeight + this.labelTextFontSize + this.labelTextHeight;
+        var stage = new konva_1.default.Stage({
+            container: id,
+            width: stageWidth,
+        });
+        var _b = this.createStaticLayer(stageWidth, chartLinesHeight), staticLayer = _b.staticLayer, background = _b.background;
+        var legendLayer = new konva_1.default.Layer({
+            x: this.leftMarginChart,
+        });
+        stage.add(staticLayer, legendLayer);
+        stage.draw();
+        //? create div for scroll stage
+        var baseContainer = document.getElementById(id);
+        var baseConvasContainer = baseContainer.childNodes[0];
+        var scrollLayer = this.createScrollLayer(hAxisLabels, maxX, chartLinesHeight);
+        var _c = this.createBarsLayer(legendLayer, stageWidth), barsLayer = _c.barsLayer, tooltipLayer = _c.tooltipLayer, maxLegendY = _c.maxLegendY;
+        var scrollContainer = document.createElement('div');
+        scrollContainer.id = this.scrollContainerId;
+        scrollContainer.style.overflow = 'auto';
+        scrollContainer.style.marginLeft = "".concat(this.leftMarginChart, "px");
+        scrollContainer.style.height = "".concat(chartHeight + this.scrollSizeChart, "px");
+        scrollContainer.style.position = 'relative';
+        scrollContainer.style.marginTop = "".concat(this.topMarginChart, "px");
+        scrollContainer.style.marginRight = "".concat(this.rightMarginChart, "px");
+        baseConvasContainer.appendChild(scrollContainer);
+        //? Resizze Legend
+        var legendY = chartHeight + this.scrollSizeChart + this.topMarginChart + this.topMarginLegend;
+        legendLayer.y(legendY);
+        var legendWidth = maxLegendY + this.legendColorHeight;
+        var allHeight = legendY + legendWidth + this.bottomMarginChart;
+        stage.height(allHeight);
+        background.height(allHeight);
+        //? scroll stage
+        var scrollStage = new konva_1.default.Stage({
+            container: scrollContainer.id,
+            width: maxX,
+            height: chartHeight,
+            x: this.lineStrokeWidth,
+        });
+        scrollStage.add(scrollLayer, barsLayer, tooltipLayer);
+        scrollStage.draw();
+    };
+    ChartTime24.prototype.getHAxisLables = function () {
+        var _this = this;
+        var maxTo = this.barElements.reduce(function (prev, curr) {
+            return (Number(prev.to) > Number(curr.to)) ? prev : curr;
+        });
+        var yearStart = 1;
+        var yearEnd = Number(maxTo.to) > this.maxValueX ? Math.ceil(Number(maxTo.to) / this.gradation) + 2 : Math.ceil(this.maxValueX / 2);
+        var hAxisLabels = Array(yearEnd - yearStart + 1).fill(0).map(function () { return _this.gradation * yearStart++; });
+        var baseMaxX = hAxisLabels.length * this.barBreakWidth + this.barBreakWidth;
+        var tooltipTextBox = new konva_1.default.Text({
+            text: maxTo.tooltipText.replace(/\\n/g, "\n"),
+            fontFamily: this.fontFamily,
+            fontSize: this.tooltipFontSize,
+        });
+        var valueOneGradation = this.barBreakWidth / this.gradation;
+        var widthBar = (Number(maxTo.to) * valueOneGradation + this.leftMarginChart) - (Number(maxTo.from) * valueOneGradation + this.leftMarginChart);
+        var barXMax = Number(maxTo.from) * valueOneGradation + widthBar;
+        var maxXTooltip = barXMax + Math.ceil(tooltipTextBox.textWidth) + 2 * this.tooltipPadding + this.tooltipPointerWidth;
+        var maxX = baseMaxX > maxXTooltip ? baseMaxX : maxXTooltip;
+        return { hAxisLabels: hAxisLabels, maxX: maxX };
+    };
+    ChartTime24.prototype.createScrollLayer = function (hAxisLabels, maxX, chartHeight) {
+        var _this = this;
+        var scrollLayer = new konva_1.default.Layer();
+        //? Create grid
+        var baseGridLine = new konva_1.default.Line({
+            points: [0, 0, 0, chartHeight, maxX, chartHeight],
+            stroke: this.lineColor,
+            strokeWidth: this.lineStrokeWidth,
+            lineCap: 'round',
+            lineJoin: 'round',
+        });
+        scrollLayer.add(baseGridLine);
+        //? labels and line OX
+        hAxisLabels.forEach(function (el, i) {
+            var configLabel = {
+                points: [(i + 1) * _this.barBreakWidth, 0, (i + 1) * _this.barBreakWidth, chartHeight + _this.protrudingLinesHeight],
+                stroke: _this.lineColor,
+                strokeWidth: _this.lineStrokeWidth,
+                lineCap: 'round',
+                lineJoin: 'round',
+            };
+            if (el === _this.highlightedValue) {
+                configLabel.strokeWidth = _this.highlightedStroke;
+            }
+            var labelText = new konva_1.default.Text({
+                x: (i + 1) * _this.barBreakWidth,
+                y: chartHeight + _this.protrudingLinesHeight + _this.labelTextHeight,
+                text: String(el),
+                fontSize: _this.labelTextFontSize,
+                fontFamily: _this.fontFamily,
+                fill: _this.axisLabelColor,
+            });
+            labelText.attrs.x -= (labelText.textWidth / 2);
+            var lineLabel = new konva_1.default.Line(configLabel);
+            scrollLayer.add(lineLabel);
+            scrollLayer.add(labelText);
+        });
+        return scrollLayer;
+    };
+    ChartTime24.prototype.createStaticLayer = function (width, chartHeight) {
+        var staticLayer = new konva_1.default.Layer();
+        //? Create background
+        var background = new konva_1.default.Rect({
+            width: width,
+            fill: this.bgColor,
+        });
+        staticLayer.add(background);
+        this.createAxisLabel(staticLayer, width, chartHeight);
+        return { staticLayer: staticLayer, background: background };
+    };
+    ChartTime24.prototype.createAxisLabel = function (staticLayer, width, chartHeight) {
+        //? Label X NAME
+        var labelXName = new konva_1.default.Text({
+            x: width - this.rightMarginChart + this.labelNameBreak,
+            y: chartHeight + this.protrudingLinesHeight + this.labelTextHeight + this.topMarginChart,
+            text: this.hAxisName,
+            fontSize: this.labelNameFontSize,
+            fontFamily: this.fontFamily,
+            fill: this.axisLabelColor,
+        });
+        staticLayer.add(labelXName);
+        //? Label Y NAME
+        var labelYName = new konva_1.default.Text({
+            x: this.leftMarginChart - this.labelNameBreak,
+            y: this.topMarginChart,
+            text: this.vAxisName,
+            fontSize: this.labelNameFontSize,
+            fontFamily: this.fontFamily,
+            fill: this.axisLabelColor,
+        });
+        labelYName.attrs.y -= labelYName.textHeight;
+        labelYName.attrs.x -= labelYName.textWidth;
+        staticLayer.add(labelYName);
+    };
+    ChartTime24.prototype.createBarsLayer = function (legendLayer, stageWidth) {
+        var _this = this;
+        var legendX = 0;
+        var legendY = 0;
+        var barsLayer = new konva_1.default.Layer();
+        var tooltip = new konva_1.default.Label({
+            opacity: this.tooltipOpacity,
+        });
+        tooltip.add(new konva_1.default.Tag({
+            fill: this.tooltipBgColor,
+            pointerDirection: 'left',
+            pointerWidth: this.tooltipPointerWidth,
+            pointerHeight: this.tooltipPointerHeight,
+            lineJoin: 'round',
+            cornerRadius: this.tooltipCornerRadius,
+        }));
+        var tooltipTextBox = new konva_1.default.Text({
+            text: '',
+            fontFamily: this.fontFamily,
+            fontSize: this.tooltipFontSize,
+            padding: this.tooltipPadding,
+            fill: this.tooltipColor,
+        });
+        tooltip.add(tooltipTextBox);
+        tooltip.hide();
+        this.barElements
+            .sort(function (a, b) { return (Number(a.position) > Number(b.position) ? 1 : -1); })
+            .forEach(function (el, i) {
+            var fromValue = Number(el.from);
+            var toValue = Number(el.to);
+            var valueOneGradation = _this.barBreakWidth / _this.gradation;
+            var barHeight = _this.barHeight;
+            var barBreakHeight = _this.barBreakHeight;
+            var bar = new konva_1.default.Rect({
+                width: (toValue * valueOneGradation + _this.leftMarginChart) - (fromValue * valueOneGradation + _this.leftMarginChart),
+                height: barHeight,
+                fill: el.color,
+                x: fromValue * valueOneGradation,
+                y: barHeight * i + barBreakHeight * (i + 1),
+            });
+            var darkColor = _this.darkenColor(el.color, _this.percentDarkColorOnMove);
+            bar.on('mousemove', function (e) {
+                this.fill(darkColor);
+                //? positioning tooltip
+                tooltip.position({
+                    x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
+                    y: barHeight * i + barBreakHeight * (i + 1) + barHeight / 2,
+                });
+                tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
+                tooltip.show();
+            });
+            bar.on('mouseout', function () {
+                this.fill(el.color);
+                tooltip.hide();
+            });
+            barsLayer.add(bar);
+            var legendParam = _this.createLegendByBar(legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, i, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth);
+            legendX = legendParam.legendX;
+            legendY = legendParam.legendY;
+        });
+        var tooltipLayer = new konva_1.default.Layer();
+        tooltipLayer.add(tooltip);
+        return { barsLayer: barsLayer, tooltipLayer: tooltipLayer, maxLegendY: legendY };
+    };
+    ChartTime24.prototype.createLegendByBar = function (legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, iter, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth) {
+        var legend = new konva_1.default.Rect({
+            width: this.legendColorWidth,
+            height: this.legendColorHeight,
+            fill: el.color,
+            x: legendX,
+            y: legendY,
+        });
+        var legendText = new konva_1.default.Text({
+            x: legendX + legend.attrs.width + this.legendBreakColorText,
+            y: legendY,
+            height: legend.attrs.height,
+            text: el.legendText,
+            fontSize: this.legendFontSize,
+            fontFamily: this.fontFamily,
+            fill: 'black',
+            verticalAlign: 'middle'
+        });
+        var sumWidthLegend = legend.attrs.width + this.legendElementBreakWidth + legendText.textWidth + this.legendBreakColorText;
+        var widthLegend = legendX + sumWidthLegend;
+        var scrollWidth = stageWidth - this.leftMarginChart - this.rightMarginChart;
+        if (widthLegend > scrollWidth) {
+            legendY += this.legendColorHeight + this.legendElementBreakHeight;
+            legendX = 0;
+            legend.y(legendY);
+            legend.x(legendX);
+            legendText.y(legendY);
+            legendText.x(legendX + legend.attrs.width + this.legendBreakColorText);
+        }
+        legendX += sumWidthLegend;
+        legendLayer.add(legend);
+        legendLayer.add(legendText);
+        legend.on('mousemove', function (e) {
+            this.fill(darkColor);
+            bar.fill(darkColor);
+            tooltip.position({
+                x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
+                y: barHeight * iter + barBreakHeight * (iter + 1) + barHeight / 2,
+            });
+            tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
+            tooltip.show();
+        });
+        legend.on('mouseout', function () {
+            this.fill(el.color);
+            bar.fill(el.color);
+            tooltip.hide();
+        });
+        return { legendX: legendX, legendY: legendY };
+    };
+    ChartTime24.prototype.darkenColor = function (color, percent) {
+        var num = parseInt(color.replace("#", ""), 16), amt = Math.round(2.55 * percent), R = (num >> 16) - amt, B = (num >> 8 & 0x00FF) - amt, G = (num & 0x0000FF) - amt;
+        return "#" + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (B < 255 ? B < 1 ? 0 : B : 255) * 0x100 + (G < 255 ? G < 1 ? 0 : G : 255)).toString(16).slice(1);
+    };
+    ;
+    return ChartTime24;
+}(fh_forms_handler_1.HTMLFormComponent));
+exports.ChartTime24 = ChartTime24;
 //# sourceMappingURL=ChartTime24.js.map