@ebiz/designer-components 0.0.48 → 0.0.50

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

@@ -1,63 +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 { changeRgbaOpacity } from '../../util/color';
-import defendXSS from '../../util/defendXSS';
-function tooltipFormatter(params) {
-  const seriesName = params.seriesName;
-  const color = params.color;
-  const data = params.data;
-  const [x, y, radius, name] = data;
-  let htmlString = `<div style="margin-bottom:4px;">
-                                ${defendXSS(seriesName)}
-                         </div>`;
-  htmlString += `<div style="margin-bottom:4px;">
-                            <span style="display:inline-block;width:10px;height:10px;
-                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
-                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
-    color,
-  )};"></span>
-                            <span>${defendXSS(name)}</span>
-                       </div>`;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
-                <span>${defendXSS(x)}</span>
-            </div>
-        `;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
-                <span>${defendXSS(y)}</span>
-            </div>
-        `;
-  htmlString += `
-            <div>
-                <span style="display:inline-block;margin-right:8px;min-width:60px;">半径维度</span> 
-                <span>${defendXSS(radius)}</span>
-            </div>
-        `;
-  return htmlString;
-}
-
-/**
- * 配置默认的鼠标悬浮提示框
- */
-export function setTooltip(baseOpt, iChartOption) {
-  baseOpt.tooltip.trigger = 'item';
-  if (iChartOption.trigger==='axis') {
-    baseOpt.tooltip.trigger = 'axis';
-    baseOpt.tooltip.axisPointer.type = 'shadow';
-  }
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = tooltipFormatter;
-  }
-}

package/src/components/charts/components/BubbleChart/handleSeries.js

@@ -1,86 +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 { getColor, codeToRGB } from '../../util/color';
-import cloneDeep from '../../util/cloneDeep';
-import { getMarkLineDefault } from '../../option/config/mark';
-import chartToken from './chartToken';
-import merge from '../../util/merge';
-
-export const seriesInit = {
-  // 数据
-  data: [],
-  // 气泡图
-  type: 'scatter',
-  // 鼠标hover时显示label，并且其他legend变成灰色
-  emphasis: {
-    label: {
-      show: true,
-      color: '#ffffff',
-      fontSize: 14,
-      formatter(param) {
-        return param.data[3];
-      },
-      position: 'top',
-    },
-  },
-  // 气泡失去焦点时，配置样式
-  blur:{},
-  // 气泡样式
-  itemStyle: {},
-};
-
-export function setSeries({ legendData, data, markLine, color, iChartOption }) {
-  // 更改hover时显示的label颜色
-  seriesInit.emphasis.label.color = chartToken.emphasisLabelColor;
-  const series = [];
-  legendData.forEach((legend, index) => {
-    const seriesUnit = cloneDeep(seriesInit);
-    const itemBorderColor = getColor(color, index);
-    // 设置图元透明度
-    const itemColor = codeToRGB(itemBorderColor, iChartOption.symbolOpacity || 0.2);
-    // 阈值线
-    if (markLine) {
-      seriesUnit.markLine = getMarkLineDefault(true);
-      if (markLine.y) {
-        seriesUnit.markLine.data.push({ yAxis: markLine.y });
-      }
-      if (markLine.x) {
-        seriesUnit.markLine.data.push({ xAxis: markLine.x });
-      }
-    }
-    // 数据 / 数据名称
-    seriesUnit.name = legend;
-    seriesUnit.data = data[legend];
-    seriesUnit.itemStyle = {
-      color: itemColor,
-      borderColor: itemBorderColor,
-      borderWidth: 1,
-    };
-    series.push(seriesUnit);
-  });
-  return series;
-}
-
-// 添加seires属性
-export function handleSeriesExtra(baseOpt, iChartOption) {
-  const { symbol, symbolRotate, symbolOffset, cursor, label, itemStyle, blur, emphasis } = iChartOption;
-  baseOpt.series.forEach(item => {
-    item.symbol = symbol;
-    item.symbolRotate = symbolRotate;
-    item.symbolOffset = symbolOffset;
-    item.cursor = cursor;
-    item.label = label;
-    merge(item.itemStyle, itemStyle);
-    merge(item.blur, blur);
-    merge(item.emphasis, emphasis);
-  });
-}

package/src/components/charts/components/BubbleChart/handleTrendLine.js

@@ -1,119 +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 * as echarts from 'echarts';
-import chartToken from './chartToken';
-import { isArray } from '../../util/type'
-import { getColor } from '../../util/color';
-
-// 针对数据系列单独设置趋势线
-function setSeparateTrendLine(legendData, iChartOption, option) {
-  const { trendLineConfig, data, color } = iChartOption
-  trendLineConfig.forEach((item,index) => {
-     //dataset中原有就有一条数据集用于visualmap，此处索引从1开始
-    const setIndex=index+1
-    const { dataName, ...other } = item
-    if (dataName && legendData.includes(dataName)) {
-      const dataIndex = legendData.indexOf(dataName)
-      const lineColor = getColor(color, dataIndex)
-      const setUnit = {
-        source: data[dataName]
-      }
-      option.dataset.push(setUnit);
-      option.dataset.push({
-        transform: {
-          type: 'ecStat:regression',
-          config: other,
-        },
-        fromDatasetIndex:setIndex*2-1
-      });
-      // 趋势线
-      option.series.push({
-        name: 'trendline',
-        type: 'line',
-        smooth: true,
-        datasetIndex: setIndex*2,
-        symbolSize: 0.1,
-        symbol: 'circle',
-        label: {
-          show: true,
-          fontSize: 14,
-          color: chartToken.labelColor,
-        },
-        labelLayout: {
-          dx: -20,
-        },
-        encode: {
-          label: 2,
-          tooltip: 1,
-        },
-        silent: true,
-        itemStyle: {
-          color: lineColor
-        }
-      })
-
-    }
-  })
-}
-
-
-
-/**
- * 针对趋势线需求，图表需要进行特殊处理
- */
-export function handleTrendLine(option, iChartOption, plugins, legendData) {
-  const ecStat = plugins.ecStat;
-  if (iChartOption.trendLineConfig) {
-    if (ecStat) {
-      echarts.registerTransform(ecStat.transform.regression);
-      const isArrayConfig = isArray(iChartOption.trendLineConfig)
-      if (isArrayConfig) {
-        setSeparateTrendLine(legendData, iChartOption, option)
-      } else {
-        // 集合数据
-        option.dataset.push({
-          transform: {
-            type: 'ecStat:regression',
-            config: iChartOption.trendLineConfig,
-          },
-        });
-        // 趋势线
-        option.series.push({
-          name: 'trendline',
-          type: 'line',
-          smooth: true,
-          datasetIndex: 1,
-          symbolSize: 0.1,
-          symbol: 'circle',
-          label: {
-            show: true,
-            fontSize: 14,
-            color: chartToken.labelColor,
-          },
-          labelLayout: {
-            dx: -20,
-          },
-          encode: {
-            label: 2,
-            tooltip: 1,
-          },
-          silent: true,
-        });
-      }
-    } else {
-      throw new Error('您必须安装echarts-stat才可以使用趋势线功能');
-    }
-  }
-}
-
-
-

package/src/components/charts/components/BubbleChart/handleVisualMap.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.
- *
- */
-import min from '../../util/sort/min';
-import max from '../../util/sort/max';
-
-export function setVisualMap(baseOption, iChartOption, legendData) {
-  const visualMap = [];
-  const bubbleSize = iChartOption.bubbleSize || [10, 70];
-  const radius = baseOption.dataset[0].source.map(item => {
-    return item[2];
-  });
-  const minValue = min(radius);
-  const maxValue = max(radius);
-  const seriesIndex = new Array(legendData.length).fill(0).map((item, index) => {
-    return index;
-  });
-  visualMap.push({
-    show: false,
-    dimension: 2,
-    min: minValue,
-    max: maxValue,
-    seriesIndex,
-    inRange: {
-      symbolSize: bubbleSize,
-    },
-  });
-  return visualMap;
-}
-
-// 设置数据集
-export function setDataset(iChartOption) {
-  let source = [];
-  Object.keys(iChartOption.data).forEach(key => {
-    source = source.concat(iChartOption.data[key]);
-  });
-  return [
-    {
-      source,
-    },
-  ];
-}

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

@@ -1,96 +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 init from '../../option/init';
-import BaseOption from '../../option/base';
-import cloneDeep from '../../util/cloneDeep';
-import { getLegendData, getXAxisData } from './handleData';
-import { setSeries, handleSeriesExtra } from './handleSeries';
-import { setTooltip } from './handleOptipn';
-import { handleTrendLine } from './handleTrendLine';
-import { setDataset, setVisualMap } from './handleVisualMap';
-import RectCoordSys from '../../option/RectSys';
-import { mergeSeries, mergeVisualMap } from '../../util/merge';
-import { CHART_TYPE } from '../../util/constants';
-
-class BubbleChart {
-
-  static name = CHART_TYPE.BUBBLE
-
-  constructor(iChartOption, chartInstance, plugins) {
-    this.baseOption = {};
-    this.baseOption = cloneDeep(BaseOption);
-    this.iChartOption = {};
-    this.chartInstance = chartInstance;
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(plugins);
-  }
-
-  updateOption(plugins) {
-    const iChartOption = this.iChartOption;
-    // 装载除series之外的其他配置
-    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BUBBLE);
-    // 增加气泡图的默认悬浮提示框
-    setTooltip(this.baseOption, iChartOption);
-    // 组装基础数据
-    const legendData = getLegendData(iChartOption.data);
-    // 设置x轴类型，是目录型，还是数值型
-    const { xAxisType } = iChartOption;
-    if (
-      legendData &&
-      legendData[0] &&
-      iChartOption.data[legendData[0]] &&
-      iChartOption.data[legendData[0]][0] &&
-      iChartOption.data[legendData[0]][0][0] &&
-      typeof iChartOption.data[legendData[0]][0][0] === 'string'
-    ) {
-      this.baseOption.xAxis.forEach(item => {
-        item.type = xAxisType || 'category';
-        item.data = getXAxisData(iChartOption.data);
-      });
-    } else {
-      this.baseOption.xAxis.forEach(item => {
-        item.type = xAxisType || 'value';
-      });
-    }
-    // 赋值数据
-    this.baseOption.legend.data = this.baseOption.legend.data || legendData;
-    this.baseOption.series = setSeries({
-      legendData,
-      data: iChartOption.data,
-      markLine: iChartOption.markLine,
-      color: this.baseOption.color,
-      iChartOption,
-    });
-    // 添加dataset
-    this.baseOption.dataset = setDataset(iChartOption);
-    // 设置VisualMap，通过数值映射气泡大小
-    this.baseOption.visualMap = setVisualMap(this.baseOption, iChartOption, legendData);
-    // 针对趋势线的需求，图表需要进行特殊处理
-    handleTrendLine(this.baseOption, iChartOption, plugins, legendData);
-    // 添加seires属性
-    handleSeriesExtra(this.baseOption, iChartOption);
-    // 合并用户自定义series
-    mergeSeries(iChartOption, this.baseOption);
-    // 合并用户自定义visualMap
-    mergeVisualMap(iChartOption, this.baseOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() { }
-}
-
-export default BubbleChart;

package/src/components/charts/components/BulletChart/bulletChartOption.js

@@ -1,82 +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 BulletChartOption = (width, option, iChartOption) => {
-
-  // 计算柱子宽度
-  let barWidth;
-  let backgroundWidth;
-  const rows = option.series[0].data.length;
-  const intervalRows = rows;
-
-  // 柱子宽度为16px的初始间距 
-  const interval = (width - rows * 16) / intervalRows
-
-  if (interval >= 16) {
-    barWidth = 16;
-  }
-  else {
-    const flag = (width - intervalRows * 16) / rows
-    barWidth = flag > 2 ? flag : 2
-  }
-
-  // 柱子背景宽度为32px的初始间距 
-  const intervalBG = (width - rows * 32) / intervalRows
-
-  if (intervalBG >= 8) {
-    backgroundWidth = 32;
-  }
-  else {
-    const flag = (width - intervalRows * 8) / rows
-    backgroundWidth = flag > 9 ? flag : 9
-  }
-
-  // 计算阈值的偏移量和阈值宽度
-  let symbolSize;
-  option.series.forEach(item => {
-    if (item.type === 'scatter') {
-      symbolSize = item.symbolSize;
-    }
-  });
-  if (iChartOption.direction === 'horizontal') {
-    symbolSize[1] = backgroundWidth;
-  } else {
-    symbolSize[0] = backgroundWidth;
-  }
-
-  option.series.forEach(item => {
-    if (item.color) {
-      Object.assign(item, {
-        barWidth: backgroundWidth,
-      });
-    } else {
-      Object.assign(item, {
-        barWidth
-      });
-    }
-
-  });
-};
-
-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;
-    }
-    BulletChartOption(width, baseOption, iChartOption);
-  }
-}
-
-export default updateWidth;

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

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

@@ -1,74 +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 xAxis from '../../option/config/xAxis';
-import yAxis from '../../option/config/yAxis';
-import defendXSS from '../../util/defendXSS';
-import { CHART_TYPE } from '../../util/constants';
-
-/**
- * Tips提示框回调函数
- */
- function toolTipFormatter(params) {
-    
-	// 矩形部分不显示toolTip
-	if(params.seriesIndex > 1) {
-		return
-	}
-  let htmlString = `<div style="margin-bottom:4px;">${defendXSS(params.name)}</div>`;
-	htmlString += `
-		<div>
-			<span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${defendXSS(
-				params.color,
-				)};">
-			</span>
-			<span style="margin-left:5px;">
-                            <span style="display:inline-block;margin-right:8px;min-width:60px;">${defendXSS(
-        params.seriesName,
-      )}</span>
-			<span style="font-weight:bold">
-				${defendXSS(params.value)}
-			</span>
-		</div>
-	`
-  return htmlString;
-}
-
-function handleXaxis(baseOpt, iChartOpt) {
-  const basicXaxis = xAxis(iChartOpt);
-  basicXaxis[0].type = 'value';
-  basicXaxis[0].axisLine.show = false;
-  baseOpt.xAxis = basicXaxis;
-}
-
-function handleYaxis(baseOpt, iChartOpt) {
-  const basicYaxis = yAxis(baseOpt, iChartOpt, CHART_TYPE.BULLET);
-  baseOpt.yAxis = basicYaxis;
-}
-
-function handleTooltip(baseOpts, iChartOpt) {
-  if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
-    baseOpts.tooltip.formatter = toolTipFormatter;
-  }
-}
-
-/**
- * 设置柱状图的方向
- */
-function setDirection(baseOption, direction) {
-  if (direction && direction === 'horizontal') {
-    const temp = baseOption.xAxis;
-    baseOption.xAxis = baseOption.yAxis;
-    baseOption.yAxis = temp;
-  }
-}
-
-export { handleXaxis, handleYaxis, handleTooltip, setDirection};