@ebiz/designer-components 0.0.48 → 0.0.50

package/src/components/charts/components/PieChart/handleMulti.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 { getColor, codeToRGB, changeRgbaOpacity } from '../../util/color';
-import cloneDeep from '../../util/cloneDeep';
-
-function handleResObj(item, colors, index) {
-  const resObj = cloneDeep(item);
-  resObj.color = {
-    rgba: codeToRGB(getColor(colors, index), 1),
-    from: 1,
-    to: 0.2,
-  };
-  return resObj;
-}
-
-function handleTempLegend(tempLegend, legendOffset, index) {
-  if (tempLegend.orient === 'horizontal') {
-    const offset = legendOffset || 30;
-    const bottom = parseFloat(tempLegend.bottom) - index * parseFloat(offset);
-    if (tempLegend.bottom.toString().indexOf('%') !== -1) {
-      tempLegend.bottom = `${bottom}%`;
-    } else {
-      tempLegend.bottom = bottom;
-    }
-  } else {
-    const offset = legendOffset || 120;
-    const left = parseFloat(tempLegend.left) + index * parseFloat(offset);
-    if (tempLegend.left.toString().indexOf('%') !== -1) {
-      tempLegend.left = `${left}%`;
-    } else {
-      tempLegend.left = left;
-    }
-  }
-}
-
-function handleTempSeriesObj(item) {
-  const tempSeriesObj = cloneDeep(item);
-  tempSeriesObj.itemStyle = {
-    color: item.color.rgba,
-  };
-  return tempSeriesObj;
-}
-
-/**
- * 递归遍历数据
- * @param {*} data
- * @param {*} innerData
- * @param {*} innerIndex
- */
-function installInnerData(data, innerData, innerIndex) {
-  data.children &&
-    data.children.forEach((citem, cindex) => {
-      if (!innerData[innerIndex]) {
-        innerData[innerIndex] = [];
-      }
-      const colorFrom =
-        data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 1);
-      const colorTo = data.color.from - ((data.color.from - data.color.to) / (data.children.length + 1)) * (cindex + 2);
-      citem.color = {
-        rgba: changeRgbaOpacity(data.color.rgba, colorFrom),
-        from: colorFrom,
-        to: colorTo,
-      };
-      innerData[innerIndex].push(citem);
-      // 如果还有子层，则继续递归遍历
-      if (citem.children) {
-        installInnerData(citem, innerData, innerIndex + 1);
-      }
-    });
-}
-
-// 针对多重圆环图表需求，图表需要进行特殊处理
-function handleMulti(type, baseOption, legend, data) {
-  if (type === 'multi-circle') {
-    const colors = baseOption.color;
-    // 给源数据添加颜色属性
-    const outer = data.map((item, index) => {
-      const resObj = handleResObj(item, colors, index);
-      return resObj;
-    });
-    // 组装子层数据，给每个子数据赋值颜色
-    const inner = [];
-    const innerIndex = 0;
-    outer.forEach(data => {
-      installInnerData(data, inner, innerIndex);
-    });
-    // 组装series
-    inner.forEach((innerData, innerIndex) => {
-      const tempSeries = cloneDeep(baseOption.series[0]);
-      tempSeries.data = innerData.map(item => {
-        const tempSeriesObj = handleTempSeriesObj(item);
-        return tempSeriesObj;
-      });
-
-      const innerDiff = parseFloat(tempSeries.radius[1]) - parseFloat(tempSeries.radius[0]);
-      tempSeries.radius = tempSeries.radius.map(item => {
-        return `${parseFloat(item) + innerDiff * (innerIndex + 1)}%`;
-      });
-      baseOption.series.push(tempSeries);
-    });
-    baseOption.series.forEach(i => {
-      i.label = { show: false };
-      i.labelLine = { show: false };
-    });
-    // 组装legend
-    const dataArray = [outer].concat(inner);
-    const originLegend = baseOption.legend;
-    const legendOffset = legend.offset;
-    baseOption.legend = [];
-    dataArray.forEach((array, index) => {
-      const tempLegend = cloneDeep(originLegend);
-      const tempLegendData = array.map(item => {
-        return item.name;
-      });
-      tempLegend.data = tempLegendData;
-      handleTempLegend(tempLegend, legendOffset, index);
-      baseOption.legend.push(tempLegend);
-    });
-  }
-}
-
-export default handleMulti;

package/src/components/charts/components/PieChart/handleSeries.js

@@ -1,236 +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 merge from '../../util/merge';
-import setLabel from './handleLabel';
-import chartToken from './chartToken';
-import cloneDeep from '../../util/cloneDeep';
-import { percentToDecimal } from '../../util/math';
-import { isArray, isNumber, isString } from '../../util/type';
-
-export const seriesInit = () => {
-  return {
-    type: 'pie',
-    roundCap: true,
-    radius: ['0%', '50%'],
-    center: ['50%', '45%'],
-    avoidLabelOverlap: true,
-    itemStyle: {
-      borderWidth: chartToken.borderWidth,
-      borderColor: chartToken.borderColor,
-      borderRadius: chartToken.borderRadius,
-    },
-    selectedMode: false,
-    roseType: false,
-    label: {},
-    labelLine: {},
-    data: [],
-  };
-};
-
-/**
- * 根据参数计算出圆盘图的半径
- */
-function setPieRadius(pieType, radius, chartInstance) {
-  if (radius) {
-    if(pieType === 'circle' && !(isArray(radius) && radius.length === 2)){
-      return setPieCircleRadius(radius, chartInstance);
-    }else{
-      return radius;
-    }
-  } else {
-    let radius = [];
-    switch (pieType) {
-      case 'pie':
-        radius = ['0%', '50%'];
-        break;
-      case 'circle':
-        radius = ['44%', '50%'];
-        radius = setPieCircleRadius(radius, chartInstance);
-        break;
-      case 'multi-circle':
-        radius = ['44%', '50%'];
-        break;
-      default:
-        radius = ['0%', '50%'];
-        break;
-    }
-    return radius;
-  }
-}
-
-/**
- * 根据参数计算出圆盘图的圆环类型的内外半径
- */
-function setPieCircleRadius(radius, chartInstance){
-  const width = chartInstance.getWidth();
-  const height = chartInstance.getHeight();
-  const canvasRadius = width > height ? height / 2 : width / 2;
-  const barWidth = chartToken.barWidth
-  let outerRing = isArray(radius) ? radius[1] || radius[0] : radius;
-  if (isString(outerRing) && outerRing.indexOf('%') > -1) {
-    outerRing = (Number(outerRing.slice(0, -1)) / 100) * canvasRadius;
-  }
-  let innerRing = Number(outerRing) - barWidth;
-  return [innerRing, outerRing]
-}
-
-/**
- * 数据为零时添加背景
- */
-function handleEmptyData(data, series, center, radius, stillShowZeroSum, legend, colorArr) {
-  const total = data.reduce((pre, cur) => {
-    pre = pre + cur.value;
-    return pre;
-  }, 0);
-
-  if (total === 0) {
-    if (stillShowZeroSum === false) {
-      series.forEach(item => {
-        item.label = false;
-        item.itemStyle.borderWidth = chartToken.borderWidthShowZero;
-      });
-      series.push({
-        type: 'pie',
-        radius,
-        center,
-        emptyCircleStyle: {
-          color: chartToken.colorShowZero,
-        },
-        silent: true,
-        animation: false,
-      });
-    } else {
-      (legend.data !== undefined) && legend.data.forEach((item, index) => {
-        item.itemStyle = { color: colorArr[index] };
-      });
-      series.forEach(item => {
-        item.animation = false;
-        item.color = chartToken.colorShowZero;
-      });
-    }
-  }
-}
-
-function getNewRadius(radius, chartInstance) {
-  if (isNumber(radius)) {
-    return radius;
-  } else if (isString(radius)) {
-    return radius.endsWith('%') ? percentToDecimal(radius) * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2) : parseFloat(radius);
-  } else if (isArray(radius)) {
-    const decimalRadiusArr = radius.map(r => isNumber(r) ? r / Math.min(chartInstance.getWidth(), chartInstance.getHeight()) : r.endsWith('%') ? percentToDecimal(r) : parseFloat(r));
-    const decimalRadius = decimalRadiusArr[0] === 0 ? decimalRadiusArr[1] : decimalRadiusArr[0];
-    return decimalRadius * (Math.min(chartInstance.getWidth(), chartInstance.getHeight()) / 2);
-  }
-}
-
-// 余弦定理计算最小1px时的角度
-function minAngle(radius, chartInstance) {
-  const newRadius = getNewRadius(radius, chartInstance);
-  const cosA = (newRadius ** 2 + newRadius ** 2 - 3 ** 2) / (2 * newRadius * newRadius);
-  const angleAInRadians = Math.acos(cosA);
-  const minAngle = angleAInRadians * (180 / Math.PI);
-  return minAngle;
-}
-
-// 合并默认值seriesInit到series
-function mergeDefaultSeries(seriesUnit) {
-  for (const key in seriesInit()) {
-    if (Object.hasOwnProperty.call(seriesInit(), key)) {
-      if (key === 'itemStyle') {
-        const series = cloneDeep(seriesInit());
-        seriesUnit[key] = merge(series.itemStyle, seriesUnit.itemStyle);
-      }
-      if (seriesUnit[key] === undefined) {
-        seriesUnit[key] = seriesInit()[key];
-      }
-    }
-  }
-}
-
-// 给某个data指定的颜色
-function setColor(iChartOption) {
-  const data = iChartOption.data;
-  let initColorGroup = iChartOption.initColor.concat();
-  const colorData = iChartOption.dataRules && iChartOption.dataRules.color;
-  if (colorData && isArray(initColorGroup)) {
-    for (let key in colorData) {
-      data.forEach((item, index) => {
-        if (item.name === key && initColorGroup[index] && colorData[key]) {
-          initColorGroup[index] = colorData[key];
-        }
-      })
-    }
-  }
-  iChartOption.color = initColorGroup;
-}
-
-/**
- * 组装echarts所需要的series
- * @param {数据} data
- * @returns
- */
-
-const config = [
-  'label',
-  'labelLine',
-  'itemStyle',
-  'radius',
-  'center',
-  'silent',
-  'emphasis',
-  'stillShowZeroSum',
-  'selectedMode',
-  'roseType',
-  'minAngle',
-];
-
-function handleSeries(pieType, iChartOption, chartInstance, position, legend) {
-  const { data, stillShowZeroSum } = iChartOption;
-  position = position || {};
-  iChartOption.center = position?.center;
-  iChartOption.radius = position?.radius;
-
-  // 组装series数据
-  let series = [];
-  let selfSeries = iChartOption.series;
-  if (selfSeries === undefined) {
-    selfSeries = [{}];
-  }
-  // 保留初始的颜色数组
-  iChartOption.initColor = iChartOption.color;
-  // 给某个data指定的颜色
-  setColor(iChartOption);
-  selfSeries.forEach(seriesItem => {
-    const seriesUnit = seriesItem;
-    const temp = cloneDeep(iChartOption);
-    // 处理属性的优先级
-    config.forEach(name => {
-      const existValue = merge(temp[name], seriesUnit[name]);
-      if (existValue !== undefined) {
-        seriesUnit[name] = existValue;
-      }
-    });
-    seriesUnit.data = seriesUnit.data || iChartOption.data;
-    seriesUnit.radius = setPieRadius(pieType, seriesUnit.radius, chartInstance);
-    seriesUnit.minAngle =
-      seriesUnit.minAngle !== undefined ? seriesUnit.minAngle : minAngle(seriesUnit.radius, chartInstance);
-    setLabel(seriesUnit, seriesUnit.label, seriesUnit.data);
-    // 默认样式合并
-    mergeDefaultSeries(seriesUnit);
-  });
-  // 数据和为0
-  handleEmptyData(data, selfSeries, selfSeries[0].center, selfSeries[0].radius, stillShowZeroSum, legend, iChartOption.color);
-  series = selfSeries;
-  return series;
-}
-
-export default handleSeries;

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

@@ -1,58 +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 init from '../../option/init';
-import handleMulti from './handleMulti';
-import handleSeries from './handleSeries';
-import PolarCoordSys from '../../option/PolarSys';
-import { CHART_TYPE } from '../../util/constants';
-
-class PieChart {
-
-  static name = CHART_TYPE.PIE
-
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(chartInstance);
-  }
-
-  updateOption(chartInstance) {
-    const iChartOption = this.iChartOption;
-    const type = iChartOption.type || 'circle';
-    // 装载除series之外的其他配置
-    PolarCoordSys(this.baseOption, this.iChartOption, 'PieChart');
-    // 兼容旧属性chartPosition
-    const position = iChartOption.position || iChartOption.chartPosition;
-    // 处理series数据
-    this.baseOption.series = handleSeries(type, iChartOption, chartInstance, position, this.baseOption.legend);
-    // 针对给定的color值，需要进行特殊处理
-    this.baseOption.color = iChartOption.color;
-    // 针对多重圆环图表需求，图表需要进行特殊处理
-    handleMulti(type, this.baseOption, iChartOption.legend, iChartOption.data);
-    // 是否关闭hover态的效果，默认为false
-    if (iChartOption.silent) {
-      this.baseOption.tooltip = {};
-    }
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() { }
-}
-
-export default PieChart;

package/src/components/charts/components/PolarBarChart/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.POLAR_BAR)
-
-export default chartToken;

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

@@ -1,102 +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 defendXSS from '../../util/defendXSS';
-import chartToken from './chartToken';
-// 获取bar的series数据
-export function getSeriesData(data, type) {
-  const seriesData = [];
-  if (type === 'normal') {
-    data.forEach((item, i) => {
-      seriesData[i] = [];
-      for (let j = 0; j < data.length; j++) {
-        if (i == j) {
-          seriesData[i][j] = item.value;
-        } else {
-          seriesData[i][j] = 0;
-        }
-      }
-    });
-  } else {
-    data.forEach((item) => {
-      seriesData.push(item.value);
-    });
-  }
-
-  return seriesData;
-}
-
-// pie文本数据旋转
-function angleText(i, num) {
-  // 每个元素的角度
-  const everyAngle = 360 / num;
-  // 文字现在所在的角度
-  const currentAngle = i * everyAngle + everyAngle / 2;
-  if (currentAngle >= 90 && currentAngle <= 270) {
-    return 180 - currentAngle;
-  } else {
-    return 360 - currentAngle;
-  }
-}
-
-// 获取pie旋转文本数据
-export function getLabelData(data) {
-  const labelData = [];
-  const length = data.length;
-  data.forEach((item, i) => {
-    const obj = {
-      name: `${item.name} `,
-      value: 1,
-      label: {
-        rotate: angleText(i, length),
-      },
-    };
-    labelData.push(obj);
-  });
-  return labelData;
-}
-
-function tooltipFormatter(params) {
-  const seriesName = params.name;
-  const color = params.color;
-  const value = params.value;
-  const htmlString = `<div>
-                            <span style="display:inline-block;width:10px;height:10px;
-                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
-                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
-                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
-                            <span>${defendXSS(value)}</span>
-                       </div>`;
-  return htmlString;
-}
-
-/**
- * 配置默认的鼠标悬浮提示框
- */
-export function setTooltip(baseOpt) {
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = tooltipFormatter;
-  }
-}
-
-/**
- * 配置标签层级样式
- */
-export function setLabel(baseOpt) {
-  if (baseOpt.radiusAxis) {
-    baseOpt.radiusAxis.z = 2;
-    baseOpt.radiusAxis.axisLabel.color = chartToken.labelColor;
-  }
-  if (baseOpt.angleAxis) {
-    baseOpt.angleAxis.zlevel = 2;
-    baseOpt.angleAxis.axisLine.show = false;
-  }
-}

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

@@ -1,127 +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 { getColor } from '../../util/color';
-import chartToken from './chartToken';
-
-function getSeriesInit(type) {
-  const baseSeries = {
-    type: 'bar',
-    coordinateSystem: 'polar',
-    emphasis: {
-      focus: 'series',
-    },
-    animation: true,
-    data: [],
-  };
-  return type === 'normal'
-    ? {
-      ...baseSeries,
-      barGap: '-100%',
-      barCategoryGap: '40%',
-      itemStyle: {
-        borderRadius: [0, 0, 2, 2],
-      },
-    }
-    : {
-      ...baseSeries,
-      barWidth: '96%',
-      itemStyle: {},
-    };
-};
-
-// 利用pie文本rotate特性作为x轴的文本
-function getPieInit() {
-  return {
-    type: 'pie',
-    label: {
-      show: true,
-      fontSize: 12,
-      color: chartToken.labelColor,
-      position: 'inside',
-    },
-    itemStyle: {
-      color: 'transparent',
-    },
-    animation: false,
-    silent: true,
-    data: undefined,
-    center: undefined
-  };
-}
-
-/**
- * 设置bar类型的series.itemStyle(因为数据属于一个series，不设置的话所有图元都是一个颜色)
- * @param {*} iChartOption
- * @param {*} seriesUnit
- */
-export function handleBarItemStyle(iChartOption, seriesUnit) {
-  const { color, data } = iChartOption;
-  const seriesColor = {};
-  const typeArr = [];
-  data.forEach((item, index) => {
-    if (typeArr.indexOf(item.type) === -1) {
-      seriesColor[item.type] = [];
-      typeArr.push(item.type);
-    }
-    seriesColor[item.type].push(index);
-  });
-  seriesUnit.itemStyle.color = ({ dataIndex }) => {
-    let num = 0;
-    for (const i in seriesColor) {
-      if (Object.hasOwnProperty.call(seriesColor, i)) {
-        if (seriesColor[i].indexOf(dataIndex) !== -1) {
-          return getColor(color, num);
-        }
-        num++;
-      }
-    }
-  };
-}
-
-/**
- * 组装echarts所需要的series
- * @param {图表数据} seriesData
- * @param {文本数据} LabelData
- * @param {坐标} polar
- * @returns
- */
-export function setSeries(seriesData, labelData, iChartOption, polar, type) {
-  const { data, label } = iChartOption;
-  const series = [];
-  if (type === 'normal') {
-    data.forEach((item, i) => {
-      const seriesUnit = getSeriesInit(type)
-      seriesUnit.name = item.name;
-      seriesUnit.data = seriesData[i];
-      series.push(seriesUnit);
-    });
-  } else {
-    const seriesUnit = getSeriesInit(type)
-    seriesUnit.data = seriesData;
-    handleBarItemStyle(iChartOption, seriesUnit);
-    series.push(seriesUnit);
-  }
-  // 需要显示角度轴坐标文本
-  const showLabel = label ? label.show : true;
-  if (showLabel && type === 'normal') {
-    const pieUnit = getPieInit()
-    pieUnit.data = labelData;
-    pieUnit.center = polar.center;
-    // 外radius
-    const radius = polar.radius[1];
-    const radiusN = Number(radius.substring(0, radius.length - 1));
-    pieUnit.radius = [radius, `${radiusN + 8}%`];
-    series.push(pieUnit);
-  }
-  return series;
-}
-