@cloudbase/weda-ui 2.0.28 → 3.1.0

package/src/web/components/chart/common/core/eChartPie.js

@@ -1,173 +0,0 @@
-import EchartBase from './eChartBase';
-import getConfig from '../config/pie';
-/**
- * 饼状图表
- * @author loonglong
- **/
-class EchartPie extends EchartBase {
-  constructor() {
-    super();
-    const config = getConfig();
-    this.config = { ...this.config, ...config };
-  }
-  async setSourceData({
-    dataSource,
-    filterData,
-    setColor,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-  }) {
-    const { name = '', type = '', methodName = '' } = dataSource;
-    if (name !== '') {
-      const params = this.createWhere({
-        filterData,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-      });
-      const arrSourData = await this.getSourceData(
-        name,
-        methodName,
-        type,
-        params
-      );
-      // 获取 x 轴数据
-      if (arrSourData.length >= 0) {
-        const numPie = arrSourData[0].YLabels.length;
-        if (numPie > 0) {
-          const arrData = [];
-          let i = 0;
-          arrSourData.forEach((itemSource) => {
-            const numc = setColor ? setColor.length : 0;
-            const strColor = numc > 0 ? { color: setColor[i % numc] } : {};
-            arrData.push({
-              value: itemSource.YLabels[0].Value,
-              name: itemSource.XLabel.Value,
-              tooltip: {},
-              itemStyle: strColor,
-            });
-            i = i + 1;
-          });
-          this.config.series[0].data = arrData;
-        }
-      } else {
-        // this.config['series'][0].data = [];
-      }
-    }
-  }
-  setChartType({ chartType }) {
-    this.config.series.length > 0 &&
-      this.config.series.forEach((itemSeries) => {
-        if (chartType === 'pie') {
-          itemSeries.radius = '70%';
-        } else {
-          // @ts-ignore
-          itemSeries.radius = ['40%', '70%'];
-        }
-      });
-  }
-
-  // 显示图表上的数据标签 单位，标签，小数位数，后缀
-  setIsSeriesShowSymbol({
-    isSeriesShowSymbol,
-    isPercent,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  }) {
-    decimalDigits = decimalDigits < 0 ? 0 : decimalDigits;
-    let show = false;
-    let position = 'inner';
-    let formatter = null;
-
-    if (isSeriesShowSymbol || isPercent || isUnit) {
-      formatter = '';
-    }
-    this.config.series[0].label.show = show;
-    this.config.series[0].label.position = position;
-    if (formatter === null) {
-      this.config.series[0].label.normal = null;
-    } else {
-      this.config.series[0].label.normal.formatter = (objValue) => {
-        let reData = '';
-        if (isSeriesShowSymbol) {
-          // 显示数值
-          reData = objValue.value;
-        }
-        if (isUnit) {
-          // 显示单位
-          if (unit) {
-            const objNewValue = this.getValueByUnit(objValue.value, unit);
-            reData = `${objNewValue.toFixed(decimalDigits)}${suffix}`;
-          } else {
-            reData = `${objValue.value.toFixed(decimalDigits)}`;
-          }
-          this.config.series[0].data.forEach((itemData) => {
-            itemData.tooltip.formatter = (objVal) => {
-              const objItemData = this.getValueByUnit(objVal.value, unit);
-              return `${objItemData.toFixed(decimalDigits)}${suffix}`;
-            };
-          });
-        }
-        if (isPercent) {
-          // 显示百分比
-          reData = `${reData}(${objValue.percent}%)`;
-        }
-        return reData;
-      };
-    }
-  }
-  async setOptions({
-    chartType,
-    isTitle,
-    title,
-    titleLocation,
-    dataSource,
-    filterData,
-    setColor,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    isLegend,
-    legend,
-    legend2,
-    isSeriesShowSymbol,
-    isPercent,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  }) {
-    legend = document.body.clientWidth < 1024 ? legend : legend2;
-    if (dataSource) {
-      await this.setSourceData({
-        dataSource,
-        filterData,
-        setColor,
-        xField,
-        xStatistics,
-        xIsCountEmpty,
-        yField,
-      });
-    }
-
-    this.setChartType({ chartType });
-    this.setTitle({ isTitle, title, titleLocation });
-    this.setLegend({ isLegend, legend });
-    this.setIsSeriesShowSymbol({
-      isSeriesShowSymbol,
-      isPercent,
-      isUnit,
-      unit,
-      decimalDigits,
-      suffix,
-    });
-  }
-}
-
-export default EchartPie;

package/src/web/components/chart/common/core/type.ts

@@ -1,34 +0,0 @@
-export interface DataSource {
-  name: string; // 数据源名
-  type: string; // 数据源类型
-  subType: string; // 数据源子类型
-  provider?: string; // 内置连接器类型
-  methodName: string; // 数据源方法名
-}
-export interface ObjSource {
-  dataSourceName: string; // 数据源名
-  dataSourceType: string; // 数据源类型
-  dataSourceMethodName: string; // 数据源方法名
-}
-export interface Xfield {
-  format: string;
-  type: string;
-  title: string;
-  name: string;
-}
-enum CountType {
-  'count',
-  'sum',
-  'avg',
-  'max',
-  'min',
-}
-export interface YfieldOne {
-  key: string;
-  operationType: CountType;
-  title?: string;
-}
-export interface Yfield {
-  groupKey?: string;
-  numValue?: Array<YfieldOne>;
-}

package/src/web/components/chart/common/echart.css

@@ -1,106 +0,0 @@
-.weda-ui-echart .set_bottom {
-  padding: 4px 0;
-  background: #fff;
-  margin: 0;
-}
-.weda-ui-echart .pc_set_title {
-  height: 48px;
-  line-height: 48px;
-  font-size: 16px;
-  padding-left: 24px;
-}
-.weda-ui-echart .mobile_set_title {
-  height: 24px;
-  line-height: 24px;
-  font-size: 12px;
-  padding-left: 12px;
-}
-.weda-ui-echart .echart-light-box {
-  position: relative;
-  background-color: #f4f5f6;
-}
-.weda-ui-echart .echart-light-body {
-  background-color: #ffffff;
-}
-.weda-ui-echart .echart-dark-box {
-  position: relative;
-  background-color: #4b5d6c;
-}
-.weda-ui-echart .echart-dark-body {
-  background-color: #1d1f24;
-  margin: 6px;
-}
-.weda-ui-echart .btn-grounp {
-  position: absolute;
-  top: 60px;
-  left: 58px;
-  z-index: 999;
-  background: transparent;
-}
-.weda-ui-echart button {
-  text-transform: none;
-}
-.weda-ui-echart .ant-btn,
-.weda-ui-echart .ant-btn:active,
-.weda-ui-echart .ant-btn:focus {
-  outline: 0;
-}
-.weda-ui-echart .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 12px;
-  line-height: 1.499;
-  display: inline-block;
-  font-weight: 400;
-  text-align: center;
-  touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 0 23px;
-  font-size: 14px;
-  border-radius: 4px;
-  height: 36px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  position: relative;
-  color: #4b5d6c;
-  background-color: #fff;
-  border-color: #ccd2d8;
-}
-.weda-ui-echart .button,
-.weda-ui-echart html [type='button'],
-.weda-ui-echart [type='reset'],
-.weda-ui-echart [type='submit'] {
-  -webkit-appearance: button;
-}
-.weda-ui-echart .ant-btn-primary {
-  color: #fff;
-  background-color: #4a62e7;
-  border-color: #4a62e7;
-}
-.weda-ui-echart .ant-btn:not([disabled]):hover {
-  text-decoration: none;
-}
-.weda-ui-echart .ant-btn:hover,
-.weda-ui-echart .ant-btn:focus,
-.weda-ui-echart .ant-btn:active,
-.weda-ui-echart .ant-btn.active {
-  background: #fff;
-  text-decoration: none;
-}
-.weda-ui-echart .ant-btn:hover,
-.weda-ui-echart .ant-btn:focus {
-  color: #4a62e7;
-  background-color: #fff;
-  border-color: #4a62e7;
-}
-.weda-ui-echart .ant-btn-primary:hover,
-.weda-ui-echart .ant-btn-primary:focus {
-  color: #fff;
-  background-color: #5f78ff;
-  border-color: #5f78ff;
-}

package/src/web/components/chart/common/echarts.ts

@@ -1,31 +0,0 @@
-// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
-import * as echarts from 'echarts/core';
-// 引入图表，图表后缀都为 Chart
-import { BarChart, LineChart, PieChart } from 'echarts/charts';
-//组件，组件后缀都为 Component
-import {
-  TitleComponent,
-  TooltipComponent,
-  LegendComponent,
-  GridComponent,
-} from 'echarts/components';
-// 标签自动布局，全局过渡动画等特性
-import { LabelLayout, UniversalTransition } from 'echarts/features';
-// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
-import { CanvasRenderer } from 'echarts/renderers';
-
-// 注册必须的组件
-echarts.use([
-  TitleComponent,
-  TooltipComponent,
-  GridComponent,
-  LegendComponent,
-  LabelLayout,
-  UniversalTransition,
-  CanvasRenderer,
-  BarChart,
-  LineChart,
-  PieChart,
-]);
-
-export { echarts };

package/src/web/components/chart/common/useChart.tsx

@@ -1,87 +0,0 @@
-import {
-  useAsync,
-  useDeepCompareEffect,
-  useEventListener,
-  useIsMounted,
-  useMountEffect,
-} from '@react-hookz/web';
-import {
-  MutableRefObject,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { IEchartModalBase } from './core/eChartBase';
-import { echarts } from './echarts';
-
-export function useChart(
-  ref: RefObject<HTMLElement> | MutableRefObject<HTMLElement>
-) {
-  const chartRef = useRef<echarts.ECharts>();
-  const isMounted = useIsMounted();
-  useMountEffect(() => {
-    if (!ref.current || !isMounted) {
-      return;
-    }
-
-    const echartDom = ref.current;
-    const chart = echarts.init(echartDom);
-    chartRef.current = chart;
-    return () => {
-      chart.dispose();
-      chartRef.current = null;
-    };
-  });
-
-  useEventListener(window, 'resize', () => {
-    chartRef.current && chartRef.current.resize();
-  });
-
-  return chartRef.current;
-}
-
-/**
- * @deprecated The method should not be used
- */
-export function useWedaChart(
-  domRef,
-  ModalClass: IEchartModalBase,
-  options: echarts.EChartsCoreOption
-) {
-  const chart = useChart(domRef);
-  const getOptions = async () => {
-    const chartModal = new ModalClass();
-    let finalOptions: any = await chartModal.setOptions(options);
-    if (!finalOptions) {
-      finalOptions = chartModal.getOptions() as any;
-    }
-    return finalOptions;
-  };
-  const [state, actions] = useAsync(getOptions);
-
-  useMountEffect(() => {
-    actions.execute();
-  });
-  useDeepCompareEffect(() => {
-    actions.execute();
-  }, [
-    // options 变化，包含所有配置项，包括纯前端的配置项变化都会触发setOptions里发请求，但改不动了
-    options,
-    actions,
-  ]);
-  useEffect(() => {
-    if (state.status === 'success' && chart) {
-      console.log(ModalClass.name, options, state.result, window.location.href);
-      chart.setOption(
-        state.result,
-        true // noMerge 全刷
-      );
-    } else {
-      if (state.status === 'error') {
-        console.error(state.error);
-      }
-    }
-  }, [state]);
-}

package/src/web/components/chart/line/index.tsx

@@ -1,136 +0,0 @@
-import React, { useRef } from 'react';
-import { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-import EChartLine from '../common/core/eChartLine';
-import classNames from '../../../utils/classnames';
-import { useWedaChart } from '../common/useChart';
-interface PropsType extends CommonPropsType {
-  chartType?: string;
-  isTitle?: boolean;
-  title?: string;
-  titleLocation?: string;
-  dataSource?: DataSource;
-  filterData?: string;
-  xField?: Xfield;
-  groupKey?: Xfield;
-  groupKeyTimeSpan?: string;
-  xStatistics?: string;
-  xIsCountEmpty?: boolean;
-  yField?: Yfield;
-  isLegend?: boolean;
-  legend?: string;
-  legend2?: string;
-  isXaxisName?: boolean;
-  xAxisName?: string;
-  isXaxisAxisLabelShow?: boolean;
-  isXaxisAxisTickShow?: boolean;
-  isXaxisAxisLabelRotate?: boolean;
-  isYAxisSplitlineLinestyleWidth?: boolean;
-  yAxisSplitlineLinestyleType?: string;
-  yAxisMax?: number;
-  yAxisMin?: number;
-  isYAxisName?: boolean;
-  yAxisName?: string;
-  isSeriesShowSymbol?: boolean;
-  isYAxisShow?: boolean;
-  isUnit?: boolean;
-  unit?: string;
-  decimalDigits?: number;
-  suffix?: string;
-}
-export default function Line(opts: PropsType) {
-  const {
-    id,
-    style,
-    events,
-    className,
-    children,
-    chartType,
-    isTitle,
-    title,
-    titleLocation,
-    dataSource,
-    filterData,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    groupKey,
-    groupKeyTimeSpan,
-    isLegend,
-    legend,
-    legend2,
-    isXaxisName,
-    xAxisName,
-    isXaxisAxisLabelShow,
-    isXaxisAxisTickShow,
-    isXaxisAxisLabelRotate,
-    isYAxisSplitlineLinestyleWidth,
-    yAxisSplitlineLinestyleType,
-    yAxisMax,
-    yAxisMin,
-    isYAxisName,
-    yAxisName,
-    isSeriesShowSymbol,
-    isYAxisShow,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  } = opts;
-  const domRef = useRef<HTMLDivElement>();
-  useWedaChart(domRef, EChartLine, {
-    chartType,
-    isTitle,
-    title,
-    titleLocation,
-    dataSource,
-    filterData,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    groupKey,
-    groupKeyTimeSpan,
-    isLegend,
-    legend,
-    legend2,
-    isXaxisName,
-    xAxisName,
-    isXaxisAxisLabelShow,
-    isXaxisAxisTickShow,
-    isXaxisAxisLabelRotate,
-    isYAxisSplitlineLinestyleWidth,
-    yAxisSplitlineLinestyleType,
-    yAxisMax,
-    yAxisMin,
-    isYAxisName,
-    yAxisName,
-    isSeriesShowSymbol,
-    isYAxisShow,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  });
-
-  const inlineStyle = {
-    height: '380px',
-    width: '100%',
-    backgroundColor: '#ffffff',
-    ...style,
-  };
-  return (
-    <div
-      id={id}
-      ref={domRef}
-      data-testid="line"
-      style={inlineStyle}
-      className={classNames({
-        'echart-wrapper-canvas': true,
-        'echart-dark-body': true,
-        [className]: className,
-      })}
-    />
-  );
-}

package/src/web/components/chart/pie/index.tsx

@@ -1,99 +0,0 @@
-import React, { useRef } from 'react';
-import { CommonPropsType } from '../../../types';
-import { DataSource, Xfield, Yfield } from '../common/core/type';
-import EchartPie from '../common/core/eChartPie';
-import { useWedaChart } from '../common/useChart';
-import classNames from '../../../utils/classnames';
-
-interface PropsType extends CommonPropsType {
-  chartType?: string;
-  isTitle?: boolean;
-  title?: string;
-  titleLocation?: string;
-  dataSource?: DataSource;
-  filterData?: string;
-  setColor?: Array<string>;
-  xField?: Xfield;
-  xStatistics?: string;
-  xIsCountEmpty?: boolean;
-  yField?: Yfield;
-  isLegend?: boolean;
-  legend?: string;
-  legend2?: string;
-  isSeriesShowSymbol?: boolean;
-  isPercent?: boolean;
-  isUnit?: boolean;
-  unit?: string;
-  decimalDigits?: number;
-  suffix?: string;
-}
-export default function Line({
-  id,
-  style,
-  events,
-  className,
-  children,
-  chartType,
-  isTitle,
-  title,
-  titleLocation,
-  dataSource,
-  filterData,
-  setColor,
-  xField,
-  xStatistics,
-  xIsCountEmpty,
-  yField,
-  isLegend,
-  legend,
-  legend2,
-  isSeriesShowSymbol,
-  isPercent,
-  isUnit,
-  unit,
-  decimalDigits,
-  suffix,
-}: PropsType) {
-  const domRef = useRef<HTMLDivElement>();
-  useWedaChart(domRef, EchartPie, {
-    chartType,
-    isTitle,
-    title,
-    titleLocation,
-    dataSource,
-    filterData,
-    setColor,
-    xField,
-    xStatistics,
-    xIsCountEmpty,
-    yField,
-    isLegend,
-    legend,
-    legend2,
-    isSeriesShowSymbol,
-    isPercent,
-    isUnit,
-    unit,
-    decimalDigits,
-    suffix,
-  });
-  const inlineStyle = {
-    height: '380px',
-    width: '100%',
-    backgroundColor: '#ffffff',
-    ...style,
-  };
-  return (
-    <div
-      id={id}
-      data-testid="pie"
-      ref={domRef}
-      style={inlineStyle}
-      className={classNames({
-        'echart-wrapper-canvas': true,
-        'echart-dark-body': true,
-        [className]: className,
-      })}
-    />
-  );
-}