Skip to content

Commit

Permalink
feat(lib): availability to specify the colour at the series level (#204)
Browse files Browse the repository at this point in the history 
* New `EChartsProject` interface
* New `/docs/use_cases/specify-color` example page

Co-authored-by: Julien Déramond <[email protected]>
Co-authored-by: Louis-Maxime Piton <[email protected]>
  • Loading branch information
@jacques-lebourgeois @julien-deramond @louismaximepiton
3 people authored Apr 23, 2024
1 parent b5ba4b2 commit 79b042b
Show file tree
Hide file tree
Showing 5 changed files with 624 additions and 7 deletions.
14 changes: 14 additions & 0 deletions docs/use_cases/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,20 @@ <h5 class="card-title">Add unit</h5>
</div>
</div>
</div>

<div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Specific series color</h5>
<p class="card-text">
You may want to specify the color of a series in the series itself, regardless of its index.
</p>
</div>
<div class="card-footer">
<a href="./specify-color.html" class="btn btn-primary mt-3">Go to example</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
Expand Down
227 changes: 227 additions & 0 deletions docs/use_cases/specify-color.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Examples - Specific use cases - Specific series color</title>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/orange-helvetica.min.css"
rel="stylesheet"
integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ"
crossorigin="anonymous"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/boosted.min.css"
rel="stylesheet"
integrity="sha384-laZ3JUZ5Ln2YqhfBvadDpNyBo7w5qmWaRnnXuRwNhJeTEFuSdGbzl4ZGHAEnTozR"
crossorigin="anonymous"
/>
<link href="../assets/tarteaucitron-config.css" rel="stylesheet" />

<link
rel="apple-touch-icon"
href="../images/favicons/apple-touch-icon.png"
sizes="180x180"
/>
<link
rel="icon"
href="../images/favicons/favicon-32x32.png"
sizes="32x32"
type="image/png"
/>
<link
rel="icon"
href="../images/favicons/favicon-16x16.png"
sizes="16x16"
type="image/png"
/>
<link rel="manifest" href="../images/favicons/manifest.json" />
<link
rel="mask-icon"
href="../images/favicons/safari-pinned-tab.svg"
color="#000"
/>
<link rel="icon" href="../images/favicons/favicon.ico" />
<meta
name="msapplication-config"
content="../images/favicons/browserconfig.xml"
/>
<meta name="theme-color" content="#000" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript" src="../../dist/ods-charts.js"></script>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<header data-bs-theme="dark">
<nav class="navbar navbar-expand-lg" aria-label="Global navigation">
<div class="container-xxl">
<div class="navbar-brand me-auto me-lg-4">
<a class="stretched-link" href="./">
<img
src="../images/orange-logo.svg"
width="50"
height="50"
alt="ODS Charts - Back to Home"
loading="lazy"
/>
</a>
<h1 class="title">Orange Design System Charts</h1>
</div>
</div>
</nav>
</header>
<div class="title-bar">
<div class="container-xxl">
<h1 class="display-1">Specific series color</h1>
</div>
</div>
<div class="container pt-3">
<div class="card w-100">
<div class="card-body">
<h5 class="card-title">Specify the color of a series</h5>
<p class="card-text">
You may want to specify the color of a series in the series itself,
regardless of its index. This can happen if the number of series
displayed changes but, for a specific type of data, you want to keep
the same color regardless of the series' place in the list of
series to be displayed. This means that the ordered list of colors
to use will change according to the series displayed.
</p>
<p class="card-text">
To freeze the color of a series, Apache ECharts provides the
<code>itemStyle.color</code> option, which can be added to the
series definition like this:
<code>
<pre>
series: [
...
{
...
itemStyle: {
color: '#50be87'
}
}
</pre>
</code>
</p>
<div id="htmlId">
<div class="border border-light position-relative">
<div class="chart_title">
<h4 class="display-4 mx-3 mb-1 mt-3">Title</h4>
<h5 class="display-5 mx-3 mb-1 mt-0">Sub-Title</h5>
</div>
<div id="barLine_holder">
<div
id="barLine_chart"
style="width: 100%; height: 50vh"
class="position-relative"
></div>
</div>
<div id="barLine_legend"></div>
</div>
</div>
<script>
addViewCode();
</script>
</div>
</div>
<script id="codeId">
///////////////////////////////////////////////////
// Used data
///////////////////////////////////////////////////

var goals = new Array(...new Array(12).keys()).map((i) => {
return 50 + Math.random() * 50;
});

var resultsOK = new Array(...new Array(12).keys()).map((i) => {
return 50 + Math.random() * 50;
});

var resultsNOK = new Array(...new Array(12).keys()).map((i) => {
return 50 + Math.random() * 50;
});
var dates = new Array(...new Array(12).keys()).map((i) => {
var d = new Date();
d.setMonth(d.getMonth() - i);
return d.toLocaleDateString(undefined, {
month: 'short',
year: 'numeric',
});
});

// Data to be displayed
var dataOptions = {
xAxis: {
type: 'category',
data: dates,
},
tooltip: {
formatter: function (params) {
return Math.round(params[0].value);
},
},
series: [
{
data: resultsOK,
type: 'bar',
itemStyle: {
color: '#50be87',
},
},
{
data: resultsNOK,
type: 'bar',
},
{
data: goals,
type: 'line',
itemStyle: {
color: '#cd3c14',
},
},
],
legend: {
data: ['Results OK', 'Results NOK', 'Goal'],
},
};

///////////////////////////////////////////////////
// ODS Charts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager();
echarts.registerTheme(themeManager.name, themeManager.theme);

// Get the chart holder and initiate it with the generated theme
var div = document.getElementById('barLine_chart');
var myChart = echarts.init(div, themeManager.name, {
renderer: 'svg',
});

// Set the data to be displayed.
themeManager.setDataOptions(dataOptions);
// Register the externalization of the legend.
themeManager.externalizeLegends(myChart, '#barLine_legend');
// Manage window size changed
themeManager.manageChartResize(myChart, 'barLine_chart');
// Register the externalization of the tooltip/popup
themeManager.externalizePopover();
// Display the chart using the configured theme and data.
myChart.setOption(themeManager.getChartOptions());
</script>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/boosted.bundle.min.js"
integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/tarteaucitron.min.js"
integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN"
crossorigin="anonymous"
></script>
<script src="../assets/tarteaucitron-config.js"></script>
</body>
</html>
Loading

0 comments on commit 79b042b

Please sign in to comment.