@ebiz/designer-components 0.0.18-tj.1

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

@@ -0,0 +1,227 @@
+/**
+ * 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 { changeRgbaOpacity } from '../../util/color';
+import { SYMBOLCOLOR, CHARTTYPE } from './BaseOption';
+import xAxis from '../../option/config/xAxis';
+import yAxis from '../../option/config/yAxis';
+import grid from '../../option/config/grid';
+import tooltip from '../../option/config/tooltip';
+import defendXSS from '../../util/defendXSS';
+import { CHART_TYPE } from '../../util/constants';
+
+function setHeatMapDeaultIchartOption(iChartOpt) {
+  if (!iChartOpt.color) {
+    iChartOpt.color = SYMBOLCOLOR[iChartOpt.type];
+  }
+  const padding = iChartOpt.chartPadding || iChartOpt.padding;
+  if (!padding && iChartOpt.type === CHARTTYPE[1]) {
+    iChartOpt.padding = iChartOpt.handle ? [50, 120, 20, 20] : [50, 30, 20, 20];
+  }
+}
+
+/**
+ * 矩形热力图自定义提示框回调函数
+ */
+function rectangularFormatter(params) {
+  const color = params.color;
+  const data = params.data;
+  const [x, y, z, name] = data;
+  let htmlString = `<div style="margin-bottom:4px;">
+                                矩形热力图
+                            </div>`;
+  htmlString += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;height:10px;
+                            margin-right:8px;border-style: solid;border-width:1px;
+                            border-color:${defendXSS(changeRgbaOpacity(color, 1))};background-color:${defendXSS(
+    color,
+  )};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`;
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                                <span>${defendXSS(x)}</span>
+                            </div>`;
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                                <span>${defendXSS(y)}</span>
+                            </div>`;
+  htmlString += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;
+                                min-width:60px;">透明度维度</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`;
+  return htmlString;
+}
+
+/**
+ * 日历热力图自定义提示框回调函数
+ */
+function calendarFormatter(params) {
+  const color = params.color;
+  const data = params.data;
+  const name = params.name;
+  const [, , z] = data;
+  let htmlDom = `<div style="margin-bottom:4px;">
+                                日历热力图
+                            </div>`;
+  htmlDom += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;
+                            height:10px;margin-right:8px;border-style: solid;
+                            border-width:1px;border-color:${defendXSS(
+    changeRgbaOpacity(color, 1),
+  )};background-color:${defendXSS(color)};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`;
+  htmlDom += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;
+                                min-width:60px;">Value</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`;
+  return htmlDom;
+}
+
+/**
+ * 蜂窝热力图自定义提示框回调函数
+ */
+function hexagonFormatter(params) {
+  const color = params.color;
+  const data = params.data;
+  const [x, y, z, name] = data;
+  let html = `<div style="margin-bottom:4px;">
+                            蜂窝热力图
+                            </div>`;
+  html += `<div style="margin-bottom:4px;">
+                            <span style="display:inline-block;width:10px;
+                            height:10px;margin-right:8px;border-style: solid;
+                            border-width:1px;border-color:${defendXSS(
+    changeRgbaOpacity(color, 1),
+  )};background-color:${defendXSS(color)};"></span>
+                            <span>${defendXSS(name)}</span>
+                        </div>`;
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">x维度</span> 
+                                <span>${defendXSS(x)}</span>
+                            </div>`;
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">y维度</span> 
+                                <span>${defendXSS(y)}</span>
+                            </div>`;
+  html += `
+                            <div>
+                                <span style="display:inline-block;margin-right:8px;min-width:60px;">颜色维度</span> 
+                                <span>${defendXSS(z)}</span>
+                            </div>`;
+  return html;
+}
+
+
+const heatMapTooltipFormatter = {
+  RectangularHeatMapChart: rectangularFormatter,
+  CalendarHeatMapChart: calendarFormatter,
+  HexagonHeatMapChart: hexagonFormatter,
+};
+
+function setTooltip(baseOpt, iChartOpt, type) {
+  function setChartTooltip(opt) {
+    if (!iChartOpt.tipHtml && !iChartOpt?.tooltip?.formatter) {
+      opt.formatter = heatMapTooltipFormatter[type];
+    }
+  }
+  baseOpt.tooltip = tooltip(iChartOpt, CHART_TYPE.HEAT_MAP, setChartTooltip);
+}
+
+function handleCalendarYaxis(yAxis, data) {
+  yAxis.type = 'category';
+  yAxis.data = data[1];
+  yAxis.splitLine.show = false;
+  yAxis.axisLine.show = true
+}
+
+function handleHexagonYaxis(yAxis, data) {
+  yAxis.splitLine.show = false;
+  yAxis.axisLabel.show = false;
+  yAxis.min = 0;
+  yAxis.max = data[2];
+}
+
+// y轴的处理函数
+const yAxisHandler = {
+  CalendarHeatMapChart: handleCalendarYaxis,
+  HexagonHeatMapChart: handleHexagonYaxis,
+};
+
+function setYaxis(baseOpt, iChartOpt, chartType, data) {
+  function setChartYaxis(opt, index) {
+    if (chartType !== CHARTTYPE[0] && index === 0) {
+      yAxisHandler[chartType](opt, data);
+    }
+  }
+  baseOpt.yAxis = yAxis(baseOpt, iChartOpt, CHART_TYPE.HEAT_MAP, setChartYaxis);
+}
+
+function handleRectangularXaxis(xAxis) {
+  xAxis.type = 'value';
+  xAxis.axisLine.show = false;
+}
+
+function handleCalendarXaxis(xAxis, data) {
+  xAxis.data = data[0];
+  xAxis.axisTick.show = false;
+}
+
+function handleHexagonXaxis(xAxis, data) {
+  xAxis.type = 'value';
+  xAxis.axisLine.show = false;
+  xAxis.axisTick.show = false;
+  xAxis.axisLabel.show = false;
+  xAxis.min = 0;
+  xAxis.max = data[1];
+}
+
+// x轴的处理函数
+const xAxisHandler = {
+  RectangularHeatMapChart: handleRectangularXaxis,
+  CalendarHeatMapChart: handleCalendarXaxis,
+  HexagonHeatMapChart: handleHexagonXaxis,
+};
+
+function setXaxis(baseOpt, iChartOpt, chartType, data) {
+  function setChartXaxis(opt, index) {
+    if (index === 0) xAxisHandler[chartType](opt, data);
+  }
+  baseOpt.xAxis = xAxis(iChartOpt, setChartXaxis);
+}
+
+function setGrid(baseOpt, iChartOpt) {
+  const basicGrid = grid(iChartOpt);
+  baseOpt.grid = basicGrid;
+}
+
+function initRectSys(baseOpt, iChartOpt, chartType, data) {
+  baseOpt.color = iChartOpt.color;
+  // 设置chartpadding
+  setGrid(baseOpt, iChartOpt);
+  // 图表x轴
+  setXaxis(baseOpt, iChartOpt, chartType, data)
+  // 图表y轴
+  setYaxis(baseOpt, iChartOpt, chartType, data);
+  // 图表鼠标悬浮提示框
+  setTooltip(baseOpt, iChartOpt, chartType);
+}
+
+export { setHeatMapDeaultIchartOption, initRectSys };

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

@@ -0,0 +1,82 @@
+/**
+ * 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, SERIESUNIT } from './BaseOption';
+import cloneDeep from '../../util/cloneDeep';
+import chartToken from './chartToken';
+
+// 蜂窝的render函数
+function handleRenderItem(params, api) {
+  // 六边形中心坐标,根据画布的左上方定位
+  const center = api.coord([api.value(0), api.value(1)]);
+  const points = []; // 六边形的坐标数组
+  const viewRadius = api.size([api.value(3), api.value(3)]); // 六边形的半径
+  let angle = Math.PI / 6; // 角度
+  for (let i = 0; i < 6; i++, angle += Math.PI / 3) {
+    points.push([center[0] + viewRadius[0] * Math.cos(angle), center[1] + viewRadius[0] * Math.sin(angle)]);
+  }
+  return {
+    type: 'group',
+    children: [
+      {
+        type: 'polygon',
+        shape: {
+          points,
+        },
+        style: {
+          stroke: chartToken.hexagonStrokeColor,
+          fill: api.visual('color'),
+          lineWidth: 1,
+        },
+      },
+    ],
+  };
+}
+
+function handleRectangularSeries(seriesUnit, iChartOpt, data) {
+  seriesUnit.symbolSize = iChartOpt.rectangleSize || 8;
+  seriesUnit.data = data;
+}
+
+function handleCalendarSeries(seriesUnit, iChartOpt, data) {
+  seriesUnit.data = data[2];
+  seriesUnit.itemStyle.borderColor = iChartOpt.borderColor || iChartOpt.color;
+  seriesUnit.label.show = iChartOpt.showLabel ?? true;
+  seriesUnit.label.color = chartToken.labelColor;
+  if (iChartOpt.changeProperty && iChartOpt.changeProperty === 'color') {
+    seriesUnit.itemStyle.borderWidth = 0;
+  }
+}
+
+function handleHexagonSeries(seriesUnit, data) {
+  seriesUnit.data = data[0];
+  seriesUnit.renderItem = handleRenderItem;
+}
+
+const seriesHandler = {
+  RectangularHeatMapChart: handleRectangularSeries,
+  CalendarHeatMapChart: handleCalendarSeries,
+  HexagonHeatMapChart: handleHexagonSeries,
+};
+
+function handleSeries(baseOpt, iChartOpt, data, type) {
+  const series = [];
+  const seriesItem = cloneDeep(SERIESUNIT[type]);
+  // 设置具体属性
+  if (type === CHARTTYPE[2]) {
+    seriesHandler[type](seriesItem, data);
+  } else {
+    seriesHandler[type](seriesItem, iChartOpt, data);
+  }
+  series.push(seriesItem);
+  baseOpt.series = series;
+}
+export { handleSeries };

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

@@ -0,0 +1,91 @@
+/**
+ * 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 max from '../../util/sort/max';
+import { CHARTTYPE } from './BaseOption';
+import merge from '../../util/merge';
+import visualMap from '../../option/config/visualMap';
+
+/**
+ * 设置日历热力图视觉滑块控制手柄
+ */
+function handleCalendar(iChartOption, visualUnit, maxValue, minValue,visualType) {
+  visualUnit.show = !!iChartOption.handle;
+  if(visualType==='continuous')  visualUnit.itemHeight = 400
+  visualUnit.text = [maxValue, minValue]
+  visualUnit.right = '4%';
+  visualUnit.bottom = '6%';
+  if (iChartOption.handle) {
+    merge(visualUnit, iChartOption.handle);
+    if (iChartOption.handle.width) {
+      visualUnit.itemWidth = iChartOption.handle.width
+      delete visualUnit.width
+    }
+    if (iChartOption.handle.height) {
+      visualUnit.itemHeight = iChartOption.handle.height
+      delete visualUnit.height
+    }
+    if (iChartOption.handle.position) {
+      merge(visualUnit, iChartOption.handle.position);
+      delete visualUnit.position
+    }
+  }
+  visualUnit.inRange = (!iChartOption.changeProperty || iChartOption.changeProperty === 'opcity') ? { opacity: [0, 1] } : { color: iChartOption.color }
+}
+
+function getVisualType(iChartOption) {
+  const { visualMap, handle } = iChartOption
+  let type = handle?.type ?? visualMap?.type ?? 'continuous'
+  return type
+}
+
+/**
+ * 组装echarts所需要的series
+ */
+export function setVisualMap(baseOpt, type, data, iChartOption) {
+  const baseVisualMap = [];
+  const visualType = getVisualType(iChartOption)
+  const visualUnit = visualMap(visualType)
+  const intervalData = {
+    RectangularHeatMapChart: data,
+    CalendarHeatMapChart: data[2],
+    HexagonHeatMapChart: data[0],
+  };
+  const intervalArr = intervalData[type].map(item => {
+    return item[2];
+  });
+  const minValue = min(intervalArr);
+  const maxValue = max(intervalArr);
+  visualUnit.min = minValue;
+  visualUnit.max = maxValue;
+  visualUnit.dimension = 2
+  if (type === CHARTTYPE[0]) {
+    visualUnit.inRange = {
+      colorAlpha: [0, 1]
+    }
+  }
+  if (type === CHARTTYPE[1]) {
+    // 设置视觉滑块控制手柄  设置VisualMap控制的热力变化属性
+    handleCalendar(iChartOption, visualUnit, maxValue, minValue,visualType);
+  }
+  if (type === CHARTTYPE[2]) {
+    visualUnit.inRange = {
+      color: iChartOption.color
+    }
+  }
+  if (iChartOption.visualMap) {
+    merge(visualUnit, iChartOption.visualMap)
+  }
+  baseVisualMap.push(visualUnit);
+
+  baseOpt.visualMap = baseVisualMap;
+}

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

@@ -0,0 +1,70 @@
+/**
+ * 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 { getData } from './handleData';
+import { handleSeries } from './handleSeries';
+import { setVisualMap } from './handleVisualMap';
+import { setHeatMapDeaultIchartOption, initRectSys } from './handleOptipn';
+import init from '../../option/init';
+import { CHART_TYPE } from '../../util/constants';
+import { mergeSeries } from '../../util/merge';
+
+class HeatMapChart {
+
+  static name = CHART_TYPE.HEAT_MAP
+
+  constructor(iChartOption, chartInstance) {
+    this.baseOption = {};
+    this.iChartOption = {};
+    this.initIchartOption = cloneDeep(iChartOption);
+    setHeatMapDeaultIchartOption(iChartOption);
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    // 根据 iChartOption 组装 baseOption
+    this.updateOption();
+  }
+
+  updateOption() {
+    const iChartOption = this.iChartOption;
+    const { type } = iChartOption;
+    if (!type) {
+      throw new Error('HeatMapChart must have a name');
+    }
+    // 图表数据
+    const data = getData(type, iChartOption, this.chartInstance);
+    if (!data) return;
+    initRectSys(this.baseOption, iChartOption, type, data)
+    // 图表的series
+    handleSeries(this.baseOption, iChartOption, data, type);
+    // 图表VisualMap
+    setVisualMap(this.baseOption, type, data, iChartOption);
+    mergeSeries(iChartOption, this.baseOption)
+  }
+
+  // 页面需要重新resize
+  resize() {
+    // 仅针对蜂窝热力图需要在resize的时候去重新render图表
+    if (this.iChartOption.type === 'HexagonHeatMapChart') {
+      this.updateOption(this.iChartOption, this.chartInstance);
+      this.chartInstance?.setOption(this.baseOption);
+    }
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption() { }
+}
+
+export default HeatMapChart;

package/src/components/charts/components/HillChart/baseOption.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 chartToken from './chartToken';
+
+export default function getBaseOption() {
+  return {
+    xAxis: {},
+    yAxis: {},
+    title: {},
+    series: [
+      {
+        name: 'hill',
+        type: 'pictorialBar',
+        // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+        // symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+        symbol:
+          'path://M182.486185,115.849707 L137.966122,115.850379 C149.51482,98.3379479 157.744413,74.0044901 160.078145,45.9496406 C162.570754,73.8914827 170.909366,98.2800834 182.486185,115.849707 Z',
+        markLine: {
+          symbol: 'none',
+          silent: true,
+          label: {
+            show: false,
+          },
+          lineStyle: {
+            width: 1,
+            color: chartToken.colorError,
+          },
+          emphasis: {
+            label: {
+              show: false,
+            },
+            lineStyle: {
+              width: 1,
+            },
+          },
+          data: [],
+        },
+      },
+    ],
+  };
+}

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