Skip to content

Commit

Permalink
feat(lib): Add Orange Design System look&feel to default Apache EChar…
Browse files Browse the repository at this point in the history 
…ts legends (#242)
  • Loading branch information
@jacques-lebourgeois
jacques-lebourgeois authored Jun 14, 2024
1 parent 497f572 commit e7be772
Show file tree
Hide file tree
Showing 5 changed files with 118 additions and 45 deletions.
58 changes: 47 additions & 11 deletions docs/examples/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ function generateConfigurator(id) {
<div class="col-md-4">
<label for="lineStyleInput" class="form-label">Line style</label>
<select class="form-select" aria-label="Line style" id="lineStyleInput" onchange="changeTheme('${id}')">
<select class="form-select" id="lineStyleInput" onchange="changeTheme('${id}')">
<option value="smooth">Smooth</option>
<option value="broken">Broken</option>
<option value="withPoints">Broken with points</option>
Expand All @@ -129,7 +129,7 @@ function generateConfigurator(id) {
<div class="col-md-4">
<label for="popoverInput" class="form-label">Popover or Tooltip</label>
<select class="form-select" aria-label="Line style" id="popoverInput" onchange="changeTheme('${id}')">
<select class="form-select" id="popoverInput" onchange="changeTheme('${id}')">
<option value="none">None</option>
<option value="popover">Popover</option>
<option value="tooltip">Tooltip</option>
Expand All @@ -139,15 +139,15 @@ function generateConfigurator(id) {
<div class="col-md-4 popover-config">
<label for="popoverSharedInput" class="form-label">Tooltip/Popover content</label>
<select class="form-select" aria-label="Line style" id="popoverSharedInput" onchange="changeTheme('${id}')">
<select class="form-select" id="popoverSharedInput" onchange="changeTheme('${id}')">
<option value="none">Not shared</option>
<option value="shared">Shared</option>
</select>
</div>
<div class="col-md-4 popover-config">
<label for="popoverAxisInput" class="form-label">Tooltip/Popover axis pointer</label>
<select class="form-select" aria-label="Line style" id="popoverAxisInput" onchange="changeTheme('${id}')">
<select class="form-select" id="popoverAxisInput" onchange="changeTheme('${id}')">
<option value="none">None</option>
<option value="shadow">Shadow</option>
<option value="line">Line</option>
Expand All @@ -157,18 +157,26 @@ function generateConfigurator(id) {
<div class="col-md-4 popover-renderer">
<label for="popoverTemplateInput" class="form-label">Popover renderer</label>
<select class="form-select" aria-label="Line style" id="popoverTemplateInput" onchange="changeTheme('${id}')">
<select class="form-select" id="popoverTemplateInput" onchange="changeTheme('${id}')">
<option value="internal">Apache ECharts renderer</option>
<option value="external">Boosted renderer</option>
</select>
</div>
<div class="col-md-4 popover-renderer">
<label for="usedLegends" class="form-label">Legends</label>
<select class="form-select" id="usedLegends" onchange="changeTheme('${id}')">
<option value="echarts">Apache ECharts legend</option>
<option value="odscharts">ODS Charts legend</option>
</select>
</div>
<div class="col-12">
<h2>Global theme reference</h2>
</div>
<div class="col-md-4">
<label for="cssTheme" class="form-label">Used CSS</label>
<select class="form-select" aria-label="Line style" id="cssTheme" onchange="changeTheme('${id}')">
<select class="form-select" id="cssTheme" onchange="changeTheme('${id}')">
<option value="NONE">NONE</option>
<option value="BOOSTED4">Boosted 4</option>
<option value="BOOSTED5">Boosted 5</option>
Expand Down Expand Up @@ -235,6 +243,7 @@ async function displayChart(
popoverSharedInput,
popoverAxisInput,
popoverTemplateInput,
usedLegends,
cssThemeName,
refresh = false
) {
Expand All @@ -248,6 +257,11 @@ async function displayChart(

let iframe = document.querySelector(`#${id} iframe`);

if (document.getElementById(id).dataset.initialOptions) {
options = JSON.parse(document.getElementById(id).dataset.initialOptions);
} else {
document.getElementById(id).dataset.initialOptions = JSON.stringify(options);
}
if (!cssThemeName) {
cssThemeName = iframe.contentWindow.ODSCharts.ODSChartsCSSThemesNames.BOOSTED5;
}
Expand Down Expand Up @@ -275,6 +289,9 @@ async function displayChart(
if (!popoverTemplateInput) {
popoverTemplateInput = iframe.contentWindow.ODSCharts.ODSChartsCSSThemesNames.NONE === cssThemeName ? 'internal' : 'external';
}
if (!usedLegends) {
usedLegends = 'odscharts';
}

const actualTheme = iframe.contentDocument.getElementById('mainCSS').getAttribute('cssThemeName');

Expand Down Expand Up @@ -314,13 +331,28 @@ async function displayChart(

var legends = false;

if (!(options.dataset && options.dataset.source) && !(options.legend && options.legend.data) && options.series.length > 1) {
options.legend = {
data: options.series.length > 1 ? options.series.map((serie, i) => 'label ' + i) : undefined,
};
if ('odscharts' === usedLegends) {
if (!(options.dataset && options.dataset.source) && !(options.legend && options.legend.data) && options.series.length > 1) {
options.legend = {
data: options.series.length > 1 ? options.series.map((serie, i) => 'label ' + i) : undefined,
};
}
} else {
if (!options.legend) {
options.legend = {};
}
if (options.series && 1 < options.series.length) {
options.series.forEach((serie, index) => {
if (!serie.name) serie.name = 'label ' + index;
});
}
}

legends = (options.legend && options.legend.data && !options.legend.show) || (options.dataset && options.dataset.source);
legends =
usedLegends === 'odscharts' &&
((options.legend && options.legend.data && !options.legend.show) ||
(options.dataset && options.dataset.source) ||
(options.series && 1 === options.series.length && 'pie' === options.series[0].type));

if ('enterable' === popoverInput) {
if (!options.tooltip) {
Expand Down Expand Up @@ -481,6 +513,7 @@ myChart.setOption(themeManager.getChartOptions());
document.querySelector(`#accordion_${id} #popoverSharedInput option[value="${popoverSharedInput}"]`).setAttribute('selected', 'selected');
document.querySelector(`#accordion_${id} #popoverAxisInput option[value="${popoverAxisInput}"]`).setAttribute('selected', 'selected');
document.querySelector(`#accordion_${id} #popoverTemplateInput option[value="${popoverTemplateInput}"]`).setAttribute('selected', 'selected');
document.querySelector(`#accordion_${id} #usedLegends option[value="${usedLegends}"]`).setAttribute('selected', 'selected');

document.querySelector(`#accordion_${id} #cssTheme option[value="${cssThemeName}"]`).setAttribute('selected', 'selected');
}
Expand All @@ -500,6 +533,8 @@ myChart.setOption(themeManager.getChartOptions());
if (legends) {
themeManager.externalizeLegends(myChart, `#${id}_legend`);
iframe.style.height = `calc(60vh + 2.375rem)`; // Fix to avoid having a vertical scrollbar within the iframe for the first rendering
} else {
iframe.contentDocument.getElementById(id + '_legend').innerHTML = '';
}
themeManager.manageChartResize(myChart, chartId);
if ('none' !== popoverInput) {
Expand Down Expand Up @@ -535,6 +570,7 @@ async function changeTheme(id) {
document.querySelector(`#accordion_${id} #popoverSharedInput`).value,
document.querySelector(`#accordion_${id} #popoverAxisInput`).value,
document.querySelector(`#accordion_${id} #popoverTemplateInput`).value,
document.querySelector(`#accordion_${id} #usedLegends`).value,

document.querySelector(`#accordion_${id} #cssTheme`).value,
true
Expand Down
16 changes: 8 additions & 8 deletions src/theme/css-themes/css-themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,8 @@ const BOOSTED5_Definition: ODSChartsCSSThemeDefinition = {
odsChartsLegendColor: {
classes: ['d-block', 'position-relative'],
styles: {
width: '10px',
height: '10px',
width: '8px',
height: '8px',
},
},
odsChartsLegendLabel: {},
Expand All @@ -133,8 +133,8 @@ const BOOSTED5_Definition: ODSChartsCSSThemeDefinition = {
odsChartsPopoverColor: {
classes: ['d-block', 'position-relative'],
styles: {
width: '10px',
height: '10px',
width: '8px',
height: '8px',
},
},
},
Expand Down Expand Up @@ -169,8 +169,8 @@ const BOOSTED4_Definition: ODSChartsCSSThemeDefinition = {
odsChartsLegendColor: {
classes: ['d-block', 'position-relative'],
styles: {
width: '10px',
height: '10px',
width: '8px',
height: '8px',
},
},
odsChartsLegendLabel: {},
Expand All @@ -185,8 +185,8 @@ const BOOSTED4_Definition: ODSChartsCSSThemeDefinition = {
odsChartsPopoverColor: {
classes: ['d-block', 'position-relative'],
styles: {
width: '10px',
height: '10px',
width: '8px',
height: '8px',
},
},
},
Expand Down
68 changes: 44 additions & 24 deletions src/theme/legends/ods-chart-legends.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const DEFAULT_CSS = `.ods-charts-no-css-lib.ods-charts-legend-holder {
}
.ods-charts-no-css-lib .ods-charts-legend-color {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
position: relative;
display: block;
}
Expand Down Expand Up @@ -77,6 +77,8 @@ export class ODSChartsLegends {

public static getLegendData(dataOptions: any, updateDataOption: boolean = true): ODSChartsLegendData {
let legendData: string[] = dataOptions.legend && dataOptions.legend.data ? dataOptions.legend.data : [];
let serieNames: string[];
const monoSerieGraphe = 1 === dataOptions.series.length && dataOptions.series[0].data && ['pie'].includes(dataOptions.series[0].type);

if (!dataOptions.legend || !dataOptions.legend.data) {
if (dataOptions.dataset && dataOptions.dataset.source) {
Expand All @@ -102,34 +104,53 @@ export class ODSChartsLegends {
if (updateDataOption && !dataOptions.legend) {
dataOptions.legend = {};
}
legendData = dataOptions.series.map((serie: any, index: number) => {
if (!serie.name) {
throw new Error(`Missing data array of legends in legend chart option`);
}
return serie.name;
});
if (monoSerieGraphe) {
legendData = dataOptions.series[0].data.map((serie: any, index: number) => {
if (!serie.name) {
throw new Error(`Missing data array of legends in legend chart option`);
}
return serie.name;
});
} else {
legendData = dataOptions.series.map((serie: any, index: number) => {
if (!serie.name) {
throw new Error(`Missing data array of legends in legend chart option`);
}
return serie.name;
});
}
if (updateDataOption) {
dataOptions.legend.data = legendData;
}
}
}

if (updateDataOption && !dataOptions.series) {
dataOptions.series = legendData.map((serie: any, index: number) => ({
name: 'serie_Name_' + index,
}));
}
return {
labels: legendData,
names: dataOptions.series.map((serie: any, index: number) => {
if (monoSerieGraphe) {
serieNames = dataOptions.series[0].data.map((serie: any, index: number) => {
if (!serie.name) {
throw new Error(`Missing data array of legends in legend chart option`);
}
return serie.name;
});
} else {
if (updateDataOption && !dataOptions.series) {
dataOptions.series = legendData.map((serie: any, index: number) => ({
name: 'serie_Name_' + index,
}));
}
serieNames = dataOptions.series.map((serie: any, index: number) => {
if (!serie.name) {
if (!updateDataOption) {
throw new Error(`Missing series names in chart option`);
}
serie.name = 'serie_Name_' + index;
}
return serie.name;
}),
});
}
return {
labels: legendData,
names: serieNames,
};
}

Expand Down Expand Up @@ -163,26 +184,25 @@ export class ODSChartsLegends {
<div class="ods-charts-legend-container ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendContainer)}"
style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendContainer)}"
>
${(legends ? legends.labels : []).map(
(legendLabel: string, index: number) => `<a class="ods-charts-legend-link ${ODSChartsItemCSSDefinition.getClasses(
cssTheme.legends?.odsChartsLegendLink
)}"
${(legends ? legends.labels : []).map((legendLabel: string, index: number) => {
let colorIndex = index % colors.length;
return `<a class="ods-charts-legend-link ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendLink)}"
style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendLink)}"
href="javascript:" onclick="ods_chart_legend_switchLegend[${JSON.stringify(this.legendHolderSelector).replace(/"/g, '&quot;')}](this, ${JSON.stringify(
legends.names[index]
).replace(/"/g, '&quot;')})">
<span class="ods-charts-legend-color-holder ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendColorHolder)}"
style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendColorHolder)}">
<span style="background-color:${colors[index]}; ${ODSChartsItemCSSDefinition.getStyles(
<span style="background-color:${colors[colorIndex]}; ${ODSChartsItemCSSDefinition.getStyles(
cssTheme.legends?.odsChartsLegendColor
)}" class="ods-charts-legend-color ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendColor)}"></span>
</span>
<label class="ods-charts-legend-label ${ODSChartsItemCSSDefinition.getClasses(cssTheme.legends?.odsChartsLegendLabel)}"
style="${ODSChartsItemCSSDefinition.getStyles(cssTheme.legends?.odsChartsLegendLabel)}"
role="button">${legendLabel}</label>
</a>`
).join(`
</a>`;
}).join(`
`)}
</div>
</div>`;
Expand Down
17 changes: 17 additions & 0 deletions src/theme/ods-chart-theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,10 +407,27 @@ export class ODSChartsTheme {
color: ODSChartsMode.LIGHT === this.options.mode ? '#CCCCCC' : '#666666',
},
};
const legend = {
textStyle: {
fontWeight: 'bold',
fontSize: 14,
color: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF',
},
icon: 'rect',
itemWidth: 10,
itemHeight: 10,
itemStyle: {
borderColor: ODSChartsMode.LIGHT === this.options.mode ? '#000000' : '#FFFFFF',
borderWidth: 1,
},
};

const themeOptions: any = {
xAxis: { axisLabel: cloneDeepObject(axisLabel) },
yAxis: { axisLabel: cloneDeepObject(axisLabel) },
legend: cloneDeepObject(legend),
};

for (const axis of ['xAxis', 'yAxis']) {
if (!isMainAxis(this.dataOptions[axis]) && !(this.dataOptions[axis] && this.dataOptions[axis].axisLine)) {
themeOptions[axis].axisLine = { show: false };
Expand Down
4 changes: 2 additions & 2 deletions src/theme/popover/ods-chart-popover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ const DEFAULT_NONE_CSS = `
}
.ods-charts-no-css-lib .ods-charts-popover-color {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
position: relative;
display: block;
}
Expand Down

0 comments on commit e7be772

Please sign in to comment.