{"version":3,"sources":["webpack:///./src/components/dashboards/payments/payments_by_month.vue","webpack:///src/components/dashboards/payments/payments_by_month.vue","webpack:///./src/components/dashboards/payments/payments_by_month.vue?4217","webpack:///./src/components/dashboards/payments/payments_by_month.vue?e12f","webpack:///./src/components/dashboards/payments/payments_by_month.vue?02f6"],"names":["_c","attrs","staticClass","_vm","scopedSlots","key","staticStyle","model","callback","selected_year","expression","staticRenderFns","component"],"mappings":"6NAAqI,aAAC,IAAGA,EAAG,KAAaC,EAAK,EAAC,S,OAAC,EAAM,OAAG,C,YAAS,CAAE,wBAA0BC,OAA4BC,KAAO,K,CAA4D,SAAW,C,MAAG,CAAU,QAAa,WAAqD,WAACC,YAAYD,e,CAASE,EAAG,GAAC,yBAAW,oB,MAAI,C,WAAa,G,KAAEJ,GAAM,QAAE,G,kBAAY,E,0BAAmC,G,YAAmB,EAAQ,GAAE,E,6BAAkB,G,kBAAiE,GAAC,kB,YAAQ,YAAO,OAAI,MAAI,WAAG,SAAO,KAAM,KAA6BK,QAAY,2BAAC,MAAU,CAAO,KAAQ,YAA6B,SAA+D,CAACH,EAAG,MAAI,CAA8CD,YAAY,gBAAO,YAAK,CAAYD,QAAM,OAAC,MAAQ,QAAG,eAAc,S,CAAkB,QAAQE,C,YAAoB,qC,CAAI,yCAAe,SAAE,YAAC,QAACI,GAAK,OAAC,C,MAAM,CAAqBC,MAAQ,G,UAAqBC,GAAiB,MAAC,SAACC,QAAW,MAAe,YAAI,eAAc,IAAmC,MAAK,CAAWR,QAAY,cAAQD,SAAM,YAAC,EAAKE,cAAY,GAAiB,WAASA,oBAAe,QAAM,aACtvC,oBACGQ,aAAgB,CAEpB,YAAiBA,Q,4LC2DjB,gBACA,OACA,OACA,OACA,OACA,OACA,SAGA,OACA,YACA,cACA,6DAEA,OACA,OACA,cACA,SACA,uCACA,qCACA,QACA,yBACA,2BACA,2BACA,2BACA,2BACA,2BAEA,QACA,wBACA,yBACA,sBACA,uBACA,qBACA,sBACA,sBACA,wBACA,2BACA,0BACA,2BACA,4BAEA,QACA,yBACA,MACA,MACA,UACA,SAEA,OACA,2BACA,cACA,SAEA,SACA,eACA,uBAEA,OACA,gBACA,QACA,WACA,sBACA,yBAEA,aAGA,OACA,CACA,aACA,WACA,cAIA,aAIA,OACA,eACA,UACA,iBAEA,cAEA,uBACA,WACA,kDACA,sDAEA,eAGA,SACA,gBACA,0CAEA,qBACA,aAEA,0CACA,gDAGA,kDACA,yBAGA,8BACA,kCACA,6BAIA,WACA,oBACA,CACA,2BACA,WACA,QACA,kBACA,iBACA,mCAGA,CACA,aACA,YACA,UACA,QACA,aACA,gBACA,aACA,WACA,cACA,oBAEA,WACA,SAEA,kBAIA,YACA,cACA,+CACA,MACA,wBACA,kDAEA,SACA,kBACA,kDAEA,wBACA,WACA,6CAEA,yBACA,kCAIA,iCACA,0BAEA,gCACA,0BAKA,4BAGA,UACA,kBClPwX,I,wBCQpXC,EAAY,eACd,EACA,EACAD,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,oECnBf","file":"js/chunk-63c33f26.70b3c90b.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('v-card',{staticStyle:{\"border-radius\":\"1rem\"},attrs:{\"flat\":\"\"}},[_c('v-toolbar',{attrs:{\"flat\":\"\",\"dense\":\"\"}},[_c('v-toolbar-title',{staticClass:\"chart_title\"},[_vm._v(\"Uplate po mjesecima\")]),_c('v-spacer'),_c('v-menu',{attrs:{\"offset-y\":\"\",\"left\":\"\",\"rounded\":\"\",\"close-on-click\":true,\"close-on-content-click\":false},scopedSlots:_vm._u([{key:\"activator\",fn:function({ on, attrs }){return [_c('v-btn',_vm._g(_vm._b({staticClass:\"ma-0 pa-0\",attrs:{\"plain\":\"\",\"icon\":\"\",\"small\":\"\",\"dark\":\"\"}},'v-btn',attrs,false),on),[_c('sabira_icon',{attrs:{\"icon\":\"3dots\"}})],1)]}}])},[_c('div',{staticClass:\"pa-0 tertiary\",staticStyle:{\"display\":\"grid\",\"width\":\"10rem\",\"grid-row-gap\":\"0rem\"}},[_c('div',{staticClass:\"body-1 pa-2 secondary white--text\"},[_vm._v(\"\\n          Postavke\\n        \")]),_c('div',{staticClass:\"pa-2\"},[_c('v-select',{attrs:{\"dense\":\"\",\"mandatory\":\"\",\"label\":\"Godina\",\"items\":_vm.years,\"outlined\":\"\",\"hide-details\":\"\"},model:{value:(_vm.selected_year),callback:function ($$v) {_vm.selected_year=$$v},expression:\"selected_year\"}})],1)])])],1),_c('v-card-text',{staticClass:\"pt-0\"},[_c('v-chart',{staticClass:\"chart\",attrs:{\"id\":_vm.chart_id,\"autoresize\":\"\",\"option\":_vm.option}})],1)],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <v-card flat style=\"border-radius: 1rem;\">\n    <v-toolbar flat dense>\n      <v-toolbar-title class=\"chart_title\">Uplate po mjesecima</v-toolbar-title>\n      <v-spacer></v-spacer>\n      <v-menu\n        offset-y\n        left\n        rounded\n        :close-on-click=\"true\"\n        :close-on-content-click=\"false\"\n      >\n        <template v-slot:activator=\"{ on, attrs }\">\n          <v-btn\n            class=\"ma-0 pa-0\"\n            plain\n            icon\n            small\n            dark\n            v-bind=\"attrs\"\n            v-on=\"on\"\n          >\n            <sabira_icon icon=\"3dots\" />\n          </v-btn>\n        </template>\n        <div\n          class=\"pa-0 tertiary\"\n          style=\"display:grid;width: 10rem;grid-row-gap:0rem;\"\n        >\n          <div class=\"body-1 pa-2 secondary white--text\">\n            Postavke\n          </div>\n          <div class=\"pa-2\">\n            <v-select\n              dense\n              mandatory\n              label=\"Godina\"\n              :items=\"years\"\n              outlined\n              hide-details\n              v-model=\"selected_year\"\n            >\n            </v-select>\n          </div>\n        </div>\n      </v-menu>\n    </v-toolbar>\n    <v-card-text class=\"pt-0\">\n      <v-chart class=\"chart\" :id=\"chart_id\" autoresize :option=\"option\" />\n    </v-card-text>\n  </v-card>\n</template>\n<script>\nimport { use } from \"echarts/core\";\nimport { CanvasRenderer } from \"echarts/renderers\";\nimport { BarChart } from \"echarts/charts\";\nimport { LineChart } from \"echarts/charts\";\nimport \"echarts/lib/component/grid\";\nimport {\n  TitleComponent,\n  TooltipComponent,\n  LegendComponent,\n} from \"echarts/components\";\nuse([\n  CanvasRenderer,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponent,\n  BarChart,\n  LineChart,\n]);\nimport VChart from \"vue-echarts\";\nexport default {\n  components: {\n    VChart,\n    sabira_icon: () => import(\"@/components/sabira_icon\"),\n  },\n  data() {\n    return {\n      is_loading: false,\n      items: [],\n      selected_year: new Date().getFullYear(),\n      chart_id: \"upl_\" + new Date().getTime(),\n      years: [\n        new Date().getFullYear(),\n        new Date().getFullYear() - 1,\n        new Date().getFullYear() - 2,\n        new Date().getFullYear() - 3,\n        new Date().getFullYear() - 4,\n        new Date().getFullYear() - 5,\n      ],\n      months: [\n        { name: \"Januar\", month: 1 },\n        { name: \"Februar\", month: 2 },\n        { name: \"Mart\", month: 3 },\n        { name: \"April\", month: 4 },\n        { name: \"Maj\", month: 5 },\n        { name: \"Juni\", month: 6 },\n        { name: \"Juli\", month: 7 },\n        { name: \"August\", month: 8 },\n        { name: \"Septembar\", month: 9 },\n        { name: \"Oktobar\", month: 10 },\n        { name: \"Novembar\", month: 11 },\n        { name: \"Decembar\", month: 12 },\n      ],\n      option: {\n        color: this.$chart_colors,\n        grid: {\n          top: 5,\n          bottom: 20,\n          right: 5,\n        },\n        title: {\n          text: \"Uplate po mjesecima\",\n          left: \"center\",\n          show: false,\n        },\n        tooltip: {\n          trigger: \"item\",\n          formatter: \"{b} : {c}\",\n        },\n        xAxis: {\n          type: \"category\",\n          data: [],\n          axisLabel: {\n            formatter: function(value) {\n              return value.substring(0, 1);\n            },\n            color: null,\n          },\n        },\n        yAxis: [\n          {\n            type: \"value\",\n            axisLabel: {\n              color: null,\n            },\n          },\n        ],\n        series: [],\n      },\n    };\n  },\n  watch: {\n    selected_year: {\n      handler() {\n        this.get_data();\n      },\n      immediate: false,\n    },\n    \"$vuetify.theme.dark\": {\n      handler(value) {\n        this.option.xAxis.axisLabel.color = value ? \"#fff\" : \"#000\";\n        this.option.yAxis[0].axisLabel.color = value ? \"#fff\" : \"#000\";\n      },\n      immediate: true,\n    },\n  },\n  methods: {\n    formatNumber(value) {\n      return this.$n(parseFloat(value).toFixed(2));\n    },\n    updateOptionValues() {\n      const self = this;\n\n      this.option.tooltip.formatter = function(params) {\n        return `${params.name} : ${self.formatNumber(params.value)}`;\n      };\n\n      this.option.xAxis.axisLabel.formatter = function(value) {\n        return value.substring(0, 1);\n      };\n\n      this.option.yAxis.forEach((yAxis) => {\n        yAxis.axisLabel.formatter = function(value) {\n          return self.formatNumber(value);\n        };\n      });\n    },\n    get_data() {\n      this.option.series = [\n        {\n          name: \"Uplate po mjesecima\",\n          type: \"bar\",\n          data: [],\n          showBackground: true,\n          backgroundStyle: {\n            color: \"rgba(180, 180, 180, 0.2)\",\n          },\n        },\n        {\n          name: \"Trend\", // Changed from CMAGR to Trend\n          type: \"line\",\n          smooth: true,\n          data: [],\n          yAxisIndex: 0,\n          symbol: \"circle\", // Show circular markers\n          symbolSize: 6, // Size of the markers\n          itemStyle: {\n            borderWidth: 2,\n            borderColor: \"#fff\", // White border around markers\n          },\n          lineStyle: {\n            width: 2,\n          },\n          connectNulls: false, // Don't connect through null values\n        },\n      ];\n\n      this.$http({\n        method: \"POST\",\n        url: \"/reports/widgets/payments/month_on_month\",\n        data: {\n          year: this.selected_year,\n          account_id: this.$store.getters.user.account_id,\n        },\n      }).then((resp) => {\n        this.items = resp.data;\n        this.option.xAxis.data = this.months.map((x) => x.name);\n\n        this.months.forEach((m) => {\n          let m_total = null; // Default to null instead of 0\n          const monthData = this.items.find((i) => i.month == m.month);\n\n          if (typeof monthData !== \"undefined\") {\n            m_total = parseFloat(monthData.total).toFixed(2);\n          }\n\n          // Add values to both series\n          this.option.series[0].data.push({\n            value: m_total ? parseFloat(m_total) : 0, // Bar shows 0 for no data\n          });\n          this.option.series[1].data.push(\n            m_total ? parseFloat(m_total) : null // Line shows null for no data\n          );\n        });\n      });\n\n      this.updateOptionValues();\n    },\n  },\n  mounted() {\n    this.get_data();\n  },\n};\n</script>\n<style scoped>\n.chart {\n  height: 18rem;\n}\n.select {\n  width: 86px;\n  font-size: 13px;\n}\n</style>\n","import mod from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./payments_by_month.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../node_modules/thread-loader/dist/cjs.js!../../../../node_modules/babel-loader/lib/index.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./payments_by_month.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./payments_by_month.vue?vue&type=template&id=637935c7&scoped=true\"\nimport script from \"./payments_by_month.vue?vue&type=script&lang=js\"\nexport * from \"./payments_by_month.vue?vue&type=script&lang=js\"\nimport style0 from \"./payments_by_month.vue?vue&type=style&index=0&id=637935c7&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  \"637935c7\",\n  null\n  \n)\n\nexport default component.exports","export * from \"-!../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./payments_by_month.vue?vue&type=style&index=0&id=637935c7&prod&scoped=true&lang=css\""],"sourceRoot":""}