charts_old.vue

<template>
  <div class="d-flex flex-column align-items-stretch h-100">

    <!-- Goals -->
    <div class="goals container-fluid">
      <div class="py-4 d-flex justify-content-start">
        <div v-for="(col,index) in columns" v-on:click="onColClick(index)" class="goals-box d-flex flex-column justify-content-start col-1 position-relative" :key="index" :class="{ 'goals-selected' : getSelectedColumn().index == index }">
          <progressbar v-bind:data="[1,col.expected/100,col.completed/100]" v-bind:type="col.type" v-bind:opts="col.opts" v-bind:index="index"></progressbar>
          <p class="text-light mb-0"><b>{{col.name}}</b></p>
        </div>
      </div>
    </div>

    <div class="d-flex flex-grow-1">

        <!-- Left Sidebar -->
        <div class="sidebar col-md-2 text-center d-flex flex-column">

          <!-- Achieved -->
          <div class="achieved col px-0 d-flex flex-column align-items-center justify-content-between">
            <div class="achieved-visual">
              <button class="round btn" style="padding:0;border:0;width:15vh;height:4vh;background: #BEA24F;color:white">
                {{texts.completedString}}
              </button>
              <p style="color:white;font-size:2em; font-family:'impact'">{{avgColValue.toFixed(2)}} %</p>
            </div>
            <a href="admin/bi-report"><img src="/pms-desktop/public/img/logo.png" alt="" class="img-fluid mb-4 p-4 align-self-center"></a>
            <a :href="routes" class="btn btn-primary">
            الإنتقال إلى إدارة المهام
            </a>
          </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-10 d-flex flex-column justify-content-stretch">

          <!-- Priority -->
          <div v-if="!!columns[selectedColIndex]" class="d-flex overflow-auto mb-3">
            <div v-for="(section,index) in columns[selectedColIndex].sections" :key="index" class="card-container d-flex py-4 mx-3">
              <div class="card priority w-100" :class="{'card-active' : getSelectedSection().index == index }">
                <div class="card-header">
                  <h5 class="m-0"><b>{{section.name}}</b></h5>
                </div>

                <div class="card-body d-flex justify-content-between align-items-center">
                  <h2 class="m-0">{{texts.completedString}}</h2>
                  <div class="progress w-100 mb-0 mx-3">
                    <div class="progress__text">{{section.completed}} %</div>
                    <div :style="{width:section.completed+'%', backgroundColor:section.backgroundColor}"> </div>
                  </div>
                </div>
                <div class="h-75 d-flex flex-nowrap">
                  <div v-on:click="onTaskClick(index,taskIndex)" v-for="(task,taskIndex) in section.tasks" :key="taskIndex"  class="task task-box w-100 p-4 d-flex flex-column justify-content-between min-w-215" :class="{'task-active' : getSelectedTask().index == taskIndex && getSelectedSection().index == index}">
                    <h5 class="text-center m-0 mb-2">{{task.name}}</h5>
                    <progressbar :text="task.completed+'%'" :text-style="{fontSize : '2rem',fontWeight:'bold'}"  v-bind:data="[task.expected/100,task.completed/100]" v-bind:type="SemiCircle" v-bind:opts="task.opts" v-bind:index="index+'-taskprog-'+taskIndex" style="height:75px;"></progressbar>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Metric -->
          <div class="metric d-flex flex-column flex-grow-1">
            <div v-if="loaded" class="w-100 d-flex flex-nowrap align-items-stretch matrix-bar">
              <div class="d-flex align-items-center justify-content-center" v-on:click="onTabClick(index)" v-for="(tab,index) in getSelectedTask().task.tabs" :key="index" :class="{'active-matrix' : index == getSelectedTab().index}"><p class="mb-0">{{ departments[tab.name] | underscoreToSpace }}</p></div>
            </div>
            <barChart class="w-100 flex-grow-1" :chart-data="getMetricsData(getSelectedTab().tab)" :options="options" v-if="loaded"></barChart>
          </div>
        </div> <!-- end of col-md-10 -->
    </div> <!-- End of container-fluid -->
  </div>
</template>

<script>
export default {
  mounted() {
    this.getData()
  },
  props: ['routes'],
  filters: {
    underscoreToSpace: function (value) {
      if (!value) return ''
      value = value.toString()
      const newStr = value.replace(/_/g, " ")
      return newStr
    }
  },
  data(){
    return {
      departments : {
        "corporate_communication" : "إدارة الاتصال المؤسسي",
        "information_technology" : "إدارة تقنية المعلومات",
        "strategic_planning_performance" : "إدارة التخطيط الاستراتيجي والأداء",
        "excellence_instutional_improvement" : "إدارة التميز والتطوير المؤسسي",
        "happy_dealers" : "إدارة إسعاد المتعاملين",
        "insured_services" : "إدارة خدمات المؤمن عليهم",
        "settlement_administration": "إدارة التسويات",
        "inspection_compliance" : "إدارة التفتيش والامتثال",
        "legal_administration" : "الإدارة القانونية",
        "procurement_unit" : "إدارة المشتريات والخدمات العامة",
        "hr" : "إدارة الموارد البشرية",
        "investment_department" : "قطاع الاستثمار",
        "financial_management": "الإدارة المالية",
        "research_strategic_support": "البحوث والدعم الاستراتيجي",
        "audit_risk" : "إدارة التدقيق والمخاطر",
        "health_safety_unit " : "وحدة الصحة والسلامة",
        "project_management_office" : "مكتب إدارة المشاريع",
      },
      options: {
        layout: {
          padding: {
            top: 25,
            bottom: 25
          }
        },
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
        scales: {
          yAxes: [{
            position: 'right',
            ticks: {
              beginAtZero: true,
              max:100
            }
          }]
        }
      },
      texts:{
        completedString:"منجز",
        expectedString:"مستهدف",
        leftColumnTitle:"وسطي مؤشر الأداء"
      },
      loaded : false,
      columns : [],
      col_colors : [],
      selectedColIndex : 0,
      SemiCircle : ProgressBar.SemiCircle,
      Circle : ProgressBar.Circle,
      avgColValue : 0,
    }
  },
  methods : {
    checkValue: function(val,target) {
      let chartColor;
      //console.log(this.expected);
      let threshold_1 = 33*(this.expected/100); //18.15
      let threshold_2 = 66*(this.expected/100); //36.3
      //let threshold_3 = 66*0.423;
      if(val <= threshold_1) {
        return '#CA4256' // red
      } else if(val <= threshold_2) {
          return '#D8973C' // orange
        } else {
          return '#C9CD30' // green
        }
    },
    getData: function(){
      this.$http.get('getPMSData').then((response) =>{
        var cols = response.data;
        for (let i = 0; i < cols.length; i++) {
          const col = cols[i];
          this.avgColValue += (col.value/cols.length);
          col.expected=col.week_of_the_year*100/52,
          this.expected = col.week_of_the_year*100/52,
          col.completed = col.value;
          col.type= ProgressBar.SemiCircle
          col.opts = [
            {color: '#ffffff', strokeWidth: 25},
            {color: '#7f9eb2', strokeWidth: 25},
            {color: this.checkValue(col.value, col.expected), strokeWidth: 20},
          ],
          col.stat="verybad"
          col.run="false"
          col.selectedSectionIndex = 0

          for (let j = 0; j < col.sections.length; j++) {
            const section = col.sections[j];
            section.target = col.expected
            section.expected=0
            section.completed=section.value
            section.type=ProgressBar.Circle
            section.backgroundColor=this.checkValue(section.value,section.target)
            section.selectedTaskIndex=0

            for (let k = 0; k < section.tasks.length; k++) {
              const task = section.tasks[k];
              task.target = col.expected
              task.expected=0
              task.completed= task.value
              task.opts = [{color: '#9B9B37', strokeWidth: 5}, {color: this.checkValue(task.value,task.target), strokeWidth: 10}]
              task.selectedTabIndex=0
            }
          }
        }
        this.columns = cols;
        this.loaded = true;
      });
    },
    onColClick : function(colIndex){
      this.selectedColIndex = colIndex;
    },
    onTabClick : function(tabIndex){
      this.getSelectedTask().task.selectedTabIndex = tabIndex;
    },
    onTaskClick: function(sectionIndex,taskIndex){
      this.getSelectedColumn().col.selectedSectionIndex = sectionIndex;
      this.getSelectedSection().section.selectedTaskIndex = taskIndex;
    },
    getSelectedColumn : function(){
      var selectedCol = this.columns[this.selectedColIndex];
      return {
        col : selectedCol,
        index :this.selectedColIndex
      }
    },
    getSelectedSection : function(){
      var selectedCol = this.getSelectedColumn().col;
      var selectedSection = selectedCol.sections[selectedCol.selectedSectionIndex];
      return {
        section:selectedSection,
        index :selectedCol.selectedSectionIndex
      }
    },
    getSelectedTask : function(){
      var selectedSection = this.getSelectedSection().section;
      var selectedTask = selectedSection.tasks[selectedSection.selectedTaskIndex];
      return{
        task: selectedTask,
        index : selectedSection.selectedTaskIndex
      }
    },
    getSelectedTab : function(){
      var selectedTask = this.getSelectedTask().task;
      var selectedTab = selectedTask.tabs[selectedTask.selectedTabIndex];
      return {
        tab: selectedTab,
        index : selectedTask.selectedTabIndex
      }
    },
    getMetricsData : function(tab){
      if(!tab){
        return {
        labels:[],
        datasets : [{
        label:"",
        data:[],
        backgroundColor: []
      }]
      };
      }
      tab.dataCollection = {};
      tab.dataCollection.labels = [];
      tab.dataCollection.datasets = [{
        label:"",
        data:[],
        backgroundColor: []
      }] ;

      for (let i = 0; i < tab.operational_metrics.length; i++) {
        const oMetric = tab.operational_metrics[i];
        tab.dataCollection.labels.push(oMetric.name);
        tab.dataCollection.datasets[0].data.push(oMetric.completed);
        tab.dataCollection.datasets[0].backgroundColor.push(this.checkValue(oMetric.completed));
      }
      return tab.dataCollection;
    }
  }
}
</script>
<style>
::-webkit-scrollbar {
  width: 10px!important;
  height: 10px!important;
}
::-webkit-scrollbar-track {
  background: #f1f1f1!important;
}
::-webkit-scrollbar-thumb {
  background: #888!important;
}
::-webkit-scrollbar-thumb:hover {
  background: #555!important;
}
.goals::-webkit-scrollbar {
  width: 10px!important;
  height: 10px!important;
}
.goals::-webkit-scrollbar-track {
  background: #5d6870!important;
}
.goals::-webkit-scrollbar-thumb {
  background: #2f383f!important;
}
.goals::-webkit-scrollbar-thumb:hover {
  background: #29333a!important;
}
.goals {
  background-color: #48535b;
  overflow-x: scroll;
  overflow-y: hidden;
}
.goals-box {
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid transparent;
  transition: 0.25s ease-in all;
  min-width: 150px;
  cursor: pointer;
}
.goals-box p {
  font-size: 1.5em;
  line-height: 1.15em;
}
.goals-box .progressBarContainer {
  height: 70px!important;
}
.goals-box svg {
  transition: 0.25s ease-in all;
  transition-delay: 0.5s;
  height: 50px!important;
}
.goals-selected {
  border: 2px solid #8b9aa7;
  background-color: #38688f;
}

.sidebar {
  background-color: #cecece;
  padding: 20px 10px;
}

.priority {
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 15px -6px rgba(143,143,143,1);
  -moz-box-shadow: 0px 0px 15px -6px rgba(143,143,143,1);
  box-shadow: 0px 0px 15px -6px rgba(143,143,143,1);
}

.priority__title {
  border-bottom: 1px solid #333;
  padding: 10px;
}

.card-active {
  background-color: #38688f;
  color: #fff;
  transition: 0.25s ease-in all;
}

.card-active .progressbar-text {
  color: #fff!important;
}

.task-box {
  transition: 0.25s ease-in all;
}

.card-active .task-box {
  background-color: #48535b;
}

.task:only-child {
  min-width: 350px;
}

.task:hover {
  cursor: pointer;
  background-color: #f1f1f1;
  transition: 0.25s ease-in all;
}

.card-active .task:hover {
  background-color: #515a61;
}
.task-active {
  background-color: #38688f!important;
}

.task-active:hover {
  background-color: #38688f!important;
}

.progress {
  position: relative;
  height: 20px;
}

.progress__text {
  position: absolute;
  left: 5px;
  padding: 5px;
  font-size: 1.25em;
  font-weight: bold;
}

.matrix-bar {
  transition: 0.25s ease-in all;
  background-color: #48535b;
  overflow-x: scroll;
}

.matrix-bar > div {
  padding: 8px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  min-width: 100px;
}

.matrix-bar > div:hover {
  transition: 0.25s ease-in all;
  background-color: #515a61;
}

.active-matrix {
  background-color: #38688f;
}
.active-matrix:hover {
  background-color: #38688f!important;
}

.round{
  border-radius: 1vh;
}
.centered{
  display: flex;align-items: center; justify-content: center;
}
@media (min-width: 768px) {
  .section-sm{
    display:inline-flex;
    width:100%;
  }
  .equalrow{
    display: block;
  }

}
@media (min-width: 99 2px) {
  .section-md{
    display:inline-flex;
    min-width:33%;
    vertical-align: top;
  }
  .equalrow{
    display: flex;
  }
}
.min-w-460 {
  min-width: 460px;
}
.min-w-215 {
  min-width: 215px;
}
</style>