@seafile/sdoc-editor 0.3.24 → 0.3.26-1

package/dist/basic-sdk/extension/plugins/chart/chart-components/common-settings/y-axis-group-settings.js

@@ -0,0 +1,182 @@
+import React, { Component, Fragment } from 'react';
+import SummaryTypeSettings from './summary-type-setting';
+import SummaryFieldSetting from './summary-field-setting';
+import GroupbyNumericItem from './groupby-numeric-item';
+import GroupbyNumericItems from './groupby-numeric-items';
+import { DATE_COLUMN_TYPES } from '../../constants/special-column-types';
+import { GROUP_TYPES, SUMMARY_TYPE, SUMMARY_METHOD } from '../../constants/summary-constants';
+class YAxisGroupSettings extends Component {
+  constructor() {
+    super(...arguments);
+    this.getDefaultGroupbyColumnKey = () => {
+      const {
+        statItem,
+        columns
+      } = this.props;
+      const {
+        x_axis_column_key
+      } = statItem;
+      const validColumns = columns.filter(column => {
+        const {
+          key,
+          type
+        } = column;
+        return key !== x_axis_column_key && !['date', 'geolocation'].includes(type);
+      });
+      const groupbyColumn = validColumns[0] || {};
+      return groupbyColumn.key;
+    };
+    this.getDefaultYAxisColumnKey = () => {
+      const {
+        columns
+      } = this.props;
+      const validColumns = columns.filter(column => DATE_COLUMN_TYPES.includes(column.type));
+      return validColumns && validColumns.key;
+    };
+    this.getSummaryType = () => {
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_summary_type,
+        column_groupby_multiple_numeric_column
+      } = statItem || {};
+      if (column_groupby_multiple_numeric_column) {
+        return GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN;
+      }
+      if (y_axis_summary_type === SUMMARY_TYPE.ADVANCED) {
+        return GROUP_TYPES.SINGLE_NUMERIC_COLUMN;
+      }
+      return GROUP_TYPES.COUNT;
+    };
+    this.updateSummaryType = setting => {
+      const value = Object.values(setting)[0];
+      const {
+        statItem
+      } = this.props;
+      const {
+        y_axis_summary_type: oldValue
+      } = statItem;
+      if (value === oldValue) return;
+      if (value === GROUP_TYPES.COUNT) {
+        const y_axis_summary_type = SUMMARY_TYPE.COUNT;
+        const column_groupby_multiple_numeric_column = false;
+        const y_axis_column_key = null;
+        const column_groupby_numeric_columns = [];
+        const column_groupby_column_key = this.getDefaultGroupbyColumnKey();
+        const column_groupby_date_granularity = null;
+        const column_groupby_geolocation_granularity = null;
+        this.props.updateSetting({
+          y_axis_summary_type,
+          column_groupby_multiple_numeric_column,
+          y_axis_column_key,
+          column_groupby_numeric_columns,
+          column_groupby_column_key,
+          column_groupby_date_granularity,
+          column_groupby_geolocation_granularity
+        });
+      }
+      if (value === GROUP_TYPES.SINGLE_NUMERIC_COLUMN) {
+        const y_axis_summary_type = SUMMARY_TYPE.ADVANCED;
+        const column_groupby_multiple_numeric_column = false;
+        const y_axis_column_key = null;
+        const y_axis_summary_method = SUMMARY_METHOD[0];
+        const column_groupby_numeric_columns = [];
+        const column_groupby_column_key = null;
+        const column_groupby_date_granularity = null;
+        const column_groupby_geolocation_granularity = null;
+        this.props.updateSetting({
+          y_axis_summary_type,
+          column_groupby_multiple_numeric_column,
+          y_axis_column_key,
+          y_axis_summary_method,
+          column_groupby_numeric_columns,
+          column_groupby_column_key,
+          column_groupby_date_granularity,
+          column_groupby_geolocation_granularity
+        });
+      }
+      if (value === GROUP_TYPES.MULTIPLE_NUMERIC_COLUMN) {
+        const y_axis_summary_type = SUMMARY_TYPE.ADVANCED;
+        const column_groupby_multiple_numeric_column = true;
+        const y_axis_column_key = this.getDefaultYAxisColumnKey();
+        const y_axis_summary_method = SUMMARY_METHOD[0];
+        const column_groupby_numeric_columns = [];
+        const column_groupby_column_key = null;
+        const column_groupby_date_granularity = null;
+        const column_groupby_geolocation_granularity = null;
+        this.props.updateSetting({
+          y_axis_summary_type,
+          column_groupby_multiple_numeric_column,
+          y_axis_column_key,
+          y_axis_summary_method,
+          column_groupby_numeric_columns,
+          column_groupby_column_key,
+          column_groupby_date_granularity,
+          column_groupby_geolocation_granularity
+        });
+      }
+    };
+    this.updateGroupBySetting = setting => {
+      const key = Object.keys(setting)[0];
+      if (key === 'column_key') {
+        const newSetting = {
+          y_axis_column_key: setting[key]
+        };
+        this.props.updateSetting(newSetting);
+      }
+      if (key === 'summary_method') {
+        const newSetting = {
+          y_axis_summary_method: setting[key]
+        };
+        this.props.updateSetting(newSetting);
+      }
+    };
+    this.updateSetting = setting => {
+      this.props.updateSetting(setting);
+    };
+  }
+  render() {
+    const {
+      label,
+      statItem,
+      supportSummaryTypes
+    } = this.props;
+    const {
+      y_axis_summary_type = GROUP_TYPES.COUNT,
+      y_axis_column_key,
+      y_axis_summary_method,
+      column_groupby_multiple_numeric_column,
+      column_groupby_numeric_columns
+    } = statItem || {};
+    const summaryType = this.getSummaryType();
+    return /*#__PURE__*/React.createElement("div", {
+      className: "sdoc-chart-setting-item"
+    }, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(SummaryTypeSettings, {
+      settingValue: summaryType,
+      supportSummaryTypes: supportSummaryTypes,
+      updateSetting: this.updateSummaryType
+    }), y_axis_summary_type === SUMMARY_TYPE.ADVANCED && !column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(SummaryFieldSetting, {
+      summarySingle: column_groupby_multiple_numeric_column,
+      columns: this.props.columns,
+      summaryColumnSettingKey: 'y_axis_column_key',
+      summaryColumnKey: y_axis_column_key,
+      summaryMethodSettingKey: 'y_axis_summary_method',
+      summaryMethod: y_axis_summary_method,
+      updateSetting: this.updateSetting
+    }), column_groupby_multiple_numeric_column && /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GroupbyNumericItem, {
+      index: 0,
+      columns: this.props.columns,
+      groupbyNumericItem: {
+        column_key: y_axis_column_key,
+        summary_method: y_axis_summary_method
+      },
+      updateGroupBySetting: this.updateGroupBySetting
+    }), /*#__PURE__*/React.createElement(GroupbyNumericItems, {
+      columns: this.props.columns,
+      groupbyNumericItems: column_groupby_numeric_columns,
+      updateSetting: this.updateSetting
+    })));
+  }
+}
+export default YAxisGroupSettings;

package/dist/basic-sdk/extension/plugins/chart/chart-components/seatable-radio/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import classnames from 'classnames';
+import './style.css';
+function SeaTableRadio(props) {
+  return /*#__PURE__*/React.createElement("label", {
+    className: "seatable-radio"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "radio",
+    className: "seatable-radio-input",
+    checked: props.isChecked,
+    onChange: props.disabled ? () => {} : props.onCheckedChange,
+    name: props.name,
+    value: props.value
+  }), /*#__PURE__*/React.createElement("span", {
+    className: classnames('seatable-radio-indicator', {
+      'seatable-radio-selected-indicator': props.isChecked,
+      'seatable-radio-disable': props.disabled
+    })
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "seatable-radio-description text-truncate"
+  }, props.label));
+}
+SeaTableRadio.defaultProps = {
+  disabled: false,
+  name: 'seatable-radio-input',
+  onCheckedChange: () => {}
+};
+export default SeaTableRadio;

package/dist/basic-sdk/extension/plugins/chart/chart-components/seatable-radio/style.css

@@ -0,0 +1,52 @@
+.seatable-radio {
+  user-select: none;
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  font-size: 14px;
+}
+
+.seatable-radio .seatable-radio-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.seatable-radio .seatable-radio-indicator {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  border: 1px solid #bdbdbd;
+  position: relative;
+}
+
+.seatable-radio .seatable-radio-selected-indicator {
+  background-color: #FF8000;
+  border: unset !important;
+}
+
+.seatable-radio .seatable-radio-selected-indicator::before {
+  display: inline-block;
+  content: '';
+  width: 6px;
+  height: 6px;
+  background-color: #ffffff;
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  border-radius: 50%;
+}
+
+.seatable-radio .seatable-radio-disable {
+  background-color: #f5f5f5;
+}
+
+.seatable-radio .seatable-radio-description {
+  margin-left: .5rem;
+  color: inherit;
+  transition: .3s color;
+  line-height: 16px;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-components/table-setting/index.js

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { withTranslation } from 'react-i18next';
+import DtableSelect from '../common-settings/dtable-select-setting';
+const TableSetting = _ref => {
+  let {
+    tables,
+    activeTableId,
+    onSelectedTableChanged,
+    t
+  } = _ref;
+  const getTablesOptions = useCallback(() => {
+    return Array.isArray(tables) && tables.map(table => {
+      return {
+        label: /*#__PURE__*/React.createElement("span", {
+          className: "select-option-name"
+        }, table.name),
+        value: {
+          name: table.name,
+          id: table._id
+        }
+      };
+    });
+  }, [tables]);
+  const getActiveTableOption = useCallback(() => {
+    if (!activeTableId) return null;
+    const tablesOptions = getTablesOptions();
+    return tablesOptions.find(option => {
+      const {
+        id
+      } = option.value;
+      return activeTableId === id;
+    });
+  }, [activeTableId, getTablesOptions]);
+  const activeTableOption = getActiveTableOption();
+  const tablesOptions = getTablesOptions();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-setting-item"
+  }, /*#__PURE__*/React.createElement("label", null, t('Table')), /*#__PURE__*/React.createElement(DtableSelect, {
+    value: activeTableOption,
+    options: tablesOptions,
+    onChange: option => {
+      onSelectedTableChanged(option);
+    }
+  }));
+};
+export default withTranslation('sdoc-editor')(TableSetting);

package/dist/basic-sdk/extension/plugins/chart/chart-components/toggle-setting/index.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import './style.css';
+class ToggleSetting extends Component {
+  render() {
+    const {
+      handleToggleChange,
+      isChecked,
+      label
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "big-screen statistic-toggle-parameter"
+    }, /*#__PURE__*/React.createElement("label", {
+      className: "custom-switch"
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "checkbox",
+      className: "custom-switch-input",
+      checked: isChecked,
+      onChange: handleToggleChange,
+      name: "custom-switch-checkbox"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "custom-switch-indicator"
+    }), /*#__PURE__*/React.createElement("span", {
+      className: "custom-switch-description text-truncate"
+    }, label)));
+  }
+}
+export default ToggleSetting;

package/dist/basic-sdk/extension/plugins/chart/chart-components/toggle-setting/style.css

@@ -0,0 +1,29 @@
+.big-screen.statistic-toggle-parameter {
+  height: 36px;
+  padding-left: 8px;
+  box-sizing: border-box;
+  font-size: 14px;
+  background-color: #fff;
+  display: flex;
+  border-radius: 4px;
+  border: 1px solid hsl(0,0%,80%);
+}
+
+.big-screen.statistic-toggle-parameter .custom-switch {
+  position: relative;
+  font-weight: normal;
+}
+
+.big-screen.statistic-toggle-parameter .custom-switch-indicator {
+  width: 22px;
+  height: 12px;
+}
+
+.big-screen.statistic-toggle-parameter .custom-switch-indicator::before {
+  height: 8px;
+  width: 8px;
+}
+
+.big-screen.statistic-toggle-parameter .custom-switch-input:checked ~ .custom-switch-indicator:before {
+  left: 12px;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.css

@@ -0,0 +1,22 @@
+.sdoc-chart-edit-dialog {
+  max-width: 1100px;
+	width: 1100px;
+	height: calc(100% - 56px);  
+}
+
+.sdoc-chart-edit-dialog .sdoc-chart-edit-modal-body {
+  padding: 0;
+  overflow: hidden;
+	display: flex;
+}
+
+.sdoc-chart-edit-dialog .sdoc-chart-edit-view {
+  max-height: 600px;
+	min-height: 400px;
+  width: 800px;
+	padding: 20px;
+}
+
+.sdoc-chart-edit-dialog .sdoc-chart-container {
+  height: 100%;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-edit-dialog/index.js

@@ -0,0 +1,50 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+import classnames from 'classnames';
+import ChartSetting from '../chart-setting';
+import './index.css';
+const ChartEditDialog = _ref => {
+  let {
+    editor,
+    element,
+    onHideEditDialog,
+    t
+  } = _ref;
+  const {
+    statItem
+  } = element;
+  const chartRef = useRef(null);
+  const isInit = useCallback(() => {
+    const {
+      base_id
+    } = statItem;
+    if (!base_id) {
+      return true;
+    }
+    return false;
+  }, [statItem]);
+  return /*#__PURE__*/React.createElement(Modal, {
+    isOpen: true,
+    toggle: onHideEditDialog,
+    className: "sdoc-chart-edit-dialog",
+    zIndex: 1048
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    toggle: onHideEditDialog
+  }, t('Edit_chart')), /*#__PURE__*/React.createElement(ModalBody, {
+    className: "sdoc-chart-edit-modal-body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-edit-view"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-view",
+    ref: chartRef
+  }, isInit() && /*#__PURE__*/React.createElement("span", {
+    className: "sdoc-chart-tip"
+  }, t('Please_complete_the_chart_configuration_first'))))), /*#__PURE__*/React.createElement(ChartSetting, {
+    editor: editor,
+    element: element
+  })));
+};
+export default withTranslation('sdoc-editor')(ChartEditDialog);

package/dist/basic-sdk/extension/plugins/chart/chart-setting/index.css

@@ -0,0 +1,24 @@
+.sdoc-chart-setting-container {
+  width: 300px;
+  height: 100%;
+  overflow-y: auto;
+  padding: 16px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.sdoc-chart-setting-container .chart-summary-types__value-container .summary-type-explanation {
+  display: none;
+}
+
+.sdoc-chart-setting-container .sdoc-chart-setting-item {
+  padding-bottom: 14px;
+}
+
+.sdoc-chart-setting-container .sdoc-chart-setting-item {
+  padding-bottom: 14px;
+}
+
+.sdoc-chart-setting-container .sdoc-chart-setting-item .mt-14 {
+  margin-top: 14px;
+}

package/dist/basic-sdk/extension/plugins/chart/chart-setting/index.js

@@ -0,0 +1,115 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React, { useCallback, useEffect, useState } from 'react';
+import { Transforms } from '@seafile/slate';
+import { ReactEditor } from '@seafile/slate-react';
+import { withTranslation } from 'react-i18next';
+import context from '../../../../../context';
+import ChartTypeSetting from '../chart-components/chart-type-setting';
+import BaseSetting from '../chart-components/base-setting';
+import TableSetting from '../chart-components/table-setting';
+import XAxisGroupSettings from '../chart-components/common-settings/x-axis-group-setting';
+import YAxisGroupSettings from '../chart-components/common-settings/y-axis-group-settings';
+import DataSort from '../chart-components/common-settings/data-sort-setting';
+import { GROUP_TYPES } from '../constants/summary-constants';
+import './index.css';
+const ChartSetting = _ref => {
+  let {
+    editor,
+    element,
+    t
+  } = _ref;
+  const [dtables, setDtables] = useState([]);
+  const {
+    statItem
+  } = element;
+  const {
+    table_id,
+    sort_type,
+    base_id
+  } = statItem;
+  const getDtables = useCallback(async base_id => {
+    var _editor$dtableBases;
+    const integrationConfig = (_editor$dtableBases = editor.dtableBases) === null || _editor$dtableBases === void 0 ? void 0 : _editor$dtableBases.find(item => item.base_api_token === base_id);
+    if (integrationConfig) {
+      const dtableServer = await context.getDtableServer(integrationConfig);
+      const res = await context.getDtables(dtableServer);
+      if (res === null || res === void 0 ? void 0 : res.data) {
+        setDtables([...res.data.tables]);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    getDtables(base_id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [base_id]);
+  const updateSetting = useCallback(setting => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.setNodes(editor, {
+      statItem: _objectSpread(_objectSpread({}, statItem), setting)
+    }, {
+      at: path
+    });
+  }, [editor, element, statItem]);
+  const onSelectedTableChanged = useCallback(option => {
+    const {
+      value
+    } = option;
+    const newSetting = {
+      'table_id': value.id,
+      'table_name': value.name
+    };
+    updateSetting(newSetting);
+  }, [updateSetting]);
+  const onSelectedBaseChanged = useCallback(option => {
+    const {
+      value
+    } = option;
+    const newSetting = {
+      'base_id': value.id
+    };
+    updateSetting(newSetting);
+  }, [updateSetting]);
+  const getColumns = useCallback(() => {
+    const tables = dtables || [];
+    const activeTable = tables.find(table => table._id === table_id);
+    if (!activeTable) return [];
+    return activeTable.columns;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [table_id, dtables]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sdoc-chart-setting-container"
+  }, /*#__PURE__*/React.createElement(ChartTypeSetting, {
+    element: element
+  }), /*#__PURE__*/React.createElement(BaseSetting, {
+    tables: editor.dtableBases || [],
+    activeTableId: base_id,
+    onSelectedBaseChanged: onSelectedBaseChanged
+  }), /*#__PURE__*/React.createElement(TableSetting, {
+    tables: dtables || [],
+    activeTableId: table_id,
+    onSelectedTableChanged: onSelectedTableChanged
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'seafile-divider dropdown-divider'
+  }), /*#__PURE__*/React.createElement(XAxisGroupSettings, {
+    label: t('X-axis'),
+    statItem: statItem,
+    columns: getColumns(),
+    renderIncludeEmpty: true,
+    updateSetting: updateSetting
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'seafile-divider dropdown-divider'
+  }), /*#__PURE__*/React.createElement(YAxisGroupSettings, {
+    label: t('Y-axis'),
+    statItem: statItem,
+    columns: getColumns(),
+    updateSetting: updateSetting,
+    supportSummaryTypes: [GROUP_TYPES.COUNT, GROUP_TYPES.SINGLE_NUMERIC_COLUMN]
+  }), /*#__PURE__*/React.createElement("div", {
+    className: 'seafile-divider dropdown-divider'
+  }), /*#__PURE__*/React.createElement(DataSort, {
+    settingValue: sort_type,
+    updateSetting: updateSetting
+  }));
+};
+export default withTranslation('sdoc-editor')(ChartSetting);