@gm-pc/vision 1.25.0-beta.0 → 1.25.0

package/src/chart/base/index.ts

@@ -1,135 +1,135 @@
-import { Chart } from '@antv/g2'
-import { bind } from 'size-sensor'
-import { ChartOptions, Instance } from '../../types/common'
-import { getContainerSize } from '../../common/utils/dom'
-import _ from 'lodash'
-
-export abstract class Base {
-  chart: Chart
-
-  options: ChartOptions
-
-  container: HTMLElement
-
-  unbind: (() => void) | undefined
-
-  abstract name: string
-
-  /**
-   * 处理配置，geometry annotation axis...
-   * */
-  abstract getProcessor(): (params: Instance) => Instance
-
-  constructor(container: string | HTMLElement, options: ChartOptions) {
-    this.container =
-      typeof container === 'string'
-        ? (document.querySelector(container)! as HTMLElement)
-        : container
-    this.options = options
-    this.chart = null!
-    this.unbind = undefined
-
-    this.createG2()
-
-    this.bindSizeSensor()
-  }
-
-  createG2() {
-    const { width, height, padding } = this.options
-    // 通用配置
-    this.chart = new Chart({
-      container: this.container,
-      width,
-      height,
-      autoFit: false,
-      appendPadding: padding || [24, 24, 24, 24],
-    })
-  }
-
-  initConfig() {
-    let { data, theme = '', position } = this.options
-    data = this.processData(data, position)
-
-    this.chart.data(data).theme(theme)
-
-    const processor = this.getProcessor()
-    processor({
-      chart: this.chart,
-      options: this.options,
-    })
-  }
-
-  processData(data: any, position: string) {
-    if (position) {
-      const [x, y] = position.split('*')
-      // 数字要转成number类型，antv要求
-      return _.map(data, (d) => {
-        d[x] = _.isNaN(+d[x]) ? d[x] : +d[x]
-        d[y] = _.isNaN(+d[y]) ? d[y] : +d[y]
-        return d
-      })
-    }
-    return data
-  }
-
-  render() {
-    this.chart.clear()
-
-    this.initConfig()
-
-    this.chart.render()
-  }
-
-  updateOptions(options: ChartOptions) {
-    this.options = _.merge(options, this.options)
-    this.render()
-  }
-
-  updateData(data: any) {
-    this.options.data = data
-    this.render()
-  }
-
-  unbindSizeSensor() {
-    if (this.unbind) {
-      this.unbind()
-      this.unbind = undefined
-    }
-  }
-
-  bindSizeSensor() {
-    if (this.unbind) {
-      return
-    }
-
-    const { autoFit = true } = this.options
-    if (autoFit) {
-      this.unbind = bind(this.container, () => {
-        // 获取最新的宽高信息
-        const { width, height } = getContainerSize(this.container)
-
-        // 主要是防止绑定的时候触发 resize 回调
-        if (width !== this.chart.width || height !== this.chart.height) {
-          this.triggerResize()
-        }
-      })
-    }
-  }
-
-  triggerResize() {
-    // 解决pie宽高变化后导致annotation没有重写render
-    if (this.name === 'pie') {
-      this.render()
-    }
-    this.chart.forceFit()
-  }
-
-  destroy() {
-    this.unbindSizeSensor()
-    this.chart.destroy()
-  }
-
-  resize() {
-    this.chart.forceFit()
-  }
-}
+import { Chart } from '@antv/g2'
+import { bind } from 'size-sensor'
+import { ChartOptions, Instance } from '../../types/common'
+import { getContainerSize } from '../../common/utils/dom'
+import _ from 'lodash'
+
+export abstract class Base {
+  chart: Chart
+
+  options: ChartOptions
+
+  container: HTMLElement
+
+  unbind: (() => void) | undefined
+
+  abstract name: string
+
+  /**
+   * 处理配置，geometry annotation axis...
+   * */
+  abstract getProcessor(): (params: Instance) => Instance
+
+  constructor(container: string | HTMLElement, options: ChartOptions) {
+    this.container =
+      typeof container === 'string'
+        ? (document.querySelector(container)! as HTMLElement)
+        : container
+    this.options = options
+    this.chart = null!
+    this.unbind = undefined
+
+    this.createG2()
+
+    this.bindSizeSensor()
+  }
+
+  createG2() {
+    const { width, height, padding } = this.options
+    // 通用配置
+    this.chart = new Chart({
+      container: this.container,
+      width,
+      height,
+      autoFit: false,
+      appendPadding: padding || [24, 24, 24, 24],
+    })
+  }
+
+  initConfig() {
+    let { data, theme = '', position } = this.options
+    data = this.processData(data, position)
+
+    this.chart.data(data).theme(theme)
+
+    const processor = this.getProcessor()
+    processor({
+      chart: this.chart,
+      options: this.options,
+    })
+  }
+
+  processData(data: any, position: string) {
+    if (position) {
+      const [x, y] = position.split('*')
+      // 数字要转成number类型，antv要求
+      return _.map(data, (d) => {
+        d[x] = _.isNaN(+d[x]) ? d[x] : +d[x]
+        d[y] = _.isNaN(+d[y]) ? d[y] : +d[y]
+        return d
+      })
+    }
+    return data
+  }
+
+  render() {
+    this.chart.clear()
+
+    this.initConfig()
+
+    this.chart.render()
+  }
+
+  updateOptions(options: ChartOptions) {
+    this.options = _.merge(options, this.options)
+    this.render()
+  }
+
+  updateData(data: any) {
+    this.options.data = data
+    this.render()
+  }
+
+  unbindSizeSensor() {
+    if (this.unbind) {
+      this.unbind()
+      this.unbind = undefined
+    }
+  }
+
+  bindSizeSensor() {
+    if (this.unbind) {
+      return
+    }
+
+    const { autoFit = true } = this.options
+    if (autoFit) {
+      this.unbind = bind(this.container, () => {
+        // 获取最新的宽高信息
+        const { width, height } = getContainerSize(this.container)
+
+        // 主要是防止绑定的时候触发 resize 回调
+        if (width !== this.chart.width || height !== this.chart.height) {
+          this.triggerResize()
+        }
+      })
+    }
+  }
+
+  triggerResize() {
+    // 解决pie宽高变化后导致annotation没有重写render
+    if (this.name === 'pie') {
+      this.render()
+    }
+    this.chart.forceFit()
+  }
+
+  destroy() {
+    this.unbindSizeSensor()
+    this.chart.destroy()
+  }
+
+  resize() {
+    this.chart.forceFit()
+  }
+}

package/src/chart/line/core/config.ts

@@ -1,209 +1,209 @@
-import _ from 'lodash'
-import { Instance } from '../../../types/common'
-import { flatData, getPositionAndColor } from './utils'
-import themes from '../../../theme'
-
-/**
- * Geek Blue 极客蓝 #5B8FF9
- * Cyan 翡翠绿 #5AD8A6
- * Grey 商务灰 #5D7092
- * Sunrise Yellow 旭日黄 #F6BD16
- * Dust Red 薄暮红 #E86452
- * Daybreak Blue 破晓蓝 #6DC8EC
- * Golden Purple 罗兰紫 #945FB9
- * Sunset Orange 落日橘 #FF9845
- * Dark Green 天水青 #1E9493
- * Magenta 桃花粉 #FF99C3
- */
-const colors = [
-  '#5B8FF9',
-  '#5AD8A6',
-  '#5D7092',
-  '#F6BD16',
-  '#E86452',
-  '#6DC8EC',
-  '#945FB9',
-  '#FF9845',
-  '#1E9493',
-  '#FF99C3',
-]
-
-/**
- *  - 几何标记 Geometry
- *  - 度量 Scale
- *  - 坐标系 Coordinate
- *  - 可视化组件 Component
- *    - 包括坐标轴 Axis，
- *    - 图例 Legend，
- *    - 提示信息 Tooltip，
- *    - 图形标记 Annotation，
- *    - 滑动条 Slider 等。
- */
-
-function geometry(params: Instance) {
-  const { chart, options } = params
-
-  const { position, color } = getPositionAndColor(params)
-
-  let geometry
-  if (color) {
-    geometry = chart.line().position(position).color(color)
-  } else {
-    geometry = chart.line().position(position)
-  }
-
-  return { ...params, geometry }
-}
-
-function scale(params: Instance) {
-  const { chart, options } = params
-
-  const { position, data, xFieldName, yFieldName, scale = {} } = options
-  if (_.isArray(position) || !position) {
-    if (data.length) {
-      const x = position ? position[0].split('*')[0] : xFieldName
-      const d = flatData(data, x, yFieldName)
-      chart.scale({
-        value: {
-          nice: true,
-          formatter: (value) => value,
-        },
-        ...scale,
-      })
-      chart.scale({
-        [x]: {
-          nice: true,
-          formatter: (value) => value,
-        },
-        ...scale,
-      })
-      chart.data(d)
-    }
-  } else {
-    const y = position.split('*')[1]
-    // TODO 通用配置 y轴nice: true
-    chart.scale({
-      [y]: {
-        nice: true,
-      },
-      ...scale,
-    })
-  }
-
-  return params
-}
-
-function axis(params: Instance) {
-  const { chart, options } = params
-  const { position, color } = options
-  if (_.isArray(position)) {
-    chart.axis('value', {
-      label: {
-        formatter: (text) => text,
-      },
-    })
-  }
-  return params
-}
-
-function annotation(params: Instance) {
-  const { chart, options } = params
-  const { data, annotation } = options
-  // 辅助线
-  if (annotation) {
-    const { text, value } = annotation
-    const yPosition = typeof value === 'string' ? value : value(data)
-    chart.annotation().line({
-      start: ['min', yPosition],
-      end: ['max', yPosition],
-      style: {
-        stroke: 'red',
-        lineWidth: 1,
-        lineDash: [3, 3],
-      },
-      text: {
-        position: 'right',
-        content: text,
-      },
-    })
-  }
-
-  return params
-}
-
-function tooltip(params: Instance) {
-  const { chart } = params
-  // tooltip样式
-  chart.tooltip({
-    showMarkers: true,
-    showCrosshairs: true,
-    shared: true,
-    domStyles: {
-      'g2-tooltip-marker': {
-        width: '10px',
-        height: '2px',
-        borderRadius: '0%',
-        display: 'inline-block',
-        marginBottom: '4px',
-        marginRight: '6px',
-      },
-    },
-  })
-
-  return params
-}
-
-function legend(params: Instance) {
-  const { chart, options } = params
-  const { legend } = options
-
-  if (legend !== undefined) {
-    chart.legend(legend)
-  }
-
-  return params
-}
-
-function theme(params: Instance) {
-  const { chart, options, geometry } = params
-  const { theme } = options
-  if (theme) {
-    const themeConfig = themes[theme as 'ocean'].chart
-
-    if (themeConfig) {
-      // ---------- geometry配置 ----------------
-      geometry!.shape(themeConfig.line.shape).style(themeConfig.line.style)
-
-      // ---------- tiptop配置 ----------------
-      chart.tooltip({
-        showMarkers: true,
-        showCrosshairs: true,
-        shared: true,
-        domStyles: {
-          'g2-tooltip-marker': {
-            display: 'none',
-          },
-        },
-      })
-
-      // ---------- area图 ----------------
-      if (themeConfig.line.area) {
-        const { position, color } = getPositionAndColor(params)
-        chart
-          .area()
-          .position(position)
-          .color(color)
-          .shape(themeConfig.line.area.shape)
-          .style({
-            fill: themeConfig.line.area.fill,
-            fillOpacity: 1,
-          })
-      }
-    }
-  }
-  return params
-}
-
-export function processor(params: Instance) {
-  return _.flow(geometry, annotation, tooltip, scale, axis, legend, theme)(params)
-}
+import _ from 'lodash'
+import { Instance } from '../../../types/common'
+import { flatData, getPositionAndColor } from './utils'
+import themes from '../../../theme'
+
+/**
+ * Geek Blue 极客蓝 #5B8FF9
+ * Cyan 翡翠绿 #5AD8A6
+ * Grey 商务灰 #5D7092
+ * Sunrise Yellow 旭日黄 #F6BD16
+ * Dust Red 薄暮红 #E86452
+ * Daybreak Blue 破晓蓝 #6DC8EC
+ * Golden Purple 罗兰紫 #945FB9
+ * Sunset Orange 落日橘 #FF9845
+ * Dark Green 天水青 #1E9493
+ * Magenta 桃花粉 #FF99C3
+ */
+const colors = [
+  '#5B8FF9',
+  '#5AD8A6',
+  '#5D7092',
+  '#F6BD16',
+  '#E86452',
+  '#6DC8EC',
+  '#945FB9',
+  '#FF9845',
+  '#1E9493',
+  '#FF99C3',
+]
+
+/**
+ *  - 几何标记 Geometry
+ *  - 度量 Scale
+ *  - 坐标系 Coordinate
+ *  - 可视化组件 Component
+ *    - 包括坐标轴 Axis，
+ *    - 图例 Legend，
+ *    - 提示信息 Tooltip，
+ *    - 图形标记 Annotation，
+ *    - 滑动条 Slider 等。
+ */
+
+function geometry(params: Instance) {
+  const { chart, options } = params
+
+  const { position, color } = getPositionAndColor(params)
+
+  let geometry
+  if (color) {
+    geometry = chart.line().position(position).color(color)
+  } else {
+    geometry = chart.line().position(position)
+  }
+
+  return { ...params, geometry }
+}
+
+function scale(params: Instance) {
+  const { chart, options } = params
+
+  const { position, data, xFieldName, yFieldName, scale = {} } = options
+  if (_.isArray(position) || !position) {
+    if (data.length) {
+      const x = position ? position[0].split('*')[0] : xFieldName
+      const d = flatData(data, x, yFieldName)
+      chart.scale({
+        value: {
+          nice: true,
+          formatter: (value) => value,
+        },
+        ...scale,
+      })
+      chart.scale({
+        [x]: {
+          nice: true,
+          formatter: (value) => value,
+        },
+        ...scale,
+      })
+      chart.data(d)
+    }
+  } else {
+    const y = position.split('*')[1]
+    // TODO 通用配置 y轴nice: true
+    chart.scale({
+      [y]: {
+        nice: true,
+      },
+      ...scale,
+    })
+  }
+
+  return params
+}
+
+function axis(params: Instance) {
+  const { chart, options } = params
+  const { position, color } = options
+  if (_.isArray(position)) {
+    chart.axis('value', {
+      label: {
+        formatter: (text) => text,
+      },
+    })
+  }
+  return params
+}
+
+function annotation(params: Instance) {
+  const { chart, options } = params
+  const { data, annotation } = options
+  // 辅助线
+  if (annotation) {
+    const { text, value } = annotation
+    const yPosition = typeof value === 'string' ? value : value(data)
+    chart.annotation().line({
+      start: ['min', yPosition],
+      end: ['max', yPosition],
+      style: {
+        stroke: 'red',
+        lineWidth: 1,
+        lineDash: [3, 3],
+      },
+      text: {
+        position: 'right',
+        content: text,
+      },
+    })
+  }
+
+  return params
+}
+
+function tooltip(params: Instance) {
+  const { chart } = params
+  // tooltip样式
+  chart.tooltip({
+    showMarkers: true,
+    showCrosshairs: true,
+    shared: true,
+    domStyles: {
+      'g2-tooltip-marker': {
+        width: '10px',
+        height: '2px',
+        borderRadius: '0%',
+        display: 'inline-block',
+        marginBottom: '4px',
+        marginRight: '6px',
+      },
+    },
+  })
+
+  return params
+}
+
+function legend(params: Instance) {
+  const { chart, options } = params
+  const { legend } = options
+
+  if (legend !== undefined) {
+    chart.legend(legend)
+  }
+
+  return params
+}
+
+function theme(params: Instance) {
+  const { chart, options, geometry } = params
+  const { theme } = options
+  if (theme) {
+    const themeConfig = themes[theme as 'ocean'].chart
+
+    if (themeConfig) {
+      // ---------- geometry配置 ----------------
+      geometry!.shape(themeConfig.line.shape).style(themeConfig.line.style)
+
+      // ---------- tiptop配置 ----------------
+      chart.tooltip({
+        showMarkers: true,
+        showCrosshairs: true,
+        shared: true,
+        domStyles: {
+          'g2-tooltip-marker': {
+            display: 'none',
+          },
+        },
+      })
+
+      // ---------- area图 ----------------
+      if (themeConfig.line.area) {
+        const { position, color } = getPositionAndColor(params)
+        chart
+          .area()
+          .position(position)
+          .color(color)
+          .shape(themeConfig.line.area.shape)
+          .style({
+            fill: themeConfig.line.area.fill,
+            fillOpacity: 1,
+          })
+      }
+    }
+  }
+  return params
+}
+
+export function processor(params: Instance) {
+  return _.flow(geometry, annotation, tooltip, scale, axis, legend, theme)(params)
+}