Skip to content

Commit

Permalink
Another try
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Jun 14, 2024
1 parent f167203 commit 80fb474
Show file tree
Hide file tree
Showing 6 changed files with 34 additions and 62 deletions.
70 changes: 21 additions & 49 deletions docs/examples/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +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}">Default colors (5 colors)</option>
<option value="${ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_LONG}">Default colors (10 colors by group of 2)</option>
<option value="${ODSCharts.ODSChartsCategoricalColorsSet.FUNCTIONAL}">Functional</option>
<option value="${ODSCharts.ODSChartsCategoricalColorsSet.SUPPORTING_COLORS}">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_PINK}">Pink</option>
<option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_PURPLE}">Purple</option>
<option value="${ODSCharts.ODSChartsCategoricalColorsSet.SEQUENTIAL_YELLOW}">Yellow</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>
Expand Down Expand Up @@ -603,11 +603,11 @@ window.generateMultipleLineChart = async (id) => {
{ 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, 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_LONG, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
};

window.generateTimeSeriesLineChart = async (id) => {
Expand Down Expand Up @@ -681,41 +681,13 @@ window.generateTimeSeriesLineChart = async (id) => {
.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',
// },
// {
// name: 'Serie 7',
// data: generateData()
// .filter((oneData) => undefined !== oneData.value)
// .map((oneData) => [oneData.time, oneData.value]),
// type: 'line',
// },
// {
// name: 'Serie 8',
// data: generateData()
// .filter((oneData) => undefined !== oneData.value)
// .map((oneData) => [oneData.time, oneData.value]),
// type: 'line',
// },
// {
// name: 'Serie 9',
// data: generateData()
// .filter((oneData) => undefined !== oneData.value)
// .map((oneData) => [oneData.time, oneData.value]),
// type: 'line',
// },
// {
// name: 'Serie 10',
// 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, undefined, ODSCharts.ODSChartsLineStyle.BROKEN);
Expand Down
2 changes: 1 addition & 1 deletion ...theme/dark/ODS.categorical-colors.long.ts → ...ark/ODS.categorical-colors.categorical.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
// This software is distributed under the MIT license.
//

export const DARK_CATEGORICAL_COLORS_LONG = {
export const DARK_CATEGORICAL_COLORS_CATEGORICAL = {
color: ['#ffb4e6', '#d573bb', '#c1a4e4', '#9373bd', '#80ceef', '#3e9dd6', '#84d5af', '#27a971', '#ffd200', '#b98f11'],
};
2 changes: 1 addition & 1 deletion src/theme/dark/ODS.categorical-colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
//

export const DARK_CATEGORICAL_COLORS = {
color: ['#ff8ad4', '#a885d8', '#4bb4e6', '#50be87', '#ffd200'],
color: ['#ffb4e6', '#c1a4e4', '#80ceef', '#84d5af', '#ffd200', '#cccccc', '#d573bb', '#9373bd', '#3e9dd6', '#27a971', '#b98f11', '#999999'],
};
4 changes: 2 additions & 2 deletions ...heme/light/ODS.categorical-colors.long.ts → ...ght/ODS.categorical-colors.categorical.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,6 @@
// This software is distributed under the MIT license.
//

export const LIGHT_CATEGORICAL_COLORS_LONG = {
color: ['#bc4d9a', '#d573bb', '#492191', '#9373bd', '#085edb', '#3e9dd6', '#0a6e31', '#27a971', '#9d6e06', '#b98f11'],
export const LIGHT_CATEGORICAL_COLORS_CATEGORICAL = {
color: ['#085ebd', '#27a971', '#bc4d9a', '#9373bd', '#9d6e06', '#333333', '#3e9dd6', '#0a6e31', '#d573bb', '#492191', '#b98f11', '#666666'],
};
2 changes: 1 addition & 1 deletion src/theme/light/ODS.categorical-colors.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
//

export const LIGHT_CATEGORICAL_COLORS = {
color: ['#bc4d9a', '#492191', '#085edb', '#0a6e31', '#b98f11'],
color: ['#bc4d9a', '#492191', '#085edb', '#0a6e31', '#b98f11', '#666666', '#d573bb', '#9373bd', '#3e9dd6', '#27a971', '#9d6e06', '#333333'],
};
16 changes: 8 additions & 8 deletions src/theme/ods-chart-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
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_LONG } from './light/ODS.categorical-colors.long';
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';
Expand All @@ -30,7 +30,7 @@ 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_LONG } from './dark/ODS.categorical-colors.long';
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';
Expand Down Expand Up @@ -59,12 +59,12 @@ import { isMainAxis } from './const/main-axis-type.const';
/**
* ODSChartsCategoricalColorsSet is used for predefined color sets.
*
* Default 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.
* 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 5 different colors meaning 5 different series.
* - {@link DEFAULT_LONG} is the default color set for up to 10 different colors grouped by 2. You shouldn't need more in your charts.
* - {@link DEFAULT} is the default color set for up to 12 different colors.
* - {@link CATEGORICAL} is the default design color set for up to 12 different colors.
* - {@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).
Expand All @@ -77,7 +77,7 @@ import { isMainAxis } from './const/main-axis-type.const';
*/
export enum ODSChartsCategoricalColorsSet {
DEFAULT = 'default',
DEFAULT_LONG = 'defaultLong',
CATEGORICAL = 'categorical',
FUNCTIONAL = 'functional',
SUPPORTING_COLORS = 'supportingColors',
DARKER_TINTS = 'darkerTints',
Expand Down Expand Up @@ -219,7 +219,7 @@ const THEMES: {
linesAxis: LIGHT_LINES_AXIS,
categoricalColors: {
default: LIGHT_CATEGORICAL_COLORS,
defaultLong: LIGHT_CATEGORICAL_COLORS_LONG,
categorical: LIGHT_CATEGORICAL_COLORS_CATEGORICAL,
functional: LIGHT_CATEGORICAL_COLORS_FUNCTIONAL,
supportingColors: LIGHT_CATEGORICAL_COLORS_SUPPORTING_COLORS,
darkerTints: LIGHT_CATEGORICAL_COLORS_DARKER_TINTS,
Expand Down Expand Up @@ -248,7 +248,7 @@ const THEMES: {
linesAxis: DARK_LINES_AXIS,
categoricalColors: {
default: DARK_CATEGORICAL_COLORS,
defaultLong: DARK_CATEGORICAL_COLORS_LONG,
categorical: DARK_CATEGORICAL_COLORS_CATEGORICAL,
functional: DARK_CATEGORICAL_COLORS_FUNCTIONAL,
supportingColors: DARK_CATEGORICAL_COLORS_SUPPORTING_COLORS,
darkerTints: DARK_CATEGORICAL_COLORS_DARKER_TINTS,
Expand Down

0 comments on commit 80fb474

Please sign in to comment.