sea-chart 0.0.1 → 0.0.2

package/dist/view/title/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { isNumber } from 'dtable-utils';
+import classnames from 'classnames';
+import { HORIZONTAL_ALIGNS, HORIZONTAL_ALIGN, DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, SUPPORT_TITLE_CHART_TYPES } from '../../constants';
+import './index.css';
+const Title = _ref => {
+  let {
+    chart,
+    className
+  } = _ref;
+  const getTitleStyle = useCallback(() => {
+    let style = {
+      fontSize: "".concat(DEFAULT_CHART_TITLE_FONT_SIZE, "px"),
+      fontWeight: DEFAULT_CHART_FONT_WEIGHT
+    };
+    if (!chart || !chart.style_config || !chart.style_config.title) {
+      return style;
+    }
+    const {
+      font_size,
+      font_weight,
+      horizontal_align
+    } = chart.style_config.title;
+    if (isNumber(font_size)) {
+      style.fontSize = font_size < 0 ? 0 : "".concat(font_size, "px");
+    }
+    if (CHART_SUPPORT_FONT_WEIGHTS.includes(font_weight)) {
+      style.fontWeight = font_weight;
+    }
+    style.textAlign = horizontal_align && HORIZONTAL_ALIGNS.includes(horizontal_align) ? horizontal_align : HORIZONTAL_ALIGN.LEFT;
+    return style;
+  }, [chart]);
+  if (!chart) return null;
+  const {
+    type: chartType
+  } = chart.config;
+  const title = chart.style_config && chart.style_config.title;
+  const text = title && title.text;
+  if (!SUPPORT_TITLE_CHART_TYPES.includes(chartType) || !text) return null;
+  const style = getTitleStyle();
+  return /*#__PURE__*/React.createElement("div", {
+    className: classnames('sea-chart-title', className),
+    style: style
+  }, text);
+};
+export default Title;

package/dist/view/wrapper/area.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
+import intl from '../../intl';
+import { ChartUtils } from '../../utils';
+import ChartComponent from './chart-component';
+class Area extends ChartComponent {
+  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('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.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        theme
+      } = this.props;
+      const {
+        y_axis_summary_type,
+        y_axis_summary_method,
+        y_axis_label_color,
+        y_axis_show_value,
+        label_font_size
+      } = chart.config;
+      const chartBarColor = y_axis_label_color || '#2a67d1';
+      this.drawLabels(data);
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      this.chart.line().position('name*value').color(chartBarColor);
+      this.chart.point().label(y_axis_show_value ? 'value' : false, {
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: '#6e6e6e'
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          name
+        };
+      }).shape('circle').style({
+        lineWidth: 1,
+        stroke: '#fff'
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      this.chart.area().position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          name,
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method])
+        };
+      });
+      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.interaction('active-region');
+    };
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.renderAxisLabel(this.props.chart, this.props.tables);
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      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-label': this.isShowYAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+Area.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 Area;

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

@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { EMPTY_NAME } from '../../constants';
+import { ChartUtils } from '../../utils';
+import intl from '../../intl';
+import ChartComponent from './chart-component';
+class BarGroup extends ChartComponent {
+  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('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 {
+        y_axis_summary_method,
+        y_axis_show_value,
+        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(y_axis_show_value ? '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, y_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.interaction('active-region');
+    };
+    this.chart = null;
+    this.groupName = 'group_name';
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+    this.renderAxisLabel(this.props.chart, this.props.tables);
+  }
+  componentDidUpdate(prevProps) {
+    if (ChartUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      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-label': this.isShowYAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+BarGroup.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 BarGroup;

package/dist/view/wrapper/bar.js

@@ -0,0 +1,138 @@
+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 intl from '../../intl';
+import ChartComponent from './chart-component';
+class Bar extends ChartComponent {
+  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]; // used to display value on the top
+      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.renderAxisLabel(this.props.chart, this.props.tables);
+    };
+    this.draw = data => {
+      const {
+        chart,
+        summaryColumn,
+        theme
+      } = this.props;
+      const {
+        y_axis_summary_type,
+        y_axis_summary_method,
+        y_axis_label_color,
+        y_axis_show_value,
+        label_font_size
+      } = chart.config;
+      const chartBarColor = y_axis_label_color || '#2a67d1';
+      this.drawLabels(data);
+
+      // set Coord type
+      this.chart.coordinate('rect');
+      this.autoAdjustDataOptions(chart, data, summaryColumn);
+      this.chart.interval().label(y_axis_show_value ? 'value' : false, {
+        style: {
+          fontSize: ChartUtils.getLabelFontSize(label_font_size),
+          fill: theme.textColor
+        }
+      }).position('name*value').color(chartBarColor).tooltip('name*value', (name, value) => {
+        return {
+          title: y_axis_summary_type === CHART_SUMMARY_TYPE.COUNT ? intl.get('Amount') : intl.get(CHART_SUMMARY_SHOW[y_axis_summary_method]),
+          value: ChartUtils.getSummaryValueDisplayString(summaryColumn, value, y_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.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-x-axis-label': this.isShowXAxisLabel(chart),
+        'show-y-axis-label': this.isShowYAxisLabel(chart)
+      }),
+      ref: ref => this.container = ref
+    });
+  }
+}
+Bar.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 Bar;

package/dist/view/wrapper/basic-number-card.js

@@ -0,0 +1,127 @@
+import React, { Component } from 'react';
+import { isNumber } from 'dtable-utils';
+import { Chart } from '../../utils/custom-g2';
+import { ChartUtils } from '../../utils';
+import intl from '../../intl';
+import { BASIC_NUMBER_CARD_CALCULATION_METHOD, EMPTY_NAME } from '../../constants';
+class BasicNumericCard extends Component {
+  constructor() {
+    super(...arguments);
+    this.componentDidMount = () => {
+      this.drawChart();
+    };
+    this.drawChart = () => {
+      const {
+        theme,
+        chart,
+        result
+      } = this.props;
+      this.chart = new Chart({
+        container: this.container,
+        autoFit: true,
+        width: '100%',
+        height: '100%'
+      });
+      const {
+        config
+      } = chart;
+      const {
+        summary_method,
+        name
+      } = config;
+      let content = null;
+      if (summary_method === 'Distinct_values') {
+        content = isNumber(result) ? result : 0;
+      } else {
+        content = this.formatData(result);
+      }
+      const fontSize = this.getFontSize(content);
+      let labelFontSize = fontSize - 35;
+      if (labelFontSize > 20) {
+        labelFontSize = 20;
+      }
+      if (labelFontSize < 12) {
+        labelFontSize = 12;
+      }
+      this.chart.annotation().html({
+        position: ['50%', '50%'],
+        html: "\n        <div style=\"color: ".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -15px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"font-size: ").concat(labelFontSize, "px;margin: 0;overflow: hidden;text-overflow: ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;\">").concat(name, "</p>\n        </div>\n      ")
+      });
+      this.chart.render();
+    };
+    this.formatData = data => {
+      if (!data && data !== 0) return intl.get(EMPTY_NAME);
+      const {
+        chart,
+        summaryColumn
+      } = this.props;
+      const {
+        summary_method
+      } = chart.config;
+      if (summary_method !== BASIC_NUMBER_CARD_CALCULATION_METHOD) {
+        const formattedContent = ChartUtils.getSummaryValueDisplayString(summaryColumn, data, summary_method);
+        return formattedContent;
+      }
+      let string = data + '';
+      const isFloat = string.indexOf('.') > 0;
+      if (isFloat) {
+        string = string.slice(0, string.indexOf('.'));
+      }
+      let content = '';
+      let endPoint = -3;
+      let startPoint = 0;
+      let subString = string.slice(endPoint);
+      while (subString.length === 3) {
+        content = ',' + subString + content;
+        startPoint = endPoint;
+        endPoint -= 3;
+        subString = string.slice(endPoint, startPoint);
+      }
+      content = subString + content;
+      if (content[0] === ',') {
+        content = content.slice(1);
+      }
+      if (isFloat) {
+        const initString = data + '';
+        content = content + initString.slice(initString.indexOf('.'));
+      }
+      return content;
+    };
+    this.getFontSize = content => {
+      let canvas = document.createElement('canvas');
+      const context = canvas.getContext('2d');
+      const {
+        width
+      } = this.chart;
+      let font = context.font;
+      let initFontSize = 50;
+      const fontStyle = font.slice(font.indexOf('px'));
+      font = initFontSize + fontStyle;
+      context.font = font;
+      context.fontSize = initFontSize;
+      while (context.measureText(content).width >= width - 40) {
+        initFontSize -= 1;
+        context.font = initFontSize + fontStyle;
+        context.fontSize = initFontSize;
+      }
+      canvas = null;
+      if (initFontSize < 16) {
+        initFontSize = 16;
+      }
+      return initFontSize;
+    };
+  }
+  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 plugin-number-card"
+    });
+  }
+}
+export default BasicNumericCard;