@ebiz/designer-components 0.0.47 → 0.0.49

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

@@ -1,170 +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 merge from '../../util/merge';
-import cloneDeep from '../../util/cloneDeep';
-import chartToken from './chartToken';
-import Token from '../../feature/token';
-
-export const seriesInit = {
-  type: 'liquidFill',
-  center: ['50%', '50%'],
-  waveAnimation: true,
-  color: '',
-  backgroundStyle: {
-    color: '',
-  },
-  outline: {
-    itemStyle: {
-      borderColor: '',
-      shadowBlur: 0,
-    },
-  },
-  itemStyle: {
-    opacity: 1,
-    shadowBlur: 5,
-    shadowColor: 'rgba(0, 0, 0, 0.4)',
-  },
-  label: {},
-  data: [],
-};
-
-// 设置Label的属性
-function setLabel(seriesTarget, seriesSource, label) {
-  const { labelColor } = chartToken;
-  // 多个数据：series里面label存在
-  // 单个数据：没有series时一级属性label存在
-  if (seriesSource.label !== undefined) {
-    seriesTarget.label.color = labelColor;
-    seriesTarget.label.position = 'inside';
-    seriesTarget.label.show = true;
-    merge(seriesTarget.label, seriesSource.label);
-  }
-  // 多个/单个数据：series里面label不存在但一级属性label存在
-  else if (seriesSource.label === undefined && label) {
-    seriesTarget.label.color = labelColor;
-    seriesTarget.label.position = 'inside';
-    seriesTarget.label.show = true;
-    merge(seriesTarget.label, label);
-  }
-  // 多个/单个数据：series和一级属性都不存在label，设置初始值
-  else {
-    seriesTarget.label.color = labelColor;
-    seriesTarget.label.position = 'inside';
-    seriesTarget.label.show = true;
-  }
-}
-
-// 设置Outline的属性
-function setOutline(seriesTarget, seriesSource, outline) {
-  const { colorGroup } = Token.config;
-  const itemStyle = seriesTarget.outline.itemStyle;
-  // 多个数据：series里面outline存在
-  // 单个数据：没有series时一级属性outline存在
-  if (seriesSource.outline !== undefined) {
-    itemStyle.borderColor = colorGroup[0];
-    merge(seriesTarget.outline, seriesSource.outline);
-  }
-  // 多个/单个数据：series里面outline不存在但一级属性outline存在
-  else if (seriesSource.outline === undefined && outline) {
-    itemStyle.borderColor = colorGroup[0];
-    merge(seriesTarget.outline, outline);
-  }
-  // 多个/单个数据：series和一级属性都不存在outline，设置初始值
-  else {
-    itemStyle.borderColor = colorGroup[0];
-  }
-}
-
-// 设置Color的属性
-function setColor(seriesTarget, seriesSource, color) {
-  const { colorGroup } = Token.config;
-  // 多个数据：series里面color存在
-  // 单个数据：没有series时一级属性存在color
-  if (seriesSource.color !== undefined) {
-    seriesTarget.color = [...colorGroup];
-    merge(seriesTarget.color, seriesSource.color);
-  }
-  // 多个/单个数据：series里面color不存在但一级属性color存在
-  else if (seriesSource.color === undefined && color) {
-    seriesTarget.color = [...colorGroup];
-    merge(seriesTarget.color, color);
-  }
-  // 多个/单个数据：series和一级属性都不存在color，设置初始值
-  else {
-    seriesTarget.color = [...colorGroup];
-  }
-}
-
-// 设置BackgroundStyle的属性
-function setBackgroundStyle(seriesTarget, seriesSource, backgroundStyle) {
-  const { backgroundColor } = chartToken;
-  // 多个数据：series里面backgroundStyle存在
-  // 单个数据：没有series时一级属性backgroundStyle存在
-  if (seriesSource.backgroundStyle !== undefined) {
-    seriesTarget.backgroundStyle.color = backgroundColor;
-    merge(seriesTarget.backgroundStyle, seriesSource.backgroundStyle);
-  }
-  // 多个/单个数据：series里面backgroundStyle不存在但一级属性backgroundStyle存在
-  else if (seriesSource.backgroundStyle === undefined && backgroundStyle) {
-    seriesTarget.backgroundStyle.color = backgroundColor;
-    merge(seriesTarget.backgroundStyle, backgroundStyle);
-  }
-  // 多个/单个数据：series和一级属性都不存在backgroundStyle，设置初始值
-  else {
-    seriesTarget.backgroundStyle.color = backgroundColor;
-  }
-}
-
-/**
- * 组装echarts所需要的series
- * @param {传入数据} iChartOption
- * @returns
- */
-export function setSeries(iChartOption) {
-  const { data, shape, color, name, label, outline, backgroundStyle, waveAnimation, radius, center } = iChartOption;
-  const series = [];
-  const selfSeries = iChartOption.series;
-  if (selfSeries !== undefined && selfSeries.length != 0) {
-    selfSeries.forEach(item => {
-      const seriesUnit = cloneDeep(seriesInit);
-      item.data && (seriesUnit.data = item.data);
-      item.center && (seriesUnit.center = item.center);
-      item.radius && (seriesUnit.radius = item.radius);
-      item.shape && (seriesUnit.shape = item.shape);
-      item.waveAnimation !== undefined && (seriesUnit.waveAnimation = item.waveAnimation);
-      setColor(seriesUnit, item, color);
-      setBackgroundStyle(seriesUnit, item, backgroundStyle);
-      setOutline(seriesUnit, item, outline);
-      setLabel(seriesUnit, item, label);
-      merge(seriesUnit, item);
-      series.push(seriesUnit);
-    });
-  } else {
-    const seriesUnit = cloneDeep(seriesInit);
-    data && (seriesUnit.data = data);
-    name && (seriesUnit.name = name);
-    center && (seriesUnit.center = center);
-    radius && (seriesUnit.radius = radius);
-    shape && (seriesUnit.shape = shape);
-    waveAnimation !== undefined && (seriesUnit.waveAnimation = waveAnimation); 
-    // 配置color
-    setColor(seriesUnit, iChartOption);
-    // 配置backgroundStyle
-    setBackgroundStyle(seriesUnit, iChartOption);
-    // 配置outlineColor
-    setOutline(seriesUnit, iChartOption);
-    // 配置label
-    setLabel(seriesUnit, iChartOption);
-    series.push(seriesUnit);
-  }
-  return series;
-}

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

@@ -1,43 +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 init from '../../option/init';
-import { setSeries } from './handleSeries.js';
-import PolarCoordSys from '../../option/PolarSys';
-import { CHART_TYPE } from '../../util/constants';
-import './plugSeries.js';
-import './plugView.js';
-
-export default class LiquidfillChart {
-
-  static name = CHART_TYPE.LIQUID_FILL
-
-  constructor(iChartOption, liquidChartInstance) {
-    this.baseOption = {};
-    this.iChartOption = {};
-    // 组装 iChartOption, 补全默认值
-    this.iChartOption = init(iChartOption);
-    // 根据 iChartOption 组装 baseOption
-    this.updateOption(liquidChartInstance);
-  }
-
-  updateOption(chartInstance) {
-    const iChartOption = this.iChartOption;
-    // 装载除series之外的其他配置
-    PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.LIQUID_FILL);
-    // 组装series 
-    this.baseOption.series = setSeries(iChartOption);
-  }
-
-  getOption() {
-    return this.baseOption;
-  }
-}

package/src/components/charts/components/LiquidfillChart/plugSeries.js

@@ -1,78 +0,0 @@
-import * as echarts from 'echarts';
-
-echarts.extendSeriesModel({
-
-    type: 'series.liquidFill',
-
-    optionUpdated: function () {
-        var option = this.option;
-        option.gridSize = Math.max(Math.floor(option.gridSize), 4);
-    },
-
-    getInitialData: function (option, ecModel) {
-        var dimensions = echarts.helper.createDimensions(option.data, {
-            coordDimensions: ['value']
-        });
-        var list = new echarts.List(dimensions, this);
-        list.initData(option.data);
-        return list;
-    },
-
-    defaultOption: {
-        color: ['#294D99', '#156ACF', '#1598ED', '#45BDFF'],
-        center: ['50%', '50%'],
-        radius: '50%',
-        amplitude: '8%',
-        waveLength: '80%',
-        phase: 'auto',
-        period: 'auto',
-        direction: 'right',
-        shape: 'circle',
-
-        waveAnimation: true,
-        animationEasing: 'linear',
-        animationEasingUpdate: 'linear',
-        animationDuration: 2000,
-        animationDurationUpdate: 1000,
-
-        outline: {
-            show: true,
-            borderDistance: 8,
-            itemStyle: {
-                color: 'none',
-                borderColor: '#294D99',
-                borderWidth: 8,
-                shadowBlur: 20,
-                shadowColor: 'rgba(0, 0, 0, 0.25)'
-            }
-        },
-
-        backgroundStyle: {
-            color: '#E3F7FF'
-        },
-
-        itemStyle: {
-            opacity: 0.95,
-            shadowBlur: 50,
-            shadowColor: 'rgba(0, 0, 0, 0.4)'
-        },
-
-        label: {
-            show: true,
-            color: '#294D99',
-            insideColor: '#fff',
-            fontSize: 50,
-            fontWeight: 'bold',
-
-            align: 'center',
-            baseline: 'middle',
-            position: 'inside'
-        },
-
-        emphasis: {
-            itemStyle: {
-                opacity: 0.8
-            }
-        }
-    }
-});

package/src/components/charts/components/LiquidfillChart/plugShape.js

@@ -1,163 +0,0 @@
-import * as echarts from 'echarts';
-
-export default echarts.graphic.extendShape({
-    type: 'ec-liquid-fill',
-
-    shape: {
-        waveLength: 0,
-        radius: 0,
-        radiusY: 0,
-        cx: 0,
-        cy: 0,
-        waterLevel: 0,
-        amplitude: 0,
-        phase: 0,
-        inverse: false
-    },
-
-    buildPath: function (ctx, shape) {
-        if (shape.radiusY == null) {
-            shape.radiusY = shape.radius;
-        }
-
-        /**
-         * We define a sine wave having 4 waves, and make sure at least 8 curves
-         * is drawn. Otherwise, it may cause blank area for some waves when
-         * wave length is large enough.
-         */
-        var curves = Math.max(
-            Math.ceil(2 * shape.radius / shape.waveLength * 4) * 2,
-            8
-        );
-
-        // map phase to [-Math.PI * 2, 0]
-        while (shape.phase < -Math.PI * 2) {
-            shape.phase += Math.PI * 2;
-        }
-        while (shape.phase > 0) {
-            shape.phase -= Math.PI * 2;
-        }
-        var phase = shape.phase / Math.PI / 2 * shape.waveLength;
-
-        var left = shape.cx - shape.radius + phase - shape.radius * 2;
-
-        /**
-         * top-left corner as start point
-         *
-         * draws this point
-         *  |
-         * \|/
-         *  ~~~~~~~~
-         *  |      |
-         *  +------+
-         */
-        ctx.moveTo(left, shape.waterLevel);
-
-        /**
-         * top wave
-         *
-         * ~~~~~~~~ <- draws this sine wave
-         * |      |
-         * +------+
-         */
-        var waveRight = 0;
-        for (var c = 0; c < curves; ++c) {
-            var stage = c % 4;
-            var pos = getWaterPositions(c * shape.waveLength / 4, stage,
-                shape.waveLength, shape.amplitude);
-            ctx.bezierCurveTo(pos[0][0] + left, -pos[0][1] + shape.waterLevel,
-                pos[1][0] + left, -pos[1][1] + shape.waterLevel,
-                pos[2][0] + left, -pos[2][1] + shape.waterLevel);
-
-            if (c === curves - 1) {
-                waveRight = pos[2][0];
-            }
-        }
-
-        if (shape.inverse) {
-            /**
-             * top-right corner
-             *                  2. draws this line
-             *                          |
-             *                       +------+
-             * 3. draws this line -> |      | <- 1. draws this line
-             *                       ~~~~~~~~
-             */
-            ctx.lineTo(waveRight + left, shape.cy - shape.radiusY);
-            ctx.lineTo(left, shape.cy - shape.radiusY);
-            ctx.lineTo(left, shape.waterLevel);
-        }
-        else {
-            /**
-             * top-right corner
-             *
-             *                       ~~~~~~~~
-             * 3. draws this line -> |      | <- 1. draws this line
-             *                       +------+
-             *                          ^
-             *                          |
-             *                  2. draws this line
-             */
-            ctx.lineTo(waveRight + left, shape.cy + shape.radiusY);
-            ctx.lineTo(left, shape.cy + shape.radiusY);
-            ctx.lineTo(left, shape.waterLevel);
-        }
-
-        ctx.closePath();
-    }
-});
-
-
-
-/**
- * Using Bezier curves to fit sine wave.
- * There is 4 control points for each curve of wave,
- * which is at 1/4 wave length of the sine wave.
- *
- * The control points for a wave from (a) to (d) are a-b-c-d:
- *          c *----* d
- *     b *
- *       |
- * ... a * ..................
- *
- * whose positions are a: (0, 0), b: (0.5, 0.5), c: (1, 1), d: (PI / 2, 1)
- *
- * @param {number} x          x position of the left-most point (a)
- * @param {number} stage      0-3, stating which part of the wave it is
- * @param {number} waveLength wave length of the sine wave
- * @param {number} amplitude  wave amplitude
- */
-function getWaterPositions(x, stage, waveLength, amplitude) {
-    if (stage === 0) {
-        return [
-            [x + 1 / 2 * waveLength / Math.PI / 2, amplitude / 2],
-            [x + 1 / 2 * waveLength / Math.PI,     amplitude],
-            [x + waveLength / 4,                   amplitude]
-        ];
-    }
-    else if (stage === 1) {
-        return [
-            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
-            amplitude],
-            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
-            amplitude / 2],
-            [x + waveLength / 4,                   0]
-        ]
-    }
-    else if (stage === 2) {
-        return [
-            [x + 1 / 2 * waveLength / Math.PI / 2, -amplitude / 2],
-            [x + 1 / 2 * waveLength / Math.PI,     -amplitude],
-            [x + waveLength / 4,                   -amplitude]
-        ]
-    }
-    else {
-        return [
-            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 2),
-            -amplitude],
-            [x + 1 / 2 * waveLength / Math.PI / 2 * (Math.PI - 1),
-            -amplitude / 2],
-            [x + waveLength / 4,                   0]
-        ]
-    }
-}