sea-chart 2.0.1 → 2.0.2

package/dist/view/wrapper/line.js

@@ -1,222 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("../../utils");
-var _intl = _interopRequireDefault(require("../../intl"));
-var _constants = require("../../constants");
-var _chartComponent = _interopRequireDefault(require("./chart-component"));
-class Line extends _chartComponent.default {
-  constructor(props) {
-    super(props);
-    this.createChart = () => {
-      const {
-        chart
-      } = this.props;
-      const {
-        y_axis_show_value
-      } = chart.config;
-      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
-      this.initChart(this.container, {
-        appendPadding
-      });
-      this.chart.on('point:click', e => {
-        this.props.toggleRecords(e.data.data);
-      });
-    };
-    this.clearChart = () => {
-      this.chart.annotation().clear(true);
-      this.chart.clear(true);
-    };
-    this.drawChart = () => {
-      let {
-        result: data,
-        chart,
-        summaryColumn,
-        customRender
-      } = this.props;
-      data = _utils.BaseUtils.formatEmptyName(data, '', _intl.default.get('Empty'));
-      if (!Array.isArray(data)) return;
-      this.loadData(data);
-      this.draw(data);
-      this.autoAdjustDataOptions(chart, data, summaryColumn);
-      (0, _utils.isFunction)(customRender) && customRender(this.chart);
-      requestAnimationFrame(() => {
-        this.chart.render();
-      });
-    };
-    this.draw = data => {
-      const {
-        chart,
-        globalTheme,
-        chartColorTheme,
-        summaryColumn,
-        tables
-      } = this.props;
-      const theme = _constants.CHART_THEME_COLOR[globalTheme];
-      const {
-        table_id,
-        y_axis_column_key,
-        y_axis_summary_column_key,
-        y_axis_label_color,
-        y_axis_show_value,
-        label_font_size,
-        line_type,
-        y_axis_summary_type,
-        y_axis_summary_method,
-        color_option
-        // y_axis_label_color_rules
-      } = chart.config;
-      const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
-      const {
-        display_goal_line,
-        goal_label,
-        goal_value
-      } = chart.style_config || {};
-      let chartBarColor;
-      // default color
-      chartBarColor = _constants.CHART_STYLE_COLORS[0];
-      // use theme color  has higher priority
-      if (chartColorTheme) {
-        chartBarColor = _utils.BaseUtils.getCurrentTheme(chartColorTheme).colors[0];
-      }
-      // use specific color has higher priority then theme color
-      if (color_option === _constants.TYPE_COLOR_USING.USE_SPECIFIC_COLORS && y_axis_label_color) {
-        chartBarColor = y_axis_label_color;
-      }
-      this.drawLabels(data);
-
-      // y axis label
-      const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
-      const isSmooth = line_type === _constants.CHART_LINE_TYPES[1];
-
-      // set Coord type
-      this.chart.coordinate('rect');
-      this.chart.line().label(y_axis_show_value ? 'value' : false, {
-        style: {
-          fontSize: _utils.BaseUtils.getLabelFontSize(label_font_size),
-          fill: theme.labelColor,
-          stroke: '#fff',
-          lineWidth: 1
-        }
-      })
-      // .animate({
-      //   appear: {
-      //     animation: 'fadeIn',
-      //     duration: 1000,
-      //     easing: 'easeLinear'
-      //   }
-      // })
-      .position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
-        lineWidth: 2,
-        opacity: 1
-      }).tooltip('name*value', (name, value) => {
-        return {
-          title,
-          value: _utils.BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
-          name
-        };
-      });
-      let point;
-      point = this.chart.point().position('name*value').color(chartBarColor).animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).shape('circle').size(3).style({
-        stroke: 0,
-        fillOpacity: 1,
-        opacity: y_axis_show_value ? 1 : 0
-      }).tooltip(false);
-
-      // this.chart.on('tooltip:show', () => {
-      //   if (line.styleOption.cfg.opacity === 0.3) return;
-      //   line.style({
-      //     opacity: 0.3,
-      //     lineWidth: 3,
-      //   });
-      //   if (point) point.style({
-      //     fillOpacity: 0.3,
-      //     stroke: 0,
-      //   });
-      //   this.chart.render();
-      // });
-
-      // this.chart.on('tooltip:hide', () => {
-      //   if (line.styleOption.cfg.opacity === 1) return;
-      //   line.style({
-      //     opacity: 1,
-      //     lineWidth: 3,
-      //   });
-      //   if (point) point.style({
-      //     fillOpacity: 1,
-      //     stroke: 0,
-      //   });
-      //   this.chart.render();
-      // });
-
-      if (display_goal_line && goal_label && goal_value) {
-        this.setDispalyGoalLine(goal_label, goal_value, chartWidth);
-      }
-      this.setToolTipForLine();
-      this.setNameLabelAndTooltip(theme, this.labelCount);
-      this.setValueLabel(theme);
-    };
-    this.chart = null;
-    this.needRenderAxisLabel = true;
-  }
-  componentDidMount() {
-    this.createChart();
-    this.drawChart();
-    this.renderAxisLabel(this.props.chart, this.props.tables);
-    super.componentDidMount();
-  }
-  componentDidUpdate(prevProps) {
-    super.componentDidUpdate(prevProps);
-    if (_utils.BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
-      var _this$chart;
-      ((_this$chart = this.chart) === null || _this$chart === void 0 ? void 0 : _this$chart.autoPadding) && this.chart.destroy();
-      this.createChart();
-      this.drawChart();
-      this.renderAxisLabel(prevProps.chart, prevProps.tables);
-    }
-  }
-  componentWillUnmount() {
-    var _this$chart2;
-    ((_this$chart2 = this.chart) === null || _this$chart2 === void 0 ? void 0 : _this$chart2.autoPadding) && this.chart.destroy();
-    super.componentWillUnmount();
-  }
-  render() {
-    const {
-      chart
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _classnames.default)('sea-chart-container ', {
-        'show-x-axis-label': this.isShowXAxisLabel(chart),
-        'show-y-axis-label': this.isShowYAxisLabel(chart)
-      }),
-      ref: ref => this.container = ref
-    });
-  }
-}
-Line.propTypes = {
-  canvasStyle: _propTypes.default.object,
-  chart: _propTypes.default.object,
-  groupbyColumn: _propTypes.default.object,
-  columnGroupbyColumn: _propTypes.default.object,
-  summaryColumn: _propTypes.default.object,
-  result: _propTypes.default.array,
-  tables: _propTypes.default.array,
-  globalTheme: _propTypes.default.string,
-  chartColorTheme: _propTypes.default.string,
-  toggleRecords: _propTypes.default.func,
-  customRender: _propTypes.default.func
-};
-var _default = exports.default = Line;

package/dist/view/wrapper/map.js

@@ -1,368 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = Map;
-var _Loading2 = _interopRequireDefault(require("dtable-ui-component/lib/Loading"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireWildcard(require("react"));
-var _dtableUtils = require("dtable-utils");
-var _dataSet = require("@antv/data-set");
-var _constants = require("../../constants");
-var _customG = require("../../utils/custom-g2");
-var _mapJson = _interopRequireDefault(require("../../services/map-json"));
-var _colorRules = require("../../constants/color-rules");
-var _context = _interopRequireDefault(require("../../context"));
-var _utils = require("../../utils");
-const CHART_STYLE_CONFIG = {
-  'g2-tooltip': {
-    borderRadius: '2px',
-    backgroundColor: '#fff',
-    padding: '10px'
-  },
-  'tooltip-item': {
-    marginTop: '5px'
-  }
-};
-const getDefaultChartStyleByKey = key => {
-  return CHART_STYLE_CONFIG[key] || {};
-};
-function createChart(container) {
-  // width / height = 1.5 for chinese map
-  const {
-    width,
-    height
-  } = (0, _utils.getMapCanvasStyle)(container, 1.5);
-  let config = {
-    container: container,
-    width,
-    height
-  };
-  return new _customG.Chart(config);
-}
-function initChart(currentChart, props) {
-  const {
-    result,
-    toggleRecords
-  } = props;
-  currentChart.on('element:click', e => {
-    const data = e.data.data;
-    const clickData = result.find(i => i.name === data.name);
-    if (clickData) {
-      toggleRecords(clickData);
-    }
-  });
-  currentChart.tooltip({
-    showTitle: false,
-    showMarkers: false,
-    shared: true,
-    containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
-    itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">数量: {value}<div></div>',
-    domStyles: {
-      'g2-tooltip': getDefaultChartStyleByKey('g2-tooltip'),
-      'tooltip-item': getDefaultChartStyleByKey('tooltip-item')
-    }
-  });
-  currentChart.scale({
-    longitude: {
-      sync: true
-    },
-    latitude: {
-      sync: true
-    }
-  });
-  currentChart.axis(false);
-}
-function mapGetNumberDisplayString(value, columnData, summaryMethod) {
-  if (summaryMethod === _constants.CHART_SUMMARY_TYPE.Distinct_values) {
-    return value;
-  }
-  return (0, _dtableUtils.getNumberDisplayString)(value, columnData);
-}
-const formatStatisticData = (statisticData, mapData, type) => {
-  if (!statisticData) return [];
-  let statisticNewData = [];
-  let sum = 0;
-  statisticData.forEach((item, index) => {
-    if (item && item.name) {
-      let matchFeature = mapData.features.find(feature => feature.properties.name.indexOf(item.name) > -1);
-      if (matchFeature) {
-        statisticNewData.push({
-          name: matchFeature.properties.name,
-          value: item.value || 0
-        });
-        if (type === 'map_bubble') {
-          sum += item.value;
-        }
-      }
-    }
-  });
-  if (type === 'map_bubble') {
-    statisticNewData.sum = sum;
-  }
-  return statisticNewData;
-};
-function Map(props) {
-  const {
-    result: statisticData,
-    chart
-  } = props;
-
-  // mapLocation is initially set to null, in this case mapLevel is country, so doesn't here
-  const {
-    map_location: mapLocation,
-    map_level: mapLevel = _constants.MAP_LEVEL.COUNTRY,
-    type,
-    data_color,
-    bubble_color,
-    legend_size,
-    legend_direction,
-    summary_type,
-    summary_column_key,
-    summary_method,
-    table_id
-  } = chart.config;
-  const chartRef = (0, _react.useRef)(null);
-  const chartContainerRef = (0, _react.useRef)(null);
-  const dataSetRef = (0, _react.useRef)(null);
-  const [isLoading, setIsLoading] = (0, _react.useState)(true);
-  const [mapData, setMapData] = (0, _react.useState)(null);
-  const renderCommonChart = (0, _react.useCallback)(function (statisticNewData) {
-    const currentDataSet = dataSetRef.current;
-    const currentChart = chartRef.current;
-    const userDataView = currentDataSet.getView('statisticViewModel').source(statisticNewData).transform({
-      geoDataView: currentDataSet.getView('mapDataModel'),
-      field: 'name',
-      type: 'geo.region',
-      as: ['longitude', 'latitude']
-    });
-    const currentColorOption = _colorRules.COLOR_OPTIONS.filter(item => item.name === data_color)[0] || _colorRules.COLOR_OPTIONS[0];
-    const {
-      exampleColors,
-      highlightedBorderColor
-    } = currentColorOption;
-    let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = (0, _dtableUtils.getTableById)(table_id);
-      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
-      columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    }
-    const statisticView = currentChart.createView();
-    statisticView.data(userDataView.rows);
-
-    // TODO
-    // const themeColors = getThemeColors();
-    const legendDirection = legend_direction || 'vertical';
-    const size = legend_size || 1;
-    statisticView.polygon().position('longitude*latitude').color('value', `${exampleColors[0]}-${exampleColors[4]}-${exampleColors[8]}`).style({
-      lineWidth: 1,
-      stroke: '#bdbdbd',
-      strokeOpacity: 0.5
-    }).state({
-      active: {
-        style: {
-          lineWidth: 1,
-          stroke: highlightedBorderColor
-        }
-      }
-    }).tooltip('name*value*color', (name, value, color) => {
-      return {
-        name,
-        color,
-        value
-      };
-    });
-    chartRef.current.legend({
-      layout: legendDirection,
-      position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
-      rail: {
-        type: 'color',
-        defaultLength: 100 * size
-      },
-      label: {
-        spacing: 2,
-        style: {
-          // TODO
-          // use data_color temporarily
-          fill: data_color,
-          stroke: '#fff'
-        },
-        align: legendDirection === 'vertical' ? 'right' : 'bottom',
-        formatter: value => {
-          return mapGetNumberDisplayString(value, columnData, summary_method);
-        }
-      },
-      slidable: false
-    });
-    statisticView.interaction('element-active');
-    statisticView.render();
-    return statisticView;
-  }, [data_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  const renderBubbleChart = (0, _react.useCallback)(function (statisticNewData) {
-    const currentDataSet = dataSetRef.current;
-    const currentChart = chartRef.current;
-    const userDv = currentDataSet.createView().source(statisticNewData).transform({
-      geoDataView: currentDataSet.getView('mapDataModel'),
-      field: 'name',
-      type: 'geo.centroid',
-      as: ['longitude', 'latitude']
-    });
-    let columnData = _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    if (summary_type === _constants.CHART_SUMMARY_TYPE.ADVANCED) {
-      const table = (0, _dtableUtils.getTableById)(table_id);
-      const summaryColumn = (0, _dtableUtils.getTableColumnByKey)(table, summary_column_key) || {};
-      columnData = summaryColumn.data || _constants.DEFAULT_NUMBER_FORMAT_OBJECT;
-    }
-    const statisticView = currentChart.createView();
-    statisticView.data(userDv.rows);
-    currentChart.theme({
-      defaultColor: bubble_color || '#2a67d1'
-    });
-    statisticView.point().position('longitude*latitude').size('value', value => {
-      const percent = value / statisticNewData.sum;
-      let size = percent * 100;
-      return size;
-    }).shape('circle').color(bubble_color || '#2a67d1').tooltip('name*value*color', (name, value, color) => {
-      return {
-        name,
-        color,
-        value
-      };
-    }).style({
-      fillOpacity: 0.6,
-      stroke: bubble_color || '#2a67d1'
-    }).state({
-      active: {
-        style: {
-          lineWidth: 1,
-          stroke: bubble_color || '#2a67d1',
-          fillOpacity: 0.9
-        }
-      }
-    });
-
-    // const themeColors = this.getThemeColors();
-    const legendDirection = legend_direction || 'vertical';
-    const size = legend_size || 1;
-    currentChart.legend({
-      layout: legendDirection,
-      position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
-      rail: {
-        type: 'size',
-        defaultLength: 100 * size
-      },
-      label: {
-        style: {
-          // fill: themeColors.textColor,
-          fill: data_color
-        },
-        align: legendDirection === 'vertical' ? 'right' : 'bottom',
-        formatter: value => {
-          return mapGetNumberDisplayString(value, columnData, summary_method);
-        }
-      },
-      slidable: false
-    });
-    statisticView.interaction('element-active');
-    statisticView.render();
-    return statisticView;
-  }, [bubble_color, data_color, legend_direction, legend_size, summary_column_key, summary_method, summary_type, table_id]);
-  (0, _react.useEffect)(() => {
-    const handleResize = () => {
-      const container = chartContainerRef.current;
-      const {
-        width,
-        height
-      } = (0, _utils.getMapCanvasStyle)(container, 1.5);
-      chartRef.current.changeSize(width, height);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, []);
-
-  // used to fetch mapJson data
-  (0, _react.useEffect)(() => {
-    (async () => {
-      try {
-        const mediaUrl = _context.default.getSetting('mediaUrl');
-        const mapJson = await (0, _mapJson.default)(mapLevel, mapLocation, mediaUrl);
-        setMapData(mapJson);
-        setIsLoading(false);
-      } catch (error) {
-        console.error(error);
-        setIsLoading(false);
-      }
-    })();
-  }, [mapLevel, mapLocation]);
-
-  // used to init map background
-  // if no statistics data, then render empty map
-  (0, _react.useEffect)(() => {
-    if (!chartRef.current) {
-      chartRef.current = createChart(chartContainerRef.current);
-    }
-    // triggered after mapData is set
-    if (!mapData) return;
-    const currentChart = chartRef.current;
-    initChart(currentChart, props);
-    const dataSet = new _dataSet.DataSet();
-    dataSetRef.current = dataSet;
-    // transform map data
-    const data = dataSet.createView('mapDataModel').source(mapData, {
-      type: 'GeoJSON'
-    });
-    const mapView = currentChart.createView();
-    // // draw background map
-    mapView.data(data.rows);
-    mapView.tooltip(false);
-    mapView.polygon().position('longitude*latitude').style({
-      fill: '#e2e2e2',
-      stroke: '#bdbdbd',
-      lineWidth: 1
-    });
-    dataSet.createView('statisticViewModel');
-    mapView.render();
-    return () => {
-      currentChart.destroy();
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [mapData]);
-  (0, _react.useEffect)(() => {
-    const currentChart = chartRef.current;
-    // need mapData and statisticData to render
-    if (!Array.isArray(statisticData) || !mapData) return;
-    const statisticNewData = formatStatisticData(statisticData, mapData, type);
-    if (statisticNewData.length === 0) {
-      currentChart.legend(false);
-      currentChart.render();
-      return;
-    }
-    let currentView;
-    if (type.includes('bubble')) {
-      currentView = renderBubbleChart(statisticNewData);
-    } else {
-      currentView = renderCommonChart(statisticNewData);
-    }
-    currentChart.render();
-    return () => {
-      currentView && currentView.destroy();
-    };
-  }, [statisticData, mapData, type, renderCommonChart, renderBubbleChart]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isLoading && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'statistic-chart-loading-container'
-  }, /*#__PURE__*/_react.default.createElement(_Loading2.default, null)), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('sea-chart-container '),
-    style: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center'
-    },
-    ref: chartContainerRef
-  }));
-}