SHARE
TWEET

Untitled

a guest May 24th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, {Component} from 'react';
  2. import Chart from 'chart.js';
  3. import $ from 'jquery';
  4. import * as api from "../../api/api";
  5.  
  6. class DeliveryRateChartComponent extends Component {
  7.  
  8.     constructor(){
  9.         super()
  10.  
  11.         this.state = {
  12.             data: 'test'
  13.         }
  14.         this.setChartData=this.setChartData.bind(this)
  15.     }
  16.  
  17.     componentDidMount(){
  18.         api.dashboardsPerformance()
  19.             .then(res => {
  20.                 //console.log({dashboardsPerformance: res.data})
  21.                 this.setState({data: res.data.results}, ()=>{
  22.                     this.setChartData()
  23.                 })
  24.             })
  25.             .catch(error => {
  26.                 console.log({dashboardsPerformance: error})
  27.             })
  28.     }
  29.  
  30.     setChartData(){
  31.         $('#deliveryRateChartLoading').show()
  32.         var array = this.state.data
  33.         var arrayDates = new Set()
  34.         var arrayStatuses = new Set()
  35.  
  36.         for (var i = 0; i < array.length; i++) {
  37.             arrayDates.add(array[i]._id.dayMonthYear.$date)
  38.             arrayStatuses.add(array[i]._id.trackingStatus)
  39.         }
  40.  
  41.         var uniqueArrayOfDates = Array.from(arrayDates)
  42.         var arrayForOneDay = []
  43.         var arrayForAllDays = []
  44.         for (var i = 0; i < uniqueArrayOfDates.length; i++) {
  45.             for (var t = 0; t < array.length; t++) {
  46.                 if (uniqueArrayOfDates[i] === array[t]._id.dayMonthYear.$date) {
  47.                     arrayForOneDay.push(array[t])
  48.                 }
  49.             }
  50.             arrayForAllDays.push(arrayForOneDay)
  51.             arrayForOneDay = []
  52.         }
  53.  
  54.         var mapResult = new Map()
  55.         var uniqueArrayOfStatuses = Array.from(arrayStatuses)
  56.         for (var i = 0; i < uniqueArrayOfStatuses.length; i++) {
  57.             mapResult.set(uniqueArrayOfStatuses[i], [])
  58.         }
  59.         var count = 0
  60.         var deliveryRateArray = []
  61.         var numOne = 1
  62.         var numTwo = 1
  63.         for (var i = 0; i < arrayForAllDays.length; i++) {
  64.             //work with one day there
  65.  
  66.             for (var j = 0; j < uniqueArrayOfStatuses.length; j++) {
  67.                 var boolean = false
  68.                 for (var k = 0; k < arrayForAllDays[i].length; k++) {
  69.                     if(uniqueArrayOfStatuses[j] === arrayForAllDays[i][k]._id.trackingStatus) {
  70.                         boolean = true
  71.                         count = arrayForAllDays[i][k].total
  72.                     }
  73.                 }
  74.                 if (boolean) {
  75.                     mapResult.get(uniqueArrayOfStatuses[j]).push(count);
  76.                 } else {
  77.                     mapResult.get(uniqueArrayOfStatuses[j]).push(0)
  78.                 }
  79.  
  80.                 if (boolean && uniqueArrayOfStatuses[j] === "EXEPTION" || uniqueArrayOfStatuses[j] === "IN_TRANSIT") {
  81.                     numOne += count
  82.                 } else if (boolean && uniqueArrayOfStatuses[j] === "DELIVERED") {
  83.                     numTwo = count
  84.                 }
  85.  
  86.  
  87.             }
  88.  
  89.             deliveryRateArray.push(numTwo / (numOne));
  90.             numOne = 1
  91.             numTwo = 1
  92.         }
  93.  
  94.         console.log(deliveryRateArray)
  95.  
  96.  
  97.  
  98.         console.log(mapResult)
  99.         console.log(arrayForAllDays)
  100.  
  101.  
  102.         let dataAsString = []
  103.         for (let  i = 0; i < uniqueArrayOfDates.length; i++){
  104.             if (i % 5 == 0){
  105.                 let date = new Date(uniqueArrayOfDates[i])
  106.                 dataAsString.push(date.getDate() + '/' + date.getMonth() + "/" + date.getFullYear())
  107.             } else {
  108.                 dataAsString.push('')
  109.             }
  110.  
  111.         }
  112.  
  113.  
  114.         setTimeout(function () {
  115.             var ctx = document.getElementById('deliveryRateChart');
  116.             var myChart = new Chart(ctx, {
  117.                 type: 'bar',
  118.                 data: {
  119.                     labels: dataAsString.slice(dataAsString.length - 30, dataAsString.length),//uniqueArrayOfDates.slice(uniqueArrayOfDates.length - 30, uniqueArrayOfDates.length),
  120.                     datasets: [
  121.                         {
  122.                             label: 'Delivery Rate',
  123.                             data: deliveryRateArray.slice(deliveryRateArray.length - 40, deliveryRateArray.length - 10),
  124.                             yAxisID: 'y-axis-1',
  125.                             fill: false,
  126.                             type: 'line',
  127.                             borderColor: '#239B56',
  128.                             backgroundColor: '#239B56',
  129.                         },
  130.                         {
  131.                             label: 'Unfulfilled',
  132.                             data: mapResult.get("EXCEPTION").slice(mapResult.get("EXCEPTION").length - 40, mapResult.get("EXCEPTION").length -10),
  133.                             backgroundColor: 'black'
  134.                         },
  135.                         {
  136.                             label: 'In Transit',
  137.                             data: mapResult.get("IN_TRANSIT").slice(mapResult.get("IN_TRANSIT").length - 40, mapResult.get("IN_TRANSIT").length - 10),
  138.                             backgroundColor: '#76D7C4'
  139.                         },
  140.                         {
  141.                             label: 'Delivered',
  142.                             data: mapResult.get("DELIVERED").slice(mapResult.get("DELIVERED").length - 40, mapResult.get("DELIVERED").length - 10),
  143.                             backgroundColor: '#21618C'
  144.                         },
  145.                     ]
  146.                 },
  147.                 options: {
  148.                     responsive: true,
  149.                     maintainAspectRatio: false,
  150.                     scales: {
  151.                         xAxes: [{ stacked: true }],
  152.                         yAxes: [{ stacked: true },
  153.                             {
  154.                                 id: 'y-axis-1',
  155.                                 position: 'right',
  156.                                 ticks: {
  157.                                     beginAtZero: true,
  158.                                     callback: function(value, index, values) {
  159.                                         return value + '%';
  160.                                     }
  161.                                 }
  162.                             }]
  163.                     }
  164.                 }
  165.             });
  166.             $('#deliveryRateChartLoading').hide()
  167.             $('#deliveryRateChart').show()
  168.         }, 1000)
  169.     }
  170.  
  171.     render(){
  172.         return (
  173.             <div>
  174.                 <div>
  175.                     <canvas id="deliveryRateChart" style={{height: '100%'}}/>
  176.                 </div>
  177.                 <div id="deliveryRateChartLoading" className={"text-center"}>
  178.                     <div className="spinner-border text-primary" role="status">
  179.                         <span className="sr-only">Loading...</span>
  180.                     </div>
  181.                 </div>
  182.             </div>
  183.         );
  184.     }
  185. }
  186.  
  187. export default DeliveryRateChartComponent
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top