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

package/src/components/charts/components/JadeJueChart/labelFormatter.js

@@ -1,131 +1,131 @@
-/**
- * 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 { CHARTTYPE } from './BaseOption';
-
-// 处理第一种数据且无标定值的sum和max
-const setNoChildDefaultMax = (data) => {
-    let sum = 0;
-    data.forEach(item => {
-        sum += (item.value ?? 0);
-    });
-    return sum;
-};
-
-// 处理第二种数据且无标定值的sum和max
-const setChildDefaultMax = (data) => {
-    let sum = 0;
-    data.forEach(item => {
-        if (item.children && item.children.length) {
-            item.children.forEach(({ value }) => {
-                sum += (value ?? 0);
-            });
-        }
-    });
-    return sum;
-};
-
-// 配置玉闋图外围坐标系百分比展示文本
-const setAxisLabel = (sum, iChartOption, baseOpt) => {
-    if (iChartOption.max) {
-        baseOpt.angleAxis.sum = iChartOption.max;
-        const formatter = params => {
-            if (params === iChartOption.max) {
-                return '100%';
-            }
-            if ((params / iChartOption.max) * 100 > 100) {
-                return '';
-            }
-            const x = Math.ceil((params / iChartOption.max) * 100);
-            return `${Math.ceil(x / 10) * 10}%`;
-        };
-        return formatter;
-    } else {
-        const formatter = params => {
-            if (params === sum) {
-                return '100%';
-            }
-            if ((params / sum) * 100 > 100) {
-                return '';
-            }
-            const x = Math.ceil((params / sum) * 100);
-            return `${Math.ceil(x / 10) * 10}%`;
-        };
-        return formatter;
-    }
-};
-
-/**
- * 此函数两部分作用：（1）根据data和max,将数据分为四种数据类型，分类处理angleAxis的sum和max值
- * （2）根据用户传入的formatter，配置极坐标系文本
- * @param {*} iChartOption
- * @param {*} baseOpt
- */
-const handleLabelFormatter = (iChartOption, baseOpt, chartType) => {
-    let { max, data, fill = false } = iChartOption;
-    const { angleAxis } = baseOpt;
-    if (chartType === CHARTTYPE.PROCESS) {
-        fill = true;
-    }
-    // 有标定值
-    if (max) {
-        angleAxis.sum = max;
-    }
-    // 无标定值
-    else {
-        let sum;
-        if (chartType === CHARTTYPE.PROCESS) {
-            sum = 100;
-        } else if (chartType === CHARTTYPE.BASE) {
-            // 第一种数据类型
-            sum = setNoChildDefaultMax(data);
-        } else {
-            // 第二种数据类型
-            sum = setChildDefaultMax(data);
-        }
-        // 当数据全为0时，手动设置sum和max使其不为0，避免视图丢失
-        if (sum === 0) {
-            sum = 1;
-        }
-        angleAxis.sum = sum;
-    }
-    angleAxis.max = angleAxis.sum * 4 / 3;
-    if (fill) {
-        angleAxis.max = angleAxis.sum;
-    }
-
-    /**
-     * 处理显示文本:根据用户传入的formatter，配置极坐标系文本
-     * 传入"percent"或者未传，展示百分比
-     * 传入"number",展示纯数值
-     * 传入函数，用户自定义展示内容
-     */
-    let formatter = angleAxis.axisLabel.formatter;
-    switch (formatter) {
-        case 'percent':
-            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
-            break;
-        case 'number':
-            formatter = undefined;
-            break;
-        case undefined:
-            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
-            break;
-    }
-    if (chartType === CHARTTYPE.PROCESS) {
-        angleAxis.axisLabel.show = false;
-        angleAxis.axisTick.show = false;
-        return;
-    }
-    angleAxis.axisLabel.formatter = formatter;
-};
-
+/**
+ * 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 { CHARTTYPE } from './BaseOption';
+
+// 处理第一种数据且无标定值的sum和max
+const setNoChildDefaultMax = (data) => {
+    let sum = 0;
+    data.forEach(item => {
+        sum += (item.value ?? 0);
+    });
+    return sum;
+};
+
+// 处理第二种数据且无标定值的sum和max
+const setChildDefaultMax = (data) => {
+    let sum = 0;
+    data.forEach(item => {
+        if (item.children && item.children.length) {
+            item.children.forEach(({ value }) => {
+                sum += (value ?? 0);
+            });
+        }
+    });
+    return sum;
+};
+
+// 配置玉闋图外围坐标系百分比展示文本
+const setAxisLabel = (sum, iChartOption, baseOpt) => {
+    if (iChartOption.max) {
+        baseOpt.angleAxis.sum = iChartOption.max;
+        const formatter = params => {
+            if (params === iChartOption.max) {
+                return '100%';
+            }
+            if ((params / iChartOption.max) * 100 > 100) {
+                return '';
+            }
+            const x = Math.ceil((params / iChartOption.max) * 100);
+            return `${Math.ceil(x / 10) * 10}%`;
+        };
+        return formatter;
+    } else {
+        const formatter = params => {
+            if (params === sum) {
+                return '100%';
+            }
+            if ((params / sum) * 100 > 100) {
+                return '';
+            }
+            const x = Math.ceil((params / sum) * 100);
+            return `${Math.ceil(x / 10) * 10}%`;
+        };
+        return formatter;
+    }
+};
+
+/**
+ * 此函数两部分作用：（1）根据data和max,将数据分为四种数据类型，分类处理angleAxis的sum和max值
+ * （2）根据用户传入的formatter，配置极坐标系文本
+ * @param {*} iChartOption
+ * @param {*} baseOpt
+ */
+const handleLabelFormatter = (iChartOption, baseOpt, chartType) => {
+    let { max, data, fill = false } = iChartOption;
+    const { angleAxis } = baseOpt;
+    if (chartType === CHARTTYPE.PROCESS) {
+        fill = true;
+    }
+    // 有标定值
+    if (max) {
+        angleAxis.sum = max;
+    }
+    // 无标定值
+    else {
+        let sum;
+        if (chartType === CHARTTYPE.PROCESS) {
+            sum = 100;
+        } else if (chartType === CHARTTYPE.BASE) {
+            // 第一种数据类型
+            sum = setNoChildDefaultMax(data);
+        } else {
+            // 第二种数据类型
+            sum = setChildDefaultMax(data);
+        }
+        // 当数据全为0时，手动设置sum和max使其不为0，避免视图丢失
+        if (sum === 0) {
+            sum = 1;
+        }
+        angleAxis.sum = sum;
+    }
+    angleAxis.max = angleAxis.sum * 4 / 3;
+    if (fill) {
+        angleAxis.max = angleAxis.sum;
+    }
+
+    /**
+     * 处理显示文本:根据用户传入的formatter，配置极坐标系文本
+     * 传入"percent"或者未传，展示百分比
+     * 传入"number",展示纯数值
+     * 传入函数，用户自定义展示内容
+     */
+    let formatter = angleAxis.axisLabel.formatter;
+    switch (formatter) {
+        case 'percent':
+            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
+            break;
+        case 'number':
+            formatter = undefined;
+            break;
+        case undefined:
+            formatter = setAxisLabel(angleAxis.sum, iChartOption, baseOpt);
+            break;
+    }
+    if (chartType === CHARTTYPE.PROCESS) {
+        angleAxis.axisLabel.show = false;
+        angleAxis.axisTick.show = false;
+        return;
+    }
+    angleAxis.axisLabel.formatter = formatter;
+};
+
 export { handleLabelFormatter };

package/src/components/charts/components/LineChart/AreaChart/bottomArea.js

@@ -1,177 +1,177 @@
-/**
- * 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 { isNumber, isObject } from '../../../util/type';
-import { getColor, codeToRGB } from '../../../util/color';
-import chartToken from './chartToken';
-import Token from '../../../feature/token';
-
-// 创建一个渐变色-同名的Series，用来显示分割渐变区域
-function gradientBottomArea(item, percent, colorTo, colorFrom) {
-  const newSeries = {
-    type: item.type,
-    name: item.name,
-    data: item.data,
-    smooth: item.smooth,
-    step: item.step,
-    lineStyle: {
-      width: 0,
-    },
-    symbol: 'none',
-    areaStyle: {
-      origin: 'end',
-      color: {
-        type: 'linear',
-        x2: 0,
-        y2: 1,
-        x: 0,
-        y: 0,
-        colorStops: [
-          {
-            offset: 0,
-            color: chartToken.colorAreaTP,
-          },
-          {
-            offset: 1 - percent - 0.00001,
-            color: chartToken.colorAreaTP,
-          },
-          {
-            offset: 1 - percent,
-            color: colorTo,
-          },
-          {
-            offset: 1,
-            color: colorFrom,
-          },
-        ],
-      },
-    },
-  };
-  return newSeries;
-}
-
-/**
- * 为series添加split分割区域的底部areaStyle,
- */
-function splitArea(baseOption, iChartOption, YAxiMax) {
-  if (iChartOption.area && iChartOption.splitLine) {
-    const temp = [];
-    const colors = baseOption.color;
-    baseOption.series.forEach((item, index) => {
-      // data中的阈值项data转换为object，此时找最小值需要转换回来
-      const seriesData = getDataWidthNoObject(item.data)
-      const minValue = min(seriesData);
-      const percent = (iChartOption.splitLine - minValue) / (YAxiMax - minValue);
-      const color = getColor(colors, index);
-      const colorTo = codeToRGB(color, 0.15);
-      const colorFrom = codeToRGB(color, 0.15);
-      // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
-      const newSeries = gradientBottomArea(item, percent, colorTo, colorFrom);
-      temp.push(newSeries);
-    });
-    baseOption.series = baseOption.series.concat(temp);
-  }
-}
-
-// 判断是否需要过滤series
-function judgeFilterAreaSeries(iChartOption) {
-  const { area, splitLine, markLine } = iChartOption
-  return area && (splitLine || (markLine && markLine?.bottom && isNumber(markLine?.bottom)))
-}
-
-// 创建一个纯色-同名Series，用来显示红色阈值区域
-function pureBottomArea(itemx, percentx, bottomColorx) {
-  const seriesObj = {
-    type: itemx.type,
-    name: itemx.name,
-    data: itemx.data,
-    smooth: itemx.smooth,
-    step: itemx.step,
-    symbol: 'none',
-    areaStyle: {
-      color: {
-        x: 0,
-        y: 0,
-        x2: 0,
-        y2: 1,
-        colorStops: [
-          {
-            offset: 0,
-            color: chartToken.colorAreaTP, //解决svg渲染方式下面积图低阈值黑色背景的问题
-          },
-          {
-            offset: 1 - percentx - 0.00001,
-            color: chartToken.colorAreaTP,
-          },
-          {
-            offset: 1 - percentx,
-            color: bottomColorx,
-          },
-          {
-            offset: 1,
-            color: bottomColorx,
-          },
-        ],
-        type: 'linear',
-      },
-      origin: 'end',
-    },
-    lineStyle: {
-      width: 0,
-    },
-  };
-  return seriesObj;
-}
-
-function markLineArea(baseOption, iChartOption, YAxiMax) {
-  if (
-    iChartOption.area &&
-    iChartOption.markLine &&
-    iChartOption.markLine.bottom &&
-    isNumber(iChartOption.markLine.bottom)
-  ) {
-    const temp = [];
-    baseOption.series.forEach(item => {
-      const bottomColor = codeToRGB(iChartOption.markLine.bottomColor, 0.15) || codeToRGB(Token.config.colorState.colorError, 0.15);
-      // data中的阈值项data转换为object，此时找最小值需要转换回来
-      const seriesData = getDataWidthNoObject(item.data)
-      const minValue = min(seriesData);
-      const percent = (iChartOption.markLine.bottom - minValue) / (YAxiMax - minValue);
-      if (iChartOption.markLine.bottom >= minValue) {
-        // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
-        const newSeries = pureBottomArea(item, percent, bottomColor);
-        temp.push(newSeries);
-      }
-    });
-    baseOption.series = baseOption.series.concat(temp);
-  }
-}
-
-function getDataWidthNoObject(data) {
-  return data.map(item => {
-    return isObject(item) ? item.value : item
-  })
-}
-
-/**
- * 为series添加areaStyle
- */
-function bottomArea(baseOption, iChartOption, YAxiMax) {
-  // 添加markLine的areaStyle
-  markLineArea(baseOption, iChartOption, YAxiMax);
-  // 添加split的areaStyle
-  splitArea(baseOption, iChartOption, YAxiMax);
-}
-
-
-export default bottomArea;
-export { judgeFilterAreaSeries,getDataWidthNoObject }
+/**
+ * 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 { isNumber, isObject } from '../../../util/type';
+import { getColor, codeToRGB } from '../../../util/color';
+import chartToken from './chartToken';
+import Token from '../../../feature/token';
+
+// 创建一个渐变色-同名的Series，用来显示分割渐变区域
+function gradientBottomArea(item, percent, colorTo, colorFrom) {
+  const newSeries = {
+    type: item.type,
+    name: item.name,
+    data: item.data,
+    smooth: item.smooth,
+    step: item.step,
+    lineStyle: {
+      width: 0,
+    },
+    symbol: 'none',
+    areaStyle: {
+      origin: 'end',
+      color: {
+        type: 'linear',
+        x2: 0,
+        y2: 1,
+        x: 0,
+        y: 0,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percent - 0.00001,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percent,
+            color: colorTo,
+          },
+          {
+            offset: 1,
+            color: colorFrom,
+          },
+        ],
+      },
+    },
+  };
+  return newSeries;
+}
+
+/**
+ * 为series添加split分割区域的底部areaStyle,
+ */
+function splitArea(baseOption, iChartOption, YAxiMax) {
+  if (iChartOption.area && iChartOption.splitLine) {
+    const temp = [];
+    const colors = baseOption.color;
+    baseOption.series.forEach((item, index) => {
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const minValue = min(seriesData);
+      const percent = (iChartOption.splitLine - minValue) / (YAxiMax - minValue);
+      const color = getColor(colors, index);
+      const colorTo = codeToRGB(color, 0.15);
+      const colorFrom = codeToRGB(color, 0.15);
+      // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+      const newSeries = gradientBottomArea(item, percent, colorTo, colorFrom);
+      temp.push(newSeries);
+    });
+    baseOption.series = baseOption.series.concat(temp);
+  }
+}
+
+// 判断是否需要过滤series
+function judgeFilterAreaSeries(iChartOption) {
+  const { area, splitLine, markLine } = iChartOption
+  return area && (splitLine || (markLine && markLine?.bottom && isNumber(markLine?.bottom)))
+}
+
+// 创建一个纯色-同名Series，用来显示红色阈值区域
+function pureBottomArea(itemx, percentx, bottomColorx) {
+  const seriesObj = {
+    type: itemx.type,
+    name: itemx.name,
+    data: itemx.data,
+    smooth: itemx.smooth,
+    step: itemx.step,
+    symbol: 'none',
+    areaStyle: {
+      color: {
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: chartToken.colorAreaTP, //解决svg渲染方式下面积图低阈值黑色背景的问题
+          },
+          {
+            offset: 1 - percentx - 0.00001,
+            color: chartToken.colorAreaTP,
+          },
+          {
+            offset: 1 - percentx,
+            color: bottomColorx,
+          },
+          {
+            offset: 1,
+            color: bottomColorx,
+          },
+        ],
+        type: 'linear',
+      },
+      origin: 'end',
+    },
+    lineStyle: {
+      width: 0,
+    },
+  };
+  return seriesObj;
+}
+
+function markLineArea(baseOption, iChartOption, YAxiMax) {
+  if (
+    iChartOption.area &&
+    iChartOption.markLine &&
+    iChartOption.markLine.bottom &&
+    isNumber(iChartOption.markLine.bottom)
+  ) {
+    const temp = [];
+    baseOption.series.forEach(item => {
+      const bottomColor = codeToRGB(iChartOption.markLine.bottomColor, 0.15) || codeToRGB(Token.config.colorState.colorError, 0.15);
+      // data中的阈值项data转换为object，此时找最小值需要转换回来
+      const seriesData = getDataWidthNoObject(item.data)
+      const minValue = min(seriesData);
+      const percent = (iChartOption.markLine.bottom - minValue) / (YAxiMax - minValue);
+      if (iChartOption.markLine.bottom >= minValue) {
+        // 该series是为了实现红色特殊area的样式而加的，因此在tooltip中应该被屏蔽
+        const newSeries = pureBottomArea(item, percent, bottomColor);
+        temp.push(newSeries);
+      }
+    });
+    baseOption.series = baseOption.series.concat(temp);
+  }
+}
+
+function getDataWidthNoObject(data) {
+  return data.map(item => {
+    return isObject(item) ? item.value : item
+  })
+}
+
+/**
+ * 为series添加areaStyle
+ */
+function bottomArea(baseOption, iChartOption, YAxiMax) {
+  // 添加markLine的areaStyle
+  markLineArea(baseOption, iChartOption, YAxiMax);
+  // 添加split的areaStyle
+  splitArea(baseOption, iChartOption, YAxiMax);
+}
+
+
+export default bottomArea;
+export { judgeFilterAreaSeries,getDataWidthNoObject }

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