{"version":3,"sources":["webpack:///./src/helpers/chartTooltip.js","webpack:///./src/views/campaigns/insights/components/_content_partials/ChartInsights.vue?cdb7","webpack:///./src/views/campaigns/insights/components/_content_partials/ChartInsights.vue?18da","webpack:///src/views/campaigns/insights/components/_content_partials/ChartInsights.vue","webpack:///./src/views/campaigns/insights/components/_content_partials/ChartInsights.vue?24df","webpack:///./src/views/campaigns/insights/components/_content_partials/ChartInsights.vue"],"names":["getTooltip","value","index","indexOf","seriesIndex","addComma","render","_vm","this","_h","$createElement","_c","_self","staticClass","_v","ref","attrs","options","chart","staticRenderFns","props","filters","type","Object","required","data","cachedPayload","tooltip","y","formatter","yaxis","labels","self","$options","xaxis","stroke","curve","legend","show","position","fontSize","fontWeight","fontFamily","showForSingleSeries","showForNullSeries","showForZeroSeries","itemMargin","horizontal","vertical","watch","$nextTick","computed","pixelEventsKV","pixelEvents","forEach","result","event","id","label","created","fetchChartData","methods","generateChartData","payload","length","selectedEvent","push","swap","map","i","name","defaultChartData","arr","firstIndex","secondIndex","temp","component"],"mappings":"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","file":"js/chunk-bac0ce42.4834a815.js","sourcesContent":["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}","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!./ChartInsights.vue?vue&type=style&index=0&id=92c64814&lang=scss&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full mb-8\"},[_c('h4',{staticClass:\"font-medium mb-4\"},[_vm._v(\"\\n      Insights Graph\\n    \")]),_c('ApexCharts',{ref:\"campaignInsightsChart\",staticClass:\"w-full\",attrs:{\"type\":\"line\",\"options\":_vm.options,\"series\":_vm.chart,\"height\":\"500px\"}})],1)])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"vx-row\">\n    <div class=\"vx-col w-full mb-8\">\n      <h4 class=\"font-medium mb-4\">\n        Insights Graph\n      </h4>\n\n    <!-- <div class=\"vx-col w-full\"> -->\n      <ApexCharts class=\"w-full\" ref=\"campaignInsightsChart\" type=\"line\" :options=\"options\" :series=\"chart\" height=\"500px\"></ApexCharts>\n    <!-- </div> -->\n    </div>\n  </div>\n</template>\n\n<script>\nimport { mapGetters } from 'vuex'\nimport {getTooltip} from '@/helpers/chartTooltip.js'\nexport default {\n  props: {\n    filters: {\n      type: Object,\n      required: true\n    }\n  },\n  data () {\n    const self = this\n    return {\n      cachedPayload: [],\n      chart: [],\n      options: {\n        tooltip: {\n          y: {\n            formatter (value, index) {\n              return getTooltip(value, index)\n            }\n          }\n        },\n        yaxis: {\n          labels: {\n            formatter (value) {\n              return self.$options.filters.addComma(value)\n            }\n          }\n        },\n        xaxis: {\n          type: 'category'\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          showForNullSeries: true,\n          showForZeroSeries: true,\n          itemMargin: {\n            horizontal: 5,\n            vertical: 10\n          }\n        }\n      }\n    }\n  },\n  watch: {\n\n    chart () {\n      this.$nextTick(() => {\n        const eventLabel = this.pixelEventsKV[this.filters.pixelEvent] || 'Conversions'\n        this.$refs['campaignInsightsChart'].toggleSeries('Impressions')\n        this.$refs['campaignInsightsChart'].toggleSeries('Clicks')\n        this.$refs['campaignInsightsChart'].toggleSeries('CTR')\n        this.$refs['campaignInsightsChart'].toggleSeries('Avg. CPC')\n        this.$refs['campaignInsightsChart'].toggleSeries('Video Views')\n        this.$refs['campaignInsightsChart'].toggleSeries(eventLabel)\n        this.$refs['campaignInsightsChart'].toggleSeries('CPA')\n      })\n    }\n  },\n  computed: {\n    ...mapGetters({\n      pixelEvents: 'campaign/pixelEvents'\n    }),\n    pixelEventsKV () {\n      const result = {}\n\n      this.pixelEvents.forEach(event => {\n        result[event.id === 'total' ? 'Conversions' : event.id] = event.id === 'total' ? 'Conversions' : event.label\n      })\n\n      return result\n    }\n  },\n  created () {\n    this.fetchChartData()\n  },\n  methods: {\n    async fetchChartData () {\n      try {\n        const response = await window.axios.get(`/campaigns/${this.$route.params.id}/insights/chart`, {\n          params: {\n            from_date: this.filters.dateRange.startDate,\n            to_date: this.filters.dateRange.endDate,\n            event: this.filters.pixelEvent,\n            adsets: this.filters.adset ? [this.filters.adset] : []\n          }\n        })\n\n        this.cachedPayload = response.data.payload\n\n        this.chart = this.generateChartData(response.data.payload)\n\n\n      } catch (error) {\n        alert('Error processing the request')\n      }\n    },\n    generateChartData (payload) {\n      if (payload.length) {\n        const result = payload.filter(i => i.type === 'primary')\n\n        const event = this.filters.pixelEvent === 'total' ? 'Conversions' : this.filters.pixelEvent || 'Conversions'\n\n        const selectedEvent = payload.filter(i => i.type === 'event').find(i => i.name === this.pixelEventsKV[event])\n\n        if (selectedEvent) {\n          result.push(selectedEvent)\n        }\n\n        const lastIndex = result.length - 1\n        const secondLastIndex = result.length - 2\n\n        // TODO fix this swap hangs page ADREV-2677\n        return this.swap(result.map(i => {\n          return {\n            data: i.data,\n            name: i.name\n          }\n        }), secondLastIndex, lastIndex)\n      }\n\n      return this.defaultChartData()\n    },\n    swap (arr, firstIndex, secondIndex) {\n      const temp = arr[firstIndex]\n      arr[firstIndex] = arr[secondIndex]\n      arr[secondIndex] = temp\n      return arr\n    },\n    defaultChartData () {\n\n      const eventLabel = this.pixelEventsKV[this.filters.pixelEvent] || 'Events'\n      return [\n        {\n          name: 'Impressions',\n          data: []\n        },\n        {\n          name: 'Clicks',\n          data:  []\n        },\n        {\n          name: 'CTR',\n          data: []\n        },\n        {\n          name: 'Avg. CPC',\n          data: []\n        },\n        {\n          name: 'Video Views',\n          data: []\n        },\n        {\n          name: 'Spent',\n          data: []\n        },\n        {\n          name: eventLabel,\n          data: []\n        },\n        {\n          name: 'CPA',\n          data: []\n        }\n      ]\n    }\n\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\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/deep/ .apexcharts-canvas {\n  width: 100% !important;\n}\n\n@media (min-width: 768px) {\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!./ChartInsights.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!./ChartInsights.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./ChartInsights.vue?vue&type=template&id=92c64814&scoped=true&\"\nimport script from \"./ChartInsights.vue?vue&type=script&lang=js&\"\nexport * from \"./ChartInsights.vue?vue&type=script&lang=js&\"\nimport style0 from \"./ChartInsights.vue?vue&type=style&index=0&id=92c64814&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  \"92c64814\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}