Skip to content

Commit

Permalink
Use the formatter function of the Apache ECharts tooltp in the ods-ch…
Browse files Browse the repository at this point in the history 
…arts tooltipSuggest a new feature #194
  • Loading branch information
@jacques-lebourgeois
jacques-lebourgeois committed Apr 12, 2024
1 parent cdc68ef commit 2b6b650
Show file tree
Hide file tree
Showing 5 changed files with 332 additions and 34 deletions.
180 changes: 180 additions & 0 deletions docs/use_cases/add-unit.html
View file
@@ -0,0 +1,180 @@
<!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 - Add unit</title>

<link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/dist/css/orange-helvetica.min.css" rel="stylesheet" integrity="sha384-A0Qk1uKfS1i83/YuU13i2nx5pk79PkIfNFOVzTcjCMPGKIDj9Lqx9lJmV7cdBVQZ" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/boosted@5.3.3/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/echarts@5.5.0/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 - With one line title example">
<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">Add unit</h1>
</div>
</div>
<div class="container pt-3">
<div class="card w-100">
<div class="card-body">
<h5 class="card-title">Add unit in both Y axis and tooltip display</h5>
<p class="card-text">
Apache Echarts offer the availbility to add a unit formatter.
</p>
<p class="card-text">
There are two function to provide. One for Y axis and one for the tooltip:
<code>
<pre>
yAxis: {
axisLabel: {
formatter: "{value} °C"
}
},
tooltip: {
formatter: function (params) {
return (
Math.round(params[0].value * 100) / 100 + " °C"
);
}
},
</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 = {
grid: {
left: '0%',
right: '0%',
},
xAxis: {
type: 'category',
data: dates,
},
yAxis: {
axisLabel: {
formatter: "{value} °C"
}
},
tooltip: {
formatter: function (params) {
return (
Math.round(params[0].value * 100) / 100 + " °C"
);
}
},
series: [
{
data: resultsOK,
type: 'bar',
},
{
data: resultsNOK,
type: "bar"
},
{
data: goals,
type: 'line',
},
],
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/boosted@5.3.3/dist/js/boosted.bundle.min.js" integrity="sha384-3RoJImQ+Yz4jAyP6xW29kJhqJOE3rdjuu9wkNycjCuDnGAtC/crm79mLcwj1w2o/" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
<script src="../assets/tarteaucitron-config.js"></script>
</body>
</html>
14 changes: 14 additions & 0 deletions docs/use_cases/index.html
View file
Expand Up @@ -70,6 +70,20 @@ <h5 class="card-title">Two colours for one series</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">Add unit</h5>
<p class="card-text">
Add a unit on Y axis and in the tooltip.
</p>
</div>
<div class="card-footer">
<a href="./add-unit.html" class="btn btn-primary mt-3">Go to example</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/tarteaucitronjs@1.17.0/tarteaucitron.min.js" integrity="sha384-g6Xxn1zA15svldHyZ/Ow+wUUeRxHf/v7eOOO2sMafcnMPFD25n80Yz/3bbhJBSoN" crossorigin="anonymous"></script>
Expand Down

0 comments on commit 2b6b650

Please sign in to comment.