Merge pull request #209 from BaCaRoZzo/issue#192_2

wswebcreation · web-flow · commit 6499eddca0d8 · 2022-08-28T08:19:21.000+02:00
Ditch color function and CSS variables usage
diff --git a/README.MD b/README.MD
@@ -234,28 +234,9 @@ If you prefer, you can use CDN for assets.
 - **Type:** `path`
 - **Mandatory:** No
 
-If you need to add some custom style to your report. Add it like this `customStyle: 'your-path-where/custom.css'`
-Customization is now possible also for the doughnut chart by using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
-The user can define colors for the chart by defining variables for the different categories as follows:
-```css
-:root {
-  --ambiguous-color:#AAAAAA;
-  --failed-color:#BBBBBB;
-  --not-defined-color:#CCCCCC;
-  --passed-color:#DDDDDD;
-  --pending-color:#EEEEEE;
-  --skipped-color:#FFFFFF;
-}
-```
-Please note that these colors do _not_ affect the main colors CSS. To have homogeneous styling you can simply link those
-colors to the variables, e.g.:
-
-```css
-.ambiguous-color {
-    color: var(--ambiguous-color) !important;
-}
-```
-Please refer to the `test` directory and the `embedded-array` test report for a complete color customization example.
+If you need to add some custom style to your report. Add it like this `customStyle: 'your-path-where/custom.css'`.
+Please note that the doughnut charts uses the same colors as used by the status icons, i.e. the `.*-color` classes.
+Refer to the `test` directory and the `embedded-array` test report for a complete color customization example.
 
 ### `overrideStyle`
 - **Type:** `path`
diff --git a/templates/assets/js/Chart.style.js b/templates/assets/js/Chart.style.js
diff --git a/templates/feature-overview.index.tmpl b/templates/feature-overview.index.tmpl
@@ -170,7 +170,6 @@
     <% } %>
 
     <!-- Custom -->
-    <script src="../assets/js/Chart.style.js"></script>
     <script>
         var hideResult;
         var showAll;
@@ -181,6 +180,13 @@
                 responsive: false
             };
 
+            var getColor = function(selector, defaultColor) {
+                if (document.querySelector(selector)) {
+                    return getComputedStyle(document.querySelector(selector)).color
+                }
+                return defaultColor
+            }
+
             new Chart(document.getElementById("scenario-chart"), {
                 type: 'doughnut',
                 tooltipFillColor: "rgba(51, 51, 51, 0.55)",
@@ -202,7 +208,14 @@
                             <%= feature.scenarios.ambiguous %>,
                             <%= feature.scenarios.notDefined %>
                         ],
-                        backgroundColor: getChartColors()
+                        backgroundColor: [
+                            getColor(".passed-color", "#26B99A"),
+                            getColor(".failed-color", "#E74C3C"),
+                            getColor(".pending-color", "#FFD119"),
+                            getColor(".skipped-color", "#3498DB"),
+                            getColor(".ambiguous-color", "#b73122"),
+                            getColor(".not-defined-color", "#F39C12")
+                        ]
                     }]
                 },
                 options: scenarioOptions
diff --git a/templates/features-overview.index.tmpl b/templates/features-overview.index.tmpl
@@ -126,7 +126,6 @@
         <% } %>
 
         <!-- Custom -->
-        <script src="assets/js/Chart.style.js"></script>
         <script>
             $(document).ready(function () {
                 $('#features-table').dataTable({
@@ -139,6 +138,13 @@
                     legend: false,
                     responsive: false
                 };
+                
+                var getColor = function(selector, defaultColor) {
+                    if (document.querySelector(selector)) {
+                        return getComputedStyle(document.querySelector(selector)).color
+                    }
+                    return defaultColor
+                }
 
                 new Chart(document.getElementById("feature-chart"), {
                     type: 'doughnut',
@@ -161,7 +167,14 @@
                                 <%= suite.featureCount.ambiguous %>,
                                 <%= suite.featureCount.notDefined %>
                             ],
-                            backgroundColor: getChartColors()
+                            backgroundColor: [
+                                getColor(".passed-color", "#26B99A"),
+                                getColor(".failed-color", "#E74C3C"),
+                                getColor(".pending-color", "#FFD119"),
+                                getColor(".skipped-color", "#3498DB"),
+                                getColor(".ambiguous-color", "#b73122"),
+                                getColor(".not-defined-color", "#F39C12")
+                            ]
                         }]
                     },
                     options: featureOptions
@@ -193,7 +206,14 @@
                                 <%= suite.scenarios.ambiguous %>,
                                 <%= suite.scenarios.notDefined %>
                             ],
-                            backgroundColor: getChartColors()
+                            backgroundColor: [
+                                getColor(".passed-color", "#26B99A"),
+                                getColor(".failed-color", "#E74C3C"),
+                                getColor(".pending-color", "#FFD119"),
+                                getColor(".skipped-color", "#3498DB"),
+                                getColor(".ambiguous-color", "#b73122"),
+                                getColor(".not-defined-color", "#F39C12")
+                            ]
                         }]
                     },
                     options: scenarioOptions
diff --git a/test/custom.css b/test/custom.css
@@ -2,67 +2,57 @@ body {
   background: rgb(58,58,58);
 }
 
-/* CSS custom properties are used to style doughnut charts */
-:root {
-  --ambiguous-color:#AAAAAA;
-  --failed-color:#FF0000;
-  --not-defined-color:#0000FF;
-  --passed-color:#00FF00;
-  --pending-color:#FFAA33;
-  --skipped-color:#770077;
-}
-
 /* If your custom theme doesn't properly support dark mode, you can easily hide the toggle button */
 .fa-toggle-off {
     display: none
 }
 
-/* Style colors are derived from custom properties to have a homogeneous style */
+/* This styling applies also to the doughnut charts */
 .ambiguous-color {
-    color: var(--ambiguous-color) !important;
+    color: #AAAAAA !important;
 }
 
 .failed-color {
-    color: var(--failed-color) !important;
+    color: #FF0000 !important;
 }
 
 .not-defined-color {
-    color: var(--not-defined-color) !important;
+    color: #0000FF !important;
 }
 
 .passed-color {
-    color: var(--passed-color) !important;
+    color: #00FF00 !important;
 }
 
 .pending-color {
-    color: var(--pending-color) !important;
+    color: #FFAA33 !important;
 }
 
 .skipped-color {
-    color: var(--skipped-color) !important;
+    color: #770077 !important;
 }
 
 /* backgrounds */
 .ambiguous-background {
-    background: var(--ambiguous-color) !important;
+    background: #AAAAAA !important;
 }
 
 .failed-background {
-    background: var(--failed-color) !important;
+    background: #FF0000 !important;
 }
 
 .not-defined-background {
-    background: var(--not-defined-color) !important;
+    background: #0000FF !important;
 }
 
 .passed-background {
-    background: var(--passed-color) !important;
+    background: #00FF00 !important;
 }
 
 .pending-background {
-    background: var(--pending-color) !important;
+    background: #FFAA33 !important;
 }
 
 .skipped-background {
-    background: var(--skipped-color) !important;
+    background: #770077 !important;
 }

Original file line number	Diff line number	Diff line change
`@@ -2,67 +2,57 @@ body {`
`2`	`2`	`background: rgb(58,58,58);`
`3`	`3`	`}`
`4`	`4`
`5`		`-/* CSS custom properties are used to style doughnut charts */`
`6`		`-:root {`
`7`		`- --ambiguous-color:#AAAAAA;`
`8`		`- --failed-color:#FF0000;`
`9`		`- --not-defined-color:#0000FF;`
`10`		`- --passed-color:#00FF00;`
`11`		`- --pending-color:#FFAA33;`
`12`		`- --skipped-color:#770077;`
`13`		`-}`
`14`		`-`
`15`	`5`	`/* If your custom theme doesn't properly support dark mode, you can easily hide the toggle button */`
`16`	`6`	`.fa-toggle-off {`
`17`	`7`	`display: none`
`18`	`8`	`}`
`19`	`9`
`20`		`-/* Style colors are derived from custom properties to have a homogeneous style */`
	`10`	`+/* This styling applies also to the doughnut charts */`
`21`	`11`	`.ambiguous-color {`
`22`		`- color: var(--ambiguous-color) !important;`
	`12`	`+ color: #AAAAAA !important;`
`23`	`13`	`}`
`24`	`14`
`25`	`15`	`.failed-color {`
`26`		`- color: var(--failed-color) !important;`
	`16`	`+ color: #FF0000 !important;`
`27`	`17`	`}`
`28`	`18`
`29`	`19`	`.not-defined-color {`
`30`		`- color: var(--not-defined-color) !important;`
	`20`	`+ color: #0000FF !important;`
`31`	`21`	`}`
`32`	`22`
`33`	`23`	`.passed-color {`
`34`		`- color: var(--passed-color) !important;`
	`24`	`+ color: #00FF00 !important;`
`35`	`25`	`}`
`36`	`26`
`37`	`27`	`.pending-color {`
`38`		`- color: var(--pending-color) !important;`
	`28`	`+ color: #FFAA33 !important;`
`39`	`29`	`}`
`40`	`30`
`41`	`31`	`.skipped-color {`
`42`		`- color: var(--skipped-color) !important;`
	`32`	`+ color: #770077 !important;`
`43`	`33`	`}`
`44`	`34`
`45`	`35`	`/* backgrounds */`
`46`	`36`	`.ambiguous-background {`
`47`		`- background: var(--ambiguous-color) !important;`
	`37`	`+ background: #AAAAAA !important;`
`48`	`38`	`}`
`49`	`39`
`50`	`40`	`.failed-background {`
`51`		`- background: var(--failed-color) !important;`
	`41`	`+ background: #FF0000 !important;`
`52`	`42`	`}`
`53`	`43`
`54`	`44`	`.not-defined-background {`
`55`		`- background: var(--not-defined-color) !important;`
	`45`	`+ background: #0000FF !important;`
`56`	`46`	`}`
`57`	`47`
`58`	`48`	`.passed-background {`
`59`		`- background: var(--passed-color) !important;`
	`49`	`+ background: #00FF00 !important;`
`60`	`50`	`}`
`61`	`51`
`62`	`52`	`.pending-background {`
`63`		`- background: var(--pending-color) !important;`
	`53`	`+ background: #FFAA33 !important;`
`64`	`54`	`}`
`65`	`55`
`66`	`56`	`.skipped-background {`
`67`		`- background: var(--skipped-color) !important;`
	`57`	`+ background: #770077 !important;`
`68`	`58`	`}`