@ebiz/designer-components 0.0.47 → 0.0.48

package/src/components/charts/components/ProcessChart/BaseOption.js

@@ -1,296 +1,296 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - 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.
- *
- */
-
-import chartToken from "./chartToken";
-import yAxisBase from '../../option/config/yAxis/base'
-import xAxisBase from '../../option/config/xAxis/base'
-import merge from "../../util/merge";
-
-// 进度图的图表类型名称
-const CHARTTYPENAME = {
-  ProcessBarChart: 'ProcessBarChart',
-  StackProcessBarChart: 'StackProcessBarChart',
-};
-// 标识是否为双向进度图
-const PROCESSBARTYPE = 'double-sides';
-// 基础进度图的默认单位
-const BASICUNIT = '%'
-
-const SERIES_NAME = {
-  markLine: 'markLine',
-  background: 'background',
-  seriesName: 'seriesName'
-}
-
-function getBarWidth(stack) {
-  return stack ? chartToken.stackBarWidth : chartToken.barWidth
-}
-
-// 文本与柱子居中对齐，文本与柱子的间距8（行高一半4+间距4）
-function getOffsetY() {
-  return chartToken.fontSize + 8
-}
-
-// 进度图数据名称的series
-function getDataNameSeries(stack = false) {
-  const barWidth = getBarWidth(stack)
-  const offset = getOffsetY()
-  return {
-    // 用来做前面的文本显示
-    name: SERIES_NAME.seriesName,
-    type: 'bar',
-    barWidth,
-    barGap: '-100%',
-    // 这条series不响应鼠标事件
-    silent: true,
-    label: {
-      show: true,
-      color: chartToken.nameColor,
-      position: [0, -offset],
-      fontSize: chartToken.fontSize,
-      formatter(params) {
-        return params.name === 'null' || params.name === 'undefined' ? '' : params.name;
-      },
-    },
-    data: undefined,
-  }
-}
-// 进度图背景柱子的series
-function getBackgroundSeries(stack = false) {
-  const barWidth = getBarWidth(stack)
-  const offset = getOffsetY()
-  return {
-    // 底色 +右侧label文本显示
-    name: SERIES_NAME.background,
-    type: 'bar',
-    barWidth,
-    barGap: '-100%',
-    itemStyle: {
-      color: chartToken.itemBgEmpty,
-      borderRadius: chartToken.borderRadius,
-    },
-    cursor: 'auto',
-    emphasis: {
-      disabled: true,
-    },
-    label: {
-      distance: 0,
-      show: true,
-      color: chartToken.labelColor,
-      offset: [0, -offset],
-      position: 'insideTopRight',
-      fontSize: chartToken.fontSize,
-      formatter: undefined,
-    },
-    data: undefined,
-  }
-}
-
-// 用于显示基础进度图的实际数据的series
-function getDataSeries(stack = false) {
-  const barWidth = getBarWidth(stack)
-  return {
-    name: 'data',
-    type: 'bar',
-    zlevel: 2,
-    barWidth,
-    cursor: 'pointer',
-    itemStyle: {
-      borderRadius: chartToken.borderRadius,
-      color: undefined,
-    },
-    data: undefined,
-    label: {
-      distance: 0,
-      show: false,
-      fontSize: chartToken.labelFontSize,
-      color: chartToken.labelColor,
-      formatter: undefined,
-    },
-  }
-}
-
-function getDoubleBackgroundSeries(left = true) {
-  return {
-    // 左侧底色
-    name: SERIES_NAME.background,
-    type: 'bar',
-    xAxisIndex: left ? 0 : 1,
-    yAxisIndex: left ? 0 : 1,
-    barWidth: chartToken.barWidth,
-    barGap: '-100%',
-    itemStyle: {
-      color: chartToken.itemBgEmpty,
-      borderRadius: left ? [chartToken.borderRadius, 0, 0, chartToken.borderRadius] : [0, chartToken.borderRadius, chartToken.borderRadius, 0],
-    },
-    emphasis: {
-      disabled: true,
-    },
-    label: {
-      show: true,
-      offset: [0, 0],
-      position: left ? 'insideBottomLeft' : 'insideBottomRight',
-      formatter: undefined,
-      rich: {
-        name: {
-          fontSize: chartToken.fontSize,
-          color: chartToken.nameColor,
-          lineHeight: 14,
-          padding: [0, 0, 20, 0],
-        },
-        value: {
-          fontSize: chartToken.fontSize,
-          color: chartToken.labelColor,
-          fontWeight: 'bold',
-          align: left ? 'left' : 'right',
-        },
-      },
-    },
-    data: undefined,
-  }
-}
-
-function getDoubleDataNameSeries(left = true) {
-  return {
-    name: undefined,
-    xAxisIndex: left ? 0 : 1,
-    yAxisIndex: left ? 0 : 1,
-    type: 'bar',
-    zlevel: 2,
-    barWidth: chartToken.barWidth,
-    itemStyle: {
-      borderRadius: left ? [chartToken.borderRadius, 0, 0, chartToken.borderRadius] : [0, chartToken.borderRadius, chartToken.borderRadius, 0],
-      color: undefined,
-    },
-    data: undefined,
-    emphasis: {
-      disabled: true,
-    },
-    label: {
-      show: false,
-    },
-  }
-}
-
-function getDoubleXaxis() {
-  const left = xAxisBase()
-  const extraLeft = {
-    type: 'value',
-    gridIndex: 0,
-    inverse: true,
-    axisLabel: {
-      show: false,
-    },
-    splitLine: {
-      show: true
-    },
-    max: 'dataMax',
-  }
-  merge(left, extraLeft)
-  const right = xAxisBase()
-  const extraRight = {
-    type: 'value',
-    gridIndex: 1,
-    axisLabel: {
-      show: false,
-    },
-    splitLine: {
-      show: true
-    },
-    max: 'dataMax',
-  }
-  merge(right, extraRight)
-  return [left, right]
-}
-
-
-function getDoubleYaxis() {
-  const left = yAxisBase()
-  const extraLeft = {
-    type: 'category',
-    gridIndex: 0,
-    inverse: true,
-    axisLabel: {
-      show: false,
-    },
-    splitLine: {
-      show: false,
-    },
-    axisLine: {
-      show: true,
-    },
-    position: 'right',
-    data: undefined,
-  }
-  merge(left, extraLeft)
-  const right = yAxisBase()
-  const extraRight = {
-    type: 'category',
-    gridIndex: 1,
-    show: false,
-    inverse: true,
-    data: undefined,
-  }
-  merge(right, extraRight)
-  return [left, right]
-}
-
-function getDoubleGrid() {
-  return [
-    // 左边的坐标系
-    {
-      left: '4%',
-      width: '46%',
-      top: 0,
-      bottom: 0,
-      containLabel: false,
-    },
-    // 右边的坐标系
-    {
-      right: '4%',
-      width: '46%',
-      top: 0,
-      bottom: 0,
-      containLabel: false,
-    },
-  ]
-}
-
-// 标线的series
-function getMarkLineSeries() {
-  return {
-    type: 'scatter',
-    symbol: 'roundRect',
-    name: SERIES_NAME.markLine,
-    silent: true,
-    symbolSize: [2, chartToken.barWidth / 2],
-    zlevel: 999,
-    data: undefined,
-    color: undefined,
-  }
-}
-
-export {
-  PROCESSBARTYPE,
-  CHARTTYPENAME,
-  BASICUNIT,
-  SERIES_NAME,
-  getMarkLineSeries,
-  getDataNameSeries,
-  getBackgroundSeries,
-  getDataSeries,
-  getDoubleBackgroundSeries,
-  getDoubleDataNameSeries,
-  getDoubleYaxis,
-  getDoubleGrid,
-  getDoubleXaxis
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - 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.
+ *
+ */
+
+import chartToken from "./chartToken";
+import yAxisBase from '../../option/config/yAxis/base'
+import xAxisBase from '../../option/config/xAxis/base'
+import merge from "../../util/merge";
+
+// 进度图的图表类型名称
+const CHARTTYPENAME = {
+  ProcessBarChart: 'ProcessBarChart',
+  StackProcessBarChart: 'StackProcessBarChart',
+};
+// 标识是否为双向进度图
+const PROCESSBARTYPE = 'double-sides';
+// 基础进度图的默认单位
+const BASICUNIT = '%'
+
+const SERIES_NAME = {
+  markLine: 'markLine',
+  background: 'background',
+  seriesName: 'seriesName'
+}
+
+function getBarWidth(stack) {
+  return stack ? chartToken.stackBarWidth : chartToken.barWidth
+}
+
+// 文本与柱子居中对齐，文本与柱子的间距8（行高一半4+间距4）
+function getOffsetY() {
+  return chartToken.fontSize + 8
+}
+
+// 进度图数据名称的series
+function getDataNameSeries(stack = false) {
+  const barWidth = getBarWidth(stack)
+  const offset = getOffsetY()
+  return {
+    // 用来做前面的文本显示
+    name: SERIES_NAME.seriesName,
+    type: 'bar',
+    barWidth,
+    barGap: '-100%',
+    // 这条series不响应鼠标事件
+    silent: true,
+    label: {
+      show: true,
+      color: chartToken.nameColor,
+      position: [0, -offset],
+      fontSize: chartToken.fontSize,
+      formatter(params) {
+        return params.name === 'null' || params.name === 'undefined' ? '' : params.name;
+      },
+    },
+    data: undefined,
+  }
+}
+// 进度图背景柱子的series
+function getBackgroundSeries(stack = false) {
+  const barWidth = getBarWidth(stack)
+  const offset = getOffsetY()
+  return {
+    // 底色 +右侧label文本显示
+    name: SERIES_NAME.background,
+    type: 'bar',
+    barWidth,
+    barGap: '-100%',
+    itemStyle: {
+      color: chartToken.itemBgEmpty,
+      borderRadius: chartToken.borderRadius,
+    },
+    cursor: 'auto',
+    emphasis: {
+      disabled: true,
+    },
+    label: {
+      distance: 0,
+      show: true,
+      color: chartToken.labelColor,
+      offset: [0, -offset],
+      position: 'insideTopRight',
+      fontSize: chartToken.fontSize,
+      formatter: undefined,
+    },
+    data: undefined,
+  }
+}
+
+// 用于显示基础进度图的实际数据的series
+function getDataSeries(stack = false) {
+  const barWidth = getBarWidth(stack)
+  return {
+    name: 'data',
+    type: 'bar',
+    zlevel: 2,
+    barWidth,
+    cursor: 'pointer',
+    itemStyle: {
+      borderRadius: chartToken.borderRadius,
+      color: undefined,
+    },
+    data: undefined,
+    label: {
+      distance: 0,
+      show: false,
+      fontSize: chartToken.labelFontSize,
+      color: chartToken.labelColor,
+      formatter: undefined,
+    },
+  }
+}
+
+function getDoubleBackgroundSeries(left = true) {
+  return {
+    // 左侧底色
+    name: SERIES_NAME.background,
+    type: 'bar',
+    xAxisIndex: left ? 0 : 1,
+    yAxisIndex: left ? 0 : 1,
+    barWidth: chartToken.barWidth,
+    barGap: '-100%',
+    itemStyle: {
+      color: chartToken.itemBgEmpty,
+      borderRadius: left ? [chartToken.borderRadius, 0, 0, chartToken.borderRadius] : [0, chartToken.borderRadius, chartToken.borderRadius, 0],
+    },
+    emphasis: {
+      disabled: true,
+    },
+    label: {
+      show: true,
+      offset: [0, 0],
+      position: left ? 'insideBottomLeft' : 'insideBottomRight',
+      formatter: undefined,
+      rich: {
+        name: {
+          fontSize: chartToken.fontSize,
+          color: chartToken.nameColor,
+          lineHeight: 14,
+          padding: [0, 0, 20, 0],
+        },
+        value: {
+          fontSize: chartToken.fontSize,
+          color: chartToken.labelColor,
+          fontWeight: 'bold',
+          align: left ? 'left' : 'right',
+        },
+      },
+    },
+    data: undefined,
+  }
+}
+
+function getDoubleDataNameSeries(left = true) {
+  return {
+    name: undefined,
+    xAxisIndex: left ? 0 : 1,
+    yAxisIndex: left ? 0 : 1,
+    type: 'bar',
+    zlevel: 2,
+    barWidth: chartToken.barWidth,
+    itemStyle: {
+      borderRadius: left ? [chartToken.borderRadius, 0, 0, chartToken.borderRadius] : [0, chartToken.borderRadius, chartToken.borderRadius, 0],
+      color: undefined,
+    },
+    data: undefined,
+    emphasis: {
+      disabled: true,
+    },
+    label: {
+      show: false,
+    },
+  }
+}
+
+function getDoubleXaxis() {
+  const left = xAxisBase()
+  const extraLeft = {
+    type: 'value',
+    gridIndex: 0,
+    inverse: true,
+    axisLabel: {
+      show: false,
+    },
+    splitLine: {
+      show: true
+    },
+    max: 'dataMax',
+  }
+  merge(left, extraLeft)
+  const right = xAxisBase()
+  const extraRight = {
+    type: 'value',
+    gridIndex: 1,
+    axisLabel: {
+      show: false,
+    },
+    splitLine: {
+      show: true
+    },
+    max: 'dataMax',
+  }
+  merge(right, extraRight)
+  return [left, right]
+}
+
+
+function getDoubleYaxis() {
+  const left = yAxisBase()
+  const extraLeft = {
+    type: 'category',
+    gridIndex: 0,
+    inverse: true,
+    axisLabel: {
+      show: false,
+    },
+    splitLine: {
+      show: false,
+    },
+    axisLine: {
+      show: true,
+    },
+    position: 'right',
+    data: undefined,
+  }
+  merge(left, extraLeft)
+  const right = yAxisBase()
+  const extraRight = {
+    type: 'category',
+    gridIndex: 1,
+    show: false,
+    inverse: true,
+    data: undefined,
+  }
+  merge(right, extraRight)
+  return [left, right]
+}
+
+function getDoubleGrid() {
+  return [
+    // 左边的坐标系
+    {
+      left: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false,
+    },
+    // 右边的坐标系
+    {
+      right: '4%',
+      width: '46%',
+      top: 0,
+      bottom: 0,
+      containLabel: false,
+    },
+  ]
+}
+
+// 标线的series
+function getMarkLineSeries() {
+  return {
+    type: 'scatter',
+    symbol: 'roundRect',
+    name: SERIES_NAME.markLine,
+    silent: true,
+    symbolSize: [2, chartToken.barWidth / 2],
+    zlevel: 999,
+    data: undefined,
+    color: undefined,
+  }
+}
+
+export {
+  PROCESSBARTYPE,
+  CHARTTYPENAME,
+  BASICUNIT,
+  SERIES_NAME,
+  getMarkLineSeries,
+  getDataNameSeries,
+  getBackgroundSeries,
+  getDataSeries,
+  getDoubleBackgroundSeries,
+  getDoubleDataNameSeries,
+  getDoubleYaxis,
+  getDoubleGrid,
+  getDoubleXaxis
 }

package/src/components/charts/components/ProcessChart/chartToken.js

@@ -1,17 +1,17 @@
-/**
- * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
- * Copyright (c) 2024 - 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.
- *
- */
-import Token from '../../feature/token';
-import {CHART_TYPE} from '../../util/constants'
-
-const chartToken = Token.getTokenByName(CHART_TYPE.PROCESS)
-
-export default chartToken;
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - 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.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.PROCESS)
+
+export default chartToken;