feat(colors): refactoring of most of the color values and color sets (#…

…106)
Orange-OpenSource · Jun 27, 2024 · f3a4e34 · f3a4e34
1 parent 8d7345b
commit f3a4e34
Show file tree

Hide file tree

Showing 35 changed files with 295 additions and 51 deletions.
diff --git a/docs/examples/index.js b/docs/examples/index.js
@@ -93,12 +93,17 @@ function generateConfigurator(id) {
             <div class="col-md-4">
               <label for="colorSetInput" class="form-label">Categorical Color</label>
               <select class="form-select" aria-label="Color set" id="colorSetInput" onchange="changeTheme('${id}')">
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS}">Default supporting colors</option>
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS}">Lighter tints</option>
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS}">Darker tints</option>
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_BLUE}">Blue</option>
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN}">Green</option>
-                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE}">Purple</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT}">Default colors (12)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.CATEGORICAL}">Categorical colors (12)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.FUNCTIONAL}">Functional (6)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS}">Supporting colors (5)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.LIGHTER_TINTS}">Lighter tints (5)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.DARKER_TINTS}">Darker tints (5)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_BLUE}">Blue (6)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_GREEN}">Green (6)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PINK}">Pink (6)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE}">Purple (6)</option>
+                <option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_YELLOW}">Yellow (6)</option>
               </select>
             </div>
 
@@ -107,7 +112,9 @@ function generateConfigurator(id) {
               <select class="form-select" aria-label="visual Map Color" id="visualMapColorInput" onchange="changeTheme('${id}')">
                 <option value="blue">Blue</option>
                 <option value="green">Green</option>
+                <option value="pink">Pink</option>
                 <option value="purple">Purple</option>
+                <option value="yellow">Yellow</option>
               </select>
             </div>
 
@@ -561,7 +568,7 @@ async function changeTheme(id) {
     id,
     option,
     document.querySelector(`#accordion_${id} #darkModeInput`).value,
-    6 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex
+    11 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex
       ? JSON.parse(document.querySelector(`#accordion_${id} #colorSetInput`).value)
       : document.querySelector(`#accordion_${id} #colorSetInput`).value,
     document.querySelector(`#accordion_${id} #visualMapColorInput`).value,
@@ -576,7 +583,7 @@ async function changeTheme(id) {
     true
   );
   if (document.querySelector('#view_custom_color_' + id)) {
-    if (6 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex) {
+    if (11 === document.querySelector(`#accordion_${id} #colorSetInput`).selectedIndex) {
       document.querySelector('#view_custom_color_' + id).classList.remove('d-none');
     } else {
       document.querySelector('#view_custom_color_' + id).classList.add('d-none');
@@ -636,9 +643,17 @@ window.generateMultipleLineChart = async (id) => {
       { data: [28.8956454657, 23, 19, 15, 18, 12], type: 'line' },
       { data: [19, 15, 18, 12, 28.8956454657, 23], type: 'line' },
       { data: [12, 28.8956454657, 23, 15, 15, 18], type: 'line' },
+      { data: [10, 13, 23, 22, 21, 15], type: 'line' },
+      { data: [15, 14, 23, 21, 22, 10], type: 'line' },
+      { data: [23, 22, 10, 23, 21, 15], type: 'line' },
+      { data: [24, 19, 17, 26, 20, 30], type: 'line' },
+      { data: [19, 17, 26, 20, 30, 24], type: 'line' },
+      { data: [26, 26, 12, 14, 10, 20], type: 'line' },
+      { data: [19, 26, 20, 30, 24, 17], type: 'line' },
+      { data: [26, 12, 14, 10, 20, 26], type: 'line' },
     ],
   };
-  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
 };
 
 window.generateTimeSeriesLineChart = async (id) => {
@@ -698,9 +713,30 @@ window.generateTimeSeriesLineChart = async (id) => {
           .map((oneData) => [oneData.time, oneData.value]),
         type: 'line',
       },
+      {
+        name: 'Serie 4',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        type: 'line',
+      },
+      {
+        name: 'Serie 5',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        type: 'line',
+      },
+      {
+        name: 'Serie 6',
+        data: generateData()
+          .filter((oneData) => undefined !== oneData.value)
+          .map((oneData) => [oneData.time, oneData.value]),
+        type: 'line',
+      },
     ],
   };
-  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
+  displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
 };
 
 window.generateBarChart = async (id, horizontal = false, grouped = false, stacked = false) => {
@@ -752,7 +788,7 @@ window.generateBarChart = async (id, horizontal = false, grouped = false, stacke
             colorIndex: 0,
           },
           {
-            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
             colorIndex: 0,
           },
           {
@@ -767,20 +803,20 @@ window.generateBarChart = async (id, horizontal = false, grouped = false, stacke
               colorIndex: 0,
             },
             {
-              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+              colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
               colorIndex: 0,
             },
           ]
         : horizontal
           ? [
               {
-                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
                 colorIndex: 1,
               },
             ]
           : [
               {
-                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+                colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
                 colorIndex: 3,
               },
             ]
@@ -846,11 +882,11 @@ window.generateBarLineChart = async (id, horizontal = false, grouped = false, st
     id,
     option,
     undefined,
-    //ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS
+    //ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT
     grouped
       ? [
           {
-            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
             colorIndex: 1,
           },
           {
@@ -864,7 +900,7 @@ window.generateBarLineChart = async (id, horizontal = false, grouped = false, st
         ]
       : [
           {
-            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS,
+            colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS,
             colorIndex: 2,
           },
           {

diff --git a/docs/use_cases/two-colors-serie.html b/docs/use_cases/two-colors-serie.html
@@ -43,13 +43,13 @@ <h1 class="display-1">Two colors for one series</h1>
       <div class="card w-100">
         <div class="card-body">
           <h5 class="card-title">Two colors for one series example</h5>
-          <p class="card-text">When representing data on a bar chart, it is possible to want to represent this data with a different colour depending on a condition on the value. For example, green for a target achieved, red otherwise.</p>
+          <p class="card-text">When representing data on a bar chart, it is possible to want to represent this data with a different color depending on a condition on the value. For example, green for a target achieved, red otherwise.</p>
           <p class="card-text">You would then need to be able to have:</p>
           <ul>
             <li>both colors in the legend</li>
             <li>the color associated with the current value in the tooltip or popover</li>
           </ul>
-          <p class="card-text">For this example, we have chosen to put the data in two series depending on whether or not the objective has been achieved. In this way, the two colours are clearly visible both on the graph and in the legend.</p>
+          <p class="card-text">For this example, we have chosen to put the data in two series depending on whether or not the objective has been achieved. In this way, the two colors are clearly visible both on the graph and in the legend.</p>
           <p class="card-text">On the other hand, this requires us to filter the values displayed in the tooltip so as not to display the series of a target that has not been reached when it has been reached and vice versa.</p>
           <p class="card-text">
             This filter is created using tooltip value formatter in the default Apache ECharts configuration, and to send back

diff --git a/src/theme/dark/ODS.categorical-colors.blue.ts b/src/theme/dark/ODS.categorical-colors.blue.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_CATEGORICAL_COLORS_BLUE = {
-  color: ['#d6e4f4', '#adc9e9', '#84afde', '#5a94d3', '#3179c8', '#085ebd'],
+  color: ['#B5E8F7', '#80CEEF', '#4BB4E6', '#3E9DD6', '#237ECA', '#085EBD'],
 };
diff --git a/src/theme/dark/ODS.categorical-colors.categorical.ts b/src/theme/dark/ODS.categorical-colors.categorical.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_CATEGORICAL_COLORS_CATEGORICAL = {
+  color: ['#ffb4e6', '#d573bb', '#c1a4e4', '#9373bd', '#80ceef', '#3e9dd6', '#84d5af', '#27a971', '#ffd200', '#b98f11'],
+};
diff --git a/src/theme/dark/ODS.categorical-colors.darker-tints.ts b/src/theme/dark/ODS.categorical-colors.darker-tints.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_CATEGORICAL_COLORS_DARKER_TINTS = {
-  color: ['#085EBD', '#0A6E31', '#FF8AD4', '#492191', '#FFB400'],
+  color: ['#B5E8F7', '#B8EBD6', '#FFE8F7', '#D9C2F0', '#FFF6B6'],
 };
diff --git a/src/theme/dark/ODS.categorical-colors.functional.ts b/src/theme/dark/ODS.categorical-colors.functional.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_CATEGORICAL_COLORS_FUNCTIONAL = {
+  color: ['#FF7900', '#666666', '#66CC66', '#FFCC00', '#FF4D4D', '#6699FF'],
+};
diff --git a/src/theme/dark/ODS.categorical-colors.green.ts b/src/theme/dark/ODS.categorical-colors.green.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_CATEGORICAL_COLORS_GREEN = {
-  color: ['#D6E7DD', '#85B798', '#85B798', '#5C9E76', '#338653', '#0A6E31'],
+  color: ['#B8EBD6', '#84D5AF', '#50BE87', '#27A971', '#198C51', '#0A6E31'],
 };
diff --git a/src/theme/dark/ODS.categorical-colors.lighter-tints.ts b/src/theme/dark/ODS.categorical-colors.lighter-tints.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_CATEGORICAL_COLORS_LIGHTER_TINTS = {
-  color: ['#B5E8F7', '#B8EBD6', '#FFE8F7', '#D9C2F0', '#FFF6B6'],
+  color: ['#085EBD', '#0A6E31', '#FF8AD4', '#492191', '#FFB400'],
 };
diff --git a/src/theme/dark/ODS.categorical-colors.pink.ts b/src/theme/dark/ODS.categorical-colors.pink.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_CATEGORICAL_COLORS_PINK = {
+  color: ['#FFE8F7', '#FFCEEF', '#FFB4E6', '#FF8AD4', '#D573BB', '#BC4D9A'],
+};
diff --git a/src/theme/dark/ODS.categorical-colors.purple.ts b/src/theme/dark/ODS.categorical-colors.purple.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_CATEGORICAL_COLORS_PURPLE = {
-  color: ['#E1DAED', '#C2B5DA', '#A490C8', '#866BB6', '#6746A3', '#492191'],
+  color: ['#D9C2F0', '#C1A4E4', '#A885D8', '#9373BD', '#6E4AA7', '#492191'],
 };
diff --git a/src/theme/dark/ODS.categorical-colors.ts b/src/theme/dark/ODS.categorical-colors.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_CATEGORICAL_COLORS = {
+  color: ['#80ceef', '#84d5af', '#ffb4e6', '#c1a4e4', '#ffd200', '#cccccc', '#3e9dd6', '#27a971', '#d573bb', '#9373bd', '#b98f11', '#999999'],
+};
diff --git a/src/theme/dark/ODS.categorical-colors.yellow.ts b/src/theme/dark/ODS.categorical-colors.yellow.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_CATEGORICAL_COLORS_YELLOW = {
+  color: ['#FFF6B6', '#FFE45B', '#FFD200', '#FFB400', '#B98F11', '#9D6E06'],
+};
diff --git a/src/theme/dark/ODS.lines.axis.ts b/src/theme/dark/ODS.lines.axis.ts
@@ -11,7 +11,7 @@ export const DARK_LINES_AXIS = {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
     axisLabel: {
@@ -21,15 +21,15 @@ export const DARK_LINES_AXIS = {
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
   },
   valueAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
     axisLabel: {
@@ -39,15 +39,15 @@ export const DARK_LINES_AXIS = {
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
   },
   logAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
     axisLabel: {
@@ -57,15 +57,15 @@ export const DARK_LINES_AXIS = {
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
   },
   timeAxis: {
     axisLine: {
       show: true,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
     axisLabel: {
@@ -75,7 +75,7 @@ export const DARK_LINES_AXIS = {
     axisTick: {
       show: false,
       lineStyle: {
-        color: '#cccccc',
+        color: '#666666',
       },
     },
   },

diff --git a/src/theme/dark/ODS.sequential-colors.blue.ts b/src/theme/dark/ODS.sequential-colors.blue.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_BLUE = {
-  visualMapColor: ['#d6e4f4', '#adc9e9', '#84afde', '#5a94d3', '#3179c8', '#085ebd'],
+  visualMapColor: ['#B5E8F7', '#80CEEF', '#4BB4E6', '#3E9DD6', '#237ECA', '#085EBD'],
 };
diff --git a/src/theme/dark/ODS.sequential-colors.green.ts b/src/theme/dark/ODS.sequential-colors.green.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_GREEN = {
-  visualMapColor: ['#D6E7DD', '#85B798', '#85B798', '#5C9E76', '#338653', '#0A6E31'],
+  visualMapColor: ['#B8EBD6', '#84D5AF', '#50BE87', '#27A971', '#198C51', '#0A6E31'],
 };
diff --git a/src/theme/dark/ODS.sequential-colors.pink.ts b/src/theme/dark/ODS.sequential-colors.pink.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_SEQUENTIAL_COLORS_PINK = {
+  visualMapColor: ['#FFE8F7', '#FFCEEF', '#FFB4E6', '#FF8AD4', '#D573BB', '#BC4D9A'],
+};
diff --git a/src/theme/dark/ODS.sequential-colors.purple.ts b/src/theme/dark/ODS.sequential-colors.purple.ts
@@ -7,5 +7,5 @@
 //
 
 export const DARK_SEQUENTIAL_COLORS_PURPLE = {
-  visualMapColor: ['#E1DAED', '#C2B5DA', '#A490C8', '#866BB6', '#6746A3', '#492191'],
+  visualMapColor: ['#D9C2F0', '#C1A4E4', '#A885D8', '#9373BD', '#6E4AA7', '#492191'],
 };
diff --git a/src/theme/dark/ODS.sequential-colors.yellow.ts b/src/theme/dark/ODS.sequential-colors.yellow.ts
@@ -0,0 +1,11 @@
+//
+// Software Name: Orange Design System Charts
+// SPDX-FileCopyrightText: Copyright (c) 2023 - 2024 Orange SA
+// SPDX-License-Identifier: MIT
+//
+// This software is distributed under the MIT license.
+//
+
+export const DARK_SEQUENTIAL_COLORS_YELLOW = {
+  visualMapColor: ['#FFF6B6', '#FFE45B', '#FFD200', '#FFB400', '#B98F11', '#9D6E06'],
+};
diff --git a/src/theme/light/ODS.categorical-colors.blue.ts b/src/theme/light/ODS.categorical-colors.blue.ts
@@ -7,5 +7,5 @@
 //
 
 export const LIGHT_CATEGORICAL_COLORS_BLUE = {
-  color: ['#085ebd', '#3179c8', '#5a94d3', '#84afde', '#adc9e9', '#d6e4f4'],
+  color: ['#085EBD', '#237ECA', '#3E9DD6', '#4BB4E6', '#80CEEF', '#B5E8F7'],
 };