@ebiz/designer-components 0.0.18-tj.1

package/src/components/charts/components/JadeJueChart/labelFormatter.js

@@ -0,0 +1,131 @@
+/**
+ * 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 { CHARTTYPE } from './BaseOption';
+
+// 处理第一种数据且无标定值的sum和max
+const setNoChildDefaultMax = (data) => {
+    let sum = 0;
+    data.forEach(item => {
+        sum += (item.value ?? 0);
+    });
+    return sum;
+};
+
+// 处理第二种数据且无标定值的sum和max
+const setChildDefaultMax = (data) => {
+    let sum = 0;
+    data.forEach(item => {
+        if (item.children && item.children.length) {
+            item.children.forEach(({ value }) => {
+                sum += (value ?? 0);
+            });
+        }
+    });
+    return sum;
+};
+
+// 配置玉闋图外围坐标系百分比展示文本
+const setAxisLabel = (sum, iChartOption, baseOpt) => {
+    if (iChartOption.max) {
+        baseOpt.angleAxis.sum = iChartOption.max;
+        const formatter = params => {
+            if (params === iChartOption.max) {
+                return '100%';
+            }
+            if ((params / iChartOption.max) * 100 > 100) {
+                return '';
+            }
+            const x = Math.ceil((params / iChartOption.max) * 100);
+            return `${Math.ceil(x / 10) * 10}%`;
+        };
+        return formatter;
+    } else {
+        const formatter = params => {
+            if (params === sum) {
+                return '100%';
+            }
+            if ((params / sum) * 100 > 100) {
+                return '';
+            }
+            const x = Math.ceil((params / sum) * 100);
+            return `${Math.ceil(x / 10) * 10}%`;
+        };
+        return formatter;
+    }
+};
+
+/**
+ * 此函数两部分作用：（1）根据data和max,将数据分为四种数据类型，分类处理angleAxis的sum和max值
+ * （2）根据用户传入的formatter，配置极坐标系文本
+ * @param {*} iChartOption
+ * @param {*} baseOpt
+ */
+const handleLabelFormatter = (iChartOption, baseOpt, chartType) => {
+    let { max, data, fill = false } = iChartOption;
+    const { angleAxis } = baseOpt;
+    if (chartType === CHARTTYPE.PROCESS) {
+        fill = true;
+    }
+    // 有标定值
+    if (max) {
+        angleAxis.sum = max;
+    }
+    // 无标定值
+    else {
+        let sum;
+        if (chartType === CHARTTYPE.PROCESS) {
+            sum = 100;
+        } else if (chartType === CHARTTYPE.BASE) {
+            // 第一种数据类型
+            sum = setNoChildDefaultMax(data);
+        } else {
+            // 第二种数据类型
+            sum = setChildDefaultMax(data);
+        }
+        // 当数据全为0时，手动设置sum和max使其不为0，避免视图丢失
+        if (sum === 0) {
+            sum = 1;
+        }
+        angleAxis.sum = sum;
+    }
+    angleAxis.max = angleAxis.sum * 4 / 3;
+    if (fill) {
+        angleAxis.max = angleAxis.sum;
+    }
+
+    /**
+     * 处理显示文本:根据用户传入的formatter，配置极坐标系文本
+     * 传入"percent"或者未传，展示百分比
+     * 传入"number",展示纯数值
+     * 传入函数，用户自定义展示内容
+     */
+    let formatter = angleAxis.axisLabel.formatter;
+    switch (formatter) {
+        case 'percent':
+            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
+            break;
+        case 'number':
+            formatter = undefined;
+            break;
+        case undefined:
+            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
+            break;
+    }
+    if (chartType === CHARTTYPE.PROCESS) {
+        angleAxis.axisLabel.show = false;
+        angleAxis.axisTick.show = false;
+        return;
+    }
+    angleAxis.axisLabel.formatter = formatter;
+};
+
+export { handleLabelFormatter };

package/src/components/charts/components/LineChart/AreaChart/bottomArea.js

@@ -0,0 +1,177 @@
+/**
+ * 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 min from '../../../util/sort/min';
+import { isNumber, isObject } from '../../../util/type';
+import { getColor, codeToRGB } from '../../../util/color';
+import chartToken from './chartToken';
+import Token from '../../../feature/token';
+
+// 创建一个渐变色-同名的Series，用来显示分割渐变区域
+function gradientBottomArea(item, percent, colorTo, colorFrom) {
+  const newSeries = {
+    type: item.type,
+    name: item.name,
+    data: item.data,
+    smooth: item.smooth,
+    step: item.step,
+    lineStyle: {
+      width: 0,
+    },
+    symbol: 'none',
+    areaStyle: {
+      origin: 'end',
+      color: {
+        type: 'linear',
+        x2: 0,
+        y2: 1,
+        x: 0,
+        y: 0,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percent - 0.00001,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percent,
+            color: colorTo,
+          },
+          {
+            offset: 1,
+            color: colorFrom,
+          },
+        ],
+      },
+    },
+  };
+  return newSeries;
+}
+
+/**
+ * 为series添加split分割区域的底部areaStyle,
+ */
+function splitArea(baseOption, iChartOption, YAxiMax) {
+  if (iChartOption.area && iChartOption.splitLine) {
+    const temp = [];
+    const colors = baseOption.color;
+    baseOption.series.forEach((item, index) => {
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const minValue = min(seriesData);
+      const percent = (iChartOption.splitLine - minValue) / (YAxiMax - minValue);
+      const color = getColor(colors, index);
+      const colorTo = codeToRGB(color, 0.15);
+      const colorFrom = codeToRGB(color, 0.15);
+      // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+      const newSeries = gradientBottomArea(item, percent, colorTo, colorFrom);
+      temp.push(newSeries);
+    });
+    baseOption.series = baseOption.series.concat(temp);
+  }
+}
+
+// 判断是否需要过滤series
+function judgeFilterAreaSeries(iChartOption) {
+  const { area, splitLine, markLine } = iChartOption
+  return area && (splitLine || (markLine && markLine?.bottom && isNumber(markLine?.bottom)))
+}
+
+// 创建一个纯色-同名Series，用来显示红色阈值区域
+function pureBottomArea(itemx, percentx, bottomColorx) {
+  const seriesObj = {
+    type: itemx.type,
+    name: itemx.name,
+    data: itemx.data,
+    smooth: itemx.smooth,
+    step: itemx.step,
+    symbol: 'none',
+    areaStyle: {
+      color: {
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP, //解决svg渲染方式下面积图低阈值黑色背景的问题
+          },
+          {
+            offset: 1 - percentx - 0.00001,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percentx,
+            color: bottomColorx,
+          },
+          {
+            offset: 1,
+            color: bottomColorx,
+          },
+        ],
+        type: 'linear',
+      },
+      origin: 'end',
+    },
+    lineStyle: {
+      width: 0,
+    },
+  };
+  return seriesObj;
+}
+
+function markLineArea(baseOption, iChartOption, YAxiMax) {
+  if (
+    iChartOption.area &&
+    iChartOption.markLine &&
+    iChartOption.markLine.bottom &&
+    isNumber(iChartOption.markLine.bottom)
+  ) {
+    const temp = [];
+    baseOption.series.forEach(item => {
+      const bottomColor = codeToRGB(iChartOption.markLine.bottomColor, 0.15) || codeToRGB(Token.config.colorState.colorError, 0.15);
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const minValue = min(seriesData);
+      const percent = (iChartOption.markLine.bottom - minValue) / (YAxiMax - minValue);
+      if (iChartOption.markLine.bottom >= minValue) {
+        // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+        const newSeries = pureBottomArea(item, percent, bottomColor);
+        temp.push(newSeries);
+      }
+    });
+    baseOption.series = baseOption.series.concat(temp);
+  }
+}
+
+function getDataWidthNoObject(data) {
+  return data.map(item => {
+    return isObject(item) ? item.value : item
+  })
+}
+
+/**
+ * 为series添加areaStyle
+ */
+function bottomArea(baseOption, iChartOption, YAxiMax) {
+  // 添加markLine的areaStyle
+  markLineArea(baseOption, iChartOption, YAxiMax);
+  // 添加split的areaStyle
+  splitArea(baseOption, iChartOption, YAxiMax);
+}
+
+
+export default bottomArea;
+export { judgeFilterAreaSeries,getDataWidthNoObject }

package/src/components/charts/components/LineChart/AreaChart/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.AREA)
+
+export default chartToken;

package/src/components/charts/components/LineChart/AreaChart/index.js

@@ -0,0 +1,18 @@
+/**
+ * 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 topArea from './topArea';
+import bottomArea from './bottomArea';
+
+export {
+    topArea,
+    bottomArea
+}

package/src/components/charts/components/LineChart/AreaChart/topArea.js

@@ -0,0 +1,139 @@
+/**
+ * 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 * as echarts from 'echarts';
+import max from '../../../util/sort/max';
+import { isNumber } from '../../../util/type';
+import { getColor, codeToRGB } from '../../../util/color';
+import chartToken from './chartToken';
+import Token from '../../../feature/token';
+import {getDataWidthNoObject} from './bottomArea'
+
+function markLineArea(baseOption, iChartOption, YAxiMin) {
+  if (
+    iChartOption.area &&
+    iChartOption.markLine &&
+    iChartOption.markLine.top &&
+    isNumber(iChartOption.markLine.top) &&
+    iChartOption.markLine.topChangeColor !== false
+  ) {
+    const colors = baseOption.color;
+    const markLine = iChartOption.markLine;
+    const topColor = codeToRGB(markLine.topColor, 0.15) || codeToRGB(Token.config.colorState.colorError, 0.15);
+    baseOption.series.forEach((item, index) => {
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const maxValue = max(seriesData);
+      const color = getColor(colors, index);
+      const colorTo = codeToRGB(color, 0);
+      const colorFrom = codeToRGB(color, 0.15);
+      const percent = (maxValue - markLine.top) / (maxValue - YAxiMin);
+      if (maxValue > markLine.top) {
+        item.areaStyle = {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: topColor,
+              },
+              {
+                offset: percent,
+                color: topColor,
+              },
+              {
+                offset: percent + 0.00001,
+                color: colorFrom,
+              },
+              {
+                offset: 1,
+                color: colorTo,
+              },
+            ],
+          },
+        };
+      }
+    });
+  }
+}
+
+function defaultArea(baseOption, iChartOption, YAxiMin) {
+  if (iChartOption.area) {
+    const colors = baseOption.color;
+    baseOption.series.forEach((item, index) => {
+      const color = getColor(colors, index);
+      const colorTo = codeToRGB(color, 0);
+      const colorFrom = codeToRGB(color, 0.15);
+      item.areaStyle = {
+        opacity: 1,
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          {
+            offset: 0,
+            color: colorFrom,
+          },
+          {
+            offset: 1,
+            color: colorTo,
+          },
+        ]),
+      };
+    });
+  }
+}
+
+function splitArea(baseOption, iChartOption, YAxiMin) {
+  if (iChartOption.area && iChartOption.splitLine) {
+    const colors = baseOption.color;
+    const splitLine = iChartOption.splitLine;
+    baseOption.series.forEach((item, index) => {
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const maxValue = max(seriesData);
+      const color = getColor(colors, index);
+      const colorTo = codeToRGB(color, 0.15);
+      const colorFrom = codeToRGB(color, 0.15);
+      const percent = (maxValue - splitLine) / (maxValue - YAxiMin);
+      item.areaStyle = {
+        color: {
+          type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
+          colorStops: [
+            { offset: 0, color: colorFrom },
+            { offset: percent, color: colorTo },
+            { offset: percent + 0.00001, color: chartToken.colorAreaTP },
+            { offset: 1, color: chartToken.colorAreaTP },
+          ],
+        },
+      };
+    });
+  }
+}
+
+/**
+ * 为series添加areaStyle
+ */
+function topArea(baseOption, iChartOption, YAxiMin) {
+  // 添加默认areaStyle
+  defaultArea(baseOption, iChartOption, YAxiMin);
+  // 添加markLine的areaStyle
+  markLineArea(baseOption, iChartOption, YAxiMin);
+  // 添加split的areaStyle
+  splitArea(baseOption, iChartOption, YAxiMin);
+}
+
+export default topArea;

package/src/components/charts/components/LineChart/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.LINE)
+
+export default chartToken;

package/src/components/charts/components/LineChart/handleOptipn.js

@@ -0,0 +1,145 @@
+/**
+ * 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 cloneDeep from '../../util/cloneDeep';
+import chartToken from './chartToken';
+import { judgeFilterAreaSeries, getDataWidthNoObject } from './AreaChart/bottomArea';
+import getTooltipContentHtmlStr, { validateName } from '../../option/config/tooltip/formatter'
+import { isObject } from '../../util/type';
+import { getColor } from '../../util/color';
+
+
+// 给图例和x轴赋值
+export function handleData(baseOpt, legendData, xAxisData) {
+  if (!baseOpt.legend.data) {
+    baseOpt.legend.data = legendData;
+  }
+  baseOpt.xAxis.forEach(item => {
+    item.data = xAxisData;
+  });
+}
+
+export function onlyOnePoint(baseOption) {
+  baseOption.series.forEach(itemObj => {
+    if (itemObj.data.length === 1) {
+      itemObj.showSymbol = true;
+    }
+  });
+}
+
+function isNullValue(value) {
+  return value === '' || value === undefined || value === null;
+}
+
+// 实现离散数据的markLine变色功能
+function addDiscreteVisualMap(baseOption, iChartOption, actualSeriesIndex, seriesIndex, discreteVisualMap) {
+  const { area } = iChartOption
+  const { visualMap } = baseOption
+  // 如果是面积图不做处理
+  if (area) return
+  if (visualMap && visualMap.lenth !== 0) {
+    const newVisualMapItem = visualMap[seriesIndex] ? cloneDeep(visualMap[seriesIndex]) : null
+    if (newVisualMapItem) {
+      newVisualMapItem.seriesIndex = actualSeriesIndex
+      discreteVisualMap.push(newVisualMapItem)
+    }
+  }
+}
+
+// 针对离散数据, 创建同名Series, 显示离散数据的单个点
+export function discrete(iChartOption, baseOption) {
+  // 创建同名Series
+  if (iChartOption.discrete) {
+    // 记录实际的真实数据产生的sereis的
+    let actualSeriesIndex = baseOption.series.length - 1
+    const discreteSeries = []
+    const discreteVisualMap = []
+    baseOption.series.forEach((series, seriesIndex) => {
+      const newSeries = cloneDeep(series);
+      newSeries.symbolSize = chartToken.symbolSizeSM;
+      newSeries.itemStyle.borderWidth = chartToken.borderZero;
+      newSeries.itemStyle.opacity = 1;
+      newSeries.showSymbol = true;
+      newSeries.showAllSymbol = true;
+      newSeries.emphasis = {
+        itemStyle: {
+          opacity: 0,
+        },
+      };
+      const discreteData = [];
+      const seriesData = getDataWidthNoObject(newSeries.data)
+      for (let index = 0; index < seriesData.length; index++) {
+        const pre = seriesData[index - 1];
+        const next = seriesData[index];
+        const cur = seriesData[index + 1];
+        if (!isNullValue(pre) || !isNullValue(cur)) {
+          discreteData.push(null);
+        } else {
+          discreteData.push(next);
+        }
+      }
+      newSeries.data = discreteData;
+      actualSeriesIndex++
+      addDiscreteVisualMap(baseOption, iChartOption, actualSeriesIndex, seriesIndex, discreteVisualMap)
+      discreteSeries.push(newSeries)
+    });
+    baseOption.series = [...baseOption.series, ...discreteSeries]
+    baseOption.visualMap = [...baseOption.visualMap, ...discreteVisualMap]
+  }
+}
+
+function defaultFormatter(params, color) {
+  const config = {
+    title: '',
+    children: []
+  }
+  params.forEach((item, index) => {
+    if (index === 0) {
+      config.title = item.name
+    }
+    const iconColor = validateName(item.value) ? item.color : getColor(color, item.seriesIndex)
+    const dataItem = {
+      name: item.seriesName,
+      value: item.value,
+      iconColor,
+    }
+    config.children.push(dataItem)
+  });
+  return getTooltipContentHtmlStr(config)
+}
+
+// 阈值场景将data中的数据转为obj，需要转换回来
+function coverObjDataToInit(params) {
+  if (params && params.length !== 0) {
+    return params.map(item => {
+      const data = isObject(item.data) ? item.data.value : item.data
+      return { ...item, data }
+    })
+  }
+  return params
+}
+
+export function setTooltip(baseOpt, iChartOpt, legendData) {
+  const { discrete, predict, tipHtml, tooltip, color } = iChartOpt
+  // 判断面积图是否要过滤series
+  const filterArea = judgeFilterAreaSeries(iChartOpt)
+  const isFilter = discrete || predict || filterArea
+  const formatter = tipHtml || tooltip?.formatter
+  baseOpt.tooltip.formatter = (echartsParams, ticket, callback) => {
+    let params = echartsParams
+    if (isFilter) {
+      const lineNumber = legendData.length
+      params = echartsParams.slice(0, lineNumber)
+    }
+    const initParams = coverObjDataToInit(params)
+    return formatter ? formatter(initParams, ticket, callback) : defaultFormatter(initParams, color)
+  }
+}