@ebiz/designer-components 0.0.18

package/src/components/charts/components/PolarBarChart/index.js

@@ -0,0 +1,62 @@
+/**
+ * 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 init from '../../option/init';
+import { getSeriesData, getLabelData, setTooltip, setLabel } from './handleOption';
+import { setSeries } from './handleSeries';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class PolarBarChart {
+
+    static name = CHART_TYPE.POLAR_BAR
+
+    constructor(iChartOption, chartInstance) {
+        this.baseOption = {};
+        this.iChartOption = {};
+        // 组装 iChartOption, 补全默认值
+        this.iChartOption = init(iChartOption);
+        // 根据 iChartOption 组装 baseOption
+        this.updateOption(chartInstance);
+    }
+
+    updateOption(chartInstance) {
+        const iChartOption = this.iChartOption;
+        const data = iChartOption.data;
+        // 装载除series之外的其他配置
+        PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.POLAR_BAR);
+        const type = iChartOption.type || 'normal';
+        // angleAxis赋值
+        this.baseOption.angleAxis.data = [];
+        if (type !== 'normal') {
+            this.baseOption.angleAxis.axisLabel.show = true;
+        }
+        if (data) {
+            data.forEach(item => {
+                this.baseOption.angleAxis.data.push(item.name);
+            });
+            // tooltip悬浮框
+            setTooltip(this.baseOption);
+            // 调整label标签和图层的层级
+            setLabel(this.baseOption);
+            // legend数据
+            this.baseOption.legend.data = type === 'normal' ? data : [];
+            // series bar数据
+            const seriesData = getSeriesData(data, type);
+            // pie数据
+            const labelData = getLabelData(data);
+            this.baseOption.series = setSeries(seriesData, labelData, iChartOption, this.baseOption.polar, type);
+        }
+    }
+    getOption() {
+        return this.baseOption;
+    }
+}

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

@@ -0,0 +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
+}

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

@@ -0,0 +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;

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

@@ -0,0 +1,156 @@
+/**
+ * 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 { CHARTTYPENAME } from './BaseOption';
+import max from '../../util/sort/max';
+// 处理有minWidth极限值的情况下给echarts渲染的数据
+function handleLimitVal(data, iChartOpt, demarcatedValue) {
+  const dataItem = { ...data, _initValue: undefined };
+  const { minWidth } = iChartOpt;
+  // 数据的最小宽度是一个百分比，用于控制数据之间差距过大导致部分数据显示不明显，导致无法交互的情况
+  if (minWidth) {
+    const limitValue = demarcatedValue * (parseInt(minWidth) / 100);
+    if (data.value && data.value < limitValue) {
+      dataItem.value = limitValue;
+      dataItem._initValue = data.value;
+    }
+  }
+  return dataItem;
+}
+
+function handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue) {
+  data.forEach(item => {
+    dataSet.seriesName.push(item.name);
+    const childBarName = [];
+    const childBarData = [];
+    if (item.children && item.children.length !== 0) {
+      item.children.forEach(el => {
+        childBarName.push(el.name);
+        const innerDataItem = handleLimitVal(el, iChartOpt, demarcatedValue);
+        childBarData.push(innerDataItem);
+      });
+      dataSet.barName.push(childBarName);
+      dataSet.barData.push(childBarData);
+    }
+  });
+}
+
+function handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax) {
+  // 内部显示进度的最大值
+  const demarcatedValue = dataMax || 100;
+  dataSet.maxValue = demarcatedValue;
+  if (doubleSide) {
+    handleDoubleSideData(dataSet, data, iChartOpt, demarcatedValue);
+    return;
+  }
+  data.forEach(dataItem => {
+    dataSet.barName.push(dataItem.name);
+    const innerDataItem = handleLimitVal(dataItem, iChartOpt, demarcatedValue);
+    dataSet.barData.push(innerDataItem);
+  });
+}
+
+
+function getSerirsDataMax(dataSet, data, dataMax) {
+  let sumValueMax;
+  const sumValue = [];
+  data.forEach(el => {
+    let _sumValue = 0;
+    el.children.forEach(child => {
+      if (child.value) {
+        _sumValue += child.value;
+      }
+    });
+    sumValue.push(_sumValue);
+  });
+  sumValueMax = max(sumValue);
+  if (dataMax && dataMax > sumValueMax) {
+    sumValueMax = dataMax;
+  }
+  dataSet.maxValue = sumValueMax
+  dataSet.sumValue = sumValue
+}
+
+
+function setMaxValueAgain(dataSet, dataMax) {
+  const sum = []
+  const len = dataSet.seriesName.length
+  for (let i = 0; i < len; i++) {
+    let sumValue = 0;
+    dataSet.barData.forEach(item => {
+      if (item[i].value) {
+        sumValue += item[i].value
+      }
+    })
+    sum.push(sumValue)
+  }
+  let maxValue = max(sum)
+  if (dataMax && dataMax > maxValue) {
+    maxValue = dataMax
+  }
+  dataSet.maxValue = maxValue
+}
+
+function handleStackProcessData(iChartOpt, dataSet, data, dataMax) {
+  // 获取系列名称
+  data.forEach(element => {
+    dataSet.seriesName.push(element.name);
+  });
+  // 单独系列名称
+  data[0].children.forEach(el => {
+    dataSet.barName.push(el.type);
+  });
+  // 单一系列各项数据用来获取数据的标定值
+  getSerirsDataMax(dataSet, data, dataMax)
+  // 对各系列数据进行组装分类
+  dataSet.barName.forEach(type => {
+    // 每个系列单独的数据
+    const seriesData = [];
+    data.forEach(child => {
+      const childItem = child.children.find(el => el.type === type);
+      const innerChidItem = handleLimitVal(childItem, iChartOpt, dataSet.maxValue)
+      seriesData.push(innerChidItem);
+    });
+
+    dataSet.barData.push(seriesData);
+  });
+  // 在有minwidth的情景下重新去计算所有系列求和的最大值
+  if (iChartOpt.minWidth) {
+    setMaxValueAgain(dataSet, dataMax)
+  }
+}
+
+function handleData(iChartOpt, doubleSide) {
+  const { data, name } = iChartOpt;
+  if (!data) return null;
+  if (data && data.length > 0) {
+    // 数据集合
+    const dataSet = {
+      // 图表子项数据
+      barData: [],
+      // 图表的标题数据
+      barName: [],
+      // 图表的最大值
+      maxValue: undefined,
+      // 图表的系列名称
+      seriesName: [],
+    };
+    // 当前图表单个系列数据的最大值，用来做数据占比
+    const dataMax = iChartOpt.calibrationValue || iChartOpt.max
+    if (name === CHARTTYPENAME.ProcessBarChart) {
+      handleBasicProcessData(iChartOpt, dataSet, data, doubleSide, dataMax);
+    } else {
+      handleStackProcessData(iChartOpt, dataSet, data, dataMax);
+    }
+    return dataSet;
+  }
+}
+export default handleData;