Skip to content

Commit

Permalink
docs(examples): add pie and donut charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@louismaximepiton
louismaximepiton committed Jul 26, 2024
1 parent 2fe4415 commit e6333da
Show file tree
Hide file tree
Showing 12 changed files with 233 additions and 1 deletion.
2 changes: 2 additions & 0 deletions NOTICE.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ and reproducing the content of the NOTICE and DOCUMENTATION files.
Any use or displaying shall constitute an infringement under intellectual property laws of France and international conventions.

docs/images/ods-bar-charts.png
docs/images/ods-donut-charts.png
docs/images/ods-double-line-charts.png
docs/images/ods-line-charts.png
docs/images/ods-mixed-charts.png
docs/images/ods-pie-charts.png
docs/images/ods-stacked-bar-charts.png
docs/images/orange-logo.svg
docs/images/favicons/android-chrome-192x192.png
Expand Down
63 changes: 63 additions & 0 deletions docs/examples/donut-chart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Donut Charts - Examples - ODS Charts</title>
<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
<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" />
<!--
`ods-charts.js` is already imported by the iframe. However, it is imported here too to access the enums that are used in `index.js`.
-->
<script type="text/javascript" src="../../dist/ods-charts.js"></script>
<script type="module" 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>
<main>
<div class="title-bar">
<div class="container-xxl">
<h1 class="display-1">Donut charts example</h1>
</div>
</div>
<div class="container d-flex flex-nowrap pt-3">
<div class="card w-100">
<div class="card-body">
<h5 class="card-title">Donut chart</h5>
<p class="card-text">Used to show proportions rather than absolute values.</p>
<div id="donutChart"></div>
<script>
window.addEventListener('DOMContentLoaded', () => {
window.generateDonutChart('donutChart');
});
</script>
</div>
</div>
</div>
</main>
<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>
32 changes: 31 additions & 1 deletion docs/examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,44 @@ <h6 class="card-subtitle">Stacked bar chart</h6>
<div class="card-body">
<h5 class="card-title">Orange Design System</h5>
<h6 class="card-subtitle">Bar + line chart</h6>
<p class="card-text">Compare proportional contributions within a category.</p>
<p class="card-text">Two metric values showing quantity alongside changes in trends over time.</p>
<a href="https://system.design.orange.com/0c1af118d/p/68a692-bar-chart/t/66991e" class="card-link">Orange Design System - Data display</a>
</div>
<div class="card-footer">
<a href="./bar-line-chart.html" class="btn btn-primary mt-3">Go to example</a>
</div>
</div>
</div>

<div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
<div class="card h-100">
<img src="../images/ods-pie-charts.png" class="card-img-top" alt="" />
<div class="card-body">
<h5 class="card-title">Orange Design System</h5>
<h6 class="card-subtitle">Pie chart</h6>
<p class="card-text">Divides data into sectors that each represent a proportion of the whole.</p>
<a href="https://design.orange.com/0c1af118d/p/13c921-pie-and-donut-charts/t/10ead7" class="card-link">Orange Design System - Data display</a>
</div>
<div class="card-footer">
<a href="./pie-chart.html" class="btn btn-primary mt-3">Go to example</a>
</div>
</div>
</div>

<div class="col-12 col-lg-4 col-md-6 align-self-stretch py-2">
<div class="card h-100">
<img src="../images/ods-donut-charts.png" class="card-img-top" alt="" />
<div class="card-body">
<h5 class="card-title">Orange Design System</h5>
<h6 class="card-subtitle">Donut chart</h6>
<p class="card-text">Shows the relationship of parts to a whole.</p>
<a href="https://design.orange.com/0c1af118d/p/13c921-pie-and-donut-charts/t/80abab" class="card-link">Orange Design System - Data display</a>
</div>
<div class="card-footer">
<a href="./donut-chart.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
74 changes: 74 additions & 0 deletions docs/examples/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -912,3 +912,77 @@ window.generateBarLineChart = async (id, horizontal = false, grouped = false, st
ODSCharts.ODSChartsLineStyle.BROKEN_WITH_POINTS
);
};

window.generatePieChart = async (id) => {
// Specify the configuration items and data for the chart
var option = {
legend: {
orient: 'vertical',
right: '10',
top: '10',
},
series: [
{
type: 'pie',
label: { show: false },
labelLine: { show: false },
data: [
{ name: 'Label 1', value: 25 },
{ name: 'Label 2', value: 50 },
{ name: 'Label 3', value: 75 },
{ name: 'Label 4', value: 10 },
{ name: 'Label 5', value: 100 },
{ name: 'Label 6', value: 30 },
{ name: 'Label 7', value: 5 },
],
label: {
show: false,
position: 'outside',
},
radius: ['0%', '95%'],
},
],
};
displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS);
};

window.generateDonutChart = async (id) => {
// Specify the configuration items and data for the chart
var option = {
legend: {
orient: 'vertical',
right: '10',
top: '10',
},
series: [
{
type: 'pie',
label: { show: false },
labelLine: { show: false },
data: [
{ name: 'Label 1', value: 25 },
{ name: 'Label 2', value: 50 },
{ name: 'Label 3', value: 75 },
{ name: 'Label 4', value: 10 },
{ name: 'Label 5', value: 100 },
{ name: 'Label 6', value: 30 },
{ name: 'Label 7', value: 5 },
],
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: 35,
fontWeight: 700,
formatter: '{d}%',
},
},
radius: ['80%', '95%'],
},
],
};
displayChart(id, option, undefined, ODSCharts.ODSChartsCategoricalColorsSet.DEFAULT_SUPPORTING_COLORS);
};
63 changes: 63 additions & 0 deletions docs/examples/pie-chart.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pie Charts - Examples - ODS Charts</title>
<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous" />
<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" />
<!--
`ods-charts.js` is already imported by the iframe. However, it is imported here too to access the enums that are used in `index.js`.
-->
<script type="text/javascript" src="../../dist/ods-charts.js"></script>
<script type="module" 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>
<main>
<div class="title-bar">
<div class="container-xxl">
<h1 class="display-1">Pie charts example</h1>
</div>
</div>
<div class="container d-flex flex-nowrap pt-3">
<div class="card w-100">
<div class="card-body">
<h5 class="card-title">Pie chart</h5>
<p class="card-text">Used to show proportions rather than absolute values.</p>
<div id="pieChart"></div>
<script>
window.addEventListener('DOMContentLoaded', () => {
window.generatePieChart('pieChart');
});
</script>
</div>
</div>
</div>
</main>
<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>
Binary file modified docs/images/ods-bar-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/ods-donut-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/ods-double-line-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/ods-line-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/ods-mixed-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/ods-pie-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/images/ods-stacked-bar-charts.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit e6333da

Please sign in to comment.