sea-chart 0.0.19 → 0.0.20

package/dist/view/index.css

@@ -1,14 +1,15 @@
 .sea-chart-formatter {
   height: 100%;
   width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  position: relative;
 }
 
 .sea-chart-formatter-tip {
   background-color: #F5F5F5;
   border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .sea-chart-formatter.error {
@@ -23,14 +24,23 @@
   overflow: hidden;
 }
 
+.sea-chart-formatter .sea-chart-cavans-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
 .sea-chart-formatter .sea-chart-table-formatter-container {
   overflow: scroll;
 }
 
 .sea-chart-formatter .sea-chart-container {
-  flex: 1;
   font-size: 12px;
-  padding: 20px 40px 50px 50px;
+  position: absolute;
+  left: 2%;
+  right: 2%;
+  top: 2%;
+  bottom: 8%;
 }
 
 .sea-chart-formatter .sea-chart-container.show-x-axis-label,
@@ -64,5 +74,5 @@
 }
 
 .sea-chart-formatter .sea-chart-completeness-chart {
-  padding-right: 20px;
+  padding-right: 0.5%;
 }

package/dist/view/index.js

@@ -138,17 +138,17 @@ class View extends React.PureComponent {
     if (errorMessage) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get(errorMessage));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get(errorMessage)));
     }
     if (tipMessage) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get(tipMessage));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get(tipMessage)));
     }
     if (BaseUtils.imEmptyChartResult(data) && !chartType.includes('map')) {
       return /*#__PURE__*/React.createElement("div", {
         className: classnames('error', validClassName, tipBackgroundColorClassName)
-      }, intl.get('There_are_no_statistic_results_yet'));
+      }, /*#__PURE__*/React.createElement("span", null, intl.get('There_are_no_statistic_results_yet')));
     }
     return /*#__PURE__*/React.createElement("div", {
       className: validClassName
@@ -156,13 +156,15 @@ class View extends React.PureComponent {
       className: classnames('sea-chart-formatter-container', "sea-chart-".concat(chart === null || chart === void 0 ? void 0 : (_chart$config2 = chart.config) === null || _chart$config2 === void 0 ? void 0 : _chart$config2.type, "-formatter-container"))
     }, /*#__PURE__*/React.createElement(Title, {
       chart: chart
-    }), /*#__PURE__*/React.createElement(Wrapper, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "sea-chart-cavans-container"
+    }, /*#__PURE__*/React.createElement(Wrapper, {
       chart: chart,
       data: data,
       tables: tables,
       canvasStyle: canvasStyle,
       customRender: render
-    })));
+    }))));
   }
 }
 const propTypes = {

package/dist/view/wrapper/area.js

@@ -1,4 +1,3 @@
-import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { CHART_SUMMARY_SHOW, CHART_SUMMARY_TYPE } from '../../constants';
@@ -24,7 +23,7 @@ class Area extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -164,14 +163,8 @@ class Area extends ChartComponent {
     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)
-      }),
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }

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

@@ -21,7 +21,7 @@ class BarCustom extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0]; // used to display value on the top
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
       this.initChart(this.container, {
         appendPadding
       });
@@ -192,7 +192,7 @@ class BarCustom extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

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

@@ -24,7 +24,7 @@ class BarGroup extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -209,7 +209,7 @@ class BarGroup extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/bar.js

@@ -21,7 +21,7 @@ class Bar extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0]; // used to display value on the top
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0]; // used to display value on the top
       this.initChart(this.container, {
         appendPadding
       });
@@ -132,7 +132,7 @@ class Bar extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/combination.js

@@ -389,7 +389,7 @@ class Combination extends React.Component {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-left-label': this.isShowYAxisLeftLabel(chart),
         'show-y-axis-right-label': this.isShowYAxisRightLabel(chart)

package/dist/view/wrapper/compare.js

@@ -250,7 +250,7 @@ class Compare extends ChartComponent {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),

package/dist/view/wrapper/completeness.js

@@ -29,7 +29,7 @@ export default function Completeness(props) {
           style_config
         }
       } = props;
-      chartPaddingTop = ((_style_config$title = style_config.title) === null || _style_config$title === void 0 ? void 0 : _style_config$title.text) ? 47 : 30;
+      chartPaddingTop = ((_style_config$title = style_config.title) === null || _style_config$title === void 0 ? void 0 : _style_config$title.text) ? 17 : 0;
       const appendPadding = [chartPaddingTop, 30, 0, 0];
       currentChart.initChart(chartContainerRef.current, {
         appendPadding
@@ -157,7 +157,7 @@ export default function Completeness(props) {
     };
   }, [props]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-completeness-chart sea-chart-container w-100'),
+    className: classnames('sea-chart-completeness-chart sea-chart-container '),
     ref: chartContainerRef
   });
 }

package/dist/view/wrapper/dashboard.js

@@ -159,7 +159,7 @@ class Dashboard extends Component {
   render() {
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: "sea-chart-container w-100"
+      className: "sea-chart-container "
     });
   }
 }

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

@@ -21,7 +21,7 @@ class HorizontalBarGroup extends HorizontalComponent {
       const {
         display_data
       } = chart.config;
-      this.chartTopPadding = display_data ? 47 : 30;
+      this.chartTopPadding = display_data ? 17 : 0;
       const appendPadding = [this.chartTopPadding, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
@@ -154,7 +154,7 @@ class HorizontalBarGroup extends HorizontalComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: 'sea-chart-container w-100',
+      className: 'sea-chart-container ',
       ref: ref => this.container = ref
     });
   }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { debounce } from 'lodash-es';
 import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
@@ -21,7 +20,7 @@ class HorizontalBar extends HorizontalComponent {
       const {
         display_data
       } = chart.config;
-      const appendPadding = [0, display_data ? 47 : 30, 0, 0]; // used to display value on the right
+      const appendPadding = [0, display_data ? 17 : 0, 0, 0]; // used to display value on the right
       this.initChart(this.container, {
         appendPadding
       });
@@ -132,7 +131,7 @@ class HorizontalBar extends HorizontalComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100'),
+      className: 'sea-chart-container',
       ref: ref => this.container = ref
     });
   }

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

@@ -14,7 +14,7 @@ class LineGroup extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -142,7 +142,7 @@ class LineGroup extends ChartComponent {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),

package/dist/view/wrapper/line.js

@@ -14,7 +14,7 @@ class Line extends ChartComponent {
       const {
         y_axis_show_value
       } = chart.config;
-      const appendPadding = [y_axis_show_value ? 47 : 30, 0, 0, 0];
+      const appendPadding = [y_axis_show_value ? 17 : 0, 0, 0, 0];
       this.initChart(this.container, {
         appendPadding
       });
@@ -151,7 +151,7 @@ class Line extends ChartComponent {
       chart
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames('sea-chart-container w-100', {
+      className: classnames('sea-chart-container ', {
         'show-x-axis-label': this.isShowXAxisLabel(chart),
         'show-y-axis-label': this.isShowYAxisLabel(chart)
       }),

package/dist/view/wrapper/map.js

@@ -316,7 +316,7 @@ export default function Map(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
     className: 'statistic-chart-loading-container'
   }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-container w-100'),
+    className: classnames('sea-chart-container '),
     ref: chartContainerRef
   }));
 }

package/dist/view/wrapper/pie.js

@@ -169,7 +169,7 @@ class Pie extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container w-100",
+      className: "sea-chart-container ",
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/ring.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CHART_LABEL_POSITIONS, CHART_LABEL_FORMATS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
-import ChartComponent from './chart-component';
 import intl from '../../intl';
+import ChartComponent from './chart-component';
 class Ring extends ChartComponent {
   constructor(props) {
     var _this;
@@ -248,7 +248,7 @@ class Ring extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container w-100",
+      className: "sea-chart-container ",
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/scatter.js

@@ -121,7 +121,7 @@ export function Scatter(props) {
   const showXLabel = chartRef.current.isShowXAxisLabel(chart);
   const showYLabel = chartRef.current.isShowYAxisLabel(chart);
   return /*#__PURE__*/React.createElement("div", {
-    className: classnames('sea-chart-container w-100', {
+    className: classnames('sea-chart-container ', {
       'show-x-axis-label': showXLabel,
       'show-y-axis-label': showYLabel
     }),

package/dist/view/wrapper/treemap.js

@@ -171,7 +171,7 @@ class Treemap extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container w-100",
+      className: "sea-chart-container ",
       ref: ref => this.container = ref
     });
   }

package/dist/view/wrapper/world-map.js

@@ -334,7 +334,7 @@ class WorldMap extends ChartComponent {
   }
   render() {
     return /*#__PURE__*/React.createElement("div", {
-      className: "sea-chart-container w-100",
+      className: "sea-chart-container ",
       ref: ref => this.container = ref
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",