{"version":3,"sources":["webpack:///./src/views/home/components/campaign-insights.vue?82e5","webpack:///src/views/home/components/campaign-insights.vue","webpack:///./src/views/home/components/campaign-insights.vue?5501","webpack:///./src/views/home/components/campaign-insights.vue","webpack:///./src/views/home/components/campaign-insights.vue?0b75","webpack:///./src/helpers/chartTooltip.js"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","ref","attrs","options","series","staticRenderFns","watch","$nextTick","computed","eventName","filterQuery","hasOwnProperty","action_type","label","data","on","chart","id","xaxis","type","yaxis","labels","formatter","self","$options","filters","addComma","value","tooltip","y","stroke","curve","legend","show","position","fontSize","fontWeight","fontFamily","showForSingleSeries","showForZeroSeries","itemMargin","horizontal","vertical","props","component","getTooltip","index","indexOf","seriesIndex"],"mappings":"yHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,gBAAgB,CAACF,EAAG,MAAM,CAACE,YAAY,wBAAwB,CAACN,EAAIO,GAAG,uBAAuBH,EAAG,aAAa,CAACI,IAAI,gBAAgBC,MAAM,CAAC,KAAO,OAAO,QAAUT,EAAIU,QAAQ,OAASV,EAAIW,OAAO,OAAS,YAAY,IACzUC,EAAkB,G,YCWtB,GACEC,MAAO,CACLF,OADJ,WACA,WACMV,KAAKa,WAAU,WACb,IAAR,IACQ,EAAR,mDACQ,EAAR,8CACQ,EAAR,2CACQ,EAAR,mDACQ,EAAR,gDACQ,EAAR,iDACQ,EAAR,gDAIEC,SAAU,CACRC,UADJ,WAEM,OAAIf,KAAKgB,YAAYC,eAAe,eAC3BjB,KAAKgB,YAAYE,YAAYC,MAE7B,gBAIbC,KAxBF,WAyBI,IAAJ,OACI,MAAO,CACLC,IAAI,EACJZ,QAAS,CACPa,MAAO,CACLC,GAAI,oBAENC,MAAO,CACLC,KAAM,YAERC,MAAO,CACLC,OAAQ,CACNC,UADZ,SACA,GACc,OAAOC,EAAKC,SAASC,QAAQC,SAASC,MAI5CC,QAAS,CACPC,EAAG,CACDP,UADZ,SACA,KACc,OAAO,OAArB,OAAqB,CAArB,QAIQQ,OAAQ,CACNC,MAAO,UAETC,OAAQ,CACNC,MAAM,EACNC,SAAU,MACVC,SAAU,OACVC,WAAY,SACZC,WAAY,UACZC,qBAAqB,EACrBC,mBAAmB,EACnBC,WAAY,CACVC,WAAY,EACZC,SAAU,QAMpBC,MAAO,CAAC,SAAU,gBChFqW,I,wBCQrXC,EAAY,eACd,EACApD,EACAa,GACA,EACA,KACA,WACA,MAIa,aAAAuC,E,6CCnBf,W,oCCAA,kDAEaC,EAAa,SAAClB,EAAOmB,GAChC,OAA8C,IAA1C,CAAC,EAAG,EAAG,GAAGC,QAAQD,EAAME,aAEnBtB,eAASC,EAAO,MACsB,IAApC,CAAC,GAAGoB,QAAQD,EAAME,aAEpBtB,eAASC,EAAO,KAGhBD,eAASC,K","file":"js/chunk-454d5b12.5b4f740c.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"px-5 md:px-8\"},[_c('div',{staticClass:\"title mb-10 md:title\"},[_vm._v(\"Campaign Insights\")]),_c('ApexCharts',{ref:\"campaignChart\",attrs:{\"type\":\"line\",\"options\":_vm.options,\"series\":_vm.series,\"height\":\"500px\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"px-5 md:px-8\">\n    <div class=\"title mb-10 md:title\">Campaign Insights</div>\n    <!-- Chart  -->\n    <ApexCharts ref=\"campaignChart\" type=\"line\" :options=\"options\" :series=\"series\" height=\"500px\"></ApexCharts>\n  </div>\n</template>\n\n<script>\n\nimport {getTooltip} from '@/helpers/chartTooltip.js'\n\nexport default {\n  watch: {\n    series () {\n      this.$nextTick(() => {\n        const self = this\n        this.$refs['campaignChart'].toggleSeries('Impressions')\n        this.$refs['campaignChart'].toggleSeries('Clicks')\n        this.$refs['campaignChart'].toggleSeries('CTR')\n        this.$refs['campaignChart'].toggleSeries('Video Views')\n        this.$refs['campaignChart'].toggleSeries('Avg. CPC')\n        this.$refs['campaignChart'].toggleSeries(self.eventName)\n        this.$refs['campaignChart'].toggleSeries('CPA')\n      })\n    }\n  },\n  computed: {\n    eventName () {\n      if (this.filterQuery.hasOwnProperty('action_type')) {\n        return this.filterQuery.action_type.label\n      } else {\n        return 'Conversions'\n      }\n    }\n  },\n  data () {\n    const self = this // this is only to reference the vue into ApexChart\n    return {\n      on: true,\n      options: {\n        chart: {\n          id: 'vuechart-example'\n        },\n        xaxis: {\n          type: 'category'\n        },\n        yaxis: {\n          labels: {\n            formatter (value) {\n              return self.$options.filters.addComma(value)\n            }\n          }\n        },\n        tooltip: {\n          y: {\n            formatter (value, index) {\n              return getTooltip(value, index)\n            }\n          }\n        },\n        stroke: {\n          curve: 'smooth'\n        },\n        legend: {\n          show: true,\n          position: 'top',\n          fontSize: '14px',\n          fontWeight: 'normal',\n          fontFamily: 'Poppins',\n          showForSingleSeries: true,\n          showForZeroSeries: true,\n          itemMargin: {\n            horizontal: 5,\n            vertical: 10\n          }\n        }\n      }\n    }\n  },\n  props: ['series', 'filterQuery']\n}\n</script>\n\n\n<style lang=\"scss\" scoped>\n.title {\n  font-style: normal;\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 27px;\n  letter-spacing: 0.1px;\n  color: #2c2c2c;\n}\n\n.sub-title {\n  font-weight: normal;\n  font-size: 14px;\n  line-height: 21px;\n  letter-spacing: 0.1px;\n  color: rgba(44, 44, 44, 0.7);\n}\n\n/deep/ .apexcharts-toolbar {\n  display: none;\n}\n\n/deep/ .apexcharts-legend-series {\n  width: calc(50% - 20px);\n}\n\n/deep/ .apexcharts-legend {\n  justify-content: space-between !important;\n}\n\n@media (min-width: 768px) {\n  .md\\:title {\n    font-style: normal;\n    font-weight: 500;\n    font-size: 24px;\n    line-height: 36px;\n    letter-spacing: 0.1px;\n    color: #2c2c2c;\n  }\n\n  .md\\:sub-title {\n    font-style: normal;\n    font-weight: normal;\n    font-size: 14px;\n    line-height: 21px;\n    letter-spacing: 0.1px;\n    color: rgba(44, 44, 44, 0.7);\n  }\n\n  /deep/ .apexcharts-legend-series {\n    width: auto;\n  }\n}\n\n</style>\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!./campaign-insights.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!./campaign-insights.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./campaign-insights.vue?vue&type=template&id=0a04c5d2&scoped=true&\"\nimport script from \"./campaign-insights.vue?vue&type=script&lang=js&\"\nexport * from \"./campaign-insights.vue?vue&type=script&lang=js&\"\nimport style0 from \"./campaign-insights.vue?vue&type=style&index=0&id=0a04c5d2&lang=scss&scoped=true&\"\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  \"0a04c5d2\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./campaign-insights.vue?vue&type=style&index=0&id=0a04c5d2&lang=scss&scoped=true&\"","import addComma from '@/filters/addComma'\n\nexport const getTooltip = (value, index) => {\n  if ([7, 5, 3].indexOf(index.seriesIndex) !== -1) {\n    // 7 >> CPA 6 >> Spent 3 >> AVG. CPC\n    return addComma(value, '$')\n  } else if ([2].indexOf(index.seriesIndex) !== -1) {\n    // 2 >> CTR\n    return addComma(value, '%')\n  } else {\n    // Rest\n    return addComma(value)\n  }\n}"],"sourceRoot":""}