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

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

@@ -1,199 +1,199 @@
-import _ from 'lodash'
-import { getEngine } from '@antv/g2'
-import { Instance } from '../../../types/common'
-import themes from '../../../theme'
-
-const G = getEngine('canvas')
-
-/**
- *  - 几何标记 Geometry
- *  - 度量 Scale
- *  - 坐标系 Coordinate
- *  - 可视化组件 Component
- *    - 包括坐标轴 Axis，
- *    - 图例 Legend，
- *    - 提示信息 Tooltip，
- *    - 图形标记 Annotation，
- *    - 滑动条 Slider 等。
- */
-
-function geometry(params: Instance) {
-  const { chart, options } = params
-  const { position, color, data } = options
-  // 对Pie的数据进行百分比处理
-  const total = data.reduce((t: number, c: any) => t + c[position], 0)
-  const newData = data.map((d) => {
-    d[position] = +((d[position] / total) * 100).toFixed(2)
-    return d
-  })
-  chart.data(newData)
-  const geometry = chart.interval().position(position).adjust('stack')
-  geometry.color(color)
-
-  return { ...params, geometry }
-}
-
-function coordinate(params: Instance) {
-  const { chart } = params
-  chart.coordinate('theta', {
-    radius: 0.75,
-    innerRadius: 0.6,
-  })
-  return params
-}
-
-function interaction(params: Instance) {
-  const { chart } = params
-  chart.interaction('element-active')
-  return params
-}
-
-function scale(params: Instance) {
-  const { chart, options } = params
-  //  position = x*y
-  const { position } = options
-  const y = position.split('*')[1]
-  // TODO 通用配置 y轴nice: true
-  chart.scale(y, {
-    nice: true,
-  })
-
-  return params
-}
-
-function axis(params: Instance) {
-  const { options, geometry } = params
-  let { position, label = true, color } = options
-
-  if (label) {
-    label =
-      label === true
-        ? (data: Record<string, any>) => {
-            return `${data[color]}`
-          }
-        : label
-    geometry!.label(position[1], {
-      content: label,
-    })
-  }
-  return params
-}
-
-function annotation(params: Instance) {
-  return params
-}
-
-function tooltip(params: Instance) {
-  const { chart } = params
-  // tooltip样式
-  chart.tooltip({
-    showTitle: false,
-    showMarkers: false,
-    itemTpl:
-      '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
-  })
-
-  return params
-}
-
-function legend(params: Instance) {
-  const { chart, options } = params
-  const { color, legend } = options
-
-  if (!_.isNil(legend)) {
-    chart.legend(legend)
-  } else {
-    chart.legend(color, {
-      position: 'right',
-    }) // 只更改 x 维度对应的图例的显示位置
-  }
-
-  return params
-}
-
-function theme(params: Instance) {
-  const { geometry, options, chart } = params
-  const { theme, position } = options
-  const themeConfig = themes[theme as 'ocean']?.chart
-  chart.tooltip({
-    showTitle: false,
-    showMarkers: false,
-    itemTpl: '<li class="g2-tooltip-list-item">{name}: {value}%</li>',
-  })
-  if (themeConfig) {
-    const { ghost } = themeConfig.pie
-
-    if (ghost) {
-      // ---------- 标注配置 -----------------
-      chart.annotation().shape({
-        top: false,
-        render: (container, chart, c) => {
-          const group = container.addGroup({})
-          const center = { x: c.parsePosition({}).x, y: chart.height / 2 } // NOTE: ts报错应该是antv的类型定义有问题，明明有这个属性
-          // 外圈
-          group.addShape({
-            type: 'circle',
-            attrs: {
-              x: center.x,
-              y: center.y,
-              r: chart.height / 2 - 35 - chart.appendPadding[0] / 2,
-              fill: '#15347f', // TODO 颜色配置都扔到/theme目录下
-            },
-          })
-          // 内圈
-          group.addShape({
-            type: 'circle',
-            attrs: {
-              x: center.x,
-              y: center.y,
-              r: chart.height / 2 - 80,
-              fill: '#030646',
-            },
-          })
-        },
-      })
-    }
-
-    // ---------- tiptop配置 ----------------
-    chart.tooltip({
-      showTitle: false,
-      showMarkers: false,
-      itemTpl: '<li class="g2-tooltip-list-item">{name}: {value}%</li>',
-    })
-
-    geometry!.label(position, {
-      offset: '80%',
-      labelLine: null,
-      content: (a, b) => {
-        const group = new G.Group({})
-        group.addShape({
-          type: 'text',
-          position: 'relative',
-          attrs: {
-            x: 0,
-            y: 0,
-            textBaseline: 'top',
-            text: a.item,
-            fontSize: 12,
-            fill: b.color,
-          },
-        })
-        return group
-      },
-    })
-  }
-}
-
-export function processor(params: Instance) {
-  return _.flow(
-    geometry,
-    coordinate,
-    interaction,
-    axis,
-    legend,
-    annotation,
-    tooltip,
-    scale,
-    theme
-  )(params)
-}
+import _ from 'lodash'
+import { getEngine } from '@antv/g2'
+import { Instance } from '../../../types/common'
+import themes from '../../../theme'
+
+const G = getEngine('canvas')
+
+/**
+ *  - 几何标记 Geometry
+ *  - 度量 Scale
+ *  - 坐标系 Coordinate
+ *  - 可视化组件 Component
+ *    - 包括坐标轴 Axis，
+ *    - 图例 Legend，
+ *    - 提示信息 Tooltip，
+ *    - 图形标记 Annotation，
+ *    - 滑动条 Slider 等。
+ */
+
+function geometry(params: Instance) {
+  const { chart, options } = params
+  const { position, color, data } = options
+  // 对Pie的数据进行百分比处理
+  const total = data.reduce((t: number, c: any) => t + c[position], 0)
+  const newData = data.map((d) => {
+    d[position] = +((d[position] / total) * 100).toFixed(2)
+    return d
+  })
+  chart.data(newData)
+  const geometry = chart.interval().position(position).adjust('stack')
+  geometry.color(color)
+
+  return { ...params, geometry }
+}
+
+function coordinate(params: Instance) {
+  const { chart } = params
+  chart.coordinate('theta', {
+    radius: 0.75,
+    innerRadius: 0.6,
+  })
+  return params
+}
+
+function interaction(params: Instance) {
+  const { chart } = params
+  chart.interaction('element-active')
+  return params
+}
+
+function scale(params: Instance) {
+  const { chart, options } = params
+  //  position = x*y
+  const { position } = options
+  const y = position.split('*')[1]
+  // TODO 通用配置 y轴nice: true
+  chart.scale(y, {
+    nice: true,
+  })
+
+  return params
+}
+
+function axis(params: Instance) {
+  const { options, geometry } = params
+  let { position, label = true, color } = options
+
+  if (label) {
+    label =
+      label === true
+        ? (data: Record<string, any>) => {
+            return `${data[color]}`
+          }
+        : label
+    geometry!.label(position[1], {
+      content: label,
+    })
+  }
+  return params
+}
+
+function annotation(params: Instance) {
+  return params
+}
+
+function tooltip(params: Instance) {
+  const { chart } = params
+  // tooltip样式
+  chart.tooltip({
+    showTitle: false,
+    showMarkers: false,
+    itemTpl:
+      '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
+  })
+
+  return params
+}
+
+function legend(params: Instance) {
+  const { chart, options } = params
+  const { color, legend } = options
+
+  if (!_.isNil(legend)) {
+    chart.legend(legend)
+  } else {
+    chart.legend(color, {
+      position: 'right',
+    }) // 只更改 x 维度对应的图例的显示位置
+  }
+
+  return params
+}
+
+function theme(params: Instance) {
+  const { geometry, options, chart } = params
+  const { theme, position } = options
+  const themeConfig = themes[theme as 'ocean']?.chart
+  chart.tooltip({
+    showTitle: false,
+    showMarkers: false,
+    itemTpl: '<li class="g2-tooltip-list-item">{name}: {value}%</li>',
+  })
+  if (themeConfig) {
+    const { ghost } = themeConfig.pie
+
+    if (ghost) {
+      // ---------- 标注配置 -----------------
+      chart.annotation().shape({
+        top: false,
+        render: (container, chart, c) => {
+          const group = container.addGroup({})
+          const center = { x: c.parsePosition({}).x, y: chart.height / 2 } // NOTE: ts报错应该是antv的类型定义有问题，明明有这个属性
+          // 外圈
+          group.addShape({
+            type: 'circle',
+            attrs: {
+              x: center.x,
+              y: center.y,
+              r: chart.height / 2 - 35 - chart.appendPadding[0] / 2,
+              fill: '#15347f', // TODO 颜色配置都扔到/theme目录下
+            },
+          })
+          // 内圈
+          group.addShape({
+            type: 'circle',
+            attrs: {
+              x: center.x,
+              y: center.y,
+              r: chart.height / 2 - 80,
+              fill: '#030646',
+            },
+          })
+        },
+      })
+    }
+
+    // ---------- tiptop配置 ----------------
+    chart.tooltip({
+      showTitle: false,
+      showMarkers: false,
+      itemTpl: '<li class="g2-tooltip-list-item">{name}: {value}%</li>',
+    })
+
+    geometry!.label(position, {
+      offset: '80%',
+      labelLine: null,
+      content: (a, b) => {
+        const group = new G.Group({})
+        group.addShape({
+          type: 'text',
+          position: 'relative',
+          attrs: {
+            x: 0,
+            y: 0,
+            textBaseline: 'top',
+            text: a.item,
+            fontSize: 12,
+            fill: b.color,
+          },
+        })
+        return group
+      },
+    })
+  }
+}
+
+export function processor(params: Instance) {
+  return _.flow(
+    geometry,
+    coordinate,
+    interaction,
+    axis,
+    legend,
+    annotation,
+    tooltip,
+    scale,
+    theme
+  )(params)
+}

package/src/chart/pie/core/index.ts

@@ -1,9 +1,9 @@
-import { Base } from '../../base/index'
-import { processor } from './config'
-
-export default class Pie extends Base {
-  name = 'pie'
-  getProcessor() {
-    return processor
-  }
-}
+import { Base } from '../../base/index'
+import { processor } from './config'
+
+export default class Pie extends Base {
+  name = 'pie'
+  getProcessor() {
+    return processor
+  }
+}

package/src/chart/pie/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, forwardRef } from 'react'
-import _Pie from './core'
-import useChart from '../../common/hooks/useChart'
-import { ChartProps } from '../../types/common'
-
-const Pie: FC<ChartProps> = forwardRef((props, ref) => {
-  const { container } = useChart(_Pie, props)
-
-  return <div ref={container} />
-})
-
-export { Pie }
+import React, { FC, forwardRef } from 'react'
+import _Pie from './core'
+import useChart from '../../common/hooks/useChart'
+import { ChartProps } from '../../types/common'
+
+const Pie: FC<ChartProps> = forwardRef((props, ref) => {
+  const { container } = useChart(_Pie, props)
+
+  return <div ref={container} />
+})
+
+export { Pie }

package/src/chart/pie/stories.tsx

@@ -1,39 +1,39 @@
-import React from 'react'
-import { Pie as PieChart } from './index'
-
-const data = [
-  { item: '事例一', count: 40, percent: 0.4 },
-  { item: '事例二', count: 21, percent: 0.21 },
-  { item: '事例三', count: 107, percent: 0.17 },
-  { item: '事例四', count: 13, percent: 0.13 },
-  { item: '事例五', count: 9, percent: 0.09 },
-]
-
-export const Pie = () => (
-  <div>
-    <h1>基础</h1>
-    <PieChart
-      data={data}
-      options={{
-        height: 300,
-        position: 'count',
-        color: 'item',
-      }}
-    />
-    <h1>深蓝主题</h1>
-    <PieChart
-      data={data}
-      options={{
-        height: 300,
-        theme: 'ocean',
-        position: 'count',
-        color: 'item',
-        legend: false,
-      }}
-    />
-  </div>
-)
-
-export default {
-  title: 'Chart/饼状图 Pie',
-}
+import React from 'react'
+import { Pie as PieChart } from './index'
+
+const data = [
+  { item: '事例一', count: 40, percent: 0.4 },
+  { item: '事例二', count: 21, percent: 0.21 },
+  { item: '事例三', count: 107, percent: 0.17 },
+  { item: '事例四', count: 13, percent: 0.13 },
+  { item: '事例五', count: 9, percent: 0.09 },
+]
+
+export const Pie = () => (
+  <div>
+    <h1>基础</h1>
+    <PieChart
+      data={data}
+      options={{
+        height: 300,
+        position: 'count',
+        color: 'item',
+      }}
+    />
+    <h1>深蓝主题</h1>
+    <PieChart
+      data={data}
+      options={{
+        height: 300,
+        theme: 'ocean',
+        position: 'count',
+        color: 'item',
+        legend: false,
+      }}
+    />
+  </div>
+)
+
+export default {
+  title: 'Chart/饼状图 Pie',
+}

package/src/common/hooks/useChart.ts

@@ -1,40 +1,40 @@
-import { useEffect, useRef } from 'react'
-import { Base } from '../../chart/base/index'
-import { ChartOptions, ChartProps } from '../../types/common'
-import _ from 'lodash'
-
-function useChart<T extends Base>(ChartClass: any, props: ChartProps) {
-  const container = useRef<HTMLDivElement>(null)
-  const chart = useRef<T>(null!)
-  const chartOptions = useRef<ChartOptions>(null!)
-  useEffect(() => {
-    if (container && !container.current) {
-      return
-    }
-
-    const instance: T = new ChartClass(container.current, {
-      data: props.data,
-      ...props.options,
-    })
-    chart.current = instance
-    instance.render()
-  }, [])
-
-  useEffect(() => {
-    if (chart.current && !_.isEqual(chartOptions.current, props.options)) {
-      chart.current.updateOptions(props.options)
-      chartOptions.current = props.options
-    }
-  }, [props.options])
-
-  useEffect(() => {
-    chart.current.updateData(props.data)
-  }, [props.data])
-
-  return {
-    container,
-    chart,
-  }
-}
-
-export default useChart
+import { useEffect, useRef } from 'react'
+import { Base } from '../../chart/base/index'
+import { ChartOptions, ChartProps } from '../../types/common'
+import _ from 'lodash'
+
+function useChart<T extends Base>(ChartClass: any, props: ChartProps) {
+  const container = useRef<HTMLDivElement>(null)
+  const chart = useRef<T>(null!)
+  const chartOptions = useRef<ChartOptions>(null!)
+  useEffect(() => {
+    if (container && !container.current) {
+      return
+    }
+
+    const instance: T = new ChartClass(container.current, {
+      data: props.data,
+      ...props.options,
+    })
+    chart.current = instance
+    instance.render()
+  }, [])
+
+  useEffect(() => {
+    if (chart.current && !_.isEqual(chartOptions.current, props.options)) {
+      chart.current.updateOptions(props.options)
+      chartOptions.current = props.options
+    }
+  }, [props.options])
+
+  useEffect(() => {
+    chart.current.updateData(props.data)
+  }, [props.data])
+
+  return {
+    container,
+    chart,
+  }
+}
+
+export default useChart

package/src/common/utils/dom.ts

@@ -1,22 +1,22 @@
-export type Size = {
-  width: number
-  height: number
-}
-
-export function getContainerSize(ele: HTMLElement): Size {
-  if (!ele) {
-    return { width: 0, height: 0 }
-  }
-  const style = getComputedStyle(ele)
-
-  return {
-    width:
-      (ele.clientWidth || parseInt(style.width, 10)) -
-      parseInt(style.paddingLeft, 10) -
-      parseInt(style.paddingRight, 10),
-    height:
-      (ele.clientHeight || parseInt(style.height, 10)) -
-      parseInt(style.paddingTop, 10) -
-      parseInt(style.paddingBottom, 10),
-  }
-}
+export type Size = {
+  width: number
+  height: number
+}
+
+export function getContainerSize(ele: HTMLElement): Size {
+  if (!ele) {
+    return { width: 0, height: 0 }
+  }
+  const style = getComputedStyle(ele)
+
+  return {
+    width:
+      (ele.clientWidth || parseInt(style.width, 10)) -
+      parseInt(style.paddingLeft, 10) -
+      parseInt(style.paddingRight, 10),
+    height:
+      (ele.clientHeight || parseInt(style.height, 10)) -
+      parseInt(style.paddingTop, 10) -
+      parseInt(style.paddingBottom, 10),
+  }
+}

package/src/index.ts

@@ -1,11 +1,11 @@
-import { registerTheme } from '@antv/g2'
-import theme, { createThemeByStyleSheet } from './theme'
-
-// 注册深蓝主题
-registerTheme('ocean', createThemeByStyleSheet(theme.ocean))
-// 注册橙色主题
-registerTheme('sunset', createThemeByStyleSheet(theme.sunset))
-
-export { Line } from './chart/line/index'
-export { Pie } from './chart/pie/index'
-export { Bar } from './chart/bar/index'
+import { registerTheme } from '@antv/g2'
+import theme, { createThemeByStyleSheet } from './theme'
+
+// 注册深蓝主题
+registerTheme('ocean', createThemeByStyleSheet(theme.ocean))
+// 注册橙色主题
+registerTheme('sunset', createThemeByStyleSheet(theme.sunset))
+
+export { Line } from './chart/line/index'
+export { Pie } from './chart/pie/index'
+export { Bar } from './chart/bar/index'