{"version":3,"sources":["webpack:///./src/views/scores/media-new/consideration/web-traffic/PerformanceTable.vue?4897","webpack:///./src/views/scores/media-new/consideration/web-traffic/BubbleChart.vue?25e4","webpack:///./src/views/scores/media-new/consideration/web-traffic/Index.vue?65a5","webpack:///./src/views/scores/media-new/consideration/web-traffic/Index.vue?773a","webpack:///src/views/scores/media-new/consideration/web-traffic/BarChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/BarChart.vue?43fe","webpack:///./src/views/scores/media-new/consideration/web-traffic/BarChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/BarChart.vue?b036","webpack:///src/views/scores/media-new/consideration/web-traffic/PieChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/PieChart.vue?fddd","webpack:///./src/views/scores/media-new/consideration/web-traffic/PieChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/PieChart.vue?f958","webpack:///src/views/scores/media-new/consideration/web-traffic/PerformanceTable.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/PerformanceTable.vue?0e89","webpack:///./src/views/scores/media-new/consideration/web-traffic/PerformanceTable.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/PerformanceTable.vue?b5a5","webpack:///src/views/scores/media-new/consideration/web-traffic/BubbleChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/BubbleChart.vue?184f","webpack:///./src/views/scores/media-new/consideration/web-traffic/BubbleChart.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/BubbleChart.vue?e6b5","webpack:///src/views/scores/media-new/consideration/web-traffic/Index.vue","webpack:///./src/views/scores/media-new/consideration/web-traffic/Index.vue?ebf8","webpack:///./src/views/scores/media-new/consideration/web-traffic/Index.vue"],"names":["$","JQuery","directives","VBPopover","VBTooltip","components","apexchart","VueApexCharts","BFormRadioGroup","BCard","BButton","BPopover","forecastLineChart","AiButton","props","trendGraph","type","Object","required","filterParams","data","selectedRadio","optionsRadio","text","value","isChartVisible","forecastSettings","width","height","margin","top","right","bottom","left","chartTypes","lineChartEnabled","stepAreaChartEnabled","basisAreaChartEnabled","barChartEnabled","lineSettings","dottedLines","toggleLines","colors","upperLineColor","lowerLineColor","lineColors","forecastLineColor","forecastAreaColor","barLineColor","textSettings","fontFamily","fontWeight","fontSize","meanLineSettings","meanLineColor","meanLineText","meanLineEnabled","textPosition","x","y","textColor","axisSettings","separationLineEnabled","leftYAxisEnabled","rightYAxisEnabled","textFontSize","axisColor","axisTitles","xAxis","xAxisTitle","titlePosition","leftYAxis","labelEnabled","label","labelColor","rightYAxis","tooltipSettings","line1","format","bar","legendSettings","showLegend","legendNames","legendColors","zoomOutIconSettings","iconColor","mouseOverColor","responsive","chartDates","startDate","endDate","isDateChanged","metrics","computed","transformedHistoryData","_data$series$find","_data$series$find2","clicksAndCpc","clicksAndCost","viewAndCpv","barData","series","find","item","name","map","lineData","dates","formattedHistoryData","date","index","transformedForecastData","apexChartData","defaultOps","$store","getters","customOps","getTitles","fill","legend","horizontalAlign","seriesData","getSeries","xaxis","tickAmount","Math","min","length","extend","chartOptions","computedPeriodOptions","dataLength","periodOptions","push","computedValues","first","second","foundFirstUpper","i","charAt","toUpperCase","slice","requestParams","xLabels","toLowerCase","brand_id","considerationWebBrand","adin_id","campaign","start_date","end_date","requestType","watch","updateChartData","updateAxisLabels","methods","barLabel","lineLabel","selectedLabel","line","split","$nextTick","titles","yaxis","title","style","color","labels","formatter","universalFormatter","kFormat","opposite","commonOptions","chart","animations","enabled","stroke","curve","Date","toLocaleDateString","minimumIntegerDigits","day","month","component","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","staticStyle","_v","model","callback","$$v","expression","_e","piecedDonutChart","distributionPiechart","badgeMap","video_view","clicks","piecedDonutChartData","piecedDonutData","piecedDonutSettings","badgeText","distribution","total","values","reduce","acc","val","keys","key","percentage","toFixed","category","formatKey","seriesLength","borderSettings","borderColor","borderFontSize","piecesColor","lineColor","noDataSettings","word","join","_s","BTable","performanceByPublishersCard","tableData","fields","getFields","items","getItems","option","newItem","publisher","forEach","subKey","cpm","frequency","scopedSlots","_u","fn","ref","field","_l","cpv","isCurrency","BubbleChart","performanceByPublishers","currencySymbol","bubbleChartSettings","yAxisTickCount","axisLineColor","axisTickColor","xAxisCurrency","bubbleZoomOutFactor","legendColor","bubbleColors","gridColor","gradianColors","tooltipTitles","size","bubbleChartDataStatic","group","plotOptions","bubble","minBubbleRadius","maxBubbleRadius","tooltip","custom","seriesIndex","dataPointIndex","w","d","globals","initialSeries","z","dataLabels","show","mounted","bubbleChartData","performanceData","cost","immediate","handler","newData","newOptions","maxY","max","s","round","offsetX","maxX","minX","$refs","updateOptions","FiltersV2","Loading","BudgetCard","ConsiderationProcess","SingleMetric","Session","Score","VolumeProgress","BarChart","PieChart","PerformanceTable","NoDataTemp","recData","noData","loading","currKey","singleMetricData","_this$recData$videoVi","_this$recData$clicksC","videoViews","videoViewsCard","views","icon","clicksCard","params","$http","get","then","catch","e","getMetrics","campaignCard","comparisonCard","platform","engagedSessionsCard","considerationScoreCard","metricsCard","staticRenderFns"],"mappings":"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","file":"js/chunk-3150072c.1baa016d.js","sourcesContent":["export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerformanceTable.vue?vue&type=style&index=0&id=062475d0&prod&scoped=true&lang=css\"","export * from \"-!../../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BubbleChart.vue?vue&type=style&index=0&id=73bedc47&prod&scoped=true&lang=css\"","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!./Index.vue?vue&type=style&index=0&id=5e2ed357&prod&lang=scss&scoped=true\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('section',[_c('b-row',{staticClass:\"match-height\"},[_c('b-col',[_c('filtersV2',{attrs:{\"name\":\"considerationWeb\",\"get-metrics\":_vm.getMetrics}})],1)],1),(_vm.loading)?_c('span',[_c('loading')],1):_c('span',[(_vm.noData)?_c('span',[_c('no-data-temp')],1):_c('span',[_c('b-row',{staticClass:\"match-height\"},[_c('b-col',{staticClass:\"mt-1\",attrs:{\"lg\":\"6\",\"md\":\"12\"}},[_c('div',{staticClass:\"dashboard-container h-100 mb-1\"},[_c('div',{staticClass:\"budget-card\"},[_c('budget-card',{attrs:{\"campaignCard\":_vm.recData.campaignCard,\"isHorizontal\":true}})],1),_c('div',{staticClass:\"process\"},[_c('consideration-process',{attrs:{\"comparisonCard\":_vm.recData.comparisonCard,\"pageMeta\":{ type: 'consideration', platform: 'web' },\"onlyCost\":true}})],1),_c('single-metric',{staticClass:\"metric-card\",attrs:{\"metricData\":_vm.singleMetricData.videoViews}}),_c('single-metric',{staticClass:\"metric-card\",attrs:{\"metricData\":_vm.singleMetricData.clicks}})],1)]),_c('b-col',{staticClass:\"mt-1\",attrs:{\"lg\":\"3\",\"md\":\"6\"}},[_c('session',{attrs:{\"sourceData\":_vm.recData.engagedSessionsCard,\"pageMeta\":{type:'consideration', platform: 'web'}}})],1),_c('b-col',{staticClass:\"mt-1\",attrs:{\"lg\":\"3\",\"md\":\"6\"}},[_c('score',{attrs:{\"scoreData\":_vm.recData.considerationScoreCard,\"pageMeta\":{type:'consideration', platform: 'web'}}})],1)],1),_c('b-row',{staticClass:\"match-height mt-2\"},[_c('b-col',[_c('volume-progress',{attrs:{\"sourceData\":_vm.recData.metricsCard}})],1)],1),_c('b-row',{staticClass:\"match-height mt-3\"},[_c('b-col',{attrs:{\"lg\":\"7\"}},[_c('bar-chart',{attrs:{\"trendGraph\":_vm.recData.trendGraph,\"filterParams\":_vm.filterParams}})],1),_c('b-col',{attrs:{\"lg\":\"5\"}},[_c('pie-chart',{key:_vm.currKey,attrs:{\"distributionPiechart\":_vm.recData.distributionPiechart}})],1)],1),(_vm.recData.performanceByPublishersCard && Object.keys(_vm.recData.performanceByPublishersCard).length >= 2)?_c('b-row',{staticClass:\"match-height\"},[_c('b-col',{staticStyle:{\"margin-top\":\"0.5rem\"},attrs:{\"lg\":\"4\"}},[_c('performance-table',{attrs:{\"performanceByPublishersCard\":_vm.recData.performanceByPublishersCard}})],1),_c('b-col',{attrs:{\"lg\":\"8\"}},[_c('bubble-chart',{key:_vm.currKey,attrs:{\"performanceByPublishers\":_vm.recData.performanceByPublishersCard}})],1)],1):_vm._e()],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"h-100\">\n    <b-card no-body class=\"h-100 mb-0\">\n      <div class=\"d-flex\">\n        <h3 class=\"ml-1 font-weight-light\" style=\"margin-top: 2rem !important;\" >Metric Trend</h3>\n        <ai-button\n          class=\"mt-2\"\n          popoverName=\"metric-trend\"\n          :requestParams=\"requestParams\"\n        />\n        <div class=\"d-flex mt-2 mr-1 ml-auto align-items-center\">\n          <b-form-radio-group id=\"btn-radios-1\" v-model=\"selectedRadio\" button-variant=\"primary\" :options=\"optionsRadio\"\n            buttons name=\"radios-btn-default\" size=\"sm\" />\n        </div>\n      </div>\n      <div style=\"position: relative\" class=\"mt-3\">\n        <forecast-line-chart v-if=\"isChartVisible\" :forecastHistoryData=\"transformedHistoryData\"\n          :forecastSettings=\"forecastSettings\" :forecastFutureData=\"transformedForecastData\" />\n      </div>\n    </b-card>\n  </div>\n</template>\n\n<script>\nimport VueApexCharts from \"vue-apexcharts\";\nimport {\n  BFormRadioGroup,\n  BCard,\n  BButton,\n  BPopover,\n  VBPopover,\n  VBTooltip,\n} from \"bootstrap-vue\";\nimport { universalFormatter } from \"@/@core/utils/utils\";\nimport JQuery from \"jquery\";\nimport forecastLineChart from \"@/views/ui/adin-d3/ForecastLineChart.vue\";\nimport AiButton from \"@/views/ui/ai-button/Index.vue\";\nconst $ = JQuery;\n\nexport default {\n  directives: {\n    \"b-popover\": VBPopover,\n    \"b-tooltip\": VBTooltip,\n  },\n  components: {\n    apexchart: VueApexCharts,\n    BFormRadioGroup,\n    BCard,\n    BButton,\n    BPopover,\n    forecastLineChart,\n    AiButton,\n  },\n  props: {\n    trendGraph: {\n      type: Object,\n      required: true,\n    },\n    filterParams: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      selectedRadio: \"clicksAndCpc\",\n      optionsRadio: [\n        { text: \"Clicks / CPC\", value: \"clicksAndCpc\" },\n        { text: \"Clicks / Cost\", value: \"clicksAndCost\" },\n        { text: \"Views / CPV\", value: \"viewAndCpv\" },\n      ],\n      isChartVisible: true,\n      forecastSettings: {\n        width: 1200,\n        height: 350,\n        margin: { top: 50, right: 80, bottom: 80, left: 80 },\n        chartTypes: {\n          lineChartEnabled: true,\n          stepAreaChartEnabled: false,\n          basisAreaChartEnabled: false,\n          barChartEnabled: true,\n        },\n        lineSettings: {\n          dottedLines: [],\n          toggleLines: [],\n        },\n        colors: {\n          upperLineColor: \"#FF5F5E\",\n          lowerLineColor: \"#FF5F5E\",\n          lineColors: [\"#FF5F5E\"],\n          forecastLineColor: \"white\",\n          forecastAreaColor: \"#9126F0\",\n          barLineColor: \"#818BFF\",\n        },\n        textSettings: {\n          fontFamily: \"Montserrat, Helvetica, Arial, serif !important\",\n          fontWeight: \"400\",\n          fontSize: \"12px\",\n        },\n        meanLineSettings: {\n          meanLineColor: \"#2af3fd\",\n          meanLineText: \"Avg. Clicks\",\n          meanLineEnabled: false,\n          textSettings: {\n            textPosition: {\n              x: 100,\n              y: -40,\n            },\n            textColor: \"white\"\n          }\n        },\n        axisSettings: {\n          separationLineEnabled: false,\n          leftYAxisEnabled: true,\n          rightYAxisEnabled: true,\n          textFontSize: \"11px\",\n          axisColor: \"#959199\",\n          axisTitles: {\n            xAxis: {\n              xAxisTitle: \"Date\",\n              titlePosition: {\n                x: 70,\n              }\n            },\n            leftYAxis: {\n              labelEnabled: true,\n              label: \"Clicks\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 90,\n              }\n            },\n            rightYAxis: {\n              labelEnabled: true,\n              label: \"CPC\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 70,\n              }\n            }\n          }\n        },\n        tooltipSettings: {\n          line1: {\n            text: \"Clicks\",\n            format: \"\"\n          },\n          bar: {\n            text: \"CPC\",\n            format: \"\"\n          }\n        },\n        legendSettings: {\n          showLegend: true,\n          textColor: \"white\",\n          legendNames: [\"Clicks\",\"CPC\"],\n          legendColors: [\"#FF5F5E\", \"#7472DF\"]\n        },\n        zoomOutIconSettings: {\n          iconColor: \"white\",\n          mouseOverColor: \"pink\",\n        },\n        responsive: true,\n      },\n      chartDates: [],\n      startDate: \"\",\n      endDate: \"\",\n      isDateChanged: false,\n      metrics: [],\n    };\n  },\n  computed: {\n    transformedHistoryData() {\n      const dataSources = {\n        clicksAndCpc: this.trendGraph.clicksAndCpc,\n        clicksAndCost: this.trendGraph.clicksAndCost,\n        viewAndCpv: this.trendGraph.viewAndCpv,\n      }\n\n      let data = dataSources[this.selectedRadio]\n\n      let barData = data.series.find((item) => item.name === \"cpc\" || item.name === \"cost\" || item.name === \"cpv\")?.data.map((item) => item.y);\n      let lineData = data.series.find((item) => item.name === \"clicks\" || item.name === \"videoViews\")?.data.map((item) => item.y);\n      let dates = data.series[0].data.map((item) => item.x);\n\n      const formattedHistoryData = dates.map((date, index) => ({\n        date,\n        line1: lineData[index],\n        bar: barData[index],\n      }))\n\n      return formattedHistoryData;\n    },\n\n    transformedForecastData() {\n      return []\n    },\n    apexChartData() {\n      const defaultOps = this.$store.getters[\"chart/getOptsLineBarChart\"];\n      const customOps = this.getTitles();\n      defaultOps.colors = [\"#818BFF\", \"#FF5F5F\"];\n      defaultOps.fill.colors = [\"#818BFF\", \"#FF5F5F\"];\n      defaultOps.legend.horizontalAlign = \"center\";\n      const seriesData = this.getSeries();\n      defaultOps.xaxis.tickAmount = Math.min(seriesData[0].data.length, 8) - 1;\n      $.extend(true, customOps, defaultOps);\n      return {\n        series: seriesData,\n        chartOptions: customOps,\n      };\n    },\n    computedPeriodOptions() {\n      let dataLength = this.trendGraph.clicksAndCpc.series[0].data.length;\n      let periodOptions = [];\n      if (dataLength > 90) periodOptions.push(\"Last 3 Months\");\n      if (dataLength > 180) periodOptions.push(\"Last 6 Months\");\n      if (dataLength > 365) periodOptions.push(\"Last Year\");\n      if (dataLength > 1095) periodOptions.push(\"Last 3 Years\");\n      if (dataLength > 1825) periodOptions.push(\"Last 5 Years\");\n\n      return periodOptions;\n    },\n    computedValues() {\n      let first = \"\";\n      let second = \"\";\n      let foundFirstUpper = false;\n\n      for (let i = 0; i < this.selectedRadio.length; i++) {\n        if (this.selectedRadio.charAt(i) === this.selectedRadio.charAt(i).toUpperCase()) {\n          if (!foundFirstUpper) {\n            foundFirstUpper = true;\n            continue;\n          } else {\n            second = this.selectedRadio.slice(i);\n            break;\n          }\n        }\n        if (!foundFirstUpper) {\n          first += this.selectedRadio.charAt(i);\n        }\n      }\n      if (first.length > 0) {\n        first = first.charAt(0).toUpperCase() + first.slice(1);\n      }\n      return { first, second };\n    },\n    requestParams() {\n      const xLabels = this.trendGraph.clicksAndCpc.series[0].data\n        .map((item) => item.x)\n\n      this.startDate = xLabels[0];\n      this.endDate = xLabels[xLabels.length - 1];\n      this.metrics = this.computedValues.first.toLowerCase() + \",\" + this.computedValues.second.toLowerCase();\n      if(this.selectedRadio === \"viewAndCpv\") {\n        this.metrics = \"video_view,cpv\";\n      }\n      return {\n        brand_id: this.filterParams.considerationWebBrand.value,\n        adin_id: this.filterParams.campaign.value,\n        start_date: this.startDate,\n        end_date: this.endDate,\n        metrics: this.metrics,\n        requestType: \"web\", \n      };\n    }\n  },\n  watch: {\n    selectedRadio() {\n      this.updateChartData();\n      this.updateAxisLabels();\n      \n      // this.currentKey++;\n    },\n    startDate() {\n      this.isDateChanged = true;\n    },\n  },\n  methods: {\n    updateAxisLabels() {\n      const labels = {\n        clicksAndCpc: \"Clicks, CPC\",\n        clicksAndCost: \"Clicks, Cost\",\n        viewAndCpv: \"Views, CPV\",\n      };\n\n      let barLabel, lineLabel;\n      const selectedLabel = labels[this.selectedRadio];\n      if (selectedLabel) {\n        const [bar, line] = selectedLabel.split(\",\");\n        barLabel = bar;\n        lineLabel = line;\n      }\n\n      this.forecastSettings.axisSettings.axisTitles.rightYAxis.label = lineLabel;\n      this.forecastSettings.axisSettings.axisTitles.leftYAxis.label = barLabel;\n\n      this.forecastSettings.tooltipSettings.bar.text = lineLabel;\n      this.forecastSettings.tooltipSettings.line1.text =  barLabel;\n\n      this.forecastSettings.legendSettings.legendNames = [barLabel,lineLabel];\n\n      this.forecastSettings.meanLineSettings.meanLineText = `Avg. ${barLabel}`;\n    },\n\n    updateChartData() {\n      this.isChartVisible = false;\n      this.$nextTick(() => {\n        this.isChartVisible = true;\n      });\n    },\n    getSeries() {\n      const dataSources = {\n        clicksAndCpc: this.trendGraph.clicksAndCpc,\n        clicksAndCost: this.trendGraph.clicksAndCost,\n        viewAndCpv: this.trendGraph.viewAndCpv,\n      };\n      const data = dataSources[this.selectedRadio];\n      if (!data) return [];\n      const seriesData = data.series[0].data\n        .map((item) => item.y)\n\n      const lineData = data.series[1].data\n        .map((item) => item.y)\n\n\n      return [\n        {\n          name: this.computedValues.first,\n          type: \"column\",\n          data: seriesData,\n        },\n        {\n          name: this.computedValues.second,\n          type: \"line\",\n          data: lineData,\n        },\n      ];\n    },\n\n    getTitles() {\n      const xLabels = this.trendGraph.clicksAndCpc.series[0].data\n        .map((item) => item.x)\n\n      this.startDate = xLabels[0];\n      this.endDate = xLabels[xLabels.length - 1];\n\n      const titles = {\n        clicksAndCpc: {\n          yaxis: [\n            {\n              title: { text: \"Clicks\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: false,\n              min: 0\n            },\n            {\n              title: { text: \"CPC\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: true,\n            },\n          ],\n        },\n        clicksAndCost: {\n          yaxis: [\n            {\n              title: { text: \"Clicks\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: false,\n            },\n            {\n              title: { text: \"Cost\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: true,\n            },\n          ],\n        },\n        viewAndCpv: {\n          yaxis: [\n            {\n              title: { text: \"Views\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: false,\n            },\n            {\n              title: { text: \"CPV\", style: { color: \"#FFFFFF\" } },\n              labels: { formatter: (value) => universalFormatter(value, {kFormat: true}) },\n              opposite: true,\n            }\n          ]\n        }\n      };\n\n      const commonOptions = {\n        chart: { animations: { enabled: true } },\n        stroke: { curve: \"smooth\" },\n        labels: xLabels,\n        xaxis: {\n          type: \"datetime\",\n          tickAmount: Math.min(xLabels.length, 8) - 1,\n          labels: {\n            formatter: (value) => {\n              const date = new Date(value);\n              return date.toLocaleDateString(\"en-US\", {\n                minimumIntegerDigits: 2,\n                day: \"numeric\",\n                month: \"short\",\n              });\n            },\n          },\n        },\n        colors: [\"#818BFF\", \"#FF5F5F\"],\n      };\n\n      return {\n        ...commonOptions,\n        ...titles[this.selectedRadio],\n      };\n    },\n  },\n};\n</script>\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./BarChart.vue?vue&type=template&id=2e07efbe\"\nimport script from \"./BarChart.vue?vue&type=script&lang=js\"\nexport * from \"./BarChart.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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"h-100\"},[_c('b-card',{staticClass:\"h-100 mb-0\",attrs:{\"no-body\":\"\"}},[_c('div',{staticClass:\"d-flex\"},[_c('h3',{staticClass:\"ml-1 font-weight-light\",staticStyle:{\"margin-top\":\"2rem !important\"}},[_vm._v(\"Metric Trend\")]),_c('ai-button',{staticClass:\"mt-2\",attrs:{\"popoverName\":\"metric-trend\",\"requestParams\":_vm.requestParams}}),_c('div',{staticClass:\"d-flex mt-2 mr-1 ml-auto align-items-center\"},[_c('b-form-radio-group',{attrs:{\"id\":\"btn-radios-1\",\"button-variant\":\"primary\",\"options\":_vm.optionsRadio,\"buttons\":\"\",\"name\":\"radios-btn-default\",\"size\":\"sm\"},model:{value:(_vm.selectedRadio),callback:function ($$v) {_vm.selectedRadio=$$v},expression:\"selectedRadio\"}})],1)],1),_c('div',{staticClass:\"mt-3\",staticStyle:{\"position\":\"relative\"}},[(_vm.isChartVisible)?_c('forecast-line-chart',{attrs:{\"forecastHistoryData\":_vm.transformedHistoryData,\"forecastSettings\":_vm.forecastSettings,\"forecastFutureData\":_vm.transformedForecastData}}):_vm._e()],1)])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"h-100\">\n    <b-card no-body class=\"h-100 mb-0\">\n      <div class=\"d-flex justify-content-between\">\n        <h3 class=\"mt-2 ml-1 font-weight-light\">Distribution <b-badge variant=\"primary\" class=\"text-capitalize\">{{ badgeText }}</b-badge></h3>\n        <div class=\"d-flex justify-content-end mt-2 mr-1\">\n          <b-form-radio-group\n            id=\"btn-radios-1\"\n            v-model=\"selectedRadio\"\n            button-variant=\"primary\"\n            :options=\"optionsRadio\"\n            buttons\n            name=\"radios-btn-default\"\n            size=\"sm\"\n          />\n        </div>\n      </div>\n      <pieced-donut-chart\n        :key=\"selectedRadio\"\n        :piecedDonutData=\"piecedDonutChartData.piecedDonutData\"\n        :piecedDonutSettings=\"piecedDonutChartData.piecedDonutSettings\"\n        class=\"my-auto\"\n      ></pieced-donut-chart>\n    </b-card>\n  </div>\n</template>\n\n<script>\nimport piecedDonutChart from \"@/views/ui/adin-d3/PiecedDonutChart.vue\";\nimport { BFormRadioGroup, BCard } from \"bootstrap-vue\";\n\nexport default {\n  components: {\n    piecedDonutChart,\n    BFormRadioGroup,\n    BCard,\n  },\n  props: {\n    distributionPiechart: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      selectedRadio: \"clicks\",\n      optionsRadio: [\n        { text: \"Video / CPV\", value: \"video_view\" },\n        { text: \"Click / CPC\", value: \"clicks\" },\n      ],\n      badgeMap: {\n        video_view: \"Video\",\n        clicks: \"Click\"\n      }\n    };\n  },\n  computed: {\n    piecedDonutChartData() {\n      const series = this.getSeries();\n      const customOps = this.getTitles(series.length);\n      return {\n        piecedDonutData: series,\n        piecedDonutSettings: customOps,\n      };\n    },\n    badgeText() {\n      return this.badgeMap[this.selectedRadio]\n    }\n  },\n  methods: {\n    getSeries() {\n      let data;\n      if (this.selectedRadio === \"clicks\") {\n        data = this.distributionPiechart.distribution.clicks;\n      } else {\n        data = this.distributionPiechart.distribution.video_view;\n      }\n      console.log(data);\n      const total = Object.values(data).reduce((acc, val) => acc + val, 0);\n\n      return Object.keys(data).map((key) => {\n        const value = data[key];\n        const percentage = total ? ((value / total) * 100).toFixed(1) : 0;\n        return {\n          category: this.formatKey(key),\n          value: percentage,\n        };\n      });\n    },\n    getTitles(seriesLength) {\n      const colors =\n        this.selectedRadio === \"clicks\"\n          ? [\"#4E779A\", \"#31A3D5\", \"#03C7CE\", \"#85EDFA\"]\n          : [\"#31A3D5\", \"#4E779A\"];\n\n      return {\n        margin: 80,\n        width: 800,\n        height: 400,\n        borderSettings: {\n          borderColor: \"black\",\n          borderFontSize: \"0.5px\",\n        },\n        textSettings: {\n          textFontSize: \"14px\",\n          textColor: \"white\",\n          fontFamily: \"Helvetica, sans-serif\",\n          fontWeight: \"400\",\n        },\n        colors: {\n          piecesColor: colors.slice(0, seriesLength),\n          lineColor: \"white\",\n        },\n        noDataSettings: {\n          text: \"No data available\",\n          color: \"white\",\n        },\n        responsive: true,\n      };\n    },\n    formatKey(key) {\n      if (key === key.toUpperCase()) return key;\n      return key\n        .split(/(?=[A-Z])/)\n        .map(\n          (word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()\n        )\n        .join(\" \");\n    },\n  },\n};\n</script>\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PieChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PieChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PieChart.vue?vue&type=template&id=317cae5c\"\nimport script from \"./PieChart.vue?vue&type=script&lang=js\"\nexport * from \"./PieChart.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","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"h-100\"},[_c('b-card',{staticClass:\"h-100 mb-0\",attrs:{\"no-body\":\"\"}},[_c('div',{staticClass:\"d-flex justify-content-between\"},[_c('h3',{staticClass:\"mt-2 ml-1 font-weight-light\"},[_vm._v(\"Distribution \"),_c('b-badge',{staticClass:\"text-capitalize\",attrs:{\"variant\":\"primary\"}},[_vm._v(_vm._s(_vm.badgeText))])],1),_c('div',{staticClass:\"d-flex justify-content-end mt-2 mr-1\"},[_c('b-form-radio-group',{attrs:{\"id\":\"btn-radios-1\",\"button-variant\":\"primary\",\"options\":_vm.optionsRadio,\"buttons\":\"\",\"name\":\"radios-btn-default\",\"size\":\"sm\"},model:{value:(_vm.selectedRadio),callback:function ($$v) {_vm.selectedRadio=$$v},expression:\"selectedRadio\"}})],1)]),_c('pieced-donut-chart',{key:_vm.selectedRadio,staticClass:\"my-auto\",attrs:{\"piecedDonutData\":_vm.piecedDonutChartData.piecedDonutData,\"piecedDonutSettings\":_vm.piecedDonutChartData.piecedDonutSettings}})],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"d-flex flex-column\" style=\"height: 455px\">\n    <b-table\n      :items=\"tableData.items\"\n      :fields=\"tableData.fields\"\n      striped\n      class=\"lila-bg\"\n      responsive\n    >\n      <template v-slot:head(this.selectedRatio)=\"{ field }\">\n        <div\n          v-for=\"(word, index) in field.label\"\n          :key=\"index\"\n          style=\"width: 200px\"\n        >\n          {{ word }}\n        </div>\n      </template>\n      <template v-slot:cell(cpm)=\"data\">\n        <div class=\"cell-content\">\n          <div v-if=\"data.item.video_view && data.item.cpv\">\n            {{ universalFormatter(data.item.cpv, {isCurrency:true}) }} / {{ universalFormatter(data.item.video_view, {kFormat:true}) }}\n          </div>\n          </div>\n      </template>\n    </b-table>\n\n    <div class=\"footer-radio\">\n      <!-- <b-form-radio-group\n        id=\"btn-radios-1\"\n        v-model=\"selectedRadio\"\n        button-variant=\"primary\"\n        :options=\"optionsRadio\"\n        buttons\n        name=\"radios-btn-default\"\n        size=\"sm\"\n      /> -->\n    </div>\n  </div>\n</template>\n\n<script>\nimport { BTable, BFormRadioGroup } from \"bootstrap-vue\";\nimport { universalFormatter } from \"@/@core/utils/utils\";\n\nexport default {\n  components: {\n    BTable,\n    BFormRadioGroup,\n  },\n  props: {\n    performanceByPublishersCard: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      selectedRadio: \"cpm\",\n      optionsRadio: [\n        { text: \"Video / CPV\", value: \"videoAndCpv\" },\n        { text: \"Click / CPC\", value: \"clickAndCpc\" },\n      ],\n    };\n  },\n  computed: {\n    tableData() {\n      const fields = this.getFields();\n      return {\n        fields,\n        items: this.getItems(),\n      };\n    },\n  },\n  methods: {\n    universalFormatter,\n    getFields() {\n      const selectedOption = this.optionsRadio.find(\n        (option) => option.value === this.selectedRadio\n      );\n      return [\n        { key: \"publisher\", label: \"Performance By Publishers\" },\n        {\n          key: \"cpm\",\n          label: \"CPV / Video\"\n        },\n      ];\n    },\n    getItems() {\n      let items = Object.keys(this.performanceByPublishersCard).map((key) => {\n        let item = this.performanceByPublishersCard[key];\n        let newItem = {\n          publisher: key,\n        };\n        Object.keys(item).forEach((subKey) => {\n          newItem[subKey] = item[subKey] === 0 ? \"-\" : item[subKey];\n        });\n        return newItem;\n      });\n\n      while (items.length < 8) {\n        items.push({\n          publisher: \"\",\n          cpm: \"\",\n          frequency: \"\",\n        });\n      }\n      return items;\n    },\n  },\n};\n</script>\n\n<style scoped>\n.lila-bg /deep/ th {\n  background-color: #7428ef !important;\n  color: white !important;\n  border-bottom-right-radius: 0% !important;\n  border-bottom-left-radius: 0% !important;\n  position: sticky !important;\n  top: 0 !important;\n}\n.lila-bg /deep/ {\n  border: 1px solid #7428ef !important;\n  border-bottom: none !important;\n  margin-top: 1rem !important;\n  flex-grow: 1 !important;\n  margin-bottom: 0;\n}\n.lila-bg /deep/ td {\n  vertical-align: top !important;\n}\n\n.lila-bg /deep/ tr:nth-child(odd) td {\n  background-color: transparent;\n}\n\n.lila-bg /deep/ tr:nth-child(even) td {\n  background-color: rgba(183, 68, 221, 0.069);\n}\n\n.footer-radio {\n  border: 1px solid #7428ef;\n  border-top: none;\n  padding: 10px;\n  text-align: center;\n  width: 100%;\n}\n\n.cell-content {\n  min-height: 23px !important;\n}\n\n/deep/ table.b-table th[aria-colindex=\"2\"],\n/deep/ table.b-table td[aria-colindex=\"3\"] {\n  min-width: 125px !important;\n}\n</style>","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerformanceTable.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PerformanceTable.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PerformanceTable.vue?vue&type=template&id=062475d0&scoped=true\"\nimport script from \"./PerformanceTable.vue?vue&type=script&lang=js\"\nexport * from \"./PerformanceTable.vue?vue&type=script&lang=js\"\nimport style0 from \"./PerformanceTable.vue?vue&type=style&index=0&id=062475d0&prod&scoped=true&lang=css\"\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  \"062475d0\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"d-flex flex-column\",staticStyle:{\"height\":\"455px\"}},[_c('b-table',{staticClass:\"lila-bg\",attrs:{\"items\":_vm.tableData.items,\"fields\":_vm.tableData.fields,\"striped\":\"\",\"responsive\":\"\"},scopedSlots:_vm._u([{key:\"head(this.selectedRatio)\",fn:function(ref){\nvar field = ref.field;\nreturn _vm._l((field.label),function(word,index){return _c('div',{key:index,staticStyle:{\"width\":\"200px\"}},[_vm._v(\" \"+_vm._s(word)+\" \")])})}},{key:\"cell(cpm)\",fn:function(data){return [_c('div',{staticClass:\"cell-content\"},[(data.item.video_view && data.item.cpv)?_c('div',[_vm._v(\" \"+_vm._s(_vm.universalFormatter(data.item.cpv, {isCurrency:true}))+\" / \"+_vm._s(_vm.universalFormatter(data.item.video_view, {kFormat:true}))+\" \")]):_vm._e()])]}}])}),_c('div',{staticClass:\"footer-radio\"})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-card class=\"mt-2\">\n    <h3 class=\"ml-1 font-weight-light\">Performance by Publishers</h3>\n    <!-- <vue-apex-charts ref=\"chart\" height=\"353\" :options=\"chartOptions\" :series=\"bubbleChartData\" /> -->\n    <bubble-chart :bubbleChartData=\"this.bubbleChartData\" :bubbleChartSettings=\"bubbleChartSettings\"></bubble-chart>\n  </b-card>\n</template>\n\n<script>\nimport { universalFormatter } from '@/@core/utils/utils';\nimport BubbleChart from '@/views/ui/adin-d3/BubbleChart.vue';\nexport default {\n  components: {\n    BubbleChart,\n  },\n  props: {\n    performanceByPublishers: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    const currencySymbol = this.$store.getters[\"adinSettings/getCurrencySymbol\"];\n    return {\n      bubbleChartSettings: {\n        margin: { top: 20, right: 50, bottom: 40, left: 80 },\n        width: 1000,\n        height: 370,\n        axisSettings: {\n          yAxisTickCount: 5,\n          axisLineColor: \"#6e6b7b\",\n          axisTickColor: \"#FFFFFF\",\n          xAxisCurrency: \"₺\",\n        },\n        bubbleZoomOutFactor: 1,\n        legendSettings: {\n          textFontSize: \"8px\",\n          legendColor: \"#FFFFFF\"\n        },\n        colors: {\n          bubbleColors: [\"#818BFF\", \"#818BFF\", \"#818BFF\"],\n          gridColor: \"#493E64\",\n          gradianColors: [\"#1A454D\", \"#4D1249\"]\n        },\n        tooltipTitles: {\n          publisher: \"Publisher\",\n          x: \"CPV\",\n          y: \"Video Views\",\n          size: \"Cost\",\n        },\n        responsive: true,\n      },\n      bubbleChartDataStatic: [\n        // { x: 0, y: 0, size: 20000, group: 'good' },\n        { x: 318.03, y: 400000, size: 40000, group: 'good' },\n        { x: 318.03, y: 400000, size: 8000000, group: 'good' },\n        { x: 379.14, y: 700000, size: 10000, group: 'good' },\n        { x: 440.24, y: 600000, size: 60000, group: 'average' },\n        { x: 487.60, y: 200000, size: 30000, group: 'average' },\n        { x: 562.45, y: 500000, size: 10000, group: 'average' },\n        { x: 562.45, y: 10000, size: 70000, group: 'average' },\n        { x: 623.56, y: 300000, size: 20000, group: 'average' },\n        { x: 684.66, y: 100000, size: 15000, group: 'bad' },\n        { x: 745.77, y: 100000, size: 8000, group: 'bad' },\n        { x: 806.87, y: 100000, size: 5000, group: 'bad' }\n      ],\n      chartOptions: {\n        chart: {\n          type: \"bubble\",\n        },\n        xaxis: {\n          title: {\n            text: `CPV(${currencySymbol})`,\n            style: {\n              color: \"white\",\n            },\n          },\n        },\n        plotOptions: {\n          bubble: {\n            minBubbleRadius: 5, // Set a minimum bubble size\n            maxBubbleRadius: 50, // Set a maximum bubble size\n          },\n        },\n        tooltip: {\n          custom: function ({ series, seriesIndex, dataPointIndex, w }) {\n            const d = w.globals.initialSeries[seriesIndex].data[dataPointIndex];\n            return `\n              <div class=\"apexcharts-tooltip-box apexcharts-tooltip-bubble\">\n                <div>Publisher: ${d.publisher}</div>\n                <div>Cpv: ${currencySymbol}${d.x}</div>\n                <div>Views: ${universalFormatter(d.y, {kFormat: true})}</div>\n                <div>Cost: ${currencySymbol}${universalFormatter(d.z, {kFormat: true})}</div>\n              </div>\n            `;\n          },\n        },\n        dataLabels: {\n          enabled: false,\n        },\n        legend: {\n          show: false,\n        },\n      },\n    };\n  },\n  mounted() {\n    console.log(\"this.performanceByPublishers\", this.performanceByPublishers)\n  },\n  computed: {\n    // bubbleChartData() {\n    //   console.log(\"performanceData\", this.performanceByPublishers);\n    //   const performanceData = Object.keys(this.performanceByPublishers).map((key) => {\n    //     const publisher = this.performanceByPublishers[key];\n    //     return {\n    //       name: key,\n    //       data: [\n    //         {\n    //           publisher: key,\n    //           x: publisher.cpv,\n    //           y: publisher.video_view,\n    //           z: publisher.cost,\n    //         },\n    //       ],\n    //     };\n    //   });\n    //   return performanceData;\n    // },\n\n    bubbleChartData() {\n      const performanceData = Object.keys(this.performanceByPublishers).map((key) => {\n        const publisher = this.performanceByPublishers[key];\n        return {\n          publisher: key, // Google Ads gibi yayıncı adı\n          x: publisher.cpv, // x değeri cpi\n          y: publisher.video_view, // y değeri installs\n          size: publisher.cost, // size installs olacak\n        };\n      });\n      console.log(\"performanceData\", performanceData);\n      return performanceData;\n    }\n  },\n  watch: {\n    bubbleChartData: {\n      immediate: true,\n      handler(newData) {\n        this.$nextTick(() => {\n          const newOptions = {};\n          const maxY = Math.max(...newData.map((s) => s.data[0].y));\n          newOptions.yaxis = {\n            max: Math.round(maxY + maxY * 0.2),\n            // Due to an unresolved bug yaxis options disappears after updateOptions, so it is set here as well\n            // Likely due to yaxis working in arrays(since there can be multiple yaxis)\n            title: {\n              text: \"Video View\",\n              style: {\n                color: \"white\",\n              },\n            },\n            offsetX: 5,\n            labels: {\n              formatter: (value) => universalFormatter(Math.round(value), {kFormat: true}),  // Format x-axis labels\n            },\n          };\n          const dataLength = Object.keys(this.performanceByPublishers).length;\n          if (dataLength > 1) {\n            const maxX = Math.max(...newData.map((s) => s.data[0].x));\n            const minX = Math.min(...newData.map((s) => s.data[0].x));\n            newOptions.xaxis = { max: Math.round(maxX + maxX * 0.2), min: Math.round(minX - minX * 0.2) };\n          } else {\n            // Create ticks manually for better visualization\n            const value = newData[0].data[0].x;\n            newOptions.xaxis = {\n              min: Math.round(value * 0.5),\n              max: Math.round(value * 1.5),\n              tickAmount: 3\n            };\n          }\n\n          if (this.$refs.chart) {\n            this.$refs.chart.updateOptions(newOptions);\n          }\n        });\n      },\n    },\n  },\n};\n</script>\n\n<style scoped>\n.line {\n  width: 1.5rem;\n  height: 0.2rem;\n  margin-right: 10px;\n}\n\n.green {\n  background-color: green;\n}\n\n.red {\n  background-color: rgba(255, 51, 0, 0.682);\n}\n</style>\n","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BubbleChart.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BubbleChart.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./BubbleChart.vue?vue&type=template&id=73bedc47&scoped=true\"\nimport script from \"./BubbleChart.vue?vue&type=script&lang=js\"\nexport * from \"./BubbleChart.vue?vue&type=script&lang=js\"\nimport style0 from \"./BubbleChart.vue?vue&type=style&index=0&id=73bedc47&prod&scoped=true&lang=css\"\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  \"73bedc47\",\n  null\n  \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card',{staticClass:\"mt-2\"},[_c('h3',{staticClass:\"ml-1 font-weight-light\"},[_vm._v(\"Performance by Publishers\")]),_c('bubble-chart',{attrs:{\"bubbleChartData\":this.bubbleChartData,\"bubbleChartSettings\":_vm.bubbleChartSettings}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section>\n    <b-row class=\"match-height\">\n      <b-col>\n        <filtersV2 name=\"considerationWeb\" :get-metrics=\"getMetrics\" />\n      </b-col>\n    </b-row>\n    <span v-if=\"loading\">\n      <loading />\n    </span>\n    <span v-else>\n      <span v-if=\"noData\">\n        <no-data-temp />\n      </span>\n      <span v-else>\n        <b-row class=\"match-height\">\n          <b-col lg=\"6\" md=\"12\" class=\"mt-1\">\n            <div class=\"dashboard-container h-100 mb-1\">\n              <div class=\"budget-card\">\n                <budget-card :campaignCard=\"recData.campaignCard\" :isHorizontal=\"true\"/>\n              </div>\n              <div class=\"process\">\n                <consideration-process\n                  :comparisonCard=\"recData.comparisonCard\"\n                  :pageMeta=\"{ type: 'consideration', platform: 'web' }\"\n                  :onlyCost=\"true\"\n                />\n              </div>\n              <single-metric class=\"metric-card\" :metricData=\"singleMetricData.videoViews\" />\n              <single-metric class=\"metric-card\" :metricData=\"singleMetricData.clicks\" />\n            </div>\n          </b-col>\n          <b-col lg=\"3\" md=\"6\" class=\"mt-1\">\n            <session :sourceData=\"recData.engagedSessionsCard\" :pageMeta=\"{type:'consideration', platform: 'web'}\"/>\n          </b-col>\n          <b-col lg=\"3\" md=\"6\" class=\"mt-1\">\n            <score :scoreData=\"recData.considerationScoreCard\" :pageMeta=\"{type:'consideration', platform: 'web'}\" />\n          </b-col>\n        </b-row>\n        <b-row class=\"match-height mt-2\">\n          <b-col>\n            <volume-progress :sourceData=\"recData.metricsCard\" />\n          </b-col>\n        </b-row>\n        <b-row class=\"match-height mt-3\">\n          <b-col lg=\"7\">\n            <bar-chart\n              :trendGraph=\"recData.trendGraph\"\n              :filterParams=\"filterParams\"\n            />\n          </b-col>\n          <b-col lg=\"5\">\n            <pie-chart\n              :distributionPiechart=\"recData.distributionPiechart\"\n              :key=\"currKey\"\n            />\n          </b-col>\n        </b-row>\n        <b-row class=\"match-height\" v-if=\"recData.performanceByPublishersCard && Object.keys(recData.performanceByPublishersCard).length >= 2\">\n          <b-col lg=\"4\" style=\"margin-top: 0.5rem\">\n            <performance-table\n              :performanceByPublishersCard=\"recData.performanceByPublishersCard\"\n            />\n          </b-col>\n          <b-col lg=\"8\">\n            <bubble-chart\n              :performanceByPublishers=\"recData.performanceByPublishersCard\"\n              :key=\"currKey\"\n            />\n          </b-col>\n        </b-row>\n      </span>\n    </span>\n  </section>\n</template>\n\n<script>\nimport FiltersV2 from \"@/views/FiltersV2.vue\";\nimport Loading from \"@/views/Loading.vue\";\nimport BudgetCard from \"@/views/ui/media-components/BudgetCard.vue\";\nimport ConsiderationProcess from \"@/views/ui/media-components/CostProcess.vue\";\nimport SingleMetric from \"@/views/ui/media-components/SingleMetric.vue\";\nimport Session from \"@/views/ui/media-components/MetricCircleCard.vue\";\nimport Score from \"@/views/ui/media-components/ScoreCard.vue\";\nimport VolumeProgress from \"@/views/ui/media-components/MetricBars.vue\";\nimport BarChart from \"./BarChart.vue\";\nimport PieChart from \"./PieChart.vue\";\nimport PerformanceTable from \"./PerformanceTable.vue\";\nimport BubbleChart from \"./BubbleChart.vue\";\nimport NoDataTemp from \"@/views/NoDataTemp.vue\";\n\nexport default {\n  components: {\n    FiltersV2,\n    Loading,\n    BudgetCard,\n    ConsiderationProcess,\n    SingleMetric,\n    Session,\n    Score,\n    VolumeProgress,\n    BarChart,\n    PieChart,\n    PerformanceTable,\n    BubbleChart,\n    NoDataTemp,\n  },\n  data() {\n    return {\n      recData: {},\n      noData: false,\n      filterParams: {},\n      loading: true,\n      currKey: 0,\n    };\n  },\n  computed: {\n    singleMetricData() {\n      return {\n         videoViews: {\n          title: \"View\",\n          value: this.recData.videoViewsCard?.views,\n          icon: \"EyeIcon\",\n        },\n        clicks: {\n          title: \"Click\",\n          value: this.recData.clicksCard?.clicks,\n          icon: \"MousePointerIcon\",\n        },\n      }\n    }\n  },\n  methods: {\n    async getMetrics(params) {\n      this.loading = true;\n      this.filterParams = params;\n\n      await this.$http\n        .get(\"/media/consideration/web\", {\n          params: {\n            brand_id: params.considerationWebBrand.value,\n            adin_id: params.campaign.value,\n          },\n        })\n        .then(({ data }) => {\n          this.recData = data;\n          console.log(this.recData);\n          this.noData = false;\n          this.loading = false;\n          this.currKey = this.currKey + 1;\n        })\n        .catch((e) => {\n          this.loading = false;\n          this.noData = true;\n        });\n    },\n  },\n};\n</script>\n\n\n<style lang=\"scss\" scoped>\n@import \"../../styles.scss\";\n.dashboard-container{\n  @include horizontal-layout-container\n}\n</style>","import mod from \"-!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-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--13-0!../../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-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=5e2ed357&scoped=true\"\nimport script from \"./Index.vue?vue&type=script&lang=js\"\nexport * from \"./Index.vue?vue&type=script&lang=js\"\nimport style0 from \"./Index.vue?vue&type=style&index=0&id=5e2ed357&prod&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  \"5e2ed357\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}