From f3a4e3471e5a9f5d120efb8db311e9b2b99d3034 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Thu, 27 Jun 2024 10:46:46 +0200 Subject: [PATCH] feat(colors): refactoring of most of the color values and color sets (#106) --- docs/examples/index.js | 70 ++++++++++++++----- docs/use_cases/two-colors-serie.html | 4 +- src/theme/dark/ODS.categorical-colors.blue.ts | 2 +- .../ODS.categorical-colors.categorical.ts | 11 +++ .../ODS.categorical-colors.darker-tints.ts | 2 +- .../dark/ODS.categorical-colors.functional.ts | 11 +++ .../dark/ODS.categorical-colors.green.ts | 2 +- .../ODS.categorical-colors.lighter-tints.ts | 2 +- src/theme/dark/ODS.categorical-colors.pink.ts | 11 +++ .../dark/ODS.categorical-colors.purple.ts | 2 +- src/theme/dark/ODS.categorical-colors.ts | 11 +++ .../dark/ODS.categorical-colors.yellow.ts | 11 +++ src/theme/dark/ODS.lines.axis.ts | 16 ++--- src/theme/dark/ODS.sequential-colors.blue.ts | 2 +- src/theme/dark/ODS.sequential-colors.green.ts | 2 +- src/theme/dark/ODS.sequential-colors.pink.ts | 11 +++ .../dark/ODS.sequential-colors.purple.ts | 2 +- .../dark/ODS.sequential-colors.yellow.ts | 11 +++ .../light/ODS.categorical-colors.blue.ts | 2 +- .../ODS.categorical-colors.categorical.ts | 11 +++ .../ODS.categorical-colors.functional.ts | 11 +++ .../light/ODS.categorical-colors.green.ts | 2 +- .../light/ODS.categorical-colors.pink.ts | 11 +++ .../light/ODS.categorical-colors.purple.ts | 2 +- src/theme/light/ODS.categorical-colors.ts | 11 +++ .../light/ODS.categorical-colors.yellow.ts | 11 +++ src/theme/light/ODS.sequential-colors.blue.ts | 2 +- .../light/ODS.sequential-colors.green.ts | 2 +- src/theme/light/ODS.sequential-colors.pink.ts | 11 +++ .../light/ODS.sequential-colors.purple.ts | 2 +- .../light/ODS.sequential-colors.yellow.ts | 11 +++ src/theme/ods-chart-theme.ts | 68 ++++++++++++++++-- test/examples/bar-line-chart/index.html | 2 +- test/examples/timeseries-chart/index.html | 2 +- test/html/index.html | 2 +- 35 files changed, 295 insertions(+), 51 deletions(-) create mode 100644 src/theme/dark/ODS.categorical-colors.categorical.ts create mode 100644 src/theme/dark/ODS.categorical-colors.functional.ts create mode 100644 src/theme/dark/ODS.categorical-colors.pink.ts create mode 100644 src/theme/dark/ODS.categorical-colors.ts create mode 100644 src/theme/dark/ODS.categorical-colors.yellow.ts create mode 100644 src/theme/dark/ODS.sequential-colors.pink.ts create mode 100644 src/theme/dark/ODS.sequential-colors.yellow.ts create mode 100644 src/theme/light/ODS.categorical-colors.categorical.ts create mode 100644 src/theme/light/ODS.categorical-colors.functional.ts create mode 100644 src/theme/light/ODS.categorical-colors.pink.ts create mode 100644 src/theme/light/ODS.categorical-colors.ts create mode 100644 src/theme/light/ODS.categorical-colors.yellow.ts create mode 100644 src/theme/light/ODS.sequential-colors.pink.ts create mode 100644 src/theme/light/ODS.sequential-colors.yellow.ts diff --git a/docs/examples/index.js b/docs/examples/index.js index 8d11ce5c..021265fb 100644 --- a/docs/examples/index.js +++ b/docs/examples/index.js @@ -93,12 +93,17 @@ function generateConfigurator(id) {
@@ -107,7 +112,9 @@ function generateConfigurator(id) { @@ -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 index 55f167da..d9936024 100644 --- a/docs/use_cases/two-colors-serie.html +++ b/docs/use_cases/two-colors-serie.html @@ -43,13 +43,13 @@

Two colors for one series

Two colors for one series example
-

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.

+

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.

You would then need to be able to have:

  • both colors in the legend
  • the color associated with the current value in the tooltip or popover
-

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.

+

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.

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.

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 index 23d6beec..6e9d4fd3 100644 --- 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 new file mode 100644 index 00000000..136e93b5 --- /dev/null +++ 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 index 8ed1d566..b93db954 100644 --- 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 new file mode 100644 index 00000000..e341160f --- /dev/null +++ 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 index 4f0dc972..179fbd41 100644 --- 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 index 8f1a3453..d20b21a9 100644 --- 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 new file mode 100644 index 00000000..000242ca --- /dev/null +++ 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 index 0ec4a1e4..d409f6c1 100644 --- 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 new file mode 100644 index 00000000..5ee6ddf1 --- /dev/null +++ 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 new file mode 100644 index 00000000..3dedea12 --- /dev/null +++ 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 index 25b59fa3..b5e867a9 100644 --- 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,7 +21,7 @@ export const DARK_LINES_AXIS = { axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: '#666666', }, }, }, @@ -29,7 +29,7 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: '#666666', }, }, axisLabel: { @@ -39,7 +39,7 @@ export const DARK_LINES_AXIS = { axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: '#666666', }, }, }, @@ -47,7 +47,7 @@ export const DARK_LINES_AXIS = { axisLine: { show: true, lineStyle: { - color: '#cccccc', + color: '#666666', }, }, axisLabel: { @@ -57,7 +57,7 @@ export const DARK_LINES_AXIS = { axisTick: { show: false, lineStyle: { - color: '#cccccc', + color: '#666666', }, }, }, @@ -65,7 +65,7 @@ export const DARK_LINES_AXIS = { 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 index cbc58293..93bb0055 100644 --- 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 index 45b5aa3d..ede3121d 100644 --- 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 new file mode 100644 index 00000000..abdb57e6 --- /dev/null +++ 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 index c0416d8b..da937197 100644 --- 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 new file mode 100644 index 00000000..e4f60fdf --- /dev/null +++ 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 index a12d87eb..5bcffeb8 100644 --- 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'], }; diff --git a/src/theme/light/ODS.categorical-colors.categorical.ts b/src/theme/light/ODS.categorical-colors.categorical.ts new file mode 100644 index 00000000..2a8dfd6f --- /dev/null +++ b/src/theme/light/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 LIGHT_CATEGORICAL_COLORS_CATEGORICAL = { + color: ['#085ebd', '#27a971', '#bc4d9a', '#9373bd', '#9d6e06', '#333333', '#3e9dd6', '#0a6e31', '#d573bb', '#492191', '#b98f11', '#666666'], +}; diff --git a/src/theme/light/ODS.categorical-colors.functional.ts b/src/theme/light/ODS.categorical-colors.functional.ts new file mode 100644 index 00000000..19a06670 --- /dev/null +++ b/src/theme/light/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 LIGHT_CATEGORICAL_COLORS_FUNCTIONAL = { + color: ['#F16E00', '#EEEEEE', '#228722', '#FFCC00', '#CD3C14', '#4170D8'], +}; diff --git a/src/theme/light/ODS.categorical-colors.green.ts b/src/theme/light/ODS.categorical-colors.green.ts index 85190346..0ff716df 100644 --- a/src/theme/light/ODS.categorical-colors.green.ts +++ b/src/theme/light/ODS.categorical-colors.green.ts @@ -7,5 +7,5 @@ // export const LIGHT_CATEGORICAL_COLORS_GREEN = { - color: ['#0A6E31', '#338653', '#5C9E76', '#85B798', '#85B798', '#D6E7DD'], + color: ['#0A6E31', '#27A971', '#84D5AF', '#198C51', '#50BE87', '#B8EBD6'], }; diff --git a/src/theme/light/ODS.categorical-colors.pink.ts b/src/theme/light/ODS.categorical-colors.pink.ts new file mode 100644 index 00000000..e347c860 --- /dev/null +++ b/src/theme/light/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 LIGHT_CATEGORICAL_COLORS_PINK = { + color: ['#BC4D9A', '#D573BB', '#FF8AD4', '#FFB4E6', '#FFCEEF', '#FFE8F7'], +}; diff --git a/src/theme/light/ODS.categorical-colors.purple.ts b/src/theme/light/ODS.categorical-colors.purple.ts index 8a4b00ff..da44e2c6 100644 --- a/src/theme/light/ODS.categorical-colors.purple.ts +++ b/src/theme/light/ODS.categorical-colors.purple.ts @@ -7,5 +7,5 @@ // export const LIGHT_CATEGORICAL_COLORS_PURPLE = { - color: ['#492191', '#6746A3', '#866BB6', '#A490C8', '#C2B5DA', '#E1DAED'], + color: ['#492191', '#6E4AA7', '#9373BD', '#A885D8', '#C1A4E4', '#D9C2F0'], }; diff --git a/src/theme/light/ODS.categorical-colors.ts b/src/theme/light/ODS.categorical-colors.ts new file mode 100644 index 00000000..7aee18d1 --- /dev/null +++ b/src/theme/light/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 LIGHT_CATEGORICAL_COLORS = { + color: ['#085edb', '#0a6e31', '#bc4d9a', '#492191', '#b98f11', '#666666', '#3e9dd6', '#27a971', '#d573bb', '#9373bd', '#9d6e06', '#333333'], +}; diff --git a/src/theme/light/ODS.categorical-colors.yellow.ts b/src/theme/light/ODS.categorical-colors.yellow.ts new file mode 100644 index 00000000..97e5dc33 --- /dev/null +++ b/src/theme/light/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 LIGHT_CATEGORICAL_COLORS_YELLOW = { + color: ['#9D6E06', '#B98F11', '#FFB400', '#FFD200', '#FFE45B', '#FFF6B6'], +}; diff --git a/src/theme/light/ODS.sequential-colors.blue.ts b/src/theme/light/ODS.sequential-colors.blue.ts index 5e61865b..10ca85bd 100644 --- a/src/theme/light/ODS.sequential-colors.blue.ts +++ b/src/theme/light/ODS.sequential-colors.blue.ts @@ -7,5 +7,5 @@ // export const LIGHT_SEQUENTIAL_COLORS_BLUE = { - visualMapColor: ['#085ebd', '#3179c8', '#5a94d3', '#84afde', '#adc9e9', '#d6e4f4'], + visualMapColor: ['#085EBD', '#237ECA', '#3E9DD6', '#4BB4E6', '#80CEEF', '#B5E8F7'], }; diff --git a/src/theme/light/ODS.sequential-colors.green.ts b/src/theme/light/ODS.sequential-colors.green.ts index 1b750722..786d178e 100644 --- a/src/theme/light/ODS.sequential-colors.green.ts +++ b/src/theme/light/ODS.sequential-colors.green.ts @@ -7,5 +7,5 @@ // export const LIGHT_SEQUENTIAL_COLORS_GREEN = { - visualMapColor: ['#0A6E31', '#338653', '#5C9E76', '#85B798', '#85B798', '#D6E7DD'], + visualMapColor: ['#0A6E31', '#198C51', '#27A971', '#50BE87', '#84D5AF', '#B8EBD6'], }; diff --git a/src/theme/light/ODS.sequential-colors.pink.ts b/src/theme/light/ODS.sequential-colors.pink.ts new file mode 100644 index 00000000..36bc0ad7 --- /dev/null +++ b/src/theme/light/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 LIGHT_SEQUENTIAL_COLORS_PINK = { + visualMapColor: ['#BC4D9A', '#D573BB', '#FF8AD4', '#FFB4E6', '#FFCEEF', '#FFE8F7'], +}; diff --git a/src/theme/light/ODS.sequential-colors.purple.ts b/src/theme/light/ODS.sequential-colors.purple.ts index 07277abf..89fc1f22 100644 --- a/src/theme/light/ODS.sequential-colors.purple.ts +++ b/src/theme/light/ODS.sequential-colors.purple.ts @@ -7,5 +7,5 @@ // export const LIGHT_SEQUENTIAL_COLORS_PURPLE = { - visualMapColor: ['#492191', '#6746A3', '#866BB6', '#A490C8', '#C2B5DA', '#E1DAED'], + visualMapColor: ['#492191', '#6E4AA7', '#9373BD', '#A885D8', '#C1A4E4', '#D9C2F0'], }; diff --git a/src/theme/light/ODS.sequential-colors.yellow.ts b/src/theme/light/ODS.sequential-colors.yellow.ts new file mode 100644 index 00000000..28f7a872 --- /dev/null +++ b/src/theme/light/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 LIGHT_SEQUENTIAL_COLORS_YELLOW = { + visualMapColor: ['#9D6E06', '#B98F11', '#FFB400', '#FFD200', '#FFE45B', '#FFF6B6'], +}; diff --git a/src/theme/ods-chart-theme.ts b/src/theme/ods-chart-theme.ts index 1b3f255a..56e1348a 100644 --- a/src/theme/ods-chart-theme.ts +++ b/src/theme/ods-chart-theme.ts @@ -6,31 +6,45 @@ // This software is distributed under the MIT license. // -import { LIGHT_CATEGORICAL_COLORS_SUPPORTING_COLORS } from './light/ODS.categorical-colors.supporting-colors'; import { LIGHT_COMMON } from './light/ODS.common'; import { LIGHT_LINES_AXIS } from './light/ODS.lines.axis'; +import { LIGHT_CATEGORICAL_COLORS } from './light/ODS.categorical-colors'; +import { LIGHT_CATEGORICAL_COLORS_CATEGORICAL } from './light/ODS.categorical-colors.categorical'; +import { LIGHT_CATEGORICAL_COLORS_FUNCTIONAL } from './light/ODS.categorical-colors.functional'; +import { LIGHT_CATEGORICAL_COLORS_SUPPORTING_COLORS } from './light/ODS.categorical-colors.supporting-colors'; import { LIGHT_CATEGORICAL_COLORS_DARKER_TINTS } from './light/ODS.categorical-colors.darker-tints'; import { LIGHT_CATEGORICAL_COLORS_LIGHTER_TINTS } from './light/ODS.categorical-colors.lighter-tints'; import { LIGHT_CATEGORICAL_COLORS_BLUE } from './light/ODS.categorical-colors.blue'; import { LIGHT_CATEGORICAL_COLORS_GREEN } from './light/ODS.categorical-colors.green'; +import { LIGHT_CATEGORICAL_COLORS_PINK } from './light/ODS.categorical-colors.pink'; import { LIGHT_CATEGORICAL_COLORS_PURPLE } from './light/ODS.categorical-colors.purple'; +import { LIGHT_CATEGORICAL_COLORS_YELLOW } from './light/ODS.categorical-colors.yellow'; import { LIGHT_SEQUENTIAL_COLORS_BLUE } from './light/ODS.sequential-colors.blue'; import { LIGHT_SEQUENTIAL_COLORS_GREEN } from './light/ODS.sequential-colors.green'; +import { LIGHT_SEQUENTIAL_COLORS_PINK } from './light/ODS.sequential-colors.pink'; import { LIGHT_SEQUENTIAL_COLORS_PURPLE } from './light/ODS.sequential-colors.purple'; +import { LIGHT_SEQUENTIAL_COLORS_YELLOW } from './light/ODS.sequential-colors.yellow'; import { COMMON_LINE_STYLE_BROKEN } from './common/ODS.line-style.broken'; import { COMMON_LINE_STYLE_POINTS } from './common/ODS.line-style.with-points'; import { COMMON_LINE_STYLE_SMOOTH } from './common/ODS.line-style.smooth'; import { DARK_COMMON } from './dark/ODS.common'; import { DARK_LINES_AXIS } from './dark/ODS.lines.axis'; +import { DARK_CATEGORICAL_COLORS } from './dark/ODS.categorical-colors'; +import { DARK_CATEGORICAL_COLORS_CATEGORICAL } from './dark/ODS.categorical-colors.categorical'; +import { DARK_CATEGORICAL_COLORS_FUNCTIONAL } from './dark/ODS.categorical-colors.functional'; import { DARK_CATEGORICAL_COLORS_SUPPORTING_COLORS } from './dark/ODS.categorical-colors.supporting-colors'; import { DARK_CATEGORICAL_COLORS_DARKER_TINTS } from './dark/ODS.categorical-colors.darker-tints'; import { DARK_CATEGORICAL_COLORS_LIGHTER_TINTS } from './dark/ODS.categorical-colors.lighter-tints'; import { DARK_CATEGORICAL_COLORS_BLUE } from './dark/ODS.categorical-colors.blue'; import { DARK_CATEGORICAL_COLORS_GREEN } from './dark/ODS.categorical-colors.green'; +import { DARK_CATEGORICAL_COLORS_PINK } from './dark/ODS.categorical-colors.pink'; import { DARK_CATEGORICAL_COLORS_PURPLE } from './dark/ODS.categorical-colors.purple'; +import { DARK_CATEGORICAL_COLORS_YELLOW } from './dark/ODS.categorical-colors.yellow'; import { DARK_SEQUENTIAL_COLORS_BLUE } from './dark/ODS.sequential-colors.blue'; import { DARK_SEQUENTIAL_COLORS_GREEN } from './dark/ODS.sequential-colors.green'; +import { DARK_SEQUENTIAL_COLORS_PINK } from './dark/ODS.sequential-colors.pink'; import { DARK_SEQUENTIAL_COLORS_PURPLE } from './dark/ODS.sequential-colors.purple'; +import { DARK_SEQUENTIAL_COLORS_YELLOW } from './dark/ODS.sequential-colors.yellow'; import { EChartsProject, ODS_PROJECT } from './ODS.project'; import { ODSChartsLegends } from './legends/ods-chart-legends'; import { mergeObjects } from '../tools/merge-objects'; @@ -42,13 +56,37 @@ import { ODSChartsPopover } from './popover/ods-chart-popover'; import { ODSChartsPopoverConfig, ODSChartsPopoverDefinition, ODSChartsPopoverManagers } from './popover/ods-chart-popover-definitions'; import { isMainAxis } from './const/main-axis-type.const'; +/** + * ODSChartsCategoricalColorsSet is used for predefined color sets. + * + * Default and Categorical color sets are defined so all the colors are `accessible` against white/dark background and distinguishable for most color-blind people. These sets are not accessible from a monochromacy point of view. + * + * If you use our `sequential` sets, please consider using one color out of two if possible for a greater contrast (for example 0-2-4). + * + * - {@link DEFAULT} is the default color set for up to 12 different colors, selected to favor contrasts. + * - {@link CATEGORICAL} is a color set, build for up to 12 different colors, defined by the Orange Design System to display data visualization categories. + * - {@link FUNCTIONAL} is the color set embedding the orange that should be used a functional gray and all the functional colors. + * - {@link SUPPORTING_COLORS} is the color set embedding all the supporting colors. Colors don't change between light and dark mode. + * - {@link DARKER_TINTS} is the color set embedding all the darker tints of the supporting colors in light mode (lighter in dark mode). + * - {@link LIGHTER_TINTS} is the color set embedding all the lighter tints of the supporting colors in light mode (darker in dark mode). + * - {@link SEQUENTIAL_BLUE} is the color set embedding all the Orange Design System blue colors. + * - {@link SEQUENTIAL_GREEN} is the color set embedding all the Orange Design System green colors. + * - {@link SEQUENTIAL_PINK} is the color set embedding all the Orange Design System pink colors. + * - {@link SEQUENTIAL_PURPLE} is the color set embedding all the Orange Design System purple colors. + * - {@link SEQUENTIAL_YELLOW} is the color set embedding all the Orange Design System yellow colors. + */ export enum ODSChartsCategoricalColorsSet { - DEFAULT_SUPPORTING_COLORS = 'supportingColors', + DEFAULT = 'default', + CATEGORICAL = 'categorical', + FUNCTIONAL = 'functional', + SUPPORTING_COLORS = 'supportingColors', DARKER_TINTS = 'darkerTints', LIGHTER_TINTS = 'lighterTints', SEQUENTIAL_BLUE = 'blue', SEQUENTIAL_GREEN = 'green', + SEQUENTIAL_PINK = 'pink', SEQUENTIAL_PURPLE = 'purple', + SEQUENTIAL_YELLOW = 'yellow', } /** @@ -74,7 +112,7 @@ export type ODSChartsCustomCategoricalColor = ODSChartsCategoricalColor | string export interface ODSChartsCategoricalColor { /** * The {@link ODSChartsCategoricalColorsSet} to be used to extract a specific color. - * (example {@link ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS}) + * (example {@link ODSChartsCategoricalColorsSet.SUPPORTING_COLORS}) */ colorPalette: ODSChartsCategoricalColorsSet; /** @@ -86,7 +124,9 @@ export interface ODSChartsCategoricalColor { export enum ODSChartsSequentialColorsSet { SEQUENTIAL_BLUE = 'blue', SEQUENTIAL_GREEN = 'green', + SEQUENTIAL_PINK = 'pink', SEQUENTIAL_PURPLE = 'purple', + SEQUENTIAL_YELLOW = 'yellow', } export enum ODSChartsLineStyle { @@ -113,7 +153,7 @@ export interface ODSChartsThemeOptions { * It can be * - one of the predefined {@link ODSChartsCategoricalColorsSet} defined in Orange Design System * - * example: `ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS`. + * example: `ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS`. * * - Or it can be an array of colors {@link ODSChartsCustomCategoricalColor} * @@ -123,7 +163,7 @@ export interface ODSChartsThemeOptions { * { * colorPalette: * ODSCharts.ODSChartsCategoricalColorsSet - * .DEFAULT_SUPPORTING_COLORS, + * .SUPPORTING_COLORS, * colorIndex: 2, * }, * { @@ -133,7 +173,7 @@ export interface ODSChartsThemeOptions { * }, * ] * ``` - * Default categoricalColors is {@link ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS} + * Default categoricalColors is {@link ODSChartsCategoricalColorsSet.DEFAULT} */ categoricalColors?: ODSChartsCategoricalColorsSet | ODSChartsCustomCategoricalColor[]; /** @@ -178,17 +218,24 @@ const THEMES: { common: LIGHT_COMMON, linesAxis: LIGHT_LINES_AXIS, categoricalColors: { + default: LIGHT_CATEGORICAL_COLORS, + categorical: LIGHT_CATEGORICAL_COLORS_CATEGORICAL, + functional: LIGHT_CATEGORICAL_COLORS_FUNCTIONAL, supportingColors: LIGHT_CATEGORICAL_COLORS_SUPPORTING_COLORS, darkerTints: LIGHT_CATEGORICAL_COLORS_DARKER_TINTS, lighterTints: LIGHT_CATEGORICAL_COLORS_LIGHTER_TINTS, blue: LIGHT_CATEGORICAL_COLORS_BLUE, green: LIGHT_CATEGORICAL_COLORS_GREEN, + pink: LIGHT_CATEGORICAL_COLORS_PINK, purple: LIGHT_CATEGORICAL_COLORS_PURPLE, + yellow: LIGHT_CATEGORICAL_COLORS_YELLOW, }, sequentialColors: { blue: LIGHT_SEQUENTIAL_COLORS_BLUE, green: LIGHT_SEQUENTIAL_COLORS_GREEN, + pink: LIGHT_SEQUENTIAL_COLORS_PINK, purple: LIGHT_SEQUENTIAL_COLORS_PURPLE, + yellow: LIGHT_SEQUENTIAL_COLORS_YELLOW, }, linesStyle: { broken: COMMON_LINE_STYLE_BROKEN, @@ -200,17 +247,24 @@ const THEMES: { common: DARK_COMMON, linesAxis: DARK_LINES_AXIS, categoricalColors: { + default: DARK_CATEGORICAL_COLORS, + categorical: DARK_CATEGORICAL_COLORS_CATEGORICAL, + functional: DARK_CATEGORICAL_COLORS_FUNCTIONAL, supportingColors: DARK_CATEGORICAL_COLORS_SUPPORTING_COLORS, darkerTints: DARK_CATEGORICAL_COLORS_DARKER_TINTS, lighterTints: DARK_CATEGORICAL_COLORS_LIGHTER_TINTS, blue: DARK_CATEGORICAL_COLORS_BLUE, green: DARK_CATEGORICAL_COLORS_GREEN, + pink: DARK_CATEGORICAL_COLORS_PINK, purple: DARK_CATEGORICAL_COLORS_PURPLE, + yellow: DARK_CATEGORICAL_COLORS_YELLOW, }, sequentialColors: { blue: DARK_SEQUENTIAL_COLORS_BLUE, green: DARK_SEQUENTIAL_COLORS_GREEN, + pink: DARK_SEQUENTIAL_COLORS_PINK, purple: DARK_SEQUENTIAL_COLORS_PURPLE, + yellow: DARK_SEQUENTIAL_COLORS_YELLOW, }, linesStyle: { broken: COMMON_LINE_STYLE_BROKEN, @@ -281,7 +335,7 @@ export class ODSChartsTheme { } const mode: ODSChartsMode = options.mode; if (!options.categoricalColors) { - options.categoricalColors = ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS; + options.categoricalColors = ODSChartsCategoricalColorsSet.DEFAULT; } if (!options.visualMapColor) { options.visualMapColor = ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE; diff --git a/test/examples/bar-line-chart/index.html b/test/examples/bar-line-chart/index.html index 0665566f..7bd1e7c2 100644 --- a/test/examples/bar-line-chart/index.html +++ b/test/examples/bar-line-chart/index.html @@ -57,7 +57,7 @@

Sub-Title
mode: ODSCharts.ODSChartsMode.LIGHT, categoricalColors: [ { - colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, + colorPalette: ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS, colorIndex: 2, }, { diff --git a/test/examples/timeseries-chart/index.html b/test/examples/timeseries-chart/index.html index 2db21f0b..e4178cab 100644 --- a/test/examples/timeseries-chart/index.html +++ b/test/examples/timeseries-chart/index.html @@ -2160,7 +2160,7 @@
Sub-Title
// Build the theme var themeManager = ODSCharts.getThemeManager({ mode: ODSCharts.ODSChartsMode.LIGHT, - categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS, + categoricalColors: ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT, visualMapColor: ODSCharts.ODSChartsSequentialColorsSet.SEQUENTIAL_BLUE, lineStyle: ODSCharts.ODSChartsLineStyle.BROKEN, cssTheme: ODSCharts.ODSChartsCSSThemes.NONE, diff --git a/test/html/index.html b/test/html/index.html index 84f93b02..1dce2032 100644 --- a/test/html/index.html +++ b/test/html/index.html @@ -17,7 +17,7 @@