{"remainingRequest":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\examine-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\activeRingChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\activeRingChart\\src\\main.vue","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport Charts from '@jiaminghi/charts'\n\nimport dvDigitalFlop from '../../digitalFlop/src/main.vue'\n\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\n\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\n\nexport default {\n  name: 'DvActiveRingChart',\n  components: {\n    dvDigitalFlop\n  },\n  props: {\n    config: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data() {\n    return {\n      defaultConfig: {\n        /**\n         * @description Ring radius\n         * @type {String|Number}\n         * @default radius = '50%'\n         * @example radius = '50%' | 100\n         */\n        radius: '50%',\n        /**\n         * @description Active ring radius\n         * @type {String|Number}\n         * @default activeRadius = '55%'\n         * @example activeRadius = '55%' | 110\n         */\n        activeRadius: '55%',\n        /**\n         * @description Ring data\n         * @type {Array<Object>}\n         * @default data = [{ name: '', value: 0 }]\n         */\n        data: [{ name: '', value: 0 }],\n        /**\n         * @description Ring line width\n         * @type {Number}\n         * @default lineWidth = 20\n         */\n        lineWidth: 20,\n        /**\n         * @description Active time gap (ms)\n         * @type {Number}\n         * @default activeTimeGap = 3000\n         */\n        activeTimeGap: 3000,\n        /**\n         * @description Ring color (hex|rgb|rgba|color keywords)\n         * @type {Array<String>}\n         * @default color = [Charts Default Color]\n         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\n         */\n        color: [],\n        /**\n         * @description Digital flop style\n         * @type {Object}\n         */\n        digitalFlopStyle: {\n          fontSize: 25,\n          fill: '#fff'\n        },\n        /**\n         * @description Digital flop toFixed\n         * @type {Number}\n         */\n        digitalFlopToFixed: 0,\n        /**\n         * @description Digital flop unit\n         * @type {String}\n         */\n        digitalFlopUnit: '',\n        /**\n         * @description CRender animationCurve\n         * @type {String}\n         * @default animationCurve = 'easeOutCubic'\n         */\n        animationCurve: 'easeOutCubic',\n        /**\n         * @description CRender animationFrame\n         * @type {String}\n         * @default animationFrame = 50\n         */\n        animationFrame: 50,\n        /**\n         * @description showOriginValue\n         * @type {Boolean}\n         * @default showOriginValue = false\n         */\n        showOriginValue: false\n      },\n\n      mergedConfig: null,\n\n      chart: null,\n\n      activeIndex: 0,\n\n      animationHandler: ''\n    }\n  },\n  computed: {\n    digitalFlop() {\n      const { mergedConfig, activeIndex } = this\n\n      if (!mergedConfig) return {}\n\n      const {\n        digitalFlopStyle,\n        digitalFlopToFixed,\n        data,\n        showOriginValue,\n        digitalFlopUnit\n      } = mergedConfig\n\n      const value = data.map(({ value }) => value)\n\n      let displayValue\n\n      if (showOriginValue) {\n        displayValue = value[activeIndex]\n      } else {\n        const sum = value.reduce((all, v) => all + v, 0)\n\n        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0\n\n        displayValue = percent\n      }\n\n      return {\n        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,\n        number: [displayValue],\n        style: digitalFlopStyle,\n        toFixed: digitalFlopToFixed\n      }\n    },\n    ringName() {\n      const { mergedConfig, activeIndex } = this\n\n      if (!mergedConfig) return ''\n\n      return mergedConfig.data[activeIndex].name\n    },\n    fontSize() {\n      const { mergedConfig } = this\n\n      if (!mergedConfig) return ''\n\n      return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`\n    }\n  },\n  watch: {\n    config() {\n      const { animationHandler, mergeConfig, setRingOption } = this\n\n      clearTimeout(animationHandler)\n\n      this.activeIndex = 0\n\n      mergeConfig()\n\n      setRingOption()\n    }\n  },\n  methods: {\n    init() {\n      const { initChart, mergeConfig, setRingOption } = this\n\n      initChart()\n\n      mergeConfig()\n\n      setRingOption()\n    },\n    initChart() {\n      const { $refs } = this\n\n      this.chart = new Charts($refs['active-ring-chart'])\n    },\n    mergeConfig() {\n      const { defaultConfig, config } = this\n\n      this.mergedConfig = deepMerge(\n        deepClone(defaultConfig, true),\n        config || {}\n      )\n    },\n    setRingOption() {\n      const { getRingOption, chart, ringAnimation } = this\n\n      const option = getRingOption()\n\n      chart.setOption(option, true)\n\n      ringAnimation()\n    },\n    getRingOption() {\n      const { mergedConfig, getRealRadius } = this\n\n      const radius = getRealRadius()\n\n      mergedConfig.data.forEach(dataItem => {\n        dataItem.radius = radius\n      })\n\n      return {\n        series: [\n          {\n            type: 'pie',\n            ...mergedConfig,\n            outsideLabel: {\n              show: false\n            }\n          }\n        ],\n        color: mergedConfig.color\n      }\n    },\n    getRealRadius(active = false) {\n      const { mergedConfig, chart } = this\n\n      const { radius, activeRadius, lineWidth } = mergedConfig\n\n      const maxRadius = Math.min(...chart.render.area) / 2\n\n      const halfLineWidth = lineWidth / 2\n\n      let realRadius = active ? activeRadius : radius\n\n      if (typeof realRadius !== 'number')\n        realRadius = (parseInt(realRadius) / 100) * maxRadius\n\n      const insideRadius = realRadius - halfLineWidth\n      const outSideRadius = realRadius + halfLineWidth\n\n      return [insideRadius, outSideRadius]\n    },\n    ringAnimation() {\n      let { activeIndex, getRingOption, chart, getRealRadius } = this\n\n      const radius = getRealRadius()\n      const active = getRealRadius(true)\n\n      const option = getRingOption()\n\n      const { data } = option.series[0]\n\n      data.forEach((dataItem, i) => {\n        if (i === activeIndex) {\n          dataItem.radius = active\n        } else {\n          dataItem.radius = radius\n        }\n      })\n\n      chart.setOption(option, true)\n\n      const { activeTimeGap } = option.series[0]\n\n      this.animationHandler = setTimeout(foo => {\n        activeIndex += 1\n\n        if (activeIndex >= data.length) activeIndex = 0\n\n        this.activeIndex = activeIndex\n\n        this.ringAnimation()\n      }, activeTimeGap)\n    }\n  },\n  mounted() {\n    const { init } = this\n\n    init()\n  },\n  beforeDestroy() {\n    const { animationHandler } = this\n\n    clearTimeout(animationHandler)\n  }\n}\n",null]}