{"version":3,"sources":["webpack:///./src/views/programs/kof/components/analytics/StatesList.vue?c155","webpack:///./src/views/programs/kof/DemographicReport.vue","webpack:///./src/views/programs/kof/components/analytics/GenderChart.vue","webpack:///src/views/programs/kof/components/analytics/GenderChart.vue","webpack:///./src/views/programs/kof/components/analytics/GenderChart.vue?c576","webpack:///./src/views/programs/kof/components/analytics/GenderChart.vue?2a57","webpack:///./src/views/programs/kof/components/analytics/AgeChart.vue","webpack:///src/views/programs/kof/components/analytics/AgeChart.vue","webpack:///./src/views/programs/kof/components/analytics/AgeChart.vue?026c","webpack:///./src/views/programs/kof/components/analytics/AgeChart.vue?cb2a","webpack:///./src/views/programs/kof/components/analytics/StatesList.vue","webpack:///src/views/programs/kof/components/analytics/StatesList.vue","webpack:///./src/views/programs/kof/components/analytics/StatesList.vue?d4f2","webpack:///./src/views/programs/kof/components/analytics/StatesList.vue?b702","webpack:///src/views/programs/kof/DemographicReport.vue","webpack:///./src/views/programs/kof/DemographicReport.vue?0805","webpack:///./src/views/programs/kof/DemographicReport.vue?e92a"],"names":["render","_vm","this","_c","_self","attrs","staticClass","_v","programIdSelected","on","$event","addFilter","model","value","zoneIdSelected","callback","$$v","expression","_l","programSelected","zones","zone","key","id","name","_e","zoneSelected","regions","length","regionIdSelected","region","stopPropagation","calculateNewStats","staticStyle","ref","staticRenderFns","chartOptions","series","props","regionId","type","default","required","components","VueApexCharts","data","chart","height","zoom","enabled","toolbar","show","tools","download","zoomin","zoomout","pan","reset","autoSelected","locales","dataLabels","formatter","donut","labels","tooltip","y","colors","plotOptions","pie","customScale","size","legend","position","mounted","methods","console","component","isMounted","stacked","responsive","breakpoint","options","offsetX","offsetY","bar","horizontal","borderRadius","xaxis","categories","fill","opacity","setChartData","mixins","statesData","then","response","Highcharts","map","title","text","subtitle","mapNavigation","buttonOptions","verticalAlign","colorAxis","min","max","minColor","maxColor","states","hover","color","format","externalScript","document","externalScript2","GenderChart","AgeChart","StatesList","filters","programs","computed"],"mappings":"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L,QACAM,UACAC,WACAC,OACAC,UAEAC,qBAEAC,UACA,UACA,SACA,SACA,4BACA,4BACA,4BACA,6BACA,iBACA,iBACA,YACA,0BAKAC,YACAX,WACAY,aAAA,mBAEAC,OAAAC,QAAAZ,UACAa,SAAAC,GAAAJ,aAAA,OACAE,8CACAG,uCACAC,aACAC,KACAC,cACAP,OACAQ,aAGAC,QACAC,uBAMAC,UACA,sBAEAC,SACA,sBACA,IACA,iIACA,kEACA,SACAC,iBACA,gDCvFiZ,I,YCO7YC,EAAY,eACd,EACA,EACA,GACA,EACA,KACA,KACA,MAIa,EAAAA,E,QClBX5E,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,cAAc,CAAEJ,EAAI4E,UAAW1E,EAAG,kBAAkB,CAACE,MAAM,CAAC,KAAO,MAAM,OAAS,MAAM,QAAUJ,EAAImC,aAAa,OAASnC,EAAIoC,UAAUpC,EAAIwB,MAAM,IAEzOU,EAAkB,GCMP,GACfX,gBACAc,OACAC,UAAAC,qBAAAC,UAAAC,cAEAC,YACAC,mBAEAC,OACA,OACAgC,aACAxC,QACA,CACAb,oBACAqB,UAGAT,cACAU,OACAN,WACAO,WACA+B,WACA9B,MACAC,YAEAC,SACAE,OACAC,YACAL,QACAM,UACAC,WACAC,OACAC,UAEAC,qBAEAC,UACA,UACA,SACA,SACA,4BACA,4BACA,4BACA,6BACA,iBACA,iBACA,YACA,0BAKAO,mBACAa,aACAC,eACAC,SACAV,QACAC,kBACAU,YACAC,cAIAhB,aACAiB,KACAC,cACAC,kBAGAC,OACAC,eAEAjB,QACAC,iBACAW,YAEAM,MACAC,cAKAjB,UACA,mBAEAC,SACA,mBACA,IACA,kBACA,8HACA,0BACAC,oBACA,kBACA,SACAA,iBACA,8CAGAgB,gBACA,IACA,sCACA,uBACA,+CACA,uEACA,4BACA,2EAGA,cCpH8Y,ICO1Y,EAAY,eACd,EACA,EACA,GACA,EACA,KACA,KACA,MAIa,I,QClBX3F,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAOA,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,gBAAgB,CAACF,EAAG,MAAM,CAACG,YAAY,UAAU,CAACH,EAAG,MAAM,CAACG,YAAY,iBAAiB,CAAEL,EAAI4E,UAAW1E,EAAG,UAAU,CAACA,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,iBAAiBJ,EAAIwB,MAAM,QAE9PU,EAAkB,G,YC2CP,GACfX,kBACAoE,gBACAtD,OACAC,UAAAC,qBAAAC,UAAAC,cAEAG,OACA,OACAgC,aACAgB,gBAGApB,YAMA,sBACA,0BACA,qBAEA,WAEA,oBACA,qEACAqB,KAAAC,aAiBA,kBAGAC,iCACAlD,OACAmD,OAEAC,OACAC,2BAGAC,UACAD,yBAGAE,eACApD,WACAqD,eACAC,yBAIAC,WACAC,MACAC,OACAC,mBACAC,oBAGAvE,SACAQ,OACArB,4BACAqF,QACAC,OACAC,kBAGAnD,YACAX,WACA+D,4BA5DA,GAmEA,mBAEAtC,SACA,qBACA,uCACAuC,qEACAC,6BACA,uCACAC,8EACAD,8BAEA,sBACA,IACA,iIACA,uBACA,SACAvC,iBACA,gDCvJ2Z,ICQvZ,G,UAAY,eACd,EACA,EACA,GACA,EACA,KACA,KACA,OAIa,I,QCuDA,GACfnD,yBACAmB,YACAyE,cACAC,WACAC,cAEAzE,OACA,OACA0E,WACAC,YACA1G,iBACAe,qBAGA,gBACA,WAAAgB,SAAA,kCACA,iBAEA4E,UACAtG,kBAAA,MACA,6DACA,2CAEAO,eAAA,MACA,uEACA,sCAAAC,aAEAnB,oBACA,oCAGAkE,SACA,qBACA,0BACA,gBAEA,6BAGA,mCACA,sBACA,0BAGA1C,oBACA,uCACA,iCACA,yCC1HyX,ICOrX,EAAY,eACd,EACAhC,EACAmC,GACA,EACA,KACA,KACA,MAIa,e","file":"js/chunk-385047cc.956ef427.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!./StatesList.vue?vue&type=style&index=0&id=2249aeac&prod&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"demographic-report\"}},[_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full mb-6\"},[_c('vx-card',{staticClass:\"big-title-card-bg-black h-auto\"},[_c('h1',{staticClass:\"rg-big-title extrabold rg-title\"},[_vm._v(\" Reporte \"),_c('span',[_vm._v(\"demográfico\")]),_vm._v(\". \")])])],1),_c('div',{staticClass:\"vx-col w-full\"},[_c('vx-card',{staticClass:\"mb-6\",attrs:{\"title\":\"Filtros.\"}},[_c('div',{staticClass:\"flex pl-2 mb-4\"},[(_vm.programIdSelected !== null)?_c('vs-select',{staticClass:\"mr-2\",attrs:{\"label\":\"Zonas\"},on:{\"change\":function($event){return _vm.addFilter('zone_id', $event)}},model:{value:(_vm.zoneIdSelected),callback:function ($$v) {_vm.zoneIdSelected=$$v},expression:\"zoneIdSelected\"}},[_c('vs-select-item',{attrs:{\"text\":\"Todas\",\"value\":\"0\"}}),_vm._l((_vm.programSelected.zones),function(zone){return _c('vs-select-item',{key:zone.id,attrs:{\"text\":zone.name,\"value\":zone.id}})})],2):_vm._e(),_c('vs-select',{attrs:{\"disabled\":_vm.zoneIdSelected == 0 && _vm.zoneSelected.regions.length < 1,\"label\":\"Regiones\"},on:{\"change\":function($event){return _vm.addFilter('region_id', $event)}},model:{value:(_vm.regionIdSelected),callback:function ($$v) {_vm.regionIdSelected=$$v},expression:\"regionIdSelected\"}},[_c('vs-select-item',{attrs:{\"text\":\"Todas\",\"value\":\"0\"}}),_vm._l((_vm.zoneSelected.regions),function(region){return _c('vs-select-item',{key:region.id,attrs:{\"text\":region.name,\"value\":region.id}})})],2),_c('vs-button',{staticClass:\"mt-6 ml-4\",attrs:{\"type\":\"filled\",\"icon\":\"search\"},on:{\"click\":function($event){$event.stopPropagation();return _vm.calculateNewStats()}}})],1)])],1),_c('div',{staticClass:\"vx-col w-full\"},[_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col sm:w-full md:w-1/3 lg:w-1/3 mb-6\"},[_c('vx-card',{staticStyle:{\"min-height\":\"20rem\"},attrs:{\"title\":\"Género de los solicitantes.\"}},[_c('gender-chart',{ref:\"GenderChart\",staticClass:\"mt-6\",attrs:{\"regionId\":_vm.regionIdSelected}})],1)],1),_c('div',{staticClass:\"vx-col sm:w-full md:w-2/3 lg:w-2/3 mb-6\",staticStyle:{\"min-height\":\"20rem\"}},[_c('vx-card',{attrs:{\"title\":\"Edad de los solicitantes.\"}},[_c('age-chart',{ref:\"AgeChart\",attrs:{\"regionId\":_vm.regionIdSelected}})],1)],1),_c('div',{staticClass:\"vx-col w-full mb-6\"},[_c('vx-card',{attrs:{\"title\":\"Ubicación de los proyectos por Estado.\"}},[_c('states-list',{ref:\"StatesList\",attrs:{\"regionId\":_vm.regionIdSelected}})],1)],1)])]),_c('p',{staticClass:\"bold ml-4\"},[_vm._v(\"Nota: Información en tiempo real.\")])])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"gender-chart\"}},[_c('vue-apex-charts',{attrs:{\"type\":\"donut\",\"height\":\"194\",\"options\":_vm.chartOptions,\"series\":_vm.series}})],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div id=\"gender-chart\">\n        <vue-apex-charts type=\"donut\" height=\"194\" :options=\"chartOptions\" :series=\"series\"></vue-apex-charts>\n    </div>\n</template>\n\n<script>\nimport VueApexCharts from 'vue-apexcharts';\nexport default {\n    name: \"genderChart\",\n    props: {\n        regionId: { type: [Number, String], default: 0, required: true }\n    },\n    components: {\n        VueApexCharts\n    },\n    data() {\n        return {\n            series: [0,0,0],\n            chartOptions: {\n                chart: {\n                    type: 'donut',\n                    height: 400,\n                    // stacked: true,\n                    zoom: {\n                        enabled: true\n                    },\n                    toolbar: {\n                        show: true,\n                        tools: {\n                            download: true,\n                            zoom: true,\n                            zoomin: true,\n                            zoomout: true,\n                            pan: true,\n                            reset: true,\n                        },\n                        autoSelected: 'none'\n                    },\n                    locales:[{\n                        \"name\": \"en\",\n                        \"options\": {\n                            \"toolbar\": {\n                                \"exportToSVG\": \"Descargar SVG\",\n                                \"exportToPNG\": \"Descargar PNG\",\n                                \"exportToCSV\": \"Descargar CSV\",\n                                \"selectionZoom\": \"Zoom en área\",\n                                \"zoomIn\": \"Acercar\",\n                                \"zoomOut\": \"Alejar\",\n                                \"pan\": \"Paneo\",\n                                \"reset\": \"Reestablecer\"\n                            }\n                        }\n                    }],\n                },\n                dataLabels: { \n                    enabled: true,\n                    formatter: (value) => { return `${value.toFixed(2)} %` }\n                },\n                donut: { labels: { show: false} },\n                tooltip: { y: { formatter: (value) => { return `${value}` } }},\n                labels: [\"Masculino\", \"Femenino\", \"No definido\"],\n                colors: ['#ff4961', '#3a3939', '#82868b'],\n                plotOptions: {\n                    pie: {\n                        customScale: 1,\n                        donut: {\n                            size: '50%'\n                        }\n                    },\n                    legend: {\n                        position: 'bottom'\n                    }\n                }\n            }\n        }\n    },\n    mounted() {\n        this.getGenderData();\n    },\n    methods: {\n        async getGenderData() {\n            try {\n                const res = await axios.get(`/api/analytics/pgm/demographic/gender?region=${this.regionId}&programId=${this.currentProgramData.id}`);\n                this.series = [res.data.masculine, res.data.femenine, res.data.not_defined]\n            } catch (error) {\n                console.error(error);\n                this.errorNotif(\"Error en la operación.\", error);\n            }\n        }\n    }\n}\n</script>\n\n<style>\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!./GenderChart.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!./GenderChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GenderChart.vue?vue&type=template&id=70c742f2&\"\nimport script from \"./GenderChart.vue?vue&type=script&lang=js&\"\nexport * from \"./GenderChart.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 render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"age-chart\"}},[(_vm.isMounted)?_c('vue-apex-charts',{attrs:{\"type\":\"bar\",\"height\":\"194\",\"options\":_vm.chartOptions,\"series\":_vm.series}}):_vm._e()],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div id=\"age-chart\">\n        <vue-apex-charts v-if=\"isMounted\" type=\"bar\" height=\"194\" :options=\"chartOptions\" :series=\"series\"></vue-apex-charts>\n    </div>\n</template>\n\n<script>\nimport VueApexCharts from 'vue-apexcharts';\nexport default {\n    name: \"ageChart\",\n    props: {\n        regionId: { type: [Number, String], default: 0, required: true }\n    },\n    components: {\n        VueApexCharts\n    },\n    data() {\n        return {\n            isMounted: false,\n            series: [\n                {\n                    name: 'Solicitantes',\n                    data: []\n                },\n            ],\n            chartOptions: {\n                chart: {\n                    type: 'bar',\n                    height: 150,\n                    stacked: true,\n                    zoom: {\n                        enabled: true\n                    },\n                    toolbar: {\n                        tools: {\n                            download: true,\n                            zoom: true,\n                            zoomin: true,\n                            zoomout: true,\n                            pan: true,\n                            reset: true,\n                        },\n                        autoSelected: 'none'\n                },\n                    locales:[{\n                        \"name\": \"en\",\n                        \"options\": {\n                            \"toolbar\": {\n                                \"exportToSVG\": \"Descargar SVG\",\n                                \"exportToPNG\": \"Descargar PNG\",\n                                \"exportToCSV\": \"Descargar CSV\",\n                                \"selectionZoom\": \"Zoom en área\",\n                                \"zoomIn\": \"Acercar\",\n                                \"zoomOut\": \"Alejar\",\n                                \"pan\": \"Paneo\",\n                                \"reset\": \"Reestablecer\"\n                            }\n                        }\n                    }],\n                },\n                colors: ['#ff4961'], \n                responsive: [{\n                    breakpoint: 480,\n                    options: {\n                        legend: {\n                            position: 'bottom',\n                            offsetX: -10,\n                            offsetY: 0\n                        }\n                    }\n                }],\n                plotOptions: {\n                    bar: {\n                        horizontal: false,\n                        borderRadius: 10\n                    },\n                },\n                xaxis: {\n                    categories: [],\n                },\n                legend: {\n                    position: 'right',\n                    offsetY: 40\n                },\n                fill: {\n                    opacity: 1\n                }\n            },\n        }\n    },\n    mounted() {\n        this.getAgeData();\n    },\n    methods: {\n        async getAgeData() {\n            try {\n                this.isMounted = false;\n                const res = await axios.get(`/api/analytics/pgm/demographic/age?region=${this.regionId}&programId=${this.currentProgramData.id}`);\n                this.setChartData(res.data);\n                console.log(res.data);\n                this.isMounted = true;\n            } catch (error) {\n                console.error(error);\n                this.errorNotif(\"Error en la operación.\", error);\n            }\n        },\n        setChartData(data) {\n            try {\n                this.chartOptions.xaxis.categories = [];\n                this.series[0].data = [];\n                for (let index = 0; index < data.projects_installed.length; index++) {\n                    const element = data.projects_installed[index].value + data.projects_installed_wf[index].value;\n                    this.series[0].data.push(element); \n                    this.chartOptions.xaxis.categories.push(data.projects_installed_wf[index].range); \n                    \n                }\n            } catch (error) {\n                \n            }\n        }\n    }\n}\n</script>\n\n<style>\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!./AgeChart.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!./AgeChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AgeChart.vue?vue&type=template&id=38243eac&\"\nimport script from \"./AgeChart.vue?vue&type=script&lang=js&\"\nexport * from \"./AgeChart.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 render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"states-list\"}},[_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full\"},[(_vm.isMounted)?_c('vx-card',[_c('div',{attrs:{\"id\":\"container\"}})]):_vm._e()],1)])])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n    <div id=\"states-list\">\n       <div class=\"vx-row\">\n           <div class=\"vx-col w-full\">\n                <vx-card v-if=\"isMounted\">\n                   <div id=\"container\"></div>\n               </vx-card>\n           </div>\n       </div>\n         <!-- <div class=\"vx-row\">\n            <div class=\"vx-col w-1/3\">\n                <vs-list>\n                    <vs-list-header title=\"\" color=\"dark\"></vs-list-header>\n                    <template v-for=\"(item, index) in statesData\">\n                        <vs-list-item v-if=\"index < 11\" :key=\"index\" :title=\"capitalizeFirstLetter(item.state)\" >\n                            <vs-chip color=\"danger\">{{item.total}}</vs-chip>\n                        </vs-list-item>\n                    </template>\n                </vs-list>\n            </div>\n            <div class=\"vx-col w-1/3\">\n                <vs-list>\n                    <vs-list-header title=\"\" color=\"dark\"></vs-list-header>\n                    <template v-for=\"(item, index) in statesData\">\n                        <vs-list-item v-if=\"index > 10 && index < 22\" :key=\"index\" :title=\"capitalizeFirstLetter(item.state)\" >\n                            <vs-chip color=\"danger\">{{item.total}}</vs-chip>\n                        </vs-list-item>\n                    </template>\n                </vs-list>\n            </div>\n            <div class=\"vx-col w-1/3\">\n                <vs-list>\n                    <vs-list-header title=\"\" color=\"dark\"></vs-list-header>\n                    <template v-for=\"(item, index) in statesData\">\n                        <vs-list-item v-if=\"index > 21\" :key=\"index\" :title=\"capitalizeFirstLetter(item.state)\" >\n                            <vs-chip color=\"danger\">{{item.total}}</vs-chip>\n                        </vs-list-item>\n                    </template>\n                </vs-list>\n            </div>\n        </div> -->\n    </div>\n</template>\n<script defer>\nimport formatHelper from '@components/mixins/formatHelper';\nexport default {\n    name: \"statesList\",\n    mixins: [formatHelper],\n    props: {\n        regionId: { type: [Number, String], default: 0, required: true }\n    },\t\n    data() {\n        return {\n            isMounted: false,\n            statesData: []\n        }\n    }, \n    mounted() {\n        // this.getStatesData();\n    },\n    // async beforeCreate() {\n\n    // },\n    async created() {\n        await this.addLibraries();\n        await this.getStatesData();\n\n        (async () => {\n\n            const topology = await fetch(\n                'https://code.highcharts.com/mapdata/countries/mx/mx-all.topo.json'\n            ).then(response => response.json());\n\n            // Prepare demo data. The data is joined to map using value of 'hc-key'\n            // property by default. See API docs for 'joinBy' for more info on linking\n            // data and map.\n            // this.statesData = [\n            //     ['mx-3622', 0], ['mx-bc', 0], ['mx-bs', 0], ['mx-so', 0],\n            //     ['mx-cl', 0], ['mx-na', 0], ['mx-cm', 0], ['mx-qr', 0],\n            //     ['mx-mx', 0], ['mx-mo', 0], ['mx-df', 0], ['mx-qt', 3],\n            //     ['mx-tb', 0], ['mx-cs', 0], ['mx-nl', 0], ['mx-si', 0],\n            //     ['mx-ch', 0], ['mx-ve', 0], ['mx-za', 0], ['mx-ag', 0],\n            //     ['mx-ja', 0], ['mx-mi', 0], ['mx-oa', 0], ['mx-pu', 0],\n            //     ['mx-gr', 0], ['mx-tl', 0], ['mx-tm', 0], ['mx-co', 0],\n            //     ['mx-yu', 0], ['mx-dg', 0], ['mx-gj', 0], ['mx-sl', 0],\n            //     ['mx-hg', 0]\n            // ];\n\n            const data = this.statesData;\n\n            // Create the chart\n            Highcharts.mapChart('container', {\n                chart: {\n                    map: topology\n                },\n                title: {\n                    text: 'República Mexicana'\n                },\n\n                subtitle: {\n                    text: 'Mapa interactivo'\n                },\n\n                mapNavigation: {\n                    enabled: true,\n                    buttonOptions: {\n                        verticalAlign: 'bottom'\n                    }\n                },\n\n                colorAxis: {\n                    min: 1,\n                    max: 10,\n                    minColor: '#fff2f2',\n                    maxColor: '#F04A4A'\n                },\n\n                series: [{\n                    data: data,\n                    name: 'Proyectos instalados',\n                    states: {\n                        hover: {\n                            color: '#626262'\n                        }\n                    },\n                    dataLabels: {\n                        enabled: true,\n                        format: '{point.name}'\n                    }\n                }]\n            });\n\n        })();\n\n        this.isMounted = true;\n    },\t\t\n    methods: {\n        async addLibraries() {\n            let externalScript = document.createElement('script');\n            externalScript.setAttribute('src','https://code.highcharts.com/maps/highmaps.js');\n            document.head.appendChild(externalScript);\n            let externalScript2 = document.createElement('script');\n            externalScript2.setAttribute('src','https://code.highcharts.com/maps/modules/exporting.js');\n            document.head.appendChild(externalScript2);\n        },\n        async getStatesData() {\n            try {\n                const res = await axios.get(`/api/analytics/pgm/demographic/states?region=${this.regionId}&programId=${this.currentProgramData.id}`);\n                this.statesData = res.data;\n            } catch (error) {\n                console.error(error);\n                this.errorNotif(\"Error en la operación.\", error);\n            }\n        },\n    }\n\n}\n</script>\n\n<style>\n#container {\n    height: 500px;\n    min-width: 310px;\n    max-width: 800px;\n    margin: 0 auto;\n}\n\n.loading {\n    margin-top: 10em;\n    text-align: center;\n    color: gray;\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!./StatesList.vue?vue&type=script&defer=true&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!./StatesList.vue?vue&type=script&defer=true&lang=js&\"","import { render, staticRenderFns } from \"./StatesList.vue?vue&type=template&id=2249aeac&\"\nimport script from \"./StatesList.vue?vue&type=script&defer=true&lang=js&\"\nexport * from \"./StatesList.vue?vue&type=script&defer=true&lang=js&\"\nimport style0 from \"./StatesList.vue?vue&type=style&index=0&id=2249aeac&prod&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","<template>\n    <div id=\"demographic-report\">\n        <div class=\"vx-row\">\n            <div class=\"vx-col w-full mb-6\">\n                <vx-card class=\"big-title-card-bg-black h-auto\">\n                    <h1 class=\"rg-big-title extrabold rg-title\">\n                        Reporte <span>demográfico</span>.\n                    </h1>\n                </vx-card>\n            </div>\n\n            <div class=\"vx-col w-full\">\n                <vx-card class=\"mb-6\" title=\"Filtros.\">\n                    <div class=\"flex pl-2 mb-4\">\n                        <vs-select\n                            v-if=\"programIdSelected !== null\"\n                            label=\"Zonas\"\n                            v-model=\"zoneIdSelected\"\n                            @change=\"addFilter('zone_id', $event)\"\n                            class=\"mr-2\">\n                            <vs-select-item text=\"Todas\" value=\"0\"></vs-select-item>\n                            <vs-select-item\n                                v-for=\"zone in programSelected.zones\"\n                                :text=\"zone.name\"\n                                :key=\"zone.id\"\n                                :value=\"zone.id\"></vs-select-item>\n                        </vs-select>\n\n                        <vs-select\n                            :disabled=\"zoneIdSelected == 0 && zoneSelected.regions.length < 1\"\n                            label=\"Regiones\"\n                            v-model=\"regionIdSelected\"\n                            @change=\"addFilter('region_id', $event)\">\n                            <vs-select-item text=\"Todas\" value=\"0\"></vs-select-item>\n                            <vs-select-item\n                                v-for=\"region in zoneSelected.regions\"\n                                :text=\"region.name\"\n                                :key=\"region.id\"\n                                :value=\"region.id\"></vs-select-item>\n                        </vs-select>\n                        <vs-button @click.stop=\"calculateNewStats()\" type=\"filled\" class=\"mt-6 ml-4\" icon=\"search\"></vs-button>\n                    </div>\n                </vx-card>\n            </div>\n\n            <div class=\"vx-col w-full\">\n                <div class=\"vx-row\">\n                    <div class=\"vx-col sm:w-full md:w-1/3 lg:w-1/3 mb-6\">\n                        <vx-card style=\"min-height: 20rem;\" title=\"Género de los solicitantes.\">\n                            <gender-chart ref=\"GenderChart\" :regionId=\"regionIdSelected\" class=\"mt-6\"></gender-chart>\n                        </vx-card>\n                    </div>\n                    <div style=\"min-height: 20rem;\" class=\"vx-col sm:w-full md:w-2/3 lg:w-2/3 mb-6\">\n                        <vx-card title=\"Edad de los solicitantes.\">\n                            <age-chart ref=\"AgeChart\" :regionId=\"regionIdSelected\"></age-chart>\n                        </vx-card>\n                    </div>\n\n                    <div class=\"vx-col w-full mb-6\">\n                        <vx-card title=\"Ubicación de los proyectos por Estado.\">\n                            <states-list ref=\"StatesList\" :regionId=\"regionIdSelected\"></states-list>\n                        </vx-card>\n                    </div>\n                </div>\n            </div>\n            <p class=\"bold ml-4\">Nota: Información en tiempo real.</p>\n        </div>\n    </div>\n</template>\n\n<script>\nimport GenderChart from \"./components/analytics/GenderChart.vue\"\nimport AgeChart from \"./components/analytics/AgeChart.vue\"\nimport StatesList from \"./components/analytics/StatesList.vue\"\nexport default {\n    name: \"demographicReport\",\n    components: {\n        GenderChart,\n        AgeChart,\n        StatesList\n    },\n    data() {\n        return {\n            filters: {}\n            , programs: []\n            , zoneIdSelected: 0\n            , regionIdSelected: 0\n        }\n    },\n    async mounted() {\n        const {data} = await axios.get(`/api/pgm/me/programs`)\n        this.programs = data;\n    },\n    computed: {\n        programSelected() {\n            let program = this.programs.filter(p => p.id === this.programIdSelected)\n            return program[0] ?? null;\n        },\n        zoneSelected() {\n            let zone = this.programSelected.zones.filter(z => z.id === this.zoneIdSelected)\n            return zone[0] ?? {regions: []};\n        },\n        programIdSelected () {\n            return this.currentProgramData.id;\n        }\n    },\n    methods: {\n        async addFilter(filterName, ev) {\n            if (ev.toString() === \"0\") {\n                delete this.filters[filterName];\n            } else {\n                this.filters[filterName] = ev.toString();\n            }\n\n            if(filterName == \"zone_id\" && ev.toString() === \"0\"){\n                this.zoneIdSelected = 0;\n                this.regionIdSelected = 0;\n            }\n        },\n        calculateNewStats(){\n            this.$refs.GenderChart.getGenderData();\n            this.$refs.AgeChart.getAgeData();\n            this.$refs.StatesList.getStatesData();\n        }\n    }\n}\n</script>\n\n<style>\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!./DemographicReport.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!./DemographicReport.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DemographicReport.vue?vue&type=template&id=00063655&\"\nimport script from \"./DemographicReport.vue?vue&type=script&lang=js&\"\nexport * from \"./DemographicReport.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"],"sourceRoot":""}