@ebiz/designer-components 0.0.18

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

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

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

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

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

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

@@ -0,0 +1,117 @@
+/**
+ * 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 = '';
+    }
+}