From d3e406775bd8e3f2e71a12c63b1cbee3f005aed1 Mon Sep 17 00:00:00 2001 From: Kamiran Ibrahim Date: Wed, 5 Aug 2020 22:05:16 -0500 Subject: [PATCH] chart for single day also tap between text and chart --- package.json | 1 + .../components/reports/reports.scss | 8 +- .../components/reports/reportsIngredients.js | 98 ++++++++++++++++++- 3 files changed, 105 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 75b2eac..a27647f 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "@fortawesome/fontawesome-free": "^5.13.1", "axios": "^0.19.2", "bootstrap": "^4.5.0", + "chart.js": "^2.9.3", "firebase": "^7.16.0", "jquery": "^3.5.1", "moment": "^2.27.0", diff --git a/src/javascripts/components/reports/reports.scss b/src/javascripts/components/reports/reports.scss index dbe2b18..8a55178 100644 --- a/src/javascripts/components/reports/reports.scss +++ b/src/javascripts/components/reports/reports.scss @@ -20,4 +20,10 @@ .btn-primary:hover { background-color: $primary-hover !important; border-color: $primary-hover !important; -} \ No newline at end of file +} + +.card-header1 { + /*border: 1px solid $primary-color;*/ + background-image: linear-gradient(0deg, #FFF, #e3e3e3); + font-size: 1.1rem; +} diff --git a/src/javascripts/components/reports/reportsIngredients.js b/src/javascripts/components/reports/reportsIngredients.js index 9c8f385..54082b7 100644 --- a/src/javascripts/components/reports/reportsIngredients.js +++ b/src/javascripts/components/reports/reportsIngredients.js @@ -1,4 +1,5 @@ import './reports.scss'; +import Chart from 'chart.js'; import moment from 'moment'; import utils from '../../helpers/utils'; import ingredientsSmash from '../../helpers/data/ingredientsSmash'; @@ -34,7 +35,15 @@ const drawIngredients = () => { -
`; +
+
+
+
+ +
+
+
+ `; utils.printToDom('#ingredientsDiv', domString); }; @@ -83,22 +92,108 @@ const getOneDayIngredients = () => {

Amount of Ingredients Used

on ${pickDate1}

`; + const labels = []; + const dataSets = []; + const cTitle = `Amount of Ingredients Used on ${pickDate1}`; const keys = Object.keys(rawIngredients); keys.forEach((key) => { domString += `

${key}: ${rawIngredients[key]}

`; + // console.warn(key); + labels.push(key); + dataSets.push(rawIngredients[key]); }); domString += `
+ + `; + const buildTextCard = domString; + const domChart = ` +
+
+
+ +
+
+
+ `; + domString = ''; + domString += ` + +
+ +
`; utils.printToDom('div #reportsIngredDisplay', domString); + $('#buildChart').removeClass('hide'); + $('buildChart').css('background-color', 'red'); + // eslint-disable-next-line no-use-before-define + drowChart(labels, dataSets, cTitle); }) .catch((err) => console.warn('did not bring the reservation ', err)); }; +const drowChart = (labelArr, dataArr, cTitle) => { + const ctx = document.getElementById('myChart').getContext('2d'); + const myChart = new Chart(ctx, { + type: 'pie', + data: { + labels: labelArr, + datasets: [{ + data: dataArr, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)', + 'red', + 'orange', + 'yellow', + 'green', + 'blue', + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)', + 'red', + 'orange', + 'yellow', + 'green', + 'blue', + ], + borderWidth: 1, + }], + }, + options: { + title: { + text: cTitle, + display: true, + }, + legend: { + display: true, + position: 'right', + }, + }, + }); + console.warn(myChart); + // const domString = myChart; + // utils.printToDom('#myChart', domString); +}; + const getAllDayIngredients = () => { // get reservations in the range of these dates let domString = ''; @@ -139,6 +234,7 @@ const pickReport = () => { if (pickDate1) { // eslint-disable-next-line no-use-before-define getOneDayIngredients(); + // drowChart(); // console.warn('there is date selected', pickDate1, valid); } else { utils.printToDom('div #reportsIngredDisplay', 'Please select the date to get the report for it!!');