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

Jump to bottom

307 datazoom not displayed correctly #396

Merged
merged 3 commits into from
Nov 13, 2024
Merged

307 datazoom not displayed correctly #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f92b0d7
fix(lib): Sliders are not visibles when using datazoom echarts functi…
jacques-lebourgeois Nov 4, 2024
4fa7dda
doc(lib): Add example of use of sliders with datazoom echarts functio…
jacques-lebourgeois Nov 4, 2024
bcc5bdd
fix code alignment
julien-deramond Nov 7, 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
12 changes: 12 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 @@ -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
175 changes: 175 additions & 0 deletions docs/use_cases/time-slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!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();
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>
51 changes: 44 additions & 7 deletions src/theme/ODS.project.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,9 +342,50 @@ export interface EChartsProject {
visualMap: {
color: string[];
};
dataZoom: {
handleSize: string;
textStyle: {};
dataZoom?: {
borderColor?: string;
textStyle?: {
color: string;
};
brushStyle?: {
color: string;
};
handleStyle?: {
color?: string;
borderColor?: string;
};
moveHandleStyle?: {
color?: string;
opacity?: number;
};
fillerColor?: string;
emphasis?: {
handleStyle?: {
borderColor?: string;
color?: string;
};
moveHandleStyle: {
color?: string;
opacity?: number;
};
};
dataBackground?: {
lineStyle?: {
color?: string;
width?: number;
};
areaStyle?: {
color?: string;
};
};
selectedDataBackground?: {
lineStyle?: {
color?: string;
};
areaStyle?: {
color?: string;
};
};
};
markPoint: {
label: {
Expand Down Expand Up @@ -691,10 +732,6 @@ export const ODS_PROJECT: EChartsProject = {
visualMap: {
color: ['#085ebd', '#3179c8', '#5a94d3', '#84afde', '#adc9e9', '#d6e4f4'],
},
dataZoom: {
handleSize: 'undefined%',
textStyle: {},
},
markPoint: {
label: {
color: '#000000',
Expand Down