@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/charts/feature/wcag/index.js

@@ -1,335 +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';
-
-// 多层级的对象合并 函数
-function assignObj(target = {}, sources = {}) {
-  const itemObj = target || {};
-  if (typeof target !== 'object' || typeof sources !== 'object' || !sources) {
-    return sources;
-  }
-  for (const key in sources) {
-    if (Object.prototype.hasOwnProperty.call((target || {}), key)) {
-      itemObj[key] = assignObj(target[key], sources[key]);
-    }
-    else {
-      itemObj[key] = sources[key];
-    }
-  }
-  return itemObj;
-}
-
-// 图表可选择能力
-class WcagObserver {
-  constructor(mode, theme, echartsIns, eChartOption) {
-    this.echartsIns = echartsIns;
-    this.eChartOption = eChartOption;
-
-    this.focusedOption = {}; // 聚焦框体配置项
-    this.theme = theme;
-    this.mode = mode; // 选择模式'single' | 'series' | 'auto'
-    this.curMode = undefined; // 当前模式
-    this.clickFlag = false; // 模拟阻止点击冒泡
-    this.nextParam = { // 键盘tab需要的参数
-      componentType: 'series',
-      seriesIndex: 0,
-      dataIndex: 0,
-      seriesType: ''
-    };
-
-    this.focused = false; // 图表是否被tab聚焦
-
-    this.onDocClick = this.docClick.bind(this)
-    this.onKeyUp = this.keyUp.bind(this)
-    this.onSeriesClick = this.seriesClick.bind(this)
-
-    this.addSelectMode(mode);
-  }
-
-  // 单数据选中
-  setSingleSelectedStyle(param) {
-    const subTypeList = ['line', 'scatter', 'radar'];
-    let rect = {};
-    this.curMode = 'single';
-    if (param?.dataIndex === undefined && this.mode === 'auto') {
-      this.setSeriesSelectedStyle(param);
-      return;
-    }
-    const node = this.echartsIns.getModel().getSeriesByIndex(param.seriesIndex).getData()._graphicEls[param.dataIndex];
-    if (subTypeList.includes(param.seriesType)) {
-      rect = {
-        x: node.x - node._sizeX - 4,
-        y: node.y - node._sizeY - 4,
-        width: node._sizeX * 2 + 8,
-        height: node._sizeY * 2 + 8,
-      };
-    }
-    else {
-      rect = node._rectStroke || node._rect || node.path?.getBoundingRect();
-    }
-    this.setCommonOptionByRectList([rect], param);
-  }
-
-  // 系列选中
-  setSeriesSelectedStyle(param) {
-    const subTypeList = ['line', 'scatter', 'radar'];
-    let rectList = [];
-    this.curMode = 'series';
-    const seriesModel = this.echartsIns.getModel().getSeriesByIndex(param.seriesIndex);
-
-    if (subTypeList.includes(seriesModel.subType)) {
-      const graphicList = seriesModel.getData()._graphicEls;
-      rectList = graphicList.filter(t => !!t).map(node => {
-        return {
-          x: node.x - node._sizeX - 4,
-          y: node.y - node._sizeY - 4,
-          width: node._sizeX * 2 + 8,
-          height: node._sizeY * 2 + 8,
-        };
-      });
-    }
-    else {
-      rectList = seriesModel.getData()._graphicEls
-        .map(t => t._rectStroke || t._rect || t.path?.getBoundingRect())
-        .filter(t => !!t);
-    }
-    this.setCommonOptionByRectList(rectList, param);
-  }
-
-  setCommonOptionByRectList(rectList, eventParam) {
-    this.focusedOption = {
-      series: []
-    };
-    const pointList = [];
-    const lineList = [];
-    rectList.forEach(rect => {
-      const list = [
-        {
-          x: rect.x,
-          y: rect.y
-        },
-        {
-          x: rect.x + rect.width,
-          y: rect.y
-        },
-        {
-          x: rect.x,
-          y: rect.y + rect.height
-        },
-        {
-          x: rect.x + rect.width,
-          y: rect.y + rect.height
-        },
-      ];
-      const lines = [
-        [
-          { x: rect.x, y: rect.y },
-          { x: rect.x + rect.width, y: rect.y }
-        ],
-        [
-          { x: rect.x + rect.width, y: rect.y },
-          { x: rect.x + rect.width, y: rect.y + rect.height }
-        ],
-        [
-          { x: rect.x + rect.width, y: rect.y + rect.height },
-          { x: rect.x, y: rect.y + rect.height }
-        ],
-        [
-          { x: rect.x, y: rect.y + rect.height },
-          { x: rect.x, y: rect.y }
-        ]
-      ];
-      pointList.push(...list);
-      lineList.push(...lines);
-    });
-    
-    const markColor = this.theme.match(/dark/gi) ? '#fff' : '#252b3a';
-    this.focusedOption.series[eventParam.seriesIndex] = {
-      data: [],
-      markPoint: {
-        symbol: 'circle',
-        silent: true,
-        symbolSize: 6,
-        blur: {
-          itemStyle: {
-            opacity: 1
-          }
-        },
-        itemStyle: {
-          borderWidth: 1,
-          borderColor: markColor,
-          color: '#fff'
-        },
-        data: pointList,
-        animation: false
-      },
-      markLine: {
-        silent: true,
-        symbol: 'none',
-        lineStyle: {
-          color: markColor
-        },
-        blur: {
-          lineStyle: {
-            opacity: 1
-          }
-        },
-        emphasis: {
-          disabled: true
-        },
-        data: lineList,
-        animation: false
-      }
-    };
-  }
-
-  // 给图表加上可选择能力'single' | 'series' | 'auto'
-  addSelectMode(focusedMode) {
-    let isClick = false;
-    const chartDom = this.echartsIns.getDom();
-    chartDom.setAttribute('tabindex', 0);
-    chartDom.addEventListener('focus', () => {
-      if(isClick) return;
-      this.focused = true;
-      chartDom.classList.add('chart-focus');
-      this.seriesClick(this.nextParam);
-    });
-    chartDom.addEventListener('blur', () => {
-      this.focused = false;
-      chartDom.classList.remove('chart-focus');
-      this.docClick();
-    });
-
-    chartDom.addEventListener('mousedown', () => {
-      isClick = true;
-      setTimeout(() => {
-        isClick = false;
-      }, 200);
-    });
-
-    this.mode = focusedMode;
-    this.echartsIns.on('click', 'series', this.onSeriesClick);
-    document.addEventListener('click', this.onDocClick);
-    document.addEventListener('keyup', this.onKeyUp);
-  }
-
-  unobserve() {
-    document.removeEventListener('click', this.onDocClick);
-    document.removeEventListener('keyup', this.onKeyUp);
-    this.echartsIns.off('click', this.onSeriesClick);
-  }
-
-  docClick() {
-    if (!this.clickFlag) {
-      this.focusedOption = {};
-      this.curMode = '';
-      this.updateOption();
-    }
-  };
-
-  keyUp(event) { // 键盘tab事件
-    if (!this.focused) return;
-
-    const { seriesIndex, dataIndex } = this.nextParam;
-    const isNext = event.key === 'ArrowRight' || event.key === ' ';
-    const isPrev = event.key === 'ArrowLeft';
-    if (event.key === 'Tab') {
-      event.stopPropagation();
-      return;
-    }
-
-    if (isNext || isPrev) {
-      event.stopPropagation();
-      const curMode = this.curMode;
-      if (curMode === 'single') {
-        const maxDataIndex = this.eChartOption.series[seriesIndex].data.length - 1;
-        if (isNext) {
-          if (dataIndex >= maxDataIndex) {
-            this.nextParam.dataIndex = 0;
-          }
-          else {
-            this.nextParam.dataIndex += 1;
-          }
-        }
-        else if (isPrev) {
-          if (dataIndex === 0) {
-            this.nextParam.dataIndex = maxDataIndex;
-          }
-          else {
-            this.nextParam.dataIndex -= 1;
-          }
-        }
-      }
-      else if (curMode === 'series') {
-        const maxSeriesIndex = this.eChartOption.series.length - 1;
-        if (isNext) {
-          if (seriesIndex >= maxSeriesIndex) {
-            this.nextParam.seriesIndex = 0;
-          }
-          else {
-            this.nextParam.seriesIndex += 1;
-          }
-        }
-        else if (isPrev) {
-          if (seriesIndex === 0) {
-            this.nextParam.seriesIndex = maxSeriesIndex;
-          }
-          else {
-            this.nextParam.seriesIndex -= 1;
-          }
-        }
-      }
-      this.seriesClick(this.nextParam);
-    }
-  };
-
-  seriesClick(param) {
-    if (param.componentType !== 'series') {
-      return;
-    }
-    param.event?.stop(); // 阻止冒泡触发docclick
-    this.clickFlag = true;
-    setTimeout(() => { // 阻止冒泡触发docclick
-      this.clickFlag = false;
-    }, 200);
-    let type = this.mode;
-    if (type === 'auto') {
-      type = this.curMode === '' ? 'series' : 'single';
-    }
-
-    if (type === 'single') {
-      this.setSingleSelectedStyle(param);
-    }
-    else if (type === 'series') {
-      this.setSeriesSelectedStyle(param);
-    }
-
-    this.nextParam = {
-      componentType: 'series',
-      seriesIndex: param.seriesIndex,
-      dataIndex: param.dataIndex,
-      seriesType: param.seriesType
-    };
-    this.updateOption();
-  };
-
-  updateOption() {
-    const option = cloneDeep(this.eChartOption);
-    assignObj(option, this.focusedOption);
-    this.echartsIns.setOption(option, { notMerge: true });
-    setTimeout(() => {
-      this.echartsIns.resize();
-    });
-  }
-}
-
-export default WcagObserver;

package/src/components/charts/feature/xss/index.js

@@ -1,52 +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.
- *
- */
-const escapeScript = (string) => {
-  let str = string.replace('<script>', '').replace('</script>', '');
-  return str;
-};
-
-const defendScript = (obj) => {
-  if (typeof obj === 'string') {
-    return escapeScript(obj);
-  } else if (typeof obj === 'number') {
-    return obj;
-  } else if (typeof obj === 'object') {
-    for (const key in obj) {
-      if (Object.hasOwnProperty.call(obj, key)) {
-        const xssKey = defendScript(key);
-        const xssValue = defendScript(obj[key]);
-        delete obj[key];
-        obj[xssKey] = xssValue;
-      }
-    }
-    return obj;
-  } else {
-    return obj;
-  }
-};
-
-/**
- * 对图表option的键值对进行过滤限制
- */
-const xssOption = (option) => {
-  for (let key in option) {
-    if (Object.hasOwnProperty.call(option, key)) {
-      const xssKey = defendScript(key);
-      const xssValue = defendScript(option[key]);
-      delete option[key];
-      option[xssKey] = xssValue;
-    }
-  }
-  return option;
-};
-
-export default xssOption;

package/src/components/charts/framework/charts/CircleArcChart/index.js

@@ -1,142 +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 Relation from '../../core/Relation';
-import LineManager from '../../module/line/Manager';
-import NodeManager from '../../module/node/Manager';
-import { CHART_TYPE } from '../../../util/constants';
-import ConnectorManager from '../../module/connector/Manager';
-
-const NODE_WIDTH = 100;
-const NODE_HEIGHT = 50;
-
-export default class CircleArcChart extends Relation {
-    static name = CHART_TYPE.CIRCLE
-    // 图表渲染容器
-    dom;
-    // 图表外部传入数据
-    optionData;
-    // 图表nodes+edges格式数据
-    relationData;
-    // 图表容器边距
-    padding = 30;
-    // 图表最外层容器
-    container;
-    // 图表svg元素容器
-    svgContainer;
-    // 图表html元素容器
-    htmlContainer;
-    // 图表容器的宽高变化监听器
-    resizeObserver = null;
-    // 连线管理器
-    lineManager;
-    // 节点管理器
-    nodeManager;
-    // 连接点管理器
-    connectorManager;
-
-    constructor() {
-        super();
-        this.dom = null;
-        this.option = null;
-        this.resizeObserver = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setOption(option) {
-        super.setOption(option);
-    }
-
-    // 图表渲染
-    render() {
-        super.render();
-        this.setDefaultLayout();
-        this.createNodes();
-        this.createLines();
-        this.setResizeObserver();
-        this.renderCallBack && this.renderCallBack(this);
-
-    }
-
-    // 设置默认布局
-    setDefaultLayout(){
-        this.option.layout = merge({
-            nodeShape: 'circle',
-        },this.option.layout);
-    }
-
-    // 根据节点大小和关系，计算布局，创建和渲染节点
-    createNodes() {
-        this.optionData = this.option.data;
-        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
-        this.setNodeSize(this.optionData);
-        this.nodeManager.layout();
-        this.nodeManager.render();
-        this.relationData = this.nodeManager.getData();
-    }
-
-    // 补充宽高信息到节点数据上
-    setNodeSize(node) {
-        node.width = node.width || this.option?.node?.width || NODE_WIDTH;
-        node.height = node.height || this.option?.node?.height || NODE_HEIGHT;
-        if (node.children && node.children.length > 0) {
-            node.children.forEach(child => {
-                this.setNodeSize(child);
-            })
-        }
-    }
-
-    // 创建连线
-    createLines() {
-        // 绘制连线
-        this.lineManager = new LineManager(this.option,this.svgContainer,this);
-        this.lineManager.layout(this.nodeManager);        
-        this.lineManager.render(); 
-        // 绘制连接点
-        this.connectorManager = new ConnectorManager(this, this.relationData.edges,this.option);
-    }
-
-    // 图表渲染完成时回调
-    onRendered(callback) {
-        this.renderCallBack = callback;
-    }
-
-    // 图表刷新，刷新配置项
-    refresh() {
-
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData() {
-
-    }
-
-    // 刷新图表自适应宽度
-    resize() {
-
-    }
-
-    setResizeObserver() {
-
-    }
-
-    // 销毁图表
-    uninstall() {
-        this.resizeObserver.disconnect();
-    }
-}
-

package/src/components/charts/framework/charts/CircleChart/index.js

@@ -1,140 +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 Relation from '../../core/Relation';
-import LineManager from '../../module/line/Manager';
-import NodeManager from '../../module/node/Manager';
-import { CHART_TYPE } from '../../../util/constants';
-import ConnectorManager from '../../module/connector/Manager';
-
-const NODE_WIDTH = 100;
-const NODE_HEIGHT = 50;
-
-export default class CircleChart extends Relation {
-    static name = CHART_TYPE.CIRCLE
-    // 图表渲染容器
-    dom;
-    // 图表外部传入数据
-    optionData;
-    // 图表nodes+edges格式数据
-    relationData;
-    // 图表容器边距
-    padding = 30;
-    // 图表最外层容器
-    container;
-    // 图表svg元素容器
-    svgContainer;
-    // 图表html元素容器
-    htmlContainer;
-    // 图表容器的宽高变化监听器
-    resizeObserver = null;
-    // 连线管理器
-    lineManager;
-    // 节点管理器
-    nodeManager;
-    // 连接点管理器
-    connectorManager;
-
-    constructor() {
-        super();
-        this.dom = null;
-        this.option = null;
-        this.resizeObserver = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setOption(option) {
-        super.setOption(option);
-    }
-
-    // 图表渲染
-    render() {
-        super.render();
-        // this.createContainer();
-        this.setDefaultLayout();
-        this.createNodes();
-        this.createLines();
-        this.setResizeObserver();
-        this.renderCallBack && this.renderCallBack(this);
-
-    }
-
-    // 设置默认布局
-    setDefaultLayout(){
-        this.option.layout = merge({
-            nodeShape: 'circle',
-        },this.option.layout);
-    }
-
-    // 根据节点大小和关系，计算布局，创建和渲染节点
-    createNodes() {
-        this.optionData = this.option.data;
-        this.nodeManager = new NodeManager(this.option, this.htmlContainer);
-        this.setNodeSize(this.optionData);
-        this.nodeManager.layout();
-        this.nodeManager.render();
-        this.relationData = this.nodeManager.getData();
-    }
-
-    // 补充宽高信息到节点数据上
-    setNodeSize(optionData) {
-        optionData.nodes.forEach(child => {
-            child.width = child.width || this.option?.node?.width || NODE_WIDTH;
-            child.height = child.height || this.option?.node?.height || NODE_HEIGHT;
-        }) 
-    }
-
-    // 创建连线
-    createLines() {
-        // 绘制连线
-        this.lineManager = new LineManager(this.option,this.svgContainer,this);
-        this.lineManager.layout(this.nodeManager);        
-        this.lineManager.render(); 
-        // 绘制连接点
-        this.connectorManager = new ConnectorManager(this, this.relationData.edges,this.option);
-    }
-
-    // 图表渲染完成时回调
-    onRendered(callback) {
-        this.renderCallBack = callback;
-    }
-
-    // 图表刷新，刷新配置项
-    refresh() {
-
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData() {
-
-    }
-
-    // 刷新图表自适应宽度
-    resize() {
-
-    }
-
-    setResizeObserver() {
-
-    }
-
-    // 销毁图表
-    uninstall() {
-        this.resizeObserver.disconnect();
-    }
-}
-