@ebiz/designer-components 0.0.18-beta.10 → 0.0.18-beta.13

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

@@ -1,96 +1,96 @@
-/**
- * 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;
+/**
+ * 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 +1,82 @@
-/**
- * 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);
-  }
-}
-
+/**
+ * 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 +1,17 @@
-/**
- * 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;
+/**
+ * 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 +1,74 @@
-/**
- * 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};
+/**
+ * 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};