{"version":3,"sources":["webpack:///./src/views/scores/creative/overview/TotalCost.vue?80b3","webpack:///./src/views/scores/creative/overview/Metrics.vue?96ad","webpack:///./src/views/scores/creative/overview/Index.vue?9ec1","webpack:///./src/views/scores/creative/overview/Index.vue?e320","webpack:///src/views/scores/creative/overview/TotalCost.vue","webpack:///./src/views/scores/creative/overview/TotalCost.vue?4bcb","webpack:///./src/views/scores/creative/overview/TotalCost.vue","webpack:///./src/views/scores/creative/overview/TotalCost.vue?5fcf","webpack:///./src/views/scores/creative/overview/ViewRate.vue?d0be","webpack:///src/views/scores/creative/overview/ViewRate.vue","webpack:///./src/views/scores/creative/overview/ViewRate.vue","webpack:///./src/views/scores/creative/overview/ViewRate.vue?5d44","webpack:///src/views/scores/creative/overview/Metrics.vue","webpack:///./src/views/scores/creative/overview/Metrics.vue?087d","webpack:///./src/views/scores/creative/overview/Metrics.vue","webpack:///./src/views/scores/creative/overview/Metrics.vue?a77e","webpack:///src/views/scores/creative/overview/ViewabilityClickTrend.vue","webpack:///./src/views/scores/creative/overview/ViewabilityClickTrend.vue?b4a9","webpack:///./src/views/scores/creative/overview/ViewabilityClickTrend.vue","webpack:///./src/views/scores/creative/overview/ViewabilityClickTrend.vue?2b07","webpack:///src/views/scores/creative/overview/VideoCompletionTrend.vue","webpack:///./src/views/scores/creative/overview/VideoCompletionTrend.vue?f5c8","webpack:///./src/views/scores/creative/overview/VideoCompletionTrend.vue","webpack:///./src/views/scores/creative/overview/VideoCompletionTrend.vue?ea13","webpack:///./src/views/scores/creative/overview/PerformanceByPublisher.vue?453b","webpack:///src/views/scores/creative/overview/PerformanceByPublisher.vue","webpack:///./src/views/scores/creative/overview/PerformanceByPublisher.vue","webpack:///./src/views/scores/creative/overview/PerformanceByPublisher.vue?1dc0","webpack:///src/views/scores/creative/overview/Index.vue","webpack:///./src/views/scores/creative/overview/Index.vue?c742","webpack:///./src/views/scores/creative/overview/Index.vue","webpack:///./src/views/scores/creative/overview/ViewRate.vue?5f18"],"names":["props","campaignCard","type","Object","required","isHorizontal","Boolean","default","textOptions","title","subtitle","methods","universalFormatter","computed","layoutStyles","mode","rangeContainer","mainContainer","daysValue","budgetContainer","infoContainer","detailsWrapper","component","_vm","this","_h","$createElement","_c","_self","staticClass","class","_v","_s","cost","isCurrency","_e","range","days","staticStyle","goal","buyingType","platform","viewRateCard","data","circumference","Math","PI","outerCircumference","outerData","percentage","viewRate","sourceData","newUsers","totalUsers","percentageOfNewUsers","outerMetric","pageMeta","dataMap","awareness","total","value","metric","label","icon","normalizedData","videoViewsP100","kFormatter","attrs","style","strokeDasharray","strokeDashoffset","videoViewsP25","videoViewsP50","videoViewsP75","metricsData","hoveredIndex","barColorClass","legendMap","campaignBased","companyBased","industryBased","decimalMap","viewability","metricNames","keys","map","name","formatMetricName","dataCategories","calculateWidth","maxValue","calculateMaxValue","values","category","getMetricValue","filter","length","max","formattedName","_this$metricsData$typ","_this$metricsData$typ2","camelCaseName","toCamelCase","str","replace","g","toUpperCase","char","getPlatformBadge","includes","parts","split","toLowerCase","_l","index","key","kFormat","decimals","directives","rawName","modifiers","width","components","BCard","VueApexCharts","BButton","BPopover","forecastLineChart","AiButton","VBTooltip","filterParams","chartKey","selectedMetric","dataKey","yAxis","left","options","text","series","forecastSettings","height","margin","top","right","bottom","chartTypes","lineChartEnabled","stepAreaChartEnabled","basisAreaChartEnabled","barChartEnabled","colors","upperLineColor","lowerLineColor","lineColors","forecastLineColor","forecastAreaColor","barLineColor","textSettings","fontFamily","fontWeight","fontSize","meanLineSettings","meanLineColor","meanLineDataset","meanLineText","meanLineEnabled","textPosition","x","y","textColor","axisSettings","separationLineEnabled","leftYAxisEnabled","rightYAxisEnabled","textFontSize","axisColor","axisTitles","xAxis","xAxisTitle","titlePosition","numberOfTicks","leftYAxis","labelEnabled","labelColor","rightYAxis","tooltipSettings","area","areaText","legendSettings","legendNames","legendColors","zoomOutIconSettings","iconColor","mouseOverColor","responsive","startDate","endDate","transformedHistoryData","lineData","item","dates","date","formattedHistoryData","transformedForecastData","requestParams","brand_id","brand","adin_id","adinId","start_date","end_date","metrics","watch","newData","updateChart","handler","newVal","immediate","mounted","created","campaign","chartData","chart","$refs","updateOptions","model","callback","$$v","expression","TableEnhancer","Array","fields","sortable","columns","SingleMetric","ConsiderationProcess","MetricBars","BudgetCard","BRow","BCol","FiltersV2","Loading","noDataTemp","TotalCost","ViewRate","Metrics","Process","CreativeScore","viewabilityClickTrend","videoCompletionTrend","PerformanceByPublisher","recData","noData","isLoading","processDescriptions","singleMetricData","_this$recData$viewCar","_this$recData$clicksC","_this$recData$complet","videoViews","viewCard","videoView","clicks","clicksCard","compViews","completionViewCard","completionView","getMetrics","params","$http","get","then","currKey","catch","e","finally","viewableImpressionCard","scoreCard","metricsCard","metricsTrendGraph","viewsTrendGraph","performanceByPublishersCard","staticRenderFns"],"mappings":"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","file":"js/chunk-2dcc3615.dca3f785.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!./TotalCost.vue?vue&type=style&index=0&id=7aca8285&prod&lang=scss\"","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!./Metrics.vue?vue&type=style&index=0&id=51354d05&prod&lang=scss&scoped=true\"","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=200cc1b9&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',[_c('b-col',[_c('filtersV2',{attrs:{\"name\":\"creativePage\",\"get-metrics\":_vm.getMetrics}})],1)],1),(_vm.isLoading)?_c('loading'):(_vm.noData && !_vm.isLoading)?_c('no-data-temp'):(!_vm.noData && !_vm.isLoading && _vm.recData !== null)?_c('span',[_c('b-row',{staticClass:\"d-flex align-items-center justify-content-center\"},[_c('h4',{staticClass:\"text-bold text-muted\"},[_vm._v(\"If there is no video usage on a page, the score will be 0. \")])]),_c('b-row',{staticClass:\"match-height\"},[_c('b-col',{staticClass:\"mt-1\",attrs:{\"xl\":\"6\",\"cols\":\"12\"}},[_c('div',{staticClass:\"dashboard-container h-100 mb-1\"},[_c('div',{staticClass:\"budget-card\"},[_c('budget-card',{attrs:{\"campaign-card\":_vm.recData.campaignCard,\"is-horizontal\":true}})],1),_c('div',{staticClass:\"process\"},[_c('process',{attrs:{\"is-currency\":false,\"comparison-card\":_vm.recData.viewableImpressionCard,\"descriptions\":_vm.processDescriptions,\"only-cost\":false,\"page-meta\":{ type: 'creative' }}})],1),_c('single-metric',{staticClass:\"metric-card\",attrs:{\"metric-data\":_vm.singleMetricData.videoViews}}),_c('single-metric',{staticClass:\"metric-card\",attrs:{\"metric-data\":_vm.singleMetricData.compViews}}),_c('single-metric',{staticClass:\"metric-card\",attrs:{\"metric-data\":_vm.singleMetricData.clicks}})],1)]),_c('b-col',{staticClass:\"mt-1\",attrs:{\"xl\":\"3\",\"cols\":\"6\"}},[_c('view-rate',{attrs:{\"view-rate-card\":_vm.recData.viewRateCard}})],1),_c('b-col',{staticClass:\"mt-1\",attrs:{\"xl\":\"3\",\"cols\":\"6\"}},[_c('creative-score',{attrs:{\"score-data\":_vm.recData.scoreCard,\"page-meta\":{type:'creative'}}})],1)],1),_c('b-row',{staticClass:\"match-height mt-2\"},[_c('b-col',[_c('metric-bars',{attrs:{\"source-data\":_vm.recData.metricsCard}})],1)],1),_c('b-row',{staticClass:\"match-height mt-2\"},[_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('viewability-click-trend',{attrs:{\"filter-params\":_vm.filterParams,\"data\":_vm.recData.metricsTrendGraph}})],1),_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('video-completion-trend',{attrs:{\"filter-params\":_vm.filterParams,\"data\":_vm.recData.viewsTrendGraph}})],1)],1),_c('b-row',[_c('b-col',{attrs:{\"lg\":\"12\"}},[_c('performance-by-publisher',{attrs:{\"data\":_vm.recData.performanceByPublishersCard}})],1)],1)],1):_vm._e()],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-card class=\"h-100 mb-0\">\n    <div :class=\"layoutStyles.mainContainer\">\n      <div class=\"d-flex flex-column\" :class=\"layoutStyles.budgetContainer\">\n        <span class=\"budget--text\">{{textOptions.title}}</span>\n        <span class=\"budget--value\">\n          {{ universalFormatter(campaignCard.cost, { isCurrency: true }) }}\n        </span>\n        <span class=\"budget--sub-text text-muted\">{{ textOptions.subtitle }}</span>\n      </div>\n\n      <!-- vertical rule for horizontal component -->\n\n      <div class=\"d-flex\" :class=\"layoutStyles.infoContainer\">\n        <div v-if=\"isHorizontal\" class=\"rule rule--vertical mr-1\"></div>\n        <div class=\"d-flex flex-column w-100\">\n          <!-- Range and Days -->\n          <div class=\"d-flex justify-content-between\">\n            <div class=\"range-container\" :class=\"layoutStyles.rangeContainer\">\n              <span class=\"range--label font-weight-light text-muted\">Range:</span>\n              <span class=\"range--value\">\n                {{ this.campaignCard.range }}\n              </span>\n            </div>\n            <div class=\"d-flex justify-content-end\">\n              <span class=\"d-flex flex-column align-items-center justify-content-center\">\n                <span class=\"days--text\">Days</span>\n                <span class=\"days--value\" :class=\"layoutStyles.daysValue\">\n                  {{ this.campaignCard.days }}\n                </span>\n              </span>\n            </div>\n          </div>\n          <hr v-if=\"!isHorizontal\" class=\"rule rule--horizontal\" />\n          <!-- Details -->\n          <div class=\"details-wrapper\" :class=\"layoutStyles.detailsWrapper\">\n            <div class=\"detail-container\">\n              <span class=\"text-muted mb-0\">Goal:</span>\n              <span style=\"margin-left: 7px; margin-bottom: 0\">{{ this.campaignCard.goal }}</span>\n            </div>\n            <div class=\"detail-container\">\n              <span class=\"text-muted mb-0\">Buying Type:</span>\n              <span style=\"margin-left: 7px; margin-bottom: 0\">{{ this.campaignCard.buyingType }}</span>\n            </div>\n            <div class=\"detail-container\">\n              <span class=\"text-muted mb-0\">Platform:</span>\n              <span style=\"margin-left: 7px; margin-bottom: 0\">{{ this.campaignCard.platform }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </b-card>\n</template>\n\n<script>\nimport { universalFormatter } from \"@/@core/utils/utils\";\n\nexport default {\n  props: {\n    campaignCard: {\n      type: Object,\n      required: true,\n    },\n    isHorizontal: {\n      type: Boolean,\n      default: false,\n    },\n    textOptions: {\n      type: Object,\n      default: () => {\n        return {\n          title: \"Total Cost\",\n          subtitle: \"Total budget spent on this campaign.\",\n        };\n      },\n    }\n  },\n  methods: {\n    universalFormatter,\n  },\n  computed: {\n    layoutStyles() {\n      const mode = this.isHorizontal ? \"horizontal\" : \"vertical\";\n      return {\n        rangeContainer: `range-container--${mode}`,\n        mainContainer: `main-container--${mode}`,\n        daysValue: `days--value--${mode}`,\n        budgetContainer: `budget-container--${mode}`,\n        infoContainer: `info-container--${mode}`,\n        detailsWrapper: `details-wrapper--${mode}`,\n      };\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.main-container {\n  &--horizontal {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    justify-content: space-between;\n  }\n}\n\n.days {\n  &--text {\n    font-size: 1.4rem;\n    line-height: normal;\n  }\n  &--value {\n    font-weight: bold;\n    line-height: 100%;\n    padding-top: 5px;\n    &--vertical {\n      font-size: 3.2rem;\n    }\n    &--horizontal {\n      font-size: 2.5rem;\n    }\n  }\n}\n\n.range-container {\n  &--horizontal {\n    display: flex;\n    margin-right: 2rem;\n    flex-direction: column;\n    justify-content: start;\n  }\n  &--vertical {\n    display: flex;\n    flex-direction: column;\n    margin-top: auto;\n  }\n}\n\n.range {\n  &--label{\n    font-size: 1rem;\n  }\n  &--value {\n    font-size: 1.2rem;\n    // width: max-content;\n    white-space: normal; /* Allow wrapping */\n    // word-break: break-all;\n  }\n}\n\n.budget-container {\n  &--horizontal {\n    display: flex;\n    align-self: start;\n  }\n}\n\n.budget {\n  &--text {\n    font-size: 1.5rem;\n  }\n  &--value {\n    font-size: 3rem;\n    font-weight: bold;\n  }\n  &--sub-text {\n    font-size: 1rem;\n  }\n}\n\n.info-container {\n  &--horizontal {\n    margin-right: 5%\n  }\n  &--vertical {\n    margin-top: 1.5rem;\n  }\n}\n\n.rule {\n  // Warning: Classes are reversed. The rule derives its class based on its own orientation.\n  // up is down, true is false\n  $rule-width: 4px;\n  &--vertical {\n    width: $rule-width;\n    background-color: rgba(75, 55, 94, 0.55);\n    margin: 0 0.5rem;\n    height: 100%;\n  }\n\n  &--horizontal {\n    height: $rule-width;\n    width: 100%;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n  }\n}\n\n.details-wrapper{\n  $gap-constant: 6%;\n  margin-top: calc(#{$gap-constant} / 2);\n  display: flex;\n  flex-direction: column;\n  gap: $gap-constant;\n  // &--vertical {\n  // }\n  // &--horizontal {\n  // }\n}\n\n.detail-container {\n  padding: 0.1rem 0;\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!./TotalCost.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!./TotalCost.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./TotalCost.vue?vue&type=template&id=7aca8285\"\nimport script from \"./TotalCost.vue?vue&type=script&lang=js\"\nexport * from \"./TotalCost.vue?vue&type=script&lang=js\"\nimport style0 from \"./TotalCost.vue?vue&type=style&index=0&id=7aca8285&prod&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  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('b-card',{staticClass:\"h-100 mb-0\"},[_c('div',{class:_vm.layoutStyles.mainContainer},[_c('div',{staticClass:\"d-flex flex-column\",class:_vm.layoutStyles.budgetContainer},[_c('span',{staticClass:\"budget--text\"},[_vm._v(_vm._s(_vm.textOptions.title))]),_c('span',{staticClass:\"budget--value\"},[_vm._v(\" \"+_vm._s(_vm.universalFormatter(_vm.campaignCard.cost, { isCurrency: true }))+\" \")]),_c('span',{staticClass:\"budget--sub-text text-muted\"},[_vm._v(_vm._s(_vm.textOptions.subtitle))])]),_c('div',{staticClass:\"d-flex\",class:_vm.layoutStyles.infoContainer},[(_vm.isHorizontal)?_c('div',{staticClass:\"rule rule--vertical mr-1\"}):_vm._e(),_c('div',{staticClass:\"d-flex flex-column w-100\"},[_c('div',{staticClass:\"d-flex justify-content-between\"},[_c('div',{staticClass:\"range-container\",class:_vm.layoutStyles.rangeContainer},[_c('span',{staticClass:\"range--label font-weight-light text-muted\"},[_vm._v(\"Range:\")]),_c('span',{staticClass:\"range--value\"},[_vm._v(\" \"+_vm._s(this.campaignCard.range)+\" \")])]),_c('div',{staticClass:\"d-flex justify-content-end\"},[_c('span',{staticClass:\"d-flex flex-column align-items-center justify-content-center\"},[_c('span',{staticClass:\"days--text\"},[_vm._v(\"Days\")]),_c('span',{staticClass:\"days--value\",class:_vm.layoutStyles.daysValue},[_vm._v(\" \"+_vm._s(this.campaignCard.days)+\" \")])])])]),(!_vm.isHorizontal)?_c('hr',{staticClass:\"rule rule--horizontal\"}):_vm._e(),_c('div',{staticClass:\"details-wrapper\",class:_vm.layoutStyles.detailsWrapper},[_c('div',{staticClass:\"detail-container\"},[_c('span',{staticClass:\"text-muted mb-0\"},[_vm._v(\"Goal:\")]),_c('span',{staticStyle:{\"margin-left\":\"7px\",\"margin-bottom\":\"0\"}},[_vm._v(_vm._s(this.campaignCard.goal))])]),_c('div',{staticClass:\"detail-container\"},[_c('span',{staticClass:\"text-muted mb-0\"},[_vm._v(\"Buying Type:\")]),_c('span',{staticStyle:{\"margin-left\":\"7px\",\"margin-bottom\":\"0\"}},[_vm._v(_vm._s(this.campaignCard.buyingType))])]),_c('div',{staticClass:\"detail-container\"},[_c('span',{staticClass:\"text-muted mb-0\"},[_vm._v(\"Platform:\")]),_c('span',{staticStyle:{\"margin-left\":\"7px\",\"margin-bottom\":\"0\"}},[_vm._v(_vm._s(this.campaignCard.platform))])])])])])])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","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!./ViewRate.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!./ViewRate.vue?vue&type=script&lang=js\"","<template>\n  <section class=\"h-100\">\n    <b-card\n      no-body\n      class=\"h-100 mb-0\"\n    >\n      <b-row>\n        <b-col>\n          <div class=\"circle-container px-2 pt-2 mx-auto\">\n            <svg\n              class=\"progress-ring\"\n              width=\"100%\"\n              height=\"100%\"\n              viewBox=\"0 0 200 200\"\n            >\n              <defs>\n                <linearGradient\n                  id=\"gradient-second\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"100%\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    style=\"stop-color: #8000ff; stop-opacity: 1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    style=\"stop-color: #b266ff; stop-opacity: 1\"\n                  />\n                </linearGradient>\n              </defs>\n              <defs>\n                <linearGradient\n                  id=\"gradient-first\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"100%\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    style=\"stop-color: #31c17a; stop-opacity: 1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    style=\"stop-color: #69f0ae; stop-opacity: 1\"\n                  />\n                </linearGradient>\n              </defs>\n              <defs>\n                <linearGradient\n                  id=\"gradient-third\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"100%\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    style=\"stop-color: #4ba0e4; stop-opacity: 1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    style=\"stop-color: #64d8fa; stop-opacity: 1\"\n                  />\n                </linearGradient>\n              </defs>\n              <defs>\n                <linearGradient\n                  id=\"gradient-fourth\"\n                  x1=\"0%\"\n                  y1=\"0%\"\n                  x2=\"100%\"\n                >\n                  <stop\n                    offset=\"0%\"\n                    style=\"stop-color: #e97f01; stop-opacity: 1\"\n                  />\n                  <stop\n                    offset=\"100%\"\n                    style=\"stop-color: #feb500; stop-opacity: 1\"\n                  />\n                </linearGradient>\n              </defs>\n\n              <circle\n                class=\"progress-ring__circle-outer\"\n                stroke=\"url(#gradient-fourth)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"92\"\n                cx=\"100\"\n                cy=\"100\"\n                :style=\"{\n                  strokeDasharray: 2* Math.PI * 92,\n                  strokeDashoffset: 2* Math.PI * 92 * (1-(viewRateCard.videoViewsP25 || 0) / 100),\n                }\"\n              />\n              <circle\n                class=\"progress-ring__circle--thin\"\n                stroke=\"#a0a0ff\"\n                stroke-width=\"2\"\n                fill=\"transparent\"\n                r=\"92\"\n                cx=\"100\"\n                cy=\"100\"\n              />\n\n              <circle\n                class=\"progress-ring__circle--thin\"\n                stroke=\"#a0a0ff\"\n                stroke-width=\"2\"\n                fill=\"transparent\"\n                r=\"77\"\n                cx=\"100\"\n                cy=\"100\"\n              />\n              <circle\n                class=\"progress-ring__circle-outer\"\n                stroke=\"url(#gradient-third)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"77\"\n                cx=\"100\"\n                cy=\"100\"\n                :style=\"{\n                  strokeDasharray: 2* Math.PI *77,\n                  strokeDashoffset: 2* Math.PI *77 * (1-(viewRateCard.videoViewsP50 || 0) / 100),\n                }\"\n              />\n\n\n              <circle\n                class=\"progress-ring__circle--thin\"\n                stroke=\"url(#gradient)\"\n                stroke-width=\"2\"\n                fill=\"transparent\"\n                r=\"62\"\n                cx=\"100\"\n                cy=\"100\"\n              />\n              <circle\n                class=\"progress-ring__circle-outer\"\n                stroke=\"url(#gradient-second)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"62\"\n                cx=\"100\"\n                cy=\"100\"\n                :style=\"{\n                  strokeDasharray: 2* Math.PI *62,\n                  strokeDashoffset: 2* Math.PI *62* (1-(viewRateCard.videoViewsP75 || 0) / 100),\n                }\"\n              />\n\n\n              <circle\n                class=\"progress-ring__circle--thin\"\n                stroke=\"rgb(255, 145, 0)\"\n                stroke-width=\"2\"\n                fill=\"transparent\"\n                r=\"47\"\n                cx=\"100\"\n                cy=\"100\"\n              />\n              <circle\n                class=\"progress-ring__circle\"\n                stroke=\"url(#gradient-first)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"47\"\n                cx=\"100\"\n                cy=\"100\"\n                :style=\"{\n                  strokeDasharray: 2* Math.PI *47,\n                  strokeDashoffset: 2* Math.PI *47 * (1-(viewRateCard.videoViewsP100 || 0) / 100),\n                }\"\n              />\n\n            </svg>\n            <div class=\"circle-content\">\n              <span class=\"circle-label\">View Rate</span>\n              <span class=\"circle-value\">\n                %{{ viewRateCard.viewRate }}\n              </span>\n            </div>\n          </div>\n        </b-col>\n      </b-row>\n      <b-row>\n        <b-col lg=\"6\">\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-orange\" />\n            <span class=\"metric-label\">Per 25:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(viewRateCard.videoViewsP25) }}%\n            </span>\n          </div>\n        </b-col>\n        <b-col lg=\"6\">\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-blue\" />\n            <span class=\"metric-label\">Per 50:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(viewRateCard.videoViewsP50) }}%\n            </span>\n          </div>\n        </b-col>\n      </b-row>\n      <b-row class=\"my-2\">\n        <b-col lg=\"6\">\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-purple\" />\n            <span class=\"metric-label\">Per 75:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(viewRateCard.videoViewsP75) }}%\n            </span>\n          </div>\n        </b-col>\n\n        <b-col lg=\"6\">\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-green\" />\n            <span class=\"metric-label\">Per 100:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(viewRateCard.videoViewsP100) }}%\n            </span>\n          </div>\n        </b-col>\n      </b-row>\n    </b-card>\n  </section>\n</template>\n\n<script>\nimport { kFormatter } from \"@core/utils/filter\";\nexport default {\n  props: {\n    viewRateCard: {\n      type: Object,\n      required: true\n    }\n  },\n  data() {\n    return {\n      circumference: 2 * Math.PI * 55,\n      outerCircumference: 2 * Math.PI * 85,\n      outerData: {\n        percentage: this.viewRateCard.viewRate || 0,\n      },\n      sourceData: {\n        newUsers: 446857,\n        totalUsers: 10395460,\n        percentageOfNewUsers: 4.3,\n        outerMetric: 75,\n      },\n      pageMeta: {\n        type: 'awareness',\n      },\n      dataMap: {\n        awareness: {\n          total: { title: \"Total Users\", value: 10395460 },\n          metric: { title: \"New Users\", value: 446857 },\n          percentage: 4.3,\n          label: \"View Rate\",\n          icon: \"UserGroupIcon\",\n        },\n      },\n    };\n  },\n  computed: {\n    normalizedData() {\n      return {\n        percentage: this.viewRateCard.videoViewsP100 || 0,\n      };\n    },\n  },\n  methods: {\n    kFormatter,\n  },\n};\n</script>\n\n<style scoped>\n.metric-label {\n  font-size: 1.2rem;\n  letter-spacing: 0.02rem;\n}\n.metric-value {\n  margin-left: 5px;\n  font-weight: bold;\n  font-size: 1.4rem;\n}\n.circle-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: auto;\n  aspect-ratio: 1 / 1;\n  max-height: 300px;\n  position: relative;\n}\n\n.progress-ring__circle-bg {\n  opacity: 1;\n}\n.progress-ring__circle--thin {\n  stroke: #cccccc58;\n  opacity: 0.5;\n}\n\n.progress-ring__circle {\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n}\n\n.progress-ring__circle-outer {\n  transition: stroke-dashoffset 0.35s;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  stroke-linecap: round;\n}\n\n.circle-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  width: 120px;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n\n.circle-orange,\n.circle-blue,\n.circle-purple,\n.circle-green {\n  width: 1rem;\n  min-width: 1rem;\n  height: 1rem;\n  min-height: 1rem;\n  border-radius: 50%;\n  position: relative;\n  margin-right: 0.6rem;\n}\n\n.circle-orange {\n  border: 2px solid #feb500;\n}\n\n.circle-blue {\n  border: 2px solid #64d8fa;\n}\n\n.circle-purple {\n  border: 2px solid #5a5aff;\n}\n.circle-green {\n  border: 2px solid #31c17a;\n}\n\n.circle-label {\n  margin-top: 1.5rem;\n  font-size: 1.1rem;\n}\n.circle-value {\n  font-size: 2.5rem;\n}\n</style>\n","import { render, staticRenderFns } from \"./ViewRate.vue?vue&type=template&id=5fcca210&scoped=true\"\nimport script from \"./ViewRate.vue?vue&type=script&lang=js\"\nexport * from \"./ViewRate.vue?vue&type=script&lang=js\"\nimport style0 from \"./ViewRate.vue?vue&type=style&index=0&id=5fcca210&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  \"5fcca210\",\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('section',{staticClass:\"h-100\"},[_c('b-card',{staticClass:\"h-100 mb-0\",attrs:{\"no-body\":\"\"}},[_c('b-row',[_c('b-col',[_c('div',{staticClass:\"circle-container px-2 pt-2 mx-auto\"},[_c('svg',{staticClass:\"progress-ring\",attrs:{\"width\":\"100%\",\"height\":\"100%\",\"viewBox\":\"0 0 200 200\"}},[_c('defs',[_c('linearGradient',{attrs:{\"id\":\"gradient-second\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\"}},[_c('stop',{staticStyle:{\"stop-color\":\"#8000ff\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"0%\"}}),_c('stop',{staticStyle:{\"stop-color\":\"#b266ff\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"100%\"}})],1)],1),_c('defs',[_c('linearGradient',{attrs:{\"id\":\"gradient-first\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\"}},[_c('stop',{staticStyle:{\"stop-color\":\"#31c17a\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"0%\"}}),_c('stop',{staticStyle:{\"stop-color\":\"#69f0ae\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"100%\"}})],1)],1),_c('defs',[_c('linearGradient',{attrs:{\"id\":\"gradient-third\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\"}},[_c('stop',{staticStyle:{\"stop-color\":\"#4ba0e4\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"0%\"}}),_c('stop',{staticStyle:{\"stop-color\":\"#64d8fa\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"100%\"}})],1)],1),_c('defs',[_c('linearGradient',{attrs:{\"id\":\"gradient-fourth\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\"}},[_c('stop',{staticStyle:{\"stop-color\":\"#e97f01\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"0%\"}}),_c('stop',{staticStyle:{\"stop-color\":\"#feb500\",\"stop-opacity\":\"1\"},attrs:{\"offset\":\"100%\"}})],1)],1),_c('circle',{staticClass:\"progress-ring__circle-outer\",style:({\n                strokeDasharray: 2* Math.PI * 92,\n                strokeDashoffset: 2* Math.PI * 92 * (1-(_vm.viewRateCard.videoViewsP25 || 0) / 100),\n              }),attrs:{\"stroke\":\"url(#gradient-fourth)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"92\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle--thin\",attrs:{\"stroke\":\"#a0a0ff\",\"stroke-width\":\"2\",\"fill\":\"transparent\",\"r\":\"92\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle--thin\",attrs:{\"stroke\":\"#a0a0ff\",\"stroke-width\":\"2\",\"fill\":\"transparent\",\"r\":\"77\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle-outer\",style:({\n                strokeDasharray: 2* Math.PI *77,\n                strokeDashoffset: 2* Math.PI *77 * (1-(_vm.viewRateCard.videoViewsP50 || 0) / 100),\n              }),attrs:{\"stroke\":\"url(#gradient-third)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"77\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle--thin\",attrs:{\"stroke\":\"url(#gradient)\",\"stroke-width\":\"2\",\"fill\":\"transparent\",\"r\":\"62\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle-outer\",style:({\n                strokeDasharray: 2* Math.PI *62,\n                strokeDashoffset: 2* Math.PI *62* (1-(_vm.viewRateCard.videoViewsP75 || 0) / 100),\n              }),attrs:{\"stroke\":\"url(#gradient-second)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"62\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle--thin\",attrs:{\"stroke\":\"rgb(255, 145, 0)\",\"stroke-width\":\"2\",\"fill\":\"transparent\",\"r\":\"47\",\"cx\":\"100\",\"cy\":\"100\"}}),_c('circle',{staticClass:\"progress-ring__circle\",style:({\n                strokeDasharray: 2* Math.PI *47,\n                strokeDashoffset: 2* Math.PI *47 * (1-(_vm.viewRateCard.videoViewsP100 || 0) / 100),\n              }),attrs:{\"stroke\":\"url(#gradient-first)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"47\",\"cx\":\"100\",\"cy\":\"100\"}})]),_c('div',{staticClass:\"circle-content\"},[_c('span',{staticClass:\"circle-label\"},[_vm._v(\"View Rate\")]),_c('span',{staticClass:\"circle-value\"},[_vm._v(\" %\"+_vm._s(_vm.viewRateCard.viewRate)+\" \")])])])])],1),_c('b-row',[_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-orange\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(\"Per 25:\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(_vm.viewRateCard.videoViewsP25))+\"% \")])])]),_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-blue\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(\"Per 50:\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(_vm.viewRateCard.videoViewsP50))+\"% \")])])])],1),_c('b-row',{staticClass:\"my-2\"},[_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-purple\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(\"Per 75:\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(_vm.viewRateCard.videoViewsP75))+\"% \")])])]),_c('b-col',{attrs:{\"lg\":\"6\"}},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-green\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(\"Per 100:\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(_vm.viewRateCard.videoViewsP100))+\"% \")])])])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section>\n    <b-row>\n      <b-col>\n        <h3 class=\"font-weight-light\">\n          Metrics\n        </h3>\n      </b-col>\n      <b-col>\n        <div class=\"d-flex justify-content-end\">\n          <div\n              v-for=\"(category, index) in dataCategories\"\n              :key=\"`${category}-${index}-legend`\"\n              class=\"d-flex mr-1\"\n          >\n            <span\n                class=\"circle\"\n                :class=\"barColorClass[index]\"\n            />\n            <p>{{ legendMap[category] }}</p>\n          </div>\n        </div>\n      </b-col>\n    </b-row>\n\n    <b-row>\n      <b-col\n          v-for=\"(name, index) in metricNames\"\n          :key=\"index\"\n          xl=\"3\"\n          md=\"6\"\n          cols=\"12\"\n      >\n        <div class=\"d-flex align-items-center mt-1 justify-content-between\">\n          <div class=\"d-flex flex-column align-items-start metric-wrapper\">\n            <span class=\"d-flex align-items-center\">\n              <span class=\"metric-name\">{{ name }}</span>\n              <b-badge\n                  v-if=\"getPlatformBadge(name)\"\n                  pill\n                  variant=\"primary\"\n                  class=\"metric-name--badge\"\n              >\n                {{ getPlatformBadge(name) }}\n              </b-badge>\n            </span>\n            <span class=\"fixed-width metric-value\">\n              <span>{{ universalFormatter(getMetricValue(name, \"campaignBased\"), { kFormat: true, decimals: 0 }) }}</span>\n            </span>\n          </div>\n          <div class=\"custom-progress-wrapper\">\n            <template v-for=\"(category, index) in dataCategories\">\n              <div\n                  :key=\"`${category}-${index}-tooltip`\"\n                  v-b-tooltip.hover.v-primary\n                  class=\"custom-progress border-radius\"\n                  :title=\"getMetricValue(name, category)\"\n              >\n                <span\n                    class=\"bar\"\n                    :class=\"barColorClass[index]\"\n                    :style=\"{\n                    width:\n                      calculateWidth(\n                        getMetricValue(name, category),\n                        name\n                      ),\n                  }\"\n                />\n              </div>\n            </template>\n          </div>\n        </div>\n      </b-col>\n    </b-row>\n  </section>\n</template>\n\n<script>\nimport { universalFormatter } from \"@/@core/utils/utils\";\nexport default {\n  props: {\n    metricsData: {\n      type: Object,\n      required: true\n    }\n  },\n  data() {\n    return {\n      sourceData:{\n        \"campaignBased\": {\n          \"viewability-rate\": 14.88,\n          \"completion-rate\": 0.0,\n          \"view-rate\": 100,\n          \"interaction-rate\": 1.12\n        },\n        \"companyBased\": {\n          \"viewability-rate\": 18.52,\n          \"completion-rate\": 0.0,\n          \"view-rate\": 0,\n          \"interaction-rate\": 0.0\n        },\n        \"industryBased\": {\n          \"viewability-rate\": 22.55,\n          \"completion-rate\": 0.0,\n          \"view-rate\": 0.0,\n          \"interaction-rate\": 0.0\n        }\n      },\n      hoveredIndex: null,\n      barColorClass: [\"yellow-gradient\", \"blue-gradient\", \"purple-gradient\"],\n      legendMap : {\n        campaignBased: \"Campaign\",\n        companyBased: \"Company\",\n        industryBased: \"Industry\",\n      },\n      decimalMap: {\n        viewability: 0,\n      }\n    };\n  },\n  computed: {\n    metricNames() {\n      return Object.keys(this.metricsData.campaignBased).map(name => this.formatMetricName(name));\n    },\n    dataCategories() {\n      return Object.keys(this.metricsData);\n    },\n  },\n  methods: {\n    universalFormatter,\n    calculateWidth(value, name) {\n      const maxValue = this.calculateMaxValue(name);\n      if (maxValue === 0) return \"0%\";\n      let result = (value / maxValue) * 100;\n      return `${result}%`;\n    },\n    calculateMaxValue(name) {\n      const values = this.dataCategories\n          .map(category => this.getMetricValue(name, category))\n          .filter(value => value !== undefined);\n      return values.length > 0 ? Math.max(...values) : 1;\n    },\n    getMetricValue(formattedName, type) {\n      const camelCaseName = this.toCamelCase(formattedName);\n      return this.metricsData[type]?.[camelCaseName] ?? 0;\n    },\n    toCamelCase(str) {\n      return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());\n    },\n    formatMetricName(name) {\n      return name.replace(/-/g, ' ').replace(/\\b\\w/g, char => char.toUpperCase());\n    },\n    getPlatformBadge(name) {\n      if (!name.includes(\"-\")) {\n        return null;\n      }\n      const parts = name.split(\"-\");\n      if (parts.length < 2) {\n        return null;\n      }\n      const platform = parts[1];\n      switch (platform.toLowerCase()) {\n        case \"ios\":\n          return \"iOS\";\n        case \"android\":\n          return \"Android\";\n        default:\n          return null;\n      }\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.circle {\n  width: 1rem;\n  height: 1rem;\n  border-radius: 50%;\n  position: relative;\n  top: 0.2rem;\n  margin-right: 0.3rem;\n}\n\n.custom-progress {\n  overflow: hidden;\n  background: rgba(255, 255, 255, 0.05);\n  width: 100%;\n  height: 10px;\n  border-top-right-radius: 0.5rem;\n  border-bottom-right-radius: 0.5rem;\n  // margin-top: 0.5rem;\n  position: relative;\n  .bar {\n    height: 100% !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n    font-size: 0.75rem;\n    font-weight: bold;\n    border-top-right-radius: 0.3rem;\n    border-bottom-right-radius: 0.3rem;\n    position: absolute;\n  }\n  &-wrapper {\n    // d-flex flex-column justify-content-around ml-1 w-100\n    display: flex;\n    flex-direction: column;\n    justify-content: space-around;\n    margin-left: 10px;\n    width: 80%;\n    gap: 1rem;\n  }\n}\n\n.blue-gradient {\n  background: linear-gradient(90deg, #285574, #4faae7);\n}\n\n.purple-gradient {\n  background: linear-gradient(90deg, #4d0173, #9a01e5);\n}\n\n.yellow-gradient {\n  background: linear-gradient(90deg, #7e5801, #fcb001);\n}\n\nh3 {\n  white-space: nowrap;\n  margin-bottom: 0;\n}\n\n.text-nowrap {\n  white-space: nowrap;\n}\n\n.metric-wrapper {\n  width: fit-content;\n}\n\n.metric-value {\n  display: inline-block;\n  overflow: hidden;\n  white-space: nowrap;\n  font-size: 2rem;\n  line-height: normal;\n  font-weight: bold;\n  // text-overflow: ellipsis\n}\n\n.metric-name {\n  font-size: 1.2rem;\n  &--badge {\n    margin-left: 5px;\n  }\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!./Metrics.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!./Metrics.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Metrics.vue?vue&type=template&id=51354d05&scoped=true\"\nimport script from \"./Metrics.vue?vue&type=script&lang=js\"\nexport * from \"./Metrics.vue?vue&type=script&lang=js\"\nimport style0 from \"./Metrics.vue?vue&type=style&index=0&id=51354d05&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  \"51354d05\",\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('section',[_c('b-row',[_c('b-col',[_c('h3',{staticClass:\"font-weight-light\"},[_vm._v(\" Metrics \")])]),_c('b-col',[_c('div',{staticClass:\"d-flex justify-content-end\"},_vm._l((_vm.dataCategories),function(category,index){return _c('div',{key:(category + \"-\" + index + \"-legend\"),staticClass:\"d-flex mr-1\"},[_c('span',{staticClass:\"circle\",class:_vm.barColorClass[index]}),_c('p',[_vm._v(_vm._s(_vm.legendMap[category]))])])}),0)])],1),_c('b-row',_vm._l((_vm.metricNames),function(name,index){return _c('b-col',{key:index,attrs:{\"xl\":\"3\",\"md\":\"6\",\"cols\":\"12\"}},[_c('div',{staticClass:\"d-flex align-items-center mt-1 justify-content-between\"},[_c('div',{staticClass:\"d-flex flex-column align-items-start metric-wrapper\"},[_c('span',{staticClass:\"d-flex align-items-center\"},[_c('span',{staticClass:\"metric-name\"},[_vm._v(_vm._s(name))]),(_vm.getPlatformBadge(name))?_c('b-badge',{staticClass:\"metric-name--badge\",attrs:{\"pill\":\"\",\"variant\":\"primary\"}},[_vm._v(\" \"+_vm._s(_vm.getPlatformBadge(name))+\" \")]):_vm._e()],1),_c('span',{staticClass:\"fixed-width metric-value\"},[_c('span',[_vm._v(_vm._s(_vm.universalFormatter(_vm.getMetricValue(name, \"campaignBased\"), { kFormat: true, decimals: 0 })))])])]),_c('div',{staticClass:\"custom-progress-wrapper\"},[_vm._l((_vm.dataCategories),function(category,index){return [_c('div',{directives:[{name:\"b-tooltip\",rawName:\"v-b-tooltip.hover.v-primary\",modifiers:{\"hover\":true,\"v-primary\":true}}],key:(category + \"-\" + index + \"-tooltip\"),staticClass:\"custom-progress border-radius\",attrs:{\"title\":_vm.getMetricValue(name, category)}},[_c('span',{staticClass:\"bar\",class:_vm.barColorClass[index],style:({\n                  width:\n                    _vm.calculateWidth(\n                      _vm.getMetricValue(name, category),\n                      name\n                    ),\n                })})])]})],2)])])}),1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-card>\n    <div class=\"d-flex align-content-center\">\n      <h2>{{ selectedMetric.title }} Trend</h2>\n      <b-form-group class=\"mb-0 ml-2\">\n        <b-form-radio-group\n          v-model=\"selectedMetric\"\n          size=\"sm\"\n          button-variant=\"primary\"\n          :options=\"options\"\n          buttons\n        />\n      </b-form-group>\n      <ai-button\n        popover-name=\"viewability-click-trend\"\n        :request-params=\"requestParams\"\n      />\n    </div>\n    <!-- <vue-apex-charts\n      ref=\"chart\"\n      height=\"350\"\n      :options=\"chartOptions\"\n      :series=\"series\"\n    /> -->\n    <forecast-line-chart\n        :key=\"chartKey\"\n      :forecast-history-data=\"transformedHistoryData\"\n      :forecast-future-data=\"transformedForecastData\"\n      :forecast-settings=\"forecastSettings\"\n    />\n  </b-card>\n</template>\n\n<script>\nimport { BCard, BButton, BPopover, VBTooltip } from \"bootstrap-vue\";\nimport VueApexCharts from \"vue-apexcharts\";\nimport aiIcon from \"@/assets/images/uploads/highlights-ai-icon.svg\";\nimport forecastLineChart from \"@/views/ui/adin-d3/ForecastLineChart.vue\";\nimport AiButton from \"@/views/ui/ai-button/Index.vue\";\n\nexport default {\n  components: {\n    BCard,\n    VueApexCharts,\n    BButton,\n    BPopover,\n    forecastLineChart,\n    AiButton,\n  },\n  directives: {\n    \"b-tooltip\": VBTooltip,\n  },\n  props: {\n    data: {\n      type: Object,\n      required: true,\n    },\n    filterParams: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      chartKey: 0,\n      selectedMetric: {\n        dataKey: \"clicks\",\n        title: \"Clicks\",\n        yAxis: {\n          left: \"Clicks\",\n        },\n      },\n      options: [\n        {\n          text: \"Clicks\",\n          value: {\n            dataKey: \"clicks\",\n            title: \"Clicks\",\n            yAxis: {\n              left: \"Clicks\",\n            },\n          },\n        },\n        {\n          text: \"Interaction\",\n          value: {\n            title: \"Interaction\",\n            dataKey: \"viewability\",\n            yAxis: {\n              left: \"interaction\",\n            },\n          },\n        },\n      ],\n      series: [],\n      forecastSettings: {\n        width: 1200,\n        height: 350,\n        margin: { top: 70, right: 70, bottom: 50, left: 80 },\n        chartTypes: {\n          lineChartEnabled: false,\n          stepAreaChartEnabled: false,\n          basisAreaChartEnabled: true,\n          barChartEnabled: false,\n        },\n        colors: {\n          upperLineColor: \"#65A6F5\",\n          lowerLineColor: \"#65A6F5\",\n          lineColors: [],\n          forecastLineColor: \"white\",\n          forecastAreaColor: \"#9126F0\",\n          barLineColor: \"#818BFF\",\n        },\n        textSettings: {\n          fontFamily: \"Montserrat, Helvetica, Arial, serif !important\",\n          fontWeight: \"400\",\n          fontSize: \"14px\",\n        },\n        meanLineSettings: {\n          meanLineColor: \"#FF5F5E\",\n          meanLineDataset: \"area\",\n          meanLineText: \"\",\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: false,\n          textFontSize: \"11px\",\n          axisColor: \"#959199\",\n          axisTitles: {\n            xAxis: {\n              xAxisTitle: \"Date\",\n              titlePosition: {\n                x: 70,\n              },\n              numberOfTicks: 8,\n            },\n            leftYAxis: {\n              labelEnabled: false,\n              label: \"Impression\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 90,\n              },\n            },\n            rightYAxis: {\n              labelEnabled: false,\n              label: \"Cost\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 70,\n              },\n            },\n          },\n        },\n        tooltipSettings: {\n          area: {\n            areaText: \"Score\",\n          }\n        },\n        legendSettings: {\n          textColor: \"white\",\n          legendNames: [\"Score\"],\n          legendColors: [\"#ffffff\"],\n        },\n        zoomOutIconSettings: {\n          iconColor: \"white\",\n          mouseOverColor: \"black\",\n        },\n        responsive: true,\n      },\n\n      startDate: null,\n      endDate: null,\n    };\n  },\n  computed: {\n    transformedHistoryData() {\n      let lineData = this.data[this.selectedMetric.dataKey].series[0].data.map((item) => item.y);\n      let dates = this.data[this.selectedMetric.dataKey].series[0].data.map((item) => item.x);\n\n      const formattedHistoryData = dates.map((date, index) => ({\n        date,\n        area: lineData[index],\n      }));\n\n      return formattedHistoryData;\n    },\n    transformedForecastData() {\n      const formattedForecastData = [];\n      return formattedForecastData;\n    },\n    requestParams() {\n      return {\n        brand_id: this.filterParams.brand.value,\n        adin_id: this.adinId,\n        start_date: this.startDate,\n        end_date: this.endDate,\n        metrics: \"creative\",\n      };\n    },\n  },\n  watch: {\n    data(newData) {\n      this.updateChart(newData);\n    },\n    selectedMetric:{\n      handler(newVal) {\n        this.chartKey++;\n        this.forecastSettings.tooltipSettings.area.areaText = newVal.title\n        this.forecastSettings.tooltipSettings.areaText = newVal.title\n        this.forecastSettings.meanLineSettings.meanLineText = `Avg. ${newVal.title}`;\n      },\n      immediate: true\n    },\n  },\n  mounted() {\n    this.updateChart(this.data[this.selectedMetric.dataKey]);\n  },\n  created() {\n    this.startDate = this.data[this.selectedMetric.dataKey].series[0].data[0].x;\n    this.endDate = this.data[this.selectedMetric.dataKey].series[0].data[this.data[this.selectedMetric.dataKey].series[0].data.length - 1].x;\n    if (this.filterParams.campaign.value === null) {\n      this.adinId = \"all\";\n    } else {\n      this.adinId = this.filterParams.campaign.value;\n    }\n  },\n  methods: {\n    updateChart(chartData) {\n      const chart = this.$refs.chart;\n      if (chart) {\n        chart.updateOptions({\n          series: [\n            {\n              name: \"Creative Score\",\n              data: chartData.data,\n            },\n          ],\n          // labels: chartData.labels,\n        });\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!./ViewabilityClickTrend.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!./ViewabilityClickTrend.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./ViewabilityClickTrend.vue?vue&type=template&id=7e6f7994\"\nimport script from \"./ViewabilityClickTrend.vue?vue&type=script&lang=js\"\nexport * from \"./ViewabilityClickTrend.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('b-card',[_c('div',{staticClass:\"d-flex align-content-center\"},[_c('h2',[_vm._v(_vm._s(_vm.selectedMetric.title)+\" Trend\")]),_c('b-form-group',{staticClass:\"mb-0 ml-2\"},[_c('b-form-radio-group',{attrs:{\"size\":\"sm\",\"button-variant\":\"primary\",\"options\":_vm.options,\"buttons\":\"\"},model:{value:(_vm.selectedMetric),callback:function ($$v) {_vm.selectedMetric=$$v},expression:\"selectedMetric\"}})],1),_c('ai-button',{attrs:{\"popover-name\":\"viewability-click-trend\",\"request-params\":_vm.requestParams}})],1),_c('forecast-line-chart',{key:_vm.chartKey,attrs:{\"forecast-history-data\":_vm.transformedHistoryData,\"forecast-future-data\":_vm.transformedForecastData,\"forecast-settings\":_vm.forecastSettings}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <b-card>\n    <div class=\"d-flex align-content-center\">\n      <h2>{{ selectedMetric.title }} Trend</h2>\n      <b-form-group class=\"mb-0 ml-2\">\n        <b-form-radio-group\n            v-model=\"selectedMetric\"\n            size=\"sm\"\n            button-variant=\"primary\"\n            :options=\"options\"\n            buttons\n        />\n      </b-form-group>\n      <ai-button\n          popover-name=\"video view-completion-trend\"\n          :request-params=\"requestParams\"\n      />\n    </div>\n    <!-- <vue-apex-charts\n      ref=\"chart\"\n      height=\"350\"\n      :options=\"chartOptions\"\n      :series=\"series\"\n    /> -->\n    <forecast-line-chart\n        :key=\"chartKey\"\n        :forecast-history-data=\"transformedHistoryData\"\n        :forecast-future-data=\"transformedForecastData\"\n        :forecast-settings=\"forecastSettings\"\n    />\n  </b-card>\n</template>\n\n<script>\nimport { BCard, BButton, BPopover, VBTooltip } from \"bootstrap-vue\";\nimport VueApexCharts from \"vue-apexcharts\";\nimport aiIcon from \"@/assets/images/uploads/highlights-ai-icon.svg\";\nimport forecastLineChart from \"@/views/ui/adin-d3/ForecastLineChart.vue\";\nimport AiButton from \"@/views/ui/ai-button/Index.vue\";\n\nexport default {\n  components: {\n    BCard,\n    VueApexCharts,\n    BButton,\n    BPopover,\n    forecastLineChart,\n    AiButton,\n  },\n  directives: {\n    \"b-tooltip\": VBTooltip,\n  },\n  props: {\n    data: {\n      type: Object,\n      required: true,\n    },\n    filterParams: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      chartKey: 0,\n      selectedMetric: {\n        dataKey: \"videoView\",\n        title: \"Video View\",\n        yAxis: {\n          left: \"Video View\",\n        },\n      },\n      options: [\n        {\n          text: \"Video View\",\n          value: {\n            title: \"Video View\",\n            dataKey: \"videoView\",\n            yAxis: {\n              left: \"Video View\",\n            },\n          },\n        },\n        {\n          text: \"Completion View\",\n          value: {\n            title: \"Completion View\",\n            dataKey: \"completionView\",\n            yAxis: {\n              left: \"Completion View\",\n            },\n          },\n        },\n      ],\n      series: [],\n      forecastSettings: {\n        width: 1200,\n        height: 350,\n        margin: { top: 70, right: 70, bottom: 50, left: 80 },\n        chartTypes: {\n          lineChartEnabled: false,\n          stepAreaChartEnabled: false,\n          basisAreaChartEnabled: true,\n          barChartEnabled: false,\n        },\n        colors: {\n          upperLineColor: \"#65A6F5\",\n          lowerLineColor: \"#65A6F5\",\n          lineColors: [],\n          forecastLineColor: \"white\",\n          forecastAreaColor: \"#9126F0\",\n          barLineColor: \"#818BFF\",\n        },\n        textSettings: {\n          fontFamily: \"Montserrat, Helvetica, Arial, serif !important\",\n          fontWeight: \"400\",\n          fontSize: \"14px\",\n        },\n        meanLineSettings: {\n          meanLineColor: \"#FF5F5E\",\n          meanLineDataset: \"area\",\n          meanLineText: \"\",\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: false,\n          textFontSize: \"11px\",\n          axisColor: \"#959199\",\n          axisTitles: {\n            xAxis: {\n              xAxisTitle: \"Date\",\n              titlePosition: {\n                x: 70,\n              },\n              numberOfTicks: 8,\n            },\n            leftYAxis: {\n              labelEnabled: false,\n              label: \"Impression\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 90,\n              },\n            },\n            rightYAxis: {\n              labelEnabled: false,\n              label: \"Cost\",\n              labelColor: \"#959199\",\n              titlePosition: {\n                x: 70,\n              },\n            },\n          },\n        },\n        tooltipSettings: {\n          area: {\n            areaText: 'asdfasdf',\n          },\n        },\n        legendSettings: {\n          textColor: \"white\",\n          legendNames: [\"Score\"],\n          legendColors: [\"#ffffff\"],\n        },\n        zoomOutIconSettings: {\n          iconColor: \"white\",\n          mouseOverColor: \"black\",\n        },\n        responsive: true,\n      },\n\n      startDate: null,\n      endDate: null,\n    };\n  },\n  computed: {\n    transformedHistoryData() {\n      let lineData = this.data[this.selectedMetric.dataKey].series[0].data.map((item) => item.y);\n      let dates = this.data[this.selectedMetric.dataKey].series[0].data.map((item) => item.x);\n\n      const formattedHistoryData = dates.map((date, index) => ({\n        date,\n        area: lineData[index],\n      }));\n\n      return formattedHistoryData;\n    },\n    transformedForecastData() {\n      const formattedForecastData = [];\n      return formattedForecastData;\n    },\n    requestParams() {\n      return {\n        brand_id: this.filterParams.brand.value,\n        adin_id: this.adinId,\n        start_date: this.startDate,\n        end_date: this.endDate,\n        metrics: \"creative\",\n      };\n    },\n  },\n  watch: {\n    data(newData) {\n      this.updateChart(newData);\n    },\n    selectedMetric:{\n      handler(newVal) {\n        this.chartKey++;\n        this.forecastSettings.tooltipSettings.area.areaText = newVal.title;\n        this.forecastSettings.tooltipSettings.areaText = newVal.title\n        if(newVal.title === \"Completion View\") {\n          this.forecastSettings.meanLineSettings.meanLineText = `Avg. Comp. View`;\n        } else {\n          this.forecastSettings.meanLineSettings.meanLineText = `Avg. ${newVal.title}`;\n        }      },\n      immediate: true\n    },\n  },\n  mounted() {\n    this.updateChart(this.data[this.selectedMetric.dataKey]);\n  },\n  created() {\n    this.startDate = this.data[this.selectedMetric.dataKey].series[0].data[0].x;\n    this.endDate = this.data[this.selectedMetric.dataKey].series[0].data[this.data[this.selectedMetric.dataKey].series[0].data.length - 1].x;\n    if (this.filterParams.campaign.value === null) {\n      this.adinId = \"all\";\n    } else {\n      this.adinId = this.filterParams.campaign.value;\n    }\n  },\n  methods: {\n    updateChart(chartData) {\n      const chart = this.$refs.chart;\n      if (chart) {\n        chart.updateOptions({\n          series: [\n            {\n              name: \"Creative Score\",\n              data: chartData.data,\n            },\n          ],\n          // labels: chartData.labels,\n        });\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!./VideoCompletionTrend.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!./VideoCompletionTrend.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./VideoCompletionTrend.vue?vue&type=template&id=122818c8\"\nimport script from \"./VideoCompletionTrend.vue?vue&type=script&lang=js\"\nexport * from \"./VideoCompletionTrend.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('b-card',[_c('div',{staticClass:\"d-flex align-content-center\"},[_c('h2',[_vm._v(_vm._s(_vm.selectedMetric.title)+\" Trend\")]),_c('b-form-group',{staticClass:\"mb-0 ml-2\"},[_c('b-form-radio-group',{attrs:{\"size\":\"sm\",\"button-variant\":\"primary\",\"options\":_vm.options,\"buttons\":\"\"},model:{value:(_vm.selectedMetric),callback:function ($$v) {_vm.selectedMetric=$$v},expression:\"selectedMetric\"}})],1),_c('ai-button',{attrs:{\"popover-name\":\"video view-completion-trend\",\"request-params\":_vm.requestParams}})],1),_c('forecast-line-chart',{key:_vm.chartKey,attrs:{\"forecast-history-data\":_vm.transformedHistoryData,\"forecast-future-data\":_vm.transformedForecastData,\"forecast-settings\":_vm.forecastSettings}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","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!./PerformanceByPublisher.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!./PerformanceByPublisher.vue?vue&type=script&lang=js\"","<template>\n  <section>\n    <table-enhancer\n      page-name=\"Creative Overview\"\n      table-name=\"Performance by Publishers\"\n      :table-data=\"data\"\n      :table-fields=\"fields\"\n      :filterable-columns=\"columns\"\n    />\n  </section>\n</template>\n\n<script>\nimport TableEnhancer from \"@/views/ui/TableEnhancer/Index.vue\"\nimport {universalFormatter} from \"@core/utils/utils\";\nexport default {\n  components: {\n    TableEnhancer,\n  },\n  props: {\n    data: {\n      type: Array,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      fields: [\n        { key: \"platform\", label: \"Performance by Publishers\", sortable: true },\n        { key: \"impressions\", label: \"Impressions\", sortable: true },\n        { key: \"viewableImpression\", label: \"Viewable Impression\", sortable: true },\n        { key: \"viewabilityRate\", label: \"Viewability Rate\", sortable: true, },\n        { key: \"videoView\", label: \"Video View\", sortable: true },\n        { key: \"viewRate\", label: \"View Rate\", sortable: true },\n        { key: \"completionRate\", label: \"Completion Rate\", sortable: true },\n        { key: \"interactionRate\", label: \"Interaction Rate\", sortable: true },\n        { key: \"clicks\", label: \"Clicks\", sortable: true },\n      ],\n      columns: [\n        \"platform\",\n      ],\n    };\n  },\n};\n</script>","import { render, staticRenderFns } from \"./PerformanceByPublisher.vue?vue&type=template&id=62e555a3\"\nimport script from \"./PerformanceByPublisher.vue?vue&type=script&lang=js\"\nexport * from \"./PerformanceByPublisher.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('section',[_c('table-enhancer',{attrs:{\"page-name\":\"Creative Overview\",\"table-name\":\"Performance by Publishers\",\"table-data\":_vm.data,\"table-fields\":_vm.fields,\"filterable-columns\":_vm.columns}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section>\n\n    <b-row>\n      <b-col>\n        <filtersV2\n          name=\"creativePage\"\n          :get-metrics=\"getMetrics\"\n        />\n      </b-col>\n    </b-row>\n\n    <loading v-if=\"isLoading\" />\n    <no-data-temp v-else-if=\"noData && !isLoading\" />\n    <span v-else-if=\"!noData && !isLoading && recData !== null\">\n          <b-row class=\"d-flex align-items-center justify-content-center\">\n      <h4 class=\"text-bold text-muted\">If there is no video usage on a page, the score will be 0.\n      </h4>\n    </b-row>\n      <b-row class=\"match-height\">\n        <b-col\n          xl=\"6\"\n          cols=\"12\"\n          class=\"mt-1\"\n        >\n          <div class=\"dashboard-container h-100 mb-1\">\n            <div class=\"budget-card\">\n              <budget-card\n                :campaign-card=\"recData.campaignCard\"\n                :is-horizontal=\"true\"\n              />\n            </div>\n            <div class=\"process\">\n              <process\n                :is-currency=\"false\"\n                :comparison-card=\"recData.viewableImpressionCard\"\n                :descriptions=\"processDescriptions\"\n                :only-cost=\"false\"\n                :page-meta=\"{ type: 'creative' }\"\n              />\n            </div>\n            <single-metric\n              class=\"metric-card\"\n              :metric-data=\"singleMetricData.videoViews\"\n            />\n            <single-metric\n              class=\"metric-card\"\n              :metric-data=\"singleMetricData.compViews\"\n            />\n            <single-metric\n              class=\"metric-card\"\n              :metric-data=\"singleMetricData.clicks\"\n            />\n          </div>\n        </b-col>\n        <b-col\n          xl=\"3\"\n          cols=\"6\"\n          class=\"mt-1\"\n        >\n          <view-rate :view-rate-card=\"recData.viewRateCard\" />\n        </b-col>\n\n        <b-col\n          xl=\"3\"\n          cols=\"6\"\n          class=\"mt-1\"\n        >\n          <creative-score\n            :score-data=\"recData.scoreCard\"\n            :page-meta=\"{type:'creative'}\"\n          />\n        </b-col>\n      </b-row>\n      <b-row class=\"match-height mt-2\">\n        <b-col>\n          <metric-bars :source-data=\"recData.metricsCard\" />\n        </b-col>\n      </b-row>\n\n      <b-row class=\"match-height mt-2\">\n        <b-col lg=\"6\">\n          <viewability-click-trend\n            :filter-params=\"filterParams\"\n            :data=\"recData.metricsTrendGraph\"\n          />\n        </b-col>\n\n        <b-col lg=\"6\">\n          <video-completion-trend\n            :filter-params=\"filterParams\"\n            :data=\"recData.viewsTrendGraph\"\n          />\n        </b-col>\n      </b-row>\n      <b-row>\n        <b-col lg=\"12\">\n          <performance-by-publisher :data=\"recData.performanceByPublishersCard\" />\n        </b-col>\n      </b-row>\n    </span>\n  </section>\n</template>\n\n<script>\nimport { BRow, BCol } from \"bootstrap-vue\";\nimport FiltersV2 from \"@/views/FiltersV2.vue\";\nimport Loading from \"@/views/Loading.vue\";\nimport noDataTemp from \"@/views/NoDataTemp.vue\";\nimport TotalCost from \"@/views/scores/creative/overview/TotalCost.vue\";\nimport ViewRate from \"@/views/scores/creative/overview/ViewRate.vue\";\nimport Metrics from \"@/views/scores/creative/overview/Metrics.vue\";\nimport Process from \"@/views/ui/media-components/CostProcess.vue\";\nimport CreativeScore from \"@/views/ui/media-components/ScoreCard.vue\";\nimport viewabilityClickTrend from \"@/views/scores/creative/overview/ViewabilityClickTrend.vue\";\nimport videoCompletionTrend from \"@/views/scores/creative/overview/VideoCompletionTrend.vue\";\nimport PerformanceByPublisher from \"@/views/scores/creative/overview/PerformanceByPublisher.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 MetricBars from \"@/views/ui/media-components/MetricBars.vue\";\n\nexport default {\n  components: {\n    SingleMetric, ConsiderationProcess, MetricBars,\n    BudgetCard,\n    BRow,\n    BCol,\n    FiltersV2,\n    Loading,\n    noDataTemp,\n    TotalCost, ViewRate, Metrics, Process, CreativeScore, viewabilityClickTrend,\n    videoCompletionTrend, PerformanceByPublisher\n  },\n  data() {\n    return {\n      recData: null,\n      noData: false,\n      isLoading: true,\n      filterParams: {},\n      processDescriptions: {\n        top: \"Viewable Impression\",\n        bottom: \"Impression\"\n      }\n    };\n  },\n  computed: {\n    singleMetricData() {\n      return {\n        videoViews: {\n          title: \"View\",\n          value: this.recData.viewCard?.videoView,\n          icon: \"EyeIcon\",\n        },\n        clicks: {\n          title: \"Click\",\n          value: this.recData.clicksCard?.clicks,\n          icon: \"MousePointerIcon\",\n        },\n        compViews: {\n          title: \"Comp.View\",\n          value: this.recData.completionViewCard?.completionView,\n          icon: \"CheckCircleIcon\",\n        },\n      }\n    }\n  },\n  created(){\n  },\n  methods: {\n    getMetrics (params) {\n      this.isLoading = true\n      this.filterParams = params\n      this.$http.get(\"creative/overview\", {\n        params: {\n          brand_id: params.brand.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.currKey = this.currKey + 1;\n      }).catch((e) => {\n            this.noData = true;\n      }).finally(() => {\n        this.isLoading = false;\n      })\n\n    }\n  }\n};\n</script>\n<style lang=\"scss\" scoped>\n@import \"@/views/scores/creative/overview/styles\";\n.dashboard-container{\n  @include horizontal-layout-container\n}\n\n::v-deep .metric-card .metric-card--value {\n  font-size: 2.2rem;\n}\n@media (max-width: 1500px) {\n  ::v-deep .metric-card .metric-card--value {\n    font-size: 1.4rem;\n  }\n}\n\n\n\n\n\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=200cc1b9&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=200cc1b9&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  \"200cc1b9\",\n  null\n  \n)\n\nexport default component.exports","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!./ViewRate.vue?vue&type=style&index=0&id=5fcca210&prod&scoped=true&lang=css\""],"sourceRoot":""}