@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,73 +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';
-
-function setDashedLineVisualMap(seriesIndex, lineColor, predictIndex) {
-  const vm = {
-    type: 'piecewise',
-    seriesIndex,
-    dimension: 0,
-    show: false,
-    pieces: [
-      {
-        gte: 0,
-        lte: predictIndex,
-        color: chartToken.colorNone,
-      },
-      {
-        gt: predictIndex,
-        color: lineColor,
-      },
-    ],
-  };
-  return vm;
-}
-
-/**
- * 针对预测值图表需求，图表需要进行特殊处理
- */
-export function handlePredict(option, iChartOpt) {
-  const { predict, lineStyle } = iChartOpt
-  if (!predict) return
-  // VisualMap只能处理线的颜色，不能处理面积的颜色
-  let dashColor = chartToken.maskColor;
-  if (lineStyle && lineStyle.dashColor) {
-    dashColor = lineStyle.dashColor;
-  }
-  // 取出数据
-  const data = option.series;
-  const dataLength = data.length;
-  const xAxisDataLength = option.xAxis[0].data.length;
-  const predictIndex = option.xAxis[0].data.indexOf(predict);
-  // 制作虚线的series(只有匹配成功即predictIndex>-1时，才设置阈值线的样式)
-  if (predictIndex > -1) {
-    for (let index = 0; index < dataLength; index++) {
-      const temp = cloneDeep(data[index]);
-      temp.lineStyle = {
-        // 为了视觉上看不见盖住粗细+1
-        width: chartToken.lineWidth + 1,
-        type: [5, 8],
-      };
-      temp.itemStyle = {
-        opacity: 0,
-      };
-      temp.silent = true;
-      temp.showSymbol = false;
-      temp.showAllSymbol = false;
-      // 插入虚线的series
-      option.series.push(temp);
-      // 虚线颜色
-      option.visualMap.push(setDashedLineVisualMap(dataLength + index, dashColor, predictIndex, xAxisDataLength));
-    }
-  }
-}

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

@@ -1,266 +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 { isString, isObject } from '../../util/type';
-import { getMarkLineDefault, getMarkPointDefault, setThresholdMarkLineLabel } from '../../option/config/mark';
-import chartToken from './chartToken';
-import Token from '../../feature/token';
-import { getColor } from '../../util/color';
-
-
-export const seriesInit = () => {
-  return {
-    label: { show: false },
-    // 连线上的小圆点样式
-    symbol: 'circle',
-    symbolSize: chartToken.symbolSize,
-    showSymbol: false,
-    // 数据
-    data: [],
-    // 线形
-    type: 'line',
-    // 线条样式
-    lineStyle: {
-      width: chartToken.lineWidth,
-    },
-    massive: false,
-    // 折线阶梯
-    step: false,
-    // 折线平滑
-    smooth: false,
-    // 阈值线
-    markLine: null,
-    // 峰值标志
-    markPoint: null,
-    // 折线点的每个样式配置项
-    itemStyle: {
-      //避免hover时偶现实心symbol的情况
-      opacity: 0
-    },
-    emphasis: {
-      itemStyle: {
-        borderColor: undefined,
-        borderWidth: chartToken.border,
-        color: chartToken.maskColor,
-        opacity: 1
-      }
-    }
-  };
-};
-
-//  hover使用emphasis去变更symbol的样式
-function setItemBorderColor(seriesUnit, index, colors) {
-  const color = getColor(colors, index)
-  seriesUnit.emphasis.itemStyle.borderColor = color
-}
-
-
-function handleItemStyle(seriesUnit, itemStyle) {
-  if (!itemStyle) return;
-  // 兼容老版本的 itemStyle.symbolSize
-  if (itemStyle.symbolSize) {
-    seriesUnit.symbolSize = itemStyle.symbolSize;
-  }
-  for (const key in itemStyle) {
-    if (Object.hasOwnProperty.call(itemStyle, key)) {
-      seriesUnit.itemStyle[key] = itemStyle[key];
-    }
-  }
-}
-
-function isTopOrBottom(markLine, seriesUnit, flag) {
-  let position = '';
-  let markLinePosition = '';
-  let markLineLabel = '';
-  let markLineColor = '';
-  let markLinelLineStyle;
-  let markLineData = {};
-  if (flag === 'top') {
-    position = markLine.top;
-    markLinePosition = markLine.topPosition
-    markLineLabel = markLine.topLabel;
-    markLineColor = markLine.topColor;
-    markLinelLineStyle = markLine.topLine
-  } else {
-    position = markLine.bottom;
-    markLinePosition = markLine.bottomPosition
-    markLineLabel = markLine.bottomLabel;
-    markLineColor = markLine.bottomColor
-    markLinelLineStyle = markLine.bottomLine
-  }
-  if (isString(position)) {
-    markLineData = { type: position };
-  } else {
-    markLineData = { yAxis: position };
-  }
-
-  markLineData.label = { show: false, position: 'insideEndTop', lineHeight: 20 };
-  markLineData.lineStyle = {};
-  // 没有配置颜色，认为是阈值线，加载阈值线的label配置
-  if (!markLineColor) {
-    setThresholdMarkLineLabel(markLineData)
-  }
-  markLinePosition && (markLineData.label.position = markLinePosition);
-  if (markLineLabel) {
-    markLineData.label.show = true
-    markLineData.label.color = 'inherit'
-    markLineData.label.formatter = markLineLabel
-  }
-  if (markLineColor === 'auto') {
-    markLineColor = undefined;
-  }
-  if (markLineColor) {
-    markLineData.label.color = markLineColor
-    markLineData.lineStyle.color = markLineColor
-  }
-  if (markLinelLineStyle === false) {
-    markLineData.lineStyle.color = chartToken.colorNone;
-  }
-  seriesUnit.markLine.data.push(markLineData);
-}
-
-function handleMarkLine(markLine, seriesUnit, seriesName) {
-  seriesUnit.markLine = getMarkLineDefault()
-  if (markLine.top && !(markLine.topUse && markLine.topUse.indexOf(seriesName) === -1)) {
-    isTopOrBottom(markLine, seriesUnit, 'top')
-  }
-  if (markLine.bottom && !(markLine.bottomUse && markLine.bottomUse.indexOf(seriesName) === -1)) {
-    isTopOrBottom(markLine, seriesUnit, 'bottom')
-  }
-}
-
-function handleMarkPoint(markPoint, seriesUnit, seriesName) {
-  seriesUnit.markPoint = getMarkPointDefault();
-  const { colorError } = Token.config.colorState
-  if (markPoint.max && !(markPoint.maxUse && markPoint.maxUse.indexOf(seriesName) === -1)) {
-    const max = {
-      type: 'max',
-      symbolOffset: [0, -11],
-      itemStyle: { color: markPoint.maxColor || colorError },
-    };
-    if (markPoint.maxColor == 'auto') delete max.itemStyle;
-    seriesUnit.markPoint.data.push(max);
-  }
-  if (markPoint.min && !(markPoint.minUse && markPoint.minUse.indexOf(seriesName) === -1)) {
-    const min = {
-      type: 'min',
-      symbolOffset: [0, 11],
-      symbolRotate: 180,
-      itemStyle: { color: markPoint.minColor || colorError },
-    };
-    if (markPoint.minColor == 'auto') delete min.itemStyle;
-    seriesUnit.markPoint.data.push(min);
-  }
-}
-
-
-function setStack(stack, seriesUnit) {
-  for (const name in stack) {
-    if (Object.hasOwnProperty.call(stack, name)) {
-      const stackArray = stack[name];
-      const seriesName = seriesUnit.name;
-      if (stackArray.indexOf(seriesName) !== -1) {
-        seriesUnit.stack = name;
-      }
-      break;
-    }
-  }
-}
-
-function handleStack(stack, seriesUnit) {
-  if (stack === true) {
-    seriesUnit.stack = 'Total';
-    return;
-  }
-  if (isObject(stack)) {
-    setStack(stack, seriesUnit)
-  }
-}
-
-function handleFocus(focus, seriesUnit) {
-  if (focus) {
-    seriesUnit.emphasis = {
-      ...seriesUnit.emphasis,
-      focus: 'series',
-      blurScope: 'global',
-    };
-  }
-}
-
-function handleSeries(params) {
-  const {
-    stack,
-    focus,
-    massive,
-    isStep,
-    series,
-    isSmooth,
-    markLine,
-    markPoint,
-    legendData,
-    seriesData,
-    localSeriesUnit,
-    colors
-  } = params;
-  legendData.forEach((legend, index) => {
-    const seriesUnit = cloneDeep(localSeriesUnit);
-    // 折线平滑
-    seriesUnit.smooth = isSmooth || false;
-    // 大数据
-    seriesUnit.large = massive || false;
-    seriesUnit.sampling = massive ? 'lttb' : false;
-    // 折线阶梯
-    seriesUnit.step = (isStep && 'middle') || false;
-    // 阈值线
-    markLine && handleMarkLine(markLine, seriesUnit, legend);
-    // 峰值标记
-    markPoint && handleMarkPoint(markPoint, seriesUnit, legend);
-    // 聚焦效果
-    focus && handleFocus(focus, seriesUnit);
-    // 数据 / 数据名称
-    seriesUnit.name = legend;
-    seriesUnit.data = seriesData[legend];
-    setItemBorderColor(seriesUnit, index, colors)
-    // 堆叠效果
-    stack && handleStack(stack, seriesUnit);
-    series.push(seriesUnit);
-  });
-}
-
-function handleYaxis(series, yAxis) {
-  if (Array.isArray(yAxis)) {
-    yAxis.forEach((y, index) => {
-      series.forEach((s, indexs) => {
-        if (y.dataName && y.dataName.includes(s.name)) {
-          series[indexs].yAxisIndex = index;
-        }
-      });
-    });
-  }
-}
-
-/**
- * 组装echarts所需要的series
- */
-export function setSeries(params) {
-  const { yAxis, itemStyle } = params;
-  // 防止同一个页面的不同lineChart之间出现样式串通
-  const localSeriesUnit = seriesInit();
-  // 覆盖用户传入的itemStyle
-  handleItemStyle(localSeriesUnit, itemStyle);
-  // 拼装series
-  const series = [];
-  handleSeries({ ...params, series, localSeriesUnit });
-  // 配置多个series的y轴index
-  handleYaxis(series, yAxis);
-  return series;
-}

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

@@ -1,138 +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 max from '../../util/sort/max';
-import { isNumber } from '../../util/type';
-import { getColor } from '../../util/color';
-import Token from '../../feature/token';
-import chartToken from './chartToken'
-
-function handleVisualMapItem({ index, topColor, top, bottom, bottomColor, vmColor, defaultColor }) {
-  const visualMapItem = {
-    show: false,
-    type: 'piecewise',
-    dimension: 1,
-    seriesIndex: index,
-    pieces: [
-      {
-        gte: top, // 大于 top 的
-        color: topColor,
-      },
-      {
-        gt: bottom,
-        lt: top, // 小于 top, 大于 bottom 的，为正常颜色
-        color: defaultColor,
-      },
-      {
-        lte: bottom, // 小于 bottom
-        color: bottomColor,
-      },
-    ],
-    outOfRange: {
-      color: vmColor,
-    },
-  };
-
-  return visualMapItem;
-}
-
-export function setVisualMap(legendData, seriesData, iChartOpt, baseOpt) {
-  const visualMap = [];
-  const { color: colors, markLine } = iChartOpt
-  if (markLine) {
-    let topValue = markLine.top;
-    let bottomValue = markLine.bottom;
-    const vmColor = Token.config.colorState.colorError;
-    const topColor = markLine.topColor || vmColor;
-    const bottomColor = markLine.bottomColor || vmColor;
-    if (!isNumber(topValue)) {
-      topValue = undefined;
-    }
-    if (!isNumber(bottomValue)) {
-      bottomValue = undefined;
-    }
-    if (topValue === undefined && bottomValue === undefined) {
-      return visualMap;
-    }
-    if (topValue !== undefined && bottomValue !== undefined && bottomValue >= topValue) {
-      throw new Error('阈值线bottom的值必须小于阈值线top的值');
-    }
-    legendData.forEach((legendName, index) => {
-      const data = seriesData[legendName];
-      const minData = min(data);
-      const maxData = max(data);
-      const defaultColor = getColor(colors, index)
-      let bottom = bottomValue;
-      let top = topValue;
-      if (markLine.topUse && markLine.topUse.indexOf(legendName) === -1) {
-        top = undefined;
-      }
-      if (markLine.bottomUse && markLine.bottomUse.indexOf(legendName) === -1) {
-        bottom = undefined;
-      }
-      if (top === undefined && bottom === undefined) {
-        return;
-      }
-      // 阈值无下限
-      if (bottom === undefined) {
-        bottom = Math.min(top - 0.01, minData - 0.01);
-      }
-      // 阈值无上限
-      if (top === undefined) {
-        top = Math.max(bottom + 0.01, maxData + 0.01);
-      }
-      // 根据数据大小映射颜色
-      const visualMapItem = handleVisualMapItem({ index, topColor, top, bottom, bottomColor, vmColor, defaultColor });
-      visualMap.push(visualMapItem);
-      const seriesUnit = baseOpt.series[index]
-      //  阈值情景下hover的emphasis中itemstyle要在数据中单独设置，覆盖通用emphasis配置
-      transformData(
-        seriesUnit,
-        data,
-        defaultColor,
-        {
-          topColor,
-          top,
-          bottom,
-          bottomColor
-        })
-    });
-  }
-  return visualMap;
-}
-
-function transformData(seriesUnit, data, defaultColor, markLineConfig) {
-  const { topColor, top, bottom, bottomColor } = markLineConfig
-  const newData = data.map(item => {
-    let borderColor = defaultColor
-    if (bottom < item && item < top) {
-      return item
-    }
-    if (item >= top) {
-      borderColor = topColor
-    }
-    if (item <= bottom) {
-      borderColor = bottomColor
-    }
-    return {
-      value: item,
-      emphasis: {
-        itemStyle: {
-          borderColor,
-          color: chartToken.maskColor,
-          opacity: 1
-        }
-      }
-    }
-  })
-  seriesUnit.data = newData
-}

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

@@ -1,133 +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 mini from '../../feature/mini/miniLineChart';
-import { setSeries } from './handleSeries';
-import cloneDeep from '../../util/cloneDeep';
-import BaseOption from '../../option/base';
-import { setVisualMap } from './handleVisualMap';
-import { handlePredict } from './handlePredict';
-import { topArea, bottomArea } from './AreaChart';
-import { mergeVisualMap, mergeSeries } from '../../util/merge';
-import { handleData, onlyOnePoint, discrete, setTooltip } from './handleOptipn';
-import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
-import { lttb } from '../../feature/performance/lttb';
-import { CHART_TYPE } from '../../util/constants';
-
-
-class LineChart {
-
-  static name = CHART_TYPE.LINE
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.baseOption = cloneDeep(BaseOption);
-    this.iChartOption = {};
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(chartInstance);
-  }
-
-  updateOption(chartInstance) {
-    const iChartOption = this.iChartOption;
-    // 装载除series之外的其他配置
-    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.LINE);
-    // x轴key值
-    const xAxisKey = xkey(iChartOption);
-    const data = iChartOption.massive ? lttb(iChartOption.data) : iChartOption.data
-    // x轴数据
-    const xAxisData = xdata(data, xAxisKey);
-    // 图例数据
-    const legendData = ldata(data, xAxisKey);
-    // 连线的数据
-    const seriesData = ydata(data, legendData);
-    // 给图例和x轴赋值
-    handleData(this.baseOption, legendData, xAxisData);
-    // 组装series
-    this.baseOption.series = setSeries({
-      seriesData,
-      legendData,
-      yAxis: iChartOption.yAxis,
-      focus: iChartOption.focus,
-      stack: iChartOption.stack,
-      isStep: iChartOption.step,
-      isArea: iChartOption.area,
-      colors: this.baseOption.color,
-      isSmooth: iChartOption.smooth,
-      markLine: iChartOption.markLine,
-      markPoint: iChartOption.markPoint,
-      splitLine: iChartOption.splitLine,
-      labelHtml: iChartOption.labelHtml,
-      itemStyle: iChartOption.itemStyle,
-      massive: iChartOption.massive,
-      colors: iChartOption.color
-    });
-    // 设置VisualMap，通过数值映射颜色
-    this.baseOption.visualMap = setVisualMap(legendData, seriesData, iChartOption, this.baseOption);
-    // 针对预测值图表需求，图表需要进行特殊处理
-    handlePredict(this.baseOption, iChartOption);
-    // 是否关闭hover态的效果，默认为false
-    if (iChartOption.silent) {
-      this.baseOption.tooltip = {};
-    }
-    // 当数据只有一条时，显示数据点
-    onlyOnePoint(this.baseOption);
-    // 针对离散数据, 创建同名Series, 显示离散数据的单个点
-    discrete(iChartOption, this.baseOption);
-    setTooltip(this.baseOption, iChartOption,legendData)
-    // 合并用户自定义series
-    mergeSeries(iChartOption, this.baseOption);
-    // 合并用户自定义visualMap
-    mergeVisualMap(iChartOption, this.baseOption);
-    // 处理特性
-    mini(iChartOption, this.baseOption);
-  }
-
-  // 根据渲染出的结果，二次计算option
-  updateOptionAgain(echartsIns) {
-    const YAxiMax = this.getYAxisMaxValue(echartsIns, 0);
-    const YAxiMin = this.getYAxisMinValue(echartsIns, 0);
-    // 面积图上部红色阈值区域需要在二次计算中实现 -- 在原有Series上添加areaStyle
-    topArea(this.baseOption, this.iChartOption, YAxiMin);
-    // 面积图下部红色阈值区域需要在二次计算中实现 -- 植入假的同名Series
-    bottomArea(this.baseOption, this.iChartOption, YAxiMax);
-    // 合并用户自定义series
-    mergeSeries(this.iChartOption, this.baseOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  /**
-   * 图表渲染完毕后，获得y刻度的最大值
-   * @param {echartsIns为图表实例} echartsIns
-   * @param {index为yAxis数组下标} index
-   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
-   */
-  getYAxisMaxValue(echartsIns, index) {
-    return echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[1];
-  }
-
-  /**
-   * 图表渲染完毕后，获得y轴刻度的最小值
-   * @param {echartsIns为图表实例} echartsIns
-   * @param {index为yAxis数组下标} index
-   * _extent是一个数组，_extent[0]为该轴上最小值，_extent[1]为该轴上最大值
-   */
-  getYAxisMinValue(echartsIns, index) {
-    return echartsIns.getModel().getComponent('yAxis', index)?.axis.scale._extent[0];
-  }
-}
-
-export default LineChart;

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