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

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

@@ -1,143 +1,143 @@
-/**
- * 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 { codeToRGB } from '../../util/color';
-import merge from '../../util/merge';
-import chartToken from './chartToken';
-import { isArray } from '../../util/type';
-import Token from '../../feature/token';
-
-// 设置背景色颜色
-function handleSetColor(data,opacity) {
-    const { colorState } = Token.config
-    const stateColorGroup = {
-        info: colorState.colorInfo,
-        error: colorState.colorError,
-        warning: colorState.colorAlert,
-        subwarning: colorState.colorWarning,
-        success: colorState.colorSuccess,
-    };
-    
-    let backgroundColor;
-    if(data.color) {
-        backgroundColor = data.color
-    } else {
-        backgroundColor = stateColorGroup[data.name] ?  codeToRGB(stateColorGroup[data.name],opacity) : ''
-    }
-    return backgroundColor;
-}
-
-function handleLabel(barData,iChartOpt,baseOpt) {
-    const label = iChartOpt.label;
-    const { colorBoard } = Token.config;
-    const orange = colorBoard.orange.colorOrange40;
-    const green = colorBoard.green.colorGreen40;
-    let labelOption = label;
-    if (labelOption && labelOption.show) {
-        let showLabelArr = [];
-        barData.forEach((item,index) => {
-            let markLineNum = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data[index] : iChartOpt.markLine.data;
-            let showLabel = Math.round((item - markLineNum) / markLineNum * 100);
-            showLabelArr.push(showLabel);
-        })
-        // 柱子显示文本固定显示在最上方
-        let categoryX = {
-            type: 'category',
-            position: 'top',
-            data: showLabelArr,
-            axisLabel: {
-                show:true,
-                fontSize: chartToken.fontSize,
-                formatter: (value)=>{
-                    return value + '%'
-                },
-                color: (value)=>{
-                    return value >= 0 ? green : orange;
-                }
-            },
-            axisLine: {
-                show:false
-            },
-            axisTick: {
-                show:false
-            },
-        }
-        baseOpt.xAxis.push(categoryX);
-    }
-}
-
-export function handleSeries(baseOpt, iChartOpt, legendData ,seriesData) {
-    const series = [];
-    const barWidth = iChartOpt.itemStyle?.barWidth ? iChartOpt.itemStyle.barWidth : chartToken.barWidth;
-    const backgroundWidth = iChartOpt.itemStyle?.backgroundWidth ? iChartOpt.itemStyle.backgroundWidth : chartToken.barBgWidth;
-    const barData = seriesData[legendData[0]];
-    const radius = chartToken.borderRadius;
-    let borderRadius = [radius, radius, 0, 0];
-    if(iChartOpt.direction === 'horizontal') {
-        borderRadius = [0, radius, radius, 0];
-    }
-
-    const barObj = {
-        name: legendData[0],
-        type: 'bar',
-        barWidth: barWidth,
-        z: 10,
-        data: barData,
-        symbol: 'rect',
-        symbolRepeat: false,
-        itemStyle: {
-            borderRadius: borderRadius
-        }
-    }
-    // 设置图例
-    handleLabel(barData,iChartOpt,baseOpt);
-    const markLineData = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data : iChartOpt.data.map(() => { return iChartOpt.markLine.data });
-    // 设置阈值
-    const scatterObj = {
-        type: 'scatter',
-        symbol: 'rect',
-        silent: true,
-        symbolSize: iChartOpt.markLine.symbolSize ? iChartOpt.markLine.symbolSize : [32, 2],
-        symbolOffset: iChartOpt.markLine.symbolOffset ? iChartOpt.markLine.symbolOffset : [0, 0],
-        z: 20,
-        data: markLineData,
-        color: iChartOpt.markLine.color ? iChartOpt.markLine.color : handleSetColor(iChartOpt.markLine,1),
-        emphasis: {
-            scale: false
-        }
-    }
-    // 设置柱子背景
-    if(iChartOpt.background) {
-        iChartOpt.background.forEach(item => {
-            const rectData = isArray(item.data) ? item.data : iChartOpt.data.map(() => { return item.data });
-            let totalData = {
-                type: 'bar',
-                barWidth: backgroundWidth,
-                stack: 'total',
-                data: rectData,
-                color: iChartOpt.theme.indexOf('dark')!== -1 ? handleSetColor(item,0.3) : handleSetColor(item,0.15),
-                barGap: 0
-            }
-            if(iChartOpt.direction === 'horizontal') {
-                totalData.yAxisIndex = 1;
-            } else {
-                totalData.xAxisIndex = 1;
-            }
-            series.push(totalData);
-        });
-        let xaxisData = Object.assign({},baseOpt.xAxis[0]);
-        xaxisData.show = false;
-        baseOpt.xAxis.push(xaxisData);
-    }
-    series.unshift(scatterObj);
-    series.unshift(barObj);
-    baseOpt.series = series;
+/**
+ * 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 { codeToRGB } from '../../util/color';
+import merge from '../../util/merge';
+import chartToken from './chartToken';
+import { isArray } from '../../util/type';
+import Token from '../../feature/token';
+
+// 设置背景色颜色
+function handleSetColor(data,opacity) {
+    const { colorState } = Token.config
+    const stateColorGroup = {
+        info: colorState.colorInfo,
+        error: colorState.colorError,
+        warning: colorState.colorAlert,
+        subwarning: colorState.colorWarning,
+        success: colorState.colorSuccess,
+    };
+    
+    let backgroundColor;
+    if(data.color) {
+        backgroundColor = data.color
+    } else {
+        backgroundColor = stateColorGroup[data.name] ?  codeToRGB(stateColorGroup[data.name],opacity) : ''
+    }
+    return backgroundColor;
+}
+
+function handleLabel(barData,iChartOpt,baseOpt) {
+    const label = iChartOpt.label;
+    const { colorBoard } = Token.config;
+    const orange = colorBoard.orange.colorOrange40;
+    const green = colorBoard.green.colorGreen40;
+    let labelOption = label;
+    if (labelOption && labelOption.show) {
+        let showLabelArr = [];
+        barData.forEach((item,index) => {
+            let markLineNum = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data[index] : iChartOpt.markLine.data;
+            let showLabel = Math.round((item - markLineNum) / markLineNum * 100);
+            showLabelArr.push(showLabel);
+        })
+        // 柱子显示文本固定显示在最上方
+        let categoryX = {
+            type: 'category',
+            position: 'top',
+            data: showLabelArr,
+            axisLabel: {
+                show:true,
+                fontSize: chartToken.fontSize,
+                formatter: (value)=>{
+                    return value + '%'
+                },
+                color: (value)=>{
+                    return value >= 0 ? green : orange;
+                }
+            },
+            axisLine: {
+                show:false
+            },
+            axisTick: {
+                show:false
+            },
+        }
+        baseOpt.xAxis.push(categoryX);
+    }
+}
+
+export function handleSeries(baseOpt, iChartOpt, legendData ,seriesData) {
+    const series = [];
+    const barWidth = iChartOpt.itemStyle?.barWidth ? iChartOpt.itemStyle.barWidth : chartToken.barWidth;
+    const backgroundWidth = iChartOpt.itemStyle?.backgroundWidth ? iChartOpt.itemStyle.backgroundWidth : chartToken.barBgWidth;
+    const barData = seriesData[legendData[0]];
+    const radius = chartToken.borderRadius;
+    let borderRadius = [radius, radius, 0, 0];
+    if(iChartOpt.direction === 'horizontal') {
+        borderRadius = [0, radius, radius, 0];
+    }
+
+    const barObj = {
+        name: legendData[0],
+        type: 'bar',
+        barWidth: barWidth,
+        z: 10,
+        data: barData,
+        symbol: 'rect',
+        symbolRepeat: false,
+        itemStyle: {
+            borderRadius: borderRadius
+        }
+    }
+    // 设置图例
+    handleLabel(barData,iChartOpt,baseOpt);
+    const markLineData = isArray(iChartOpt.markLine.data) ? iChartOpt.markLine.data : iChartOpt.data.map(() => { return iChartOpt.markLine.data });
+    // 设置阈值
+    const scatterObj = {
+        type: 'scatter',
+        symbol: 'rect',
+        silent: true,
+        symbolSize: iChartOpt.markLine.symbolSize ? iChartOpt.markLine.symbolSize : [32, 2],
+        symbolOffset: iChartOpt.markLine.symbolOffset ? iChartOpt.markLine.symbolOffset : [0, 0],
+        z: 20,
+        data: markLineData,
+        color: iChartOpt.markLine.color ? iChartOpt.markLine.color : handleSetColor(iChartOpt.markLine,1),
+        emphasis: {
+            scale: false
+        }
+    }
+    // 设置柱子背景
+    if(iChartOpt.background) {
+        iChartOpt.background.forEach(item => {
+            const rectData = isArray(item.data) ? item.data : iChartOpt.data.map(() => { return item.data });
+            let totalData = {
+                type: 'bar',
+                barWidth: backgroundWidth,
+                stack: 'total',
+                data: rectData,
+                color: iChartOpt.theme.indexOf('dark')!== -1 ? handleSetColor(item,0.3) : handleSetColor(item,0.15),
+                barGap: 0
+            }
+            if(iChartOpt.direction === 'horizontal') {
+                totalData.yAxisIndex = 1;
+            } else {
+                totalData.xAxisIndex = 1;
+            }
+            series.push(totalData);
+        });
+        let xaxisData = Object.assign({},baseOpt.xAxis[0]);
+        xaxisData.show = false;
+        baseOpt.xAxis.push(xaxisData);
+    }
+    series.unshift(scatterObj);
+    series.unshift(barObj);
+    baseOpt.series = series;
 }

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

@@ -1,93 +1,93 @@
-/**
- * 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 { handleSeries } from './handleSeries';
-import init from '../../option/init';
-import updateWidth from './bulletChartOption';
-import { handleTooltip, setDirection } from './handleOptipn';
-import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
-import { CHART_TYPE, ADAPTIVE_THEME } from '../../util/constants';
-
-class BulletChart {
-
-  static name = CHART_TYPE.BULLET
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    this.iChartOption = init(iChartOption);
-    this.chartInstance = chartInstance;
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption();
-  }
-
-  updateOption() {
-    const iChartOption = this.iChartOption;
-    // 图例数据
-    RectCoordSys(this.baseOption, iChartOption, CHART_TYPE.BULLET);
-    // x轴key值
-    const xAxisKey = xkey(iChartOption);
-    // x轴数据
-    const xAxisData = xdata(iChartOption.data, xAxisKey);
-    this.baseOption.xAxis.forEach(item => {
-      item.data = xAxisData;
-    });
-    // 图例数据
-    const legendData = ldata(iChartOption.data, xAxisKey);
-    // 连线的数据
-    const seriesData = ydata(iChartOption.data, legendData);
-    //  图表鼠标悬浮提示框
-    handleTooltip(this.baseOption, iChartOption);
-    // 图表的series
-    handleSeries(this.baseOption, iChartOption, legendData, seriesData);
-    // 设置柱状图的方向
-    setDirection(this.baseOption, iChartOption.direction);
-  }
-
-  // 根据渲染出的结果，二次计算option
-  updateOptionAgain() {
-    let baseOption = this.baseOption;
-    // 如果存在 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 BulletChart;
+/**
+ * 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 { handleSeries } from './handleSeries';
+import init from '../../option/init';
+import updateWidth from './bulletChartOption';
+import { handleTooltip, setDirection } from './handleOptipn';
+import RectCoordSys, { xkey, xdata, ldata, ydata } from '../../option/RectSys';
+import { CHART_TYPE, ADAPTIVE_THEME } from '../../util/constants';
+
+class BulletChart {
+
+  static name = CHART_TYPE.BULLET
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    // 图例数据
+    RectCoordSys(this.baseOption, iChartOption, CHART_TYPE.BULLET);
+    // x轴key值
+    const xAxisKey = xkey(iChartOption);
+    // x轴数据
+    const xAxisData = xdata(iChartOption.data, xAxisKey);
+    this.baseOption.xAxis.forEach(item => {
+      item.data = xAxisData;
+    });
+    // 图例数据
+    const legendData = ldata(iChartOption.data, xAxisKey);
+    // 连线的数据
+    const seriesData = ydata(iChartOption.data, legendData);
+    //  图表鼠标悬浮提示框
+    handleTooltip(this.baseOption, iChartOption);
+    // 图表的series
+    handleSeries(this.baseOption, iChartOption, legendData, seriesData);
+    // 设置柱状图的方向
+    setDirection(this.baseOption, iChartOption.direction);
+  }
+
+  // 根据渲染出的结果，二次计算option
+  updateOptionAgain() {
+    let baseOption = this.baseOption;
+    // 如果存在 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 BulletChart;

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

@@ -1,44 +1,44 @@
-/**
- * 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.
- *
- */
-// 显示volume需要的grid
-const VOLUMEGRID = [
-  {
-    left: '5%',
-    right: '5%',
-    height: '50%',
-    top: '2%',
-    containLabel: false,
-  },
-  {
-    left: '5%',
-    right: '5%',
-    top: '63%',
-    height: '25%',
-    containLabel: false,
-  },
-];
-
-const BASICSERIES = [
-  {
-    name: '日K',
-    type: 'candlestick',
-    data: undefined,
-    itemStyle: {
-      color: undefined,
-      color0: undefined,
-      borderColor: undefined,
-      borderColor0: undefined,
-    },
-  },
-];
-
-export { BASICSERIES, VOLUMEGRID };
+/**
+ * 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.
+ *
+ */
+// 显示volume需要的grid
+const VOLUMEGRID = [
+  {
+    left: '5%',
+    right: '5%',
+    height: '50%',
+    top: '2%',
+    containLabel: false,
+  },
+  {
+    left: '5%',
+    right: '5%',
+    top: '63%',
+    height: '25%',
+    containLabel: false,
+  },
+];
+
+const BASICSERIES = [
+  {
+    name: '日K',
+    type: 'candlestick',
+    data: undefined,
+    itemStyle: {
+      color: undefined,
+      color0: undefined,
+      borderColor: undefined,
+      borderColor0: undefined,
+    },
+  },
+];
+
+export { BASICSERIES, VOLUMEGRID };

package/src/components/charts/components/CandlestickChart/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.CANDLESTICK)
-
-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.CANDLESTICK)
+
+export default chartToken;