@cainiaofe/cn-ui-charts/es/lowcode/cn-line-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 { RequestError } from "../cn-column-chart/components/request-error";
import { calculateAdvancedConfig, calculateFeature, getChartCommonStyle, getRealData, isDesignMode, judgeDataEmpty, makeChartRequestConfig, setAliasName } from "../../common/util/util";
import { EmptyData } from "../cn-column-chart/components/empty-data";
import useFilterSearchListener from "../cn-column-chart/hooks/useFilterSearchListener";
import { Loading } from "../cn-column-chart/components/loading";
import { getLineCharOptions } from "../../common/manager/setter-snippet";
import { FeaturePosition } from "../../types/feature-position";
import useStopLoop from "../cn-column-chart/hooks/useStopLoop";
import set from 'lodash/set';
var CnLineChart = function CnLineChart(props) {
  var _xField$, _yField$, _xField$2, _yField$2, _series$;
  var _ref = props || {},
    dataFrom = _ref.dataFrom,
    _context = _ref._context,
    filterConfig = _ref.filterConfig,
    chartStyle = _ref.chartStyle;
  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 _ref4 = chartStyle || {},
    shape = _ref4.shape,
    area = _ref4.area;
  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 _ref5 = filterConfig || {},
    _bindFilter = _ref5._bindFilter;
  var sendRequest = function sendRequest(config) {
    if (requestConfig && requestConfig.serviceType) {
      var realRequestConfig = makeChartRequestConfig({
        requestConfig: requestConfig,
        _context: _context,
        filterConfig: filterConfig,
        isDesign: isDesign
      });
      var _ref6 = config || {},
        needLoading = _ref6.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 _ref7 = data || {},
          _ref7$value = _ref7.value,
          value = _ref7$value === void 0 ? [] : _ref7$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({}, getLineCharOptions(), {
    encode: {
      x: realXField,
      y: realYField,
      series: seriesField,
      color: seriesField
    },
    data: listData,
    style: {
      lineWidth: 2
    },
    legend: {
      color: {
        title: false
      }
    }
  });
  if (shape === 'smooth') {
    realOptions.encode.shape = shape;
  }
  if (area) {
    realOptions.type = 'area';
    set(realOptions, 'style.fillOpacity', 0.5);
  }
  setAliasName('x', xAliasName, realOptions);
  setAliasName('y', yAliasName, realOptions);
  var finalOptions = calculateAdvancedConfig({
    props: props,
    options: calculateFeature({
      props: props,
      options: realOptions,
      position: FeaturePosition.line,
      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/i1/O1CN01h2uPcg1Untx4htgLQ_!!6000000002563-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'}
  // />
};

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