@cloudbase/weda-ui 0.2.15 → 1.0.21

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

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

@@ -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/chart/statisticsCard/index.css

@@ -0,0 +1,62 @@
+/* pc style */
+.weda-statistics-card {
+  background: #ffffff;
+  border: 1px solid #f1f2f5;
+  box-sizing: border-box;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+.weda-statistics-card.weda-statistics-card-pc {
+  width: 276px;
+  min-height: 128px;
+}
+
+.weda-statistics-card .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 28px 24px;
+}
+
+.weda-statistics-card .weda-statistics-card__title {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.weda-statistics-card .weda-statistics-card__detail {
+  margin-top: 8px;
+}
+
+.weda-statistics-card .weda-statistics-card__count {
+  font-size: 32px;
+  line-height: 44px;
+  color: rgba(0, 0, 0, 0.9);
+  word-break: break-all;
+}
+
+.weda-statistics-card .weda-statistics-card__unit {
+  font-size: 14px;
+  line-height: 22px;
+  color: rgba(0, 0, 0, 0.4);
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+/* h5 style */
+.weda-statistics-card.weda-statistics-card-mobile {
+  max-width: 100%;
+  min-height: 140px;
+}
+.weda-statistics-card-mobile .weda-statistics-card__wrapper {
+  width: 100%;
+  padding: 40px 24px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__detail {
+  margin-top: 4px;
+}
+
+.weda-statistics-card-mobile .weda-statistics-card__count {
+  font-size: 28px;
+  line-height: 34px;
+}

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

@@ -0,0 +1,307 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { CommonPropsType } from '../../../types';
+import './index.css';
+import classNames from '../../../utils/classnames';
+import { ConfigProvider } from 'tea-component';
+import { usePlatform } from '../../../utils/platform';
+import { IDataSource, IField } from './interface';
+import { useDeepCompareEffect, useIsMounted } from '@react-hookz/web';
+import { callDataSource, callWedaApi } from '../../../utils/tcb';
+
+interface PropsType extends CommonPropsType {
+  /**
+   * 数据源
+   */
+  dataSource?: IDataSource;
+  /**
+   * 数据筛选
+   */
+  filterData?: any;
+  /**
+   * 字段
+   */
+  field?: IField;
+  /**
+   * 统计方式
+   */
+  operationType?: string;
+  /**
+   * 字段展示名称
+   */
+  label?: string;
+  /**
+   * 是否统计空值
+   */
+  isCountEmpty?: boolean;
+  /**
+   * 是否显示单位
+   */
+  isShowUnit?: boolean;
+  /**
+   * 单位
+   */
+  unit?: number;
+  /**
+   * 小数位数
+   */
+  decimalDigits?: number;
+  /**
+   * 后缀
+   */
+  suffix?: number;
+  /**
+   * app.cloud 对象依赖，默认会从 window.app 取值
+   */
+  appCloud?: { callDataSource?: any; callWedaApi?: any };
+  /**
+   * 其他属性
+   */
+  [key: string]: any;
+}
+
+const CLASS_PREFIX = 'weda-statistics-card';
+// 默认显示值
+const defaultVal = 1000;
+
+/**
+ * 修复科学计数法问题
+ * @param num 小数
+ * @returns {string}
+ */
+export function scientificToNumber(num) {
+  const str = num;
+  const reg = /^([-]?\d+\.?\d*)(e)([-|+]?\d+)$/;
+  let zero = '';
+  if (!reg.test(str)) {
+    return num;
+  }
+  const arr = reg.exec(str);
+  const len = Math.abs(+arr[3]) - 1;
+  for (let i = 0; i < len; i += 1) {
+    zero += '0';
+  }
+  if (arr[1].indexOf('-') === 0) {
+    return `-0.${zero}${arr[1].replace('-', '').replace('.', '')}`;
+  }
+  return `0.${zero}${arr[1].replace('.', '')}`;
+}
+
+/**
+ * 补齐小数位数0
+ * @param source          源字符串
+ * @param targetLength    目标长度
+ * @returns {string}
+ */
+export function padEnd(source, targetLength) {
+  targetLength = Math.floor(targetLength); //floor if number or convert non-number to 0;
+  if (source.length > targetLength) {
+    return source;
+  } else {
+    targetLength = targetLength - source.length;
+    return source + '0'.repeat(targetLength);
+  }
+}
+
+/**
+ * 修复toFixed四舍五入不准确问题
+ * @param num
+ * @param digit 小数位数
+ * @returns {string}
+ */
+export function customToFixed(num, digit = 0) {
+  const pow = Math.pow(10, digit);
+  let value = `${num}`;
+  // 如果是小数，四舍五入进行转化处理确保精度正确
+  if (!Number.isInteger(num)) {
+    if (num > 0) {
+      value = (Math.round((num + Number.EPSILON) * pow) / pow).toString();
+    } else if (num < 0) {
+      value = (Math.round((num - Number.EPSILON) * pow) / pow).toString();
+    }
+  }
+  value = scientificToNumber(value);
+  const [integer, decimal = ''] = value.split('.');
+  if (digit > 0) {
+    return `${integer}.${padEnd(decimal, digit)}`;
+  }
+  return integer;
+}
+
+/**
+ * 添加千位分隔符
+ * @param fixedString
+ * @param digit
+ */
+export function addDelimiter(fixedString, digit) {
+  let len = fixedString.length;
+  let result = '';
+  const decimalPoint = digit > 0 ? digit + 1 : 0;
+  for (let i = len - 1; i >= 0; i--) {
+    let stepFromTail = len - 1 - i;
+    let char = fixedString.charAt(i);
+
+    if (stepFromTail <= decimalPoint) {
+      // 小数部分不处理
+      result = char + result;
+    } else {
+      if ((stepFromTail - decimalPoint) % 3 === 0) {
+        if (char !== '-') {
+          result = ',' + result;
+        }
+      }
+      result = char + result;
+    }
+  }
+  return result;
+}
+
+/**
+ * 格式化：添加千分符，四舍五入
+ * @param val
+ * @param digits
+ */
+const formatNumber = (val, digits = 0) => {
+  return isNaN(val) ? val : addDelimiter(customToFixed(val, digits), digits);
+};
+
+export default function StatisticsCard({
+  dataSource,
+  filterData,
+  field,
+  operationType,
+  label,
+  isCountEmpty,
+  isShowUnit,
+  unit,
+  decimalDigits,
+  suffix,
+  className,
+  style,
+  events,
+  id,
+  role,
+  appCloud = { callDataSource, callWedaApi },
+}: PropsType) {
+  const [val, setVal] = useState(defaultVal);
+  const isMounted = useIsMounted();
+
+  async function getSourceData(
+    dataSource,
+    filterData,
+    field,
+    operationType,
+    isCountEmpty
+  ) {
+    const where = filterData?.map
+      ? filterData.map((val) => {
+          let arrLogicData = val.logicData;
+          if (val.logicData && val.logicData.length > 0) {
+            arrLogicData = val.logicData.map((mval) => {
+              return {
+                Key: mval.key,
+                Rel: mval.rel,
+                Value: mval.value,
+                Logic: mval.logic,
+              };
+            });
+          }
+          return {
+            GroupLogic: val.groupLogic,
+            LogicData: arrLogicData,
+          };
+        })
+      : [];
+    const params = {
+      dataSourceName: dataSource?.name,
+      where,
+      value: [
+        {
+          Key: field?.name,
+          OperationType: operationType,
+          IsCountEmpty: isCountEmpty,
+        },
+      ],
+    };
+    try {
+      if (dataSource?.type === 'database') {
+        return await appCloud?.callWedaApi({
+          action: 'DescribeChartCardData',
+          data: params,
+        });
+      }
+      return await appCloud?.callDataSource({
+        dataSourceName: dataSource?.name,
+        methodName: dataSource?.methodName,
+      });
+    } catch {
+      return [];
+    }
+  }
+
+  const initCard = async () => {
+    // 内部数据源需要字段和统计方式，外部数据源不需要
+    if (
+      (dataSource?.type === 'database' && field && operationType) ||
+      (dataSource && dataSource?.type !== 'database')
+    ) {
+      let data = await getSourceData(
+        dataSource,
+        filterData,
+        field,
+        operationType,
+        isCountEmpty
+      );
+      // 自定义连接器 返回处理
+      if (dataSource?.type !== 'database' && data?.result) {
+        data = data?.result;
+      }
+      if (data?.length) {
+        const val = isNaN(data[0]?.Value) ? 0 : data[0]?.Value;
+        isMounted && setVal(val);
+      } else {
+        // 返回数据为空 使用 0
+        isMounted && setVal(0);
+      }
+    } else {
+      // 没有配置数据使用默认数据
+      isMounted && setVal(defaultVal);
+    }
+  };
+
+  useDeepCompareEffect(() => {
+    initCard();
+  }, [dataSource, filterData, field, operationType, isCountEmpty]);
+
+  const platform = usePlatform();
+  const cls = classNames({
+    'weda-ui': true,
+    [CLASS_PREFIX]: true,
+    [className]: className,
+    [`${CLASS_PREFIX}-mobile`]: platform === 'h5',
+    [`${CLASS_PREFIX}-pc`]: platform !== 'h5',
+  });
+
+  return (
+    <ConfigProvider classPrefix="wedatea2td">
+      <div
+        id={id}
+        role={role}
+        className={cls}
+        style={style}
+        onClick={(e) => events.tap({}, { originEvent: e })}
+      >
+        <div className={`${CLASS_PREFIX}__wrapper`}>
+          <div className={`${CLASS_PREFIX}__title`}>{label}</div>
+          <div className={`${CLASS_PREFIX}__detail`}>
+            <div className={`${CLASS_PREFIX}__count`}>
+              {isShowUnit ? formatNumber(val / unit, decimalDigits) : val}
+              {isShowUnit && (
+                <label className={`${CLASS_PREFIX}__unit`}>{suffix}</label>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </ConfigProvider>
+  );
+}

package/src/web/components/chart/statisticsCard/interface.ts

@@ -0,0 +1,14 @@
+export interface IDataSource {
+  name: string; // 数据源名
+  type: string; // 数据源类型
+  subType: string; // 数据源子类型
+  provider?: string; // 内置连接器类型
+  methodName: string; // 数据源方法名
+}
+
+export interface IField {
+  format: string;
+  type: string;
+  title: string;
+  name: string;
+}

package/src/web/components/dataView/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IDataView } from './interface';
+import ListView from '../listView';
+
+/**
+ * 数据容器-列表视图
+ */
+export default function DataView(props: IDataView) {
+  return (
+    <ListView
+      {...props}
+      orderBy={undefined}
+      orderType={undefined}
+      template="none"
+      pageSize={1}
+      pagination="none"
+      beforeDataChange={(values) => values?.[0]}
+    />
+  );
+}

package/src/web/components/dataView/interface.ts

@@ -0,0 +1,6 @@
+import { IDataContainer } from '../listView/interface';
+
+/**
+ * 数据容器-数据视图
+ */
+export interface IDataView extends IDataContainer {}