@ebiz/designer-components 0.0.48 → 0.0.50

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

@@ -1,131 +0,0 @@
-/**
- * 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

@@ -1,177 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-/**
- * 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

@@ -1,139 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,145 +0,0 @@
-/**
- * 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)
-  }
-}