@ebiz/designer-components 0.0.47 → 0.0.48

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

package/src/components/charts/components/CircleProcessChart/handleOption.js

@@ -1,68 +1,68 @@
-/**
- * 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 defendXSS from '../../util/defendXSS';
-import chartToken from './chartToken';
-// 获取bar的series数据
-export function getSeriesData(data) {
-  const seriesData = [];
-  data.forEach((item, i) => {
-    seriesData[i] = [];
-    seriesData[i][0] = item.value;
-  });
-  return seriesData;
-}
-
-function tooltipFormatter(params) {
-  const seriesName = params.seriesName;
-  const color = params.color;
-  const value = params.value;
-  const htmlString = `<div>
-                            <span style="display:inline-block;width:10px;height:10px;
-                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
-                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
-                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
-                            <span>${defendXSS(value)}</span>
-                       </div>`;
-  return htmlString;
-}
-
-/**
- * 配置默认的鼠标悬浮提示框
- */
-export function setTooltip(baseOpt) {
-  if (!baseOpt.tooltip.formatter) {
-    baseOpt.tooltip.formatter = tooltipFormatter;
-  }
-}
-
-/**
- * 配置Title
- */
-export function setTitle(iChartOption) {
-  const { title } = iChartOption;
-  if (!title.subtextStyle || !title.subtextStyle?.color) {
-    if (!title.subtextStyle) title.subtextStyle = {}
-    title.subtextStyle.color = chartToken.descRichColor
-  }
-  if (!title.textStyle || !title.textStyle?.color) {
-    if (!title.textStyle) title.textStyle = {}
-    title.textStyle.color = chartToken.detailRichColor
-  }
-  if (title.textStyle && title.textStyle.rich) {
-    for (const key in title.textStyle.rich) {
-      const element = title.textStyle.rich[key];
-      if (!element.color) {
-        element.color = chartToken.detailRichColor
-      }
-    }
-  }
+/**
+ * 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 defendXSS from '../../util/defendXSS';
+import chartToken from './chartToken';
+// 获取bar的series数据
+export function getSeriesData(data) {
+  const seriesData = [];
+  data.forEach((item, i) => {
+    seriesData[i] = [];
+    seriesData[i][0] = item.value;
+  });
+  return seriesData;
+}
+
+function tooltipFormatter(params) {
+  const seriesName = params.seriesName;
+  const color = params.color;
+  const value = params.value;
+  const htmlString = `<div>
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-radius:5px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(color)};background-color:${defendXSS(color)};"></span>
+                            <span style="margin-right:16px">${defendXSS(seriesName)}</span>
+                            <span>${defendXSS(value)}</span>
+                       </div>`;
+  return htmlString;
+}
+
+/**
+ * 配置默认的鼠标悬浮提示框
+ */
+export function setTooltip(baseOpt) {
+  if (!baseOpt.tooltip.formatter) {
+    baseOpt.tooltip.formatter = tooltipFormatter;
+  }
+}
+
+/**
+ * 配置Title
+ */
+export function setTitle(iChartOption) {
+  const { title } = iChartOption;
+  if (!title.subtextStyle || !title.subtextStyle?.color) {
+    if (!title.subtextStyle) title.subtextStyle = {}
+    title.subtextStyle.color = chartToken.descRichColor
+  }
+  if (!title.textStyle || !title.textStyle?.color) {
+    if (!title.textStyle) title.textStyle = {}
+    title.textStyle.color = chartToken.detailRichColor
+  }
+  if (title.textStyle && title.textStyle.rich) {
+    for (const key in title.textStyle.rich) {
+      const element = title.textStyle.rich[key];
+      if (!element.color) {
+        element.color = chartToken.detailRichColor
+      }
+    }
+  }
 }

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

@@ -1,127 +1,127 @@
-/**
- * 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 chartToken from './chartToken';
-import { emptySeriesUnit } from '../GaugeChart/handleSeries';
-import cloneDeep from '../../util/cloneDeep';
-import Token from '../../feature/token';
-
-function getSeriesInit() {
-  return {
-    type: 'bar',
-    coordinateSystem: 'polar',
-    emphasis: {
-      focus: 'series',
-    },
-    animation: false,
-    stack: 'total',
-    showBackground: true,
-    backgroundStyle: {
-      color: '',
-    },
-    data: [],
-  };
-}
-
-export function setSeries(seriesData, iChartOption, chartInstance) {
-  const { data, itemStyle, markLine } = iChartOption;
-  const series = [];
-  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
-  data.forEach((item, i) => {
-    const seriesUnit = getSeriesInit();
-    seriesUnit.name = item.name;
-    seriesUnit.data = seriesData[i];
-    seriesUnit.itemStyle = item.itemStyle || itemStyle;
-    seriesUnit.backgroundStyle.color = chartToken.background;
-    seriesUnit.barWidth = barWidth;
-    seriesUnit.emphasis = iChartOption.emphasis;
-    series.push(seriesUnit);
-  });
-  // 阈值线
-  if (markLine) {
-    const markLineUnit = setMarkLine(data, markLine,  iChartOption, chartInstance, barWidth);
-    series.push(markLineUnit);
-  }
-  return series;
-}
-
-function getThemeStatusColor(status = 'success'){
-  const {colorError, colorAlert, colorWarning, colorSuccess} = Token.config.colorState
-  const statusColorGroup = {
-    error: colorError,
-    alert: colorAlert,
-    warning: colorWarning,
-    success: colorSuccess
-  }
-  return statusColorGroup[status]
-}
-
-// 添加一个空series，使用该空series的pointer来作为阈值线的红线
-function setMarkLine(data, markLine, iChartOption, chartInstance, barWidth) {
-  let {color, status='success', value} = markLine;
-  const  marklineColor = getThemeStatusColor(status);
-  const temp = cloneDeep(emptySeriesUnit);
-  const markLineUnit = cloneDeep(temp);
-  if(data[0].value > value){
-    color = '#FFFFFF'
-  }
-  markLineUnit.name = 'markLine';
-  markLineUnit.min = iChartOption.min || 0;
-  markLineUnit.max = iChartOption.max || 100;
-  markLineUnit.startAngle = 90;
-  markLineUnit.endAngle = -270;
-  markLineUnit.center = iChartOption.position.center || ['50%', '50%'];
-  markLineUnit.radius = iChartOption.position.radius || '50%';
-  markLineUnit.animation = false;
-  let pointerOffsetCenter = computeMarkLinePosition(markLineUnit.radius, barWidth, chartInstance);
-  markLineUnit.pointer = {
-    icon: 'path://M0 0 L30 0 L30 100 L0 100 Z',
-    width: 2,
-    length: barWidth / 2 ,
-    offsetCenter: iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter],
-    itemStyle: {
-      color:  color || marklineColor,
-    }
-  };
-  markLineUnit.data = [{ value: markLine.value }];
-  markLineUnit.silent = true;
-  markLineUnit.zlevel = 2;
-  return markLineUnit;
-}
-
-// 计算阈值线位置 
-function computeMarkLinePosition(radius, barWidth, chartInstance){
-  let position;
-  const width = chartInstance.getWidth();
-  const height = chartInstance.getHeight();
-  const canvasRadius = width > height ? height / 2 : width / 2;
-  if(typeof radius === 'number'){
-    position = radius / 2 - (barWidth / 4) 
-  }else if(radius.indexOf('%')>-1){
-    radius = Number(radius.slice(0,-1)) / 100;
-    position = radius*canvasRadius / 2 - (barWidth / 4)
-  }else if(typeof radius === 'string'){
-    position = Number(radius) / 2 - (barWidth / 4)
-  }
-  return position
-}
-
-// 更新阈值线位置
-export function updateMarkLine(iChartOption, eChartOption, chartInstance){
-  let radius = iChartOption.position.radius || '50%';
-  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
-  const pointerOffsetCenter = computeMarkLinePosition(radius, barWidth, chartInstance);
-  eChartOption.series.forEach(item=>{
-    if(item.name === 'markLine'){
-      item.pointer.offsetCenter = iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter];
-    }
-  })
+/**
+ * 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 chartToken from './chartToken';
+import { emptySeriesUnit } from '../GaugeChart/handleSeries';
+import cloneDeep from '../../util/cloneDeep';
+import Token from '../../feature/token';
+
+function getSeriesInit() {
+  return {
+    type: 'bar',
+    coordinateSystem: 'polar',
+    emphasis: {
+      focus: 'series',
+    },
+    animation: false,
+    stack: 'total',
+    showBackground: true,
+    backgroundStyle: {
+      color: '',
+    },
+    data: [],
+  };
+}
+
+export function setSeries(seriesData, iChartOption, chartInstance) {
+  const { data, itemStyle, markLine } = iChartOption;
+  const series = [];
+  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
+  data.forEach((item, i) => {
+    const seriesUnit = getSeriesInit();
+    seriesUnit.name = item.name;
+    seriesUnit.data = seriesData[i];
+    seriesUnit.itemStyle = item.itemStyle || itemStyle;
+    seriesUnit.backgroundStyle.color = chartToken.background;
+    seriesUnit.barWidth = barWidth;
+    seriesUnit.emphasis = iChartOption.emphasis;
+    series.push(seriesUnit);
+  });
+  // 阈值线
+  if (markLine) {
+    const markLineUnit = setMarkLine(data, markLine,  iChartOption, chartInstance, barWidth);
+    series.push(markLineUnit);
+  }
+  return series;
+}
+
+function getThemeStatusColor(status = 'success'){
+  const {colorError, colorAlert, colorWarning, colorSuccess} = Token.config.colorState
+  const statusColorGroup = {
+    error: colorError,
+    alert: colorAlert,
+    warning: colorWarning,
+    success: colorSuccess
+  }
+  return statusColorGroup[status]
+}
+
+// 添加一个空series，使用该空series的pointer来作为阈值线的红线
+function setMarkLine(data, markLine, iChartOption, chartInstance, barWidth) {
+  let {color, status='success', value} = markLine;
+  const  marklineColor = getThemeStatusColor(status);
+  const temp = cloneDeep(emptySeriesUnit);
+  const markLineUnit = cloneDeep(temp);
+  if(data[0].value > value){
+    color = '#FFFFFF'
+  }
+  markLineUnit.name = 'markLine';
+  markLineUnit.min = iChartOption.min || 0;
+  markLineUnit.max = iChartOption.max || 100;
+  markLineUnit.startAngle = 90;
+  markLineUnit.endAngle = -270;
+  markLineUnit.center = iChartOption.position.center || ['50%', '50%'];
+  markLineUnit.radius = iChartOption.position.radius || '50%';
+  markLineUnit.animation = false;
+  let pointerOffsetCenter = computeMarkLinePosition(markLineUnit.radius, barWidth, chartInstance);
+  markLineUnit.pointer = {
+    icon: 'path://M0 0 L30 0 L30 100 L0 100 Z',
+    width: 2,
+    length: barWidth / 2 ,
+    offsetCenter: iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter],
+    itemStyle: {
+      color:  color || marklineColor,
+    }
+  };
+  markLineUnit.data = [{ value: markLine.value }];
+  markLineUnit.silent = true;
+  markLineUnit.zlevel = 2;
+  return markLineUnit;
+}
+
+// 计算阈值线位置 
+function computeMarkLinePosition(radius, barWidth, chartInstance){
+  let position;
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+  const canvasRadius = width > height ? height / 2 : width / 2;
+  if(typeof radius === 'number'){
+    position = radius / 2 - (barWidth / 4) 
+  }else if(radius.indexOf('%')>-1){
+    radius = Number(radius.slice(0,-1)) / 100;
+    position = radius*canvasRadius / 2 - (barWidth / 4)
+  }else if(typeof radius === 'string'){
+    position = Number(radius) / 2 - (barWidth / 4)
+  }
+  return position
+}
+
+// 更新阈值线位置
+export function updateMarkLine(iChartOption, eChartOption, chartInstance){
+  let radius = iChartOption.position.radius || '50%';
+  const barWidth = Number(iChartOption.barWidth) || chartToken.barWidth;
+  const pointerOffsetCenter = computeMarkLinePosition(radius, barWidth, chartInstance);
+  eChartOption.series.forEach(item=>{
+    if(item.name === 'markLine'){
+      item.pointer.offsetCenter = iChartOption.markLine.offsetCenter || [0,  -pointerOffsetCenter];
+    }
+  })
 }

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

@@ -1,63 +1,63 @@
-/**
- * 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 mini from '../../feature/mini/miniCircleProcessChart';
-import { getSeriesData, setTooltip, setTitle } from './handleOption';
-import { setSeries, updateMarkLine } from './handleSeries';
-import PolarCoordSys from '../../option/PolarSys';
-import { CHART_TYPE } from '../../util/constants';
-import { mergeSeries } from '../../util/merge';
-
-export default class CircleProcessChart {
-
-  static name = CHART_TYPE.CIRCLE_PROCESS;
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    this.chartInstance = chartInstance;
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(chartInstance);
-  }
-
-  updateOption(chartInstance) {
-    const iChartOption = this.iChartOption;
-    // 装载除series之外的其他配置
-    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.CIRCLE_PROCESS);
-    // tooltip悬浮框
-    setTooltip(this.baseOption);
-    // legend数据
-    this.baseOption.legend.data = iChartOption.data;
-    // series bar数据
-    const seriesData = getSeriesData(iChartOption.data);
-    this.baseOption.series = setSeries(seriesData, iChartOption, chartInstance);
-    // 范围设置
-    this.baseOption.angleAxis.max = iChartOption.max || 100;
-    if( this.baseOption.title) setTitle(iChartOption);
-    mergeSeries(iChartOption, this.baseOption);
-    mini(iChartOption, this.baseOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  resize(callback) {
-    // 有阈值线时，更新阈值线位置
-    if(this.iChartOption.markLine){
-      updateMarkLine(this.iChartOption, this.baseOption, this.chartInstance)
-    }
-    callback(this.baseOption);
-  }
-}
+/**
+ * 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 mini from '../../feature/mini/miniCircleProcessChart';
+import { getSeriesData, setTooltip, setTitle } from './handleOption';
+import { setSeries, updateMarkLine } from './handleSeries';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+import { mergeSeries } from '../../util/merge';
+
+export default class CircleProcessChart {
+
+  static name = CHART_TYPE.CIRCLE_PROCESS;
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    const iChartOption = this.iChartOption;
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.CIRCLE_PROCESS);
+    // tooltip悬浮框
+    setTooltip(this.baseOption);
+    // legend数据
+    this.baseOption.legend.data = iChartOption.data;
+    // series bar数据
+    const seriesData = getSeriesData(iChartOption.data);
+    this.baseOption.series = setSeries(seriesData, iChartOption, chartInstance);
+    // 范围设置
+    this.baseOption.angleAxis.max = iChartOption.max || 100;
+    if( this.baseOption.title) setTitle(iChartOption);
+    mergeSeries(iChartOption, this.baseOption);
+    mini(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  resize(callback) {
+    // 有阈值线时，更新阈值线位置
+    if(this.iChartOption.markLine){
+      updateMarkLine(this.iChartOption, this.baseOption, this.chartInstance)
+    }
+    callback(this.baseOption);
+  }
+}