refs #4127 Adding colors palette for graph data series

2 files changed, 42 insertions, 30 deletions

diff --git a/plugins/Morpheus/stylesheets/charts.less b/plugins/Morpheus/stylesheets/charts.less
index 492f6a0f98..654a1e5202 100644
--- a/plugins/Morpheus/stylesheets/charts.less
+++ b/plugins/Morpheus/stylesheets/charts.less
@@ -11,36 +11,36 @@
   color: @theme-color-background-smallContrast;
 }
 
-.bar-graph-colors[data-name=series4] {
-  color: #3b0b09;
+.bar-graph-colors[data-name=series1] {
+  color: @graph-colors-data-series1;
 }
 
 .bar-graph-colors[data-name=series2] {
-  color: #a11f18;
+  color: @graph-colors-data-series2;
 }
 
 .bar-graph-colors[data-name=series3] {
-  color: #6e1510;
+  color: @graph-colors-data-series3;
 }
 
-.bar-graph-colors[data-name=series1] {
-  color: #d4291f;
+.bar-graph-colors[data-name=series4] {
+  color: @graph-colors-data-series4;
 }
 
 .bar-graph-colors[data-name=series5] {
-  color: #d43e20;
+  color: @graph-colors-data-series5;
 }
 
 .bar-graph-colors[data-name=series6] {
-  color: #a12f18;
+  color: @graph-colors-data-series6;
 }
 
 .bar-graph-colors[data-name=series7] {
-  color: #6e2010;
+  color: @graph-colors-data-series7;
 }
 
 .bar-graph-colors[data-name=series8] {
-  color: #ed4524;
+  color: @graph-colors-data-series8;
 }
 
 .bar-graph-colors[data-name=ticks] {
@@ -60,36 +60,36 @@
   color: @theme-color-background-smallContrast;
 }
 
-.pie-graph-colors[data-name=series4] {
-  color: #3b0b09;
+.pie-graph-colors[data-name=series1] {
+  color: @graph-colors-data-series1;
 }
 
 .pie-graph-colors[data-name=series2] {
-  color: #a11f18;
+  color: @graph-colors-data-series2;
 }
 
 .pie-graph-colors[data-name=series3] {
-  color: #6e1510;
+  color: @graph-colors-data-series3;
 }
 
-.pie-graph-colors[data-name=series1] {
-  color: #d4291f;
+.pie-graph-colors[data-name=series4] {
+  color: @graph-colors-data-series4;
 }
 
 .pie-graph-colors[data-name=series5] {
-  color: #d43e20;
+  color: @graph-colors-data-series5;
 }
 
 .pie-graph-colors[data-name=series6] {
-  color: #a12f18;
+  color: @graph-colors-data-series6;
 }
 
 .pie-graph-colors[data-name=series7] {
-  color: #6e2010;
+  color: @graph-colors-data-series7;
 }
 
 .pie-graph-colors[data-name=series8] {
-  color: #ed4524;
+  color: @graph-colors-data-series8;
 }
 
 .pie-graph-colors[data-name=ticks] {
@@ -104,36 +104,36 @@
 
 // evolution graph colors
 
-.evolution-graph-colors[data-name=series4] {
-  color: #3b0b09;
+.evolution-graph-colors[data-name=series1] {
+  color: @graph-colors-data-series1;
 }
 
 .evolution-graph-colors[data-name=series2] {
-  color: #a11f18;
+  color: @graph-colors-data-series2;
 }
 
 .evolution-graph-colors[data-name=series3] {
-  color: #6e1510;
+  color: @graph-colors-data-series3;
 }
 
-.evolution-graph-colors[data-name=series1] {
-  color: #d4291f;
+.evolution-graph-colors[data-name=series4] {
+  color: @graph-colors-data-series4;
 }
 
 .evolution-graph-colors[data-name=series5] {
-  color: #d43e20;
+  color: @graph-colors-data-series5;
 }
 
 .evolution-graph-colors[data-name=series6] {
-  color: #a12f18;
+  color: @graph-colors-data-series6;
 }
 
 .evolution-graph-colors[data-name=series7] {
-  color: #6e2010;
+  color: @graph-colors-data-series7;
 }
 
 .evolution-graph-colors[data-name=series8] {
-  color: #ed4524;
+  color: @graph-colors-data-series8;
 }
 
 .evolution-graph-colors[data-name=ticks] {
diff --git a/plugins/Morpheus/stylesheets/colors.less b/plugins/Morpheus/stylesheets/colors.less
index 18bc5dfbdd..f32fea52c6 100644
--- a/plugins/Morpheus/stylesheets/colors.less
+++ b/plugins/Morpheus/stylesheets/colors.less
@@ -38,6 +38,18 @@
 @theme-color-background-lighter: #888;
 @theme-color-base-series: #ee3024;
 
+@graph-colors-data-series1: #d4291f;
+@graph-colors-data-series2: #1f78b4;
+@graph-colors-data-series3: #ff7f00;
+@graph-colors-data-series4: #33a02c;
+@graph-colors-data-series5: #6a3d9a;
+@graph-colors-data-series6: #b15928;
+@graph-colors-data-series7: #fdbf6f;
+@graph-colors-data-series8: #cab2d6;
+/*
+Qualitative data color series inspired from colorbrewer2.org/
+next ones could be: #cab2d6 #ffff99 # #b2df8a
+*/
 
 .color-red {
     color: @defaultRed;