{"remainingRequest":"E:\\项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!E:\\项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\capsuleChart\\src\\main.vue?vue&type=script&lang=js&","dependencies":[{"path":"E:\\项目\\suyiScreen\\node_modules\\@jiaminghi\\data-view\\lib\\components\\capsuleChart\\src\\main.vue","mtime":1670569849669},{"path":"E:\\项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670569853083},{"path":"E:\\项目\\suyiScreen\\node_modules\\babel-loader\\lib\\index.js","mtime":1670569850970},{"path":"E:\\项目\\suyiScreen\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1670569853083},{"path":"E:\\项目\\suyiScreen\\node_modules\\vue-loader\\lib\\index.js","mtime":1670569867456}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:Ly8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KLy8KDQppbXBvcnQgeyBkZWVwTWVyZ2UgfSBmcm9tICdAamlhbWluZ2hpL2NoYXJ0cy9saWIvdXRpbC9pbmRleCcNCg0KaW1wb3J0IHsgZGVlcENsb25lIH0gZnJvbSAnQGppYW1pbmdoaS9jLXJlbmRlci9saWIvcGx1Z2luL3V0aWwnDQoNCmV4cG9ydCBkZWZhdWx0IHsNCiAgbmFtZTogJ0R2Q2Fwc3VsZUNoYXJ0JywNCiAgcHJvcHM6IHsNCiAgICBjb25maWc6IHsNCiAgICAgIHR5cGU6IE9iamVjdCwNCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSkNCiAgICB9DQogIH0sDQogIGRhdGEgKCkgew0KICAgIHJldHVybiB7DQogICAgICBkZWZhdWx0Q29uZmlnOiB7DQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ2Fwc3VsZSBjaGFydCBkYXRhDQogICAgICAgICAqIEB0eXBlIHtBcnJheTxPYmplY3Q+fQ0KICAgICAgICAgKiBAZGVmYXVsdCBkYXRhID0gW10NCiAgICAgICAgICogQGV4YW1wbGUgZGF0YSA9IFt7IG5hbWU6ICdmb28xJywgdmFsdWU6IDEwMCB9LCB7IG5hbWU6ICdmb28yJywgdmFsdWU6IDEwMCB9XQ0KICAgICAgICAgKi8NCiAgICAgICAgZGF0YTogW10sDQogICAgICAgIC8qKg0KICAgICAgICAgKiBAZGVzY3JpcHRpb24gQ29sb3JzIChoZXh8cmdifHJnYmF8Y29sb3Iga2V5d29yZHMpDQogICAgICAgICAqIEB0eXBlIHtBcnJheTxTdHJpbmc+fQ0KICAgICAgICAgKiBAZGVmYXVsdCBjb2xvciA9IFsnIzM3YTJkYScsICcjMzJjNWU5JywgJyM2N2UwZTMnLCAnIzlmZTZiOCcsICcjZmZkYjVjJywgJyNmZjlmN2YnLCAnI2ZiNzI5MyddDQogICAgICAgICAqIEBleGFtcGxlIGNvbG9yID0gWycjMDAwJywgJ3JnYigwLCAwLCAwKScsICdyZ2JhKDAsIDAsIDAsIDEpJywgJ3JlZCddDQogICAgICAgICAqLw0KICAgICAgICBjb2xvcnM6IFsnIzM3YTJkYScsICcjMzJjNWU5JywgJyM2N2UwZTMnLCAnIzlmZTZiOCcsICcjZmZkYjVjJywgJyNmZjlmN2YnLCAnI2ZiNzI5MyddLA0KICAgICAgICAvKioNCiAgICAgICAgICogQGRlc2NyaXB0aW9uIENoYXJ0IHVuaXQNCiAgICAgICAgICogQHR5cGUge1N0cmluZ30NCiAgICAgICAgICogQGRlZmF1bHQgdW5pdCA9ICcnDQogICAgICAgICAqLw0KICAgICAgICB1bml0OiAnJw0KICAgICAgfSwNCg0KICAgICAgbWVyZ2VkQ29uZmlnOiBudWxsLA0KDQogICAgICBjYXBzdWxlTGVuZ3RoOiBbXSwNCiAgICAgIGxhYmVsRGF0YTogW10NCiAgICB9DQogIH0sDQogIHdhdGNoOiB7DQogICAgY29uZmlnICgpIHsNCiAgICAgIGNvbnN0IHsgY2FsY0RhdGEgfSA9IHRoaXMNCg0KICAgICAgY2FsY0RhdGEoKQ0KICAgIH0NCiAgfSwNCiAgbWV0aG9kczogew0KICAgIGNhbGNEYXRhICgpIHsNCiAgICAgIGNvbnN0IHsgbWVyZ2VDb25maWcsIGNhbGNDYXBzdWxlTGVuZ3RoQW5kTGFiZWxEYXRhIH0gPSB0aGlzDQoNCiAgICAgIG1lcmdlQ29uZmlnKCkNCg0KICAgICAgY2FsY0NhcHN1bGVMZW5ndGhBbmRMYWJlbERhdGEoKQ0KICAgIH0sDQogICAgbWVyZ2VDb25maWcgKCkgew0KICAgICAgbGV0IHsgY29uZmlnLCBkZWZhdWx0Q29uZmlnIH0gPSB0aGlzDQoNCiAgICAgIHRoaXMubWVyZ2VkQ29uZmlnID0gZGVlcE1lcmdlKGRlZXBDbG9uZShkZWZhdWx0Q29uZmlnLCB0cnVlKSwgY29uZmlnIHx8IHt9KQ0KICAgIH0sDQogICAgY2FsY0NhcHN1bGVMZW5ndGhBbmRMYWJlbERhdGEgKCkgew0KICAgICAgY29uc3QgeyBkYXRhIH0gPSB0aGlzLm1lcmdlZENvbmZpZw0KDQogICAgICBpZiAoIWRhdGEubGVuZ3RoKSByZXR1cm4NCg0KICAgICAgY29uc3QgY2Fwc3VsZVZhbHVlID0gZGF0YS5tYXAoKHsgdmFsdWUgfSkgPT4gdmFsdWUpDQoNCiAgICAgIGNvbnN0IG1heFZhbHVlID0gTWF0aC5tYXgoLi4uY2Fwc3VsZVZhbHVlKQ0KDQogICAgICB0aGlzLmNhcHN1bGVMZW5ndGggPSBjYXBzdWxlVmFsdWUubWFwKHYgPT4gbWF4VmFsdWUgPyB2IC8gbWF4VmFsdWUgOiAwKQ0KDQogICAgICBjb25zdCBvbmVGaWZ0aCA9IG1heFZhbHVlIC8gNQ0KDQogICAgICB0aGlzLmxhYmVsRGF0YSA9IG5ldyBBcnJheSg2KS5maWxsKDApLm1hcCgodiwgaSkgPT4gTWF0aC5jZWlsKGkgKiBvbmVGaWZ0aCkpDQogICAgfQ0KICB9LA0KICBtb3VudGVkICgpIHsNCiAgICBjb25zdCB7IGNhbGNEYXRhIH0gPSB0aGlzDQoNCiAgICBjYWxjRGF0YSgpDQogIH0NCn0NCg=="},{"version":3,"sources":["main.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA","file":"main.vue","sourceRoot":"node_modules/@jiaminghi/data-view/lib/components/capsuleChart/src","sourcesContent":["<template>\r\n  <div class=\"dv-capsule-chart\">\r\n    <template v-if=\"mergedConfig\">\r\n      <div class=\"label-column\">\r\n        <div v-for=\"item in mergedConfig.data\" :key=\"item.name\">{{ item.name }}</div>\r\n        <div>&nbsp;</div>\r\n      </div>\r\n\r\n      <div class=\"capsule-container\">\r\n        <div\r\n          class=\"capsule-item\"\r\n          v-for=\"(capsule, index) in capsuleLength\"\r\n          :key=\"index\"\r\n        >\r\n          <div :style=\"`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`\"></div>\r\n        </div>\r\n\r\n        <div class=\"unit-label\">\r\n          <div v-for=\"(label, index) in labelData\" :key=\"label + index\">{{ label }}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"unit-text\" v-if=\"mergedConfig.unit\">{{ mergedConfig.unit }}</div>\r\n    </template>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { deepMerge } from '@jiaminghi/charts/lib/util/index'\r\n\r\nimport { deepClone } from '@jiaminghi/c-render/lib/plugin/util'\r\n\r\nexport default {\r\n  name: 'DvCapsuleChart',\r\n  props: {\r\n    config: {\r\n      type: Object,\r\n      default: () => ({})\r\n    }\r\n  },\r\n  data () {\r\n    return {\r\n      defaultConfig: {\r\n        /**\r\n         * @description Capsule chart data\r\n         * @type {Array<Object>}\r\n         * @default data = []\r\n         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]\r\n         */\r\n        data: [],\r\n        /**\r\n         * @description Colors (hex|rgb|rgba|color keywords)\r\n         * @type {Array<String>}\r\n         * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']\r\n         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']\r\n         */\r\n        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],\r\n        /**\r\n         * @description Chart unit\r\n         * @type {String}\r\n         * @default unit = ''\r\n         */\r\n        unit: ''\r\n      },\r\n\r\n      mergedConfig: null,\r\n\r\n      capsuleLength: [],\r\n      labelData: []\r\n    }\r\n  },\r\n  watch: {\r\n    config () {\r\n      const { calcData } = this\r\n\r\n      calcData()\r\n    }\r\n  },\r\n  methods: {\r\n    calcData () {\r\n      const { mergeConfig, calcCapsuleLengthAndLabelData } = this\r\n\r\n      mergeConfig()\r\n\r\n      calcCapsuleLengthAndLabelData()\r\n    },\r\n    mergeConfig () {\r\n      let { config, defaultConfig } = this\r\n\r\n      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})\r\n    },\r\n    calcCapsuleLengthAndLabelData () {\r\n      const { data } = this.mergedConfig\r\n\r\n      if (!data.length) return\r\n\r\n      const capsuleValue = data.map(({ value }) => value)\r\n\r\n      const maxValue = Math.max(...capsuleValue)\r\n\r\n      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)\r\n\r\n      const oneFifth = maxValue / 5\r\n\r\n      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))\r\n    }\r\n  },\r\n  mounted () {\r\n    const { calcData } = this\r\n\r\n    calcData()\r\n  }\r\n}\r\n</script>"]}]}