@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,148 +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 'echarts/extension/bmap/bmap';
-import { CHART_TYPE } from '../../util/constants';
-
-// 判断map资源加载的flag
-let mapApiLoaded = false;
-export default class BaiduMapChart extends BaseChart {
-
-    static name = CHART_TYPE.BAIDU_MAP
-
-    constructor() {
-        super();
-        // 图表echarts实例
-        this.echartsIns = null;
-        // 图表渲染容器
-        this.dom = null;
-        // 图表配置项
-        this.option = null;
-        // 图表所需数据
-        this.data = null;
-        // 图表容器的宽高变化监听器
-        this.resizeObserver = null;
-    }
-
-    // 初始化图表渲染容器
-    init(dom) {
-        this.uninstall();
-        this.dom = dom;
-    }
-
-    // 初始化图表渲染配置
-    setSimpleOption(chartName, option) {
-        this.option = option;
-    }
-
-    loadMap({ key, version, url }) {
-        return new Promise((resolve) => {
-            if (mapApiLoaded) {
-                resolve(window.BMap);
-                return
-            }
-            let cbName = 'bmap' + Date.now();
-            let script = document.createElement('script');
-            let ver = version || '2.0';
-
-            window[cbName] = function () {
-                mapApiLoaded = true;
-                resolve(window.BMap);
-            }
-            script.src = [`${url}?${ver}`, `ak=${key}`, `callback=${cbName}`].join('&');
-            document.body.appendChild(script);
-        })
-    }
-
-    // 加载百度api，并渲染图表
-    render() {
-        let url = this.option.url;
-        let ver = this.option.v || '2.0';
-        let key = this.option.key;
-        this.loadMap({ key, version: ver, url }).then(() => {
-            this.renderInit();
-        })
-    }
-
-    // 渲染图表
-    renderInit() {
-        this.echartsIns = echarts.init(this.dom);
-        // 渲染
-        this.setOption(this.option);
-        this.setResizeObserver();
-        // 图表渲染完成时回调
-        this.renderCallBack && this.renderCallBack(this.echartsIns);
-    }
-
-    // 第一次渲染: 调用echarts原生的setOption
-    setOption(option) {
-        this.echartsIns.setOption(option);
-    }
-
-    // 图表渲染完成时回调
-    onRenderReady(callback) {
-        this.renderCallBack = callback;
-    }
-
-    // 监听容器变化
-    setResizeObserver() {
-        this.resizeObserver = new ResizeObserver(entries => {
-            this.resizeDom();
-        });
-        this.resizeObserver.observe(this.dom);
-    }
-
-    resizeDom() {
-        this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
-    }
-
-    // 图表刷新，包括刷新配置和数据
-    refresh(iChartOption) {
-        this.iChartOption = iChartOption;
-        this.setSimpleOption(this.chartName, iChartOption);
-        this.render();
-    }
-
-    // 图表刷新，仅刷新数据
-    refreshData(data) {
-        this.iChartOption.series[0].data = data;
-        this.refresh(this.iChartOption);
-    }
-
-    // 刷新图表自适应宽度
-    setResize() {
-        this.resizeDom();
-    }
-
-    // 销毁图表
-    uninstall() {
-        // 卸载window resize监听功能
-        window.removeEventListener('resize', this.throttleResize);
-        // 卸载container容器变化监听
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        this.echartsDisposed();
-        this.echartsIns = null; 
-        // 销毁dom
-        this.dom = null;
-    }
-    
-    // 销毁ECharts实例
-    echartsDisposed() {
-        if (this.echartsIns && !this.echartsIns.isDisposed()) {
-            this.echartsIns.dispose();
-        }
-    }
-}

package/src/components/charts/components/BarChart/barChartOption.js

@@ -1,76 +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 BarChartOption = (width, option, type, stack) => {
-
-  // 计算柱子宽度
-  let barWidth;
-  // 定义默认列数
-  let columns = option.series.length;
-  // 包含柱状图/双向柱状图只有一个柱子
-  if (type === 'contain' || type === 'both-sides' || type === 'double-sides') {
-    columns = 1;
-  }
-  //堆叠柱状图的柱子需要另外判断
-  else if (type === 'stack') {
-    columns = stack ? Object.keys(stack).length : 1;
-  }
-  else if (type === 'range' || type === 'water-fall') {
-    columns = option.series.length / 2;
-  }
-
-  const rows = option.series[0]?.data?.length;
-  const intervalRows = rows;
-
-  // 柱子宽度为16px的初始间距 
-  const interval = (width - (rows * columns * 16 + rows * 4 * (columns - 1))) / intervalRows
-
-  if (interval >= 16) {
-    barWidth = 16;
-  }
-  else {
-    const flag = (width - intervalRows * 16 - rows * 4 * (columns - 1)) / (rows * columns)
-    barWidth = flag > 2 ? flag : 2
-  }
-
-  // 不同系列柱子之间的距离
-  let barGap;
-  if (type === 'contain') {
-    barGap = `-100%`;
-  }
-  // 柱间距离规范是4px
-  else {
-    barGap = `${4 / barWidth * 100}%`
-  }
-
-  option.series.forEach(item => {
-    Object.assign(item, {
-      barWidth,
-      barGap
-    });
-  });
-};
-
-// 动态计算柱条宽度更新配置项
-const updateWidth = (baseOption, chartInstance, iChartOption) => {
-  let width;
-  if (chartInstance.getModel()) {
-    if (iChartOption.direction === 'horizontal') {
-      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().height;
-    } else {
-      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().width;
-    }
-    BarChartOption(width, baseOption, iChartOption.type, iChartOption.stack);
-  }
-}
-
-export default updateWidth;

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

package/src/components/charts/components/BarChart/handleOptipn.js

@@ -1,102 +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 chartToken from './chartToken';
-import getTooltipContentHtmlStr from '../../option/config/tooltip/formatter'
-import { isNumber } from '../../util/type';
-
-/**
- * 给堆叠图的柱子中间加上空白缝隙, 处理柱子圆角的递进关系
- */
-export function setStack(baseOption, iChartOption, legendData, seriesData) {
-  const type = iChartOption.type;
-  if (type && type === 'stack') {
-    // 添加堆叠图空白缝隙
-    baseOption.series.forEach(item => {
-      item.itemStyle.borderWidth = chartToken.borderWidth;
-      item.itemStyle.borderColor = chartToken.borderColor;
-    });
-    // 柱子圆角，上层数值为空时，圆角递进到下层
-    const direction = iChartOption.direction;
-    iChartOption.data.forEach((item, i) => {
-      for (let j = legendData.length - 1; j >= 0; j--) {
-        const name = legendData[j];
-        if (item[name]) {
-          seriesData[name][i] = {
-            value: seriesData[name][i],
-            itemStyle: {
-              borderRadius:
-                direction === 'horizontal'
-                  ? [0, chartToken.borderRadius, chartToken.borderRadius, 0]
-                  : [chartToken.borderRadius, chartToken.borderRadius, 0, 0],
-            },
-          };
-          break;
-        }
-      }
-    });
-  }
-}
-
-// 将y轴文本都转为正数
-function setAbsoluteYaxisLabel(baseOption) {
-  const yAxis = baseOption.yAxis;
-  yAxis.forEach(item => {
-    item.axisLabel.formatter = value => {
-      return Math.abs(value);
-    };
-  });
-}
-
-function setTipFormatter(params) {
-  const config = {
-    title: '',
-    children: []
-  }
-  params.forEach((item, index) => {
-    if (index === 0) {
-      config.title = item.name
-    }
-    const value = isNumber(item.value) ? Math.abs(item.value) : item.value
-    const dataItem = {
-      name: item.seriesName,
-      value,
-      iconColor: item.color
-    }
-    config.children.push(dataItem)
-  });
-  return getTooltipContentHtmlStr(config);
-}
-
-/**
- * 将所有y轴的label都转为正数
- * 内置好转为正数的tooltip
- */
-export function setDoubleSides(baseOption, iChartOption) {
-  const type = iChartOption.type;
-  if (type && type === 'double-sides') {
-    setAbsoluteYaxisLabel(baseOption)
-    if (!baseOption.tooltip.formatter) {
-      baseOption.tooltip.formatter = setTipFormatter
-    }
-  }
-}
-
-/**
- * 设置柱状图的方向
- */
-export function setDirection(baseOption, direction) {
-  if (direction && direction === 'horizontal') {
-    const temp = baseOption.xAxis;
-    baseOption.xAxis = baseOption.yAxis;
-    baseOption.yAxis = temp;
-  }
-}