{"version":3,"sources":["webpack:///./src/views/ui/media-components/MetricCircleCard.vue?7e78","webpack:///./src/views/ui/adin-d3/BubbleChart.vue?1d1f","webpack:///src/views/ui/adin-d3/BubbleChart.vue","webpack:///./src/views/ui/adin-d3/BubbleChart.vue?5fcf","webpack:///./src/views/ui/adin-d3/BubbleChart.vue","webpack:///./src/views/ui/media-components/MetricCircleCard.vue?c4c3","webpack:///src/views/ui/media-components/MetricCircleCard.vue","webpack:///./src/views/ui/media-components/MetricCircleCard.vue?0e67","webpack:///./src/views/ui/media-components/MetricCircleCard.vue"],"names":["props","bubbleChartData","type","Array","required","bubbleChartSettings","Object","default","margin","top","right","bottom","left","width","height","axisSettings","yAxisTickCount","axisLineColor","axisTickColor","xAxisCurrency","bubbleZoomOutFactor","legendSettings","textFontSize","legendColor","colors","bubbleColors","gridColor","gradianColors","responsive","mounted","drawChart","window","addEventListener","resizeChart","beforeDestroy","removeEventListener","methods","d3","$refs","chart","select","remove","containerWidth","clientWidth","containerHeight","tooltipTitles","innerWidth","innerHeight","data","svg","append","attr","defs","selectAll","offset","color","enter","d","chartGroup","axesGroup","maxDomainValue","size","z","domain","range","Math","min","x","max","nice","clamp","y","call","g","ticks","filter","t","join","tooltip","style","sort","a","b","group","on","event","html","publisher","universalFormatter","kFormat","pageY","pageX","order","maxTicks","floor","tickValues","tickFormat","decimals","isCurrency","seenFormatted","Set","uniqueTicks","formatted","has","add","text","legendColors","legend","i","component","_h","this","$createElement","_c","_self","ref","staticRenderFns","sourceData","pageMeta","circumference","PI","dataMap","awareness","total","title","value","totalUsers","metric","newUsers","percentage","percentageOfNewUsers","label","icon","consideration","app","totalEvents","installs","percentageOfInstalls","web","sessions","engagedSessions","percentageOfEngagedSessions","conversion","events","kFormatter","computed","normalizedData","platform","n","_vm","staticClass","attrs","staticStyle","strokeDasharray","strokeDashoffset","_v","_s"],"mappings":"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","file":"js/chunk-608e96a1.2269609e.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!./MetricCircleCard.vue?vue&type=style&index=0&id=4769bb9c&prod&scoped=true&lang=css\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('div',{ref:\"chart\"})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","     <template>\n          <div>\n               <div ref=\"chart\"></div>\n          </div>\n     </template>\n<script>\nimport chart from \"@/store/chart\";\nimport {universalFormatter} from \"@/@core/utils/utils\";\nimport * as d3 from \"d3\";\n\nexport default {\n     props: {\n          bubbleChartData: {\n               type: Array,\n               required: true\n          },\n          bubbleChartSettings: {\n               type: Object,\n               default: () => ({\n                    margin: { top: 20, right: 50, bottom: 60, left: 80 },\n                    width: 1000,\n                    height: 350,\n                    axisSettings: {\n                         yAxisTickCount: 3,\n                         axisLineColor: \"#6e6b7b\",\n                         axisTickColor: \"#FFFFFF\",\n                         xAxisCurrency: \"€\",\n                    },\n                    bubbleZoomOutFactor: 0.2,\n                    legendSettings: {\n                         textFontSize: \".5em\",\n                         legendColor: \"#FFFFFF\"\n                    },\n                    colors: {\n                         bubbleColors: [\"#818BFF\", \"#818BFF\", \"#818BFF\"],\n                         gridColor: \"#493E64\",\n                         gradianColors: [\"#1A454D\", \"#4D1249\"]\n                    },\n                    responsive: true,\n               })\n          }\n     },\n     mounted() {\n          this.drawChart();\n          if (this.bubbleChartSettings.responsive) {\n               window.addEventListener(\"resize\", this.resizeChart);\n          }\n     },\n     beforeDestroy() {\n          if (this.bubbleChartSettings.responsive) {\n               window.removeEventListener(\"resize\", this.resizeChart);\n          }\n     },\n     methods: {\n          resizeChart() {\n               d3.select(this.$refs.chart)\n                    .select(\"svg\")\n                    .remove(); // Mevcut grafiği temizle\n               this.drawChart(); // Grafiği yeniden çiz\n          },\n          drawChart() {\n               const containerWidth = this.$refs.chart.clientWidth; // Container'ın genişliğini al\n               const containerHeight = this.bubbleChartSettings.height; // Container'ın yüksekliği sabit\n\n               const {\n                    margin,\n                    width,\n                    height,\n                    axisSettings,\n                    legendSettings,\n                    bubbleZoomOutFactor,\n                    colors,\n                    tooltipTitles,\n               } = this.bubbleChartSettings;\n               const innerWidth = containerWidth - margin.left - margin.right;\n               const innerHeight = containerHeight - margin.top - margin.bottom;\n\n               const data = this.bubbleChartData;\n\n               d3.select(this.$refs.chart).select(\"svg\").remove();\n\n               const svg = d3\n                    .select(this.$refs.chart)\n                    .append(\"svg\")\n                    .attr(\"width\", containerWidth)\n                    .attr(\"height\", containerHeight)\n                    .attr(\"viewBox\", `0 0 ${containerWidth} ${containerHeight}`)\n                    .attr(\"preserveAspectRatio\", \"xMinYMin meet\") // Responsive davranış için\n                    .append(\"g\")\n\n               const defs = svg.append(\"defs\");\n\n               // Gradient tanımından SONRA ekleyin\n               defs\n                    .append(\"clipPath\") // Clip path oluştur\n                    .attr(\"id\", \"chart-clip\") // ID ver\n                    .append(\"rect\") // Kırpma alanını belirleyen dikdörtgen\n                    .attr(\"x\", 0)\n                    .attr(\"y\", 0)\n                    .attr(\"width\", innerWidth) // İç genişlik\n                    .attr(\"height\", innerHeight); // İç yükseklik\n\n               defs\n                    .append(\"linearGradient\")\n                    .attr(\"id\", \"background-gradient\")\n                    .attr(\"x1\", \"0%\")\n                    .attr(\"y1\", \"30%\")\n                    .attr(\"x2\", \"100%\")\n                    .attr(\"y2\", \"60%\")\n                    .selectAll(\"stop\")\n                    .data([\n                         { offset: \"0%\", color: colors.gradianColors[0] },\n                         { offset: \"50%\", color: \"rgba(0,0,0,0)\" },\n                         { offset: \"50%\", color: \"rgba(0,0,0,0)\" },\n                         { offset: \"100%\", color: colors.gradianColors[1] }\n                    ])\n                    .enter()\n                    .append(\"stop\")\n                    .attr(\"offset\", d => d.offset)\n                    .attr(\"stop-color\", d => d.color);\n\n               // Create two separate groups\n               const chartGroup = svg.append(\"g\")\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n                    .attr(\"clip-path\", \"url(#chart-clip)\");\n\n               const axesGroup = svg.append(\"g\")\n                    .attr(\"transform\", `translate(${margin.left},${margin.top})`);\n\n               // Apply the gradient as background\n               chartGroup\n                    .append(\"rect\")\n                    .attr(\"x\", 0)\n                    .attr(\"y\", 0)\n                    .attr(\"width\", innerWidth)\n                    .attr(\"height\", innerHeight)\n                    .attr(\"fill\", \"url(#background-gradient)\"); // Background gradient\n\n               const maxDomainValue = d3.max(data, d => d.size);\n               const z = d3\n                    .scaleSqrt()\n                    .domain([0, maxDomainValue])\n                    .range([\n                         20, // Daha küçük minimum boyut\n                         Math.min(60, Math.min(innerWidth, innerHeight) * bubbleZoomOutFactor * (containerWidth / 1000))\n                    ]);\n\n               const x = d3\n                    .scaleLinear()\n                    .domain([\n                         Math.max(0, d3.min(data, d => d.x - z(d.size))), // Eğer d3.min 0'dan küçükse, 0 kullanılır\n                         d3.max(data, d => d.x + z(d.size))              // Maksimum değer olduğu gibi alınır\n                    ])\n                    .range([0, innerWidth - margin.right])\n                    .nice()\n                    .clamp(true)\n\n\n               const y = d3\n                    .scaleLinear()\n                    .domain([\n                         Math.max(0, d3.min(data, d => d.y - z(d.size))) * 0.5,\n                         d3.max(data, d => d.y + z(d.size)) * 1.5\n                    ])\n                    .range([innerHeight - margin.bottom, 0])\n                    .nice()\n\n               const color = d3\n                    .scaleOrdinal()\n                    .domain([\"good\", \"average\", \"bad\"])\n                    .range(colors.bubbleColors);\n\n               // Grafiğin etrafına grid çerçevesi ekle\n               // svg.append(\"rect\")\n               //      .attr(\"x\", -margin.left)\n               //      .attr(\"y\", 0)\n               //      .attr(\"width\", innerWidth + margin.right)\n               //      .attr(\"height\", innerHeight + margin.bottom)\n               //      .attr(\"fill\", \"none\")\n               //      .attr(\"stroke\", colors.gridColor)\n               //      .attr(\"stroke-width\", 1);\n\n               // Grid oluştur\n               chartGroup.append(\"g\")\n                    .attr(\"stroke\", colors.gridColor)\n                    .attr(\"stroke-opacity\", 1)\n                    .call(g => g.append(\"g\")\n                         .selectAll(\"line\")\n                         .data(x.ticks().filter(t => t !== x.domain()[0]))\n                         .join(\"line\")\n                         .attr(\"x1\", d => 0.5 + x(d))\n                         .attr(\"x2\", d => 0.5 + x(d))\n                         .attr(\"y1\", 0)\n                         .attr(\"y2\", innerHeight));\n\n               const tooltip = d3\n                    .select(\"body\") // Tooltip'i body içine ekliyoruz\n                    .append(\"div\")\n                    .style(\"position\", \"absolute\")\n                    .style(\"background\", \"#2D1146\")\n                    .style(\"color\", \"white\")\n                    .style(\"border\", \"1px solid #ccc\")\n                    .style(\"padding\", \"5px\")\n                    .style(\"border-radius\", \"4px\")\n                    .style(\"pointer-events\", \"none\")\n                    .style(\"visibility\", \"hidden\")\n                    .style(\"font-size\", \"12px\")\n                    .style(\"z-index\", \"1000\");\n\n               function formatNumber(value) {\n                    const divisor =\n                         value >= 1e12 ? 1e12 :\n                              value >= 1e9 ? 1e9 :\n                                   value >= 1e6 ? 1e6 :\n                                        value >= 1e3 ? 1e3 : 1;\n\n                    const formattedValue = value / divisor;\n                    const suffix =\n                         value >= 1e12 ? \"T\" :\n                              value >= 1e9 ? \"B\" :\n                                   value >= 1e6 ? \"M\" :\n                                        value >= 1e3 ? \"K\" : \"\";\n\n                    // Remove .0 decimal for whole numbers\n                    return formattedValue % 1 === 0\n                         ? `${formattedValue}${suffix}`\n                         : `${formattedValue.toFixed(1)}${suffix}`;\n               }\n\n               // Baloncukları oluştur\n               var bubble = chartGroup\n                    .selectAll(\".bubble\")\n                    .data(\n                         data\n                              .filter(d => !(d.x === 0 && d.y === 0)) // x ve y ikisi de 0 değilse balonları filtrele\n                              .sort((a, b) => b.size - a.size) // Boyuta göre sıralama\n                    )\n                    .enter()\n                    .append(\"circle\")\n                    .attr(\"class\", function (d) {\n                         return \"bubble \" + d.group;\n                    })\n                    .attr(\"cx\", function (d) {\n                         return Math.max(27, x(d.x !== 0 ? d.x : 0)); // x sıfırsa, balonun biraz sağa kaymasını sağla\n                    })\n                    .attr(\"cy\", function (d) {\n                         return y(d.y !== 0 ? d.y : 0); // y sıfırsa grafikte yine de göster\n                    })\n                    .attr(\"r\", function (d) {\n                         return z(d.size);\n                    })\n                    .style(\"fill\", function (d) {\n                         return color(d.group);\n                    })\n                    .style(\"fill-opacity\", 1)\n                    .style(\"stroke\", \"#FFFFFF\") // Balon etrafına beyaz kenarlık\n                    .style(\"stroke-width\", 1.5)\n                    .style(\"stroke-opacity\", 1)\n                    .style(\"filter\", \"drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5))\")\n                    .on(\"mouseover\", function (event, d) {\n                         tooltip\n                              .html(\n                                   `<strong>${tooltipTitles.publisher}: </strong>${d.publisher}<br>\n             <strong>${tooltipTitles.x}: </strong>${axisSettings.xAxisCurrency}${universalFormatter(d.x, {kFormat: true})}<br>\n             <strong>${tooltipTitles.y}: </strong>${universalFormatter(d.y, {kFormat: true})}<br>\n             <strong>${tooltipTitles.size}: </strong>${axisSettings.xAxisCurrency}${universalFormatter(d.size, {kFormat: true})}\n            `\n                              )\n                              .style(\"visibility\", \"visible\");\n\n                         // Tüm balonları bulanık yap\n                         d3.selectAll(\".bubble\")\n                              .style(\"filter\", \"blur(4px)\") // Blur efekti\n                              .style(\"fill-opacity\", 0.5)\n                              .style(\"stroke-opacity\", 0.3);\n\n                         // Sadece üzerine gelinen balonun blur efektini kaldır\n                         d3.select(this)\n                              .style(\"filter\", \"drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.8))\") // Daha belirgin gölge\n                              .style(\"fill-opacity\", 1) // Tam görünür yap\n                              .style(\"stroke-opacity\", 1) // Kenarlığı da netleştir\n                              .style(\"stroke-width\", 1.5);\n                    })\n                    .on(\"mousemove\", (event) => {\n                         tooltip\n                              .style(\"top\", `${event.pageY + 10}px`)\n                              .style(\"left\", `${event.pageX + 10}px`);\n                    })\n                    .on(\"mouseout\", function () {\n                         tooltip.style(\"visibility\", \"hidden\");\n\n                         // Blur efektlerini ve opaklıkları sıfırla\n                         d3.selectAll(\".bubble\")\n                              .style(\"filter\", \"drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5))\") // Normal gölgeye geri dön\n                              .style(\"fill-opacity\", 1)\n                              .style(\"stroke-opacity\", 1)\n                              .style(\"stroke-width\", 1.5);\n                    });\n\n               // Balonları sıralayarak yeniden düzenle\n               axesGroup.selectAll(\".bubble\")\n                    .sort((a, b) => b.size - a.size) // Büyükten küçüğe sıralama\n                    .order(); // SVG içinde sıralama\n\n               // Minimum tahmini tick genişliği (px cinsinden, yazının genişliğine göre değişebilir)\n               const estimatedTickWidth = 100;\n               // Maksimum gösterilebilecek tick sayısını hesapla\n               const maxTicks = Math.floor(innerWidth / estimatedTickWidth);\n\n               // Eksenleri oluştur\n               const xAxis = axesGroup\n                    .append(\"g\")\n                    .attr(\"transform\", \"translate(0,\" + innerHeight + \")\")\n                    .call(\n                         d3\n                              .axisBottom(x)\n                              .ticks(maxTicks)\n                              //! Need a way to enable/disabled currency for axes\n                              .tickFormat(d => universalFormatter(d, {kFormat: true, decimals: 0 , isCurrency: axisSettings.xAxisCurrency}))\n                    )\n                    .call(g => g.select(\".domain\").remove())\n                    .call(g =>\n                         g\n                              .selectAll(\".tick text\")\n                              .style(\"fill\", axisSettings.axisTickColor)\n                              .style(\"font-size\", \"12px\")\n                              .style(\"font-weight\", \"400\")\n                              .style(\"font-family\", \"'Montserrat', Helvetica, Arial, serif\")\n                    )\n                    .call(g =>\n                         g.selectAll(\".tick line\") // Tüm tick çizgilerini seç\n                              .style(\"stroke\", \"none\") // Çizgi rengini kaldır\n                    );\n\n               // Generate original ticks and filter duplicates based on your custom format\n               const tickValues = y.ticks(axisSettings.yAxisTickCount);\n               const seenFormatted = new Set();\n\n               const uniqueTicks = tickValues.filter(d => {\n                    const formatted = universalFormatter(d, {kFormat: true});\n                    return seenFormatted.has(formatted) ? false : seenFormatted.add(formatted);\n               });\n\n               // Create axis with filtered unique ticks using your custom formatter\n               const yAxis = axesGroup\n                    .append(\"g\")\n                    .call(\n                         d3.axisLeft(y)\n                              .tickValues(uniqueTicks)\n                              .tickFormat(d => universalFormatter(d, {kFormat: true}))\n                    )\n                    .call(g => g.select(\".domain\").remove())\n                    .call(g =>\n                         g.selectAll(\".tick text\")\n                              .style(\"fill\", axisSettings.axisTickColor)\n                              .style(\"font-size\", \"12px\")\n                              .style(\"font-weight\", \"400\")\n                              .style(\"font-family\", \"'Montserrat', Helvetica, Arial, serif\")\n                    )\n                    .call(g =>\n                         g.selectAll(\".tick line\")\n                              .style(\"stroke\", \"none\")\n                    );\n\n\n               // X ekseni\n               axesGroup.append(\"text\")\n                    .attr(\"class\", \"x-axis-title\")\n                    .attr(\"text-anchor\", \"middle\")\n                    .attr(\"x\", innerWidth / 2)\n                    .attr(\"y\", innerHeight + margin.bottom)\n                    .text(`${tooltipTitles.x} (${axisSettings.xAxisCurrency})`)\n                    .attr(\"fill\", \"#B2B2BD\");\n\n               // Y ekseni\n               axesGroup.append(\"text\")\n                    .attr(\"class\", \"y-axis-title\")\n                    .attr(\"text-anchor\", \"middle\")\n                    .attr(\"transform\", `rotate(-90)`)\n                    .attr(\"x\", -innerHeight / 2)\n                    .attr(\"y\", -margin.left + 20)\n                    .text(`${tooltipTitles.y}`)\n                    .attr(\"fill\", \"#B2B2BD\")\n\n\n               // Legend verileri ve renkler\n               const legendData = [\"Good\", \"Bad\"];\n               const legendColors = [\"#59BA55\", \"#FC1369\"]; // Good için yeşil, Bad için kırmızı (örnek renkler)\n\n               // Legend (açıklama) yerleşimi (yatay olarak hizalanmış)\n               var legend = axesGroup.selectAll(\".legend\")\n                    .data(legendData)\n                    .enter().append(\"g\")\n                    .attr(\"class\", \"legend\")\n                    .attr(\"transform\", function (d, i) {\n                         return \"translate(\" + ((innerWidth - 150) + (i * 100)) + \", -20)\";\n                    });\n\n               // Renk topları için legendColors dizisi kullanımı\n               legend.append(\"circle\")\n                    .attr(\"cx\", 0)\n                    .attr(\"cy\", 10)\n                    .attr(\"r\", 7)\n                    .style(\"fill\", function (d, i) {\n                         return legendColors[i]; // Renkler legendColors dizisinden alınır\n                    });\n\n               // Metinler için\n               legend.append(\"text\")\n                    .attr(\"x\", 15)\n                    .attr(\"y\", 6)\n                    .attr(\"dy\", legendSettings.textFontSize)\n                    .style(\"text-anchor\", \"start\")\n                    .style(\"fill\", legendSettings.legendColor)\n                    .text(function (d) {\n                         return d;\n                    });\n          }\n     }\n};\n</script>","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=1ba334b5\"\nimport script from \"./BubbleChart.vue?vue&type=script&lang=js\"\nexport * from \"./BubbleChart.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',{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 150 150\"}},[_c('defs',[_c('linearGradient',{attrs:{\"id\":\"gradient\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\",\"y2\":\"0%\"}},[_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-thin\",\"x1\":\"0%\",\"y1\":\"0%\",\"x2\":\"100%\",\"y2\":\"0%\"}},[_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-bg\",attrs:{\"stroke\":\"url(#gradient)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"70\",\"cx\":\"75\",\"cy\":\"75\"}}),_c('circle',{staticClass:\"progress-ring__circle--thin\",attrs:{\"stroke\":\"rgb(255, 145,\\n              0)\",\"stroke-width\":\"2\",\"fill\":\"transparent\",\"r\":\"55\",\"cx\":\"75\",\"cy\":\"75\"}}),_c('circle',{staticClass:\"progress-ring__circle\",style:({\n                strokeDasharray: _vm.circumference,\n                strokeDashoffset: _vm.circumference * (1 - this.normalizedData.percentage / 100),\n              }),attrs:{\"stroke\":\"url(#gradient-thin)\",\"stroke-width\":\"5\",\"fill\":\"transparent\",\"r\":\"55\",\"cx\":\"75\",\"cy\":\"75\"}})]),_c('div',{staticClass:\"circle-content\"},[_c('span',{staticClass:\"circle-label\"},[_vm._v(_vm._s(this.normalizedData.label))]),_c('feather-icon',{attrs:{\"icon\":this.normalizedData.icon,\"size\":\"55\"}})],1)])])],1),_c('b-row',{staticClass:\"px-2 pb-2 my-auto\"},[_c('b-col',{staticClass:\"mt-1\"},[_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-orange\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(_vm._s(this.normalizedData.metric.title)+\":\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(this.normalizedData.metric.value))+\" \")])]),_c('div',{staticClass:\"d-flex justify-content-center align-items-center\"},[_c('span',{staticClass:\"circle-blue\"}),_c('span',{staticClass:\"metric-label\"},[_vm._v(_vm._s(this.normalizedData.total.title)+\":\")]),_c('span',{staticClass:\"metric-value\"},[_vm._v(\" \"+_vm._s(_vm.kFormatter(this.normalizedData.total.value))+\" \")])])])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <section class=\"h-100\">\n    <b-card no-body class=\"h-100 mb-0\">\n      <b-row>\n        <b-col>\n          <div class=\"circle-container px-2 pt-2 mx-auto\">\n            <svg class=\"progress-ring\" width=\"100%\" height=\"100%\" viewBox=\"0 0 150 150\">\n              <defs>\n                <linearGradient id=\"gradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" style=\"stop-color: #4ba0e4; stop-opacity: 1\" />\n                  <stop offset=\"100%\" style=\"stop-color: #64d8fa; stop-opacity: 1\" />\n                </linearGradient>\n              </defs>\n              <defs>\n                <linearGradient id=\"gradient-thin\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\n                  <stop offset=\"0%\" style=\"stop-color: #e97f01; stop-opacity: 1\" />\n                  <stop offset=\"100%\" style=\"stop-color: #feb500; stop-opacity: 1\" />\n                </linearGradient>\n              </defs>\n              <circle\n                class=\"progress-ring__circle-bg\"\n                stroke=\"url(#gradient)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"70\"\n                cx=\"75\"\n                cy=\"75\"\n              />\n              <circle\n                class=\"progress-ring__circle--thin\"\n                stroke=\"rgb(255, 145,\n                0)\"\n                stroke-width=\"2\"\n                fill=\"transparent\"\n                r=\"55\"\n                cx=\"75\"\n                cy=\"75\"\n              />\n              <circle\n                class=\"progress-ring__circle\"\n                stroke=\"url(#gradient-thin)\"\n                stroke-width=\"5\"\n                fill=\"transparent\"\n                r=\"55\"\n                cx=\"75\"\n                cy=\"75\"\n                :style=\"{\n                  strokeDasharray: circumference,\n                  strokeDashoffset: circumference * (1 - this.normalizedData.percentage / 100),\n                }\"\n              />\n            </svg>\n            <div class=\"circle-content\">\n              <span class=\"circle-label\">{{ this.normalizedData.label }}</span>\n              <feather-icon :icon=\"this.normalizedData.icon\" size=\"55\" />\n            </div>\n          </div>\n        </b-col>\n      </b-row>\n      <b-row class=\"px-2 pb-2 my-auto\">\n        <b-col class=\"mt-1\">\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-orange\"></span>\n            <span class=\"metric-label\">{{ this.normalizedData.metric.title }}:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(this.normalizedData.metric.value) }}\n            </span>\n          </div>\n          <div\n            class=\"d-flex justify-content-center align-items-center\"\n          >\n            <span class=\"circle-blue\"></span>\n            <span class=\"metric-label\">{{ this.normalizedData.total.title }}:</span>\n            <span class=\"metric-value\">\n              {{ kFormatter(this.normalizedData.total.value) }}\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    sourceData: {\n      type: Object,\n      required: true,\n    },\n    pageMeta: {\n      type: Object,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      circumference: 2 * Math.PI * 55,\n      dataMap: {\n        awareness: {\n          total: { title: \"Total Users\", value: this.sourceData.totalUsers },\n          metric: { title: \"New Users\", value: this.sourceData.newUsers },\n          percentage: this.sourceData.percentageOfNewUsers,\n          label: \"Users\",\n          icon: \"UserGroupIcon\",\n        },\n        consideration: {\n          app: {\n            total: { title: \"Total Events\", value: this.sourceData.totalEvents },\n            metric: { title: \"Installs\", value: this.sourceData.installs },\n            percentage: this.sourceData.percentageOfInstalls,\n            label: \"Install\",\n            icon: \"DownloadIcon\",\n          },\n          web: {\n            total: { title: \"Sessions\", value: this.sourceData.sessions },\n            metric: { title: \"Engaged Sessions\", value: this.sourceData.engagedSessions },\n            percentage: this.sourceData.percentageOfEngagedSessions,\n            label: \"Session\",\n            icon: \"LogInIcon\",\n          },\n        },\n        conversion: {\n          app: {\n            total: { title: \"Total Events\", value: this.sourceData.events },\n            metric: { title: \"Installs\", value: this.sourceData.installs },\n            percentage: this.sourceData.percentageOfInstalls,\n            label: \"Install\",\n            icon: \"DownloadIcon\",\n          },\n          web: {\n            total: { title: \"User Conversion\", value: this.sourceData.totalUsers },\n            metric: { title: \"New User Conversion\", value: this.sourceData.newUsers },\n            percentage: this.sourceData.percentageOfNewUsers,\n            label: \"Session\",\n            icon: \"LogInIcon\",\n          },\n        },\n      },\n    };\n  },\n  methods: {\n    kFormatter,\n  },\n  computed: {\n    normalizedData() {\n      const { type, platform } = this.pageMeta;\n\n      const normalizedData = platform ? this.dataMap[type][platform] : this.dataMap[type];\n\n      return normalizedData;\n    },\n  },\n};\n</script>\n\n<style scoped>\n.metric-label {\n  font-size: 1.2rem;\n  letter-spacing: 0.02rem;\n  /* text-wrap: nowrap; */\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  /* max-height: 100px; */\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.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  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-label {\n  font-size: 1.5rem;\n  margin-top: 1rem;\n  margin-bottom: 0.3rem;\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!./MetricCircleCard.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!./MetricCircleCard.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./MetricCircleCard.vue?vue&type=template&id=4769bb9c&scoped=true\"\nimport script from \"./MetricCircleCard.vue?vue&type=script&lang=js\"\nexport * from \"./MetricCircleCard.vue?vue&type=script&lang=js\"\nimport style0 from \"./MetricCircleCard.vue?vue&type=style&index=0&id=4769bb9c&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  \"4769bb9c\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}