<template>
  <div class="container-fluid is-fullhd" id="app">
  <div class="col-lg-12 col-md-12 col-sm-10 col-xs-10">
    <!-- <div class="text-xs-center row">
        <v-pagination :length="6" v-model="page" circle></v-pagination>
    </div> -->
    <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
    <!-- <div class="text-xs-center" style="height: 50%; margin-top: -12px; margin-bottom: -29px;"> -->
        <v-container @click="updateSlide()" class="text-xs-center" height="10px" style="margin-top: -12px; margin-bottom: -29px;">
            <v-layout justify-center height="10px">
                <v-flex md8 sm10 xs12>
                    <v-card dark md8 sm10 xs12>
                        <v-card-text>
                            <v-pagination :length="4" v-model="page" circle :color="color"></v-pagination>
                        </v-card-text>
                    </v-card>
                </v-flex>
            </v-layout>
        </v-container>
    <!-- </div> -->

    <carousel-3d :autoplay="true" ref="mycarousel" @before-slide-change="updatePaginate" :autoplay-timeout="15000" :width="1330" :height="700" :perspective="3" :space="370" :display="3" :border="2" :controls-visible="false" :controls-prev-html="'&#10092;'" :controls-next-html="'&#10093;'"
               :controls-width="30" :controls-height="60">

        <slide :index="0">
            <multiple-state :appData="lsData" style="height: 100%;"></multiple-state>
        </slide>
        <slide :index="1" >
            <multiple-month :appData="lsData" style="height: 100%;"></multiple-month>
        </slide>
        <slide :index="2">
            <multiple-supply :appData="lsData" style="height: 100%;"></multiple-supply>
        </slide>
        <slide :index="3">
            <across-states :appData="lsData" style="height: 100%;"></across-states>
        </slide>

    </carousel-3d>
    </fullscreen>
    <div class="text-xs-center pull-right" @click="toggle()">
        <v-btn dark color="primary">Fullscreen <v-icon right x-large dark>fullscreen</v-icon></v-btn>
    </div>
  </div>
  </div>
</template>

<script>

import Plotly from 'plotly.js/dist/plotly'
import Fullscreen from "vue-fullscreen/src/component.vue"
import MultiSelect from 'vue-multiselect'
import vueSlider from 'vue-slider-component';
import { Carousel3d, Slide } from 'vue-carousel-3d';
import MultipleState from './MultipleState';
import MultipleMonth from './MultipleMonth';
import MultipleSupply from './MultipleSupply';
import AcrossStates from './AcrossStates';

export default {
  components: {Fullscreen, Carousel3d, Slide, MultiSelect, MultipleState, MultipleMonth, MultipleSupply, AcrossStates},
  data() {
      return {
        page: 1,
        color:"#c0ff00",
        date: new Date(),
        fullscreen: false,
        apiUrl: "https://somefirebaseAPI.json",
        lsData: JSON.parse(this.$ls.get('nphcdadrr')),
        value: [1, 1],
        options: {
          width: "90%",
          style: {
              "marginLeft": "3%"
          },
          bgStyle: {
            "backgroundColor": "#fff",
            "boxShadow": "inset 0.5px 0.5px 3px 1px rgba(0,0,0,.36)"
          },
          piecewiseStyle: {
              "backgroundColor": "#ccc",
              "visibility": "visible",
              "width": "10px",
              "height": "10px"
          },
          piecewiseActiveStyle: {
              "backgroundColor": "#3498db"
          },
            labelStyle: {
              "height": "5px",
              "color": "#3498db"
          },
          labelActiveStyle: {
              "color": "#3498db"
          },
          height: 9,
          dotSize: 20,
          min: 1,
          max: 1,
          interval: 1,
          disabled: false,
          show: true,
          tooltip: "always",
          piecewise: true,
        },
      }
  },
    methods: {
        // toggle full screen
        toggle () {
            this.$refs['fullscreen'].background = "green";
            this.$refs['fullscreen'].toggle()
        },
        enter(){
            return true
        },
        // to update the paginate page value
        updatePaginate(e){
            this.page = e+1;
        },
        // to move to slide when paginate is clicked
        updateSlide(){
            this.$refs.mycarousel.goSlide(this.page-1); // move to clicked paginate value.
        }
    },

    async created(){
        await this.axios.get(this.apiUrl).then(response => {
            this.lsData = response.data;
            this.$ls.set('nphcdadrr', JSON.stringify(this.lsData));
       }).catch(error =>{
           if(!this.lsData){
               this.lsData = JSON.parse(this.$ls.get('nphcdadrr'));
               if (!this.lsData){
                    alert("No internet connection and no data loaded.\nUse internet the first time before using offline")
               }else{
                   console.log('error in fetching data due to no network connection... using local storage');
               }
           }else{
                console.log('error in fetching data due to no network connection... using local storage');
           }
       })

    },
    mounted(){

    },
    beforeUpdate(){

    },
    updated(){


    },
    computed: {

    },
    watch: {


    }
}
</script>

<style scoped>
  /* Some CSS */
</style>

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||Next Component File Acrossstate.js||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//@js-check
import Fullscreen from "vue-fullscreen/src/component.vue"
import MultiSelect from 'vue-multiselect'
import Plotly from 'plotly.js/dist/plotly'
import vueSlider from 'vue-slider-component';
const medSupply = require('../../../assets/js-on/pentaMedSupply');

export default {
    name: 'multiplemonth',
    template: `
    <div class="row chart-container">
        <div class="text-xs-center" style="margin-top: 13em;" v-show="!isDataLoadedFirstTime">
            <v-progress-circular indeterminate v-bind:size="70" v-bind:width="7" color="purple"></v-progress-circular>
        </div>
        <div v-show="isDataLoadedFirstTime" class="is-fullhd" style="padding: 3px;">
            <fullscreen ref="fullscreen" :fullscreen.sync="fullscreen">
            <div class="col-md-12">
                <div class="chart-wrapper">
                    <div class="chart-title col-md-12">
                        <div class="row">
                            <div class="col-md-4">
                                <multi-select v-model="selectedMonth" :options="optionsMonth" :hide-selected="true" :searchable="true" :allow-empty="true" placeholder="Select Month" @change="" @select=""></multi-select>
                            </div>
                            <div class="col-md-8">
                                <multi-select :multiple="true"  v-model="selectedMedSupply" :options="medicalSupply" :hide-selected="true" :searchable="true" :allow-empty="false" placeholder="Select Medical Supplies" @change="" @select=""></multi-select>
                            </div>
                        </div>
                        <!-- <div class="row">
                            <vue-slider ref="slider" v-model="value" v-bind="options"></vue-slider>
                        </div> -->
                    </div>
                    <div class="chart-stage col-md-12">
                        <b><small>Vaccine wastage rate across the country <em>(comparison for selected medical supplies)</em></small></b>
                        <div ref="line" style="width:100%;"></div>
                    </div>
                    <div class="chart-notes">
                        <h4>
                            <b>
                                <small style="font-size: 1px;"><v-icon title="Across country for selected medical supplies" left x-large>menu</v-icon></small>
                                    <label class="pull-right bg-info" title="Fullscreen">
                                        <v-icon color="blue darken-2" @click="toggle()" x-large right dark>fullscreen</v-icon>
                                    </label>
                                <small class="pull-right"><v-icon title="Across country for selected medical supplies" right x-large>menu</v-icon></small>
                            </b>
                        </h4>
                    </div>
                </div>
            </div> <!-- col -->
            </fullscreen>
        </div><!-- row -->
  </div>
  `,
  components: {Fullscreen, MultiSelect},
  props: ['appData'],
  data() {
      return {
          fullscreen: true,
          data: [],
          layout: {
              title: 'Vaccine Wastage Rate By States',
              showlegend: true,
              legend: {"orientation": "h", x:.01, y:1.6},
              showgrid: false,
              gridwidth: 0,
              rangemode: "tozero",
              autosize: true,
              yaxis: {"title": "Frequency", "showgrid": false, "range": [0, 50000], "ticks": "inside",  "mirror": "allticks", "type": "linear", "autorange": false},
              "breakpoints": [],
              xaxis: {"title": "States","type": "category", "autorange": true, "showgrid": false}
          },
          selectedState: null,
          selectedMonth: null,
          optionsMonth: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
          selectedMedSupply: [],
          medicalSupply: medSupply, // array of medSupplies; imported
          lsData: JSON.parse(this.$ls.get('nphcdadrr')),
          isDataLoadedFirstTime: false,
          y: {},
      }
  },
    methods: {

        toggle () {
            this.$refs['fullscreen'].background = "green";
            this.$refs['fullscreen'].toggle();
            // this.fullscreen = !this.fullscreen
        },
        enter(){
            return true
        },
      loadData() {
          this.computeChartData();
          this.populateChart()
      },
      computeChartData() {
          // compute chart components
          this.y = {};
          this.data = [];

          // get current month
          var curMonthIndex = new Date().getMonth();
          var curMonth = this.optionsMonth[curMonthIndex];

          var selectedMonth = this.selectedMonth ? this.selectedMonth : curMonth;
          var selectedMedSupply = this.selectedMedSupply.length > 0 ? this.selectedMedSupply.slice(0) : ["025. Penta Vaccine - Maximum Stock"];
          // this.selectedMonth = this.selectedMonth.length > 0 ? this.selectedMonth : "";

          // the name of all medical supply as is from localStorage ...
          var medSupply = this.lsData[0].slice(0);

          // initialize this.y
          // the list of all the medical supplies; screened, edited and trimed
          this.medicalSupply.forEach( (elem, index) => {
              this.y[elem] = [];
          })

          selectedMedSupply.map( (elem, index) => {
              var msi = medSupply.indexOf(elem);  //medSupply Index
              this.lsData.map( (el, ind) => {
                  if (ind > 76 ){

                    // convert the date format and get MonthIndex
                    var el0 = new Date(el[0]).getMonth();
                    el0 = this.optionsMonth[el0]; // get month String from month Index.

                      if (el0 === selectedMonth ){
                          this.y[elem].push(el[msi]); // push the med supply reference data to y axis
                      }
                  }
              });
          })
          // console.log(this.y);
      },
      populateChart (name) {
          // populate chart subsequently

          // get current month
          var curMonthIndex = new Date().getMonth();
          var curMonth = this.optionsMonth[curMonthIndex];

          var selectedMedSupply = this.selectedMedSupply.length > 0 ? this.selectedMedSupply.slice(0) : ["025. Penta Vaccine - Maximum Stock"];
          var selectedMonth = this.selectedMonth ? this.selectedMonth : curMonth;

          var x = [ 'Enugu', 'Taraba', 'Bayelsa', 'Kano', 'Niger', 'Jigawa', 'Kaduna', 'Benue', 'Osun', 'Federal Government', 'Ekiti', 'Delta', 'Federal Capital Territory', 'Rivers', 'Borno', 'Kebbi', 'Lagos', 'Ondo', 'Katsina', 'Bauchi', 'Abia', 'Ogun', 'Plateau', 'Nasarawa', 'Kogi', 'Yobe', 'Ebonyi', 'Edo', 'Kwara', 'Anambra',
          'Akwa-Ibom', 'Gombe', 'Adamawa', 'Cross River', 'Imo', 'Oyo', 'Sokoto', 'Zamfara' ];

          /* to sort a numeric array, use the function below.
            Array.sort(function(a, b){return b-a});
          */
          selectedMedSupply.map( (elem, index) => {

            if (index === 0){
                var stateNameToValue = {};
                for (var ix in x){
                    // console.log(x[ix])
                    stateNameToValue[x[ix]] = this.y[elem][ix];
                }
                //this.y[elem]
                stateNameToValue = this.sortObjects(stateNameToValue);
                x = []; this.y[elem] = []
                for (let stateName in stateNameToValue){
                    if (stateNameToValue.hasOwnProperty(stateName)){
                        x.push(stateName);
                        this.y[elem].push(stateNameToValue[stateName]);
                    }
                }
            }

            var newObj = {
                x : x,
                y : this.y[elem],
                name: elem,
                type: "bar"
            }
            this.data.push(newObj)
          });
          // get the max value for the different medSupplies and configure their chart with it.
          var curMax = 0;
          // iterate over state data object
          for (let elem in this.y){

              if (this.y.hasOwnProperty(elem)) {

                  if (selectedMedSupply.indexOf(elem) > -1){

                      var arrayMax = Math.max.apply(null, this.y[elem]);
                      curMax = Math.max(curMax, arrayMax);
                  }
              }
          }
          // set the max range to current maximum value based on the medSupply.
          this.layout.yaxis.range = [0, curMax];
      },
      renderChart(){
          Plotly.newPlot(this.$refs.line, this.data, this.layout, {
              scrollZoom: false
          });
      },
      relay() {
          if(this.$refs){
              Plotly.relayout(this.$refs.line, {
                  'xaxis.autorange': true,
                  'yaxis.autorange': false
              });
          }
      },
        // function to ssort an object by its value property
        sortData(dataObj){
            var sortable = [];
            for (var value in dataObj) {
                sortable.push([value, dataObj[value]]);
            }
            sortable.sort(function(a, b) {
                return b[1] - a[1];
            });
            return sortable;
        },
        // returns a sorted object
        sortObjects(objToSort) {
            var newObject = {};
            var sortedArray = this.sortData(objToSort);
            for (var i = 0; i < sortedArray.length; i++) {
                var key = sortedArray[i][0];
                var value = sortedArray[i][1];
                newObject[key] = value;
            }
            return newObject;
        }
  },
  mounted() {
      if (this.lsData){
          this.loadData();
          this.isDataLoadedFirstTime = true;
      }
  },
  updated(){
      if(this.$refs.line){
          Plotly.relayout(this.$refs.line, {
              'xaxis.autorange': true,
              'yaxis.autorange': false
          });
      }
 },
  watch: {
      data(newData) {
          Plotly.newPlot(this.$refs.line, this.data, this.layout);
      },
      selectedMonth(month){
          // this.selectedMonth = month;
          if (this.lsData){
            this.loadData();
          }
      },
      selectedMedSupply(medSupply){
          // this.medSupply = medSupply;
          if (this.lsData){
            this.loadData();
          }
      },
      appData (val){
        this.isDataLoadedFirstTime = true;
        this.lsData = val;
        this.loadData();
      }
  }
}

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||Another Component File MultipleMonth.js|||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

// code goes here

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||Another Component File MultipleState.js|||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

// code goes here

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||Another Component File MultipleSupply.js|||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

// code goes here