From 51d78c67acfc3844c22850d68f0332a44666b8f8 Mon Sep 17 00:00:00 2001
From: Bernt Popp <bernt.popp@gmail.com>
Date: Fri, 13 Sep 2024 18:48:01 +0200
Subject: [PATCH] fix: Adjust fill colors and add invisible 'Ceiling' dataset

---
 src/config/chartConfig.js | 31 +++++++++++++++++++++----------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/config/chartConfig.js b/src/config/chartConfig.js
index 592aca7..8376983 100644
--- a/src/config/chartConfig.js
+++ b/src/config/chartConfig.js
@@ -6,9 +6,9 @@ export default {
           label: 'Class 1A',
           data: [{ x: 15, y: 100 }, { x: 80, y: 100 }],
           borderColor: 'black',
-          backgroundColor: 'rgba(196, 214, 145, 0.2)',
+          backgroundColor: 'rgba(196, 214, 145, 0.6)', // Adjusted color with a higher alpha for visibility
           borderWidth: 2,
-          fill: 'origin',
+          fill: '+1',
           showLine: true,
           pointRadius: 0,
           hoverRadius: 0,
@@ -17,9 +17,9 @@ export default {
           label: 'Class 1B',
           data: [{ x: 15, y: 187.535 }, { x: 80, y: 493.599 }],
           borderColor: '#7aaa12',
-          backgroundColor: 'rgba(253, 253, 131, 0.2)',
+          backgroundColor: 'rgba(253, 253, 131, 0.2)', // Adjusted fill color for Class 1B
           borderWidth: 2,
-          fill: '1',
+          fill: '+1',
           showLine: true,
           pointRadius: 0,
           hoverRadius: 0,
@@ -28,9 +28,9 @@ export default {
           label: 'Class 1C',
           data: [{ x: 15, y: 233.695 }, { x: 80, y: 1596.134 }],
           borderColor: '#ccff99',
-          backgroundColor: 'rgba(255, 217, 163, 0.2)',
+          backgroundColor: 'rgba(255, 217, 163, 0.6)', // Adjusted fill color for Class 1C
           borderWidth: 2,
-          fill: '1',
+          fill: '+1',
           showLine: true,
           pointRadius: 0,
           hoverRadius: 0,
@@ -39,9 +39,9 @@ export default {
           label: 'Class 1D',
           data: [{ x: 15, y: 290.292 }, { x: 80, y: 5074.514 }],
           borderColor: '#ffc000',
-          backgroundColor: 'rgba(255, 224, 204, 0.2)',
+          backgroundColor: 'rgba(255, 224, 204, 0.6)', // Adjusted fill color for Class 1D
           borderWidth: 2,
-          fill: '1',
+          fill: '+1',
           showLine: true,
           pointRadius: 0,
           hoverRadius: 0,
@@ -50,13 +50,24 @@ export default {
           label: 'Class 1E',
           data: [{ x: 15, y: 359.484 }, { x: 80, y: 15869.399 }],
           borderColor: '#ff6600',
-          backgroundColor: 'rgba(252, 139, 136, 0.2)',
+          backgroundColor: 'rgba(252, 139, 136, 0.6)', // Adjusted fill color for Class 1E
           borderWidth: 2,
-          fill: '1',
+          fill: '+1',  // Fills above the Class 1E line
           showLine: true,
           pointRadius: 0,
           hoverRadius: 0,
         },
+        // Invisible 'Ceiling' dataset to fill the area above Class 1E
+        {
+          label: 'Ceiling',
+          data: Array.from({ length: 61 }, (_, i) => ({ x: 20 + i, y: 20000 })), // Adjust y to the maximum expected value
+          borderColor: 'transparent',
+          borderWidth: 0,
+          showLine: true,
+          pointRadius: 0,
+          fill: '+1',
+          backgroundColor: 'rgba(252, 139, 136, 0.6)', // Fill color for the area above Class 1E
+        },
       ],
       options: {
         responsive: true,