@ebiz/designer-components 0.0.18

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

@@ -0,0 +1,148 @@
+/**
+ * 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 chartToken from './chartToken';
+import { setChartPadding } from './handleOptipn';
+import merge from '../../util/merge';
+
+const LAYOUT_CONFIG = {
+  LineTreeChart: 'orthogonal',
+  RingTreeChart: 'radial'
+}
+
+/**
+ * 组装series所需要的series
+ */
+
+function getSeriesUnit(type) {
+  return {
+    type: 'tree',
+    data: undefined,
+    name: undefined,
+    // symbol: 'circle',
+    layout: LAYOUT_CONFIG[type],
+    // 文本样式
+    label: {
+      // 图元的距离
+      distance: 10,
+      fontSize: 12,
+      color: chartToken.labelColor,
+    },
+    // 设置连线的样式
+    lineStyle: {
+      width: 1,
+      // 连线的曲度
+      curveness: 0.5,
+      color: chartToken.lineColor
+    },
+    // 图元设置
+    itemStyle: {
+      color: Token.config.colorState.colorInfo
+    },
+    symbolSize: 10,
+    initialTreeDepth: 1,
+    // 初始动画的时长，
+    animationDuration: 550,
+    // 数据更新动画的时长。
+    animationDurationUpdate: 750,
+  };
+}
+
+
+function setLineTree(seriesItem, iChartOpt) {
+  const { lineType, direction } = iChartOpt
+  seriesItem.edgeShape = lineType || 'curve';
+  const dir = direction || 'left'
+  const configMap = {
+    top: {
+      label: {
+        position: "top",
+        rotate: -90,
+        align: 'right',
+        verticalAlign: 'middle'
+      },
+      leaves: {
+        label: {
+          position: 'bottom',
+          align: 'left'
+        }
+      },
+      orient: 'TB'
+    },
+    right: {
+      label: {
+        position: 'right'
+      },
+      leaves: {
+        label: {
+          position: 'left'
+        }
+      },
+      orient: 'RL'
+    },
+    bottom: {
+      label: {
+        position: 'bottom',
+        rotate: 90,
+        align: 'right',
+        verticalAlign: 'middle'
+      },
+      leaves: {
+        label: {
+          position: 'top',
+          align: 'left'
+        }
+      },
+      orient: 'BT'
+    },
+    left: {
+      label: {
+        position: 'left'
+      },
+      leaves: {
+        label: {
+          position: 'right'
+        }
+      },
+      orient: 'LR'
+    }
+  }
+  merge(seriesItem, configMap[dir])
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setSeries(baseOpt, type, iChartOpt) {
+  const { data } = iChartOpt;
+  if (!data) return;
+  if (data && data.length !== 0) {
+    const series = [];
+    data.forEach(dataItem => {
+      const seriesItem = getSeriesUnit(type);
+      // 设置图表padding
+      setChartPadding(seriesItem, type, iChartOpt);
+      seriesItem.name = dataItem.name;
+      // 设置数据
+      seriesItem.data = dataItem.data;
+      const { symbolSize, initialTreeDepth } = iChartOpt
+      // 设置图元大小
+      if (symbolSize) seriesItem.symbolSize = symbolSize
+      // 设置初始打开层级
+      if (initialTreeDepth) seriesItem.initialTreeDepth = initialTreeDepth
+      // 设置具体属性
+      if (type === 'LineTreeChart') setLineTree(seriesItem, iChartOpt)
+      series.push(seriesItem);
+    });
+    baseOpt.series = series
+  }
+}

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

@@ -0,0 +1,50 @@
+/**
+ * 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 { setTooltip } from './handleOptipn';
+import { setSeries } from './handleSeries';
+import { mergeSeries } from '../../util/merge';
+import { CHART_TYPE } from '../../util/constants';
+
+class TreeChart {
+
+  static name = CHART_TYPE.TREE
+
+
+  constructor(iChartOption) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.iChartOption = iChartOption;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    const type = iChartOption.type;
+    if (!type) {
+      throw new Error('TreeChart must have a name');
+    }
+    // 图表的series
+    setSeries(this.baseOption, type, iChartOption);
+    //  图表鼠标悬浮提示框
+    setTooltip(this.baseOption, iChartOption);
+    mergeSeries(iChartOption, this.baseOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default TreeChart;

package/src/components/charts/components/TreeMapChart/handleOptipn.js

@@ -0,0 +1,57 @@
+/**
+ * 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 grid from '../../option/config/grid';
+import tooltip from '../../option/config/tooltip';
+import defendXSS from '../../util/defendXSS';
+import { CHART_TYPE } from '../../util/constants';
+
+/**
+ * Tips提示框回调函数
+ */
+function toolTipFormatter(params) {
+  const data = params.data;
+  const { value, name } = data;
+  let htmlString = `<div style="margin-bottom:4px;">
+  树节点${name || ''}
+                            </div>`;
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">value:</span>
+                                <span>${defendXSS(value)}</span>
+                            </div>`;
+  return htmlString;
+}
+
+function handleGrid(baseOpt, iChartOpt) {
+  const basicGrid = grid(iChartOpt);
+  baseOpt.grid = basicGrid;
+}
+
+/**
+ * 是否配置标题和标题样式
+ */
+function handleTitle(baseOpt, iChartOpt) {
+  if (iChartOpt.title) {
+    baseOpt.title = iChartOpt.title;
+  }
+}
+
+function handleTooltip(baseOpt, iChartOpt) {
+  const basicTooltip = tooltip(iChartOpt, CHART_TYPE.TREE_MAP);
+  if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
+    basicTooltip.formatter = toolTipFormatter;
+  }
+  basicTooltip.trigger = 'item';
+  baseOpt.tooltip = basicTooltip;
+}
+
+export { handleGrid, handleTooltip, handleTitle };

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

@@ -0,0 +1,57 @@
+/**
+ * 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';
+
+export function handleSeries(baseOpt, iChartOpt) {
+  const series = [];
+  const data = iChartOpt.data;
+  const color = iChartOpt.color;
+  const roam = iChartOpt.roam;
+  const padding = iChartOpt.padding;
+  const optionLabel = iChartOpt.label || {};
+  const label = Object.assign({
+    fontFamily: 'HarmonyHeiTi',
+    fontSize: '14px',
+    align: 'center',
+    formatter: '{b}',
+    fontStyle: 'normal',
+  }, optionLabel);
+
+  if (data && isArray(data)) {
+    const seriesItem = {
+      data,
+      type: 'treemap',
+      roam: roam || false,
+      nodeClick: roam ? 'zoomToNode' : false,
+      breadcrumb: {
+        show: false,
+      },
+      top: padding[0],
+      right: padding[1],
+      bottom: padding[2],
+      left: padding[3],
+      label,
+      itemStyle: {
+        borderRadius: 4,
+        gapWidth: 1,
+        borderColor: 'transparent'
+      },
+      levels: [{
+        color
+      }],
+    };
+    series.push(seriesItem);
+  }
+  baseOpt.series = series;
+}

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

@@ -0,0 +1,31 @@
+/**
+ * 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 merge from '../../util/merge';
+import visualMap from '../../option/config/visualMap'
+
+export function handleVisualMap(option, iChartOption) {
+  let defaultVisualMap = visualMap(iChartOption.type || 'piecewise');
+  if (iChartOption.visualMap) {
+    const baseVisualMap = {
+      show: true,
+      right: 20,
+      top: 'middle',
+      align: 'left',
+      itemHeight:30,
+      inRange:{
+        color: iChartOption.color
+      }
+    }
+    merge(defaultVisualMap, baseVisualMap)
+    option.visualMap = merge(defaultVisualMap, iChartOption.visualMap)
+  }
+}

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

@@ -0,0 +1,56 @@
+/**
+ * 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 { handleGrid, handleTooltip, handleTitle } from './handleOptipn';
+import init from '../../option/init';
+import { CHART_TYPE } from '../../util/constants';
+import { handleVisualMap } from './handleVisualMap';
+
+class TreeMapChart {
+
+  static name = CHART_TYPE.TREE_MAP
+
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const treeMapiChartOption = this.iChartOption;
+    // 图表数据
+    const data = treeMapiChartOption.data;
+    if (!data.length) return;
+    // 设置chartpadding
+    handleGrid(this.baseOption, treeMapiChartOption);
+    //  图表鼠标悬浮提示框
+    handleTooltip(this.baseOption, treeMapiChartOption);
+    //  图表标题
+    handleTitle(this.baseOption, treeMapiChartOption);
+    // 图表的series
+    handleSeries(this.baseOption, treeMapiChartOption);
+    // 图表的visualMap
+    handleVisualMap(this.baseOption, treeMapiChartOption);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default TreeMapChart;

package/src/components/charts/components/WaveChart/chartToken.js

@@ -0,0 +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.WAVE)
+
+export default chartToken;