fhdp-charts 4.10.1-SNAPSHOT-1660291672920 → 4.10.3-SNAPSHOT-1660663331473

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.
Files changed (6) hide show
  1. package/dist/Module.d.ts +6 -6
  2. package/dist/Module.js +36 -36
  3. package/dist/package.json +36 -36
  4. package/dist/source/charts/ChartTime24.d.ts +85 -85
  5. package/dist/source/charts/ChartTime24.js +374 -374
  6. package/package.json +3 -3
package/dist/Module.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { FhModule } from "fh-forms-handler";
2
- import { ChartTime24 } from './source/charts/ChartTime24';
3
- declare class FhDPCharts extends FhModule {
4
- protected registerComponents(): void;
5
- }
6
- export { FhDPCharts, ChartTime24 };
1
+ import { FhModule } from "fh-forms-handler";
2
+ import { ChartTime24 } from './source/charts/ChartTime24';
3
+ declare class FhDPCharts extends FhModule {
4
+ protected registerComponents(): void;
5
+ }
6
+ export { FhDPCharts, ChartTime24 };
package/dist/Module.js CHANGED
@@ -1,37 +1,37 @@
1
- "use strict";
2
- var __extends = (this && this.__extends) || (function () {
3
- var extendStatics = function (d, b) {
4
- extendStatics = Object.setPrototypeOf ||
5
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
- return extendStatics(d, b);
8
- };
9
- return function (d, b) {
10
- extendStatics(d, b);
11
- function __() { this.constructor = d; }
12
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
- };
14
- })();
15
- Object.defineProperty(exports, "__esModule", { value: true });
16
- var fh_forms_handler_1 = require("fh-forms-handler");
17
- var pack = require("./package.json");
18
- var ChartTime24_1 = require("./source/charts/ChartTime24");
19
- exports.ChartTime24 = ChartTime24_1.ChartTime24;
20
- var FhDPCharts = /** @class */ (function (_super) {
21
- __extends(FhDPCharts, _super);
22
- function FhDPCharts() {
23
- return _super !== null && _super.apply(this, arguments) || this;
24
- }
25
- FhDPCharts.prototype.registerComponents = function () {
26
- fh_forms_handler_1.FhContainer.bind("ChartTime24")
27
- .toFactory(function () {
28
- return function (componentObj, parent) {
29
- return new ChartTime24_1.ChartTime24(componentObj, parent);
30
- };
31
- });
32
- console.log("FhDP-charts version: " + pack.version);
33
- };
34
- return FhDPCharts;
35
- }(fh_forms_handler_1.FhModule));
36
- exports.FhDPCharts = FhDPCharts;
1
+ "use strict";
2
+ var __extends = (this && this.__extends) || (function () {
3
+ var extendStatics = function (d, b) {
4
+ extendStatics = Object.setPrototypeOf ||
5
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
+ return extendStatics(d, b);
8
+ };
9
+ return function (d, b) {
10
+ extendStatics(d, b);
11
+ function __() { this.constructor = d; }
12
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
+ };
14
+ })();
15
+ Object.defineProperty(exports, "__esModule", { value: true });
16
+ var fh_forms_handler_1 = require("fh-forms-handler");
17
+ var pack = require("./package.json");
18
+ var ChartTime24_1 = require("./source/charts/ChartTime24");
19
+ exports.ChartTime24 = ChartTime24_1.ChartTime24;
20
+ var FhDPCharts = /** @class */ (function (_super) {
21
+ __extends(FhDPCharts, _super);
22
+ function FhDPCharts() {
23
+ return _super !== null && _super.apply(this, arguments) || this;
24
+ }
25
+ FhDPCharts.prototype.registerComponents = function () {
26
+ fh_forms_handler_1.FhContainer.bind("ChartTime24")
27
+ .toFactory(function () {
28
+ return function (componentObj, parent) {
29
+ return new ChartTime24_1.ChartTime24(componentObj, parent);
30
+ };
31
+ });
32
+ console.log("FhDP-charts version: " + pack.version);
33
+ };
34
+ return FhDPCharts;
35
+ }(fh_forms_handler_1.FhModule));
36
+ exports.FhDPCharts = FhDPCharts;
37
37
  //# sourceMappingURL=Module.js.map
package/dist/package.json CHANGED
@@ -1,36 +1,36 @@
1
- {
2
- "name": "fhdp-charts",
3
- "version": "4.10.1-SNAPSHOT-1660291672920",
4
- "author": {
5
- "name": "Krzysztof Czajka",
6
- "email": "k.czajka@doittechnology.pl"
7
- },
8
- "main": "dist/Module.js",
9
- "types": "dist/Module.d.ts",
10
- "scripts": {
11
- "prepublish": "node prepublish",
12
- "postpublish": "node postpublish",
13
- "build": "tsc && copyfiles ./source/external/** ./source/styles/css/*.css ./source/styles/external-css/*.css ./source/styles/img/*.png source/Module.css ./dist",
14
- "copyDev": "cp -r ./dist/* ../../../fhdp-common/fhdp-commons/fhdp-commons-fh-starter/node_modules/fhdp-charts/dist",
15
- "prepare": "yarn build",
16
- "test": "echo \"Error: no test specified\" && exit 1",
17
- "sass": "sass --watch ./source/styles/scss:./source/styles/css"
18
- },
19
- "devDependencies": {
20
- "@types/bootstrap": "4.3.1",
21
- "@types/highlight.js": "9.12.3",
22
- "@types/jquery": "3.3.31",
23
- "@types/marked": "0.6.5",
24
- "@types/node": "14.14.36",
25
- "imports-loader": "0.8.0",
26
- "less": "3.9.0",
27
- "sass": "^1.26.8",
28
- "typescript": "3.5.3"
29
- },
30
- "dependencies": {
31
- "canvas": "^2.8.0",
32
- "fh-basic-controls": "4.10.1-SNAPSHOT-1660291672920",
33
- "fh-forms-handler": "4.10.1-SNAPSHOT-1660291672920",
34
- "konva": "^8.0.4"
35
- }
36
- }
1
+ {
2
+ "name": "fhdp-charts",
3
+ "version": "4.10.3-SNAPSHOT-1660663331473",
4
+ "author": {
5
+ "name": "Krzysztof Czajka",
6
+ "email": "k.czajka@doittechnology.pl"
7
+ },
8
+ "main": "dist/Module.js",
9
+ "types": "dist/Module.d.ts",
10
+ "scripts": {
11
+ "prepublish": "node prepublish",
12
+ "postpublish": "node postpublish",
13
+ "build": "tsc && copyfiles ./source/external/** ./source/styles/css/*.css ./source/styles/external-css/*.css ./source/styles/img/*.png source/Module.css ./dist",
14
+ "copyDev": "cp -r ./dist/* ../../../fhdp-common/fhdp-commons/fhdp-commons-fh-starter/node_modules/fhdp-charts/dist",
15
+ "prepare": "yarn build",
16
+ "test": "echo \"Error: no test specified\" && exit 1",
17
+ "sass": "sass --watch ./source/styles/scss:./source/styles/css"
18
+ },
19
+ "devDependencies": {
20
+ "@types/bootstrap": "4.3.1",
21
+ "@types/highlight.js": "9.12.3",
22
+ "@types/jquery": "3.3.31",
23
+ "@types/marked": "0.6.5",
24
+ "@types/node": "14.14.36",
25
+ "imports-loader": "0.8.0",
26
+ "less": "3.9.0",
27
+ "sass": "^1.26.8",
28
+ "typescript": "3.5.3"
29
+ },
30
+ "dependencies": {
31
+ "canvas": "^2.8.0",
32
+ "fh-basic-controls": "4.10.3-SNAPSHOT-1660663331473",
33
+ "fh-forms-handler": "4.10.3-SNAPSHOT-1660663331473",
34
+ "konva": "^8.0.4"
35
+ }
36
+ }
package/dist/source/charts/ChartTime24.d.ts CHANGED
@@ -1,85 +1,85 @@
1
- import { HTMLFormComponent } from "fh-forms-handler";
2
- import Konva from 'konva';
3
- import { Layer } from "konva/lib/Layer";
4
- interface BarElement {
5
- from: string;
6
- to: string;
7
- position: string;
8
- color: string;
9
- tooltipText: string;
10
- legendText: string;
11
- }
12
- declare class ChartTime24 extends HTMLFormComponent {
13
- private hAxisName;
14
- private vAxisName;
15
- private bgColor;
16
- private tooltipBgColor;
17
- private axisLabelColor;
18
- private lineColor;
19
- private tooltipColor;
20
- private fontFamily;
21
- private barElements;
22
- private highlightedValue;
23
- private highlightedStroke;
24
- private gradation;
25
- private maxValueX;
26
- private mainElementId;
27
- private scrollContainerId;
28
- private barBreakWidth;
29
- private barHeight;
30
- private barBreakHeight;
31
- private percentDarkColorOnMove;
32
- private leftMarginChart;
33
- private rightMarginChart;
34
- private topMarginChart;
35
- private bottomMarginChart;
36
- private scrollSizeChart;
37
- private protrudingLinesHeight;
38
- private labelTextHeight;
39
- private labelTextFontSize;
40
- private lineStrokeWidth;
41
- private topMarginLegend;
42
- private legendColorWidth;
43
- private legendColorHeight;
44
- private legendFontSize;
45
- private legendBreakColorText;
46
- private legendElementBreakWidth;
47
- private legendElementBreakHeight;
48
- private tooltipOpacity;
49
- private tooltipPointerWidth;
50
- private tooltipPointerHeight;
51
- private tooltipCornerRadius;
52
- private tooltipFontSize;
53
- private tooltipPadding;
54
- private labelNameFontSize;
55
- private labelNameBreak;
56
- private resizeWindowBind;
57
- constructor(componentObj: any, parent: HTMLFormComponent);
58
- create(): void;
59
- initResizeWindow(): void;
60
- resizeWindow(): void;
61
- destroy(removeFromParent: any): void;
62
- update(change: any): void;
63
- buildChart(id: string): void;
64
- getHAxisLables(): {
65
- hAxisLabels: number[];
66
- maxX: number;
67
- };
68
- createScrollLayer(hAxisLabels: number[], maxX: number, chartHeight: number): Layer;
69
- createStaticLayer(width: number, chartHeight: number): {
70
- staticLayer: Layer;
71
- background: import("konva/lib/shapes/Rect").Rect;
72
- };
73
- createAxisLabel(staticLayer: Layer, width: number, chartHeight: number): void;
74
- createBarsLayer(legendLayer: Konva.Layer, stageWidth: number): {
75
- barsLayer: Layer;
76
- tooltipLayer: Layer;
77
- maxLegendY: number;
78
- };
79
- createLegendByBar(legendX: number, legendY: number, el: BarElement, legendLayer: Layer, darkColor: string, bar: Konva.Rect, tooltip: Konva.Label, tooltipTextBox: Konva.Text, iter: number, fromValue: number, toValue: number, valueOneGradation: number, barHeight: number, barBreakHeight: number, stageWidth: number): {
80
- legendX: number;
81
- legendY: number;
82
- };
83
- darkenColor(color: string, percent: number): string;
84
- }
85
- export { ChartTime24 };
1
+ import { HTMLFormComponent } from "fh-forms-handler";
2
+ import Konva from 'konva';
3
+ import { Layer } from "konva/lib/Layer";
4
+ interface BarElement {
5
+ from: string;
6
+ to: string;
7
+ position: string;
8
+ color: string;
9
+ tooltipText: string;
10
+ legendText: string;
11
+ }
12
+ declare class ChartTime24 extends HTMLFormComponent {
13
+ private hAxisName;
14
+ private vAxisName;
15
+ private bgColor;
16
+ private tooltipBgColor;
17
+ private axisLabelColor;
18
+ private lineColor;
19
+ private tooltipColor;
20
+ private fontFamily;
21
+ private barElements;
22
+ private highlightedValue;
23
+ private highlightedStroke;
24
+ private gradation;
25
+ private maxValueX;
26
+ private mainElementId;
27
+ private scrollContainerId;
28
+ private barBreakWidth;
29
+ private barHeight;
30
+ private barBreakHeight;
31
+ private percentDarkColorOnMove;
32
+ private leftMarginChart;
33
+ private rightMarginChart;
34
+ private topMarginChart;
35
+ private bottomMarginChart;
36
+ private scrollSizeChart;
37
+ private protrudingLinesHeight;
38
+ private labelTextHeight;
39
+ private labelTextFontSize;
40
+ private lineStrokeWidth;
41
+ private topMarginLegend;
42
+ private legendColorWidth;
43
+ private legendColorHeight;
44
+ private legendFontSize;
45
+ private legendBreakColorText;
46
+ private legendElementBreakWidth;
47
+ private legendElementBreakHeight;
48
+ private tooltipOpacity;
49
+ private tooltipPointerWidth;
50
+ private tooltipPointerHeight;
51
+ private tooltipCornerRadius;
52
+ private tooltipFontSize;
53
+ private tooltipPadding;
54
+ private labelNameFontSize;
55
+ private labelNameBreak;
56
+ private resizeWindowBind;
57
+ constructor(componentObj: any, parent: HTMLFormComponent);
58
+ create(): void;
59
+ initResizeWindow(): void;
60
+ resizeWindow(): void;
61
+ destroy(removeFromParent: any): void;
62
+ update(change: any): void;
63
+ buildChart(id: string): void;
64
+ getHAxisLables(): {
65
+ hAxisLabels: number[];
66
+ maxX: number;
67
+ };
68
+ createScrollLayer(hAxisLabels: number[], maxX: number, chartHeight: number): Layer;
69
+ createStaticLayer(width: number, chartHeight: number): {
70
+ staticLayer: Layer;
71
+ background: import("konva/lib/shapes/Rect").Rect;
72
+ };
73
+ createAxisLabel(staticLayer: Layer, width: number, chartHeight: number): void;
74
+ createBarsLayer(legendLayer: Konva.Layer, stageWidth: number): {
75
+ barsLayer: Layer;
76
+ tooltipLayer: Layer;
77
+ maxLegendY: number;
78
+ };
79
+ createLegendByBar(legendX: number, legendY: number, el: BarElement, legendLayer: Layer, darkColor: string, bar: Konva.Rect, tooltip: Konva.Label, tooltipTextBox: Konva.Text, iter: number, fromValue: number, toValue: number, valueOneGradation: number, barHeight: number, barBreakHeight: number, stageWidth: number): {
80
+ legendX: number;
81
+ legendY: number;
82
+ };
83
+ darkenColor(color: string, percent: number): string;
84
+ }
85
+ export { ChartTime24 };
package/dist/source/charts/ChartTime24.js CHANGED
@@ -1,375 +1,375 @@
1
- "use strict";
2
- var __extends = (this && this.__extends) || (function () {
3
- var extendStatics = function (d, b) {
4
- extendStatics = Object.setPrototypeOf ||
5
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
- function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
- return extendStatics(d, b);
8
- };
9
- return function (d, b) {
10
- extendStatics(d, b);
11
- function __() { this.constructor = d; }
12
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
- };
14
- })();
15
- Object.defineProperty(exports, "__esModule", { value: true });
16
- var fh_forms_handler_1 = require("fh-forms-handler");
17
- var konva_1 = require("konva");
18
- var ChartTime24 = /** @class */ (function (_super) {
19
- __extends(ChartTime24, _super);
20
- function ChartTime24(componentObj, parent) {
21
- var _this = _super.call(this, componentObj, parent) || this;
22
- _this.barElements = [];
23
- //? resize event
24
- _this.resizeWindowBind = _this.resizeWindow.bind(_this);
25
- //? base parameters
26
- _this.hAxisName = componentObj.haxisName || '';
27
- _this.vAxisName = componentObj.vaxisName || '';
28
- _this.bgColor = componentObj.bgColor || '#f3f2ec';
29
- _this.tooltipBgColor = componentObj.tooltipBgColor || 'black';
30
- _this.axisLabelColor = componentObj.axisLabelColor || 'black';
31
- _this.lineColor = componentObj.lineColor || 'LightSlateGrey';
32
- _this.tooltipColor = componentObj.tooltipColor || 'white';
33
- _this.fontFamily = componentObj.fontFamily || 'Calibri';
34
- _this.barElements = componentObj.bars;
35
- _this.highlightedValue = Number(componentObj.highlightedValue) || 22;
36
- _this.highlightedStroke = Number(componentObj.highlightedStroke) || 3;
37
- _this.gradation = Number(componentObj.gradation) || 2;
38
- _this.maxValueX = Number(componentObj.maxValueX) || 26;
39
- //? containers ids
40
- _this.mainElementId = componentObj.mainElementId || 'chartContainer';
41
- _this.scrollContainerId = componentObj.scrollContainerId || 'scrollContainer';
42
- //? bar
43
- _this.barBreakWidth = Number(componentObj.barBreakWidth) || 60;
44
- _this.barHeight = Number(componentObj.barHeight) || 100;
45
- _this.barBreakHeight = Number(componentObj.barBreakHeight) || 30;
46
- _this.percentDarkColorOnMove = Number(componentObj.percentDarkColorOnMove) || 20;
47
- //? base margin
48
- _this.leftMarginChart = Number(componentObj.leftMarginChart) || 100;
49
- _this.rightMarginChart = Number(componentObj.rightMarginChart) || 110;
50
- _this.topMarginChart = Number(componentObj.topMarginChart) || 50;
51
- _this.bottomMarginChart = Number(componentObj.bottomMarginChart) || 50;
52
- //? scroll container
53
- _this.scrollSizeChart = Number(componentObj.scrollSizeChart) || 23;
54
- //? lines, value lines
55
- _this.protrudingLinesHeight = Number(componentObj.protrudingLinesHeight) || 10;
56
- _this.labelTextHeight = Number(componentObj.labelTextHeight) || 3;
57
- _this.labelTextFontSize = Number(componentObj.labelTextFontSize) || 22;
58
- _this.lineStrokeWidth = Number(componentObj.lineStrokeWidth) || 1;
59
- //? legend
60
- _this.topMarginLegend = Number(componentObj.topMarginLegend) || 20;
61
- _this.legendColorWidth = Number(componentObj.legendColorWidth) || 40;
62
- _this.legendColorHeight = Number(componentObj.legendColorHeight) || 20;
63
- _this.legendFontSize = Number(componentObj.legendFontSize) || 18;
64
- _this.legendBreakColorText = Number(componentObj.legendBreakColorText) || 5;
65
- _this.legendElementBreakWidth = Number(componentObj.legendElementBreakWidth) || 25;
66
- _this.legendElementBreakHeight = Number(componentObj.legendElementBreakHeight) || 3;
67
- //? tooltip
68
- _this.tooltipOpacity = Number(componentObj.tooltipOpacity) || 0.8;
69
- _this.tooltipPointerWidth = Number(componentObj.tooltipPointerWidth) || 10;
70
- _this.tooltipPointerHeight = Number(componentObj.tooltipPointerHeight) || 20;
71
- _this.tooltipCornerRadius = Number(componentObj.tooltipCornerRadius) || 5;
72
- _this.tooltipFontSize = Number(componentObj.tooltipFontSize) || 18;
73
- _this.tooltipPadding = Number(componentObj.tooltipPadding) || 10;
74
- //? label name prop
75
- _this.labelNameFontSize = Number(componentObj.labelNameFontSize) || 22;
76
- _this.labelNameBreak = Number(componentObj.labelNameBreak) || 13;
77
- _this.resizeWindowBind = _this.resizeWindow.bind(_this);
78
- _this.initResizeWindow();
79
- return _this;
80
- }
81
- ChartTime24.prototype.create = function () {
82
- var mainElement = document.createElement('div');
83
- mainElement.id = this.mainElementId;
84
- mainElement.style.display = 'flex';
85
- this.component = mainElement;
86
- this.wrap(false, false);
87
- this.addStyles();
88
- this.display();
89
- this.buildChart(mainElement.id);
90
- this.display();
91
- };
92
- ChartTime24.prototype.initResizeWindow = function () {
93
- $(window).on('resize', this.resizeWindowBind);
94
- };
95
- ChartTime24.prototype.resizeWindow = function () {
96
- this.destroy(true);
97
- this.create();
98
- this.initResizeWindow();
99
- };
100
- ChartTime24.prototype.destroy = function (removeFromParent) {
101
- $(window).off('resize', this.resizeWindowBind);
102
- _super.prototype.destroy.call(this, removeFromParent);
103
- };
104
- ChartTime24.prototype.update = function (change) {
105
- _super.prototype.update.call(this, change);
106
- this.destroy(true);
107
- this.create();
108
- this.resizeWindowBind = this.resizeWindow.bind(this);
109
- this.initResizeWindow();
110
- };
111
- ChartTime24.prototype.buildChart = function (id) {
112
- //? create hAxisLabels numbers
113
- var _a = this.getHAxisLables(), hAxisLabels = _a.hAxisLabels, maxX = _a.maxX;
114
- var maxXFullWidth = maxX + this.leftMarginChart + this.rightMarginChart;
115
- var stageWidth = maxXFullWidth < this.htmlElement.offsetWidth ? maxXFullWidth : this.htmlElement.offsetWidth;
116
- var chartLinesHeight = (this.barElements.length + 1) * this.barBreakHeight + this.barElements.length * this.barHeight;
117
- var chartHeight = chartLinesHeight + this.protrudingLinesHeight + this.labelTextFontSize + this.labelTextHeight;
118
- var stage = new konva_1.default.Stage({
119
- container: id,
120
- width: stageWidth,
121
- });
122
- var _b = this.createStaticLayer(stageWidth, chartLinesHeight), staticLayer = _b.staticLayer, background = _b.background;
123
- var legendLayer = new konva_1.default.Layer({
124
- x: this.leftMarginChart,
125
- });
126
- stage.add(staticLayer, legendLayer);
127
- stage.draw();
128
- //? create div for scroll stage
129
- var baseContainer = document.getElementById(id);
130
- var baseConvasContainer = baseContainer.childNodes[0];
131
- var scrollLayer = this.createScrollLayer(hAxisLabels, maxX, chartLinesHeight);
132
- var _c = this.createBarsLayer(legendLayer, stageWidth), barsLayer = _c.barsLayer, tooltipLayer = _c.tooltipLayer, maxLegendY = _c.maxLegendY;
133
- var scrollContainer = document.createElement('div');
134
- scrollContainer.id = this.scrollContainerId;
135
- scrollContainer.style.overflow = 'auto';
136
- scrollContainer.style.marginLeft = this.leftMarginChart + "px";
137
- scrollContainer.style.height = chartHeight + this.scrollSizeChart + "px";
138
- scrollContainer.style.position = 'relative';
139
- scrollContainer.style.marginTop = this.topMarginChart + "px";
140
- scrollContainer.style.marginRight = this.rightMarginChart + "px";
141
- baseConvasContainer.appendChild(scrollContainer);
142
- //? Resizze Legend
143
- var legendY = chartHeight + this.scrollSizeChart + this.topMarginChart + this.topMarginLegend;
144
- legendLayer.y(legendY);
145
- var legendWidth = maxLegendY + this.legendColorHeight;
146
- var allHeight = legendY + legendWidth + this.bottomMarginChart;
147
- stage.height(allHeight);
148
- background.height(allHeight);
149
- //? scroll stage
150
- var scrollStage = new konva_1.default.Stage({
151
- container: scrollContainer.id,
152
- width: maxX,
153
- height: chartHeight,
154
- x: this.lineStrokeWidth,
155
- });
156
- scrollStage.add(scrollLayer, barsLayer, tooltipLayer);
157
- scrollStage.draw();
158
- };
159
- ChartTime24.prototype.getHAxisLables = function () {
160
- var _this = this;
161
- var maxTo = this.barElements.reduce(function (prev, curr) {
162
- return (Number(prev.to) > Number(curr.to)) ? prev : curr;
163
- });
164
- var yearStart = 1;
165
- var yearEnd = Number(maxTo.to) > this.maxValueX ? Math.ceil(Number(maxTo.to) / this.gradation) + 2 : Math.ceil(this.maxValueX / 2);
166
- var hAxisLabels = Array(yearEnd - yearStart + 1).fill(0).map(function () { return _this.gradation * yearStart++; });
167
- var baseMaxX = hAxisLabels.length * this.barBreakWidth + this.barBreakWidth;
168
- var tooltipTextBox = new konva_1.default.Text({
169
- text: maxTo.tooltipText.replace(/\\n/g, "\n"),
170
- fontFamily: this.fontFamily,
171
- fontSize: this.tooltipFontSize,
172
- });
173
- var valueOneGradation = this.barBreakWidth / this.gradation;
174
- var widthBar = (Number(maxTo.to) * valueOneGradation + this.leftMarginChart) - (Number(maxTo.from) * valueOneGradation + this.leftMarginChart);
175
- var barXMax = Number(maxTo.from) * valueOneGradation + widthBar;
176
- var maxXTooltip = barXMax + Math.ceil(tooltipTextBox.textWidth) + 2 * this.tooltipPadding + this.tooltipPointerWidth;
177
- var maxX = baseMaxX > maxXTooltip ? baseMaxX : maxXTooltip;
178
- return { hAxisLabels: hAxisLabels, maxX: maxX };
179
- };
180
- ChartTime24.prototype.createScrollLayer = function (hAxisLabels, maxX, chartHeight) {
181
- var _this = this;
182
- var scrollLayer = new konva_1.default.Layer();
183
- //? Create grid
184
- var baseGridLine = new konva_1.default.Line({
185
- points: [0, 0, 0, chartHeight, maxX, chartHeight],
186
- stroke: this.lineColor,
187
- strokeWidth: this.lineStrokeWidth,
188
- lineCap: 'round',
189
- lineJoin: 'round',
190
- });
191
- scrollLayer.add(baseGridLine);
192
- //? labels and line OX
193
- hAxisLabels.forEach(function (el, i) {
194
- var configLabel = {
195
- points: [(i + 1) * _this.barBreakWidth, 0, (i + 1) * _this.barBreakWidth, chartHeight + _this.protrudingLinesHeight],
196
- stroke: _this.lineColor,
197
- strokeWidth: _this.lineStrokeWidth,
198
- lineCap: 'round',
199
- lineJoin: 'round',
200
- };
201
- if (el === _this.highlightedValue) {
202
- configLabel.strokeWidth = _this.highlightedStroke;
203
- }
204
- var labelText = new konva_1.default.Text({
205
- x: (i + 1) * _this.barBreakWidth,
206
- y: chartHeight + _this.protrudingLinesHeight + _this.labelTextHeight,
207
- text: String(el),
208
- fontSize: _this.labelTextFontSize,
209
- fontFamily: _this.fontFamily,
210
- fill: _this.axisLabelColor,
211
- });
212
- labelText.attrs.x -= (labelText.textWidth / 2);
213
- var lineLabel = new konva_1.default.Line(configLabel);
214
- scrollLayer.add(lineLabel);
215
- scrollLayer.add(labelText);
216
- });
217
- return scrollLayer;
218
- };
219
- ChartTime24.prototype.createStaticLayer = function (width, chartHeight) {
220
- var staticLayer = new konva_1.default.Layer();
221
- //? Create background
222
- var background = new konva_1.default.Rect({
223
- width: width,
224
- fill: this.bgColor,
225
- });
226
- staticLayer.add(background);
227
- this.createAxisLabel(staticLayer, width, chartHeight);
228
- return { staticLayer: staticLayer, background: background };
229
- };
230
- ChartTime24.prototype.createAxisLabel = function (staticLayer, width, chartHeight) {
231
- //? Label X NAME
232
- var labelXName = new konva_1.default.Text({
233
- x: width - this.rightMarginChart + this.labelNameBreak,
234
- y: chartHeight + this.protrudingLinesHeight + this.labelTextHeight + this.topMarginChart,
235
- text: this.hAxisName,
236
- fontSize: this.labelNameFontSize,
237
- fontFamily: this.fontFamily,
238
- fill: this.axisLabelColor,
239
- });
240
- staticLayer.add(labelXName);
241
- //? Label Y NAME
242
- var labelYName = new konva_1.default.Text({
243
- x: this.leftMarginChart - this.labelNameBreak,
244
- y: this.topMarginChart,
245
- text: this.vAxisName,
246
- fontSize: this.labelNameFontSize,
247
- fontFamily: this.fontFamily,
248
- fill: this.axisLabelColor,
249
- });
250
- labelYName.attrs.y -= labelYName.textHeight;
251
- labelYName.attrs.x -= labelYName.textWidth;
252
- staticLayer.add(labelYName);
253
- };
254
- ChartTime24.prototype.createBarsLayer = function (legendLayer, stageWidth) {
255
- var _this = this;
256
- var legendX = 0;
257
- var legendY = 0;
258
- var barsLayer = new konva_1.default.Layer();
259
- var tooltip = new konva_1.default.Label({
260
- opacity: this.tooltipOpacity,
261
- });
262
- tooltip.add(new konva_1.default.Tag({
263
- fill: this.tooltipBgColor,
264
- pointerDirection: 'left',
265
- pointerWidth: this.tooltipPointerWidth,
266
- pointerHeight: this.tooltipPointerHeight,
267
- lineJoin: 'round',
268
- cornerRadius: this.tooltipCornerRadius,
269
- }));
270
- var tooltipTextBox = new konva_1.default.Text({
271
- text: '',
272
- fontFamily: this.fontFamily,
273
- fontSize: this.tooltipFontSize,
274
- padding: this.tooltipPadding,
275
- fill: this.tooltipColor,
276
- });
277
- tooltip.add(tooltipTextBox);
278
- tooltip.hide();
279
- this.barElements
280
- .sort(function (a, b) { return (Number(a.position) > Number(b.position) ? 1 : -1); })
281
- .forEach(function (el, i) {
282
- var fromValue = Number(el.from);
283
- var toValue = Number(el.to);
284
- var valueOneGradation = _this.barBreakWidth / _this.gradation;
285
- var barHeight = _this.barHeight;
286
- var barBreakHeight = _this.barBreakHeight;
287
- var bar = new konva_1.default.Rect({
288
- width: (toValue * valueOneGradation + _this.leftMarginChart) - (fromValue * valueOneGradation + _this.leftMarginChart),
289
- height: barHeight,
290
- fill: el.color,
291
- x: fromValue * valueOneGradation,
292
- y: barHeight * i + barBreakHeight * (i + 1),
293
- });
294
- var darkColor = _this.darkenColor(el.color, _this.percentDarkColorOnMove);
295
- bar.on('mousemove', function (e) {
296
- this.fill(darkColor);
297
- //? positioning tooltip
298
- tooltip.position({
299
- x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
300
- y: barHeight * i + barBreakHeight * (i + 1) + barHeight / 2,
301
- });
302
- tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
303
- tooltip.show();
304
- });
305
- bar.on('mouseout', function () {
306
- this.fill(el.color);
307
- tooltip.hide();
308
- });
309
- barsLayer.add(bar);
310
- var legendParam = _this.createLegendByBar(legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, i, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth);
311
- legendX = legendParam.legendX;
312
- legendY = legendParam.legendY;
313
- });
314
- var tooltipLayer = new konva_1.default.Layer();
315
- tooltipLayer.add(tooltip);
316
- return { barsLayer: barsLayer, tooltipLayer: tooltipLayer, maxLegendY: legendY };
317
- };
318
- ChartTime24.prototype.createLegendByBar = function (legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, iter, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth) {
319
- var legend = new konva_1.default.Rect({
320
- width: this.legendColorWidth,
321
- height: this.legendColorHeight,
322
- fill: el.color,
323
- x: legendX,
324
- y: legendY,
325
- });
326
- var legendText = new konva_1.default.Text({
327
- x: legendX + legend.attrs.width + this.legendBreakColorText,
328
- y: legendY,
329
- height: legend.attrs.height,
330
- text: el.legendText,
331
- fontSize: this.legendFontSize,
332
- fontFamily: this.fontFamily,
333
- fill: 'black',
334
- verticalAlign: 'middle'
335
- });
336
- var sumWidthLegend = legend.attrs.width + this.legendElementBreakWidth + legendText.textWidth + this.legendBreakColorText;
337
- var widthLegend = legendX + sumWidthLegend;
338
- var scrollWidth = stageWidth - this.leftMarginChart - this.rightMarginChart;
339
- if (widthLegend > scrollWidth) {
340
- legendY += this.legendColorHeight + this.legendElementBreakHeight;
341
- legendX = 0;
342
- legend.y(legendY);
343
- legend.x(legendX);
344
- legendText.y(legendY);
345
- legendText.x(legendX + legend.attrs.width + this.legendBreakColorText);
346
- }
347
- legendX += sumWidthLegend;
348
- legendLayer.add(legend);
349
- legendLayer.add(legendText);
350
- legend.on('mousemove', function (e) {
351
- this.fill(darkColor);
352
- bar.fill(darkColor);
353
- tooltip.position({
354
- x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
355
- y: barHeight * iter + barBreakHeight * (iter + 1) + barHeight / 2,
356
- });
357
- tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
358
- tooltip.show();
359
- });
360
- legend.on('mouseout', function () {
361
- this.fill(el.color);
362
- bar.fill(el.color);
363
- tooltip.hide();
364
- });
365
- return { legendX: legendX, legendY: legendY };
366
- };
367
- ChartTime24.prototype.darkenColor = function (color, percent) {
368
- 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;
369
- 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);
370
- };
371
- ;
372
- return ChartTime24;
373
- }(fh_forms_handler_1.HTMLFormComponent));
374
- exports.ChartTime24 = ChartTime24;
1
+ "use strict";
2
+ var __extends = (this && this.__extends) || (function () {
3
+ var extendStatics = function (d, b) {
4
+ extendStatics = Object.setPrototypeOf ||
5
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
+ function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
7
+ return extendStatics(d, b);
8
+ };
9
+ return function (d, b) {
10
+ extendStatics(d, b);
11
+ function __() { this.constructor = d; }
12
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
13
+ };
14
+ })();
15
+ Object.defineProperty(exports, "__esModule", { value: true });
16
+ var fh_forms_handler_1 = require("fh-forms-handler");
17
+ var konva_1 = require("konva");
18
+ var ChartTime24 = /** @class */ (function (_super) {
19
+ __extends(ChartTime24, _super);
20
+ function ChartTime24(componentObj, parent) {
21
+ var _this = _super.call(this, componentObj, parent) || this;
22
+ _this.barElements = [];
23
+ //? resize event
24
+ _this.resizeWindowBind = _this.resizeWindow.bind(_this);
25
+ //? base parameters
26
+ _this.hAxisName = componentObj.haxisName || '';
27
+ _this.vAxisName = componentObj.vaxisName || '';
28
+ _this.bgColor = componentObj.bgColor || '#f3f2ec';
29
+ _this.tooltipBgColor = componentObj.tooltipBgColor || 'black';
30
+ _this.axisLabelColor = componentObj.axisLabelColor || 'black';
31
+ _this.lineColor = componentObj.lineColor || 'LightSlateGrey';
32
+ _this.tooltipColor = componentObj.tooltipColor || 'white';
33
+ _this.fontFamily = componentObj.fontFamily || 'Calibri';
34
+ _this.barElements = componentObj.bars;
35
+ _this.highlightedValue = Number(componentObj.highlightedValue) || 22;
36
+ _this.highlightedStroke = Number(componentObj.highlightedStroke) || 3;
37
+ _this.gradation = Number(componentObj.gradation) || 2;
38
+ _this.maxValueX = Number(componentObj.maxValueX) || 26;
39
+ //? containers ids
40
+ _this.mainElementId = componentObj.mainElementId || 'chartContainer';
41
+ _this.scrollContainerId = componentObj.scrollContainerId || 'scrollContainer';
42
+ //? bar
43
+ _this.barBreakWidth = Number(componentObj.barBreakWidth) || 60;
44
+ _this.barHeight = Number(componentObj.barHeight) || 100;
45
+ _this.barBreakHeight = Number(componentObj.barBreakHeight) || 30;
46
+ _this.percentDarkColorOnMove = Number(componentObj.percentDarkColorOnMove) || 20;
47
+ //? base margin
48
+ _this.leftMarginChart = Number(componentObj.leftMarginChart) || 100;
49
+ _this.rightMarginChart = Number(componentObj.rightMarginChart) || 110;
50
+ _this.topMarginChart = Number(componentObj.topMarginChart) || 50;
51
+ _this.bottomMarginChart = Number(componentObj.bottomMarginChart) || 50;
52
+ //? scroll container
53
+ _this.scrollSizeChart = Number(componentObj.scrollSizeChart) || 23;
54
+ //? lines, value lines
55
+ _this.protrudingLinesHeight = Number(componentObj.protrudingLinesHeight) || 10;
56
+ _this.labelTextHeight = Number(componentObj.labelTextHeight) || 3;
57
+ _this.labelTextFontSize = Number(componentObj.labelTextFontSize) || 22;
58
+ _this.lineStrokeWidth = Number(componentObj.lineStrokeWidth) || 1;
59
+ //? legend
60
+ _this.topMarginLegend = Number(componentObj.topMarginLegend) || 20;
61
+ _this.legendColorWidth = Number(componentObj.legendColorWidth) || 40;
62
+ _this.legendColorHeight = Number(componentObj.legendColorHeight) || 20;
63
+ _this.legendFontSize = Number(componentObj.legendFontSize) || 18;
64
+ _this.legendBreakColorText = Number(componentObj.legendBreakColorText) || 5;
65
+ _this.legendElementBreakWidth = Number(componentObj.legendElementBreakWidth) || 25;
66
+ _this.legendElementBreakHeight = Number(componentObj.legendElementBreakHeight) || 3;
67
+ //? tooltip
68
+ _this.tooltipOpacity = Number(componentObj.tooltipOpacity) || 0.8;
69
+ _this.tooltipPointerWidth = Number(componentObj.tooltipPointerWidth) || 10;
70
+ _this.tooltipPointerHeight = Number(componentObj.tooltipPointerHeight) || 20;
71
+ _this.tooltipCornerRadius = Number(componentObj.tooltipCornerRadius) || 5;
72
+ _this.tooltipFontSize = Number(componentObj.tooltipFontSize) || 18;
73
+ _this.tooltipPadding = Number(componentObj.tooltipPadding) || 10;
74
+ //? label name prop
75
+ _this.labelNameFontSize = Number(componentObj.labelNameFontSize) || 22;
76
+ _this.labelNameBreak = Number(componentObj.labelNameBreak) || 13;
77
+ _this.resizeWindowBind = _this.resizeWindow.bind(_this);
78
+ _this.initResizeWindow();
79
+ return _this;
80
+ }
81
+ ChartTime24.prototype.create = function () {
82
+ var mainElement = document.createElement('div');
83
+ mainElement.id = this.mainElementId;
84
+ mainElement.style.display = 'flex';
85
+ this.component = mainElement;
86
+ this.wrap(false, false);
87
+ this.addStyles();
88
+ this.display();
89
+ this.buildChart(mainElement.id);
90
+ this.display();
91
+ };
92
+ ChartTime24.prototype.initResizeWindow = function () {
93
+ $(window).on('resize', this.resizeWindowBind);
94
+ };
95
+ ChartTime24.prototype.resizeWindow = function () {
96
+ this.destroy(true);
97
+ this.create();
98
+ this.initResizeWindow();
99
+ };
100
+ ChartTime24.prototype.destroy = function (removeFromParent) {
101
+ $(window).off('resize', this.resizeWindowBind);
102
+ _super.prototype.destroy.call(this, removeFromParent);
103
+ };
104
+ ChartTime24.prototype.update = function (change) {
105
+ _super.prototype.update.call(this, change);
106
+ this.destroy(true);
107
+ this.create();
108
+ this.resizeWindowBind = this.resizeWindow.bind(this);
109
+ this.initResizeWindow();
110
+ };
111
+ ChartTime24.prototype.buildChart = function (id) {
112
+ //? create hAxisLabels numbers
113
+ var _a = this.getHAxisLables(), hAxisLabels = _a.hAxisLabels, maxX = _a.maxX;
114
+ var maxXFullWidth = maxX + this.leftMarginChart + this.rightMarginChart;
115
+ var stageWidth = maxXFullWidth < this.htmlElement.offsetWidth ? maxXFullWidth : this.htmlElement.offsetWidth;
116
+ var chartLinesHeight = (this.barElements.length + 1) * this.barBreakHeight + this.barElements.length * this.barHeight;
117
+ var chartHeight = chartLinesHeight + this.protrudingLinesHeight + this.labelTextFontSize + this.labelTextHeight;
118
+ var stage = new konva_1.default.Stage({
119
+ container: id,
120
+ width: stageWidth,
121
+ });
122
+ var _b = this.createStaticLayer(stageWidth, chartLinesHeight), staticLayer = _b.staticLayer, background = _b.background;
123
+ var legendLayer = new konva_1.default.Layer({
124
+ x: this.leftMarginChart,
125
+ });
126
+ stage.add(staticLayer, legendLayer);
127
+ stage.draw();
128
+ //? create div for scroll stage
129
+ var baseContainer = document.getElementById(id);
130
+ var baseConvasContainer = baseContainer.childNodes[0];
131
+ var scrollLayer = this.createScrollLayer(hAxisLabels, maxX, chartLinesHeight);
132
+ var _c = this.createBarsLayer(legendLayer, stageWidth), barsLayer = _c.barsLayer, tooltipLayer = _c.tooltipLayer, maxLegendY = _c.maxLegendY;
133
+ var scrollContainer = document.createElement('div');
134
+ scrollContainer.id = this.scrollContainerId;
135
+ scrollContainer.style.overflow = 'auto';
136
+ scrollContainer.style.marginLeft = this.leftMarginChart + "px";
137
+ scrollContainer.style.height = chartHeight + this.scrollSizeChart + "px";
138
+ scrollContainer.style.position = 'relative';
139
+ scrollContainer.style.marginTop = this.topMarginChart + "px";
140
+ scrollContainer.style.marginRight = this.rightMarginChart + "px";
141
+ baseConvasContainer.appendChild(scrollContainer);
142
+ //? Resizze Legend
143
+ var legendY = chartHeight + this.scrollSizeChart + this.topMarginChart + this.topMarginLegend;
144
+ legendLayer.y(legendY);
145
+ var legendWidth = maxLegendY + this.legendColorHeight;
146
+ var allHeight = legendY + legendWidth + this.bottomMarginChart;
147
+ stage.height(allHeight);
148
+ background.height(allHeight);
149
+ //? scroll stage
150
+ var scrollStage = new konva_1.default.Stage({
151
+ container: scrollContainer.id,
152
+ width: maxX,
153
+ height: chartHeight,
154
+ x: this.lineStrokeWidth,
155
+ });
156
+ scrollStage.add(scrollLayer, barsLayer, tooltipLayer);
157
+ scrollStage.draw();
158
+ };
159
+ ChartTime24.prototype.getHAxisLables = function () {
160
+ var _this = this;
161
+ var maxTo = this.barElements.reduce(function (prev, curr) {
162
+ return (Number(prev.to) > Number(curr.to)) ? prev : curr;
163
+ });
164
+ var yearStart = 1;
165
+ var yearEnd = Number(maxTo.to) > this.maxValueX ? Math.ceil(Number(maxTo.to) / this.gradation) + 2 : Math.ceil(this.maxValueX / 2);
166
+ var hAxisLabels = Array(yearEnd - yearStart + 1).fill(0).map(function () { return _this.gradation * yearStart++; });
167
+ var baseMaxX = hAxisLabels.length * this.barBreakWidth + this.barBreakWidth;
168
+ var tooltipTextBox = new konva_1.default.Text({
169
+ text: maxTo.tooltipText.replace(/\\n/g, "\n"),
170
+ fontFamily: this.fontFamily,
171
+ fontSize: this.tooltipFontSize,
172
+ });
173
+ var valueOneGradation = this.barBreakWidth / this.gradation;
174
+ var widthBar = (Number(maxTo.to) * valueOneGradation + this.leftMarginChart) - (Number(maxTo.from) * valueOneGradation + this.leftMarginChart);
175
+ var barXMax = Number(maxTo.from) * valueOneGradation + widthBar;
176
+ var maxXTooltip = barXMax + Math.ceil(tooltipTextBox.textWidth) + 2 * this.tooltipPadding + this.tooltipPointerWidth;
177
+ var maxX = baseMaxX > maxXTooltip ? baseMaxX : maxXTooltip;
178
+ return { hAxisLabels: hAxisLabels, maxX: maxX };
179
+ };
180
+ ChartTime24.prototype.createScrollLayer = function (hAxisLabels, maxX, chartHeight) {
181
+ var _this = this;
182
+ var scrollLayer = new konva_1.default.Layer();
183
+ //? Create grid
184
+ var baseGridLine = new konva_1.default.Line({
185
+ points: [0, 0, 0, chartHeight, maxX, chartHeight],
186
+ stroke: this.lineColor,
187
+ strokeWidth: this.lineStrokeWidth,
188
+ lineCap: 'round',
189
+ lineJoin: 'round',
190
+ });
191
+ scrollLayer.add(baseGridLine);
192
+ //? labels and line OX
193
+ hAxisLabels.forEach(function (el, i) {
194
+ var configLabel = {
195
+ points: [(i + 1) * _this.barBreakWidth, 0, (i + 1) * _this.barBreakWidth, chartHeight + _this.protrudingLinesHeight],
196
+ stroke: _this.lineColor,
197
+ strokeWidth: _this.lineStrokeWidth,
198
+ lineCap: 'round',
199
+ lineJoin: 'round',
200
+ };
201
+ if (el === _this.highlightedValue) {
202
+ configLabel.strokeWidth = _this.highlightedStroke;
203
+ }
204
+ var labelText = new konva_1.default.Text({
205
+ x: (i + 1) * _this.barBreakWidth,
206
+ y: chartHeight + _this.protrudingLinesHeight + _this.labelTextHeight,
207
+ text: String(el),
208
+ fontSize: _this.labelTextFontSize,
209
+ fontFamily: _this.fontFamily,
210
+ fill: _this.axisLabelColor,
211
+ });
212
+ labelText.attrs.x -= (labelText.textWidth / 2);
213
+ var lineLabel = new konva_1.default.Line(configLabel);
214
+ scrollLayer.add(lineLabel);
215
+ scrollLayer.add(labelText);
216
+ });
217
+ return scrollLayer;
218
+ };
219
+ ChartTime24.prototype.createStaticLayer = function (width, chartHeight) {
220
+ var staticLayer = new konva_1.default.Layer();
221
+ //? Create background
222
+ var background = new konva_1.default.Rect({
223
+ width: width,
224
+ fill: this.bgColor,
225
+ });
226
+ staticLayer.add(background);
227
+ this.createAxisLabel(staticLayer, width, chartHeight);
228
+ return { staticLayer: staticLayer, background: background };
229
+ };
230
+ ChartTime24.prototype.createAxisLabel = function (staticLayer, width, chartHeight) {
231
+ //? Label X NAME
232
+ var labelXName = new konva_1.default.Text({
233
+ x: width - this.rightMarginChart + this.labelNameBreak,
234
+ y: chartHeight + this.protrudingLinesHeight + this.labelTextHeight + this.topMarginChart,
235
+ text: this.hAxisName,
236
+ fontSize: this.labelNameFontSize,
237
+ fontFamily: this.fontFamily,
238
+ fill: this.axisLabelColor,
239
+ });
240
+ staticLayer.add(labelXName);
241
+ //? Label Y NAME
242
+ var labelYName = new konva_1.default.Text({
243
+ x: this.leftMarginChart - this.labelNameBreak,
244
+ y: this.topMarginChart,
245
+ text: this.vAxisName,
246
+ fontSize: this.labelNameFontSize,
247
+ fontFamily: this.fontFamily,
248
+ fill: this.axisLabelColor,
249
+ });
250
+ labelYName.attrs.y -= labelYName.textHeight;
251
+ labelYName.attrs.x -= labelYName.textWidth;
252
+ staticLayer.add(labelYName);
253
+ };
254
+ ChartTime24.prototype.createBarsLayer = function (legendLayer, stageWidth) {
255
+ var _this = this;
256
+ var legendX = 0;
257
+ var legendY = 0;
258
+ var barsLayer = new konva_1.default.Layer();
259
+ var tooltip = new konva_1.default.Label({
260
+ opacity: this.tooltipOpacity,
261
+ });
262
+ tooltip.add(new konva_1.default.Tag({
263
+ fill: this.tooltipBgColor,
264
+ pointerDirection: 'left',
265
+ pointerWidth: this.tooltipPointerWidth,
266
+ pointerHeight: this.tooltipPointerHeight,
267
+ lineJoin: 'round',
268
+ cornerRadius: this.tooltipCornerRadius,
269
+ }));
270
+ var tooltipTextBox = new konva_1.default.Text({
271
+ text: '',
272
+ fontFamily: this.fontFamily,
273
+ fontSize: this.tooltipFontSize,
274
+ padding: this.tooltipPadding,
275
+ fill: this.tooltipColor,
276
+ });
277
+ tooltip.add(tooltipTextBox);
278
+ tooltip.hide();
279
+ this.barElements
280
+ .sort(function (a, b) { return (Number(a.position) > Number(b.position) ? 1 : -1); })
281
+ .forEach(function (el, i) {
282
+ var fromValue = Number(el.from);
283
+ var toValue = Number(el.to);
284
+ var valueOneGradation = _this.barBreakWidth / _this.gradation;
285
+ var barHeight = _this.barHeight;
286
+ var barBreakHeight = _this.barBreakHeight;
287
+ var bar = new konva_1.default.Rect({
288
+ width: (toValue * valueOneGradation + _this.leftMarginChart) - (fromValue * valueOneGradation + _this.leftMarginChart),
289
+ height: barHeight,
290
+ fill: el.color,
291
+ x: fromValue * valueOneGradation,
292
+ y: barHeight * i + barBreakHeight * (i + 1),
293
+ });
294
+ var darkColor = _this.darkenColor(el.color, _this.percentDarkColorOnMove);
295
+ bar.on('mousemove', function (e) {
296
+ this.fill(darkColor);
297
+ //? positioning tooltip
298
+ tooltip.position({
299
+ x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
300
+ y: barHeight * i + barBreakHeight * (i + 1) + barHeight / 2,
301
+ });
302
+ tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
303
+ tooltip.show();
304
+ });
305
+ bar.on('mouseout', function () {
306
+ this.fill(el.color);
307
+ tooltip.hide();
308
+ });
309
+ barsLayer.add(bar);
310
+ var legendParam = _this.createLegendByBar(legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, i, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth);
311
+ legendX = legendParam.legendX;
312
+ legendY = legendParam.legendY;
313
+ });
314
+ var tooltipLayer = new konva_1.default.Layer();
315
+ tooltipLayer.add(tooltip);
316
+ return { barsLayer: barsLayer, tooltipLayer: tooltipLayer, maxLegendY: legendY };
317
+ };
318
+ ChartTime24.prototype.createLegendByBar = function (legendX, legendY, el, legendLayer, darkColor, bar, tooltip, tooltipTextBox, iter, fromValue, toValue, valueOneGradation, barHeight, barBreakHeight, stageWidth) {
319
+ var legend = new konva_1.default.Rect({
320
+ width: this.legendColorWidth,
321
+ height: this.legendColorHeight,
322
+ fill: el.color,
323
+ x: legendX,
324
+ y: legendY,
325
+ });
326
+ var legendText = new konva_1.default.Text({
327
+ x: legendX + legend.attrs.width + this.legendBreakColorText,
328
+ y: legendY,
329
+ height: legend.attrs.height,
330
+ text: el.legendText,
331
+ fontSize: this.legendFontSize,
332
+ fontFamily: this.fontFamily,
333
+ fill: 'black',
334
+ verticalAlign: 'middle'
335
+ });
336
+ var sumWidthLegend = legend.attrs.width + this.legendElementBreakWidth + legendText.textWidth + this.legendBreakColorText;
337
+ var widthLegend = legendX + sumWidthLegend;
338
+ var scrollWidth = stageWidth - this.leftMarginChart - this.rightMarginChart;
339
+ if (widthLegend > scrollWidth) {
340
+ legendY += this.legendColorHeight + this.legendElementBreakHeight;
341
+ legendX = 0;
342
+ legend.y(legendY);
343
+ legend.x(legendX);
344
+ legendText.y(legendY);
345
+ legendText.x(legendX + legend.attrs.width + this.legendBreakColorText);
346
+ }
347
+ legendX += sumWidthLegend;
348
+ legendLayer.add(legend);
349
+ legendLayer.add(legendText);
350
+ legend.on('mousemove', function (e) {
351
+ this.fill(darkColor);
352
+ bar.fill(darkColor);
353
+ tooltip.position({
354
+ x: (fromValue * valueOneGradation) + (toValue * valueOneGradation) - (fromValue * valueOneGradation),
355
+ y: barHeight * iter + barBreakHeight * (iter + 1) + barHeight / 2,
356
+ });
357
+ tooltipTextBox.text(el.tooltipText.replace(/\\n/g, "\n"));
358
+ tooltip.show();
359
+ });
360
+ legend.on('mouseout', function () {
361
+ this.fill(el.color);
362
+ bar.fill(el.color);
363
+ tooltip.hide();
364
+ });
365
+ return { legendX: legendX, legendY: legendY };
366
+ };
367
+ ChartTime24.prototype.darkenColor = function (color, percent) {
368
+ 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;
369
+ 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);
370
+ };
371
+ ;
372
+ return ChartTime24;
373
+ }(fh_forms_handler_1.HTMLFormComponent));
374
+ exports.ChartTime24 = ChartTime24;
375
375
  //# sourceMappingURL=ChartTime24.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fhdp-charts",
3
- "version": "4.10.1-SNAPSHOT-1660291672920",
3
+ "version": "4.10.3-SNAPSHOT-1660663331473",
4
4
  "author": {
5
5
  "name": "Krzysztof Czajka",
6
6
  "email": "k.czajka@doittechnology.pl"
@@ -29,8 +29,8 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "canvas": "^2.8.0",
32
- "fh-basic-controls": "4.10.1-SNAPSHOT-1660291672920",
33
- "fh-forms-handler": "4.10.1-SNAPSHOT-1660291672920",
32
+ "fh-basic-controls": "4.10.3-SNAPSHOT-1660663331473",
33
+ "fh-forms-handler": "4.10.3-SNAPSHOT-1660663331473",
34
34
  "konva": "^8.0.4"
35
35
  }
36
36
  }