{"version":3,"sources":["webpack:///./src/components/dashboards/comision_chargeback.vue","webpack:///src/components/dashboards/comision_chargeback.vue","webpack:///./src/components/dashboards/comision_chargeback.vue?7b33","webpack:///./src/components/dashboards/comision_chargeback.vue?99bf","webpack:///./src/components/dashboards/comision_chargeback.vue?1d55","webpack:///./node_modules/@amcharts/amcharts4/.internal/themes/material.js"],"names":["attrs","processing","_e","staticStyle","_v","ref","_c","directives","rawName","value","_vm","render","am4core","props","data","chartData","chart","headers","text","computed","isChartEmpty","methods","mapActions","generateChart","categoryAxis","valueAxis","series","hoverState","paretoValueAxis","paretoSeries","this","console","refresh","CorteId","TipoProductoList","Chart","AsociadoId","apiDashboard","getChart","then","_this","catch","getName","watch","corteId","tipoProducto","mounted","beforeDestroy","component","staticRenderFns","theme","object","list","minLightness","maxLightness","reuse","background","cornerRadiusTopLeft","cornerRadiusTopRight","cornerRadiusBottomLeft","cornerRadiusBottomRight","animationDuration"],"mappings":"+MAAyH,EAAK,W,IAAuCA,EAAM,K,EAAC,EAAK,S,OAAI,UAAE,YAAOC,OAAoCD,MAAM,CAAC,cAAoC,+BAAG,MAAKE,CAAuBC,UAAyC,wBAAE,MAAMC,CAA2CC,cAAa,GAACF,MAAW,aAAiB,iBAAG,YAAUG,CAAcC,YAAY,mB,CAAaC,KAAO,8BAAS,S,IAACC,U,YAAsD,CAAgC,iBAAQ,QAAQ,EAAE,Q,WAAQ,EAAU,KAAM,OAAG,iBAAIC,OAAO,6BACpoB,2CAGD,MAASC,C,2OC0BTC,OAAiBA,QAEF,OACfC,iCACAC,gBACA,OACAb,cACAc,aACAC,WACAC,SACA,CAAAC,eAAAT,iBACA,CAAAS,gBAAAT,kBACA,CAAAS,aAAAT,kBAIAU,UACAC,wBACA,mCAGAC,yCACAC,iEACAC,0BACA,YACA,qBAGA,IACA,wCACAP,oBACAA,4BACAA,2CACAA,wBAEAA,SAGA,iCACA,yBACA,uBACAA,yBACAA,4BAIA,+BACAQ,EAAaA,WAAWA,SAAWA,QACnCA,EAAaA,SAASA,KAAKA,SAASA,SAAWA,EAC/CA,EAAaA,SAASA,gBAAkBA,GACxCA,EAAaA,QAAQA,UAAWA,EAEhC,+BACAC,EAAUA,SAASA,SAAWA,GAC9BA,EAAUA,IAAMA,EAChBA,EAAUA,sBAAuBA,EAGjC,gCACAC,EAAOA,wBAAyBA,EAChCA,EAAOA,KAAOA,WACdA,EAAOA,WAAWA,OAASA,WAC3BA,EAAOA,WAAWA,UAAYA,QAC9BA,EAAOA,YAAcA,iCACrBA,EAAOA,QAAQA,SAASA,YAAcA,EACtCA,EAAOA,SAAUA,EAEjBA,EAAOA,QAAQA,mBAAqBA,WAEpCA,EAAOA,QAAQA,SAASA,OAAOA,oBAAsBA,GACrDA,EAAOA,QAAQA,SAASA,OAAOA,qBAAuBA,GACtDA,EAAOA,QAAQA,SAASA,OAAOA,YAAcA,GAG7C,uDACAC,EAAWA,WAAWA,oBAAsBA,EAC5CA,EAAWA,WAAWA,qBAAuBA,EAC7CA,EAAWA,WAAWA,YAAcA,EAOpC,+BACAC,EAAgBA,SAASA,UAAWA,EACpCA,EAAgBA,IAAMA,EACtBA,EAAgBA,IAAMA,IACtBA,EAAgBA,cAAeA,EAC/BA,EAAgBA,SAASA,KAAKA,SAASA,UAAWA,EAClDA,EAAgBA,gBAAkBA,IAAIA,OACtCA,EAAgBA,gBAAgBA,aAAeA,OAC/CA,EAAgBA,sBAAuBA,EAEvC,gCACAC,EAAaA,WAAWA,gBAAkBA,kBAC1CA,EAAaA,WAAWA,OAASA,SACjCA,EAAaA,WAAWA,UAAYA,QACpCA,EAAaA,MAAQA,EACrBA,EAAaA,YAAcA,kEAC3BA,EAAaA,KAAOA,eACpBA,EAAaA,QAAQA,KAAKA,IAAIA,QAC9BA,EAAaA,YAAcA,EAC3BA,EAAaA,QAASA,IAAIA,QAA4BA,OAAOA,yBAC7DA,EAAaA,cAAgBA,GAG7Bb,EAAMA,OAASA,IAAIA,OACnBA,EAAMA,OAAOA,SAAWA,OAGxBc,KAAKd,MAAQA,EAIb,SACAe,iBAGAC,mBAAA,WACA,iBACA,mBACA,OACAC,qBACAC,+CACAC,2BACAC,4CAGAC,OACAC,YACAC,kBACAC,mBACAA,6BACAA,mBAEAC,mBACAD,cACAA,qBAIAE,0BACA,kCAGAC,OACAC,mBACA,gBAEAC,wBACA,iBAGAC,mBACA,gBAEAC,yBACA,YACA,uBC7L2W,I,wBCQvWC,EAAY,eACd,EACA,EACAC,GACA,EACA,KACA,KACA,MAIa,aAAAD,E,6CCnBf,W,kGCEIE,EAAQ,SAAUC,GACd,eAAGA,EAAQ,cACXA,EAAOC,KAAO,CACV,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,WACN,eAAM,YAEVD,EAAOE,aAAe,GACtBF,EAAOG,aAAe,GACtBH,EAAOI,OAAQ,GAEf,eAAGJ,EAAQ,kBACXA,EAAOK,WAAWC,oBAAsB,GACxCN,EAAOK,WAAWE,qBAAuB,GACzCP,EAAOK,WAAWG,uBAAyB,GAC3CR,EAAOK,WAAWI,wBAA0B,IAE5C,eAAGT,EAAQ,aACXA,EAAOU,kBAAoB,MAGpB,K","file":"js/chunk-50c6931b.cb725252.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('v-card',{staticClass:\"ma-2\",attrs:{\"outlined\":\"\"}},[_c('v-card-text',[_c('v-row',[_c('v-col',{attrs:{\"xs\":\"12\"}},[(_vm.processing)?_c('v-progress-linear',{attrs:{\"indeterminate\":\"\",\"color\":\"primary\"}}):_vm._e(),_c('v-subheader',{staticStyle:{\"font-size\":\"16px!important\"}},[_vm._v(\"Comisiones vs Chargeback\")]),_c('div',{ref:\"amchart\",staticStyle:{\"height\":\"45vh\"}}),_c('br'),_c('v-alert',{directives:[{name:\"show\",rawName:\"v-show\",value:(!_vm.processing && _vm.isChartEmpty),expression:\"!processing && isChartEmpty\"}],attrs:{\"dense\":\"\",\"type\":\"warning\",\"text\":\"\"}},[_vm._v(\"No existe información para esta gráfica\")])],1)],1)],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <v-card outlined class=\"ma-2\">\r\n    <v-card-text>\r\n      <v-row>\r\n        <v-col xs=\"12\">\r\n          <v-progress-linear indeterminate color=\"primary\" v-if=\"processing\"></v-progress-linear>\r\n          <v-subheader style=\"font-size: 16px!important;\">Comisiones vs Chargeback</v-subheader>\r\n          <div ref=\"amchart\" style=\"height: 45vh;\"></div>\r\n          <br />\r\n          <v-alert\r\n            dense\r\n            type=\"warning\"\r\n            text\r\n            v-show=\"!processing && isChartEmpty\"\r\n          >No existe información para esta gráfica</v-alert>\r\n        </v-col>\r\n      </v-row>\r\n    </v-card-text>\r\n  </v-card>\r\n</template>\r\n\r\n<script>\r\nimport apiDashboard from \"../../api/dashboards\";\r\nimport { mapActions } from \"vuex\";\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themesAnimated from \"@amcharts/amcharts4/themes/material\";\r\nimport { store } from \"../../store\";\r\nimport helper from \"../../filters/helper\";\r\n\r\nam4core.useTheme(am4themesAnimated);\r\n\r\nexport default {\r\n  props: [\"corteId\", \"tipoProducto\"],\r\n  data() {\r\n    return {\r\n      processing: false,\r\n      chartData: [],\r\n      chart: null,\r\n      headers: [\r\n        { text: \"PERIODO\", value: \"Periodo\" },\r\n        { text: \"CONCEPTO\", value: \"Concepto\" },\r\n        { text: \"VALOR\", value: \"Monto\" }\r\n      ]\r\n    };\r\n  },\r\n  computed: {\r\n    isChartEmpty() {\r\n      return this.chartData.length === 0;\r\n    }\r\n  },\r\n  methods: {\r\n    ...mapActions([\"setError\", \"setErrorMessage\", \"setMessage\"]),\r\n    generateChart(dataParam) {\r\n      if (this.chart) {\r\n        this.chart.dispose();\r\n      }\r\n\r\n      try {\r\n        let chart = am4core.create(this.$refs.amchart, am4charts.XYChart);\r\n        chart.legend = new am4charts.Legend();\r\n        chart.exporting.menu = new am4core.ExportMenu();\r\n        chart.numberFormatter.numberFormat = \"$#,###.##\";\r\n        chart.scrollbarX = new am4core.Scrollbar();\r\n\r\n        chart.data = dataParam;\r\n\r\n  \r\n    for(var j = 0; j < chart.data.length; j++){\r\n        let comision = chart.data[j].Comision;\r\n        let chargeback = chart.data[j].Chargeback;\r\n        chart.data[j].pareto = (chargeback / comision) * 100;\r\n        chart.data[j].valueChargeback = chargeback;\r\n    } \r\n\r\n  // Create axes\r\nlet categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\ncategoryAxis.dataFields.category = \"Corte\";\r\ncategoryAxis.renderer.grid.template.location = 0;\r\ncategoryAxis.renderer.minGridDistance = 60;\r\ncategoryAxis.tooltip.disabled = true;\r\n\r\nlet valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\nvalueAxis.renderer.minWidth = 50;\r\nvalueAxis.min = 0;\r\nvalueAxis.cursorTooltipEnabled = false;\r\n\r\n// Create series\r\nlet series = chart.series.push(new am4charts.ColumnSeries());\r\nseries.sequencedInterpolation = true;\r\nseries.name = \"Comision\"\r\nseries.dataFields.valueY = \"Comision\";\r\nseries.dataFields.categoryX = \"Corte\";\r\nseries.tooltipText = \"[{categoryX}: bold]{valueY}[/]\";\r\nseries.columns.template.strokeWidth = 0;\r\nseries.stacked = true;\r\n\r\nseries.tooltip.pointerOrientation = \"vertical\";\r\n\r\nseries.columns.template.column.cornerRadiusTopLeft = 10;\r\nseries.columns.template.column.cornerRadiusTopRight = 10;\r\nseries.columns.template.column.fillOpacity = 0.8;\r\n\r\n// on hover, make corner radiuses bigger\r\nlet hoverState = series.columns.template.column.states.create(\"hover\");\r\nhoverState.properties.cornerRadiusTopLeft = 0;\r\nhoverState.properties.cornerRadiusTopRight = 0;\r\nhoverState.properties.fillOpacity = 1;\r\n\r\n// series.columns.template.adapter.add(\"fill\", function(fill, target) {\r\n//   return chart.colors.getIndex(target.dataItem.index);\r\n// })\r\n\r\n\r\nlet paretoValueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\nparetoValueAxis.renderer.opposite = true;\r\nparetoValueAxis.min = 0;\r\nparetoValueAxis.max = 100;\r\nparetoValueAxis.strictMinMax = false;\r\nparetoValueAxis.renderer.grid.template.disabled = true;\r\nparetoValueAxis.numberFormatter = new am4core.NumberFormatter();\r\nparetoValueAxis.numberFormatter.numberFormat = \"#'%'\"\r\nparetoValueAxis.cursorTooltipEnabled = false;\r\n\r\nlet paretoSeries = chart.series.push(new am4charts.LineSeries())\r\nparetoSeries.dataFields.valueChargeback = \"valueChargeback\";\r\nparetoSeries.dataFields.valueY = \"pareto\";\r\nparetoSeries.dataFields.categoryX = \"Corte\";\r\nparetoSeries.yAxis = paretoValueAxis;\r\nparetoSeries.tooltipText = \"chargeback: {valueChargeback}[/]\\n{valueY.formatNumber('#.0')}%\";\r\nparetoSeries.name = \"% chargeback\"\r\nparetoSeries.bullets.push(new am4charts.CircleBullet());\r\nparetoSeries.strokeWidth = 2;\r\nparetoSeries.stroke = new am4core.InterfaceColorSet().getFor(\"alternativeBackground\");\r\nparetoSeries.strokeOpacity = 0.5;\r\n\r\n// Cursor\r\nchart.cursor = new am4charts.XYCursor();\r\nchart.cursor.behavior = \"panX\";\r\n\r\n\r\nthis.chart = chart;\r\n\r\n\r\n\r\n      } catch (e) {\r\n        console.log(e);\r\n      }\r\n    },\r\n    refresh() {\r\n      if (this.corteId) {\r\n        this.processing = true;\r\n        let param = {\r\n          CorteId: this.corteId,\r\n          TipoProductoList: Array.from(this.tipoProducto),\r\n          Chart: \"ComisionChargeback\",\r\n          AsociadoId: store.getters.user.asociado.id\r\n        };\r\n\r\n        apiDashboard\r\n          .getChart(param)\r\n          .then(response => {\r\n            this.chartData = response.data;\r\n            this.generateChart(this.chartData);\r\n            this.processing = false;\r\n          })\r\n          .catch(error => {\r\n            this.setError(error);\r\n            this.processing = false;\r\n          });\r\n      }\r\n    },\r\n    getName(list, id, value, text) {\r\n      return helper.getName(list, id, value, text);\r\n    }\r\n  },\r\n  watch: {\r\n    corteId: function() {\r\n      this.refresh();\r\n    },\r\n    tipoProducto: function() {\r\n      this.refresh();\r\n    }\r\n  },\r\n  mounted() {\r\n    this.refresh();\r\n  },\r\n  beforeDestroy() {\r\n    if (this.chart) {\r\n      this.chart.dispose();\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scope>\r\n.v-alert.v-sheet.theme--dark.v-alert--dense.warning {\r\n  margin-bottom: 0;\r\n}\r\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!./comision_chargeback.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!./comision_chargeback.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./comision_chargeback.vue?vue&type=template&id=40b06d77\"\nimport script from \"./comision_chargeback.vue?vue&type=script&lang=js\"\nexport * from \"./comision_chargeback.vue?vue&type=script&lang=js\"\nimport style0 from \"./comision_chargeback.vue?vue&type=style&index=0&id=40b06d77&prod&scope=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  null,\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!./comision_chargeback.vue?vue&type=style&index=0&id=40b06d77&prod&scope=true&lang=css\"","import { is } from \"../core/Registry\";\r\nimport { color } from \"../core/utils/Color\";\r\nvar theme = function (object) {\r\n    if (is(object, \"ColorSet\")) {\r\n        object.list = [\r\n            color(\"#F44336\"),\r\n            color(\"#E91E63\"),\r\n            color(\"#9C27B0\"),\r\n            color(\"#673AB7\"),\r\n            color(\"#3F51B5\"),\r\n            color(\"#2196F3\"),\r\n            color(\"#03A9F4\"),\r\n            color(\"#00BCD4\"),\r\n            color(\"#009688\"),\r\n            color(\"#4CAF50\"),\r\n            color(\"#8BC34A\"),\r\n            color(\"#CDDC39\"),\r\n            color(\"#FFEB3B\"),\r\n            color(\"#FFC107\"),\r\n            color(\"#FF9800\"),\r\n            color(\"#FF5722\"),\r\n            color(\"#795548\"),\r\n            color(\"#9E9E9E\"),\r\n            color(\"#607D8B\")\r\n        ];\r\n        object.minLightness = 0.2;\r\n        object.maxLightness = 0.7;\r\n        object.reuse = true;\r\n    }\r\n    if (is(object, \"ResizeButton\")) {\r\n        object.background.cornerRadiusTopLeft = 20;\r\n        object.background.cornerRadiusTopRight = 20;\r\n        object.background.cornerRadiusBottomLeft = 20;\r\n        object.background.cornerRadiusBottomRight = 20;\r\n    }\r\n    if (is(object, \"Tooltip\")) {\r\n        object.animationDuration = 800;\r\n    }\r\n};\r\nexport default theme;\r\n//# sourceMappingURL=material.js.map"],"sourceRoot":""}