{"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\\percentPond\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"D:\\jenkins\\workspace\\examine-fvue\\node_modules\\@jiaminghi\\data-view\\lib\\components\\percentPond\\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//\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\nexport default {\n  name: 'DvPercentPond',\n  props: {\n    config: {\n      type: Object,\n      default: () => ({})\n    }\n  },\n  data () {\n    const id = uuid()\n    return {\n      gradientId1: `percent-pond-gradientId1-${id}`,\n      gradientId2: `percent-pond-gradientId2-${id}`,\n\n      width: 0,\n      height: 0,\n\n      defaultConfig: {\n        /**\n         * @description Value\n         * @type {Number}\n         * @default value = 0\n         */\n        value: 0,\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 Border width\n         * @type {Number}\n         * @default borderWidth = 3\n         */\n        borderWidth: 3,\n        /**\n         * @description Gap between border and pond\n         * @type {Number}\n         * @default borderGap = 3\n         */\n        borderGap: 3,\n        /**\n         * @description Line dash\n         * @type {Array<Number>}\n         * @default lineDash = [5, 1]\n         */\n        lineDash: [5, 1],\n        /**\n         * @description Text color\n         * @type {String}\n         * @default textColor = '#fff'\n         */\n        textColor: '#fff',\n        /**\n         * @description Border radius\n         * @type {Number}\n         * @default borderRadius = 5\n         */\n        borderRadius: 5,\n        /**\n         * @description Local Gradient\n         * @type {Boolean}\n         * @default localGradient = false\n         * @example localGradient = false | true\n         */\n        localGradient: false,\n        /**\n         * @description Formatter\n         * @type {String}\n         * @default formatter = '{value}%'\n         */\n        formatter: '{value}%'\n      },\n\n      mergedConfig: null\n    }\n  },\n  computed: {\n    rectWidth () {\n      const { mergedConfig, width } = this\n\n      if (!mergedConfig) return 0\n\n      const { borderWidth } = mergedConfig\n\n      return width - borderWidth\n    },\n    rectHeight () {\n      const { mergedConfig, height } = this\n\n      if (!mergedConfig) return 0\n\n      const { borderWidth } = mergedConfig\n\n      return height - borderWidth\n    },\n    points () {\n      const { mergedConfig, width, height } = this\n\n      const halfHeight = height / 2\n\n      if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`\n\n      const { borderWidth, borderGap, value } = mergedConfig\n\n      const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value\n\n      return `\n        ${borderWidth + borderGap}, ${halfHeight}\n        ${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}\n      `\n    },\n    polylineWidth () {\n      const { mergedConfig, height } = this\n\n      if (!mergedConfig) return 0\n\n      const { borderWidth, borderGap } = mergedConfig\n\n      return height - (borderWidth + borderGap) * 2\n    },\n    linearGradient () {\n      const { mergedConfig } = this\n\n      if (!mergedConfig) return []\n\n      const { colors } = mergedConfig\n\n      const colorNum = colors.length\n\n      const colorOffsetGap = 100 / (colorNum - 1)\n\n      return colors.map((c, i) => [colorOffsetGap * i, c])\n    },\n    polylineGradient () {\n      const { gradientId1, gradientId2, mergedConfig } = this\n\n      if (!mergedConfig) return gradientId2\n\n      if (mergedConfig.localGradient) return gradientId1\n\n      return gradientId2\n    },\n    gradient2XPos () {\n      const { mergedConfig } = this\n\n      if (!mergedConfig) return '100%'\n\n      const { value } = mergedConfig\n\n      return `${200 - value}%`\n    },\n    details () {\n      const { mergedConfig } = this\n\n      if (!mergedConfig) return ''\n\n      const { value, formatter } = mergedConfig\n\n      return formatter.replace('{value}', value)\n    }\n  },\n  watch: {\n    config () {\n      const { mergeConfig } = this\n\n      mergeConfig()\n    }\n  },\n  methods: {\n    async init () {\n      const { initWH, config, mergeConfig } = this\n\n      await initWH()\n\n      if (!config) return\n\n      mergeConfig()\n    },\n    async initWH () {\n      const { $nextTick, $refs } = this\n\n      await $nextTick()\n\n      const { clientWidth, clientHeight } = $refs['percent-pond']\n\n      this.width = clientWidth\n      this.height = clientHeight\n    },\n    mergeConfig () {\n      const { config, defaultConfig } = this\n\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\n    }\n  },\n  mounted () {\n    const { init } = this\n\n    init()\n  }\n}\n",null]}