sea-chart 0.0.1-beta

package/dist/view/wrapper/ring.js

@@ -0,0 +1,264 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
+import { ChartUtils } from '../../utils';
+import ChartComponent from './chart-component';
+import intl from '../../intl';
+class Ring extends ChartComponent {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    this.createChart = () => {
+      const {
+        canvasStyle
+      } = this.props;
+      this.initChart(this.container, canvasStyle, 0);
+    };
+    this.destroyChart = () => {
+      this.chart.destroy();
+      this.chart = null;
+    };
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data,
+        chart,
+        tables,
+        summaryColumn
+      } = this.props;
+      if (data.length === 0) return;
+      this.sum = data.total;
+      this.chart.coordinate('theta', {
+        radius: 0.95,
+        innerRadius: 0.7
+      });
+      const {
+        show_legend,
+        display_label,
+        label_position,
+        label_font_size,
+        summary_method
+      } = chart.config;
+      const {
+        data: newData,
+        colorSet,
+        total
+      } = ChartUtils.formatPieChartData(data, chart, tables);
+      if (!Array.isArray(newData)) return;
+      this.sum = total;
+      this.loadData(newData);
+      this.chart.on('interval:click', e => {
+        this.props.toggleRecords(e.data.data);
+      });
+      if (show_legend) {
+        this.chart.legend('name', {
+          position: 'right',
+          custom: true,
+          itemName: {
+            style: {
+              fill: '#6e6e6e'
+            }
+          },
+          items: newData.map((obj, index) => {
+            let name = obj.name;
+            if (!obj.name && typeof obj.name !== 'number') {
+              name = intl.get('Empty');
+            } else if (obj.name === '_Others') {
+              name = intl.get('Others');
+            }
+            return {
+              name,
+              value: obj.value,
+              marker: {
+                symbol: 'circle',
+                style: {
+                  r: 5,
+                  fill: colorSet[index]
+                }
+              }
+            };
+          })
+        });
+      } else {
+        this.chart.legend(false);
+      }
+
+      // Do not automatically adjust the maximum and minimum values in pie chart
+      this.chart.scale({
+        value: {
+          nice: false
+        }
+      });
+      this.chart.interval().adjust('stack').position('value').color('name', colorSet).label('value*percent', (value, percent) => {
+        const displayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          content: this.getLabel(displayValue, percent)
+        };
+      }, {
+        offset: !label_position || label_position === CHART_LABEL_POSITIONS[0] ? -2 : undefined,
+        style: {
+          fill: '#000000',
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          shadowBlur: 2,
+          shadowColor: 'rgba(0, 0, 0, .45)'
+        }
+      }).tooltip('name*value*percent', (name, value, percent) => {
+        let title = name;
+        if (!name || name === 'undefined') {
+          title = intl.get('Empty');
+        } else if (name === '_Others') {
+          title = intl.get('Others');
+        }
+        const displayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, value, summary_method);
+        return {
+          name: title,
+          value: display_label ? this.getLabel(displayValue, percent) : displayValue
+        };
+      }).state({
+        active: {
+          style: {
+            fillOpacity: 0.7,
+            border: 'none',
+            stroke: 0
+          }
+        }
+      });
+      this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        itemTpl: '<div class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</div>'
+      });
+      this.chart.interaction('chart-active');
+      this.setAnnotation({
+        name: intl.get('Total'),
+        value: ChartUtils.getSummaryValueDisplayString(summaryColumn, this.sum, summary_method)
+      }, '#000000');
+      this.chart.on('interval:mouseenter', evt => this.onEnterRingChart(evt, '#000000', {
+        summaryColumn,
+        summaryMethod: summary_method
+      }));
+      this.chart.on('interval:mouseleave', evt => this.onLeaveRingChart(evt, '#000000', {
+        summaryColumn,
+        summaryMethod: summary_method
+      }));
+      this.chart.render();
+    };
+    this.getLabel = (value, percent) => {
+      const {
+        display_label,
+        label_format
+      } = this.props.chart.config;
+      if (!display_label) {
+        return '';
+      }
+      switch (label_format) {
+        case CHART_LABEL_FORMATS[0]:
+          return percent;
+        case CHART_LABEL_FORMATS[1]:
+          return value;
+        case CHART_LABEL_FORMATS[2]:
+          return "".concat(value, " (").concat(percent, ")");
+        default:
+          return percent;
+      }
+    };
+    this.setAnnotation = function (content, fontColor) {
+      let {
+        summaryColumn,
+        summaryMethod
+      } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      let name = content.name;
+      if (!name || name === 'undefined') {
+        name = intl.get('Empty');
+      } else if (name === '_Others') {
+        name = intl.get('Others');
+      }
+      _this.chart.annotation().text({
+        content: name,
+        position: ['50%', '50%'],
+        style: {
+          fontSize: 12,
+          fill: fontColor,
+          fontWeight: '300',
+          textAlign: 'center'
+        },
+        offsetY: -20
+      }).text({
+        position: ['50%', '50%'],
+        content: summaryColumn ? ChartUtils.getSummaryValueDisplayString(summaryColumn, content.value, summaryMethod) : content.value,
+        style: {
+          fontSize: 20,
+          fill: fontColor,
+          textAlign: 'center'
+        },
+        offsetY: 20
+      });
+    };
+    this.onEnterRingChart = (ev, color, _ref) => {
+      let {
+        summaryColumn,
+        summaryMethod
+      } = _ref;
+      const item = ev.data.data;
+      this.chart.annotation().clear(true);
+      this.setAnnotation(item, color, {
+        summaryColumn,
+        summaryMethod
+      });
+      this.chart.render(true);
+    };
+    this.onLeaveRingChart = (ev, color, _ref2) => {
+      let {
+        summaryColumn,
+        summaryMethod
+      } = _ref2;
+      this.chart.annotation().clear(true);
+      this.setAnnotation({
+        name: intl.get('Total'),
+        value: this.sum
+      }, color, {
+        summaryColumn,
+        summaryMethod
+      });
+      this.chart.render(true);
+    };
+    this.sum = 0;
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.destroyChart();
+      this.sum = 0;
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.destroyChart();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-container w-100",
+      ref: ref => this.container = ref
+    });
+  }
+}
+Ring.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  columnGroupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  toggleRecords: PropTypes.func
+};
+export default Ring;

package/dist/view/wrapper/table/index.css

@@ -0,0 +1,103 @@
+.sea-chart-pivot-table {
+  width: 100%;
+  position: relative;
+}
+
+.sea-chart-pivot-table thead {
+  border-top: 1px solid #ccc;
+}
+
+.sea-chart-pivot-table tr {
+  border-bottom: 1px solid #ccc;
+  text-align: center;
+}
+
+.sea-chart-pivot-table th {
+  color: #212529;
+}
+
+.sea-chart-pivot-table th,
+.sea-chart-pivot-table td {
+  padding: 10px;
+  border-right: 1px solid #ccc;
+  border-left: 1px solid #ccc;
+  border-bottom: none;
+  overflow: hidden;
+  min-width: 100px;
+  width: 150px;
+  max-width: 150px;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.sea-chart-pivot-table .column-title,
+.sea-chart-pivot-table .row-title {
+  padding: 0;
+  text-align: center;
+  color: inherit;
+}
+
+.sea-chart-pivot-table .column-title {
+  caption-side: top;
+}
+
+.sea-chart-pivot-table .row-title {
+  position: absolute;
+  transform: rotate(-90deg);
+  width: 100px;
+  left: -60px;
+  top: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sea-chart-pivot-table .pivot-cell {
+  position: relative;
+  overflow: hidden;
+}
+
+.sea-chart-pivot-table .pivot-cell:hover {
+  cursor: pointer;
+}
+
+.sea-chart-pivot-table .selected-pivot-cell {
+  border-bottom: 1px solid #66afe9;
+  border-right: 1px solid #66afe9;
+}
+
+.sea-chart-pivot-table .selected-pivot-cell-top {
+  border-bottom: 1px solid #66afe9;
+}
+
+.sea-chart-pivot-table .selected-pivot-cell-left {
+  border-right: 1px solid #66afe9 ;
+}
+
+.sea-chart-pivot-table .selected-pivot-cell-border {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border: 1px solid #66afe9;
+}
+
+.sea-chart-pivot-table .pivot-empty-cell i {
+  display: inline-block;
+  height: 6px;
+  width: 16px;
+  border-radius: 6px;
+  background: #f1f1f1;
+}
+
+.sea-chart-pivot-table td>div {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  font-size: 13px;
+  max-width: 100%;
+}

package/dist/view/wrapper/table/index.js

@@ -0,0 +1,31 @@
+import React, { PureComponent } from 'react';
+import TwoDimensionTable from './two-dimension-table';
+import OneDimensionTableNoNumericColumns from './one-dimension-table-no-numeric-columns';
+import OneDimensionTableWithNumericColumns from './one-dimension-table-with-numeric-columns';
+import intl from '../../../intl';
+import './index.css';
+class Table extends PureComponent {
+  render() {
+    const {
+      groupbyColumn,
+      columnGroupbyColumn,
+      result
+    } = this.props;
+    const {
+      pivot_columns
+    } = result;
+    if (!groupbyColumn) return '';
+    if (Array.isArray(pivot_columns) && pivot_columns.length > 100) {
+      return /*#__PURE__*/React.createElement("div", null, intl.get('There_are_too_many_statistics_entries_to_display'));
+    }
+    if (columnGroupbyColumn) {
+      return /*#__PURE__*/React.createElement(TwoDimensionTable, this.props);
+    }
+    if (!Array.isArray(pivot_columns)) return null;
+    if (pivot_columns.length < 2) {
+      return /*#__PURE__*/React.createElement(OneDimensionTableNoNumericColumns, this.props);
+    }
+    return /*#__PURE__*/React.createElement(OneDimensionTableWithNumericColumns, this.props);
+  }
+}
+export default Table;

package/dist/view/wrapper/table/one-dimension-table-no-numeric-columns.js

@@ -0,0 +1,144 @@
+import React, { PureComponent } from 'react';
+import classnames from 'classnames';
+import PivotTableDisplayName from './pivot-table-display-name';
+import { ChartUtils, ObjectUtils } from '../../../utils';
+import intl from '../../../intl';
+class OneDimensionTableNoNumericColumns extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.renderHeader = () => {
+      const {
+        groupbyColumn,
+        selectedCell
+      } = this.props;
+      const {
+        name: groupName
+      } = groupbyColumn;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const isSelectedTotalCellBottom = selectRowIdx === 0 && selectedCellIdx === 0;
+      return /*#__PURE__*/React.createElement("thead", {
+        className: "seatable-table-header-sm"
+      }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: "pivot-table-header"
+      }, groupName), /*#__PURE__*/React.createElement("th", {
+        className: classnames('pivot-table-header', {
+          'selected-pivot-cell-top': isSelectedTotalCellBottom
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total')))));
+    };
+    this.toggleRecords = (cell, selectedCell) => {
+      if (window.isMobile) return;
+      const {
+        rowIdx: selectedRowIdx,
+        cellIdx: selectedCellIdx
+      } = this.props.selectedCell || {};
+      const {
+        rowIdx,
+        cellIdx
+      } = selectedCell;
+      if (rowIdx === selectedRowIdx && selectedCellIdx === cellIdx) return;
+      this.props.toggleRecords(cell, selectedCell);
+    };
+    this.onClickTotals = (recordsList, selectedCell) => {
+      if (window.isMobile) return;
+      const rows = recordsList.flat();
+      const total = rows.length;
+      this.toggleRecords({
+        rows,
+        total
+      }, selectedCell);
+    };
+    this.renderRows = () => {
+      const {
+        result,
+        groupbyColumn,
+        selectedCell,
+        summaryColumn
+      } = this.props;
+      const {
+        pivot_rows,
+        pivot_columns_total
+      } = result;
+      const {
+        rowIdx: selectRowIdx,
+        cellIdx: selectedCellIdx
+      } = selectedCell || {};
+      const pivotRowsLen = Array.isArray(pivot_rows) ? pivot_rows.length : 0;
+      let pivotColumnCells = [];
+      const isSelectRowTotalCellRight = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      const isSelectTotal = selectRowIdx === pivotRowsLen && selectedCellIdx === 0;
+      // eslint-disable-next-line
+      const total = ObjectUtils.hasOwnProperty(pivot_columns_total, 'total') ? pivot_columns_total['total'] : 0;
+      const summaryDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, total);
+      const isValidSummaryDisplayValue = ChartUtils.isValidValue(summaryDisplayValue);
+      return /*#__PURE__*/React.createElement("tbody", null, pivotRowsLen > 0 && pivot_rows.map((rowItem, rowIdx) => {
+        const {
+          name,
+          total,
+          rows
+        } = rowItem;
+        let isSelectedRowNameRight = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        // let pivotRowCells = [];
+        let isSelectedTotalCell = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        let isSelectedTotalCellTop = selectRowIdx - 1 === rowIdx && selectedCellIdx === 0;
+        let isSelectedTotalCellLeft = selectRowIdx === rowIdx && selectedCellIdx === 0;
+        pivotColumnCells[rowIdx] = rows;
+        const totalDisplayValue = ChartUtils.getSummaryValueDisplayString(summaryColumn, total.total);
+        const isValidTotalDisplayValue = ChartUtils.isValidValue(totalDisplayValue);
+        return /*#__PURE__*/React.createElement("tr", {
+          key: 'table-row-' + rowIdx
+        }, /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-row-name', {
+            'selected-pivot-cell-left': isSelectedRowNameRight
+          })
+        }, /*#__PURE__*/React.createElement(PivotTableDisplayName, {
+          value: name,
+          column: groupbyColumn
+        })), /*#__PURE__*/React.createElement("td", {
+          className: classnames('pivot-cell', {
+            'pivot-empty-cell': !isValidTotalDisplayValue,
+            'selected-pivot-cell': isSelectedTotalCell,
+            'selected-pivot-cell-top': isSelectedTotalCellTop,
+            'selected-pivot-cell-left': isSelectedTotalCellLeft
+          })
+          // onClick={() => this.toggleRecords({rows: Array.isArray(rows) && rows.length > 0 ? rows : pivotRowCells, total: total}, {rowIdx, cellIdx: 0})}
+          ,
+          total: totalDisplayValue
+        }, isValidTotalDisplayValue ? totalDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+          className: classnames({
+            'selected-pivot-cell-border': isSelectedTotalCell
+          })
+        })));
+      }), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-column-total', {
+          'selected-pivot-cell-left': isSelectRowTotalCellRight
+        })
+      }, /*#__PURE__*/React.createElement("div", null, intl.get('Total'))), /*#__PURE__*/React.createElement("td", {
+        className: classnames('pivot-cell pivot-table-total', {
+          'pivot-empty-cell': !isValidSummaryDisplayValue,
+          'selected-pivot-cell': isSelectTotal
+        })
+        // onClick={() => this.onClickTotals(pivotColumnCells, {rowIdx: pivot_rows.length, cellIdx: 0})}
+        ,
+        title: isValidSummaryDisplayValue ? summaryDisplayValue : ''
+      }, isValidSummaryDisplayValue ? summaryDisplayValue : /*#__PURE__*/React.createElement("i", null), /*#__PURE__*/React.createElement("span", {
+        className: classnames({
+          'selected-pivot-cell-border': isSelectTotal
+        })
+      }))));
+    };
+  }
+  render() {
+    const {
+      groupbyColumn
+    } = this.props;
+    if (!groupbyColumn) return '';
+    return /*#__PURE__*/React.createElement("table", {
+      className: "sea-chart-pivot-table"
+    }, this.renderHeader(), this.renderRows());
+  }
+}
+export default OneDimensionTableNoNumericColumns;