@ebiz/designer-components 0.0.48 → 0.0.50

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

@@ -1,227 +0,0 @@
-/**
- * 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

@@ -1,82 +0,0 @@
-/**
- * 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

@@ -1,91 +0,0 @@
-/**
- * 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

@@ -1,70 +0,0 @@
-/**
- * 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

@@ -1,50 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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;