sea-chart 0.0.1-beta

package/dist/view/wrapper/horizontal-bar-group.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { EMPTY_NAME } from '../../constants';
+import { ChartUtils } from '../../utils';
+import HorizontalComponent from './horizontal-component';
+import intl from '../../intl';
+class HorizontalBarGroup extends HorizontalComponent {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        display_data
+      } = chart.config;
+      const appendPadding = [0, display_data ? 17 : 0, 0, 0];
+      this.initChart(this.container, {
+        appendPadding
+      });
+      this.chart.on('interval:click', e => {
+        this.props.toggleRecords(e.data.data);
+      });
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = ChartUtils.formatEmptyName(data, '', intl.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.chart.scale(this.groupName, {
+        type: 'cat'
+      });
+      this.loadData(data);
+      this.draw(data);
+      this.chart.render();
+    };
+    this.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        theme
+      } = this.props;
+      const {
+        horizontal_axis_summary_method,
+        display_data,
+        label_font_size
+      } = chart.config;
+      const chartBarColor = this.groupName;
+      const newData = this.getChartGroupData(data);
+      this.drawLabels(newData);
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      this.chart.interval().label(display_data ? 'value' : false, {
+        formatter: value => {
+          return value;
+        },
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
+        return {
+          title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
+          name: !group_name && typeof group_name !== 'number' ? intl.get(EMPTY_NAME) : group_name
+        };
+      }).adjust([{
+        type: 'dodge'
+      }]).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      this.setNameLabelAndTooltip(theme, this.labelCount);
+      this.setValueLabel(theme);
+      this.setLegend(this.groupName, theme, 'bottom');
+      this.chart.coordinate().transpose();
+      this.chart.interaction('active-region');
+    };
+    this.chart = null;
+    this.groupName = 'group_name';
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.renderHorizontalLabel(this.props.chart, this.props.tables);
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+      this.renderHorizontalLabel(prevProps.chart, prevProps.tables);
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.chart.destroy();
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('sea-chart-container w-100', {
+        'show-vertical-axis-label': this.isShowVerticalAxisLabel(chart),
+        'show-horizontal-axis-label': this.isShowHorizontalAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+HorizontalBarGroup.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object,
+  toggleRecords: PropTypes.func
+};
+export default HorizontalBarGroup;

package/dist/view/wrapper/horizontal-bar.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
+import { ChartUtils } from '../../utils';
+import HorizontalComponent from './horizontal-component';
+import intl from '../../intl';
+class HorizontalBar extends HorizontalComponent {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const {
+        chart
+      } = this.props;
+      const {
+        display_data
+      } = chart.config;
+      const appendPadding = [0, display_data ? 17 : 0, 0, 0]; // used to display value on the right
+      this.initChart(this.container, {
+        appendPadding
+      });
+      this.chart.on('interval:click', e => {
+        this.props.toggleRecords(e.data.data);
+      });
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      data = ChartUtils.formatEmptyName(data, '', intl.get('Empty'));
+      if (!Array.isArray(data)) return;
+      this.loadData(data);
+      this.draw(data);
+      this.chart.render();
+      this.renderHorizontalLabel(this.props.chart, this.props.tables);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        theme
+      } = this.props;
+      const {
+        horizontal_axis_summary_type,
+        horizontal_axis_summary_method,
+        horizontal_axis_label_color,
+        display_data,
+        label_font_size
+      } = chart.config;
+      const chartBarColor = horizontal_axis_label_color || '#2a67d1';
+      data.reverse();
+      this.drawLabels(data);
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      this.chart.interval().label(display_data ? 'value' : false, {
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          title: horizontal_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[horizontal_axis_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, horizontal_axis_summary_method),
+          name
+        };
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      this.chart.tooltip({
+        showTitle: true,
+        showMarkers: false,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{title}<div><div class="tooltip-item">{name}: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      this.setNameLabelAndTooltip(theme, this.labelCount);
+      this.setValueLabel(theme);
+      this.chart.coordinate().transpose();
+      this.chart.interaction('active-region');
+    };
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.chart.destroy();
+  }
+  render() {
+    const {
+      chart
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames('sea-chart-container w-100', {
+        'show-vertical-axis-label': this.isShowVerticalAxisLabel(chart),
+        'show-horizontal-axis-label': this.isShowHorizontalAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+HorizontalBar.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object,
+  toggleRecords: PropTypes.func
+};
+export default HorizontalBar;

package/dist/view/wrapper/horizontal-component.js

@@ -0,0 +1,78 @@
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import ChartComponent from './chart-component';
+import { CHART_SUMMARY_TYPE, LABEL_POSITION_TYPE } from '../../constants';
+import intl from '../../intl';
+export default class HorizontalComponent extends ChartComponent {
+  constructor() {
+    super(...arguments);
+    this.renderHorizontalLabel = (chart, tables) => {
+      if (!this.chart || !chart) return;
+      let {
+        table_id,
+        x_axis_column_key,
+        y_axis_summary_column_key,
+        y_axis_label_position,
+        x_axis_label_position,
+        y_axis_summary_type,
+        show_vertical_axis_label,
+        show_horizontal_axis_label
+      } = chart.config;
+      const table = getTableById(tables, table_id);
+      const autoPadding = this.chart.autoPadding;
+      const textColor = '#999999';
+      const xAxisID = "chart-x-axis-label_".concat(chart.id);
+      const chartContainer = this.chart.getCanvas().get('container');
+      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && show_horizontal_axis_label) {
+        const div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'chart-axis-label';
+        if (y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
+        } else {
+          const column = getTableColumnByKey(table, y_axis_summary_column_key);
+          div.innerHTML = "".concat(column ? column.name : '');
+        }
+        div.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+        chartContainer.appendChild(div);
+      }
+      if (xLabel && show_horizontal_axis_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+      }
+      if (xLabel && !show_horizontal_axis_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      const yAxisID = "chart-y-axis-label_".concat(chart.id);
+      const yLabel = chartContainer.querySelector("#".concat(yAxisID));
+      if (!yLabel && show_vertical_axis_label) {
+        const div = document.createElement('div');
+        div.id = yAxisID;
+        div.className = 'chart-axis-label';
+        const column = getTableColumnByKey(table, x_axis_column_key) || {};
+        div.innerHTML = column.name || '';
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        div.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yLabel && show_horizontal_axis_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_label_position === LABEL_POSITION_TYPE.TOP) textAlign = 'right';
+        yLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; left: 0; transform: translate(-").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yLabel && !show_horizontal_axis_label) {
+        yLabel.parentNode.removeChild(yLabel);
+      }
+    };
+    this.isShowVerticalAxisLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_vertical_axis_label);
+    };
+    this.isShowHorizontalAxisLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_horizontal_axis_label);
+    };
+  }
+}

package/dist/view/wrapper/index.js

@@ -0,0 +1,200 @@
+import React, { useCallback } from 'react';
+import { CHART_TYPE, CHART_THEME_COLOR } from '../../constants';
+import { ChartUtils, eventStopPropagation } from '../../utils';
+import Table from './table';
+import Bar from './bar';
+import BarGroup from './bar-group';
+import Line from './line';
+import LineGroup from './line-group';
+import Pie from './pie';
+import Ring from './ring';
+import HorizontalBar from './horizontal-bar';
+import HorizontalBarGroup from './horizontal-bar-group';
+import Area from './area';
+import BasicNumericCard from './basic-number-card';
+import Treemap from './treemap';
+import Combination from './combination';
+import Dashboard from './dashboard';
+const Wrapper = _ref => {
+  let {
+    data,
+    chart,
+    tables,
+    canvasStyle
+  } = _ref;
+  // const [statisticRecords, setStatisticRecords] = useState({});
+  // const [isStatisticRecordsDialogShow, setIsStatisticRecordsDialogShow] = useState(false);
+  // const [selectedCell, setSelectedCell] = useState({});
+
+  const toggleStatisticRecordsDialog = useCallback((statisticRecords, selectedCell) => {
+    // setIsStatisticRecordsDialogShow(!isStatisticRecordsDialogShow)
+    // setSelectedCell(selectedCell);
+    // setStatisticRecords(statisticRecords);
+  }, []);
+  const onTableClick = useCallback(event => {
+    eventStopPropagation(event);
+  }, []);
+  const {
+    result,
+    groupbyColumn,
+    columnGroupbyColumn,
+    summaryColumn,
+    chartTableColumns
+  } = data;
+  const {
+    type,
+    summary_columns,
+    summary_method
+  } = chart.config;
+  const baseProps = {
+    chart,
+    result,
+    tables,
+    groupbyColumn,
+    columnGroupbyColumn,
+    summaryColumn,
+    theme: CHART_THEME_COLOR['light'],
+    toggleRecords: toggleStatisticRecordsDialog
+  };
+  switch (type) {
+    case CHART_TYPE.TABLE:
+      {
+        return /*#__PURE__*/React.createElement("div", {
+          className: "chart-table-wrapper",
+          onClick: onTableClick
+        }, result && /*#__PURE__*/React.createElement(Table, Object.assign({}, baseProps, {
+          summaryColumns: summary_columns,
+          summaryMethod: summary_method,
+          chartTableColumns: chartTableColumns
+        })));
+      }
+    case CHART_TYPE.COMBINATION:
+      {
+        return /*#__PURE__*/React.createElement(Combination, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.BAR:
+      {
+        return /*#__PURE__*/React.createElement(Bar, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.BAR_GROUP:
+      {
+        const {
+          config
+        } = chart;
+        const {
+          column_groupby_column_key,
+          column_groupby_multiple_numeric_column
+        } = config;
+        const BarGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? BarGroup : Bar;
+        return /*#__PURE__*/React.createElement(BarGroupComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.HORIZONTAL_BAR:
+      {
+        const {
+          config,
+          id,
+          style_config
+        } = chart;
+        const newConfig = ChartUtils.convertConfig(config);
+        const newChart = {
+          id,
+          config: newConfig,
+          style_config
+        };
+        return /*#__PURE__*/React.createElement(HorizontalBar, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle,
+          chart: newChart
+        }));
+      }
+    case CHART_TYPE.HORIZONTAL_GROUP_BAR:
+      {
+        const {
+          config,
+          id,
+          style_config
+        } = chart;
+        const newConfig = ChartUtils.convertConfig(config);
+        const newChart = {
+          id,
+          config: newConfig,
+          style_config
+        };
+        const {
+          column_groupby_column_key,
+          column_groupby_multiple_numeric_column
+        } = config;
+        const HorizontalComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? HorizontalBarGroup : HorizontalBar;
+        return /*#__PURE__*/React.createElement(HorizontalComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle,
+          chart: newChart
+        }));
+      }
+    case CHART_TYPE.LINE_GROUP:
+      {
+        const {
+          config
+        } = chart;
+        const {
+          column_groupby_column_key,
+          column_groupby_multiple_numeric_column
+        } = config;
+        const LineGroupComponent = column_groupby_column_key || column_groupby_multiple_numeric_column ? LineGroup : Line;
+        return /*#__PURE__*/React.createElement(LineGroupComponent, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.LINE:
+      {
+        return /*#__PURE__*/React.createElement(Line, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.BASIC_NUMBER_CARD:
+      {
+        return /*#__PURE__*/React.createElement(BasicNumericCard, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.AREA:
+      {
+        return /*#__PURE__*/React.createElement(Area, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.PIE:
+      {
+        return /*#__PURE__*/React.createElement(Pie, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.RING:
+      {
+        return /*#__PURE__*/React.createElement(Ring, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.TREE_MAP:
+      {
+        return /*#__PURE__*/React.createElement(Treemap, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    case CHART_TYPE.DASHBOARD:
+      {
+        return /*#__PURE__*/React.createElement(Dashboard, Object.assign({}, baseProps, {
+          canvasStyle: canvasStyle
+        }));
+      }
+    default:
+      {
+        return null;
+      }
+  }
+};
+export default Wrapper;