sea-chart 0.0.1-beta

package/dist/view/wrapper/combination.js

@@ -0,0 +1,399 @@
+import React from 'react';
+import classnames from 'classnames';
+import { getTableById, getTableColumnByKey } from 'dtable-utils';
+import { Chart } from '../../utils/custom-g2';
+import { ChartUtils } from '../../utils';
+import { CHART_SUMMARY_TYPE, LABEL_COLORS, CHART_SUMMARY_SHOW, LABEL_POSITION_TYPE, EMPTY_NAME } from '../../constants';
+import intl from '../../intl';
+class Combination extends React.Component {
+  constructor(props) {
+    super(props);
+    this.clearChart = () => {
+      this.chart.annotation().clear(true);
+      this.chart.clear(true);
+    };
+    this.drawChart = () => {
+      let {
+        result: data
+      } = this.props;
+      this.draw(data);
+    };
+    this.draw = data => {
+      if (!Array.isArray(data)) return;
+      const {
+        chart,
+        theme,
+        tables,
+        themeName
+      } = this.props;
+      const {
+        table_id,
+        y_axis_left_summary_column,
+        y_axis_right_summary_column,
+        y_axis_left_summary_method,
+        y_axis_right_summary_method,
+        y_axis_left_summary_type,
+        y_axis_right_summary_type,
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_auto_range_left,
+        y_axis_min_left,
+        y_axis_max_left,
+        y_axis_auto_range_right,
+        y_axis_min_right,
+        y_axis_max_right,
+        display_data,
+        label_font_size
+      } = chart.config;
+      this.chart = new Chart({
+        container: this.container,
+        autoFit: true,
+        width: '100%',
+        height: '100%',
+        appendPadding: [display_data ? 17 : 0, 0, 0, 0]
+      });
+      const currentTheme = ChartUtils.getCurrentTheme(themeName);
+      this.chart.data(data);
+      this.chart.coordinate('rect');
+      const table = getTableById(tables, table_id);
+      const leftSummaryColumn = getTableColumnByKey(table, y_axis_left_summary_column) || {};
+      const rightSummaryColumn = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+      let leftValueScaleOptions = {
+        formatter: value => {
+          return ChartUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method);
+        }
+      };
+      let rightValueScaleOptions = {
+        formatter: value => {
+          return ChartUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method);
+        }
+      };
+      if (!y_axis_auto_range_left) {
+        leftValueScaleOptions = Object.assign(leftValueScaleOptions, {
+          min: y_axis_min_left,
+          max: y_axis_max_left
+        });
+      }
+      if (!y_axis_auto_range_right) {
+        rightValueScaleOptions = Object.assign(rightValueScaleOptions, {
+          min: y_axis_min_right,
+          max: y_axis_max_right
+        });
+      }
+      this.chart.scale({
+        name: {
+          type: 'cat'
+        },
+        // Automatic adjustment of maximum and minimum values
+        value_left: leftValueScaleOptions,
+        value_right: rightValueScaleOptions
+      });
+      this.chart.axis('name', {
+        label: {
+          style: {
+            fill: theme.textColor
+          },
+          formatter: name => {
+            const isString = typeof name === 'string';
+            if (!isString) name = String(name);
+            if (name === 'undefined') {
+              return intl.get(EMPTY_NAME);
+            }
+            if (name.length > 10) {
+              return "".concat(name.slice(0, 10), "...");
+            }
+            return name;
+          }
+        },
+        line: {
+          style: theme.gridColor
+        }
+      });
+      this.chart.axis('value_left', {
+        grid: {
+          line: {
+            style: {
+              stroke: theme.gridColor
+            }
+          }
+        },
+        label: {
+          style: {
+            fill: theme.textColor
+          }
+        }
+      });
+      this.chart.axis('value_right', {
+        grid: null,
+        label: {
+          style: {
+            fill: theme.textColor
+          }
+        }
+      });
+      let legendPosition = 'bottom';
+      this.chart.legend({
+        custom: true,
+        position: legendPosition,
+        itemName: {
+          style: {
+            fill: theme.textColor
+          }
+        },
+        items: this.getLegend(leftSummaryColumn, rightSummaryColumn, table, currentTheme)
+      });
+      this.chart.interval().position('name*value_left').color('color', color => {
+        if (!y_axis_left_group_by_multiple_numeric_column) {
+          return currentTheme.colors[0];
+        }
+        return color;
+      }).adjust('dodge').tooltip('name*value_left', (name, value) => {
+        return {
+          title: y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_left_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(leftSummaryColumn, value, y_axis_left_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      this.chart.tooltip({
+        showMarkers: false
+      });
+      this.chart.line().position('name*value_right').color(currentTheme.colors[1]).size(3).tooltip('name*value_right', (name, value) => {
+        return {
+          title: y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      this.chart.point().position('name*value_right').color(currentTheme.colors[1]).size(3).shape('circle').label(display_data ? 'value_right' : false, {
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).tooltip('name*value_right', (name, value) => {
+        return {
+          title: y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_right_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(rightSummaryColumn, value, y_axis_right_summary_method),
+          name: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name
+        };
+      });
+      this.chart.removeInteraction('legend-filter');
+      this.chart.render();
+      this.renderAxisLabel();
+    };
+    this.renderAxisLabel = () => {
+      if (!this.chart) return;
+      let {
+        chart,
+        tables
+      } = this.props;
+      const {
+        config
+      } = chart;
+      const {
+        table_id,
+        x_axis_column_key,
+        show_y_axis_left_label,
+        show_y_axis_right_label,
+        x_axis_show_label,
+        y_axis_left_label_position,
+        y_axis_right_label_position,
+        y_axis_left_summary_column,
+        y_axis_right_summary_column,
+        x_axis_label_position,
+        y_axis_left_summary_type,
+        y_axis_right_summary_type
+      } = config;
+      const table = getTableById(tables, table_id);
+      const autoPadding = this.chart.autoPadding;
+      const textColor = '#999';
+      const xAxisID = "chart-x-axis-label_".concat(chart.id);
+      const chartContainer = this.chart.getCanvas().get('container');
+      const xLabel = chartContainer.querySelector("#".concat(xAxisID));
+      if (!xLabel && x_axis_show_label) {
+        const div = document.createElement('div');
+        div.id = xAxisID;
+        div.className = 'chart-axis-label text-truncate';
+        const column = getTableColumnByKey(table, x_axis_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 && x_axis_show_label) {
+        xLabel.setAttribute('style', "color:".concat(textColor, "; width: 100%; text-align: ").concat(x_axis_label_position, "; bottom: -20px; position: absolute"));
+      }
+      if (xLabel && !x_axis_show_label) {
+        xLabel.parentNode.removeChild(xLabel);
+      }
+      const yAxisLeftID = "chart-y-axis-left-label_".concat(chart.id);
+      const yAxisLeftLabel = chartContainer.querySelector("#".concat(yAxisLeftID));
+      if (!yAxisLeftLabel && show_y_axis_left_label) {
+        const div = document.createElement('div');
+        div.id = yAxisLeftID;
+        div.className = 'chart-axis-label text-truncate';
+        if (y_axis_left_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
+        } else {
+          const column = getTableColumnByKey(table, y_axis_left_summary_column) || {};
+          div.innerHTML = column.name || '';
+        }
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_left_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_left_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 (yAxisLeftLabel && show_y_axis_left_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_left_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_left_label_position === 'top') textAlign = 'right';
+        yAxisLeftLabel.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 (yAxisLeftLabel && !show_y_axis_left_label) {
+        yAxisLeftLabel.parentNode.removeChild(yAxisLeftLabel);
+      }
+      const yAxisRightID = "chart-y-axis-right-label_".concat(chart.id);
+      const yAxisRightLabel = chartContainer.querySelector("#".concat(yAxisRightID));
+      if (!yAxisRightLabel && show_y_axis_right_label) {
+        const div = document.createElement('div');
+        div.id = yAxisRightID;
+        div.className = 'chart-axis-label text-truncate';
+        if (y_axis_right_summary_type === CHART_SUMMARY_TYPE.COUNT) {
+          div.innerHTML = intl.get('Amount');
+        } else {
+          const column = getTableColumnByKey(table, y_axis_right_summary_column) || {};
+          div.innerHTML = column.name || '';
+        }
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === LABEL_POSITION_TYPE.BOTTOM) textAlign = 'left';
+        if (y_axis_right_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; right: 0; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+        chartContainer.appendChild(div);
+      }
+      if (yAxisRightLabel && show_y_axis_right_label) {
+        const containerHeight = chartContainer.offsetHeight;
+        let textAlign = 'center';
+        if (y_axis_right_label_position === 'bottom') textAlign = 'left';
+        if (y_axis_right_label_position === 'top') textAlign = 'right';
+        yAxisRightLabel.setAttribute('style', "color:".concat(textColor, "; position: absolute; width: ").concat(containerHeight, "px; text-align: ").concat(textAlign, "; top: 0; right: 0; transform: translate(").concat(containerHeight / 2 + 12, "px, ").concat((containerHeight - autoPadding.bottom) / 2 + autoPadding.bottom / 4, "px) rotate(-90deg)"));
+      }
+      if (yAxisRightLabel && !show_y_axis_right_label) {
+        yAxisRightLabel.parentNode.removeChild(yAxisRightLabel);
+      }
+    };
+    this.getLegend = (leftSummaryColumn, rightSummaryColumn, table, currentTheme) => {
+      const {
+        chart
+      } = this.props;
+      const {
+        y_axis_left_group_by_multiple_numeric_column,
+        y_axis_left_group_by_numeric_columns
+      } = chart.config;
+      const legendItems = [];
+      if (!y_axis_left_group_by_multiple_numeric_column) {
+        legendItems.push({
+          value: 'value_left',
+          name: leftSummaryColumn.name || intl.get('Left'),
+          marker: {
+            symbol: 'square',
+            style: {
+              fill: currentTheme.colors[0],
+              r: 5
+            }
+          }
+        }, {
+          value: 'value_right',
+          name: rightSummaryColumn.name || intl.get('Right'),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: currentTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      } else {
+        legendItems.push({
+          value: 'value_left',
+          name: leftSummaryColumn.name || intl.get('Left'),
+          marker: {
+            fill: LABEL_COLORS[0],
+            symbol: 'square',
+            style: {
+              r: 5
+            }
+          }
+        });
+        y_axis_left_group_by_numeric_columns.forEach((item, index) => {
+          const column = getTableColumnByKey(table, item.column_key);
+          if (column) {
+            legendItems.push({
+              value: 'group_name',
+              name: column.name || intl.get('Left'),
+              marker: {
+                symbol: 'square',
+                style: {
+                  fill: LABEL_COLORS[(index + 1) % 12],
+                  r: 5
+                }
+              }
+            });
+          }
+        });
+        legendItems.push({
+          value: 'value_right',
+          name: rightSummaryColumn.name || intl.get('Right'),
+          marker: {
+            symbol: 'hyphen',
+            style: {
+              stroke: currentTheme.colors[1],
+              r: 5,
+              lineWidth: 3
+            }
+          }
+        });
+      }
+      return legendItems;
+    };
+    this.isShowXAxisLabel = chart => {
+      return !!(chart && chart.config && chart.config.x_axis_show_label);
+    };
+    this.isShowYAxisLeftLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_y_axis_left_label);
+    };
+    this.isShowYAxisRightLabel = chart => {
+      return !!(chart && chart.config && chart.config.show_y_axis_right_label);
+    };
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.drawChart();
+    this.renderAxisLabel(this.props.chart, this.props.tables);
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.drawChart();
+      this.renderAxisLabel(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-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
+        'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+export default Combination;

package/dist/view/wrapper/dashboard.js

@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import { isNumber } from 'dtable-utils';
+import { Chart, registerShape } from '../../utils/custom-g2';
+import { ChartUtils } from '../../utils';
+class Dashboard extends Component {
+  constructor() {
+    super(...arguments);
+    this.componentDidMount = () => {
+      this.drawChart();
+    };
+    this.drawChart = () => {
+      const {
+        chart,
+        theme,
+        canvasStyle,
+        result
+      } = this.props;
+      const value = isNumber(result) ? result : 0;
+      const {
+        config
+      } = chart;
+      this.chart = new Chart({
+        container: this.container,
+        autoFit: true,
+        width: '100%',
+        height: '100%'
+      });
+      registerShape('point', 'pointer', {
+        draw(cfg, container) {
+          const group = container.addGroup();
+          const center = this.parsePoint({
+            x: 0,
+            y: 0
+          });
+          group.addShape('line', {
+            attrs: {
+              x1: center.x,
+              y1: center.y - 15,
+              x2: cfg.x,
+              y2: cfg.y - 15,
+              stroke: cfg.color,
+              lineWidth: 5,
+              lineCap: 'round'
+            }
+          });
+          group.addShape('circle', {
+            attrs: {
+              x: center.x,
+              y: center.y - 15,
+              r: 9.75,
+              stroke: cfg.color,
+              lineWidth: 4.5,
+              fill: '#fff'
+            }
+          });
+          return group;
+        }
+      });
+      const number = value > 1 ? 10 : value * 10;
+      const data = [{
+        value: number
+      }];
+      this.chart.data(data);
+      this.chart.scale('value', {
+        min: 0,
+        max: 10,
+        tickInterval: 1
+      });
+      this.chart.coordinate('polar', {
+        startAngle: -9 / 8 * Math.PI,
+        endAngle: 1 / 8 * Math.PI,
+        radius: 0.75
+      });
+      this.chart.axis('1', false);
+      this.chart.axis('value', {
+        line: null,
+        label: {
+          offset: -36,
+          style: {
+            fontSize: 12,
+            textAlign: 'center',
+            textBaseline: 'middle'
+          }
+        },
+        subTickLine: {
+          count: 4,
+          length: -15
+        },
+        tickLine: {
+          length: -24
+        },
+        grid: null,
+        offsetY: -15
+      });
+      this.chart.legend(false);
+      this.chart.point().position('value*1').shape('pointer').color('#1890FF').animate({
+        appear: {
+          animation: 'fade-in'
+        }
+      });
+      this.chart.annotation().arc({
+        top: false,
+        start: [0, 1],
+        end: [10, 1],
+        style: {
+          stroke: '#CBCBCB',
+          lineWidth: 10,
+          lineDash: null
+        },
+        offsetY: -15
+      });
+      this.chart.annotation().arc({
+        start: [0, 1],
+        end: [data[0].value, 1],
+        style: {
+          stroke: '#1890FF',
+          lineWidth: 10,
+          lineDash: null
+        },
+        offsetY: -15
+      });
+      this.chart.annotation().text({
+        position: ['50%', '85%'],
+        content: config.name,
+        style: {
+          fontSize: canvasStyle.height > 240 ? 20 : 12,
+          fill: '#545454',
+          textAlign: 'center'
+        },
+        offsetY: -10
+      });
+      let shownValue = value * 100;
+      const shownDotPos = "".concat(shownValue).indexOf('.');
+      if (shownDotPos > -1 && shownDotPos < "".concat(shownValue).length - 2) {
+        shownValue = shownValue.toFixed(1);
+      }
+      this.chart.annotation().text({
+        position: ['50%', '90%'],
+        content: "".concat(shownValue, " %"),
+        style: {
+          fontSize: canvasStyle.height > 240 ? 36 : 16,
+          fill: theme.textColor,
+          textAlign: 'center'
+        },
+        offsetY: 0
+      });
+      this.chart.render();
+      this.container.title = "".concat(data[0].value * 10, " %");
+    };
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.drawChart();
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref => this.container = ref,
+      className: "sea-chart-container w-100"
+    });
+  }
+}
+export default Dashboard;