fix(chart-beta): Update dependencies and imports in chart modules (#1115)

* fix(chart-beta): formatting issues in chart components

* fix(chart-beta): formatting issues in chart components

* fix(chart-beta): Update dependencies and imports in chart modules

* fix(chart-beta): Update dependencies and imports in chart modules

packages/vue/src/charts-beta/chart-bar/index.ts

@@ -6,4 +6,4 @@ ChartBar.install = function (Vue: any) {
 
 export { ChartBar }
 
-export default ChartBar
+export default ChartBar

packages/vue/src/charts-beta/chart-bar/src/chart-bar.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="hui-chart chart-bar" ref="chartRef" :style="{ height: height }">
-  </div>
+  <div class="hui-chart chart-bar" ref="chartRef" :style="{ height }"></div>
 </template>
+
 <script>
 import { histogram } from './histogram'
 import Core from '@opentiny/vue-chart-core-beta'
+
 export default {
   name: 'ChartBar',
   mixins: [Core],
   data() {
     return {
       iChartName: 'BarChart',
-      option: {
-      },
+      option: {}
     }
   },
   methods: {
@@ -25,14 +25,14 @@ export default {
         extend: this.extend
       }
 
-      const option = histogram(columns, rows, this.settings, extra, false);
+      const option = histogram(columns, rows, this.settings, extra, false)
 
       this.option = {
         smooth: true,
         ...option,
-        direction: 'horizontal',
+        direction: 'horizontal'
       }
     }
-  },
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-bar/src/histogram.ts

@@ -1,7 +1,13 @@
-import { getFormatted, cloneDeep, getStackMap, get, set } from '@opentiny/vue-chart-core-beta/common/util'
-import { isNull } from '@opentiny/vue-chart-core-beta/common/type'
-
-import { getRows, getTooltip } from '@opentiny/vue-chart-core-beta/utils/options'
+import {
+  getFormatted,
+  cloneDeep,
+  getStackMap,
+  get,
+  set,
+  isNull,
+  getRows,
+  getTooltip
+} from '@opentiny/vue-chart-core-beta'
 
 const VALUE_AXIS_OPACITY = 0.5
 
@@ -49,8 +55,8 @@ const getBarMeaAxis = (args) => {
 
 const factoryFmt =
   ({ meaAxisType, i, digit }) =>
-    (val) =>
-      getFormatted(val, meaAxisType[i], digit)
+  (val) =>
+    getFormatted(val, meaAxisType[i], digit)
 
 const getLegend = (args) => {
   const { legendName } = args

packages/vue/src/charts-beta/chart-core/common/defendXSS.ts

@@ -1,68 +1,67 @@
 /**
  *  转义字符 防止xss攻击
  */
-const matchHtmlRegExp = /["'&<>/]/;
+const matchHtmlRegExp = /["'&<>/]/
 function escapeHtml(string) {
-  const str = `${string}`;
-  const match = matchHtmlRegExp.exec(str);
+  const str = `${string}`
+  const match = matchHtmlRegExp.exec(str)
   if (!match) {
-    return str;
+    return str
   }
-  let escape;
-  let html = '';
-  let index;
-  let lastIndex = 0;
+  let escape
+  let html = ''
+  let index
+  let lastIndex = 0
 
   for (index = match.index; index < str.length; index++) {
     switch (str.charCodeAt(index)) {
       case 34: // "
-        escape = '&quot;';
-        break;
+        escape = '&quot;'
+        break
       case 38: // &
-        escape = '&amp;';
-        break;
+        escape = '&amp;'
+        break
       case 39: // '
-        escape = '&#x27;';
-        break;
+        escape = '&#x27;'
+        break
       case 60: // <
-        escape = '&lt;';
-        break;
+        escape = '&lt;'
+        break
       case 62: // >
-        escape = '&gt;';
-        break; // /
+        escape = '&gt;'
+        break // /
       case 47:
-        escape = '&#x2F;';
-        break;
+        escape = '&#x2F;'
+        break
       default:
-        continue;
+        continue
     }
 
     if (lastIndex !== index) {
-      html += str.substring(lastIndex, index);
+      html += str.substring(lastIndex, index)
     }
 
-    lastIndex = index + 1;
-    html += escape;
+    lastIndex = index + 1
+    html += escape
   }
 
-  return lastIndex !== index ? html + str.substring(lastIndex, index) : html;
+  return lastIndex !== index ? html + str.substring(lastIndex, index) : html
 }
 
-
-const defendXSS = obj => {
+const defendXSS = (obj) => {
   if (typeof obj === 'string') {
-    return escapeHtml(obj);
+    return escapeHtml(obj)
   } else if (typeof obj === 'number') {
-    return obj;
+    return obj
   } else if (typeof obj === 'object') {
     for (const key in obj) {
-      obj[key] = defendXSS(obj[key]);
+      obj[key] = defendXSS(obj[key])
     }
-    return obj;
+    return obj
   } else {
-    return obj;
+    return obj
   }
-};
+}
 
-export default defendXSS;
-export { escapeHtml };
+export default defendXSS
+export { escapeHtml }

packages/vue/src/charts-beta/chart-core/common/extend.ts

@@ -6,19 +6,19 @@ const isArr = Array.isArray
 
 function removeNullKeys(obj) {
   if (typeof obj !== 'object' || obj === null) {
-    return obj;
+    return obj
   }
   for (let key in obj) {
     if (obj[key] === null) {
-      delete obj[key];
+      delete obj[key]
     } else {
-      obj[key] = removeNullKeys(obj[key]);
+      obj[key] = removeNullKeys(obj[key])
       if (typeof obj[key] === 'object' && Object.keys(obj[key]).length === 0) {
         obj[key] = undefined
       }
     }
   }
-  return obj;
+  return obj
 }
 
 export default ({ option, extend }) => {
@@ -30,11 +30,14 @@ export default ({ option, extend }) => {
   Object.keys(extend).forEach((key) => {
     const value = extend[key]
 
-    if (~key.indexOf('.')) { // （其他类型）属性名中带. 为true
+    if (~key.indexOf('.')) {
+      // （其他类型）属性名中带. 为true
       set(options, key, value)
-    } else if (typeof value === 'function') { // 当属性为函数时，设置的是函数的返回值
+    } else if (typeof value === 'function') {
+      // 当属性为函数时，设置的是函数的返回值
       options[key] = value(options[key])
-    } else if (isArr(options[key]) && isArr(value)) { // 当被修改值和替换值都为数组时，key符合attrList就合并
+    } else if (isArr(options[key]) && isArr(value)) {
+      // 当被修改值和替换值都为数组时，key符合attrList就合并
       const attrList = [
         'series',
         'yAxis',
@@ -49,17 +52,22 @@ export default ({ option, extend }) => {
         'visualMap',
         'brush'
       ]
-      if (~attrList.indexOf(key)) { // attrList，指定的key才能合并处理
+      if (~attrList.indexOf(key)) {
+        // attrList，指定的key才能合并处理
         options[key] = merge(options[key], value)
       }
-    } else { // 属性为对象(eg: tooltip)或包含对象的数组(eg: series)
-      if (isArr(options[key]) && isObject(options[key][0])) { // 属性值是包含对象数组
+    } else {
+      // 属性为对象(eg: tooltip)或包含对象的数组(eg: series)
+      if (isArr(options[key]) && isObject(options[key][0])) {
+        // 属性值是包含对象数组
         options[key].forEach((option, i) => (options[key][i] = { ...option, ...value }))
-      } else if (isObject(options[key])) { // 被替换属性值是对象
+      } else if (isObject(options[key])) {
+        // 被替换属性值是对象
         let optionBase = options[key]
 
         options[key] = { ...optionBase, ...value } // 两者合并，后者覆盖前者
-      } else { // 直接覆盖替换
+      } else {
+        // 直接覆盖替换
         options[key] = value
       }
     }

packages/vue/src/charts-beta/chart-core/common/type.ts

@@ -1,14 +1,14 @@
 /**
-* Copyright (c) 2022 - present TinyVue Authors.
-* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
-*
-* Use of this source code is governed by an MIT-style license.
-*
-* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
-* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
-* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
-*
-*/
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
 
 export const toString = Object.prototype.toString
 export const hasOwn = Object.prototype.hasOwnProperty

packages/vue/src/charts-beta/chart-core/common/util.ts

@@ -1,16 +1,16 @@
-import { typeOf as getType, isNull, isObject } from './type'
+import { typeOf as getType, isObject } from './type'
 import { copyArray } from './object'
-export { setObj as set, getObj as get } from './object'
 
 import _numerify from './numerify'
+
+export { setObj as set, getObj as get } from './object'
+
 export const $prefix = 'Tiny'
 
 export function toUpperCase(str) {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-
-
 export const getFormatted = (value, type, digit, defaultVal = '-') => {
   if (isNaN(value)) {
     return defaultVal
@@ -127,4 +127,3 @@ export const getAmap = ({ key, version, url }) => {
 
   return amapPromise
 }
-

packages/vue/src/charts-beta/chart-core/index.ts

@@ -1,8 +1,31 @@
 import Core from './src/chart-core'
-
+import { getFormatted, cloneDeep, getStackMap, get, set, merge, getMapJSON } from './common/util'
+import { isNull } from './common/type'
+import { deepCopy } from './utils/deep-clone'
+import { getRows, getYAxis, getTooltip } from './utils/options'
+import { itemPoint, itemLabel, itemContent } from './common/constants'
+import { isDefined } from './utils/type'
 
 Core.install = function (Vue: any) {
   Vue.component(Core.name, Core)
 }
 
-export default Core
+export default Core
+export {
+  getFormatted,
+  cloneDeep,
+  getStackMap,
+  get,
+  set,
+  merge,
+  getMapJSON,
+  getRows,
+  getYAxis,
+  getTooltip,
+  isNull,
+  deepCopy,
+  itemPoint,
+  itemLabel,
+  itemContent,
+  isDefined
+}

packages/vue/src/charts-beta/chart-core/utils/deep-clone.ts

@@ -23,4 +23,4 @@ export function deepCopy(val) {
     })
   }
   return o
-}
+}

packages/vue/src/charts-beta/chart-core/utils/type.ts

@@ -39,4 +39,4 @@ export function isUndefined(value) {
 
 export const isDefined = (val) => {
   return val !== undefined && val !== null
-}
+}

packages/vue/src/charts-beta/chart-histogram/index.ts

@@ -4,6 +4,5 @@ ChartHistogram.install = function (Vue: any) {
   Vue.component(ChartHistogram.name, ChartHistogram)
 }
 
-
 export { ChartHistogram }
-export default ChartHistogram
+export default ChartHistogram

packages/vue/src/charts-beta/chart-histogram/src/chart-histogram.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="hui-chart chart-histogram" ref="chartRef" :style="{ height: height }">
-  </div>
+  <div class="hui-chart chart-histogram" ref="chartRef" :style="{ height }"></div>
 </template>
+
 <script>
 import Core from '@opentiny/vue-chart-core-beta'
 import { histogram } from './histogram'
+
 export default {
   name: 'ChartHistogram',
   mixins: [Core],
   data() {
     return {
       iChartName: 'BarChart',
-      option: {
-      },
+      option: {}
     }
   },
   methods: {
@@ -25,13 +25,13 @@ export default {
         extend: this.extend
       }
 
-      const option = histogram(columns, rows, this.settings, extra, true);
+      const option = histogram(columns, rows, this.settings, extra, true)
 
       this.option = {
         smooth: true,
-        ...option,
+        ...option
       }
     }
-  },
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-histogram/src/histogram.ts

@@ -1,7 +1,13 @@
-import { getFormatted, cloneDeep, getStackMap, get, set } from '@opentiny/vue-chart-core-beta/common/util'
-import { isNull } from '@opentiny/vue-chart-core-beta/common/type'
-
-import { getRows, getTooltip } from '@opentiny/vue-chart-core-beta/utils/options'
+import {
+  getFormatted,
+  cloneDeep,
+  getStackMap,
+  get,
+  set,
+  isNull,
+  getRows,
+  getTooltip
+} from '@opentiny/vue-chart-core-beta'
 
 const VALUE_AXIS_OPACITY = 0.5
 
@@ -49,8 +55,8 @@ const getBarMeaAxis = (args) => {
 
 const factoryFmt =
   ({ meaAxisType, i, digit }) =>
-    (val) =>
-      getFormatted(val, meaAxisType[i], digit)
+  (val) =>
+    getFormatted(val, meaAxisType[i], digit)
 
 const getLegend = (args) => {
   const { legendName } = args

packages/vue/src/charts-beta/chart-line/index.ts

@@ -1,9 +1,8 @@
 import ChartLine from './src/chart-line.vue'
 
-
-ChartLine.install = function (Vue:any) {
+ChartLine.install = function (Vue: any) {
   Vue.component(ChartLine.name, ChartLine)
 }
 
-export {ChartLine}
+export { ChartLine }
 export default ChartLine

packages/vue/src/charts-beta/chart-line/src/chart-line.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="hui-chart chart-box" ref="chartRef" :style="{ width: width, height: height }">
-  </div>
+  <div class="hui-chart chart-box" ref="chartRef" :style="{ width, height }"></div>
 </template>
-<script>
 
+<script>
 import Core from '@opentiny/vue-chart-core-beta'
 import { line } from './line'
+
 export default {
   name: 'ChartLine',
   mixins: [Core],
   data() {
     return {
-      iChartName: 'LineChart',
+      iChartName: 'LineChart'
     }
   },
   methods: {
@@ -22,13 +22,13 @@ export default {
         legendVisible: this.legendVisible,
         extend: this.extend
       }
-      const option = line(columns, rows, this.settings, extra);
+      const option = line(columns, rows, this.settings, extra)
 
       this.option = {
         smooth: true,
-        ...option,
+        ...option
       }
-    },
-  },
+    }
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-line/src/line.ts

@@ -1,5 +1,4 @@
-import { getRows, getYAxis, getTooltip } from '@opentiny/vue-chart-core-beta/utils/options'
-import { isNull } from '@opentiny/vue-chart-core-beta/common/type'
+import { getRows, getYAxis, getTooltip, isNull } from '@opentiny/vue-chart-core-beta'
 
 const getStackMap = (stack) => {
   const result = {}

packages/vue/src/charts-beta/chart-line/src/types.ts

@@ -2,29 +2,28 @@
  *
  * @title Props
  */
- export type TinyLineProps = {
-
+export interface TinyLineProps {
   /**
-   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准 
+   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
    *
    */
-   dimension?: object;
+  dimension?: object
 
   /**
    * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
    *
    */
-   settings?: Object;
+  settings?: Object
 
-   /**
+  /**
    * @zh 设置图表容器的宽度。
    *
    */
-    width?: string;
+  width?: string
 
   /**
    * @zh 设置图表容器的高度
    *
    */
-   height?: string;
-};
+  height?: string
+}

packages/vue/src/charts-beta/chart-pie/index.ts

@@ -1,11 +1,8 @@
 import ChartPie from './src/chart-pie.vue'
 
-
-ChartPie.install = function (Vue:any) {
+ChartPie.install = function (Vue: any) {
   Vue.component(ChartPie.name, ChartPie)
 }
 
-
-
-export {ChartPie}
+export { ChartPie }
 export default ChartPie

packages/vue/src/charts-beta/chart-pie/src/chart-pie.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="hui-chart chart-box" ref="chartRef" :style="{ width: width, height: height }">
-  </div>
+  <div class="hui-chart chart-box" ref="chartRef" :style="{ width, height }"></div>
 </template>
-<script>
 
+<script>
 import Core from '@opentiny/vue-chart-core-beta'
 import { pie } from './pie'
+
 export default {
   name: 'ChartPie',
   mixins: [Core],
 
   data() {
     return {
-      iChartName: 'PieChart',
+      iChartName: 'PieChart'
     }
   },
   methods: {
@@ -21,11 +21,10 @@ export default {
 
       const extra = {
         legendVisible: this.legendVisible,
-        tooltipVisible: this.tooltipVisible,
+        tooltipVisible: this.tooltipVisible
       }
       this.option = pie(columns, rows, this.settings, extra)
     }
-  },
-
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-pie/src/pie.ts

@@ -24,10 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy } from '@opentiny/vue-chart-core-beta/utils/deep-clone'
-import { getFormatted } from '@opentiny/vue-chart-core-beta/common/util'
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta/common/constants'
-import { isDefined } from '@opentiny/vue-chart-core-beta/utils/type'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core-beta'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]

packages/vue/src/charts-beta/chart-pie/src/types.ts

@@ -2,29 +2,28 @@
  *
  * @title Props
  */
- export type TinyPieProps = {
-
+export interface TinyPieProps {
   /**
-   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准 
+   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
    *
    */
-   dimension?: object;
+  dimension?: object
 
   /**
    * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
    *
    */
-   settings?: Object;
+  settings?: Object
 
-   /**
+  /**
    * @zh 设置图表容器的宽度。
    *
    */
-    width?: string;
+  width?: string
 
   /**
    * @zh 设置图表容器的高度
    *
    */
-   height?: string;
-};
+  height?: string
+}

packages/vue/src/charts-beta/chart-radar/index.ts

@@ -1,10 +1,8 @@
 import ChartRadar from './src/chart-radar.vue'
 
-
-ChartRadar.install = function (Vue:any) {
+ChartRadar.install = function (Vue: any) {
   Vue.component(ChartRadar.name, ChartRadar)
 }
 
-
-export {ChartRadar}
+export { ChartRadar }
 export default ChartRadar

packages/vue/src/charts-beta/chart-radar/src/chart-radar.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="hui-chart chart-box" ref="chartRef" :style="{ width: width, height: height }">
-  </div>
+  <div class="hui-chart chart-box" ref="chartRef" :style="{ width, height }"></div>
 </template>
+
 <script>
 import Core from '@opentiny/vue-chart-core-beta'
 import { radar } from './radar'
+
 export default {
   name: 'ChartRadar',
   mixins: [Core],
@@ -23,7 +24,7 @@ export default {
   },
   data() {
     return {
-      iChartName: 'RadarChart',
+      iChartName: 'RadarChart'
     }
   },
   methods: {
@@ -34,11 +35,11 @@ export default {
         legendVisible: this.legendVisible,
         extend: this.extend
       }
-      const option = radar(columns, rows, this.settings, extra);
+      const option = radar(columns, rows, this.settings, extra)
       this.option = {
-        ...option,
+        ...option
       }
-    },
-  },
+    }
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-radar/src/radar.ts

@@ -1,6 +1,4 @@
-import { getFormatted } from '@opentiny/vue-chart-core-beta/common/util'
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta/common/constants'
-import { isNull } from '@opentiny/vue-chart-core-beta/common/type'
+import { getFormatted, itemPoint, itemLabel, itemContent, isNull } from '@opentiny/vue-chart-core-beta'
 
 const getRadarLegend = (rows, dimension, legendName, legendVisible) => {
   let legendData = rows.map((row) => row[dimension])

packages/vue/src/charts-beta/chart-ring/index.ts

@@ -1,10 +1,8 @@
 import ChartRing from './src/chart-ring.vue'
 
-
-ChartRing.install = function (Vue:any) {
+ChartRing.install = function (Vue: any) {
   Vue.component(ChartRing.name, ChartRing)
 }
 
-
-export {ChartRing}
+export { ChartRing }
 export default ChartRing

packages/vue/src/charts-beta/chart-ring/src/chart-ring.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="hui-chart chart-box" ref="chartRef" :style="{ width: width, height: height }">
-  </div>
+  <div class="hui-chart chart-box" ref="chartRef" :style="{ width, height }"></div>
 </template>
+
 <script>
 import Core from '@opentiny/vue-chart-core-beta'
 import { pie } from './ring'
+
 export default {
   name: 'ChartRing',
   mixins: [Core],
   data() {
     return {
-      iChartName: 'PieChart',
+      iChartName: 'PieChart'
     }
   },
   methods: {
@@ -19,11 +20,10 @@ export default {
 
       const extra = {
         legendVisible: this.legendVisible,
-        tooltipVisible: this.tooltipVisible,
+        tooltipVisible: this.tooltipVisible
       }
       this.option = pie(columns, rows, this.settings, extra, true)
     }
-  },
-
+  }
 }
-</script>
+</script>

packages/vue/src/charts-beta/chart-ring/src/ring.ts

@@ -24,10 +24,7 @@
  * tooltipVisible boolean 是否显示提示框,true
  */
 
-import { deepCopy } from '@opentiny/vue-chart-core-beta/utils/deep-clone'
-import { getFormatted } from '@opentiny/vue-chart-core-beta/common/util'
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-chart-core-beta/common/constants'
-import { isDefined } from '@opentiny/vue-chart-core-beta/utils/type'
+import { deepCopy, getFormatted, itemPoint, itemLabel, itemContent, isDefined } from '@opentiny/vue-chart-core-beta'
 
 const PIE_RADIUS = 100
 const RING_RADIUS = [90, 100]

packages/vue/src/charts-beta/chart-ring/src/types.ts

@@ -2,29 +2,28 @@
  *
  * @title Props
  */
- export type TinyRingProps = {
-
+export interface TinyRingProps {
   /**
-   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准 
+   * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
    *
    */
-   dimension?: object;
+  dimension?: object
 
   /**
    * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
    *
    */
-   settings?: Object;
+  settings?: Object
 
-   /**
+  /**
    * @zh 设置图表容器的宽度。
    *
    */
-    width?: string;
+  width?: string
 
   /**
    * @zh 设置图表容器的高度
    *
    */
-   height?: string;
-};
+  height?: string
+}