diff --git a/UPGRADE-1.7.md b/UPGRADE-1.7.md index 793fbad61f..2894b9052d 100644 --- a/UPGRADE-1.7.md +++ b/UPGRADE-1.7.md @@ -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", diff --git a/package.json b/package.json index 122e0f3ee7..8880db7b88 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js b/src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js index 0de66761b4..5f22addf42 100644 --- a/src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js +++ b/src/Sylius/Bundle/AdminBundle/Resources/private/js/app.js @@ -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'; diff --git a/src/Sylius/Bundle/AdminBundle/Resources/private/js/sylius-chart.js b/src/Sylius/Bundle/AdminBundle/Resources/private/js/sylius-chart.js new file mode 100644 index 0000000000..a66a595081 --- /dev/null +++ b/src/Sylius/Bundle/AdminBundle/Resources/private/js/sylius-chart.js @@ -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); +} diff --git a/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml b/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml index 0d09f8e1d4..cabfdd99c2 100644 --- a/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml +++ b/src/Sylius/Bundle/AdminBundle/Resources/translations/messages.en.yml @@ -46,3 +46,4 @@ sylius: ui: gateway: no_sca_support_notice: The chosen payment gateway does not support SCA. + sales_summary: Sales summary diff --git a/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/_chart.html.twig b/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/_chart.html.twig new file mode 100644 index 0000000000..d6f9431880 --- /dev/null +++ b/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/_chart.html.twig @@ -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 %} +
+
+

{{ 'sylius.ui.sales_summary'|trans }}

+
+ +
+
+
+{% endif %} diff --git a/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/index.html.twig b/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/index.html.twig index 65884d49e9..74e2871afd 100644 --- a/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/index.html.twig +++ b/src/Sylius/Bundle/AdminBundle/Resources/views/Dashboard/index.html.twig @@ -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}) }} diff --git a/yarn.lock b/yarn.lock index 2983936d88..bd3e3edf69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"