{"version":3,"sources":["webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/HeatMapChart.vue?b650","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/HeatMapChart.vue?3255","webpack:///src/apps/dashboard/BaoWidgetsBaseComponents/HeatMapChart.vue","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/HeatMapChart.vue?c850","webpack:///./src/apps/dashboard/BaoWidgetsBaseComponents/HeatMapChart.vue"],"names":["render","_vm","this","_c","_self","attrs","error","staticClass","_v","_s","chartData","data","headerLabels","length","_l","headerLabel","headerIndex","key","style","totalColumns","class","isCurrentDay","_e","Object","values","row","index1","keys","col","index2","isCurrentCell","getTopPosition","getColorScale","id","previewMode","getTooltipLabel","footerLabels","footerLabel","index","staticText","noDataMessage","staticRenderFns","name","props","type","default","Boolean","required","currentDate","Date","staticTextDefault","calls","call","footerErrorMessage","headerErrorMessage","noIdProvided","outOf","computed","Array","isArray","columns","maxHeight","top","getMinutes","isNaN","$store","getters","$options","validateData","methods","computedData","successRatio","maxValue","toPrecision","alpha","item","total_calls","toString","successPercentage","success_calls","currentHour","getHours","currentWeekDay","getDay","created_at__hour","created_at__week_day","dayIndex","component"],"mappings":"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","file":"js/HeatMapChart.44cb6400.js","sourcesContent":["export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./HeatMapChart.vue?vue&type=style&index=0&id=df62d752&prod&scoped=true&lang=scss&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"heat-map-chart\"}},[(!!_vm.error)?_c('div',{staticClass:\"d-flex justify-content-center label\"},[_vm._v(\" \"+_vm._s(_vm.error)+\" \")]):(!_vm.chartData.data)?_c('div',{staticClass:\"d-flex justify-content-center label\"},[_vm._v(\" \"+_vm._s(_vm.staticText.noDataMessage)+\" \")]):_c('div',[(_vm.headerLabels.length>0)?_c('div',{staticClass:\"d-flex justify-content-end h-40px\"},_vm._l((_vm.headerLabels),function(headerLabel,headerIndex){return _c('div',{key:headerIndex,staticClass:\"d-flex justify-content-center align-items-center\",style:(`width: ${1/_vm.totalColumns*(100-12)}%`)},[_c('span',{class:_vm.isCurrentDay(headerIndex)?'active-week-day':'label'},[_vm._v(\" \"+_vm._s(headerLabel)+\" \")])])}),0):_vm._e(),_vm._l((Object.values(_vm.chartData.data)),function(row,index1){return _c('div',{key:index1,staticClass:\"d-flex h-25px\"},[_c('div',{staticClass:\"w-12 d-flex align-items-center justify-content-end\"},[_c('span',{staticClass:\"label hourPosition pr-1\"},[_vm._v(\" \"+_vm._s(Object.keys(_vm.chartData.data)[index1])+\" \")])]),_vm._l((Object.values(row)),function(col,index2){return _c('div',{key:index2,staticClass:\"heatmap-cell-wrapper\",style:(`width: ${1/_vm.totalColumns*(100-12)}%`)},[(_vm.isCurrentCell(col))?_c('div',{staticClass:\"marker\",style:(`top: ${_vm.getTopPosition}`)},[_c('div',{staticClass:\"marker__dot\"}),_c('div',{staticClass:\"marker__line\"})]):_vm._e(),_c('div',{staticClass:\"heatMapCell\",style:(_vm.getColorScale(col)),attrs:{\"id\":`heatmap-cell-${index1}-${index2}-${_vm.chartData.id}-${_vm.previewMode}`}}),_c('b-tooltip',{attrs:{\"target\":`heatmap-cell-${index1}-${index2}-${_vm.chartData.id}-${_vm.previewMode}`,\"placement\":\"top\",\"noninteractive\":\"\"}},[_c('span',{staticClass:\"heatmap-tooltip-text\"},[_vm._v(\" \"+_vm._s(_vm.getTooltipLabel(col))+\" \")])])],1)})],2)}),(_vm.footerLabels.length>0)?_c('div',{staticClass:\"d-flex justify-content-end h-40px\"},_vm._l((_vm.footerLabels),function(footerLabel,index){return _c('div',{key:index,staticClass:\"d-flex justify-content-center align-items-center\",style:(`width: ${1/_vm.totalColumns*(100-12)}%`)},[_c('span',{staticClass:\"label\"},[_vm._v(_vm._s(footerLabel))])])}),0):_vm._e()],2)])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div id=\"heat-map-chart\">\n    <div v-if=\"!!error\"\n         class=\"d-flex justify-content-center label\"\n    >\n      {{error}}\n    </div>\n    <div v-else-if=\"!chartData.data\"\n         class=\"d-flex justify-content-center label\"\n    >\n      {{staticText.noDataMessage}}\n    </div>\n    <div v-else>\n      <div v-if=\"headerLabels.length>0\"\n           class=\"d-flex justify-content-end h-40px\"\n      >\n        <div v-for=\"(headerLabel, headerIndex) in headerLabels\"\n             :key=\"headerIndex\"\n             :style=\"`width: ${1/totalColumns*(100-12)}%`\"\n             class=\"d-flex justify-content-center align-items-center\"\n        >\n          <span :class=\"isCurrentDay(headerIndex)?'active-week-day':'label'\">\n            {{headerLabel}}\n          </span>\n        </div>\n      </div>\n\n      <div v-for=\"(row, index1) in Object.values(chartData.data)\"\n           class=\"d-flex h-25px\"\n           :key=\"index1\"\n      >\n        <div class=\"w-12 d-flex align-items-center justify-content-end\"\n        >\n          <span class=\"label hourPosition pr-1\">\n            {{Object.keys(chartData.data)[index1]}}\n          </span>\n        </div>\n        <div\n          v-for=\"(col, index2) in Object.values(row)\"\n          :key=\"index2\"\n          :style=\"`width: ${1/totalColumns*(100-12)}%`\"\n          class=\"heatmap-cell-wrapper\"\n        >\n          <div v-if=\"isCurrentCell(col)\"\n               :style=\"`top: ${getTopPosition}`\"\n               class=\"marker\"\n          >\n            <div class=\"marker__dot\"></div>\n            <div class=\"marker__line\"></div>\n          </div>\n\n          <div :id=\"`heatmap-cell-${index1}-${index2}-${chartData.id}-${previewMode}`\"\n               :style=\"getColorScale(col)\"\n               class=\"heatMapCell\"\n          >\n          </div>\n          <b-tooltip :target=\"`heatmap-cell-${index1}-${index2}-${chartData.id}-${previewMode}`\"\n                     placement=\"top\"\n                     noninteractive\n          >\n            <span class=\"heatmap-tooltip-text\">\n              {{getTooltipLabel(col)}}\n            </span>\n          </b-tooltip>\n        </div>\n      </div>\n      <div v-if=\"footerLabels.length>0\"\n           class=\"d-flex justify-content-end h-40px\"\n      >\n        <div v-for=\"(footerLabel, index) in footerLabels\"\n             :key=\"index\"\n             :style=\"`width: ${1/totalColumns*(100-12)}%`\"\n             class=\"d-flex justify-content-center align-items-center\"\n        >\n          <span class=\"label\">{{footerLabel}}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n\nexport default {\n  name: \"HeatMapChart\",\n  props: {\n    chartData: {\n      type: Object,\n      default: () => {}\n    },\n    previewMode: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    currentDate: {\n      type: Date, // required to indicate the active cell\n      required: true\n    }\n  },\n  data () {\n    return {\n      staticTextDefault: {\n        calls: \"Calls\",\n        call: \"Call\",\n        noDataMessage: \"No data to display\",\n        footerErrorMessage: \"Inconsistent data: The number of elements in row does not match number of elements provided in footer\",\n        headerErrorMessage: \"Inconsistent data: The number of elements in row does not match number of elements provided in header\",\n        noIdProvided: \"No widget id provided\",\n        outOf: \"out of\"\n      },\n      error: null\n    }\n  },\n  computed: {\n    footerLabels () {\n      if (this.chartData.footerLabels && Array.isArray(this.chartData.footerLabels)) {\n        return this.chartData.footerLabels\n      }\n      return []\n    },\n    headerLabels () {\n      if (this.chartData.headerLabels && Array.isArray(this.chartData.headerLabels)) {\n        return this.chartData.headerLabels\n      }\n      return []\n    },\n    totalColumns () {\n      const columns = this.footerLabels.length > 0 ? this.footerLabels : this.headerLabels\n      return columns.length > 0 ? columns.length : 1\n    },\n    getTopPosition () {\n      const maxHeight = 18 // height of row is 25px and 3px is padding hence 25-6(top-bottom-padding)-1(border)=18\n      const top = (this.currentDate.getMinutes() / 60) * maxHeight\n      // Note: 3 is added due to padding\n      if (isNaN(top)) return \"3px\"\n      if (top > maxHeight) return `${3 + maxHeight}px`\n      return `${3 + top}px`\n    },\n    staticText () {\n      return this.$store.getters[\"I18nStore/getI18n\"](this.$options.name, this.staticTextDefault)\n    }\n  },\n  mounted () {\n    this.validateData()\n  },\n  methods: {\n    validateData () {\n      this.error = null\n      if (!this.chartData.id && !this.previewMode) this.error = this.staticText.noIdProvided // Widget id is needed to correctly show tooltips\n      // on the cells to uniquely define target in case there are multiple heatmaps in widget page\n\n      // check if the header/footer data is equal to the number of columns\n      if (this.footerLabels.length > 0 || this.headerLabels.length > 0) {\n        for (const row of Object.values(this.chartData.data)) {\n          if (this.footerLabels.length > 0 && Object.keys(row).length !== this.footerLabels.length) {\n            this.error = this.staticText.footerErrorMessage\n            return\n          }\n          if (this.headerLabels.length > 0 && Object.keys(row).length !== this.headerLabels.length) {\n            this.error = this.staticText.headerErrorMessage\n            return\n          }\n        }\n      }\n    },\n    getColorScale (data) {\n      const computedData = (data.successRatio / this.chartData.maxValue).toPrecision(2)\n      const alpha = computedData > 0.0 ? computedData : 0.05\n      return `background-color:rgba(197, 128, 93, ${alpha});`\n    },\n    getTooltipLabel (item) {\n      const calls = item.total_calls.toString() === \"1\" ? this.staticText.call : this.staticText.calls\n      return `${item.successPercentage} % (${item.success_calls} ${this.staticText.outOf} ${item.total_calls} ${calls})`\n    },\n    isCurrentCell (data) {\n      /**\n       * Checks if the data is regarding the current day and current hour and returns true\n       */\n      const currentHour = this.currentDate.getHours()\n      // in backend week day starts from sunday = 1 and in javascript the weekday starts from sunday = 0, Hence add 1 to\n      // map the days correctly\n      const currentWeekDay = this.currentDate.getDay() + 1\n      return data.created_at__hour === currentHour && data.created_at__week_day === currentWeekDay\n    },\n    isCurrentDay (dayIndex) {\n      /**\n       * Checks if the day-index(+1)is same as that of the current day\n       * Note: adding 1 because dayIndex starts from 0(v-for loop) but actually, the day-number for monday is 1 (in\n       * javascript date functions)\n       */\n      // index is used instead of string 'day' because the days can be in german or english\n      const currentWeekDay = this.currentDate.getDay()\n      return currentWeekDay === (dayIndex + 1)\n    }\n  }\n}\n</script>\n\n<style scoped lang=\"scss\">\n\n#heat-map-chart {\n  height: unset !important;\n}\n\n.heatMapCell{\n  display:flex;\n  justify-content: center;\n  align-items: center;\n  height:100%;\n  width: 100%;\n  border-radius: 2px;\n  cursor: pointer;\n}\n\ntable {\n  border-spacing: 10px;\n  table-layout: fixed;\n}\ntd {\n    cursor: pointer;\n    width: 3vw;\n    height: 3vw;\n    max-height: 3vw;\n    max-width: 3vw;\n    min-height: 3vw;\n    min-width: 3vw;\n}\n\n.heatMapCell:hover {\n  -webkit-transform:scale(1.1);\n\ttransform:scale(1.1);\n}\n\n.heatmap-cell-wrapper{\n  position: relative;\n  padding: 3px 1px;\n  border-top: 2px solid $slate06;\n  border-top-width: thin;\n}\n\n.heatmap-cell-data{\n  font-size: 12px;\n  color: $slate50;\n}\n\n.heatmap-tooltip-text {\n  font-size: 12px;\n  font-weight: 400;\n  color: $black50;\n}\n\n.h-25px{\n  height: 25px;\n}\n\n.hide{\n  display: none;\n}\n\n.label {\n  font-size: 12px;\n  font-weight: 400;\n  color: $slate40;\n}\n\n.hourPosition {\n  display: block;\n  position: relative;\n  top: -10px;\n}\n\n.tooltip.b-tooltip{\n    opacity: 1 !important;\n}\n\n.marker {\n  position: absolute;\n  z-index: 506;\n  left: 1px;\n  width: calc(100% - 2px);\n  display: flex;\n  &__dot{\n    background-color: $white;\n    -webkit-border-radius: 50%;\n    border: 2px solid $slate;\n    border-radius: 50%;\n    height: 6px;\n    width: 6px;\n    margin-top: -3px;\n  }\n  &__line{\n    margin-top: -0.5px;\n    height: 1px;\n    background-color: rgba(127, 129, 151, 1);\n    opacity: 0.5;\n    width: 100%;\n  }\n}\n\n.active-week-day{\n  background-color: $slate;\n  padding: 6px 14px;\n  border-radius: 28px;\n  color: $white;\n  font-size: 12px;\n  font-weight: 400;\n  margin-bottom: 2px;\n}\n\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./HeatMapChart.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!../../../../node_modules/vue-svg-inline-loader/src/index.js!./HeatMapChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./HeatMapChart.vue?vue&type=template&id=df62d752&scoped=true&\"\nimport script from \"./HeatMapChart.vue?vue&type=script&lang=js&\"\nexport * from \"./HeatMapChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./HeatMapChart.vue?vue&type=style&index=0&id=df62d752&prod&scoped=true&lang=scss&\"\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  \"df62d752\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}