@ebiz/designer-components 0.0.47 → 0.0.49

package/src/components/charts/components/AssembleBubbleChart/BaseOption.js

@@ -1,50 +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 BaseOption = {
-  dataset: [
-    {
-      source: [],
-    },
-  ],
-  // 图例颜色
-  color: [],
-  legend: {
-    data: [],
-    icon: 'circle',
-    left: 'center',
-    bottom: 0,
-    textStyle: {},
-  },
-  hoverLayerThreshold: Infinity,
-  series: [
-    {
-      type: 'custom',
-      colorBy: 'data',
-      renderItem: "",
-      name: 'custom',
-      coordinateSystem: 'none',
-      encode: {
-        tooltip: 'value',
-        itemName: 'id',
-      },
-    },
-  ],
-};
-
-const CHARTTYPE = {
-  NON_NESTED: 'non-nested', // 非嵌套式
-  NON_NESTED_AGGREGATE: 'non-nested-aggregate', // 非嵌套聚合式
-  NESTED: 'nested', // 嵌套式
-};
-
-export default BaseOption;
-export { CHARTTYPE };

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

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

@@ -1,66 +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 defendXSS from '../../util/defendXSS';
-import { CHARTTYPE } from './BaseOption';
-import cloneDeep from '../../util/cloneDeep';
-
-// 配置默认鼠标悬浮提示框
-export function defaultTooltipFormatter(baseOpt) {
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = params => {
-      let htmlString = '';
-      const bgColor = params.data.borderColor || params.data.color;
-      htmlString +=
-        `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color
-          :${defendXSS(bgColor)};">` +
-        '</span>' +
-        `<span style="display:inline-block;margin-left:5px">${defendXSS(params.data.type)}</span>` +
-        '<br/>' +
-        `<span style="display:inline-block;">${defendXSS(params.data.label)}</span>` +
-        `<span style="display:inline-block;margin-left:10px;">${defendXSS(params.data.value)}</span>` +
-        '<br/>';
-      return htmlString;
-    };
-  }
-}
-
-const judgeType = (that) => {
-  const { iChartOption: { type, data } } = that;
-  if (!data || !data.length) throw new Error('聚合气泡图必须定义data数据');
-  const noChild = data.every(item => !item.children || !item.children.length);
-  for (let i in CHARTTYPE) {
-    if (type === CHARTTYPE[i]) {
-      that.chartType = CHARTTYPE[i];
-    }
-  }
-  if (!that.chartType) {
-    that.chartType = CHARTTYPE[noChild ? 'NON_NESTED' : 'NESTED'];
-  }
-};
-
-const bindLegendEvent = (baseOpt, chartInstance) => {
-  let originSource = cloneDeep(baseOpt.dataset[0].source);
-  chartInstance.on('legendselectchanged', function (params) {
-    let newSource = [originSource[0]];
-    for (let type in params.selected) {
-      if (params.selected[type]) {
-        newSource = newSource.concat(originSource.filter(v => v.type === type));
-      }
-    }
-    baseOpt.dataset[0].source = newSource;
-    setTimeout(() => {
-      chartInstance.setOption(baseOpt);
-    }, 20);
-  });
-};
-
-export { judgeType, bindLegendEvent };

package/src/components/charts/components/AssembleBubbleChart/handleRootData.js

@@ -1,165 +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 { random } from '../../util/math';
-import { CHARTTYPE } from './BaseOption';
-
-function setChartPosition(polarInfo, chartInstance) {
-  let radius = polarInfo.radius, widthDis, heightDis;
-  const width = chartInstance.getWidth();
-  const height = chartInstance.getHeight();
-
-  const getNumber = (value, { callback1, callback2, callback3 }) => {
-    let correctValue;
-    if (typeof value !== 'number') {
-      if (value.indexOf('%') !== -1) { // 有百分比的字符串数字
-        correctValue = callback1(value);
-      } else { // 无百分比的字符串数字
-        correctValue = callback2(value);
-      }
-    } else { // 数值
-      correctValue = callback3(value);
-    }
-    return correctValue;
-  };
-
-  radius = getNumber(radius, {
-    callback1: (value) => value.substring(0, value.indexOf('%')) / 100,
-    callback2: (value) => parseFloat(value) / Math.min(height, width),
-    callback3: (value) => value / Math.min(height, width),
-  });
-
-  widthDis = getNumber(polarInfo.center[0], {
-    callback1: (value) => width * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
-    callback2: (value) => parseFloat(value),
-    callback3: (value) => value,
-  });
-
-  heightDis = getNumber(polarInfo.center[1], {
-    callback1: (value) => height * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
-    callback2: (value) => parseFloat(value),
-    callback3: (value) => value,
-  });
-
-  return { radius, widthDis, heightDis };
-}
-
-export function handleRootData(d3, { baseOption, chartInstance, iChartOption, chartType }) {
-  // polar的信息会在index中被删除，此处需要储存一份用于计算节点坐标等。
-  const polarInfo = cloneDeep(baseOption.polar);
-  const { textStyle = {}, sortType = 'decline' } = iChartOption;
-  let distance = iChartOption.distance;
-  if (iChartOption.distance === undefined) {
-    switch (chartType) {
-      case CHARTTYPE.NON_NESTED:
-        distance = 50;
-        break;
-      default:
-        distance = 5;
-        break;
-    }
-  }
-  const stratify = (sourceData) => {
-    let sortResult = d3
-      .stratify()
-      .parentId(function (d) {
-        return d.id.substring(0, d.id.lastIndexOf('.'));
-      })(sourceData)
-      .sum(function (d) {
-        return d.value || 0;
-      });
-    switch (sortType) {
-      case 'decline': // 降序（中心向外，球尺寸依次减小）
-        sortResult = sortResult.sort((a, b) => b.value - a.value);
-        break;
-      case 'ascend': // 升序（中心向外，球尺寸依次增大）
-        sortResult = sortResult.sort((a, b) => a.value - b.value);
-        break;
-      case 'unset':  // 不设置
-        break;
-      default:
-        break;
-    }
-    return sortResult;
-  };
-  // 给baseOptionion设置renderItem,且只能设置一次，多次则会造成视图重叠
-  baseOption.series[baseOption.series.length - 1].renderItem = (params, api) => {
-    const displayRoot = stratify(baseOption.dataset[0].source);
-    const context = params.context;
-    if (!context.layout) {
-      context.layout = true;
-      context.nodes = {};
-      d3
-        .pack()
-        .size([api.getWidth() - 2, api.getHeight() - 2])
-        .padding(distance)(displayRoot);
-      displayRoot.descendants().forEach(node => { context.nodes[node.id] = node; });
-    }
-    const node = context.nodes[api.value('id')];
-    if (!node || node.r <= 0) {
-      return;
-    }
-    // 设置label值是否显示，若有嵌套则不显示，否则显示
-    const nodeName = (!node.children || !node.children.length) ? node.data.label : '';
-    const { radius, widthDis, heightDis } = setChartPosition(polarInfo, chartInstance);
-    return {
-      type: 'circle',
-      // 定义球的坐标及半径
-      shape: {
-        cx: node.x * radius + widthDis,
-        cy: node.y * radius + heightDis,
-        // 若移动页面使得球的半径小于0时则取反
-        r: node.r * radius > 0 ? node.r * radius : -node.r * radius,
-      },
-      transition: ['shape'],
-      z2: api.value('depth') * 2,
-      // 定义球的文本信息等
-      textContent: {
-        type: 'text',
-        style: {
-          text: (node.depth !== 0 && node.data.showLabel) ? (textStyle.formatter && textStyle.formatter(node) || nodeName) : '',
-          fontFamily: 'Arial',
-          width: node.r,
-          height: node.r,
-          borderRadius: node.r,
-          // 文本溢出显示
-          overflow: 'visible',
-          fontSize: Math.max(node.r / 3, 12),
-          fill: chartType !== CHARTTYPE.NESTED ? '#ffffff' : node.data.textColor, // 设计稿白主题默认白色
-          ...textStyle
-        },
-      },
-      // 设置文本显示的位置
-      textConfig: { position: 'inside' },
-      style: {
-        // 设置球的边框色
-        stroke: node.data.borderColor,
-        // 设置球的背景色
-        fill: node.data.color,
-      },
-      // 设置球的跳动范围
-      keyframeAnimation: {
-        duration: 3000,
-        loop: true,
-        delay: random() * 2000,
-        keyframes: [
-          { y: -3, percent: 0.5, easing: 'cubicOut' },
-          { y: 0, percent: 1, easing: 'bounceOut' },
-          { x: -3, percent: 0.5, easing: 'cubicOut' },
-          { x: 0, percent: 1, easing: 'bounceOut' },
-        ],
-      },
-    };
-  };
-}
-
-

package/src/components/charts/components/AssembleBubbleChart/handleSeriesData.js

@@ -1,70 +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 { CHARTTYPE } from "./BaseOption";
-import { getColor, codeToRGB } from "../../util/color";
-import chartToken from "./chartToken";
-
-export function handleSeriesData(iChartOption, baseOpt, chartType) {
-  const sourceData = [
-    {
-      depth: 0,
-      id: 'option',
-      value: 1255,
-      type: undefined,
-      label: undefined,
-    }
-  ];
-  const legendData = [];
-
-  const loopData = (data, depth = 1, parentInfo = { id: 'option' }) => {
-    data.forEach((item, index) => {
-      item.depth = depth;
-      item.id = `${parentInfo.id}.${index}`;
-      item.textColor = chartToken.labelColor;
-      if (depth === 1) {
-        let hasRecordIndex = legendData.findIndex(v => v === item.type);
-        item.color = getColor(iChartOption.color, hasRecordIndex !== -1 ? hasRecordIndex : legendData.length);
-        item.borderColor = item.color;
-      } else {
-        item.type = parentInfo.type;
-        item.color = parentInfo.color;
-        item.borderColor = parentInfo.borderColor;
-      }
-      sourceData.push(item);
-      if (!legendData.includes(item.type)) {
-        legendData.push(item.type);
-      }
-      if (chartType === CHARTTYPE.NESTED && item.children && item.children.length) {
-        if (item.depth === 1) {
-          item.color = codeToRGB(item.color, .2);
-        }
-        loopData(item.children, depth + 1, item);
-      }
-    });
-  };
-
-  loopData(iChartOption.data);
-
-  baseOpt.dataset[0].source = sourceData;
-
-  baseOpt.legend.data = legendData;
-
-  [...legendData].reverse().forEach((item) => {
-    baseOpt.series.unshift({
-      name: item,
-      type: 'pie',
-      data: [],
-      radius: ['0%', '0%'],
-      colorBy: 'data',
-    });
-  });
-}

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

@@ -1,65 +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 BaseOption from './BaseOption';
-import { defaultTooltipFormatter, judgeType, bindLegendEvent } from './handleOption';
-import { handleRootData } from './handleRootData';
-import { handleSeriesData } from './handleSeriesData';
-import init from '../../option/init';
-import { isArray } from '../../util/type';
-import { CHART_TYPE } from '../../util/constants';
-import PolarCoordSys from '../../option/PolarSys';
-
-class AssembleBubbleChart {
-
-  static name = CHART_TYPE.ASSEMBLE_BUBBLE;
-  static chartType;
-
-  constructor(iChartOption, chartInstance, plugins) {
-    this.baseOption = cloneDeep(BaseOption);
-    this.iChartOption = init(iChartOption);
-    this.chartInstance = chartInstance;
-    this.plugins = plugins;
-    this.updateOption(chartInstance);
-  }
-
-  updateOption(chartInstance) {
-    this.iChartOption.position = this.iChartOption.position ?? this.iChartOption.chartPosition;
-    const { d3 } = this.plugins;
-    if (!d3) throw new Error('您必须安装d3才可以使用聚合气泡图');
-    if (!isArray(this.iChartOption.color)) { this.iChartOption.color = [this.iChartOption.color]; }
-    // 判断图表类型
-    judgeType(this);
-    // 装载除series之外的其他配置
-    PolarCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.ASSEMBLE_BUBBLE);
-    // 补齐默认的tooltip.formatter
-    defaultTooltipFormatter(this.baseOption);
-    // 处理dataset、legend.data、补全series
-    handleSeriesData(this.iChartOption, this.baseOption, this.chartType);
-    // 编写自定义renderItem函数
-    handleRootData(d3, this);
-    // 聚合气泡图属于自定义系列，使用polar会报错，需要删除
-    delete this.baseOption.polar;
-    // 自定义系列的图例点击事件需要自行绑定
-    bindLegendEvent(this.baseOption, chartInstance);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption(option) {
-    this.baseOption = option;
-  }
-}
-
-export default AssembleBubbleChart;

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

@@ -1,162 +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 * as echarts from 'echarts'
-import { CHART_TYPE } from '../../util/constants';
-
-// 常规的调用方法
-let amapPromise = null
-
-export default class AutonaviMapChart extends BaseChart {
-
-  static name = CHART_TYPE.AUTONAVI_MAP
-
-  constructor() {
-    super();
-    // 图表echarts实例
-    this.echartsIns = null;
-    // 图表icharts实例
-    this.ichartsIns = null;
-
-    // 图表echarts配置项
-    this.eChartOption = null;
-    // 图表icharts配置项
-    this.iChartOption = null;
-
-    // 图表渲染容器
-    this.dom = null;
-    // 图表配置项
-    this.option = null;
-  }
-
-  getAmap (option) {
-    if (!amapPromise) {
-      const key = option.key;
-      const url = option.url;
-      const version = option.version || option.ver || option.v;
-      amapPromise = new Promise((resolve) => {
-        const cbName = 'amap' + Date.now();
-        let script = document.createElement('script');
-        window[cbName] = resolve;
-        let src = `${url}?v=${version}&key=${key}`;
-        if (option.plugin) {
-          src += `&plugin=${option.plugin}`;
-        }
-        script.src = `${src}&callback=${cbName}`;
-        script.onload = () => resolve();
-        document.body.appendChild(script);
-      })
-    }
-    return amapPromise;
-  }
-
-  // 初始化图表渲染容器
-  init (dom) {
-    this.uninstall();
-    this.dom = dom;
-    this.echartsIns = echarts.init(this.dom);
-  }
-
-  // 初始化图表渲染配置
-  setSimpleOption (chartName, option) {
-    this.option = option;
-    this.getAmap(this.option).then(() => {
-      this.echartsIns.setOption(this.option);
-      this.setResizeObserver();
-    })
-  }
-
-  // 图表渲染回调
-  render () {
-    this.initDom() // 渲染dom
-    this.renderCallBack && this.renderCallBack(this);
-  }
-
-  // 图表渲染完成时回调
-  onRenderReady (callback) {
-    this.renderCallBack = callback;
-  }
-
-  // 渲染dom
-  initDom () {
-
-  }
-
-
-  // 监听容器变化
-  setResizeObserver () {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    this.resizeObserver = new ResizeObserver(entries => {
-      this.resizeDom();
-    });
-    this.resizeObserver.observe(this.dom);
-  }
-
-  resizeDom () {
-    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
-  }
-
-  // 图表刷新，刷新配置项
-  refresh (option) {
-    this.iChartOption = option;
-    this.setSimpleOption('AutonaviMapChart', this.iChartOption);
-    this.resizeDom();
-  }
-
-  // 图表刷新，仅刷新数据
-  refreshData (data) {
-    this.iChartOption.series[0].data = data;
-    this.refresh(this.iChartOption);
-  }
-
-  // 刷新图表自适应宽度
-  setResize () {
-    this.resizeDom();
-  }
-
-  // 销毁图表
-  uninstall () {
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    // 销毁ECharts实例
-    if (this.echartsIns && !this.echartsIns.isDisposed()) {
-      this.echartsIns.dispose();
-    }
-    this.echartsIns = null;
-    this.dom = null;
-  }
-
-  // 获取到ECharts实例
-  getEchartsInstance () {
-    return this.echartsIns;
-  }
-
-  // 获取到ECharts配置项
-  getEchartsOption () {
-    return this.echartsIns.getOption();
-  }
-
-  // 获取 ECharts 高德地图组件
-  getAmapComponent () {
-    return this.echartsIns.getModel().getComponent('amap');
-  }
-
-  // 获取高德地图实例
-  getAmapInstance () {
-    return this.getAmapComponent().getAMap();
-  }
-}