sea-chart 0.0.1 → 0.0.2

package/dist/view/wrapper/pie.js

@@ -0,0 +1,185 @@
+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 Pie extends ChartComponent {
+  constructor(props) {
+    super(props);
+    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,
+        theme,
+        summaryColumn
+      } = this.props;
+      if (data.length === 0) return;
+      this.chart.coordinate('theta', {
+        radius: 0.95
+      });
+      const {
+        show_legend,
+        display_label,
+        label_position,
+        label_font_size,
+        summary_method
+      } = chart.config;
+      const {
+        data: newData,
+        colorSet
+      } = ChartUtils.formatPieChartData(data, chart, tables);
+      if (!Array.isArray(newData)) return;
+      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: theme.textColor
+            }
+          },
+          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.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.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.destroyChart();
+      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
+    });
+  }
+}
+Pie.propTypes = {
+  canvasStyle: PropTypes.object,
+  chart: PropTypes.object,
+  groupbyColumn: PropTypes.object,
+  summaryColumn: PropTypes.object,
+  result: PropTypes.array,
+  tables: PropTypes.array,
+  theme: PropTypes.object,
+  toggleRecords: PropTypes.func
+};
+export default Pie;

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/{lib/components/formatter → dist/view/wrapper}/table/index.css

@@ -1,23 +1,23 @@
-.seastatistic-pivot-table {
+.sea-chart-pivot-table {
   width: 100%;
   position: relative;
 }
 
-.seastatistic-pivot-table thead {
+.sea-chart-pivot-table thead {
   border-top: 1px solid #ccc;
 }
 
-.seastatistic-pivot-table tr {
+.sea-chart-pivot-table tr {
   border-bottom: 1px solid #ccc;
   text-align: center;
 }
 
-.seastatistic-pivot-table th {
+.sea-chart-pivot-table th {
   color: #212529;
 }
 
-.seastatistic-pivot-table th,
-.seastatistic-pivot-table td {
+.sea-chart-pivot-table th,
+.sea-chart-pivot-table td {
   padding: 10px;
   border-right: 1px solid #ccc;
   border-left: 1px solid #ccc;
@@ -32,18 +32,18 @@
   text-align: center;
 }
 
-.seastatistic-pivot-table .column-title,
-.seastatistic-pivot-table .row-title {
+.sea-chart-pivot-table .column-title,
+.sea-chart-pivot-table .row-title {
   padding: 0;
   text-align: center;
   color: inherit;
 }
 
-.seastatistic-pivot-table .column-title {
+.sea-chart-pivot-table .column-title {
   caption-side: top;
 }
 
-.seastatistic-pivot-table .row-title {
+.sea-chart-pivot-table .row-title {
   position: absolute;
   transform: rotate(-90deg);
   width: 100px;
@@ -54,29 +54,29 @@
   text-overflow: ellipsis;
 }
 
-.seastatistic-pivot-table .pivot-cell {
+.sea-chart-pivot-table .pivot-cell {
   position: relative;
   overflow: hidden;
 }
 
-.seastatistic-pivot-table .pivot-cell:hover {
+.sea-chart-pivot-table .pivot-cell:hover {
   cursor: pointer;
 }
 
-.seastatistic-pivot-table .selected-pivot-cell {
+.sea-chart-pivot-table .selected-pivot-cell {
   border-bottom: 1px solid #66afe9;
   border-right: 1px solid #66afe9;
 }
 
-.seastatistic-pivot-table .selected-pivot-cell-top {
+.sea-chart-pivot-table .selected-pivot-cell-top {
   border-bottom: 1px solid #66afe9;
 }
 
-.seastatistic-pivot-table .selected-pivot-cell-left {
+.sea-chart-pivot-table .selected-pivot-cell-left {
   border-right: 1px solid #66afe9 ;
 }
 
-.seastatistic-pivot-table .selected-pivot-cell-border {
+.sea-chart-pivot-table .selected-pivot-cell-border {
   display: inline-block;
   width: 100%;
   height: 100%;
@@ -86,7 +86,7 @@
   border: 1px solid #66afe9;
 }
 
-.seastatistic-pivot-table .pivot-empty-cell i {
+.sea-chart-pivot-table .pivot-empty-cell i {
   display: inline-block;
   height: 6px;
   width: 16px;
@@ -94,7 +94,7 @@
   background: #f1f1f1;
 }
 
-.seastatistic-pivot-table td>div {
+.sea-chart-pivot-table td>div {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

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;