{"version":3,"sources":["webpack:///./src/views/graficas/graficacitas.vue?d562","webpack:///./src/views/graficas/graficacitas.vue?c47e","webpack:///src/views/graficas/graficacitas.vue","webpack:///./src/views/graficas/graficacitas.vue?5b14","webpack:///./src/views/graficas/graficacitas.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","_v","staticClass","ref","staticRenderFns","component","VCol","VContainer","VRow"],"mappings":"kHAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,cAAc,CAACA,EAAG,KAAK,CAACE,MAAM,CAAC,GAAK,WAAW,CAACN,EAAIO,GAAG,aAAaH,EAAG,QAAQ,CAACA,EAAG,QAAQ,CAACI,YAAY,QAAQ,CAACJ,EAAG,MAAM,CAACK,IAAI,QAAQD,YAAY,aAAa,IAAI,IACnQE,EAAkB,G,gDCoBtB,eAGA,OACA,eACA,cAGA,WACA,WACA,0FACA,0FACA,SACA,WAGA,aACA,8CAGA,OACA,eAEA,6BAIA,UACA,eACA,eACA,kBAEA,uDAEA,kBAGA,UACA,kBAGA,gBACA,YACA,sBAIA,SACA,sBAEA,kBAEA,YAEA,gBACA,cACA,cAKA,OACA,gCACA,iCAEA,gBACA,eAGA,oDACA,eACA,2CACA,2BAEA,yBACA,8BAOA,oCACA,iBAEA,kBAGA,UACA,gBACA,kBAQA,WAEA,sCAEA,kBAEA,oBAEA,4BACA,+BAEA,8BACA,oCACA,8BACA,cAGA,2DACA,uCACA,KAEA,KAGA,+BACA,qBAKA,gCACA,2BACA,+BACA,eACA,gEACA,kCACA,cAEA,yBACA,gBACA,kBASA,gBCxKqW,I,iFCQjWC,EAAY,eACd,EACAZ,EACAW,GACA,EACA,KACA,WACA,MAIa,aAAAC,EAAiB,QAOhC,IAAkBA,EAAW,CAACC,OAAA,KAAKC,aAAA,KAAWC,OAAA,Q","file":"js/chunk-d81709d0.d4bd0828.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!./graficacitas.vue?vue&type=style&index=0&id=d401fe9e&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-container',[_c('h2',{attrs:{\"id\":\"titulo\"}},[_vm._v(\" CITAS \")]),_c('v-row',[_c('v-col',{staticClass:\"ma-2\"},[_c('div',{ref:\"chart\",staticClass:\"hello\"})])],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <v-container>\r\n    <h2 id=\"titulo\">\r\n      CITAS\r\n    </h2>\r\n    <v-row>\r\n      <v-col class=\"ma-2\">\r\n        <div\r\n          ref=\"chart\"\r\n          class=\"hello\"\r\n        />\r\n      </v-col>\r\n    </v-row>\r\n  </v-container>\r\n</template>\r\n\r\n\r\n<script>\r\nimport * as am4core from \"@amcharts/amcharts4/core\";\r\nimport * as am4charts from \"@amcharts/amcharts4/charts\";\r\nimport am4themes_animated from \"@amcharts/amcharts4/themes/animated\";\r\nam4core.useTheme(am4themes_animated);\r\nimport { mapActions, mapGetters} from 'vuex'\r\n\r\nexport default {\r\n  name: 'Ordxmes',\r\n  components:{\r\n    \r\n  },\r\n  data: () => ({\r\n    grafica:[],\r\n    fecha1: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),\r\n    fecha2: (new Date(Date.now() - (new Date()).getTimezoneOffset() * 60000)).toISOString().substr(0, 10),\r\n    menu1: false,\r\n    menu2: false,\r\n  }),\r\n\r\n  computed:{\r\n    ...mapGetters('controles', ['getControles']),\r\n  },\r\n  \r\n  watch: {\r\n    getControles(){\r\n      // this.limpiar()\r\n      this.actualizarControles()\r\n    },\r\n  },\r\n  \r\n  created(){\r\n    let date0 = new Date()\r\n    let mes = date0.getMonth()\r\n    let anio = date0.getFullYear()\r\n    // console.log(mes, anio)\r\n    this.fecha1 = new Date(anio, mes, 1).toISOString().substr(0, 10)\r\n\r\n    this.consultar()\r\n  },\r\n\r\n  mounted() {\r\n    this.consultar()\r\n  },\r\n\r\n  beforeDestroy() {\r\n    if (this.chart) {\r\n      this.chart.dispose();\r\n    }\r\n  },\r\n\r\n  methods:{\r\n    actualizarControles(){\r\n      // console.log(\"actualiza la grafica por favor\",this.getControles)\r\n      this.consultar()\r\n    },\r\n    consultar(){\r\n      // limpiar\r\n      this.grafica= []\r\n      this.labes=[]\r\n      this.value=[]\r\n      // console.log(this.getdatosUsuario)\r\n      // let id = this.getdatosUsuario.idusuariosweb\r\n      // console.log('consultar', id)\r\n\r\n      let payload= {\r\n        fecha1 : this.getControles.fecha1,\r\n        fecha2 : this.getControles.fecha2\r\n      }\r\n      this.loading = true\r\n      console.log(payload)\r\n\r\n\r\n      this.$http.post(\"v2/grafica.citas.xdia\", payload).then(response=>{\r\n        console.log(response)\r\n        if (response.data.error===null && response.data.result != null){\r\n          this.grafica = response.data.result\r\n\r\n          this.grafica.forEach( element => {\r\n            element.fecha = element.fecha.substr(5,5)\r\n            //labels\r\n            // this.labels.push(element.fecha)\r\n            //values\r\n            // this.value.push(element.cant)\r\n          })\r\n\r\n          console.log(\"grafica\", this.grafica)\r\n          this.graficar()\r\n        }\r\n        this.loading = false\r\n\r\n\r\n      }).catch(error=>{\r\n        this.loading = false\r\n        console.log(error)\r\n      })\r\n\r\n      //Mostar labels y values\r\n      // console.log('value',this.value)\r\n      // console.log('labels',this.labels)\r\n    },\r\n\r\n    graficar(){\r\n\r\n      let chart = am4core.create(this.$refs.chart, am4charts.XYChart);\r\n      \r\n      chart.paddingRight = 20;\r\n    \r\n      chart.data = this.grafica\r\n\r\n      console.log(\"datos\", chart.data)\r\n      let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());\r\n      \r\n      categoryAxis.dataFields.category = \"fecha\"\r\n      categoryAxis.renderer.grid.template.location = 0;\r\n      categoryAxis.renderer.minGridDistance = 30;\r\n      categoryAxis.fontSize = 11;\r\n\r\n      //ADAPTADOR DE LEYEDA DINAMICO.\r\n      categoryAxis.renderer.labels.template.adapter.add(\"dy\", function(dy, target) {\r\n        if (target.dataItem && target.dataItem.index & 2 == 2) {\r\n          return dy + 25;\r\n        }\r\n        return dy;\r\n      });\r\n\r\n      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n      valueAxis.title.text = \"Citas\";\r\n\r\n\r\n\r\n      // Create series\r\n      let series = chart.series.push(new am4charts.ColumnSeries());\r\n      series.dataFields.valueY = \"cant\";\r\n      series.dataFields.categoryX = \"fecha\";\r\n      series.name = \"fecha\";\r\n      series.columns.template.tooltipText = \"{categoryX}: [bold]{valueY}[/]\";\r\n      series.columns.template.fillOpacity = .8;\r\n      series.fontSize = 11;\r\n\r\n      let columnTemplate = series.columns.template;\r\n      columnTemplate.strokeWidth = 2;\r\n      columnTemplate.strokeOpacity = 1;\r\n\r\n      // let series2 = chart.series.push(new am4charts.LineSeries());\r\n      // series2.name = \"Cerradas\";\r\n      // series2.stroke = am4core.color(\"#CDA2AB\");\r\n      // series2.strokeWidth = 3;\r\n      // series2.dataFields.valueY = \"cerradas\";\r\n      // series2.dataFields.categoryX = \"fecha\";\r\n\r\n      this.chart = chart;\r\n    }\r\n\r\n  }\r\n};\r\n</script>\r\n\r\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\r\n<style scoped>\r\n.hello {\r\n  width: 100%;\r\n  height: 400px;\r\n}\r\n\r\n#titulo{\r\n  color: white;\r\n  text-align: center;\r\n  background: #3BB8FF;\r\n}\r\n</style>\r\n\r\n\r\n\r\n<!--  mounted() {\r\n      let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);\r\n\r\n      chart.paddingRight = 20;\r\n\r\n      let data = [];\r\n      let visits = 10;\r\n      \r\n      for (let i = 1; i < 366; i++) {\r\n        visits += Math.round((Math.random() < 0.5 ? 1 : -1) * Math.random() * 10);\r\n        data.push({ date: new Date(2018, 0, i), name: \"name\" + i, value: visits });\r\n      }\r\n\r\n      chart.data = this.datos\r\n\r\n      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());\r\n      dateAxis.renderer.grid.template.location = 0;\r\n\r\n      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());\r\n      valueAxis.tooltip.disabled = true;\r\n      valueAxis.renderer.minWidth = 35;\r\n\r\n      let series = chart.series.push(new am4charts.LineSeries());\r\n      series.dataFields.dateX = \"date\";\r\n      series.dataFields.valueY = \"value\";\r\n\r\n      series.tooltipText = \"{valueY.value}\";\r\n      chart.cursor = new am4charts.XYCursor();\r\n\r\n      let scrollbarX = new am4charts.XYChartScrollbar();\r\n      scrollbarX.series.push(series);\r\n      chart.scrollbarX = scrollbarX;\r\n\r\n      this.chart = chart;\r\n  },\r\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!./graficacitas.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!./graficacitas.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./graficacitas.vue?vue&type=template&id=d401fe9e&scoped=true&\"\nimport script from \"./graficacitas.vue?vue&type=script&lang=js&\"\nexport * from \"./graficacitas.vue?vue&type=script&lang=js&\"\nimport style0 from \"./graficacitas.vue?vue&type=style&index=0&id=d401fe9e&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  \"d401fe9e\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VCol } from 'vuetify/lib/components/VGrid';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VRow } from 'vuetify/lib/components/VGrid';\ninstallComponents(component, {VCol,VContainer,VRow})\n"],"sourceRoot":""}