Skip to content

Commit 97edf70

Browse files
mrtomeqmrtomeq
committed
Merge branch 'main' of https://github.com/KensoBI/spc-chart 
2 parents c525633 + 1133849 commit 97edf70

25 files changed

Lines changed: 5023 additions & 4265 deletions

‎CHANGELOG.md‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
# Changelog
22

3-
## 2.0.0
3+
## 2.1.1
4+
5+
**New Features:**
6+
- **Alerting Support**: Support for Grafana alerting with alert states and annotations displayed on the chart.
7+
- Alert states are now visualized directly on the chart
8+
- Alert annotations show historical alert events on the timeline
9+
- Create alerts based on SPC control limits (UCL, LCL) to detect out-of-control processes
10+
- **Annotation Support**: Support for Grafana annotations with ability to create custom annotations directly on the chart.
11+
12+
**Enhancements:**
13+
14+
- **Dependency Upgrades**: Updated all dependencies to latest versions for improved security and performance.
15+
16+
**Compatibility:**
17+
18+
- Now supports **React 19**.
19+
- Now supports **Grafana 13**.
20+
21+
## 2.0.2
422
**New Features:**
523
- **Complete panel rewrite** for improved performance and functionality.
624
- **Added support for XmR chart** creation.

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,28 @@ Welcome to the **KensoBI SPC Chart** panel for **Grafana**. This plugin enables
1515
- **Subgrouping:** Group your samples into subgroups for analysis.
1616

1717
- **Aggregation:** Aggregate your data by moving range, range, mean, or standard deviation.
18+
- **Alerting Support:** Support for Grafana alerting with alert states and annotations displayed on the chart.
19+
20+
- **Threshold Visualization:** Configure and visualize alert thresholds alongside SPC control limits.
21+
22+
## Alerting and Custom Annotations
23+
24+
The SPC Chart panel supports Grafana alerting with annotations:
25+
26+
- **Alert States:** The panel displays alert states directly on the chart, making it easy to see when alerts are firing.
27+
28+
- **Alert Annotations:** Historical alert events are shown as annotations on the chart timeline, providing visual context for when process control issues occurred.
29+
30+
- **Threshold Configuration:** Configure alert thresholds in the panel's field configuration to define when alerts should trigger. These thresholds are displayed alongside your SPC control limits.
31+
32+
- **SPC-Based Alerts:** Create alert rules based on SPC control limits (UCL, LCL) to automatically detect when your process goes out of statistical control. For example:
33+
- Alert when values exceed the Upper Control Limit (UCL)
34+
- Alert when values fall below the Lower Control Limit (LCL)
35+
- Alert on trends or patterns that indicate special cause variation
36+
37+
- Create custom annotations directly on the chart.
38+
39+
To create an alert based on SPC limits, configure an alert rule in Grafana that uses the same query as your SPC chart, and set threshold conditions based on your calculated control limits.
1840

1941
## Documentation
2042

‎docker-compose.yaml‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
version: '3.7'
2-
31
services:
42
grafana:
5-
image: grafana/grafana:latest
3+
image: ${GRAFANA_IMAGE:-grafana/grafana}:${GRAFANA_VERSION:-latest}
64
container_name: 'kensobi-spc-panel'
75
ports:
86
- 3000:3000/tcp

‎jest-setup.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,34 @@
11
// Jest setup provided by Grafana scaffolding
22
import './.config/jest-setup';
3+
4+
// React 19 requires additional globals for Jest environment
5+
// Polyfill MessageChannel for scheduling
6+
if (typeof MessageChannel === 'undefined') {
7+
global.MessageChannel = class MessageChannel {
8+
constructor() {
9+
this.port1 = {
10+
postMessage: (message) => {
11+
if (this.port2.onmessage) {
12+
setTimeout(() => this.port2.onmessage({ data: message }), 0);
13+
}
14+
},
15+
onmessage: null,
16+
};
17+
this.port2 = {
18+
postMessage: (message) => {
19+
if (this.port1.onmessage) {
20+
setTimeout(() => this.port1.onmessage({ data: message }), 0);
21+
}
22+
},
23+
onmessage: null,
24+
};
25+
}
26+
};
27+
}
28+
29+
// Polyfill TextEncoder/TextDecoder
30+
if (typeof TextEncoder === 'undefined') {
31+
const util = require('util');
32+
global.TextEncoder = util.TextEncoder;
33+
global.TextDecoder = util.TextDecoder;
34+
}

‎package.json‎

Lines changed: 56 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "kensobi-spc-panel",
3-
"version": "2.0.2",
4-
"description": "",
3+
"version": "2.1.1",
4+
"description": "reate common SPC charts like Xbar-R, XbarS, and XmR charts.",
55
"scripts": {
66
"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
77
"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
@@ -18,59 +18,71 @@
1818
"author": "Kenso Software",
1919
"license": "AGPL-3.0-only",
2020
"devDependencies": {
21-
"@babel/core": "^7.21.4",
22-
"@grafana/eslint-config": "^7.0.0",
23-
"@grafana/plugin-e2e": "^1.8.3",
24-
"@grafana/tsconfig": "^2.0.0",
25-
"@playwright/test": "^1.41.2",
26-
"@swc/core": "^1.3.90",
27-
"@swc/helpers": "^0.5.0",
28-
"@swc/jest": "^0.2.26",
29-
"@testing-library/jest-dom": "6.1.4",
30-
"@testing-library/react": "14.0.0",
31-
"@types/jest": "^29.5.0",
32-
"@types/node": "^20.8.7",
21+
"@babel/core": "^7.28.6",
22+
"@grafana/eslint-config": "^9.0.0",
23+
"@grafana/plugin-e2e": "^3.1.2",
24+
"@grafana/tsconfig": "^2.0.1",
25+
"@playwright/test": "^1.58.0",
26+
"@stylistic/eslint-plugin-ts": "^4.4.1",
27+
"@swc/core": "^1.15.11",
28+
"@swc/helpers": "^0.5.18",
29+
"@swc/jest": "^0.2.39",
30+
"@testing-library/jest-dom": "^6.9.1",
31+
"@testing-library/react": "^16.3.2",
32+
"@types/jest": "^29.5.14",
33+
"@types/node": "^22.12.9",
3334
"@types/react-router-dom": "^5.2.0",
34-
"@types/testing-library__jest-dom": "5.14.8",
35-
"@types/tinycolor2": "1.4.6",
36-
"copy-webpack-plugin": "^11.0.0",
37-
"css-loader": "^6.7.3",
38-
"eslint-plugin-deprecation": "^2.0.0",
39-
"eslint-webpack-plugin": "^4.0.1",
40-
"fork-ts-checker-webpack-plugin": "^8.0.0",
41-
"glob": "^10.2.7",
42-
"identity-obj-proxy": "3.0.0",
35+
"@types/testing-library__jest-dom": "^5.14.9",
36+
"@types/tinycolor2": "^1.4.6",
37+
"@typescript-eslint/eslint-plugin": "^8.54.0",
38+
"@typescript-eslint/parser": "^8.54.0",
39+
"copy-webpack-plugin": "^13.0.1",
40+
"css-loader": "^7.1.3",
41+
"eslint": "^8.57.1",
42+
"eslint-config-prettier": "^10.1.8",
43+
"eslint-plugin-deprecation": "^3.0.0",
44+
"eslint-plugin-jsdoc": "^62.4.1",
45+
"eslint-plugin-react": "^7.37.5",
46+
"eslint-plugin-react-hooks": "^7.0.1",
47+
"eslint-webpack-plugin": "^4.2.0",
48+
"fork-ts-checker-webpack-plugin": "^9.1.0",
49+
"glob": "^11.0.0",
50+
"identity-obj-proxy": "^3.0.0",
4351
"imports-loader": "^5.0.0",
44-
"jest": "^29.5.0",
45-
"jest-environment-jsdom": "^29.5.0",
46-
"prettier": "^2.8.7",
52+
"jest": "^29.7.0",
53+
"jest-environment-jsdom": "^29.7.0",
54+
"prettier": "^3.8.1",
55+
"react": "^19.2.4",
56+
"react-dom": "^19.2.4",
4757
"replace-in-file-webpack-plugin": "^1.0.6",
48-
"sass": "1.63.2",
49-
"sass-loader": "13.3.1",
50-
"style-loader": "3.3.3",
51-
"swc-loader": "^0.2.3",
52-
"terser-webpack-plugin": "^5.3.10",
58+
"sass": "^1.97.3",
59+
"sass-loader": "^16.0.6",
60+
"style-loader": "^4.0.0",
61+
"swc-loader": "^0.2.7",
62+
"terser-webpack-plugin": "^5.3.16",
5363
"ts-node": "^10.9.2",
5464
"tsconfig-paths": "^4.2.0",
55-
"typescript": "5.5.4",
56-
"webpack": "^5.94.0",
57-
"webpack-cli": "^5.1.4",
65+
"typescript": "^5.9.3",
66+
"webpack": "^5.104.1",
67+
"webpack-cli": "^6.0.1",
5868
"webpack-livereload-plugin": "^3.0.2",
5969
"webpack-subresource-integrity": "^5.1.0",
6070
"webpack-virtual-modules": "^0.6.2"
6171
},
6272
"engines": {
63-
"node": ">=20"
73+
"node": ">= 20 <25"
6474
},
6575
"dependencies": {
66-
"@emotion/css": "11.10.6",
67-
"@grafana/data": "^11.2.2",
68-
"@grafana/runtime": "^11.2.2",
69-
"@grafana/ui": "^11.2.2",
70-
"@grafana/schema": "^11.2.2",
71-
"react": "18.2.0",
72-
"react-dom": "18.2.0",
73-
"tslib": "2.5.3",
74-
"tinycolor2": "1.6.0"
76+
"@emotion/css": "^11.13.5",
77+
"@grafana/data": "^11.6.10",
78+
"@grafana/runtime": "^11.6.10",
79+
"@grafana/schema": "^11.6.10",
80+
"@grafana/ui": "^11.6.10",
81+
"tinycolor2": "^1.6.0",
82+
"tslib": "^2.8.1"
83+
},
84+
"peerDependencies": {
85+
"react": "^18.2.0 || ^19.0.0",
86+
"react-dom": "^18.2.0 || ^19.0.0"
7587
}
7688
}

‎src/CHANGELOG.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,21 @@
11
# Changelog
2+
## 2.1.1
3+
4+
**New Features:**
5+
- **Alerting Support**: Support for Grafana alerting with alert states and annotations displayed on the chart.
6+
- Alert states are now visualized directly on the chart
7+
- Alert annotations show historical alert events on the timeline
8+
- Create alerts based on SPC control limits (UCL, LCL) to detect out-of-control processes
9+
- **Annotation Support**: Support for Grafana annotations with ability to create custom annotations directly on the chart.
10+
11+
**Enhancements:**
12+
13+
- **Dependency Upgrades**: Updated all dependencies to latest versions for improved security and performance.
14+
15+
**Compatibility:**
16+
17+
- Now supports **React 19**.
18+
- Now supports **Grafana 13**.
219

320
## 2.0.2
421
**New Features:**

‎src/README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,28 @@ Welcome to the **KensoBI SPC Chart** panel for **Grafana**. This plugin enables
1515
- **Subgrouping:** Group your samples into subgroups for analysis.
1616

1717
- **Aggregation:** Aggregate your data by moving range, range, mean, or standard deviation.
18+
- **Alerting Support:** Support for Grafana alerting with alert states and annotations displayed on the chart.
19+
20+
- **Threshold Visualization:** Configure and visualize alert thresholds alongside SPC control limits.
21+
22+
## Alerting and Custom Annotations
23+
24+
The SPC Chart panel supports Grafana alerting with annotations:
25+
26+
- **Alert States:** The panel displays alert states directly on the chart, making it easy to see when alerts are firing.
27+
28+
- **Alert Annotations:** Historical alert events are shown as annotations on the chart timeline, providing visual context for when process control issues occurred.
29+
30+
- **Threshold Configuration:** Configure alert thresholds in the panel's field configuration to define when alerts should trigger. These thresholds are displayed alongside your SPC control limits.
31+
32+
- **SPC-Based Alerts:** Create alert rules based on SPC control limits (UCL, LCL) to automatically detect when your process goes out of statistical control. For example:
33+
- Alert when values exceed the Upper Control Limit (UCL)
34+
- Alert when values fall below the Lower Control Limit (LCL)
35+
- Alert on trends or patterns that indicate special cause variation
36+
37+
- Create custom annotations directly on the chart.
38+
39+
To create an alert based on SPC limits, configure an alert rule in Grafana that uses the same query as your SPC chart, and set threshold conditions based on your calculated control limits.
1840

1941
## Documentation
2042

0 commit comments

Comments
 (0)