{"version":3,"sources":["webpack:///./src/developing/components/classroom-stats/index.vue?5d80","webpack:///src/developing/components/classroom-stats/index.vue","webpack:///./src/developing/components/classroom-stats/index.vue?f888","webpack:///./src/developing/components/classroom-stats/index.vue","webpack:///./src/utils/color.js","webpack:///./src/developing/components/classroom-stats/data.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticClass","_b","updating","totalStudent","classroomStats","studentInEachUnit","series","options","chartOptions","studentAccessHeatmap","staticRenderFns","components","TotalStudent","StudentInEachUnit","StudentAccessHeatmap","props","dev","type","Boolean","default","devData","Object","classroomId","String","data","methods","component","getHex","color","_color","isColor","rgb","window","getComputedStyle","document","documentElement","getPropertyValue","split","Number","toString","slice","maxStudent","state","Vue","observable","total","grid","show","padding","left","right","chart","toolbar","sparkline","enabled","dataLabels","stroke","curve","width","fill","gradient","shadeIntensity","opacityFrom","opacityTo","stops","xaxis","lines","axisBorder","labels","yaxis","y","offsetX","offsetY","tooltip","x","theme","monochrome","shadeTo","chartSeries","name","studentInEachUnitSeries","id","height","foreColor","autoSelected","colors","borderColor","clipMarkers","background","markers","size","strokeColor","strokeWidth","formatter","value","legend","style","fontSize","categories","min","tickAmount","byweek","title","text","plotOptions","heatmap","radius","useFillColorAsStroke","summary","colorScale","ranges","from","to"],"mappings":"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","file":"js/chunk-31aed189.734825e7.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"classroom-stats-component\"}},[_c('div',{staticClass:\"vx-row my-2\"},[_c('div',{staticClass:\"vx-col w-full lg:w-2/3 mb-base\"}),_c('div',{staticClass:\"vx-col w-full lg:w-1/3 mb-base\"},[_c('TotalStudent',_vm._b({attrs:{\"updating\":_vm.updating.totalStudent}},'TotalStudent',_vm.totalStudent,false))],1)]),_c('div',{staticClass:\"vx-row my-2\"},[_c('div',{staticClass:\"vx-col w-full\"},[_c('StudentInEachUnit',{attrs:{\"updating\":_vm.updating.classroomStats,\"chartSeries\":_vm.studentInEachUnit.series,\"chartOptions\":_vm.studentInEachUnit.options.chartOptions}})],1)]),_c('div',{staticClass:\"vx-row my-2\"},[_c('div',{staticClass:\"vx-col w-full\"},[_c('StudentAccessHeatmap',{attrs:{\"updating\":_vm.updating.classroomStats,\"chartSeries\":_vm.studentAccessHeatmap.series,\"chartOptions\":_vm.studentAccessHeatmap.options.chartOptions}})],1)])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"classroom-stats-component\">\n    <div class=\"vx-row my-2\">\n      <div class=\"vx-col w-full lg:w-2/3 mb-base\">\n        <!-- <vx-card\n          class=\"overflow-hidden\">\n          <div slot=\"no-body\">\n            <div>Classroom Stats</div>\n          </div>\n        </vx-card> -->\n      </div>\n\n      <div class=\"vx-col w-full lg:w-1/3 mb-base\">\n        <TotalStudent :updating=\"updating.totalStudent\" v-bind=\"totalStudent\" />\n      </div>\n    </div>\n    \n    <div class=\"vx-row my-2\">\n      <div class=\"vx-col w-full\">\n        <StudentInEachUnit :updating=\"updating.classroomStats\" :chartSeries=\"studentInEachUnit.series\" :chartOptions=\"studentInEachUnit.options.chartOptions\" />\n      </div>\n    </div>\n    \n    <div class=\"vx-row my-2\">\n      <div class=\"vx-col w-full\">\n        <StudentAccessHeatmap :updating=\"updating.classroomStats\" :chartSeries=\"studentAccessHeatmap.series\" :chartOptions=\"studentAccessHeatmap.options.chartOptions\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { state } from \"./data.js\";\n\nexport default {\n  components: {\n    TotalStudent: () => import(\"./subcomponents/TotalStudent.vue\"),\n    StudentInEachUnit: () => import(\"./subcomponents/StudentInEachUnit.vue\"),\n    StudentAccessHeatmap: () => import(\"./subcomponents/StudentAccessHeatmap.vue\"),\n  },\n  props: {\n    dev: {\n      type: Boolean,\n      default: false\n    },\n    devData: {\n      type: Object,\n      default: null\n    },\n    classroomId: {\n      type: String,\n      default: null\n    }\n  },\n  data() {\n    return {\n      updating: {\n        totalStudent: true,\n        classroomStats: true,\n      },\n      totalStudent: state.totalStudent,\n      studentInEachUnit: state.studentInEachUnitSeries,\n      studentAccessHeatmap: state.studentAccessHeatmap,\n    }\n  },\n  methods: {\n    async getTotalStudentData() {\n      this.updating.totalStudent = true;\n      if (this.dev && this.devData) {\n        this.totalStudent = this.devData.totalStudent;\n      }\n\n      const classroom = await this.$store.dispatch(\"ClassroomStats/getClassroom\", { id: this.classroomId });\n\n      if (classroom) {\n        if (this.classroomId === classroom.id) {\n          this.totalStudent.total = classroom.studentRegisterQty;\n        }\n      }\n      this.updating.totalStudent = false;\n    },\n    async getClassroomStats() {\n      this.updating.classroomStats = true;\n      const { status, data } = await this.$store.dispatch(\"ClassroomStats/getClassroomStats\", { id: this.classroomId })\n\n      if (status.success) {\n        this.studentInEachUnit.series = data.seriesTotalStudentInEachUnits;\n        this.studentAccessHeatmap.series = data.seriesStudentAccess;\n      }\n      this.updating.classroomStats = false;\n    },\n    async getClassroomStudentInEachUnitData() {\n      const series = await this.$store.dispatch(\"ClassroomStats/getClassroomStudentInEachUnitStats\", { id: this.classroomId })\n\n      if (series) {\n        this.studentInEachUnit.series = series;\n      }\n    }\n  },\n  async beforeMount() {\n    await this.getTotalStudentData();\n    await this.getClassroomStats();\n  },\n}\n</script>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=79c37dec&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import _color from '@/assets/utils/color.js'\n\nexport function getHex(color) {\n  if (_color.isColor(color)) {\n    let rgb  = window.getComputedStyle(document.documentElement).getPropertyValue(`--vs-${color}`);\n    rgb = rgb.split(\",\");\n    return \"#\" + ((1 << 24) + (Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16).slice(1);\n  }\n  return color\n}\n","import Vue from 'vue';\nimport _store from '@/store';\nimport { getHex } from \"@/utils/color\";\n\nexport { _store as store };\n\n/*\n  // Shared Data Functions\n*/\n\nconst maxStudent = 500;\n\nexport const state = Vue.observable({\n  classroomId: null,\n  totalStudent: {\n    total: 0,\n    chartOptions: {\n      grid: {\n        show: false,\n        padding: {\n          left: 0,\n          right: 0\n        }\n      },\n      chart: {\n        toolbar: {\n          show: false,\n        },\n        sparkline: {\n          enabled: true\n        }\n      },\n      dataLabels: {\n        enabled: false\n      },\n      stroke: {\n        curve: 'smooth',\n        width: 2.5\n      },\n      fill: {\n        type: 'gradient',\n        gradient: {\n          shadeIntensity: 0.9,\n          opacityFrom: 0.5,\n          opacityTo: 0.2,\n          stops: [0, 80, 100]\n        }\n      },\n      xaxis: {\n        type: 'numeric',\n        lines: {\n          show: false,\n        },\n        axisBorder: {\n          show: false,\n        },\n        labels: { show: false }\n      },\n      yaxis: [{\n        y: 0,\n        offsetX: 0,\n        offsetY: 0,\n        padding: { left: 0, right: 0 },\n      }],\n      tooltip: {\n        enabled: false,\n        x: { show: false }\n      },\n      theme: {\n        monochrome: {\n          enabled: true,\n          color: getHex('warning'),\n          shadeTo: 'light',\n          shadeIntensity: 0.65\n        }\n      }\n    },\n    chartSeries: [\n      {\n        name: '',\n        data: [28, 40, 36, 52, 38, 60, 55]\n      }\n    ],\n  },\n  studentInEachUnitSeries: {\n    options: {\n      chartOptions: {\n        chart: {\n          id: \"chart2\",\n          type: \"area\",\n          height: 350,\n          foreColor: \"#ccc\",\n          toolbar: {\n            autoSelected: \"pan\",\n            show: false\n          }\n        },\n        colors: [getHex(\"primary\"), \"#ddd\"],\n        stroke: {\n          width: 3,\n          curve: 'smooth'\n        },\n        grid: {\n          borderColor: \"#f9f9f9\",\n          clipMarkers: false,\n          yaxis: {\n            lines: {\n              show: true\n            }\n          },\n        },\n        dataLabels: {\n          enabled: true,\n          offsetY: -10,\n          background: {\n            enabled: false,\n          }\n        },\n        fill: {\n          gradient: {\n            enabled: true,\n            opacityFrom: 0.7,\n            opacityTo: 0\n          }\n        },\n        markers: {\n          size: 7,\n          colors: [\"#fff\"],\n          strokeColor: [getHex(\"primary\"), \"#ccc\"],\n          strokeWidth: 3\n        },\n        tooltip: {\n          // theme: \"dark\"\n          x: {\n            formatter: function (value) {\n              return \"หน่วยการเรียนที่ \" + value\n            }, \n          }\n        },\n        legend: {\n          show: true,\n        },\n        xaxis: {\n          type: \"category\",\n          labels: {\n            style: {\n              colors: [],\n              fontSize: '1rem',\n            },\n            offsetY: 2,\n          },\n          categories: [\n            \"ยังไม่เริ่มต้นเรียน\",\n            1, \n            2, \n            3, \n            4, \n            5, \n            6, \n            7, \n            8, \n            9, \n            10,\n            11,\n            12,\n            13,\n            14,\n            15\n          ]\n        },\n        yaxis: {\n          min: 0,\n          tickAmount: 4\n        }\n      }\n    },\n    series: []\n  },\n  studentAccessHeatmap: {\n    options: {\n      chartOptions: {\n        byweek: {\n          title: {\n            text: 'ข้อมูลรายสัปดาห์'\n          },\n          chart: {\n            height: 500,\n            type: 'heatmap',\n          },\n          plotOptions: {\n            heatmap: {\n              shadeIntensity: 0.8,\n              radius: 0,\n              useFillColorAsStroke: false,\n              // colorScale: {\n              //   ranges: [\n              //     {\n              //       from: -10,\n              //       to: 0,\n              //       name: 'none',\n              //       color: \"#999999\"\n              //     },\n              //     {\n              //       from: 1,\n              //       to: 50,\n              //       name: 'low',\n              //       color: getHex(\"warning\")\n              //     },\n              //     {\n              //       from: 51,\n              //       to: 100,\n              //       name: 'high',\n              //       color: getHex(\"success\")\n              //     }\n              //   ]\n              // }\n            }\n          },\n          dataLabels: {\n            enabled: true\n          },\n          legend: {\n            show: true,\n          },\n          stroke: {\n            width: 1\n          },\n        },\n        summary: {\n          title: {\n            text: 'ข้อมูลรวม'\n          },\n          chart: {\n            height: 600,\n            type: 'heatmap',\n          },\n          plotOptions: {\n            heatmap: {\n              shadeIntensity: 0.7,\n              radius: 0,\n              useFillColorAsStroke: true,\n              colorScale: {\n                ranges: [\n                  {\n                    from: -10,\n                    to: 0,\n                    name: 'none',\n                    color: \"#999999\"\n                  },\n                  /* {\n                    from: 1,\n                    to: maxStudent / 2,\n                    name: 'low',\n                    color: getHex(\"warning\")\n                  },\n                  {\n                    from: (maxStudent / 2) + 1,\n                    to: maxStudent,\n                    name: 'high',\n                    color: getHex(\"success\")\n                  }, */\n                  {\n                    from: 1,\n                    to: (maxStudent - (maxStudent / 4)),\n                    name: '',\n                    color: getHex(\"warning\")\n                  },\n                  {\n                    from: (maxStudent / 4) + 1,\n                    to: (maxStudent / 4) * 3,\n                    name: 'Low',\n                    color: '#a7e8c4'\n                  },\n                  {\n                    from: ((maxStudent / 4) * 3) + 1,\n                    to: maxStudent,\n                    name: 'High',\n                    // color: getHex(\"success\")\n                    color: '#0b6c36',\n                  },\n                  {\n                    from: maxStudent + 1,\n                    to: maxStudent + 999,\n                    name: 'Exceed',\n                    color: getHex(\"danger\")\n                  },\n                ]\n              }\n            }\n          },\n          dataLabels: {\n            enabled: true\n          },\n          legend: {\n            show: true,\n          },\n          stroke: {\n            width: 1\n          },\n        }\n      },\n    },\n    series: []\n  }\n});\n\nexport const template = {};\n\n\n/*\n  // Shared Data Functions\n*/\n\n\n/*\n  // Private Data Functions\n*/\n\n"],"sourceRoot":""}