@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,193 +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 { codeToHex, codeToRGB } from '../../util/color';
-import merge from '../../util/merge';
-import chartToken from './chartToken';
-
-// 配置数据
-export function handleData(iChartOption, baseOpt) {
-  const dataName = [];
-  iChartOption.data.forEach(item => {
-    dataName.push(item.name);
-  });
-  baseOpt.xAxis.data = dataName;
-  baseOpt.series[0].data = iChartOption.data;
-}
-
-// 配置山峰颜色及透明度
-export function handleColor(iChartOption, baseOpt) {
-  // 配置显示的颜色
-  baseOpt.series[0].itemStyle = {
-    // opacity: iChartOption.opacity,
-    normal: {
-      color(params) {
-        return codeToRGB(
-          codeToHex(iChartOption.color[params.dataIndex % iChartOption.color.length]),
-          iChartOption.opacity || 0.8,
-        );
-      },
-    },
-  };
-}
-
-// 配置文本
-export function handleText(iChartOption, baseOpt) {
-  // 山峰头部文本
-  baseOpt.series[0].label = {
-    normal: {
-      show: iChartOption.text && iChartOption.text.show === true ? iChartOption.text && iChartOption.text.show : false,
-      position: 'top',
-      textStyle: {
-        fontSize:
-          iChartOption.text && iChartOption.text.fontSize ? iChartOption.text && iChartOption.text.fontSize : 12,
-        color: iChartOption.text && iChartOption.text.fontColor ? iChartOption.text.fontColor : chartToken.labelColor,
-      },
-    },
-  };
-}
-
-// 配置ChartPadding
-export function handlePadding(iChartOption, baseOpt) {
-  baseOpt['grid'] = {
-    top: iChartOption.padding[0],
-    right: iChartOption.padding[1],
-    bottom: iChartOption.padding[2],
-    left: iChartOption.padding[3] + 25,
-  };
-}
-
-// 配置相邻山峰间隔
-export function handleCoincide(iChartOption, baseOpt) {
-  baseOpt.series[0]['barCategoryGap'] = iChartOption.coincide ? iChartOption.coincide : '-100%';
-}
-
-const setColorStops = (color, opacity, index, colors) => {
-  if (!color || index >= colors.length) {
-    throw new Error('Invalid color configuration');
-  }
-  return !opacity ? color : codeToRGB(codeToHex(color), opacity || 0.8);
-};
-
-// 配置渐变色
-export function setGradientColor(baseOpt, color, gradientColor, opacity, iChartOption) {
-  if (gradientColor) {
-    baseOpt.series[0].itemStyle = {
-      normal: {
-        color(params) {
-          return {
-            type: 'linear',
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: setColorStops(gradientColor[params.dataIndex % gradientColor.length], opacity, params.dataIndex, gradientColor),
-              },
-              {
-                offset: 1,
-                color: setColorStops(iChartOption.color[params.dataIndex % iChartOption.color.length], opacity, params.dataIndex, iChartOption.color),
-              }
-            ],
-            globalCoord: false,
-          };
-        },
-      },
-    };
-  }
-}
-
-const colorWhole = (baseOpt, item, markLine, colorError, index) => {
-  baseOpt.series[0].data[index] = {
-    value: item,
-    itemStyle: {
-      color: markLine.color || colorError,
-    },
-  };
-};
-
-const colorExcess = (baseOpt, iChartOpt, item, index, i) => {
-  const { markLine, color, opacity } = iChartOpt;
-  const { colorError } = Token.config.colorState;
-  baseOpt.series[0].data[index] = {
-    value: item,
-    itemStyle: {
-      color: {
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        type: 'linear',
-        colorStops: [
-          {
-            offset: 0,
-            color: markLine.color || colorError,
-          },
-          {
-            offset: (item - markLine[i]) / item,
-            color: markLine.color || colorError,
-          },
-          {
-            offset: (item - markLine[i]) / item,
-            color: codeToRGB(codeToHex(color[index % color.length]), opacity || 0.8),
-          },
-          {
-            offset: 1,
-            color: codeToRGB(codeToHex(color[index % color.length]), opacity || 0.8),
-          },
-        ],
-      },
-    },
-  };
-};
-
-const reviseMarkLineData = (baseOpt, iChartOpt, i) => {
-  const { markLine } = iChartOpt;
-  const { colorError } = Token.config.colorState;
-  baseOpt.series[0].data.forEach((item, index) => {
-    if (item > markLine[i] && i === 'top') {
-      // 整体变色
-      if (markLine.topWholeColor) {
-        colorWhole(baseOpt, item, markLine, colorError, index);
-      } else {
-        // 超出部分变色
-        colorExcess(baseOpt, iChartOpt, item, index, i);
-      }
-    } else if (item < markLine[i] && i === 'bottom') {
-      // 低于bottom的直接整体变色，不用判断
-      colorWhole(baseOpt, item, markLine, colorError, index)
-    }
-  });
-};
-
-
-// 配置阈值线(整体变色，超过部分变色)
-export function handleMarkLine(baseOpt, iChartOpt) {
-  const { markLine } = iChartOpt;
-  if (markLine) {
-    for (const i in markLine) {
-      if (i === 'top' || i === 'bottom') {
-        // series插入阈值线
-        baseOpt.series[0].markLine.data.push({ yAxis: markLine[i] });
-        // 重置数据
-        reviseMarkLineData(baseOpt, iChartOpt, i);
-      }
-    }
-    // 合并属性
-    merge(baseOpt.series[0].markLine, markLine);
-  }
-}
-
-
-

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

@@ -1,39 +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 merge from '../../util/merge';
-import chartToken from './chartToken';
-
-/**
- * 配置山峰图高亮状态
- * @param {*} baseOpt
- * @param {*} iChartOpt
- */
-export const handleEmphasis = (baseOpt, iChartOpt) => {
-  const { emphasis } = iChartOpt;
-  const defaultEmphasis = {
-    disabled: true,
-    label: {
-      // 为啥是蓝色待确定
-      color: Token.config.colorState.colorInfo,
-    },
-    itemStyle: {
-      borderColor: chartToken.emphasisItemBorderColor,
-      borderWidth: 2,
-    },
-  };
-  merge(defaultEmphasis, emphasis);
-  baseOpt.series[0] = {
-    ...baseOpt.series[0],
-    emphasis: defaultEmphasis,
-  };
-};

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

@@ -1,96 +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 getBaseOption from './baseOption';
-import {
-  handleData,
-  handleColor,
-  handleText,
-  handlePadding,
-  handleCoincide,
-  setGradientColor,
-  handleMarkLine,
-} from './handleOption';
-import { handleEmphasis } from './handleSeries';
-import init from '../../option/init';
-import title from '../../option/config/rectTitle';
-import toolTip from '../../option/config/tooltip';
-import xAxis from '../../option/config/xAxis';
-import yAxis from '../../option/config/yAxis';
-import { CHART_TYPE } from '../../util/constants';
-
-class HillChart {
-
-  static name = CHART_TYPE.HILL
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    this.baseOption = getBaseOption();
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(iChartOption, chartInstance);
-  }
-
-  updateOption(iChartOption, chartInstance) {
-    // 是否显示坐标轴
-    // 配置x轴
-    this.baseOption.xAxis = xAxis(iChartOption)[0];
-    if (iChartOption.axis && iChartOption.axis.show) {
-      // 配置y轴
-      this.baseOption.yAxis = yAxis(this.baseOption, iChartOption, CHART_TYPE.HILL);
-    } else {
-      this.baseOption.xAxis['axisLine'] = {
-        show: false,
-      };
-      this.baseOption.xAxis['axisTick'] = {
-        show: false,
-      };
-      this.baseOption.yAxis.show = false;
-      // 配置标题
-      this.baseOption.title = title(iChartOption, CHART_TYPE.HILL, iChartOption.yAxis && iChartOption.yAxis.nameTextStyle);
-    }
-    // 配置数据
-    handleData(iChartOption, this.baseOption);
-    // 配置山峰颜色及透明度
-    handleColor(iChartOption, this.baseOption);
-    // 配置文本
-    handleText(iChartOption, this.baseOption);
-    // 配置ChartPadding
-    handlePadding(iChartOption, this.baseOption);
-    // 配置相邻山峰间隔
-    handleCoincide(iChartOption, this.baseOption);
-    // 配置悬浮提示框
-    this.baseOption.tooltip = toolTip(iChartOption, CHART_TYPE.HILL);
-    this.baseOption.tooltip.trigger = 'item';
-    // 配置渐变色
-    setGradientColor(
-      this.baseOption,
-      iChartOption.color,
-      iChartOption.gradientColor,
-      iChartOption.opacity,
-      iChartOption,
-    );
-    // 配置阈值线
-    handleMarkLine(this.baseOption, iChartOption);
-    // 配置高亮状态
-    handleEmphasis(this.baseOption, iChartOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() { }
-}
-
-export default HillChart;

package/src/components/charts/components/HoneycombChart/NodeManager.js

@@ -1,172 +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 TipManager from './TipManager';
-export default class NodeManager {
-    data;
-    theme;
-    render;
-    tipHtml;
-    vGap;
-    hGap;
-    layout;
-    dom;
-    // 节点宽度
-    nodeWidth;
-    // 节点dom数组
-    nodeCluster;
-    container;
-    hcContainer;
-    tipManager;
-
-
-    constructor(dom, option) {
-        this.dom = dom;
-        this.container = this.dom.getElementsByClassName('hc-rows')[0];
-        this.hcContainer = this.dom.getElementsByClassName('hc-container')[0];
-        this.data = option.data || [];
-        this.theme = option.theme;
-        this.render = option.render;
-        this.tipHtml = option.tipHtml;
-        this.vGap = option.vGap + 'px' || 0;
-        this.hGap = option.hGap === undefined ? 8 : option.hGap;
-        this.layout = option.layout || 'common';
-        this.nodeWidth = this.getNodeWidth() + this.hGap;
-        this.tipManager = new TipManager(this.theme, this.tipHtml);
-        this.tipManager.init(this.hcContainer);
-        this.createNodes();
-    }
-
-    /**
-     * 在container中插入一个节点，获取节点宽度
-    */
-    getNodeWidth() {
-        let node = this.data[0];
-        let nodeDom = this.createNode(node);
-        this.container.appendChild(nodeDom);
-        let width = nodeDom.clientWidth;
-        this.container.removeChild(nodeDom)
-        return width;
-    }
-
-    /**
-     * 根据用户传入数据生成节点Dom
-     */
-    createNodes() {
-        let nodeCluster = [];
-        this.data.forEach((node) => {
-            let nodeDom = this.createNode(node);
-            nodeDom.addEventListener('mouseenter', (e) => {
-                this.tipManager.show(e, node, this.hcContainer, this.dom);
-            });
-            nodeDom.addEventListener('mouseleave', (e) => {
-                this.tipManager.close(e);
-            });
-            nodeCluster.push(nodeDom);
-        });
-        this.nodeCluster = nodeCluster;
-    }
-
-    /**
-     * 创建节点
-     **/
-    createNode(node) {
-        let { render } = node;
-        let nodeDom = document.createElement('div');
-        nodeDom.classList.add('hc-node');
-        nodeDom.style.marginRight = this.hGap / 2 + 'px';
-        nodeDom.style.marginLeft = this.hGap / 2 + 'px';
-        let renderFun = render || this.render;
-        if (renderFun) {
-            renderFun(nodeDom, node);
-        }
-        return nodeDom;
-    }
-
-    /**
-     * 根据布局生成图表
-     **/
-    layoutNodes() {
-        let containerWidth = this.hcContainer.getBoundingClientRect().width;
-        let total = this.data.length;
-        // 一行放几个节点
-        let size = Math.trunc(containerWidth / this.nodeWidth);
-        // 获取布局分布数据
-        let rowSize = this.getRowSize(total, size);
-        // 布局
-        rowSize.forEach((item, index) => {
-            // 创建一个rowDom
-            let rowDom = document.createElement('div');
-            rowDom.classList.add('hc-row');
-            // 位移
-            let left = this.getRowLeft(index);
-            rowDom.style.left = left + 'px';
-            // vGap控制节点之间垂直间距
-            if (index !== 0) {
-                rowDom.style.marginTop = this.vGap;
-            }
-            // 插入
-            item.forEach(i => {
-                let dom = this.nodeCluster[i];
-                rowDom.appendChild(dom);
-            });
-            this.container.appendChild(rowDom);
-        });
-    }
-
-    /**
-     * 返回每行left值
-    **/
-    getRowLeft(index) {
-        let left = 0;
-        switch (this.layout) {
-            case 'common':
-                left = index % 2 === 1 ? this.nodeWidth / 2 : 0;
-                break;
-            case 'ellipse':
-                left = index % 2 === 0 ? this.nodeWidth / 2 : 0;
-                break;
-            default:
-                left = 0;
-                break
-        }
-        return left;
-    }
-
-    /**
-     * 返回二维数组
-     **/
-    getRowSize(total, size) {
-        let arr = [];
-        let num = this.layout === 'ellipse' ? size - 1 : size;
-        let row = 0;
-        for (let i = 0, j = 0; i < total; i++) {
-            if (j >= num) {
-                j = 0;
-                row++;
-                switch (this.layout) {
-                    case 'common':
-                    case 'ellipse':
-                        num = num === size ? size - 1 : size;
-                        break;
-                    case 'rect':
-                        num = size;
-                }
-            }
-            if (j === 0) {
-                arr[row] = [];
-            }
-            arr[row][j] = i;
-            j++;
-        }
-        return arr;
-    }
-}

package/src/components/charts/components/HoneycombChart/TipManager.js

@@ -1,75 +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.
- *
- */
-export default class TipManager {
-    constructor(theme, tipHtml) {
-        this.theme = theme;
-        this.isShow = false;
-        this.tipHtml = tipHtml;
-        this.tooltipDom = null;
-        this.setTipTimeOut = null;
-    }
-
-    init(tipContainer) {
-        this.tooltipDom = document.createElement('div');
-        this.tooltipDom.classList.add('hc-tooltip');
-        if (this.theme === 'dark') {
-            this.tooltipDom.classList.add('dark');
-        }
-        this.tooltipDom.addEventListener('mouseenter', (e) => {
-            if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
-        });
-        this.tooltipDom.addEventListener('mouseleave', (e) => {
-            this.close(e);
-        });
-        tipContainer.appendChild(this.tooltipDom);
-    }
-
-    show(event, node, tipContainer, chartContainer) {
-        // 唯一到别的上面去要马上刷新
-        if (this.setTipTimeOut) { clearTimeout(this.setTipTimeOut); }
-        this.isShow = true;
-        this.tooltipDom.innerHTML = '';
-        this.tipHtml(this.tooltipDom, node);
-        this.tooltipDom.style.display = 'block';
-        this.setPosition(event, tipContainer, chartContainer);
-    }
-
-    close(event) {
-        this.setTipTimeOut = setTimeout(() => {
-            this.isShow = false;
-            this.tooltipDom.style.display = 'none';
-        }, 200);
-    }
-
-    setPosition(event, tipContainer, chartContainer) {
-        let tipRect = this.tooltipDom.getBoundingClientRect();
-        let targetRect = event.target.getBoundingClientRect();
-        let tipContainerRect = tipContainer.getBoundingClientRect();
-        let chartContainerRect = chartContainer.getBoundingClientRect();
-        let tipTop = targetRect.top - tipContainerRect.top - tipRect.height;
-        let tipLeft = targetRect.left - tipContainerRect.left + targetRect.width;
-        // 如果弹窗右侧超出容器，则向左进行位置修正
-        let reviseH = (tipContainerRect.left - chartContainerRect.left) + tipLeft + tipRect.width - chartContainerRect.width;
-        // 此处-5是为了能够给阴影留下一些显示位置
-        if (reviseH > 0) {
-            tipLeft = tipLeft - reviseH - 5;
-        }
-        // 如果弹窗顶部超出容器，则向下进行位置修正
-        let reviseV = tipTop + (tipContainerRect.top - chartContainerRect.top);
-        // 此处+5是为了能够给阴影留下一些显示位置
-        if (reviseV < 0) {
-            tipTop = tipTop - reviseV + 5;
-        }
-        this.tooltipDom.style.top = tipTop + 'px';
-        this.tooltipDom.style.left = tipLeft + 'px';
-    }
-}

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

@@ -1,117 +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 BaseChart from '../BaseChart';
-import NodeManager from './NodeManager';
-import { CHART_TYPE } from '../../util/constants';
-
-export default class HoneycombChart extends BaseChart {
-
-    static name = CHART_TYPE.HONEYCOMB
-
-    constructor() {
-        super();
-        // 图表渲染容器
-        this.dom = null;
-        // 图表配置项
-        this.option = null;
-        // 图表所需数据
-        this.data = null;
-        // 图表容器的宽高变化监听器
-        this.resizeObserver = null;
-        // 生成节点和计算位置
-        this.nodeManager = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setSimpleOption(chartName, option) {
-        this.option = option;
-    }
-
-    // 图表渲染回调
-    render() {
-        this.data = this.option.data || [];
-        this.initDom();
-        this.setResizeObserver();
-        this.renderCallBack && this.renderCallBack(this);
-    }
-
-    // 图表渲染完成时回调
-    onRenderReady(callback) {
-        this.renderCallBack = callback;
-    }
-
-    initDom() {
-        this.dom.style.padding = this.option.padding || 0;
-        this.dom.insertAdjacentHTML('beforeend', '<div class="hc-container"><div class="hc-rows"></div></div>');
-        if (this.data.length > 0) {
-            this.nodeManager = new NodeManager(this.dom, this.option);
-        }
-    }
-
-    resizeDom() {
-        if (this.data.length > 0) {
-            Array.prototype.slice.call(this.dom.getElementsByClassName('hc-row')).forEach(element => {
-                element.remove();
-            });
-            this.nodeManager.layoutNodes();
-        }
-    }
-
-    // 监听容器变化
-    setResizeObserver() {
-        this.resizeObserver = new ResizeObserver(entries => {
-            this.resizeDom();
-        });
-        this.resizeObserver.observe(this.dom);
-    }
-
-    // 图表刷新，刷新配置项
-    refresh(option) {
-        Array.prototype.slice.call(this.dom.getElementsByClassName('hc-container')).forEach(element => {
-            element.remove();
-        });
-        this.option = option;
-        this.data = option.data;
-        this.initDom();
-        this.resizeDom();
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData(data) {
-        Array.prototype.slice.call(this.dom.getElementsByClassName('hc-container')).forEach(element => {
-            element.remove();
-        });
-        this.data = data;
-        this.option.data = data;
-        this.initDom();
-        this.resizeDom();
-    }
-
-    // 刷新图表自适应宽度
-    setResize() {
-        this.resizeDom();
-    }
-
-    // 销毁图表
-    uninstall() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        this.dom.innerHTML = '';
-    }
-}