@ebiz/designer-components 0.0.18-beta.1 → 0.0.18-beta.2

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

@@ -1,48 +1,48 @@
-/**
- * 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';
-import { getColor } from '../../util/color';
-import Token from '../../feature/token';
-
-export function setVisualMap(legendData, seriesData, markLine, colors) {
-  const visualMap = [];
-  if (markLine) {
-    const topValue = markLine.top;
-    const bottomValue = markLine.bottom;
-    legendData.forEach((legendName, index) => {
-      const data = seriesData[legendName];
-      const minData = min(data);
-      const maxData = max(data);
-      const bottom = bottomValue || minData - 1;
-      const top = topValue || maxData + 1;
-      // 根据数据大小映射颜色
-      visualMap.push({
-        show: false,
-        type: 'piecewise',
-        dimension: 1,
-        seriesIndex: index,
-        pieces: [
-          {
-            gt: bottom,
-            lt: top,
-            color: getColor(colors, index),
-          },
-        ],
-        outOfRange: {
-          color:Token.config.colorState.colorError,
-        },
-      });
-    });
-  }
-  return visualMap;
-}
+/**
+ * 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';
+import { getColor } from '../../util/color';
+import Token from '../../feature/token';
+
+export function setVisualMap(legendData, seriesData, markLine, colors) {
+  const visualMap = [];
+  if (markLine) {
+    const topValue = markLine.top;
+    const bottomValue = markLine.bottom;
+    legendData.forEach((legendName, index) => {
+      const data = seriesData[legendName];
+      const minData = min(data);
+      const maxData = max(data);
+      const bottom = bottomValue || minData - 1;
+      const top = topValue || maxData + 1;
+      // 根据数据大小映射颜色
+      visualMap.push({
+        show: false,
+        type: 'piecewise',
+        dimension: 1,
+        seriesIndex: index,
+        pieces: [
+          {
+            gt: bottom,
+            lt: top,
+            color: getColor(colors, index),
+          },
+        ],
+        outOfRange: {
+          color:Token.config.colorState.colorError,
+        },
+      });
+    });
+  }
+  return visualMap;
+}

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

@@ -1,151 +1,151 @@
-/**
- * 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 LineChart from '../LineChart';
-import mini from '../../feature/mini/miniBarChart';
-import init from '../../option/init';
-import cloneDeep from '../../util/cloneDeep';
-import BaseOption from '../../option/base';
-import updateWidth from './barChartOption';
-import { mergeVisualMap, mergeSeries } from '../../util/merge';
-import { setStack, setDirection, setDoubleSides } from './handleOptipn';
-import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
-import { setSeries, setRange, setMarkLine, setWaterFall, setLimitFormatter } from './handleSeries';
-import { CHART_TYPE, ADAPTIVE_THEME } from '../../util/constants';
-
-class BarChart {
-
-  static name = CHART_TYPE.BAR
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.baseOption = cloneDeep(BaseOption);
-    this.chartInstance = chartInstance;
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption();
-  }
-
-  updateOption() {
-    const iChartOption = this.iChartOption;
-    // 装载除series之外的其他配置
-    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BAR);
-    // x轴key值
-    const xAxisKey = xkey(iChartOption);
-    // x轴数据
-    const xAxisData = xdata(iChartOption.data, xAxisKey);
-    // 图例数据
-    const legendData = ldata(iChartOption.data, xAxisKey);
-    // 连线的数据
-    const seriesData = ydata(iChartOption.data, legendData);
-    // 赋值数据
-    this.baseOption.legend.data = iChartOption.legend.data || legendData;
-    this.baseOption.xAxis.forEach(item => {
-      item.data = xAxisData;
-    });
-    this.baseOption.series = setSeries(seriesData, legendData, iChartOption);
-    // 给堆叠图的柱子中间加上空白缝隙，并覆盖图例的点击事件
-    setStack(this.baseOption, iChartOption, legendData, seriesData);
-    // 针对数据均为正数的双向柱状图进行一些特殊处理
-    setDoubleSides(this.baseOption, iChartOption);
-    // 针对瀑布图表需求，图表需要进行特殊处理
-    setWaterFall(this.baseOption, iChartOption);
-    // 针对区间图表需求，图表需要进行特殊处理
-    setRange(this.baseOption, iChartOption);
-    // 针对阈值线变色，图表需要进行特殊处理
-    setMarkLine(this.baseOption, iChartOption);
-    // 设置柱状图的方向
-    setDirection(this.baseOption, iChartOption.direction);
-    // 对 tooltip.formatter 进行二次封装
-    setLimitFormatter(this.baseOption, iChartOption, seriesData);
-    // 是否关闭hover态的效果，默认为false
-    if (iChartOption.silent) {
-      this.baseOption.tooltip = {};
-    }
-    // 合并用户自定义series
-    mergeSeries(iChartOption, this.baseOption);
-    // 合并用户自定义visualMap
-    mergeVisualMap(iChartOption, this.baseOption);
-    // 处理特性
-    mini(iChartOption, this.baseOption);
-  }
-
-  // 根据渲染出的结果，二次计算option
-  updateOptionAgain() {
-    let baseOption = this.baseOption;
-    const iChartOption = this.iChartOption;
-    const lineDataName = iChartOption.lineDataName;
-    // 折柱混合
-    if (lineDataName && lineDataName.length > 0) {
-      const lineChartBaseOpt = new LineChart(iChartOption, {}, this.chartInstance);
-      const lineBaseOption = lineChartBaseOpt.getOption();
-      const lineSeries = lineBaseOption.series;
-      const barSeries = baseOption.series;
-      lineDataName.forEach(lineName => {
-        let bar = null;
-        let line = null;
-        for (let i = 0; i < lineSeries.length; i++) {
-          if (lineSeries[i].name === lineName) {
-            line = lineSeries[i];
-            break;
-          }
-        }
-        for (let i = 0; i < barSeries.length; i++) {
-          if (barSeries[i].name === lineName) {
-            bar = barSeries[i];
-            break;
-          }
-        }
-        for (const key in line) {
-          if (Object.hasOwnProperty.call(line, key)) {
-            bar[key] = line[key];
-          }
-        }
-      });
-    }
-    // 如果存在 dataZoom，提前返回
-    if (this.baseOption.dataZoom[0].show === true) {
-      return;
-    };
-    // 如果用户自定义了 barWidth，提前返回
-    if (this.iChartOption.itemStyle?.barWidth) {
-      return;
-    }
-    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
-      updateWidth(baseOption, this.chartInstance, this.iChartOption);
-    }
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption() { }
-
-  // 自适应柱条宽度
-  resize(callback) {
-    // 如果存在 dataZoom，提前返回
-    if (this.baseOption.dataZoom[0].show === true) {
-      return;
-    };
-    // 如果用户自定义了 barWidth，提前返回
-    if (this.iChartOption.itemStyle?.barWidth) {
-      return;
-    }
-    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
-      updateWidth(this.baseOption, this.chartInstance, this.iChartOption);
-      callback && callback(this.baseOption);
-    }
-  }
-}
-
-export default BarChart;
+/**
+ * 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 LineChart from '../LineChart';
+import mini from '../../feature/mini/miniBarChart';
+import init from '../../option/init';
+import cloneDeep from '../../util/cloneDeep';
+import BaseOption from '../../option/base';
+import updateWidth from './barChartOption';
+import { mergeVisualMap, mergeSeries } from '../../util/merge';
+import { setStack, setDirection, setDoubleSides } from './handleOptipn';
+import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
+import { setSeries, setRange, setMarkLine, setWaterFall, setLimitFormatter } from './handleSeries';
+import { CHART_TYPE, ADAPTIVE_THEME } from '../../util/constants';
+
+class BarChart {
+
+  static name = CHART_TYPE.BAR
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.baseOption = cloneDeep(BaseOption);
+    this.chartInstance = chartInstance;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    RectCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.BAR);
+    // x轴key值
+    const xAxisKey = xkey(iChartOption);
+    // x轴数据
+    const xAxisData = xdata(iChartOption.data, xAxisKey);
+    // 图例数据
+    const legendData = ldata(iChartOption.data, xAxisKey);
+    // 连线的数据
+    const seriesData = ydata(iChartOption.data, legendData);
+    // 赋值数据
+    this.baseOption.legend.data = iChartOption.legend.data || legendData;
+    this.baseOption.xAxis.forEach(item => {
+      item.data = xAxisData;
+    });
+    this.baseOption.series = setSeries(seriesData, legendData, iChartOption);
+    // 给堆叠图的柱子中间加上空白缝隙，并覆盖图例的点击事件
+    setStack(this.baseOption, iChartOption, legendData, seriesData);
+    // 针对数据均为正数的双向柱状图进行一些特殊处理
+    setDoubleSides(this.baseOption, iChartOption);
+    // 针对瀑布图表需求，图表需要进行特殊处理
+    setWaterFall(this.baseOption, iChartOption);
+    // 针对区间图表需求，图表需要进行特殊处理
+    setRange(this.baseOption, iChartOption);
+    // 针对阈值线变色，图表需要进行特殊处理
+    setMarkLine(this.baseOption, iChartOption);
+    // 设置柱状图的方向
+    setDirection(this.baseOption, iChartOption.direction);
+    // 对 tooltip.formatter 进行二次封装
+    setLimitFormatter(this.baseOption, iChartOption, seriesData);
+    // 是否关闭hover态的效果，默认为false
+    if (iChartOption.silent) {
+      this.baseOption.tooltip = {};
+    }
+    // 合并用户自定义series
+    mergeSeries(iChartOption, this.baseOption);
+    // 合并用户自定义visualMap
+    mergeVisualMap(iChartOption, this.baseOption);
+    // 处理特性
+    mini(iChartOption, this.baseOption);
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain() {
+    let baseOption = this.baseOption;
+    const iChartOption = this.iChartOption;
+    const lineDataName = iChartOption.lineDataName;
+    // 折柱混合
+    if (lineDataName && lineDataName.length > 0) {
+      const lineChartBaseOpt = new LineChart(iChartOption, {}, this.chartInstance);
+      const lineBaseOption = lineChartBaseOpt.getOption();
+      const lineSeries = lineBaseOption.series;
+      const barSeries = baseOption.series;
+      lineDataName.forEach(lineName => {
+        let bar = null;
+        let line = null;
+        for (let i = 0; i < lineSeries.length; i++) {
+          if (lineSeries[i].name === lineName) {
+            line = lineSeries[i];
+            break;
+          }
+        }
+        for (let i = 0; i < barSeries.length; i++) {
+          if (barSeries[i].name === lineName) {
+            bar = barSeries[i];
+            break;
+          }
+        }
+        for (const key in line) {
+          if (Object.hasOwnProperty.call(line, key)) {
+            bar[key] = line[key];
+          }
+        }
+      });
+    }
+    // 如果存在 dataZoom，提前返回
+    if (this.baseOption.dataZoom[0].show === true) {
+      return;
+    };
+    // 如果用户自定义了 barWidth，提前返回
+    if (this.iChartOption.itemStyle?.barWidth) {
+      return;
+    }
+    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
+      updateWidth(baseOption, this.chartInstance, this.iChartOption);
+    }
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+
+  // 自适应柱条宽度
+  resize(callback) {
+    // 如果存在 dataZoom，提前返回
+    if (this.baseOption.dataZoom[0].show === true) {
+      return;
+    };
+    // 如果用户自定义了 barWidth，提前返回
+    if (this.iChartOption.itemStyle?.barWidth) {
+      return;
+    }
+    if (ADAPTIVE_THEME.includes(this.iChartOption.theme)) {
+      updateWidth(this.baseOption, this.chartInstance, this.iChartOption);
+      callback && callback(this.baseOption);
+    }
+  }
+}
+
+export default BarChart;

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

@@ -1,122 +1,122 @@
-/**
- * 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 { insertStateDom, removeStateDom } from '../../util/init/insert';
-
-export default class BaseChart {
-    // 图表渲染容器
-    dom;
-    // 图表渲染配置
-    option
-
-    constructor() {
-        // 必须实现 init 方法，初始化图表渲染容器
-        if (this.init === undefined) {
-            throw new Error('This chart has not overwrite "init" callback!');
-        }
-        // 必须实现 setSimpleOption 方法，初始化图表渲染配置
-        if (this.setSimpleOption === undefined) {
-            throw new Error('This chart has not overwrite "setSimpleOption" callback!');
-        }
-        // 必须实现 render 方法，调用时开始渲染图表
-        if (this.render === undefined) {
-            throw new Error('This chart has not overwrite "render" callback!');
-        }
-        // 必须实现 onRenderReady 方法
-        if (this.onRenderReady === undefined) {
-            throw new Error('This chart has not overwrite "onRenderReady" callback!');
-        }
-        // 必须实现 refresh 方法，传入新的option，刷新图表
-        if (this.refresh === undefined) {
-            throw new Error('This chart has not overwrite "refresh" callback!');
-        }
-        // 必须实现 refreshData 方法，传入新的data，刷新图表
-        if (this.refreshData === undefined) {
-            throw new Error('This chart has not overwrite "refreshData" callback!');
-        }
-        // 必须实现 setResize 方法，该方法一般手动调用，实现图表自适应宽度
-        if (this.setResize === undefined) {
-            throw new Error('This chart has not overwrite "setResize" callback!');
-        }
-        // 必须实现 uninstall 方法，清空图表容器，卸载所有监听事件
-        if (this.uninstall === undefined) {
-            throw new Error('This chart has not overwrite "uninstall" callback!');
-        }
-    }
-
-    // 加载状态
-    showLoading(option) {
-        insertStateDom(this.dom, 'loading', option);
-    }
-
-    hideLoading() {
-        removeStateDom(this.dom, 'loading');
-    }
-
-    closeLoading() {
-        removeStateDom(this.dom, 'loading');
-    }
-
-    // 错误状态
-    showError(option) {
-        insertStateDom(this.dom, 'error', option);
-    }
-
-    closeError() {
-        removeStateDom(this.dom, 'error');
-    }
-
-    // 空数据状态
-    showEmpty(option) {
-        insertStateDom(this.dom, 'empty', option);
-    }
-
-    closeEmpty() {
-        removeStateDom(this.dom, 'empty');
-    }
-
-    // 阶段空数据状态
-    showStageEmpty(option) {
-        insertStateDom(this.dom, 'stage_empty', option);
-    }
-
-    closeStageEmpty() {
-        removeStateDom(this.dom, 'stage_empty');
-    }
-
-    // 自定义数据状态
-    showState(option) {
-        insertStateDom(this.dom, 'custom', option);
-    }
-
-    closeState() {
-        removeStateDom(this.dom, 'custom');
-    }
-
-    // 传入自定义DOM
-    showCustomDom(callback) {
-        if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return;
-        if (getComputedStyle(this.dom).position === ('static' || '')) {
-            this.dom.style.position = 'relative';
-        }
-        let customContainer = document.createElement('div');
-        customContainer.className = 'huicharts-custom-dom';
-        customContainer.setAttribute('style', 'position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center');
-        this.dom.appendChild(customContainer);
-        callback(customContainer);
-    }
-
-    // 删除自定义DOM
-    closeCustomDom() {
-        let customContainer = this.dom.getElementsByClassName('huicharts-custom-dom');
-        this.dom.removeChild(customContainer[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 { insertStateDom, removeStateDom } from '../../util/init/insert';
+
+export default class BaseChart {
+    // 图表渲染容器
+    dom;
+    // 图表渲染配置
+    option
+
+    constructor() {
+        // 必须实现 init 方法，初始化图表渲染容器
+        if (this.init === undefined) {
+            throw new Error('This chart has not overwrite "init" callback!');
+        }
+        // 必须实现 setSimpleOption 方法，初始化图表渲染配置
+        if (this.setSimpleOption === undefined) {
+            throw new Error('This chart has not overwrite "setSimpleOption" callback!');
+        }
+        // 必须实现 render 方法，调用时开始渲染图表
+        if (this.render === undefined) {
+            throw new Error('This chart has not overwrite "render" callback!');
+        }
+        // 必须实现 onRenderReady 方法
+        if (this.onRenderReady === undefined) {
+            throw new Error('This chart has not overwrite "onRenderReady" callback!');
+        }
+        // 必须实现 refresh 方法，传入新的option，刷新图表
+        if (this.refresh === undefined) {
+            throw new Error('This chart has not overwrite "refresh" callback!');
+        }
+        // 必须实现 refreshData 方法，传入新的data，刷新图表
+        if (this.refreshData === undefined) {
+            throw new Error('This chart has not overwrite "refreshData" callback!');
+        }
+        // 必须实现 setResize 方法，该方法一般手动调用，实现图表自适应宽度
+        if (this.setResize === undefined) {
+            throw new Error('This chart has not overwrite "setResize" callback!');
+        }
+        // 必须实现 uninstall 方法，清空图表容器，卸载所有监听事件
+        if (this.uninstall === undefined) {
+            throw new Error('This chart has not overwrite "uninstall" callback!');
+        }
+    }
+
+    // 加载状态
+    showLoading(option) {
+        insertStateDom(this.dom, 'loading', option);
+    }
+
+    hideLoading() {
+        removeStateDom(this.dom, 'loading');
+    }
+
+    closeLoading() {
+        removeStateDom(this.dom, 'loading');
+    }
+
+    // 错误状态
+    showError(option) {
+        insertStateDom(this.dom, 'error', option);
+    }
+
+    closeError() {
+        removeStateDom(this.dom, 'error');
+    }
+
+    // 空数据状态
+    showEmpty(option) {
+        insertStateDom(this.dom, 'empty', option);
+    }
+
+    closeEmpty() {
+        removeStateDom(this.dom, 'empty');
+    }
+
+    // 阶段空数据状态
+    showStageEmpty(option) {
+        insertStateDom(this.dom, 'stage_empty', option);
+    }
+
+    closeStageEmpty() {
+        removeStateDom(this.dom, 'stage_empty');
+    }
+
+    // 自定义数据状态
+    showState(option) {
+        insertStateDom(this.dom, 'custom', option);
+    }
+
+    closeState() {
+        removeStateDom(this.dom, 'custom');
+    }
+
+    // 传入自定义DOM
+    showCustomDom(callback) {
+        if (this.dom.getElementsByClassName('huicharts-custom-dom').length > 0) return;
+        if (getComputedStyle(this.dom).position === ('static' || '')) {
+            this.dom.style.position = 'relative';
+        }
+        let customContainer = document.createElement('div');
+        customContainer.className = 'huicharts-custom-dom';
+        customContainer.setAttribute('style', 'position:absolute;width:100%;height:100%;top:0px;left:0px;display:flex;justify-content:center;align-items:center');
+        this.dom.appendChild(customContainer);
+        callback(customContainer);
+    }
+
+    // 删除自定义DOM
+    closeCustomDom() {
+        let customContainer = this.dom.getElementsByClassName('huicharts-custom-dom');
+        this.dom.removeChild(customContainer[0]);
+    }
+}