@cainiaofe/cn-ui-charts/es/lowcode/cn-column-chart/view.js

菜鸟图表组件

import _extends from "@babel/runtime/helpers/extends";
import React, { useState } from 'react';
import { CnChart } from "../../components/cn-chart";
import { makeRequest } from "../../common/util/request";
import { calculateAdvancedConfig, calculateFeature, getChartCommonStyle, getCommonInteraction, getRealData, isDesignMode, judgeDataEmpty, makeChartRequestConfig, setAliasName } from "../../common/util/util";
import { RequestError } from "./components/request-error";
import { EmptyData } from "./components/empty-data";
import { Loading } from "./components/loading";
import useFilterSearchListener from "./hooks/useFilterSearchListener";
import { getColumnCharOptions } from "../../common/manager/setter-snippet";
import merge from 'lodash/merge';
import { FeaturePosition } from "../../types/feature-position";
import useStopLoop from "./hooks/useStopLoop";
var CnColumnChart = function CnColumnChart(props) {
  var _xField$, _yField$, _xField$2, _yField$2, _series$;
  var _ref = props || {},
    dataFrom = _ref.dataFrom,
    _context = _ref._context,
    filterConfig = _ref.filterConfig;
  var _ref2 = dataFrom || {},
    requestConfig = _ref2.requestConfig;
  var _ref3 = requestConfig || {},
    serviceType = _ref3.serviceType,
    guid = _ref3.guid,
    xField = _ref3.xField,
    yField = _ref3.yField,
    series = _ref3.series;
  var _useState = useState([]),
    listData = _useState[0],
    setListData = _useState[1];
  var _useState2 = useState(),
    loading = _useState2[0],
    setLoading = _useState2[1];
  var _useState3 = useState(),
    error = _useState3[0],
    setError = _useState3[1];
  var realXField = xField === null || xField === void 0 ? void 0 : (_xField$ = xField[0]) === null || _xField$ === void 0 ? void 0 : _xField$.fieldName;
  var realYField = yField === null || yField === void 0 ? void 0 : (_yField$ = yField[0]) === null || _yField$ === void 0 ? void 0 : _yField$.fieldName;
  var xAliasName = xField === null || xField === void 0 ? void 0 : (_xField$2 = xField[0]) === null || _xField$2 === void 0 ? void 0 : _xField$2.aliasName;
  var yAliasName = yField === null || yField === void 0 ? void 0 : (_yField$2 = yField[0]) === null || _yField$2 === void 0 ? void 0 : _yField$2.aliasName;
  var seriesField = (series === null || series === void 0 ? void 0 : (_series$ = series[0]) === null || _series$ === void 0 ? void 0 : _series$.fieldName) || undefined;
  var isDesign = isDesignMode(props);
  var _ref4 = filterConfig || {},
    _bindFilter = _ref4._bindFilter;
  var sendRequest = function sendRequest(config) {
    if (requestConfig && requestConfig.serviceType) {
      var realRequestConfig = makeChartRequestConfig({
        requestConfig: requestConfig,
        _context: _context,
        filterConfig: filterConfig,
        isDesign: isDesign
      });
      var _ref5 = config || {},
        needLoading = _ref5.needLoading;
      if (needLoading !== false) {
        setLoading(true);
      }
      makeRequest === null || makeRequest === void 0 ? void 0 : makeRequest(realRequestConfig).then(function (res) {
        var data = getRealData(realRequestConfig, res, _context);
        var _ref6 = data || {},
          _ref6$value = _ref6.value,
          value = _ref6$value === void 0 ? [] : _ref6$value;
        setListData(value);
        setLoading(false);
        setError(undefined);
      }, function () {
        setLoading(false);
        setError('请求失败');
      });
    }
  };
  useFilterSearchListener({
    _bindFilter: _bindFilter,
    sendRequest: sendRequest,
    _context: _context
  });
  useStopLoop({
    _nodeId: props === null || props === void 0 ? void 0 : props._nodeId
  });
  var realOptions = _extends({}, getColumnCharOptions(), {
    encode: {
      x: realXField,
      y: realYField,
      series: seriesField,
      color: seriesField
    },
    data: listData,
    style: {
      maxWidth: 50
    },
    legend: {
      color: {
        title: false
      }
    }
  });
  if (seriesField) {
    merge(realOptions, getCommonInteraction());
  }
  setAliasName('x', xAliasName, realOptions);
  setAliasName('y', yAliasName, realOptions);
  var finalOptions = calculateAdvancedConfig({
    props: props,
    options: calculateFeature({
      props: props,
      options: realOptions,
      position: FeaturePosition.column,
      sendRequest: sendRequest
    }),
    state: _context === null || _context === void 0 ? void 0 : _context.state
  });
  if (isDesign && loading === undefined) {
    return /*#__PURE__*/React.createElement(CnChart, _extends({}, getChartCommonStyle(props), finalOptions, {
      encode: {
        x: 'year',
        y: 'amount'
      },
      data: [{
        year: '2022',
        amount: 111
      }, {
        year: '2023',
        amount: 222
      }]
    }));
  }
  if (error) {
    return /*#__PURE__*/React.createElement(RequestError, {
      error: error
    });
  }
  return /*#__PURE__*/React.createElement(Loading, {
    visible: loading
  }, judgeDataEmpty(finalOptions) ? /*#__PURE__*/React.createElement(EmptyData, {
    emptyImg: 'https://img.alicdn.com/imgextra/i2/O1CN01orZ7vd1m0aOdNMzMp_!!6000000004892-55-tps-500-260.svg'
  }) : /*#__PURE__*/React.createElement(CnChart, _extends({}, getChartCommonStyle(props), finalOptions)));

  // return <EmptyData
  //   emptyImg={'https://img.alicdn.com/imgextra/i1/O1CN01h2uPcg1Untx4htgLQ_!!6000000002563-55-tps-500-260.svg'}
  // />
};

CnColumnChart.displayName = 'CnColumnChart';
export default CnColumnChart;
export { CnColumnChart };