stats-gl 2.3.1 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/panel.cjs +85 -26
  2. package/dist/panel.cjs.map +1 -1
  3. package/dist/panel.js +85 -26
  4. package/dist/panel.js.map +1 -1
  5. package/dist/stats-gl.d.ts +3 -0
  6. package/lib/panel.ts +113 -33
  7. package/package.json +1 -1
package/dist/panel.cjs CHANGED
@@ -5,6 +5,7 @@ class Panel {
5
5
  this.name = name;
6
6
  this.fg = fg;
7
7
  this.bg = bg;
8
+ this.gradient = null;
8
9
  this.PR = Math.round(window.devicePixelRatio || 1);
9
10
  this.WIDTH = 90 * this.PR;
10
11
  this.HEIGHT = 48 * this.PR;
@@ -15,45 +16,103 @@ class Panel {
15
16
  this.GRAPH_WIDTH = 84 * this.PR;
16
17
  this.GRAPH_HEIGHT = 30 * this.PR;
17
18
  this.canvas = document.createElement("canvas");
18
- this.canvas.width = 90 * this.PR;
19
- this.canvas.height = 48 * this.PR;
19
+ this.canvas.width = this.WIDTH;
20
+ this.canvas.height = this.HEIGHT;
20
21
  this.canvas.style.width = "90px";
21
- this.canvas.style.position = "absolute";
22
22
  this.canvas.style.height = "48px";
23
+ this.canvas.style.position = "absolute";
23
24
  this.canvas.style.cssText = "width:90px;height:48px";
24
25
  this.context = this.canvas.getContext("2d");
25
- if (this.context) {
26
- this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
27
- this.context.textBaseline = "top";
28
- this.context.fillStyle = this.bg;
29
- this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
30
- this.context.fillStyle = this.fg;
31
- this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
32
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
33
- this.context.fillStyle = this.bg;
34
- this.context.globalAlpha = 0.9;
35
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
26
+ this.initializeCanvas();
27
+ }
28
+ createGradient() {
29
+ if (!this.context)
30
+ throw new Error("No context");
31
+ const gradient = this.context.createLinearGradient(
32
+ 0,
33
+ this.GRAPH_Y,
34
+ 0,
35
+ this.GRAPH_Y + this.GRAPH_HEIGHT
36
+ );
37
+ let startColor;
38
+ const endColor = this.fg;
39
+ switch (this.fg.toLowerCase()) {
40
+ case "#0ff":
41
+ startColor = "#006666";
42
+ break;
43
+ case "#0f0":
44
+ startColor = "#006600";
45
+ break;
46
+ case "#ff0":
47
+ startColor = "#666600";
48
+ break;
49
+ case "#e1e1e1":
50
+ startColor = "#666666";
51
+ break;
52
+ default:
53
+ startColor = this.bg;
54
+ break;
36
55
  }
56
+ gradient.addColorStop(0, startColor);
57
+ gradient.addColorStop(1, endColor);
58
+ return gradient;
37
59
  }
38
- update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
39
- let min = Infinity, max = 0;
60
+ initializeCanvas() {
40
61
  if (!this.context)
41
62
  return;
42
- min = Math.min(min, value);
43
- max = Math.max(maxValue, value);
44
- maxGraph = Math.max(maxGraph, valueGraph);
63
+ this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
64
+ this.context.textBaseline = "top";
65
+ this.gradient = this.createGradient();
45
66
  this.context.fillStyle = this.bg;
46
- this.context.globalAlpha = 1;
47
- this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
67
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
68
+ this.context.fillStyle = this.fg;
69
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
48
70
  this.context.fillStyle = this.fg;
49
- this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
50
- this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
51
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
71
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
52
72
  this.context.fillStyle = this.bg;
53
73
  this.context.globalAlpha = 0.9;
54
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
74
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
75
+ }
76
+ update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
77
+ if (!this.context || !this.gradient)
78
+ return;
79
+ const min = Math.min(Infinity, value);
80
+ const max = Math.max(maxValue, value);
81
+ maxGraph = Math.max(maxGraph, valueGraph);
82
+ this.context.globalAlpha = 1;
83
+ this.context.fillStyle = this.bg;
84
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
85
+ this.context.fillStyle = this.fg;
86
+ this.context.fillText(
87
+ `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
88
+ max.toFixed(decimals)
89
+ )})`,
90
+ this.TEXT_X,
91
+ this.TEXT_Y
92
+ );
93
+ this.context.drawImage(
94
+ this.canvas,
95
+ this.GRAPH_X + this.PR,
96
+ this.GRAPH_Y,
97
+ this.GRAPH_WIDTH - this.PR,
98
+ this.GRAPH_HEIGHT,
99
+ this.GRAPH_X,
100
+ this.GRAPH_Y,
101
+ this.GRAPH_WIDTH - this.PR,
102
+ this.GRAPH_HEIGHT
103
+ );
104
+ const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
105
+ if (columnHeight > 0) {
106
+ this.context.globalAlpha = 1;
107
+ this.context.fillStyle = this.gradient;
108
+ this.context.fillRect(
109
+ this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
110
+ this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
111
+ this.PR,
112
+ columnHeight
113
+ );
114
+ }
55
115
  }
56
116
  }
57
- ;
58
117
  exports.Panel = Panel;
59
118
  //# sourceMappingURL=panel.cjs.map
package/dist/panel.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":";;AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAM,OAAO,oBAAoB,CAAC;AAE5C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,WAAW;AACxB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;;"}
1
+ {"version":3,"file":"panel.cjs","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
package/dist/panel.js CHANGED
@@ -3,6 +3,7 @@ class Panel {
3
3
  this.name = name;
4
4
  this.fg = fg;
5
5
  this.bg = bg;
6
+ this.gradient = null;
6
7
  this.PR = Math.round(window.devicePixelRatio || 1);
7
8
  this.WIDTH = 90 * this.PR;
8
9
  this.HEIGHT = 48 * this.PR;
@@ -13,46 +14,104 @@ class Panel {
13
14
  this.GRAPH_WIDTH = 84 * this.PR;
14
15
  this.GRAPH_HEIGHT = 30 * this.PR;
15
16
  this.canvas = document.createElement("canvas");
16
- this.canvas.width = 90 * this.PR;
17
- this.canvas.height = 48 * this.PR;
17
+ this.canvas.width = this.WIDTH;
18
+ this.canvas.height = this.HEIGHT;
18
19
  this.canvas.style.width = "90px";
19
- this.canvas.style.position = "absolute";
20
20
  this.canvas.style.height = "48px";
21
+ this.canvas.style.position = "absolute";
21
22
  this.canvas.style.cssText = "width:90px;height:48px";
22
23
  this.context = this.canvas.getContext("2d");
23
- if (this.context) {
24
- this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
25
- this.context.textBaseline = "top";
26
- this.context.fillStyle = this.bg;
27
- this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
28
- this.context.fillStyle = this.fg;
29
- this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
30
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
31
- this.context.fillStyle = this.bg;
32
- this.context.globalAlpha = 0.9;
33
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
24
+ this.initializeCanvas();
25
+ }
26
+ createGradient() {
27
+ if (!this.context)
28
+ throw new Error("No context");
29
+ const gradient = this.context.createLinearGradient(
30
+ 0,
31
+ this.GRAPH_Y,
32
+ 0,
33
+ this.GRAPH_Y + this.GRAPH_HEIGHT
34
+ );
35
+ let startColor;
36
+ const endColor = this.fg;
37
+ switch (this.fg.toLowerCase()) {
38
+ case "#0ff":
39
+ startColor = "#006666";
40
+ break;
41
+ case "#0f0":
42
+ startColor = "#006600";
43
+ break;
44
+ case "#ff0":
45
+ startColor = "#666600";
46
+ break;
47
+ case "#e1e1e1":
48
+ startColor = "#666666";
49
+ break;
50
+ default:
51
+ startColor = this.bg;
52
+ break;
34
53
  }
54
+ gradient.addColorStop(0, startColor);
55
+ gradient.addColorStop(1, endColor);
56
+ return gradient;
35
57
  }
36
- update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
37
- let min = Infinity, max = 0;
58
+ initializeCanvas() {
38
59
  if (!this.context)
39
60
  return;
40
- min = Math.min(min, value);
41
- max = Math.max(maxValue, value);
42
- maxGraph = Math.max(maxGraph, valueGraph);
61
+ this.context.font = "bold " + 9 * this.PR + "px Helvetica,Arial,sans-serif";
62
+ this.context.textBaseline = "top";
63
+ this.gradient = this.createGradient();
43
64
  this.context.fillStyle = this.bg;
44
- this.context.globalAlpha = 1;
45
- this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
65
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
66
+ this.context.fillStyle = this.fg;
67
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
46
68
  this.context.fillStyle = this.fg;
47
- this.context.fillText(value.toFixed(decimals) + " " + this.name + " (" + min.toFixed(decimals) + "-" + parseFloat(max.toFixed(decimals)) + ")", this.TEXT_X, this.TEXT_Y);
48
- this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
49
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
69
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
50
70
  this.context.fillStyle = this.bg;
51
71
  this.context.globalAlpha = 0.9;
52
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT);
72
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
73
+ }
74
+ update(value, valueGraph, maxValue, maxGraph, decimals = 0) {
75
+ if (!this.context || !this.gradient)
76
+ return;
77
+ const min = Math.min(Infinity, value);
78
+ const max = Math.max(maxValue, value);
79
+ maxGraph = Math.max(maxGraph, valueGraph);
80
+ this.context.globalAlpha = 1;
81
+ this.context.fillStyle = this.bg;
82
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
83
+ this.context.fillStyle = this.fg;
84
+ this.context.fillText(
85
+ `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
86
+ max.toFixed(decimals)
87
+ )})`,
88
+ this.TEXT_X,
89
+ this.TEXT_Y
90
+ );
91
+ this.context.drawImage(
92
+ this.canvas,
93
+ this.GRAPH_X + this.PR,
94
+ this.GRAPH_Y,
95
+ this.GRAPH_WIDTH - this.PR,
96
+ this.GRAPH_HEIGHT,
97
+ this.GRAPH_X,
98
+ this.GRAPH_Y,
99
+ this.GRAPH_WIDTH - this.PR,
100
+ this.GRAPH_HEIGHT
101
+ );
102
+ const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
103
+ if (columnHeight > 0) {
104
+ this.context.globalAlpha = 1;
105
+ this.context.fillStyle = this.gradient;
106
+ this.context.fillRect(
107
+ this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
108
+ this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
109
+ this.PR,
110
+ columnHeight
111
+ );
112
+ }
53
113
  }
54
114
  }
55
- ;
56
115
  export {
57
116
  Panel
58
117
  };
package/dist/panel.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"AAAA,MAAM,MAAM;AAAA,EAgBR,YAAY,MAAc,IAAY,IAAY;AAE9C,SAAK,OAAO;AACZ,SAAK,KAAK;AACV,SAAK,KAAK;AACV,SAAK,KAAK,KAAK,MAAM,OAAO,oBAAoB,CAAC;AAE5C,SAAA,QAAQ,KAAK,KAAK;AAClB,SAAA,SAAS,KAAK,KAAK;AACnB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,SAAS,IAAI,KAAK;AAClB,SAAA,UAAU,IAAI,KAAK;AACnB,SAAA,UAAU,KAAK,KAAK;AACpB,SAAA,cAAc,KAAK,KAAK;AACxB,SAAA,eAAe,KAAK,KAAK;AAEzB,SAAA,SAAS,SAAS,cAAc,QAAQ;AACxC,SAAA,OAAO,QAAQ,KAAK,KAAK;AACzB,SAAA,OAAO,SAAS,KAAK,KAAK;AAC1B,SAAA,OAAO,MAAM,QAAQ;AACrB,SAAA,OAAO,MAAM,WAAW;AACxB,SAAA,OAAO,MAAM,SAAS;AACtB,SAAA,OAAO,MAAM,UAAU;AAE5B,SAAK,UAAU,KAAK,OAAO,WAAW,IAAI;AAE1C,QAAI,KAAK,SAAS;AACd,WAAK,QAAQ,OAAO,UAAW,IAAI,KAAK,KAAM;AAC9C,WAAK,QAAQ,eAAe;AAEvB,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,MAAM;AAE9C,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,SAAS,KAAK,MAAM,KAAK,QAAQ,KAAK,MAAM;AACpD,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAEhF,WAAA,QAAQ,YAAY,KAAK;AAC9B,WAAK,QAAQ,cAAc;AACtB,WAAA,QAAQ,SAAS,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,YAAY;AAAA,IACzF;AAAA,EAEJ;AAAA,EAEA,OAAO,OAAe,YAAoB,UAAkB,UAAkB,WAAW,GAAG;AACpF,QAAA,MAAM,UAAU,MAAM;AAE1B,QAAI,CAAC,KAAK;AAAS;AAEb,UAAA,KAAK,IAAI,KAAK,KAAK;AACnB,UAAA,KAAK,IAAI,UAAU,KAAK;AACnB,eAAA,KAAK,IAAI,UAAU,UAAU;AAEnC,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAC3B,SAAK,QAAQ,SAAS,GAAG,GAAG,KAAK,OAAO,KAAK,OAAO;AAC/C,SAAA,QAAQ,YAAY,KAAK;AACzB,SAAA,QAAQ,SAAS,MAAM,QAAQ,QAAQ,IAAI,MAAM,KAAK,OAAO,OAAO,IAAI,QAAQ,QAAQ,IAAI,MAAM,WAAW,IAAI,QAAQ,QAAQ,CAAC,IAAI,KAAK,KAAK,QAAQ,KAAK,MAAM;AAEnK,SAAA,QAAQ,UAAU,KAAK,QAAQ,KAAK,UAAU,KAAK,IAAI,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,cAAc,KAAK,SAAS,KAAK,SAAS,KAAK,cAAc,KAAK,IAAI,KAAK,YAAY;AAElM,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,IAAI,KAAK,YAAY;AAEpG,SAAA,QAAQ,YAAY,KAAK;AAC9B,SAAK,QAAQ,cAAc;AAE3B,SAAK,QAAQ,SAAS,KAAK,UAAU,KAAK,cAAc,KAAK,IAAI,KAAK,SAAS,KAAK,KAAM,IAAK,aAAa,YAAc,KAAK,YAAY;AAAA,EAC/I;AACJ;AAAC;"}
1
+ {"version":3,"file":"panel.js","sources":["../lib/panel.ts"],"sourcesContent":null,"names":[],"mappings":"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"}
package/dist/stats-gl.d.ts CHANGED
@@ -4,6 +4,7 @@ declare class Panel {
4
4
  name: string;
5
5
  fg: string;
6
6
  bg: string;
7
+ gradient: CanvasGradient | null;
7
8
  PR: number;
8
9
  WIDTH: number;
9
10
  HEIGHT: number;
@@ -14,6 +15,8 @@ declare class Panel {
14
15
  GRAPH_WIDTH: number;
15
16
  GRAPH_HEIGHT: number;
16
17
  constructor(name: string, fg: string, bg: string);
18
+ private createGradient;
19
+ private initializeCanvas;
17
20
  update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals?: number): void;
18
21
  }
19
22
 
package/lib/panel.ts CHANGED
@@ -4,6 +4,7 @@ class Panel {
4
4
  name: string;
5
5
  fg: string;
6
6
  bg: string;
7
+ gradient: CanvasGradient | null;
7
8
  PR: number;
8
9
  WIDTH: number;
9
10
  HEIGHT: number;
@@ -15,10 +16,10 @@ class Panel {
15
16
  GRAPH_HEIGHT: number;
16
17
 
17
18
  constructor(name: string, fg: string, bg: string) {
18
-
19
19
  this.name = name;
20
20
  this.fg = fg;
21
21
  this.bg = bg;
22
+ this.gradient = null;
22
23
  this.PR = Math.round(window.devicePixelRatio || 1);
23
24
 
24
25
  this.WIDTH = 90 * this.PR;
@@ -31,57 +32,136 @@ class Panel {
31
32
  this.GRAPH_HEIGHT = 30 * this.PR;
32
33
 
33
34
  this.canvas = document.createElement('canvas');
34
- this.canvas.width = 90 * this.PR;
35
- this.canvas.height = 48 * this.PR;
35
+ this.canvas.width = this.WIDTH;
36
+ this.canvas.height = this.HEIGHT;
36
37
  this.canvas.style.width = '90px';
37
- this.canvas.style.position = 'absolute';
38
38
  this.canvas.style.height = '48px';
39
+ this.canvas.style.position = 'absolute';
39
40
  this.canvas.style.cssText = 'width:90px;height:48px';
40
41
 
41
42
  this.context = this.canvas.getContext('2d');
43
+ this.initializeCanvas();
44
+ }
42
45
 
43
- if (this.context) {
44
- this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
45
- this.context.textBaseline = 'top';
46
-
47
- this.context.fillStyle = this.bg;
48
- this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
49
-
50
- this.context.fillStyle = this.fg;
51
- this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
52
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
53
-
54
- this.context.fillStyle = this.bg;
55
- this.context.globalAlpha = 0.9;
56
- this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
46
+ private createGradient(): CanvasGradient {
47
+ if (!this.context) throw new Error('No context');
48
+
49
+ const gradient = this.context.createLinearGradient(
50
+ 0,
51
+ this.GRAPH_Y,
52
+ 0,
53
+ this.GRAPH_Y + this.GRAPH_HEIGHT
54
+ );
55
+
56
+ let startColor: string;
57
+ const endColor: string = this.fg;
58
+
59
+ switch (this.fg.toLowerCase()) {
60
+ case '#0ff': // Cyan
61
+ startColor = '#006666'; // Dark Cyan
62
+ break;
63
+ case '#0f0': // Green
64
+ startColor = '#006600'; // Dark Green
65
+ break;
66
+ case '#ff0': // Yellow
67
+ startColor = '#666600'; // Dark Yellow
68
+ break;
69
+ case '#e1e1e1': // Light Gray
70
+ startColor = '#666666'; // Medium Gray
71
+ break;
72
+ default:
73
+ startColor = this.bg;
74
+ break;
57
75
  }
58
76
 
59
- }
77
+ gradient.addColorStop(0, startColor);
78
+ gradient.addColorStop(1, endColor);
60
79
 
61
- update(value: number, valueGraph: number, maxValue: number, maxGraph: number, decimals = 0) {
62
- let min = Infinity, max = 0;
80
+ return gradient;
81
+ }
63
82
 
83
+ private initializeCanvas() {
64
84
  if (!this.context) return;
65
85
 
66
- min = Math.min(min, value);
67
- max = Math.max(maxValue, value);
68
- maxGraph = Math.max(maxGraph, valueGraph);
86
+ this.context.font = 'bold ' + (9 * this.PR) + 'px Helvetica,Arial,sans-serif';
87
+ this.context.textBaseline = 'top';
69
88
 
89
+ // Create gradient
90
+ this.gradient = this.createGradient();
91
+
92
+ // Fill background
70
93
  this.context.fillStyle = this.bg;
71
- this.context.globalAlpha = 1;
72
- this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
73
- this.context.fillStyle = this.fg;
74
- this.context.fillText(value.toFixed(decimals) + ' ' + this.name + ' (' + min.toFixed(decimals) + '-' + parseFloat(max.toFixed(decimals)) + ')', this.TEXT_X, this.TEXT_Y);
94
+ this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
75
95
 
76
- this.context.drawImage(this.canvas, this.GRAPH_X + this.PR, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT, this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH - this.PR, this.GRAPH_HEIGHT);
96
+ // Draw text
97
+ this.context.fillStyle = this.fg;
98
+ this.context.fillText(this.name, this.TEXT_X, this.TEXT_Y);
77
99
 
78
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, this.GRAPH_HEIGHT);
100
+ // Draw initial graph area
101
+ this.context.fillStyle = this.fg;
102
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
79
103
 
104
+ // Apply semi-transparent background
80
105
  this.context.fillStyle = this.bg;
81
106
  this.context.globalAlpha = 0.9;
107
+ this.context.fillRect(this.GRAPH_X, this.GRAPH_Y, this.GRAPH_WIDTH, this.GRAPH_HEIGHT);
108
+ }
109
+
110
+ update(
111
+ value: number,
112
+ valueGraph: number,
113
+ maxValue: number,
114
+ maxGraph: number,
115
+ decimals = 0
116
+ ) {
117
+ if (!this.context || !this.gradient) return;
118
+
119
+ const min = Math.min(Infinity, value);
120
+ const max = Math.max(maxValue, value);
121
+ maxGraph = Math.max(maxGraph, valueGraph);
82
122
 
83
- this.context.fillRect(this.GRAPH_X + this.GRAPH_WIDTH - this.PR, this.GRAPH_Y, this.PR, ((1 - (valueGraph / maxGraph))) * this.GRAPH_HEIGHT);
123
+ // Clear and redraw background
124
+ this.context.globalAlpha = 1;
125
+ this.context.fillStyle = this.bg;
126
+ this.context.fillRect(0, 0, this.WIDTH, this.GRAPH_Y);
127
+
128
+ // Draw text
129
+ this.context.fillStyle = this.fg;
130
+ this.context.fillText(
131
+ `${value.toFixed(decimals)} ${this.name} (${min.toFixed(decimals)}-${parseFloat(
132
+ max.toFixed(decimals)
133
+ )})`,
134
+ this.TEXT_X,
135
+ this.TEXT_Y
136
+ );
137
+
138
+ // Shift the graph left
139
+ this.context.drawImage(
140
+ this.canvas,
141
+ this.GRAPH_X + this.PR,
142
+ this.GRAPH_Y,
143
+ this.GRAPH_WIDTH - this.PR,
144
+ this.GRAPH_HEIGHT,
145
+ this.GRAPH_X,
146
+ this.GRAPH_Y,
147
+ this.GRAPH_WIDTH - this.PR,
148
+ this.GRAPH_HEIGHT
149
+ );
150
+
151
+ // Draw new column with gradient
152
+ const columnHeight = this.GRAPH_HEIGHT - (1 - valueGraph / maxGraph) * this.GRAPH_HEIGHT;
153
+
154
+ if (columnHeight > 0) {
155
+ this.context.globalAlpha = 1;
156
+ this.context.fillStyle = this.gradient;
157
+ this.context.fillRect(
158
+ this.GRAPH_X + this.GRAPH_WIDTH - this.PR,
159
+ this.GRAPH_Y + this.GRAPH_HEIGHT - columnHeight,
160
+ this.PR,
161
+ columnHeight
162
+ );
163
+ }
84
164
  }
85
- };
165
+ }
86
166
 
87
- export { Panel };
167
+ export { Panel };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "stats-gl",
3
- "version": "2.3.1",
3
+ "version": "2.4.1",
4
4
  "type": "module",
5
5
  "author": "Renaud ROHLINGER (https://github.com/RenaudRohlinger)",
6
6
  "homepage": "https://github.com/RenaudRohlinger/stats-gl",