Skip to content

Commit

Permalink
feat(lib): Add example of use of sliders with datazoom echarts functi…
Browse files Browse the repository at this point in the history 
…onnality
  • Loading branch information
@jacques-lebourgeois
jacques-lebourgeois committed Nov 4, 2024
1 parent f92b0d7 commit 3a9210f
Show file tree
Hide file tree
Showing 2 changed files with 189 additions and 0 deletions.
12 changes: 12 additions & 0 deletions docs/use_cases/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,18 @@ <h5 class="card-title">Specific legend holders</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">Time slider</h5>
<p class="card-text">You may want to add a timeline slider under the graph.</p>
</div>
<div class="card-footer">
<a href="./time-slider.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
177 changes: 177 additions & 0 deletions docs/use_cases/time-slider.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
<!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 - Time slider axis</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" integrity="sha384-Mx5lkUEQPM1pOJCwFtUICyX45KNojXbkWdYhkKUKsbv391mavbfoAmONbzkgYPzR" crossorigin="anonymous"></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">Time slider axis</h1>
</div>
</div>
<div class="container pt-3">
<div class="card w-100">
<div class="card-body">
<h5 class="card-title">Time slider axis example</h5>
<p class="card-text">This use case illustrates the use of the timeline slider.</p>
<p class="card-text">
You can add the timeline slider with the <code>dataZoom</code> option:

<code>
<pre>
dataZoom: [
{
type: 'inside',
},
{
type: 'slider',
},
],
</pre>
</code>
</p>
<p class="card-text">
You can also configure the toolbox to switch between zoom and slider with the <code>toolbox</code> option:

<code>
<pre>
toolbox: {
feature: {
dataZoom: {},
restore: {},
},
},
</pre>
</code>
</p>
<p class="card-text">
Refer to the online Apache ECharts documentation for more detail on <a href="https://echarts.apache.org/en/option.html#dataZoom" target="_blank">dataZoom</a> and on <a href="https://echarts.apache.org/en/option.html#toolbox.feature" target="_blank">toolbox</a>
configurations
</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
///////////////////////////////////////////////////

let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let data = [[base, Math.random() * 300]];
for (let i = 1; i < 20000; i++) {
let now = new Date((base += oneDay));
data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
}

// Data to be displayed
var dataOptions = {
xAxis: {
type: 'time',
},
yAxis: {
type: 'value',
},
toolbox: {
feature: {
dataZoom: {},
restore: {},
},
},
dataZoom: [
{
type: 'inside',
},
{
type: 'slider',
},
],
series: [
{
name: 'Fake Data',
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {},
data: data,
},
],
};

///////////////////////////////////////////////////
// ODS Charts
///////////////////////////////////////////////////
// Build the theme
var themeManager = ODSCharts.getThemeManager({
mode: ODSCharts.ODSChartsMode.DARK,
});
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 and use the second parameter as specified in https://ods-charts.netlify.app/api/classes/odschartspopoverdefinition to change the popup value (cf https://ods-charts.netlify.app/api/classes/odschartspopoverdefinition#getPopupContentValue)
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>

0 comments on commit 3a9210f

Please sign in to comment.