Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use the formatter function of the Apache ECharts tooltp in the ods-ch… #197

Merged
merged 2 commits into from
Apr 18, 2024
Merged

Use the formatter function of the Apache ECharts tooltp in the ods-ch… #197

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce94440
Use the formatter function of the Apache ECharts tooltp in the ods-ch…
jacques-lebourgeois Apr 15, 2024
15a6531
[REVIEW]
jacques-lebourgeois Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 176 additions & 0 deletions docs/use_cases/add-unit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
<!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">
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
<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:
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved
<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 = {
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
Open in desktop
Original file line number Diff line number Diff line change
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
Loading