kenaug74/Sylius
1
0
Fork 0
mirror of https://github.com/Sylius/Sylius.git synced 2026-07-14 09:02:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Add dashboard chart

Browse source
This commit is contained in:
kulczy 2020-01-21 15:01:15 +01:00
parent bd31f1764e
commit 5503c8ce77
No known key found for this signature in database
GPG key ID: 08238B59BDAC2E69
8 changed files with 94 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
UPGRADE-1.7.md
View file

@ -6,12 +6,13 @@ Require upgraded Sylius version using Composer:
composer require sylius/sylius:~1.7.0
```
Update your `package.json` in order to add `slick-carousel` :
Update your `package.json` in order to add `chart.js` and `slick-carousel` :
```diff
{
"dependencies": {
"babel-polyfill": "^6.26.0",
+ "chart.js": "^2.9.3",
"jquery": "^3.4.0",
"jquery.dirtyforms": "^2.0.0",
"lightbox2": "^2.9.0",

1
package.json
View file

@ -1,6 +1,7 @@
{
"dependencies": {
"babel-polyfill": "^6.26.0",
"chart.js": "^2.9.3",
"jquery": "^3.4.0",
"jquery.dirtyforms": "^2.0.0",
"lightbox2": "^2.9.0",

1
src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js
View file

@ -25,6 +25,7 @@ import './sylius-notification';
import './sylius-product-images-preview';
import './sylius-product-slug';
import './sylius-taxon-slug';
import './sylius-chart';
import SyliusTaxonomyTree from './sylius-taxon-tree';
import formsList from './sylius-forms-list';

43
src/Sylius/Bundle/AdminBundle/Resources/private/js/sylius-chart.js Normal file
View file

@ -0,0 +1,43 @@
import 'chart.js/dist/Chart.min';
const drawChart = function drawChart(canvas) {
const labels = canvas.getAttribute('data-labels');
const values = canvas.getAttribute('data-values');
const chartElement = new Chart(canvas, {
type: 'bar',
data: {
labels: JSON.parse(labels),
datasets: [{
data: JSON.parse(values),
backgroundColor: 'rgba(26, 187, 156, 0.3)',
borderColor: 'rgba(26, 187, 156, 1)',
borderWidth: 1,
}],
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
},
}],
xAxes: [{
gridLines: {
display: false,
},
}],
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
},
});
};
const canvas = document.getElementById('dashboard-chart');
if (canvas) {
drawChart(canvas);
}

1
src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml
View file

@ -46,3 +46,4 @@ sylius:
ui:
gateway:
no_sca_support_notice: The chosen payment gateway does not support SCA.
sales_summary: Sales summary

15
src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/_chart.html.twig Normal file
View file

@ -0,0 +1,15 @@
{% set labels, values =
['02.19', '03.19', '04.19', '05.19', '06.19', '07.19', '08.19', '09.19', '10.19', '11.19', '12.19', '01.20'],
[399, 1200, 199, 788, 399, 1100, 199, 23, 399, 999, 199, 567]
%}
{% if labels and values %}
<div class="ui grid">
<div class="column">
<h3 class="ui top attached header">{{ 'sylius.ui.sales_summary'|trans }}</h3>
<div class="ui attached segment" style="height: 400px;">
<canvas id="dashboard-chart" data-labels="{{ labels|json_encode() }}" data-values="{{ values|json_encode() }}"></canvas>
</div>
</div>
</div>
{% endif %}

2
src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/index.html.twig
View file

@ -14,6 +14,8 @@
{{ sonata_block_render_event('sylius.admin.dashboard.after_statistics', {'channel': channel, 'statistics': statistics}) }}
{% include '@SyliusAdmin/Dashboard/_chart.html.twig' %}
{% include '@SyliusAdmin/Dashboard/_menu.html.twig' %}
{{ sonata_block_render_event('sylius.admin.dashboard.after_menu', {'channel': channel, 'statistics': statistics}) }}

30
yarn.lock
View file

@ -2300,6 +2300,29 @@ chardet@^0.4.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
chart.js@^2.9.3:
version "2.9.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.1.8:
version "2.1.8"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@ -2479,7 +2502,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.1:
color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -6035,6 +6058,11 @@ mixin-deep@^1.2.0:
dependencies:
minimist "0.0.8"
moment@^2.10.2:
version "2.24.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"