{"remainingRequest":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\waterLevelPond\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\waterLevelPond\\src\\main.vue","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\babel-loader\\lib\\index.js","mtime":315532800000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"D:\\jenkins\\workspace\\xq-web-fvue\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":["//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\nimport { uuid } from '../../../util/index'\n\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\n\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\n\nimport CRender from '@jiaminghi/c-render'\n\nexport default {\n  name: 'DvWaterLevelPond',\n  props: {\n    config: Object,\n    default: () => ({})\n  },\n  data () {\n    const id = uuid()\n    return {\n      gradientId: `water-level-pond-${id}`,\n\n      defaultConfig: {\n        /**\n         * @description Data\n         * @type {Array<Number>}\n         * @default data = []\n         * @example data = [60, 40]\n         */\n        data: [],\n        /**\n         * @description Shape of wanter level pond\n         * @type {String}\n         * @default shape = 'rect'\n         * @example shape = 'rect' | 'roundRect' | 'round'\n         */\n        shape: 'rect',\n        /**\n         * @description Water wave number\n         * @type {Number}\n         * @default waveNum = 3\n         */\n        waveNum: 3,\n        /**\n         * @description Water wave height (px)\n         * @type {Number}\n         * @default waveHeight = 40\n         */\n        waveHeight: 40,\n        /**\n         * @description Wave opacity\n         * @type {Number}\n         * @default waveOpacity = 0.4\n         */\n        waveOpacity: 0.4,\n        /**\n         * @description Colors (hex|rgb|rgba|color keywords)\n         * @type {Array<String>}\n         * @default colors = ['#00BAFF', '#3DE7C9']\n         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\n         */\n        colors: ['#3DE7C9', '#00BAFF'],\n        /**\n         * @description Formatter\n         * @type {String}\n         * @default formatter = '{value}%'\n         */\n        formatter: '{value}%'\n      },\n\n      mergedConfig: {},\n\n      renderer: null,\n\n      svgBorderGradient: [],\n\n      details: '',\n\n      waves: [],\n\n      animation: false\n    }\n  },\n  computed: {\n    radius () {\n      const { shape } = this.mergedConfig\n\n      if (shape === 'round') return '50%'\n\n      if (shape === 'rect') return '0'\n\n      if (shape === 'roundRect') return '10px'\n\n      return '0'\n    },\n    shape () {\n      const { shape } = this.mergedConfig\n\n      if (!shape) return 'rect'\n\n      return shape\n    }\n  },\n  watch: {\n    config () {\n      const { calcData, renderer } = this\n\n      renderer.delAllGraph()\n\n      this.waves = []\n\n      setTimeout(calcData, 0)\n    }\n  },\n  methods: {\n    init () {\n      const { initRender, config, calcData } = this\n\n      initRender()\n\n      if (!config) return\n\n      calcData()\n    },\n    initRender () {\n      const { $refs } = this\n\n      this.renderer = new CRender($refs['water-pond-level'])\n    },\n    calcData () {\n      const { mergeConfig, calcSvgBorderGradient, calcDetails } = this\n\n      mergeConfig()\n\n      calcSvgBorderGradient()\n\n      calcDetails()\n\n      const { addWave, animationWave } = this\n\n      addWave()\n\n      animationWave()\n    },\n    mergeConfig () {\n      const { config, defaultConfig } = this\n\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config)\n    },\n    calcSvgBorderGradient () {\n      const { colors } = this.mergedConfig\n\n      const colorNum = colors.length\n\n      const colorOffsetGap = 100 / (colorNum - 1)\n\n      this.svgBorderGradient = colors.map((c, i) => [colorOffsetGap * i, c])\n    },\n    calcDetails () {\n      const { data, formatter } = this.mergedConfig\n\n      if (!data.length) {\n        this.details = ''\n\n        return\n      }\n\n      const maxValue = Math.max(...data)\n\n      this.details = formatter.replace('{value}', maxValue)\n    },\n    addWave () {\n      const { renderer, getWaveShapes, getWaveStyle, drawed } = this\n\n      const shapes = getWaveShapes()\n      const style = getWaveStyle()\n\n      this.waves = shapes.map(shape => renderer.add({\n        name: 'smoothline',\n        animationFrame: 300,\n        shape,\n        style,\n        drawed\n      }))\n    },\n    getWaveShapes () {\n      const { mergedConfig, renderer, mergeOffset } = this\n\n      const { waveNum, waveHeight, data } = mergedConfig\n\n      const [w, h] = renderer.area\n\n      const pointsNum = waveNum * 4 + 4\n\n      const pointXGap = w / waveNum / 2\n\n      return data.map(v => {\n        let points = new Array(pointsNum).fill(0).map((foo, j) => {\n          const x = w - pointXGap * j\n\n          const startY = (1 - v / 100) * h\n\n          const y = j % 2 === 0 ? startY : startY - waveHeight\n\n          return [x, y]\n        })\n\n        points = points.map(p => mergeOffset(p, [pointXGap * 2, 0]))\n\n        return { points }\n      })\n    },\n    mergeOffset ([x, y], [ox, oy]) {\n      return [x + ox, y + oy]\n    },\n    getWaveStyle () {\n      const { renderer, mergedConfig } = this\n\n      const h = renderer.area[1]\n\n      return {\n        gradientColor: mergedConfig.colors,\n        gradientType: 'linear',\n        gradientParams: [0, 0, 0, h],\n        gradientWith: 'fill',\n        opacity: mergedConfig.waveOpacity,\n        translate: [0, 0]\n      }\n    },\n    drawed ({ shape: { points } }, { ctx, area }) {\n      const firstPoint = points[0]\n      const lastPoint = points.slice(-1)[0]\n\n      const h = area[1]\n\n      ctx.lineTo(lastPoint[0], h)\n      ctx.lineTo(firstPoint[0], h)\n\n      ctx.closePath()\n\n      ctx.fill()\n    },\n    async animationWave (repeat = 1) {\n      const { waves, renderer, animation } = this\n\n      if (animation) return\n\n      this.animation = true\n\n      const w = renderer.area[0]\n\n      waves.forEach(graph => {\n        graph.attr('style', { translate: [0, 0] })\n\n        graph.animation('style', {\n          translate: [w, 0]\n        }, true)\n      })\n\n      await renderer.launchAnimation()\n\n      this.animation = false\n\n      if (!renderer.graphs.length) return\n\n      this.animationWave(repeat + 1)\n    }\n  },\n  mounted () {\n    const { init } = this\n\n    init()\n  },\n  beforeDestroy () {\n    const { renderer } = this\n\n    renderer.delAllGraph()\n\n    this.waves = []\n  }\n}\n",null]}