{"version":3,"sources":["webpack:///src/components/FlotBarChart.vue","webpack:///./src/components/FlotBarChart.vue?5f0e","webpack:///./src/components/FlotBarChart.vue?788f","webpack:///./src/components/FlotBarChart.vue","webpack:///./src/components/FlotBarChart.vue?23b3"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","_v","_s","average","staticRenderFns","component"],"mappings":"+HAQA,QACE,KAAF,eACE,MAAF,2DACE,KAHF,WAII,MAAJ,CACM,QAAN,GACM,QAAN,KAGE,QAAF,CACI,YADJ,SACA,KACM,IAAN,0BACM,KAAN,cAEI,UALJ,SAKA,GAEM,EAAN,wCACQ,IAAR,iBACU,EAAV,KACU,EAAV,OAEQ,EAAR,gDACA,KACU,SAAV,WACU,KAAV,SACU,IAAV,SACU,YAAV,SAEA,6BACA,oBAIE,MAAF,CACI,KADJ,SACA,KACM,KAAN,kBACM,KAAN,wCAEI,KALJ,SAKA,KACM,KAAN,uBACM,KAAN,wCAEI,YATJ,SASA,KACM,KAAN,kBACM,KAAN,wCAEI,MAbJ,SAaA,KACM,KAAN,sBACM,KAAN,yCAGE,QAnDF,WAoDI,IAAJ,OAGI,KAAJ,UACM,MAAN,MACM,KAAN,OACM,MAAN,UACM,MAAN,EACM,KAAN,CACQ,MAAR,EACQ,aAAR,EACQ,SAAR,KAGA,CACM,MAAN,QACM,KAAN,cACM,MAAN,UACM,MAAN,CACQ,MAAR,GAEM,MAAN,SACM,MAAN,IAKI,KAAJ,SACM,MAAN,CACQ,UAAR,KACQ,oBAAR,EACQ,wBAAR,GACQ,oBAAR,iBACQ,iBAAR,GACQ,MAAR,SAEM,MAAN,EACQ,UAAR,OACQ,oBAAR,EACQ,wBAAR,GACQ,oBAAR,QACQ,iBAAR,EACQ,IAAR,OACQ,UAAR,OACQ,SAAR,WACQ,cAAR,cACU,OAAV,KAGM,OAAN,CACQ,UAAR,EACQ,oBAAR,UACQ,SAAR,MAEM,KAAN,CACQ,WAAR,EACQ,YAAR,EACQ,gBAAR,CACU,OAAV,uBAEQ,OAAR,S,0DCxHA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,YAAY,CAACF,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,YAAY,CAACN,EAAIO,GAAG,UAAUP,EAAIQ,GAAGR,EAAIS,SAAS,UAAUL,EAAG,MAAM,CAACE,MAAM,CAAC,GAAK,cACvOI,EAAkB,G,YCDgU,S,wBCQlVC,EAAY,eACd,EACAZ,EACAW,GACA,EACA,KACA,WACA,MAIa,OAAAC,E,6CCnBf,yBAAwiB,EAAG,G","file":"js/chunk-50618308.edbeb759.js","sourcesContent":["<template>\r\n<div id=\"content\">\r\n    <div id=\"average\">平均度數 = {{ average }} kwh</div>\r\n    <div id=\"chart\"></div>\r\n</div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    name: \"FlotBarChart\",\r\n    props: [\"average\", \"ymax\", \"xaxis\", \"data\", \"averageData\", \"tickSize\"],\r\n    data() {\r\n        return {\r\n            dataset: '',\r\n            options: '',\r\n        }\r\n    },\r\n    methods: {\r\n        chartUpdate(dataset, options) {\r\n            var p = $.plot($(\"#chart\"), dataset, options);\r\n            this.addLabels(p);\r\n        },\r\n        addLabels(p) {\r\n            // add bar number\r\n            $.each(p.getData()[0].data, function (i, el) {\r\n                var o = p.pointOffset({\r\n                    x: el[0],\r\n                    y: el[1]\r\n                });\r\n                $('<div class=\"data-point-label\">' + el[1] + \"</div>\")\r\n                    .css({\r\n                        position: \"absolute\",\r\n                        left: o.left + 5,\r\n                        top: o.top - 20,\r\n                        \"font-size\": \"14px\"\r\n                    })\r\n                    .appendTo(p.getPlaceholder())\r\n                    .fadeIn(\"slow\");\r\n            });\r\n        }\r\n    },\r\n    watch: {\r\n        data(newData, oldData) {\r\n            this.dataset[0].data = newData;\r\n            this.chartUpdate(this.dataset, this.options);\r\n        },\r\n        ymax(newMax, oldMax) {\r\n            this.options.yaxes[0].max = newMax;\r\n            this.chartUpdate(this.dataset, this.options);\r\n        },\r\n        averageData(newAverage, oldAverage) {\r\n            this.dataset[1].data = newAverage;\r\n            this.chartUpdate(this.dataset, this.options);\r\n        },\r\n        xaxis(newXAxis, oldXAxis) {\r\n            this.options.xaxis.ticks = newXAxis;\r\n            this.chartUpdate(this.dataset, this.options);\r\n        }\r\n    },\r\n    mounted() {\r\n        var my = this;\r\n\r\n        // flot data\r\n        this.dataset = [{\r\n                label: \"發電量\",\r\n                data: my.data,\r\n                color: \"#5482FF\",\r\n                yaxis: 1,\r\n                bars: {\r\n                    show: true,\r\n                    showNumbers: true,\r\n                    barWidth: 0.8\r\n                }\r\n            },\r\n            {\r\n                label: \"發電量平均\",\r\n                data: my.averageData,\r\n                color: \"#00ff00\",\r\n                lines: {\r\n                    show: true\r\n                },\r\n                align: \"center\",\r\n                yaxis: 1\r\n            }\r\n        ];\r\n\r\n        // flot 設定\r\n        this.options = {\r\n            xaxis: {\r\n                axisLabel: \"日期\",\r\n                axisLabelUseCanvas: false,\r\n                axisLabelFontSizePixels: 12,\r\n                axisLabelFontFamily: \"Verdana, Arial\",\r\n                axisLabelPadding: 10,\r\n                ticks: my.xaxis\r\n            },\r\n            yaxes: [{\r\n                axisLabel: \"發電度數\",\r\n                axisLabelUseCanvas: false,\r\n                axisLabelFontSizePixels: 12,\r\n                axisLabelFontFamily: \"Arial\",\r\n                axisLabelPadding: 3,\r\n                max: my.ymax,\r\n                autoScale: \"none\",\r\n                tickSize: my.tickSize,\r\n                tickFormatter: function (v, axis) {\r\n                    return v;\r\n                }\r\n            }],\r\n            legend: {\r\n                noColumns: 0,\r\n                labelBoxBorderColor: \"#000000\",\r\n                position: \"nw\"\r\n            },\r\n            grid: {\r\n                hoverable: true,\r\n                borderWidth: 2,\r\n                backgroundColor: {\r\n                    colors: [\"#ffffff\", \"#EDF5FF\"]\r\n                },\r\n                margin: 10\r\n            }\r\n        };\r\n    }\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@import \"@/assets/css/bar.scss\";\r\n</style>\r\n","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"content\"}},[_c('div',{attrs:{\"id\":\"average\"}},[_vm._v(\"平均度數 = \"+_vm._s(_vm.average)+\" kwh\")]),_c('div',{attrs:{\"id\":\"chart\"}})])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","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!./FlotBarChart.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!./FlotBarChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FlotBarChart.vue?vue&type=template&id=062f402e&scoped=true&\"\nimport script from \"./FlotBarChart.vue?vue&type=script&lang=js&\"\nexport * from \"./FlotBarChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FlotBarChart.vue?vue&type=style&index=0&id=062f402e&lang=scss&scoped=true&\"\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  \"062f402e\",\n  null\n  \n)\n\nexport default component.exports","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FlotBarChart.vue?vue&type=style&index=0&id=062f402e&lang=scss&scoped=true&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./FlotBarChart.vue?vue&type=style&index=0&id=062f402e&lang=scss&scoped=true&\""],"sourceRoot":""}