@ebiz/designer-components 0.0.18

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

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

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

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

@@ -0,0 +1,140 @@
+/**
+ * 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();
+    }
+}
+