@ebiz/designer-components 0.0.18-beta.7 → 0.0.18-beta.9

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

@@ -1,130 +1,130 @@
-/**
- * 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 { isArray } from '../../util/type';
-import cloneDeep from '../../util/cloneDeep';
-import { VOLUMEGRID } from './BaseOption';
-import merge from '../../util/merge';
-import chartToken from './chartToken';
-import { xkey } from '../../option/RectSys';
-
-function handleData(iChartOpt) {
-  const { data } = iChartOpt;
-  const xAxisDataName = xkey(iChartOpt);
-  if (data && data.length !== 0) {
-    const time = [];
-    const total = [];
-    data.forEach(item => {
-      time.push(item[xAxisDataName]);
-      const totalItem = [item.open, item.close, item.lowest, item.highest];
-      if (item.volume) {
-        totalItem.push(item.volume);
-      }
-      total.push(totalItem);
-    });
-    return {
-      time,
-      total,
-    };
-  }
-  return null;
-}
-
-function handleAxis(baseOpt, data, volume) {
-  const { xAxis } = baseOpt;
-  if (isArray(xAxis)) {
-    const len = xAxis.length;
-    if (volume && len === 1) {
-      const secXaxis = cloneDeep(xAxis[0]);
-      xAxis.push(secXaxis);
-    }
-    xAxis.forEach((x, xIndex) => {
-      x.data = data.time;
-      x.boundaryGap = false;
-      x.axisLine.onZero = false;
-      if (xIndex === 1) {
-        x.axisLabel.show = false;
-        x.axisTick.show = false;
-        x.gridIndex = 1;
-      }
-    });
-  } else {
-    xAxis.data = data.time;
-    xAxis.boundaryGap = false;
-    xAxis.axisLine.onZero = false;
-  }
-
-  const { yAxis } = baseOpt;
-  const lenY = yAxis.length;
-  if (volume && lenY === 1) {
-    const secYaxis = cloneDeep(yAxis[0]);
-    yAxis.push(secYaxis);
-  }
-  yAxis.forEach((y, yIndex) => {
-    y.scale = true;
-    if (yIndex === 1) {
-      y.axisLabel.show = false;
-      y.splitLine.show = false;
-      y.gridIndex = 1;
-    }
-  });
-}
-
-function handleDataZoom(baseOpt, iChartOpt) {
-  const { dataZoom } = iChartOpt;
-  baseOpt.dataZoom[0].show = true;
-  baseOpt.dataZoom[0].xAxisIndex = [0, 1];
-  baseOpt.dataZoom[0].bottom = '6%';
-  if (dataZoom) {
-    merge(baseOpt.dataZoom[0], dataZoom);
-  }
-}
-
-function handleLegend(baseOpt, iChartOpt) {
-  const { legend } = iChartOpt;
-  if (legend) {
-    merge(baseOpt.legend, legend);
-  }
-}
-
-function handleTooltip(baseOpt, iChartOpt) {
-  const inerTooltip = { ...baseOpt.tooltip };
-  delete inerTooltip.axisPointer;
-  inerTooltip.axisPointer = { type: 'cross' };
-  baseOpt.tooltip = inerTooltip;
-  if (iChartOpt.tooltip) {
-    merge(baseOpt.tooltip, iChartOpt.tooltip);
-  }
-}
-
-function handleGrid(baseOpt, iChartOpt) {
-  const { volume, grid } = iChartOpt;
-  // 用户没有自定义grid,并且需要去显示volume,使用默认值
-  if (!grid && volume) {
-    baseOpt.grid = cloneDeep(VOLUMEGRID);
-  }
-}
-
-function handleAxisPointer(baseOpt) {
-  const axisPointer = {
-    link: [
-      {
-        xAxisIndex: 'all',
-      },
-    ],
-    label: {
-      color: chartToken.axisPointerLabelColor,
-    },
-  };
-  baseOpt.axisPointer = axisPointer;
-}
-
-export { handleData, handleAxis, handleDataZoom, handleLegend, handleTooltip, handleGrid, handleAxisPointer };
+/**
+ * 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 { isArray } from '../../util/type';
+import cloneDeep from '../../util/cloneDeep';
+import { VOLUMEGRID } from './BaseOption';
+import merge from '../../util/merge';
+import chartToken from './chartToken';
+import { xkey } from '../../option/RectSys';
+
+function handleData(iChartOpt) {
+  const { data } = iChartOpt;
+  const xAxisDataName = xkey(iChartOpt);
+  if (data && data.length !== 0) {
+    const time = [];
+    const total = [];
+    data.forEach(item => {
+      time.push(item[xAxisDataName]);
+      const totalItem = [item.open, item.close, item.lowest, item.highest];
+      if (item.volume) {
+        totalItem.push(item.volume);
+      }
+      total.push(totalItem);
+    });
+    return {
+      time,
+      total,
+    };
+  }
+  return null;
+}
+
+function handleAxis(baseOpt, data, volume) {
+  const { xAxis } = baseOpt;
+  if (isArray(xAxis)) {
+    const len = xAxis.length;
+    if (volume && len === 1) {
+      const secXaxis = cloneDeep(xAxis[0]);
+      xAxis.push(secXaxis);
+    }
+    xAxis.forEach((x, xIndex) => {
+      x.data = data.time;
+      x.boundaryGap = false;
+      x.axisLine.onZero = false;
+      if (xIndex === 1) {
+        x.axisLabel.show = false;
+        x.axisTick.show = false;
+        x.gridIndex = 1;
+      }
+    });
+  } else {
+    xAxis.data = data.time;
+    xAxis.boundaryGap = false;
+    xAxis.axisLine.onZero = false;
+  }
+
+  const { yAxis } = baseOpt;
+  const lenY = yAxis.length;
+  if (volume && lenY === 1) {
+    const secYaxis = cloneDeep(yAxis[0]);
+    yAxis.push(secYaxis);
+  }
+  yAxis.forEach((y, yIndex) => {
+    y.scale = true;
+    if (yIndex === 1) {
+      y.axisLabel.show = false;
+      y.splitLine.show = false;
+      y.gridIndex = 1;
+    }
+  });
+}
+
+function handleDataZoom(baseOpt, iChartOpt) {
+  const { dataZoom } = iChartOpt;
+  baseOpt.dataZoom[0].show = true;
+  baseOpt.dataZoom[0].xAxisIndex = [0, 1];
+  baseOpt.dataZoom[0].bottom = '6%';
+  if (dataZoom) {
+    merge(baseOpt.dataZoom[0], dataZoom);
+  }
+}
+
+function handleLegend(baseOpt, iChartOpt) {
+  const { legend } = iChartOpt;
+  if (legend) {
+    merge(baseOpt.legend, legend);
+  }
+}
+
+function handleTooltip(baseOpt, iChartOpt) {
+  const inerTooltip = { ...baseOpt.tooltip };
+  delete inerTooltip.axisPointer;
+  inerTooltip.axisPointer = { type: 'cross' };
+  baseOpt.tooltip = inerTooltip;
+  if (iChartOpt.tooltip) {
+    merge(baseOpt.tooltip, iChartOpt.tooltip);
+  }
+}
+
+function handleGrid(baseOpt, iChartOpt) {
+  const { volume, grid } = iChartOpt;
+  // 用户没有自定义grid,并且需要去显示volume,使用默认值
+  if (!grid && volume) {
+    baseOpt.grid = cloneDeep(VOLUMEGRID);
+  }
+}
+
+function handleAxisPointer(baseOpt) {
+  const axisPointer = {
+    link: [
+      {
+        xAxisIndex: 'all',
+      },
+    ],
+    label: {
+      color: chartToken.axisPointerLabelColor,
+    },
+  };
+  baseOpt.axisPointer = axisPointer;
+}
+
+export { handleData, handleAxis, handleDataZoom, handleLegend, handleTooltip, handleGrid, handleAxisPointer };

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

@@ -1,123 +1,123 @@
-/**
- * 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 cloneDeep from '../../util/cloneDeep';
-import { BASICSERIES } from './BaseOption';
-import LineChart from '../LineChart';
-import BarChart from '../BarChart';
-import { xkey } from '../../option/RectSys';
-import Token from '../../feature/token';
-
-// 用于计算相关的平均值
-function calculateMA(dayCount, data) {
-  const result = [];
-  for (let i = 0, len = data.length; i < len; i++) {
-    if (i < dayCount) {
-      result.push('');
-      continue;
-    }
-    let sum = 0;
-    for (let j = 0; j < dayCount; j++) {
-      sum += +data[i - j][1];
-    }
-    result.push(Number((sum / dayCount).toFixed(2)));
-  }
-  return result;
-}
-
-function getLineChartData(data, total, ma, xAxisKey) {
-  const maData = {};
-  ma.forEach(item => {
-    const data = calculateMA(item, total);
-    maData[`MA${item}`] = data;
-  });
-  const lineData = data.map((obj, index) => {
-    const newObj = {
-      [xAxisKey]: obj[xAxisKey],
-    };
-    for (const i in maData) {
-      if (Object.hasOwnProperty.call(maData, i)) {
-        newObj[i] = maData[i][index];
-      }
-    }
-    return newObj;
-  });
-  return lineData;
-}
-
-function getBarChartData(data, xAxisKey) {
-  const barData = data.map(obj => {
-    const newObj = {
-      [xAxisKey]: obj[xAxisKey],
-      volume: obj.volume,
-    };
-    return newObj;
-  });
-  return barData;
-}
-
-function handleMaSeries(baseOpt, iChartOpt, {data, total, MA:inerMa, xAxisKey}, chartInstance) {
-  const lineChartData = getLineChartData(data, total, inerMa, xAxisKey);
-  const newIchartOption = { ...iChartOpt, data: lineChartData };
-  const lineChart = new LineChart(newIchartOption, {}, chartInstance);
-  const lineBaseOption = lineChart.getOption();
-  const lineSeries = lineBaseOption.series;
-  for (let i = 0; i < lineSeries.length; i++) {
-    baseOpt.series.push(lineSeries[i]);
-  }
-}
-
-function handleVol(baseOpt, iChartOpt, { data, xAxisKey, total }, { upStateColor, downStateColor }, chartInstance) {
-  const barChartData = getBarChartData(data, xAxisKey);
-  const newIchartOption = { ...iChartOpt, data: barChartData };
-  const barChart = new BarChart(newIchartOption, {}, chartInstance);
-  // 获取生成的相应的barchart配置
-  const barBaseOption = barChart.getOption();
-  const barSeries = barBaseOption.series[0];
-  barSeries.itemStyle.color = params => {
-    const { dataIndex } = params;
-    const curTimeData = total[dataIndex];
-    return curTimeData[0] > curTimeData[1] ? downStateColor : upStateColor;
-  };
-  barSeries.xAxisIndex = 1;
-  barSeries.yAxisIndex = 1;
-  baseOpt.series.push(barSeries);
-}
-
-function handleMaAndVolSeries(baseOpt, iChartOpt, inerData, { upStateColor, downStateColor }, chartInstance) {
-  const { MA, volume, data } = iChartOpt;
-  const { total } = inerData;
-  const xAxisKey = xkey(iChartOpt);
-  if (MA && MA.length !== 0) {
-    handleMaSeries(baseOpt, iChartOpt, {data, total, MA, xAxisKey}, chartInstance);
-  }
-  if (volume) {
-    handleVol(baseOpt, iChartOpt, { data, xAxisKey, total }, { upStateColor, downStateColor }, chartInstance);
-  }
-}
-
-function handleSeries(baseOpt, iChartOpt, data, chartInstance) {
-  const { upColor, downColor } = iChartOpt;
-  const { colorState } = Token.config;
-  const upStateColor = upColor || colorState.colorError;
-  const downStateColor = downColor || colorState.colorSuccess;
-  const baseSeries = cloneDeep(BASICSERIES);
-  baseSeries[0].data = data.total;
-  baseSeries[0].itemStyle.color = upStateColor;
-  baseSeries[0].itemStyle.color0 = downStateColor;
-  baseSeries[0].itemStyle.borderColor = upStateColor;
-  baseSeries[0].itemStyle.borderColor0 = downStateColor;
-  baseOpt.series = baseSeries;
-
-  handleMaAndVolSeries(baseOpt, iChartOpt, data, { upStateColor, downStateColor }, chartInstance);
-}
-
-export { handleSeries };
+/**
+ * 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 cloneDeep from '../../util/cloneDeep';
+import { BASICSERIES } from './BaseOption';
+import LineChart from '../LineChart';
+import BarChart from '../BarChart';
+import { xkey } from '../../option/RectSys';
+import Token from '../../feature/token';
+
+// 用于计算相关的平均值
+function calculateMA(dayCount, data) {
+  const result = [];
+  for (let i = 0, len = data.length; i < len; i++) {
+    if (i < dayCount) {
+      result.push('');
+      continue;
+    }
+    let sum = 0;
+    for (let j = 0; j < dayCount; j++) {
+      sum += +data[i - j][1];
+    }
+    result.push(Number((sum / dayCount).toFixed(2)));
+  }
+  return result;
+}
+
+function getLineChartData(data, total, ma, xAxisKey) {
+  const maData = {};
+  ma.forEach(item => {
+    const data = calculateMA(item, total);
+    maData[`MA${item}`] = data;
+  });
+  const lineData = data.map((obj, index) => {
+    const newObj = {
+      [xAxisKey]: obj[xAxisKey],
+    };
+    for (const i in maData) {
+      if (Object.hasOwnProperty.call(maData, i)) {
+        newObj[i] = maData[i][index];
+      }
+    }
+    return newObj;
+  });
+  return lineData;
+}
+
+function getBarChartData(data, xAxisKey) {
+  const barData = data.map(obj => {
+    const newObj = {
+      [xAxisKey]: obj[xAxisKey],
+      volume: obj.volume,
+    };
+    return newObj;
+  });
+  return barData;
+}
+
+function handleMaSeries(baseOpt, iChartOpt, {data, total, MA:inerMa, xAxisKey}, chartInstance) {
+  const lineChartData = getLineChartData(data, total, inerMa, xAxisKey);
+  const newIchartOption = { ...iChartOpt, data: lineChartData };
+  const lineChart = new LineChart(newIchartOption, {}, chartInstance);
+  const lineBaseOption = lineChart.getOption();
+  const lineSeries = lineBaseOption.series;
+  for (let i = 0; i < lineSeries.length; i++) {
+    baseOpt.series.push(lineSeries[i]);
+  }
+}
+
+function handleVol(baseOpt, iChartOpt, { data, xAxisKey, total }, { upStateColor, downStateColor }, chartInstance) {
+  const barChartData = getBarChartData(data, xAxisKey);
+  const newIchartOption = { ...iChartOpt, data: barChartData };
+  const barChart = new BarChart(newIchartOption, {}, chartInstance);
+  // 获取生成的相应的barchart配置
+  const barBaseOption = barChart.getOption();
+  const barSeries = barBaseOption.series[0];
+  barSeries.itemStyle.color = params => {
+    const { dataIndex } = params;
+    const curTimeData = total[dataIndex];
+    return curTimeData[0] > curTimeData[1] ? downStateColor : upStateColor;
+  };
+  barSeries.xAxisIndex = 1;
+  barSeries.yAxisIndex = 1;
+  baseOpt.series.push(barSeries);
+}
+
+function handleMaAndVolSeries(baseOpt, iChartOpt, inerData, { upStateColor, downStateColor }, chartInstance) {
+  const { MA, volume, data } = iChartOpt;
+  const { total } = inerData;
+  const xAxisKey = xkey(iChartOpt);
+  if (MA && MA.length !== 0) {
+    handleMaSeries(baseOpt, iChartOpt, {data, total, MA, xAxisKey}, chartInstance);
+  }
+  if (volume) {
+    handleVol(baseOpt, iChartOpt, { data, xAxisKey, total }, { upStateColor, downStateColor }, chartInstance);
+  }
+}
+
+function handleSeries(baseOpt, iChartOpt, data, chartInstance) {
+  const { upColor, downColor } = iChartOpt;
+  const { colorState } = Token.config;
+  const upStateColor = upColor || colorState.colorError;
+  const downStateColor = downColor || colorState.colorSuccess;
+  const baseSeries = cloneDeep(BASICSERIES);
+  baseSeries[0].data = data.total;
+  baseSeries[0].itemStyle.color = upStateColor;
+  baseSeries[0].itemStyle.color0 = downStateColor;
+  baseSeries[0].itemStyle.borderColor = upStateColor;
+  baseSeries[0].itemStyle.borderColor0 = downStateColor;
+  baseOpt.series = baseSeries;
+
+  handleMaAndVolSeries(baseOpt, iChartOpt, data, { upStateColor, downStateColor }, chartInstance);
+}
+
+export { handleSeries };

package/src/components/charts/components/CandlestickChart/index.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 init from '../../option/init';
-import RectCoordSys from '../../option/RectSys';
-import {
-  handleData,
-  handleAxis,
-  handleDataZoom,
-  handleTooltip,
-  handleLegend,
-  handleGrid,
-  handleAxisPointer,
-} from './hanleOption';
-import { handleSeries } from './hanleSeries';
-import { mergeSeries } from '../../util/merge';
-import { CHART_TYPE } from '../../util/constants';
-
-class CandlestickChart {
-
-  static name = CHART_TYPE.CANDLESTICK
-
-  constructor(iChartOption, chartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    this.chartInstance = chartInstance;
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption();
-  }
-
-  updateOption() {
-    const iChartOption = this.iChartOption;
-    const volume = this.iChartOption.volume;
-    const data = handleData(iChartOption);
-    if (!data) return;
-    handleSeries(this.baseOption, iChartOption, data, this.chartInstance);
-    RectCoordSys(this.baseOption, iChartOption);
-    // 装载除series之外的其他配置
-    handleGrid(this.baseOption, iChartOption);
-    // 平均线和成交量,在这部分对ma和vol的图表进行处理
-    handleAxis(this.baseOption, data, volume);
-    handleTooltip(this.baseOption, iChartOption);
-    handleDataZoom(this.baseOption, iChartOption);
-    handleLegend(this.baseOption, iChartOption);
-    handleAxisPointer(this.baseOption);
-    mergeSeries(iChartOption, this.baseOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-
-  setOption(option) {
-    this.baseOption = option;
-  }
-}
-
-export default CandlestickChart;
+/**
+ * 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 RectCoordSys from '../../option/RectSys';
+import {
+  handleData,
+  handleAxis,
+  handleDataZoom,
+  handleTooltip,
+  handleLegend,
+  handleGrid,
+  handleAxisPointer,
+} from './hanleOption';
+import { handleSeries } from './hanleSeries';
+import { mergeSeries } from '../../util/merge';
+import { CHART_TYPE } from '../../util/constants';
+
+class CandlestickChart {
+
+  static name = CHART_TYPE.CANDLESTICK
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.chartInstance = chartInstance;
+    // 组装 iChartOption, 补全默认值
+    this.iChartOption = init(iChartOption);
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    const volume = this.iChartOption.volume;
+    const data = handleData(iChartOption);
+    if (!data) return;
+    handleSeries(this.baseOption, iChartOption, data, this.chartInstance);
+    RectCoordSys(this.baseOption, iChartOption);
+    // 装载除series之外的其他配置
+    handleGrid(this.baseOption, iChartOption);
+    // 平均线和成交量,在这部分对ma和vol的图表进行处理
+    handleAxis(this.baseOption, data, volume);
+    handleTooltip(this.baseOption, iChartOption);
+    handleDataZoom(this.baseOption, iChartOption);
+    handleLegend(this.baseOption, iChartOption);
+    handleAxisPointer(this.baseOption);
+    mergeSeries(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption(option) {
+    this.baseOption = option;
+  }
+}
+
+export default CandlestickChart;