@cloudbase/weda-ui 0.2.16 → 0.2.17

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

@@ -0,0 +1,170 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,106 @@
+.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

@@ -0,0 +1,33 @@
+// 引入 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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,135 @@
+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({
+  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,
+}: PropsType) {
+  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

@@ -0,0 +1,99 @@
+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,
+      })}
+    />
+  );
+}

package/src/web/components/form/location/components/LocationH5/location.h5.jsx

@@ -77,7 +77,7 @@ export default function LocationH5(props) {
         value: {
           address: poiname,
           geopoint: {
-            coordinates: [lat, lng],
+            coordinates: [lng, lat],
             type: 'Point',
           },
         },
@@ -176,7 +176,7 @@ export default function LocationH5(props) {
                   value: {
                     address: city + addr,
                     geopoint: {
-                      coordinates: [lat, lng],
+                      coordinates: [lng, lat],
                       type: 'Point',
                     },
                   },
@@ -283,7 +283,7 @@ export default function LocationH5(props) {
       value: {
         address: poiname,
         geopoint: {
-          coordinates: [latlng.lat, latlng.lng],
+          coordinates: [latlng.lng, latlng.lat],
           type: 'Point',
         },
       },

package/src/web/components/form/location/components/LocationPC/location.PC.jsx

@@ -58,7 +58,7 @@ export default function LocationPC(props) {
     let res = {
       address: poiname,
       geopoint: {
-        coordinates: [latitude, longitude],
+        coordinates: [longitude, latitude],
         type: 'Point',
       },
     };
@@ -124,7 +124,7 @@ export default function LocationPC(props) {
         value: {
           address: poiname,
           geopoint: {
-            coordinates: [latlng.lat, latlng.lng],
+            coordinates: [latlng.lng, latlng.lat],
             type: 'Point',
           },
         },