sea-chart 1.1.21 → 1.1.22-alpha.2

package/dist/settings/table-element-settings/components/data-filter.js

@@ -0,0 +1,89 @@
+import _DTableFiltersPopover from "dtable-ui-component/lib/DTableFiltersPopover";
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import { getTableById } from 'dtable-utils';
+import { eventStopPropagation, generatorKey } from '../../../utils';
+import intl from '../../../intl';
+import context from '../../../context';
+import { DepartmentsContext } from '../../../utils/contexts';
+import { CHART_TYPE } from '../../../constants';
+import './data-filter.css';
+const DataFilter = _ref => {
+  var _availableFilters;
+  let {
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const [isFilterSetterShow, setIsFilterSetterShow] = useState(false);
+  const {
+    departments
+  } = useContext(DepartmentsContext);
+  const {
+    config
+  } = chart;
+  const {
+    type,
+    table_id,
+    shown_column_keys,
+    filters,
+    filter_conjunction
+  } = config;
+  let availableFilters = [];
+  // some of the filters of TABLE_ELEMENT maybe one of the hidden columns, so we need to filter them out
+  if (shown_column_keys && type === CHART_TYPE.TABLE_ELEMENT) {
+    availableFilters = filters === null || filters === void 0 ? void 0 : filters.filter(filter => shown_column_keys.includes(filter.column_key));
+  } else {
+    availableFilters = filters;
+  }
+  const toggleFilterPopover = useCallback(event => {
+    eventStopPropagation(event);
+    setIsFilterSetterShow(!isFilterSetterShow);
+  }, [isFilterSetterShow]);
+  const updateFilters = useCallback(update => {
+    onChange && onChange(update);
+  }, [onChange]);
+  const id = useMemo(() => {
+    return 'sea-chart-data-filter-' + generatorKey();
+  }, []);
+  const shownColumns = useMemo(() => {
+    const table = getTableById(tables, table_id);
+    if (!table || !table.columns) return [];
+    if (!shown_column_keys) {
+      return table.columns;
+    } else {
+      return table.columns.filter(column => shown_column_keys.includes(column.key));
+    }
+  }, [shown_column_keys, table_id, tables]);
+  const filterLength = ((_availableFilters = availableFilters) === null || _availableFilters === void 0 ? void 0 : _availableFilters.length) || 0;
+  const filterMessage = useMemo(() => {
+    let filterMessage = intl.get('Filter');
+    if (filterLength === 1) {
+      filterMessage = intl.get('1 Filter');
+    } else if (filterLength > 1) {
+      filterMessage = filterLength + ' ' + intl.get('Filters');
+    }
+    return filterMessage;
+  }, [filterLength]);
+  const filterConjunction = useMemo(() => {
+    return filter_conjunction || 'And';
+  }, [filter_conjunction]);
+  const collaborators = context.getCollaboratorsFromCache();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: "sea-chart-data-filter mb-1",
+    onClick: toggleFilterPopover
+  }, /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-filter"
+  }), /*#__PURE__*/React.createElement("span", null, filterMessage)), isFilterSetterShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableFiltersPopover, {
+    isNeedSubmit: true,
+    target: id,
+    filters: availableFilters,
+    filterConjunction: filterConjunction,
+    columns: shownColumns,
+    departments: departments,
+    collaborators: collaborators,
+    hidePopover: toggleFilterPopover,
+    update: updateFilters
+  })));
+};
+export default DataFilter;

package/dist/settings/table-element-settings/data-settings.js

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import { getTableById } from 'dtable-utils';
+import SelectTable from '../widgets/select-table/index.js';
+import StatisticType from '../widgets/chart-type';
+import { generateChartConfig } from '../../utils/chart.js';
+import { SortSetter, DataSettingHeader, HideColumnSetter } from '../../components/data-process-setter';
+import Divider from '../widgets/divider/index.js';
+import DataFilter from './components/data-filter.js';
+import './index.css';
+export default function TableElementDataSetting(_ref) {
+  let {
+    tables,
+    chart,
+    onChange
+  } = _ref;
+  const {
+    config
+  } = chart;
+  const {
+    table_id,
+    shown_column_keys,
+    sorts
+  } = config;
+  const onTableChange = option => {
+    const newTableId = option.value;
+    if (newTableId === table_id) return;
+    const selectedTable = getTableById(tables, newTableId);
+    const shown_column_keys = selectedTable.columns.map(col => col.key);
+    // initially show all columns
+    let newChartConfig = {
+      table_id: newTableId,
+      shown_column_keys,
+      sorts: [],
+      groupbys: [],
+      filters: [],
+      filter_conjunction: 'And'
+    };
+    onChange && onChange(newChartConfig);
+  };
+  const onTypeChange = newConfig => {
+    onChange && onChange(newConfig);
+  };
+  const onFiltersChange = newConfig => {
+    onChange && onChange(newConfig);
+  };
+  const onSortsChange = sorts => {
+    onChange && onChange({
+      sorts
+    });
+  };
+  const onGroupbyChange = groupbys => {
+    onChange && onChange({
+      groupbys
+    });
+  };
+  const onHideColumnChange = shownColumnKeys => {
+    onChange && onChange({
+      shown_column_keys: shownColumnKeys
+    });
+  };
+  const generateConfig = useCallback(newConfig => {
+    return generateChartConfig(newConfig, tables);
+  }, [tables]);
+  const selectedTable = getTableById(tables, table_id) || {};
+  const {
+    columns = []
+  } = selectedTable;
+  let available_columns;
+  // if shown_column_keys is not set, then show all columns
+  if (!shown_column_keys) {
+    available_columns = columns;
+  } else {
+    available_columns = columns.filter(column => shown_column_keys.includes(column.key));
+  }
+  const availableColumnsKeys = available_columns.map(col => col.key);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-table-element-settings"
+  }, /*#__PURE__*/React.createElement(StatisticType, {
+    chart: chart,
+    generateChartConfig: generateConfig,
+    onChange: onTypeChange
+  }), /*#__PURE__*/React.createElement(SelectTable, {
+    tables: tables,
+    selectedTableId: table_id,
+    onChange: onTableChange
+  }), /*#__PURE__*/React.createElement(DataSettingHeader, null), /*#__PURE__*/React.createElement(DataFilter, {
+    tables: tables,
+    chart: chart,
+    onChange: onFiltersChange
+  }), /*#__PURE__*/React.createElement(SortSetter, {
+    isNeedSubmit: true,
+    sorts: sorts,
+    columns: available_columns,
+    onSortsChange: onSortsChange
+  }), /*#__PURE__*/React.createElement(HideColumnSetter, {
+    shownColumnKeys: availableColumnsKeys,
+    columns: columns,
+    onSettingUpdate: onHideColumnChange
+  }), /*#__PURE__*/React.createElement(Divider, null));
+}

package/dist/settings/table-element-settings/index.css

@@ -0,0 +1,190 @@
+
+.sea-chart-table-element-settings {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  /* padding: 16px 16px 50px; */
+  overflow: auto;
+}
+
+.sea-chart-table-element-settings .dtable-icon-use-help {
+  font-size: 14px;
+  color: #bdbdbd;
+}
+
+.seatable-page-settings-header .link-settings-return .dtable-icon-return {
+  font-size: 14px;
+  color: #666666;
+}
+
+.sea-chart-table-element-settings .setting-item .no-image-column-tip {
+  font-size: 13px;
+  color: #666666;
+}
+
+.sea-chart-table-element-settings .setting-item .custom-switch-description {
+  white-space: break-spaces;
+}
+
+/* hidden column settings */
+.field-settings {
+  margin: 8px 0;
+}
+
+.field-settings-header {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 17px;
+}
+
+.field-settings-header .hide-all,
+.field-settings-header .show-all {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  background: #f5f5f5;
+  color: #666666;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.field-settings-header .hide-all:hover,
+.field-settings-header .show-all:hover {
+  background: #e9e9e9;
+  color: #212529;
+}
+
+.hidden-column-popover .search-column {
+  height: 28px;
+  padding: 0 10px;
+}
+
+.hidden-column-popover .search-column input {
+  width: 100%;
+  height: 28px;
+}
+
+.field-settings .field-settings-body {
+  padding: 0.5rem 0;
+  max-height: 300px;
+  overflow-x: auto;
+  min-width: 260px;
+}
+
+.field-settings .field-settings-body .custom-switch {
+  cursor: pointer;
+}
+
+.field-settings .field-settings-body > div {
+  font-size: 14px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  cursor: pointer;
+}
+
+.field-settings .field-settings-body > div:hover {
+  background: #f5f5f5;
+}
+
+.field-settings .empty-hidden-columns-container {
+  height: 80px;
+  width: 270px;
+  padding: 10px;
+}
+
+.field-settings .empty-hidden-columns-list {
+  padding: 0.25rem;
+  font-size: 13px;
+  color: #666666;
+}
+
+.dtable-dropdown-menu .dropdown-item:hover .item-icon {
+  color: #fff;
+}
+
+.setting-item .filters-setting-btn,
+.setting-item .groupbys-setting-btn {
+  cursor: pointer;
+  width: 100%;
+  padding: 3px 4px;
+  border-radius: 4px;
+  line-height: 22px;
+}
+
+.setting-item .filters-setting-btn:hover,
+.setting-item .groupbys-setting-btn:hover {
+  background-color: #efefef;
+}
+
+.setting-item .filters-setting-btn .dtable-font,
+.setting-item .groupbys-setting-btn .dtable-font,
+.setting-item .column-read-only {
+  font-size: 14px;
+  color: #666666;
+}
+
+.setting-item-permission-title:hover {
+  cursor: pointer;
+}
+
+.setting-item-permission-title.disable:hover {
+  cursor: default;
+}
+
+.setting-item .filters-setting-btn.disable:hover,
+.setting-item .setting-item-permission-title.disabled:hover {
+  cursor: not-allowed;
+  color: hsl(0, 0%, 60%);
+  background-color: hsl(0, 0%, 95%);
+}
+
+.setting-item .filters-setting-btn.disable:hover .column-read-only,
+.setting-item .filters-setting-btn.disable .dtable-font {
+  color: hsl(0, 0%, 60%);
+}
+
+.setting-item.column-permission .dtable-icon-permissions {
+  color: #666666;
+}
+
+.setting-item .setting-item-permission-title .dtable-icon-right {
+  color: #ccc;
+  font-size: 10px;
+  cursor: pointer;
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.setting-item .setting-item-permission-title .dtable-icon-right:hover {
+  color: #666666;
+}
+
+.setting-item .setting-item-permission-title .dtable-icon-right.rotate {
+  transform: rotate(90deg);
+}
+
+.setting-item .setting-item-permission-title.disabled {
+  padding: 3px 4px;
+  border-radius: 4px;
+  line-height: 22px;
+}
+
+.setting-item .check-record-format-switch .custom-switch .custom-switch-description {
+  width: 230px;
+  white-space: break-spaces;
+}
+
+@media (max-width: 768px) {
+  .seatable-app .seatable-page-settings-container {
+    float: right;
+  }
+}
+
+/* note setting */
+.seatable-app .seatable-page-settings-content .note-setting-textarea {
+  min-height: 100px;
+  margin-top: 4px;
+}

package/dist/settings/table-element-settings/index.js

@@ -0,0 +1,2 @@
+import TableElementDataSettings from './data-settings';
+export { TableElementDataSettings };

package/dist/settings/widgets/chart-type/index.js

@@ -9,7 +9,8 @@ const ChartType = _ref => {
   let {
     chart,
     generateChartConfig,
-    onChange
+    onChange,
+    dataSources
   } = _ref;
   const [isDialogShow, setDialogShow] = useState(false);
   const openTypesDialog = useCallback(event => {
@@ -55,6 +56,7 @@ const ChartType = _ref => {
     symbol: "type-change",
     className: "sea-chart-type-icon"
   })))), isDialogShow && /*#__PURE__*/React.createElement(TypesDialog, {
+    dataSources: dataSources,
     type: type,
     onToggle: closeTypesDialog,
     onChange: onTypeChange

package/dist/settings/widgets/common-data-settings.js

@@ -47,6 +47,7 @@ const CommonDataSettings = _ref => {
     table_id
   } = chart.config;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticType, {
+    dataSources: dataSources,
     chart: chart,
     generateChartConfig: generateConfig,
     onChange: onChange

package/dist/settings/widgets/data-filter/index.css

@@ -13,5 +13,5 @@
 .sea-chart-settings .sea-chart-data-filter .dtable-icon-filter {
   font-size: 14px;
   color: #666;
-  margin-right: 10px;
+  margin-right: .5rem;
 }

package/dist/utils/chart-utils/base-utils.js

@@ -2,6 +2,7 @@ var _BaseUtils;
 import shallowEqual from 'shallowequal';
 import dayjs from 'dayjs';
 import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, getDateDisplayString, getNumberDisplayString, getOption, getPrecisionNumber, getTableById, getTableColumnByKey, isNumber, isNumericColumn, isDateColumn, sortText, sortNumber, sortDate, sortSingleSelect, sortFormula, getColumnOptions, DateUtils, getGeolocationDisplayString, getFormulaDisplayString, isArchiveView, getViewById, MULTIPLE_CELL_VALUE_COLUMN_TYPE_MAP } from 'dtable-utils';
+import { isEqual } from 'lodash-es';
 import { PIE_CHART_COLORS, CHART_SUMMARY_TYPE, CHART_SUPPORT_SORT_COLUMNS, CHART_TYPE, CHART_STYLE_SETTING_KEYS, DEFAULT_LABEL_FONT_SIZE, DEFAULT_NUMBER_FORMAT_OBJECT, X_AXIS_IS_GROUPBY_COLUMN_KEY_CHART_TYPES, STYLE_COLORS, CHART_DATA_SORT_TYPE, CHART_Y_GROUP_TYPE, HORIZONTAL_BAR_CHART_TYPES, COMPLTETELESS_CHART_TYPES } from '../../constants';
 import { getClientFormulaDisplayString } from '../cell-format-utils';
 import { getKnownCollaboratorByEmail, generateDefaultUser, getUsers } from '../collaborator-utils';
@@ -58,6 +59,11 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   } = config;
   const table = getTableById(tables, table_id);
   if (!table) return false;
+
+  // if table exists then it's a valid TABLE_ELEMENT chart
+  if (type === CHART_TYPE.TABLE_ELEMENT) {
+    return true;
+  }
   if (type === CHART_TYPE.SCATTER) {
     const {
       column_groupby_column_key
@@ -384,7 +390,7 @@ BaseUtils.isChartStyleChange = (preChartElement, curChartElement) => {
   if ((preChartElement === null || preChartElement === void 0 ? void 0 : (_preChartElement$heig = preChartElement.height) === null || _preChartElement$heig === void 0 ? void 0 : _preChartElement$heig.value) !== (curChartElement === null || curChartElement === void 0 ? void 0 : (_curChartElement$heig = curChartElement.height) === null || _curChartElement$heig === void 0 ? void 0 : _curChartElement$heig.value)) return true;
   if ((preChartElement === null || preChartElement === void 0 ? void 0 : preChartElement.left_in_unit) !== (curChartElement === null || curChartElement === void 0 ? void 0 : curChartElement.left_in_unit)) return true;
   if ((preChartElement === null || preChartElement === void 0 ? void 0 : preChartElement.width_in_unit) !== (curChartElement === null || curChartElement === void 0 ? void 0 : curChartElement.width_in_unit)) return true;
-  if (!ObjectUtils.isSameObject(preChartElement.style_config, curChartElement.style_config)) return true;
+  if (!isEqual(preChartElement.style_config, curChartElement.style_config)) return true;
   return !CHART_STYLE_SETTING_KEYS.every(key => preChartElement.config[key] === curChartElement.config[key]);
 };
 BaseUtils.isChartTypeChange = (preChartElement, curChartElement) => {

package/dist/utils/chart-utils/index.js

@@ -15,7 +15,7 @@ ChartUtils.calculateChart = (chart, value, callback) => {
     tables: value.tables,
     onSuccess: async function (res) {
       var _res$data;
-      let dataSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SQLStatisticsUtils.dataSources;
+      let dataSources = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : SQLStatisticsUtils.DATA_SOURCE;
       const {
         success,
         error_message
@@ -25,7 +25,7 @@ ChartUtils.calculateChart = (chart, value, callback) => {
         callback && callback(errMsg, '', null);
         return;
       }
-      if (dataSources === OriginalDataUtils.dataSources) {
+      if (dataSources === OriginalDataUtils.DATA_SOURCE) {
         OriginalDataUtils.calculateChart(chart, value, callback);
         return;
       }
@@ -49,10 +49,10 @@ ChartUtils.calculateStaticChart = (chart, value, statisticalResult, callback) =>
   const {
     data_sources: dataSources
   } = statisticalResult;
-  if (dataSources === OriginalDataUtils.dataSources) {
+  if (dataSources === OriginalDataUtils.DATA_SOURCE) {
     OriginalDataUtils.calculateChart(chart, value, callback);
-    return;
+  } else {
+    SQLStatisticsUtils.calculateStaticChart(chart, value, statisticalResult, callback);
   }
-  SQLStatisticsUtils.calculateStaticChart(chart, value, statisticalResult, callback);
 };
 export { BaseUtils, ChartUtils };

package/dist/utils/chart-utils/original-data-utils/index.js

@@ -37,7 +37,7 @@ const calculatorMap = {
 };
 class OriginalDataUtils {}
 _OriginalDataUtils = OriginalDataUtils;
-OriginalDataUtils.dataSources = 'original_data';
+OriginalDataUtils.DATA_SOURCE = 'original_data';
 OriginalDataUtils.isValidExistChart = (tables, chart) => {
   const isValid = BaseUtils.isValidExistChart(tables || [], chart);
   if (!isValid) return false;
@@ -82,7 +82,7 @@ OriginalDataUtils.calculateChart = async (chart, value, callback) => {
     const chartTableColumns = table.columns;
     return callback && callback('', '', {
       result,
-      data_sources: _OriginalDataUtils.dataSources,
+      data_sources: _OriginalDataUtils.DATA_SOURCE,
       groupbyColumn,
       columnGroupbyColumn,
       summaryColumn,

package/dist/utils/chart-utils/sql-statistics-utils.js

@@ -14,7 +14,7 @@ import { convertQuarterToDate } from '../date-translate';
 import BaseUtils, { findIfColumnDataIsArray } from './base-utils';
 class SQLStatisticsUtils {}
 _SQLStatisticsUtils = SQLStatisticsUtils;
-SQLStatisticsUtils.dataSources = 'sql_statistics';
+SQLStatisticsUtils.DATA_SOURCE = 'sql_statistics';
 SQLStatisticsUtils.getGroupLabelFromDB = async (cellValue, column, chart, isPivot) => {
   const dateGranularity = BaseUtils.getDateGranularityByType(chart);
   const {
@@ -1527,6 +1527,12 @@ SQLStatisticsUtils.sqlResult2JavaScript = async (chart, sqlRows, chartSQLMap, co
     type
   } = chart.config;
   switch (type) {
+    case CHART_TYPE.TABLE_ELEMENT:
+      {
+        return {
+          result: sqlRows
+        };
+      }
     case CHART_TYPE.TABLE:
       {
         sqlRows = BaseUtils.recalculateAvg(sqlRows);
@@ -2000,7 +2006,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
     }
     callback && callback('', '', {
       result,
-      data_sources: _SQLStatisticsUtils.dataSources,
+      data_sources: _SQLStatisticsUtils.DATA_SOURCE,
       groupbyColumn,
       columnGroupbyColumn,
       summaryColumn,
@@ -2024,7 +2030,7 @@ SQLStatisticsUtils.calculateChart = async (chart, value, callback, sqlRows) => {
   }
   callback && callback('', '', {
     ...chartResult,
-    data_sources: _SQLStatisticsUtils.dataSources,
+    data_sources: _SQLStatisticsUtils.DATA_SOURCE,
     groupbyColumn,
     columnGroupbyColumn,
     summaryColumn,
@@ -2046,7 +2052,7 @@ SQLStatisticsUtils.calculateStaticChart = (chart, value, statisticalResult, call
   const {
     type
   } = config;
-  if (type === CHART_TYPE.TABLE) return callback && callback('', '', statisticalResult);
+  if ([CHART_TYPE.TABLE, CHART_TYPE.TABLE_ELEMENT].includes(type)) return callback && callback('', '', statisticalResult);
   const {
     table_id,
     sort_type

package/dist/utils/chart.js

@@ -1,6 +1,14 @@
 import { GenericModel, CHART_MAP } from '../model';
+import { CHART_TYPE } from '../constants';
+import BaseModel from '../model/base-model';
 export const generateChartConfig = (options, tables) => {
-  const genericChart = new GenericModel(options);
+  let genericChart;
+  // TABLE_ELEMENT don't need normal chart's properties
+  if (options.type === CHART_TYPE.TABLE_ELEMENT) {
+    genericChart = new BaseModel(options);
+  } else {
+    genericChart = new GenericModel(options);
+  }
   const ChartModel = CHART_MAP[genericChart.type];
   return new ChartModel(genericChart, tables);
 };

package/dist/utils/hotkey.js

@@ -0,0 +1,5 @@
+import isHotkey from 'is-hotkey';
+const isEsc = isHotkey('esc');
+const isSpace = isHotkey('space');
+const isEnter = isHotkey('enter');
+export { isEsc, isEnter, isSpace };

package/dist/utils/row-utils.js

@@ -1,6 +1,15 @@
 import { CellType, COLLABORATOR_COLUMN_TYPES, FORMULA_COLUMN_TYPES_MAP, FORMULA_RESULT_TYPE, isNumber, getNumberDisplayString, getOption, getColumnOptions } from 'dtable-utils';
-import { CHART_TYPE } from '../constants';
 import { getClientFormulaDisplayString } from './cell-format-utils';
+export const resizeColumn = (resizedColumnKey, width, columns) => {
+  const columnIndex = columns.findIndex(column => column.key === resizedColumnKey);
+  const column = columns[columnIndex];
+  const newColumn = Object.assign({}, column, {
+    width
+  });
+  let updateColumns = columns.slice(0);
+  updateColumns[columnIndex] = newColumn;
+  return updateColumns;
+};
 export const isEmptyGeolocationCell = (cellValue, format) => {
   if (!cellValue) return null;
   if (format === 'lng_lat') {

package/dist/utils/sql/chart-data-sql.js

@@ -961,6 +961,10 @@ class ChartDataSQL {
           error: this.error
         };
       }
+
+      // TODO
+      // support TableElement
+
       return {};
     };
     this.get_sql_group_name = (name, original_name, column) => {

package/dist/utils/sql/column-2-sql-column.js

@@ -757,6 +757,10 @@ const chartColumn2SqlColumn = (chartElement, table) => {
     type
   } = chart;
   switch (type) {
+    case CHART_TYPE.TABLE_ELEMENT:
+      {
+        return {};
+      }
     case CHART_TYPE.TABLE:
       {
         const {

package/dist/view/index.css

@@ -27,7 +27,11 @@
 .sea-chart-formatter .sea-chart-cavans-container {
   position: relative;
   width: 100%;
-  height: 100%;
+  height: 100%
+}
+
+.sea-chart-formatter .sea-chart-cavans-container.has-title {
+  height: calc(100% - 41px);
 }
 
 .sea-chart-formatter .sea-chart-table-formatter-container {