dtable-statistic 4.0.2-test-2

package/es/stat-view/map.js

@@ -0,0 +1,428 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import DataSet from '@antv/data-set/lib/index';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { COLOR_OPTIONS, DEFAULT_NUMBER_FORMAT_OBJECT, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE } from '../constants';
+var WIDTH = 798;
+var HEIGHT = 520;
+var Map = /*#__PURE__*/function (_BaseChart) {
+  _inherits(Map, _BaseChart);
+  var _super = _createSuper(Map);
+  function Map(props) {
+    var _this;
+    _classCallCheck(this, Map);
+    _this = _super.call(this, props);
+    _this.fixData = function (statisticData) {
+      if (!statisticData) return [];
+      var statisticNewData = [];
+      var sum = 0;
+      var statItem = _this.props.statItem;
+      var type = statItem.type;
+      statisticData.forEach(function (item, index) {
+        if (item && item.name) {
+          var matchFeature = _this.mapData.features.find(function (feature) {
+            return feature.properties.name.indexOf(item.name) > -1;
+          });
+          if (matchFeature) {
+            statisticNewData.push({
+              name: matchFeature.properties.name,
+              value: item.value || 0
+            });
+            if (type === 'map_bubble') {
+              sum += item.value;
+            }
+          }
+        }
+      });
+      if (type === 'map_bubble') {
+        statisticNewData.sum = sum;
+      }
+      return statisticNewData;
+    };
+    _this.renderCommonMap = function (data) {
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        statItem = _this$props.statItem,
+        theme = _this$props.theme,
+        isEnlarge = _this$props.isEnlarge,
+        isPreview = _this$props.isPreview;
+      var userDataView = _this.dataSet.getView('statisticViewModel').source(data).transform({
+        geoDataView: _this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.region',
+        as: ['longitude', 'latitude']
+      });
+      var _this$props$statItem = _this.props.statItem,
+        table_id = _this$props$statItem.table_id,
+        data_color = _this$props$statItem.data_color,
+        summary_type = _this$props$statItem.summary_type,
+        summary_column = _this$props$statItem.summary_column;
+      var currentColorOption = COLOR_OPTIONS.filter(function (item) {
+        return item.name == data_color;
+      })[0] || COLOR_OPTIONS[0];
+      var exampleColors = currentColorOption.exampleColors,
+        highlightedBorderColor = currentColorOption.highlightedBorderColor;
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.statisticView = _this.chart.createView();
+      _this.statisticView.data(userDataView.rows);
+      _this.statisticView.polygon().position('longitude*latitude').color('value', "".concat(exampleColors[0], "-").concat(exampleColors[4], "-").concat(exampleColors[8])).style({
+        lineWidth: 1,
+        stroke: '#bdbdbd',
+        strokeOpacity: 0.5
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: highlightedBorderColor
+          }
+        }
+      }).tooltip('name*value*color', function (name, value, color) {
+        return {
+          name: name,
+          value: getNumberDisplayString(value, columnData),
+          color: color
+        };
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var legendDirection = statItem.legend_direction || 'vertical';
+      var size = statItem.legend_size || 1;
+      _this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'color',
+          defaultLength: 100 * size
+        },
+        label: {
+          spacing: 2,
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: function formatter(value) {
+            return getNumberDisplayString(value, columnData);
+          }
+        },
+        handler: {
+          style: {
+            'opacity': 0
+          }
+        }
+      });
+      _this.statisticView.interaction('element-active');
+      _this.statisticView.render();
+    };
+    _this.updateStatisticData = function (data) {
+      // re-render statistic data view;
+      if (_this.statisticView) {
+        _this.statisticView.destroy();
+      }
+      if (data.length === 0) {
+        _this.chart.legend(false);
+        _this.chart.render();
+        return;
+      }
+      var statItem = _this.props.statItem;
+      var mapType = statItem.type;
+      if (!mapType.includes('bubble')) {
+        _this.renderCommonMap(data);
+      } else {
+        _this.renderBubbleMap(data);
+      }
+      _this.chart.render();
+    };
+    _this.renderBubbleMap = function (data) {
+      var _this$props2 = _this.props,
+        getTableById = _this$props2.getTableById,
+        statItem = _this$props2.statItem,
+        isPreview = _this$props2.isPreview,
+        isEnlarge = _this$props2.isEnlarge,
+        theme = _this$props2.theme;
+      var userDv = _this.dataSet.createView().source(data).transform({
+        geoDataView: _this.dataSet.getView('mapDataModel'),
+        field: 'name',
+        type: 'geo.centroid',
+        as: ['longitude', 'latitude']
+      });
+      var _this$props$statItem2 = _this.props.statItem,
+        table_id = _this$props$statItem2.table_id,
+        summary_type = _this$props$statItem2.summary_type,
+        summary_column = _this$props$statItem2.summary_column;
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.statisticView = _this.chart.createView();
+      _this.statisticView.data(userDv.rows);
+      _this.statisticView.point().position('longitude*latitude').size('value', function (value) {
+        var percent = value / data.sum;
+        var size = percent * 100;
+        if (isPreview && size > 60) {
+          size = 60;
+        }
+        return size;
+      }).shape('circle').color(statItem.bubble_color || '#2a67d1').tooltip('name*value*color', function (name, value, color) {
+        return {
+          name: name,
+          value: getNumberDisplayString(value, columnData),
+          color: color
+        };
+      }).style({
+        fillOpacity: 0.6,
+        stroke: statItem.bubble_color || '#2a67d1'
+      }).state({
+        active: {
+          style: {
+            lineWidth: 1,
+            stroke: statItem.bubble_color || '#2a67d1',
+            fillOpacity: 0.9
+          }
+        }
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var legendDirection = statItem.legend_direction || 'vertical';
+      var size = statItem.legend_size || 1;
+      _this.chart.legend({
+        layout: legendDirection,
+        position: legendDirection === 'vertical' ? 'left-bottom' : 'bottom-left',
+        rail: {
+          type: 'size',
+          defaultLength: 100 * size
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          align: legendDirection === 'vertical' ? 'right' : 'bottom',
+          formatter: function formatter(value) {
+            return getNumberDisplayString(value, columnData);
+          }
+        },
+        handler: {
+          style: {
+            'opacity': 0
+          }
+        }
+      });
+      _this.statisticView.interaction('element-active');
+      _this.statisticView.render();
+    };
+    _this.getCanvasSize = function () {
+      var maxWidth = _this.container.clientWidth;
+      var maxHeight = _this.container.clientHeight;
+      var h = maxHeight;
+      var w = h * (WIDTH / HEIGHT);
+      if (w > maxWidth) {
+        w = maxWidth;
+        h = w * (HEIGHT / WIDTH);
+      }
+      return {
+        w: w,
+        h: h
+      };
+    };
+    _this.initStatisticContext = function (geolocation) {
+      _this.mapData = geolocation;
+      if (!_this.container) return;
+      // create chart
+      var canvasSize = _this.getCanvasSize();
+      _this.chart = new Chart({
+        container: _this.container,
+        width: canvasSize.w,
+        height: canvasSize.h,
+        padding: [20, 20]
+      });
+      _this.chart.on('element:click', function (e) {
+        var statItem = _this.props.statItem;
+        var data = e.data.data;
+        var clickData = _this.calculateData.find(function (i) {
+          return i.name === data.name;
+        });
+        if (clickData) {
+          _this.props.toggleStatisticRecordsDialog(clickData, statItem);
+        }
+      });
+      _this.chart.tooltip({
+        showTitle: false,
+        showMarkers: false,
+        shared: true,
+        containerTpl: '<div class="g2-tooltip"><div class="g2-tooltip-list"></div></div>',
+        itemTpl: '<div class="g2-tooltip-content"><div class="tooltip-name">{name}<div><div class="tooltip-item">数量: {value}<div></div>',
+        domStyles: {
+          'g2-tooltip': {
+            borderRadius: '2px',
+            backgroundColor: '#fff',
+            padding: '10px'
+          },
+          'tooltip-item': {
+            marginTop: '5px'
+          }
+        }
+      });
+      _this.chart.scale({
+        longitude: {
+          sync: true
+        },
+        latitude: {
+          sync: true
+        }
+      });
+      _this.chart.axis(false);
+      _this.dataSet = new DataSet();
+
+      // transform map data
+      var mapData = _this.dataSet.createView('mapDataModel').source(geolocation, {
+        type: 'GeoJSON'
+      });
+      var mapView = _this.chart.createView();
+
+      // draw background map
+      mapView.data(mapData.rows);
+      mapView.tooltip(false);
+      mapView.polygon().position('longitude*latitude').style({
+        fill: '#e2e2e2',
+        stroke: '#bdbdbd',
+        lineWidth: 1
+      });
+      _this.dataSet.createView('statisticViewModel');
+      mapView.render();
+    };
+    _this.getGeoLocationData = function () {
+      var mediaUrl = window.dtable.mediaUrl;
+      return fetch("".concat(mediaUrl, "dtable-statistic/geolocation/china.json")).catch(function (err) {});
+    };
+    _this.state = {
+      isDataLoaded: false,
+      isCalculatingData: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(Map, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      this.getGeoLocationData().then(function (res) {
+        return res && res.json();
+      }).then(function (data) {
+        _this2.setState({
+          isDataLoaded: true
+        }, function () {
+          if (!data) return;
+          _this2.initStatisticContext(data);
+          if (_this2.container) {
+            chartCalculator.calculate(statItem).then(function (data) {
+              _this2.calculateData = data;
+              _this2.updateStatisticData(_this2.fixData(data));
+              _this2.setState({
+                isCalculatingData: false
+              });
+            });
+          }
+        });
+      });
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.canUpdate(this.props, nextProps) && nextState.isDataLoaded === this.state.isDataLoaded) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      if (!this.chart || !this.dataSet) return;
+      var _this$props4 = this.props,
+        statItem = _this$props4.statItem,
+        chartCalculator = _this$props4.chartCalculator;
+      var isCalculatingData = this.state.isCalculatingData;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(function (statData) {
+            _this3.calculateData = statData;
+            _this3.setState({
+              isCalculatingData: false
+            });
+            _this3.updateStatisticData(_this3.fixData(statData));
+            if (_this3.props.isPreview) {
+              var canvasSize = _this3.getCanvasSize();
+              _this3.chart.changeSize(canvasSize.w, canvasSize.h);
+            }
+          });
+        }
+      } else {
+        this.updateStatisticData(this.fixData(this.calculateData));
+        if (this.props.isPreview) {
+          var canvasSize = this.getCanvasSize();
+          this.chart.changeSize(canvasSize.w, canvasSize.h);
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+      this.setState = function () {};
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$state = this.state,
+        isDataLoaded = _this$state.isDataLoaded,
+        isCalculatingData = _this$state.isCalculatingData;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (!isDataLoaded || isCalculatingData) && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref) {
+          return _this4.container = _ref;
+        },
+        className: "statistic-chart-container d-flex justify-content-around align-items-center w-100 h-100"
+      }));
+    }
+  }]);
+  return Map;
+}(BaseChart);
+Map.propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+export default Map;

package/es/stat-view/mirror.js

@@ -0,0 +1,285 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import React from 'react';
+import PropTypes from 'prop-types';
+import intl from 'react-intl-universal';
+import { TableUtils, getNumberDisplayString } from 'dtable-store';
+import BaseChart from './base-chart';
+import { Chart } from '../custom-g2';
+import { Loading } from '../components';
+import { DEFAULT_NUMBER_FORMAT_OBJECT, NO_STATISTIC_RESULTS, STATISTICS_COUNT_SHOW, STAT_ITEM_THEME_COLORS, SUMMARY_TYPE, TITLE_AMOUNT } from '../constants';
+var Mirror = /*#__PURE__*/function (_BaseChart) {
+  _inherits(Mirror, _BaseChart);
+  var _super = _createSuper(Mirror);
+  function Mirror(props) {
+    var _this;
+    _classCallCheck(this, Mirror);
+    _this = _super.call(this, props);
+    _this.drawChart = function (_ref) {
+      var data = _ref.data,
+        colorSet = _ref.colorSet;
+      var _this$props = _this.props,
+        getTableById = _this$props.getTableById,
+        isPreview = _this$props.isPreview,
+        statItem = _this$props.statItem,
+        isEnlarge = _this$props.isEnlarge,
+        theme = _this$props.theme;
+      var table_id = statItem.table_id,
+        summary_type = statItem.summary_type,
+        summary_method = statItem.summary_method,
+        is_transpose = statItem.is_transpose,
+        summary_column = statItem.summary_column;
+      if (isPreview) {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          padding: is_transpose ? [35, 10, 30, 10] : [10, 100, 30, 10]
+        });
+      } else {
+        _this.chart = new Chart({
+          container: _this.container,
+          autoFit: true,
+          height: 520,
+          width: 800,
+          padding: is_transpose ? [35, 30, 30, 30] : [30, 100, 30, 30]
+        });
+      }
+      _this.chart.on('element:click', function (e) {
+        _this.props.toggleStatisticRecordsDialog(e.data.data, statItem);
+      });
+      var themeColors = STAT_ITEM_THEME_COLORS.light;
+      if (theme === 'dark' && !isEnlarge && isPreview) {
+        themeColors = STAT_ITEM_THEME_COLORS.dark;
+      }
+      var columnData = DEFAULT_NUMBER_FORMAT_OBJECT;
+      if (summary_type === SUMMARY_TYPE.ADVANCED) {
+        var table = getTableById(table_id);
+        var summaryColumn = TableUtils.getTableColumnByKey(table, summary_column) || {};
+        columnData = summaryColumn.data || DEFAULT_NUMBER_FORMAT_OBJECT;
+      }
+      _this.chart.data(data);
+      _this.chart.axis('name', {
+        line: {
+          style: themeColors.gridColor
+        },
+        label: {
+          style: {
+            fill: themeColors.textColor
+          },
+          formatter: function formatter(name) {
+            var label = name;
+            if (name.length > 5) {
+              label = "".concat(name.slice(0, 5), "...");
+            }
+            return label;
+          }
+        }
+      });
+      _this.chart.axis('value', {
+        label: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: themeColors.gridColor
+            }
+          }
+        }
+      });
+      _this.chart.scale({
+        name: {
+          sync: true
+        },
+        value: {
+          sync: true,
+          formatter: function formatter(value) {
+            return getNumberDisplayString(value, columnData);
+          }
+        },
+        group_name: {
+          sync: true
+        },
+        color: {
+          sync: true
+        }
+      });
+      _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.chart.facet('mirror', {
+        fields: ['group_name'],
+        transpose: statItem.is_transpose,
+        padding: 'auto',
+        title: {
+          style: {
+            fill: themeColors.textColor
+          }
+        },
+        eachView: function eachView(view, facet) {
+          if (facet.rowValue && facet.rowValue.length > 5) {
+            facet.rowValue = facet.rowValue.slice(0, 5) + '...';
+          }
+          view.interval().position('name*value').color('group_name', colorSet).tooltip('name*value', function (name, value) {
+            return {
+              title: summary_type === 'count' ? intl.get(TITLE_AMOUNT) : intl.get(STATISTICS_COUNT_SHOW[summary_method]),
+              value: getNumberDisplayString(value, columnData),
+              name: name
+            };
+          }).state({
+            active: {
+              style: function style(element) {
+                return {
+                  fillOpacity: 0.6
+                };
+              }
+            }
+          });
+          view.interaction('active-region');
+        }
+      });
+      _this.chart.legend({
+        itemName: {
+          style: {
+            fill: themeColors.textColor
+          }
+        }
+      });
+      _this.chart.render();
+    };
+    _this.destroyChart = function () {
+      _this.chart.destroy();
+      _this.chart = null;
+    };
+    _this.state = {
+      isCalculatingData: true,
+      showResultDescription: true
+    };
+    _this.calculateData = null;
+    return _this;
+  }
+  _createClass(Mirror, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        statItem = _this$props2.statItem,
+        chartCalculator = _this$props2.chartCalculator;
+      if (this.container) {
+        chartCalculator.calculate(statItem).then(function (data) {
+          var showResultDescription = data.colorSet && data.colorSet.length > 0 ? false : true;
+          _this2.setState({
+            isCalculatingData: false,
+            showResultDescription: showResultDescription
+          }, function () {
+            if (!showResultDescription) {
+              _this2.drawChart(data);
+              _this2.calculateData = data;
+            }
+          });
+        });
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      if (this.canUpdate(this.props, nextProps)) {
+        return true;
+      }
+      if (nextState.isCalculatingData !== this.state.isCalculatingData) {
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(preProps, preState) {
+      var _this3 = this;
+      var _this$props3 = this.props,
+        statItem = _this$props3.statItem,
+        chartCalculator = _this$props3.chartCalculator;
+      var isCalculatingData = this.state.isCalculatingData;
+      if (isCalculatingData !== preState.isCalculatingData) return;
+      if (this.shouldCalculateStatItem(preProps, this.props)) {
+        this.setState({
+          isCalculatingData: true
+        });
+        if (this.container) {
+          chartCalculator.calculate(statItem).then(function (data) {
+            var showResultDescription = data.colorSet && data.colorSet.length > 0 ? false : true;
+            _this3.chart && _this3.destroyChart();
+            _this3.calculateData = data;
+            _this3.setState({
+              isCalculatingData: false,
+              showResultDescription: showResultDescription
+            }, function () {
+              if (!showResultDescription) {
+                _this3.drawChart(data);
+                if (_this3.props.isPreview) _this3.chart.forceFit();
+              }
+            });
+          });
+        }
+      } else {
+        if (!this.state.showResultDescription) {
+          this.chart && this.destroyChart();
+          this.drawChart(this.calculateData);
+          if (this.props.isPreview) {
+            this.chart.forceFit();
+          }
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.container = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+      var _this$state = this.state,
+        isCalculatingData = _this$state.isCalculatingData,
+        showResultDescription = _this$state.showResultDescription;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, isCalculatingData && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-loading-container'
+      }, /*#__PURE__*/React.createElement(Loading, null)), showResultDescription && /*#__PURE__*/React.createElement("div", {
+        className: 'statistic-chart-text'
+      }, intl.get(NO_STATISTIC_RESULTS)), /*#__PURE__*/React.createElement("div", {
+        ref: function ref(_ref2) {
+          return _this4.container = _ref2;
+        },
+        className: "statistic-mirror-chart-container statistic-chart-container"
+      }));
+    }
+  }]);
+  return Mirror;
+}(BaseChart);
+Mirror.propTypes = {
+  isPreview: PropTypes.bool,
+  isEnlarge: PropTypes.bool,
+  theme: PropTypes.string,
+  statItem: PropTypes.object,
+  chartCalculator: PropTypes.object,
+  getTableById: PropTypes.func,
+  toggleStatisticRecordsDialog: PropTypes.func
+};
+export default Mirror;