sea-chart 1.1.26 → 1.1.27

package/dist/components/drill-down-settings/drill-down-fields-popover/index.js

@@ -0,0 +1,107 @@
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import React, { useEffect, useRef } from 'react';
+import { UncontrolledPopover } from 'reactstrap';
+import isHotkey from 'is-hotkey';
+import intl from '../../../intl';
+import { getEventClassName } from '../../../utils/common-utils';
+import styles from './index.module.css';
+export default function DrillDownFieldsPopover(_ref) {
+  let {
+    onPopoverToggle,
+    columns,
+    drillDownFields,
+    setDrillDownFields
+  } = _ref;
+  const isAllColumnsVisible = columns.every(c => drillDownFields.includes(c.key));
+  const toggleAllColumnsVisible = () => {
+    const visible = !isAllColumnsVisible;
+    const newDrillDownFields = visible ? columns.map(c => c.key) : ['0000'];
+    if (!newDrillDownFields.includes('0000')) newDrillDownFields.push('0000');
+    setDrillDownFields(newDrillDownFields);
+  };
+  const changeColumnVisible = (columnKey, visible) => {
+    if (visible) {
+      setDrillDownFields(drillDownFields.concat(columnKey));
+    } else {
+      setDrillDownFields(drillDownFields.filter(key => key !== columnKey));
+    }
+  };
+  const popoverRef = useRef(null);
+  const onPopoverInsideClick = e => {
+    e.stopPropagation();
+  };
+  useEffect(() => {
+    const hidePopover = e => {
+      if (popoverRef.current && !getEventClassName(e).includes('popover') && !popoverRef.current.contains(e.target)) {
+        onPopoverToggle(false);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    const onHotKey = e => {
+      if (isHotkey('esc', e)) {
+        e.preventDefault();
+        onPopoverToggle(false);
+      }
+    };
+    document.addEventListener('click', hidePopover);
+    document.addEventListener('keydown', onHotKey);
+    return () => {
+      document.removeEventListener('click', hidePopover);
+      document.removeEventListener('keydown', onHotKey);
+    };
+  }, [onPopoverToggle]);
+  return /*#__PURE__*/React.createElement(UncontrolledPopover, {
+    placement: "left",
+    isOpen: true,
+    target: "set-drill-down-fields",
+    fade: false,
+    hideArrow: true,
+    className: styles['drill-down-fields-popover'],
+    boundariesElement: document.body
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: popoverRef,
+    onClick: onPopoverInsideClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['drill-down-fields-container']
+  }, /*#__PURE__*/React.createElement("table", {
+    className: styles['drill-down-fields-table']
+  }, /*#__PURE__*/React.createElement("thead", {
+    className: styles['drill-down-fields-table-header']
+  }, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    width: "80%",
+    className: styles['text-truncate']
+  }, ''), /*#__PURE__*/React.createElement("th", {
+    width: "20%",
+    className: "".concat(styles['column-checkbox'], " pr-3")
+  }, intl.get('Visible')))), /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", {
+    className: styles['drill-down-fields-row']
+  }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
+    className: styles['drill-down-fields-select-all']
+  }, intl.get('Select_all'))), /*#__PURE__*/React.createElement("td", {
+    className: "".concat(styles['column-checkbox'], " pr-3")
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: isAllColumnsVisible,
+    onChange: toggleAllColumnsVisible
+  }))), columns.map(column => {
+    const visibleChecked = drillDownFields.includes(column.key);
+    const checkedByDefault = column.key === '0000';
+    return /*#__PURE__*/React.createElement("tr", {
+      key: column.key,
+      className: styles['drill-down-fields-row']
+    }, /*#__PURE__*/React.createElement("td", {
+      className: "pl-5 text-truncate",
+      title: column.name
+    }, /*#__PURE__*/React.createElement("i", {
+      className: "".concat(COLUMNS_ICON_CONFIG[column.type], " mr-2 ").concat(styles['drill-down-fields-icon'])
+    }), /*#__PURE__*/React.createElement("span", null, column.name)), /*#__PURE__*/React.createElement("td", {
+      className: "".concat(styles['column-checkbox'], " pr-3")
+    }, /*#__PURE__*/React.createElement("input", {
+      disabled: checkedByDefault,
+      type: "checkbox",
+      checked: visibleChecked,
+      onChange: () => changeColumnVisible(column.key, !visibleChecked)
+    })));
+  }))))));
+}

package/dist/components/drill-down-settings/drill-down-fields-popover/index.module.css

@@ -0,0 +1,50 @@
+
+.drill-down-fields-popover :global(.popover) {
+    max-width: 410px;
+}
+
+.drill-down-fields-container {
+    max-height: 380px;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.drill-down-fields-table {
+    width: 100%;
+    line-height: 30px;
+    color: #212529;
+    font-size: 14px;
+    table-layout: fixed;
+}
+
+.drill-down-fields-table-header {
+    background-color: #f7f9fe;
+    border-top: 1px solid #eee;
+    line-height: 30px;
+    font-size: 14px;
+}
+
+.column-checkbox {
+    text-align: center;
+}
+
+.drill-down-fields-row {
+    border-bottom: 1px solid #eee;
+}
+
+.drill-down-fields-select-all {
+    margin-left: 1.5rem
+}
+
+.drill-down-fields-icon {
+    font-size: 14px;
+    color: #666;
+}
+
+table td {
+    padding: 0.5rem 0.1875rem;
+    border-bottom: 1px solid #eee;
+    font-size: 0.875rem;
+    word-break: break-all;
+}

package/dist/components/drill-down-settings/drill-down-fields-settings/index.js

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import DrillDownFieldsPopover from '../drill-down-fields-popover';
+import intl from '../../../intl';
+import styles from './index.module.css';
+export default function DrillDownFieldSettings(_ref) {
+  let {
+    columns,
+    drillDownFields,
+    setDrillDownFields
+  } = _ref;
+  const [isFieldsPopoverShow, setFieldsPopoverShow] = useState(false);
+  const handleFieldsPopoverShow = e => {
+    // stop event propagation to prevent tragger click handler inside of the popover
+    // otherwise popover close handler will be triggered immediately after component mounted becase click event is still bubbling
+    e.stopPropagation();
+    setFieldsPopoverShow(!isFieldsPopoverShow);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles['drill-down-fields-btn'],
+    id: "set-drill-down-fields",
+    onClick: handleFieldsPopoverShow
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "ml-2"
+  }, intl.get('Field_settings'))), isFieldsPopoverShow && /*#__PURE__*/React.createElement(DrillDownFieldsPopover, {
+    onPopoverToggle: setFieldsPopoverShow,
+    columns: columns,
+    drillDownFields: drillDownFields,
+    setDrillDownFields: setDrillDownFields
+  }));
+}

package/dist/components/drill-down-settings/drill-down-fields-settings/index.module.css

@@ -0,0 +1,16 @@
+.drill-down-fields-btn {
+    align-items: center;
+    border: 1px solid #acacac;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    margin-top: 10px;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.drill-down-fields-btn:hover {
+    background-color: #eee;
+}

package/dist/components/drill-down-settings/index.js

@@ -0,0 +1,25 @@
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React from 'react';
+import intl from '../../intl';
+import DrillDownFieldSettings from './drill-down-fields-settings';
+export default function DrillDownSettings(_ref) {
+  let {
+    columns,
+    drillDownStatus,
+    toggleDrillDownStatus,
+    drillDownFields,
+    setDrillDownFields
+  } = _ref;
+  return /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Drill_down_settings')
+  }, /*#__PURE__*/React.createElement(_DTableSwitch, {
+    onChange: toggleDrillDownStatus,
+    checked: drillDownStatus,
+    placeholder: intl.get('Enable_drill_down_feature')
+  }), drillDownStatus && /*#__PURE__*/React.createElement(DrillDownFieldSettings, {
+    columns: columns,
+    drillDownFields: drillDownFields,
+    setDrillDownFields: setDrillDownFields
+  }));
+}

package/dist/components/statistic-record-dialog/index.js

@@ -35,7 +35,8 @@ class StatisticRecordDialog extends React.Component {
       } = statisticRecord || {};
       const {
         table_id,
-        view_id
+        view_id,
+        drill_down_fields
       } = chart.config;
       this.table = getTableById(tables, table_id);
       const currentElementId = chart.id;
@@ -44,7 +45,7 @@ class StatisticRecordDialog extends React.Component {
         this.isArchiveView = isArchiveView(this.view);
       }
       this.unShowColumnKeyList = this.getUnShowColumnKeyList(this.view);
-      this.renderedColumns = this.getRenderedColumns(this.table);
+      this.renderedColumns = this.getRenderedColumns(this.table, drill_down_fields, isCalculateByView);
       if (this.isArchiveView || !isCalculateByView || statisticRecord.isQueryBySql) {
         var _context$api, _context$api2;
         if ((_context$api = context.api) === null || _context$api === void 0 ? void 0 : _context$api.customQueryRows) {
@@ -100,11 +101,18 @@ class StatisticRecordDialog extends React.Component {
       } = view;
       return [firstColumnKey, ...hidden_columns];
     };
-    this.getRenderedColumns = table => {
+    this.getRenderedColumns = (table, drillDownFields, isCalculateByView) => {
       const {
         columns
       } = table;
-      return columns.filter(column => !this.unShowColumnKeyList.includes(column.key));
+      const renderedColumns = columns.filter(column => !this.unShowColumnKeyList.includes(column.key));
+      // in dtable-statistics always show all columns
+      if (isCalculateByView || !drillDownFields) {
+        // use all columns as default
+        return renderedColumns;
+      } else {
+        return renderedColumns.filter(column => drillDownFields.includes(column.key));
+      }
     };
     this.processDrilledRows = drilledRows => {
       const {

package/dist/locale/lang/de.js

@@ -265,6 +265,11 @@ const de = {
   "Show_overall_rate": "Gesamtpreisbeschriftung anzeigen",
   "Percentage": "Prozentsatz",
   "Number_and_percentage": "Anzahl und Prozentsatz",
-  "No_record": "Keine Aufzeichnung"
+  "No_record": "Keine Aufzeichnung",
+  "Drill_down_settings": "Drilldown-Einstellungen",
+  "Enable_drill_down_feature": "Aktivieren Sie die Drilldown-Funktion",
+  "Field_settings": "Feldeinstellungen",
+  "Select_all": "Alles auswählen",
+  "Visible": "Sichtbar"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -265,6 +265,11 @@ const en = {
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
   "Number_and_percentage": "Number and percentage",
-  "No_record": "No record"
+  "No_record": "No record",
+  "Drill_down_settings": "Drill down settings",
+  "Enable_drill_down_feature": "Enable drill down feature",
+  "Field_settings": "Field settings",
+  "Select_all": "Select all",
+  "Visible": "Visible"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -265,6 +265,11 @@ const es = {
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
   "Number_and_percentage": "Number and percentage",
-  "No_record": "No record"
+  "No_record": "No record",
+  "Drill_down_settings": "Drill down settings",
+  "Enable_drill_down_feature": "Enable drill down feature",
+  "Field_settings": "Field settings",
+  "Select_all": "Select all",
+  "Visible": "Visible"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -265,6 +265,11 @@ const fr = {
   "Show_overall_rate": "Afficher le libellé du tarif global",
   "Percentage": "Couche d'entonnoir",
   "Number_and_percentage": "Nombre et pourcentage",
-  "No_record": "Aucun enregistrement"
+  "No_record": "Aucun enregistrement",
+  "Drill_down_settings": "Paramètres d'exploration",
+  "Enable_drill_down_feature": "Activer la fonctionnalité d'exploration vers le bas",
+  "Field_settings": "Paramètres de champ",
+  "Select_all": "Tout sélectionner",
+  "Visible": "Visible"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -265,6 +265,11 @@ const pt = {
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
   "Number_and_percentage": "Number and percentage",
-  "No_record": "No record"
+  "No_record": "No record",
+  "Drill_down_settings": "Drill down settings",
+  "Enable_drill_down_feature": "Enable drill down feature",
+  "Field_settings": "Field settings",
+  "Select_all": "Select all",
+  "Visible": "Visible"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -265,6 +265,11 @@ const ru = {
   "Show_overall_rate": "Show overall rate",
   "Percentage": "Percentage",
   "Number_and_percentage": "Number and percentage",
-  "No_record": "No record"
+  "No_record": "No record",
+  "Drill_down_settings": "Drill down settings",
+  "Enable_drill_down_feature": "Enable drill down feature",
+  "Field_settings": "Field settings",
+  "Select_all": "Select all",
+  "Visible": "Visible"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -265,6 +265,11 @@ const zh_CN = {
   "Show_overall_rate": "显示总转化率标签",
   "Percentage": "百分比",
   "Number_and_percentage": "数值和百分比",
-  "No_record": "没有记录"
+  "No_record": "没有记录",
+  "Drill_down_settings": "钻取设置",
+  "Enable_drill_down_feature": "开启钻取功能",
+  "Field_settings": "字段设置",
+  "Select_all": "选择全部",
+  "Visible": "可见"
 };
 export default zh_CN;

package/dist/model/base-model.js

@@ -5,5 +5,9 @@ export default class BaseModel {
     this.table_id = options.table_id || null;
     this.filters = options.filters || [];
     this.filter_conjunction = options.filter_conjunction || 'And';
+    // set to null to use all columns as default
+    this.drill_down_fields = options.drill_down_fields || null;
+    // default set to true
+    this.drill_down_status = typeof options.drill_down_status === 'boolean' ? options.drill_down_status : true;
   }
 }

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

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react';
 import { generateChartConfig } from '../../utils';
+import DrillDownSettings from '../../components/drill-down-settings';
 import StatisticType from './chart-type';
 import SelectTable from './select-table';
 import SelectView from './select-view';
@@ -12,10 +13,10 @@ const CommonDataSettings = _ref => {
     tables,
     onChange
   } = _ref;
+  const {
+    config
+  } = chart;
   const onTableChange = useCallback(option => {
-    const {
-      config
-    } = chart;
     const {
       table_id
     } = config;
@@ -26,11 +27,8 @@ const CommonDataSettings = _ref => {
       filters: [],
       filter_conjunction: 'And'
     });
-  }, [chart, onChange]);
+  }, [config, onChange]);
   const onViewChange = useCallback(option => {
-    const {
-      config
-    } = chart;
     const {
       view_id
     } = config;
@@ -39,13 +37,30 @@ const CommonDataSettings = _ref => {
     onChange && onChange({
       view_id: selectedViewId
     });
-  }, [chart, onChange]);
+  }, [config, onChange]);
+  const onDrillDownStatusChange = useCallback(event => {
+    onChange && onChange({
+      drill_down_status: event.target.checked
+    });
+  }, [onChange]);
+  const onDrillDownFieldChange = useCallback(fields => {
+    onChange && onChange({
+      drill_down_fields: fields
+    });
+  }, [onChange]);
   const generateConfig = useCallback(config => {
     return generateChartConfig(config, tables);
   }, [tables]);
   const {
-    table_id
-  } = chart.config;
+    table_id,
+    drill_down_status,
+    drill_down_fields
+  } = config;
+  const selectedTable = tables.find(table => table._id === table_id);
+  const columns = selectedTable ? selectedTable.columns : [];
+  const drillDownStatus = drill_down_status !== undefined && drill_down_status !== null ? drill_down_status : true;
+  // use all columns as default
+  const drillDownFields = drill_down_fields || columns.map(column => column.key);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticType, {
     chart: chart,
     generateChartConfig: generateConfig,
@@ -63,7 +78,13 @@ const CommonDataSettings = _ref => {
     selectedTableId: table_id,
     selectedViewId: chart.config.view_id,
     onChange: onViewChange
-  }), /*#__PURE__*/React.createElement(Divider, null));
+  }), /*#__PURE__*/React.createElement(Divider, null), dataSources === 'filter' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DrillDownSettings, {
+    columns: columns,
+    drillDownStatus: drillDownStatus,
+    toggleDrillDownStatus: onDrillDownStatusChange,
+    drillDownFields: drillDownFields,
+    setDrillDownFields: onDrillDownFieldChange
+  }), /*#__PURE__*/React.createElement(Divider, null)));
 };
 CommonDataSettings.defaultProps = {
   dataSources: 'filter'

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

@@ -1476,19 +1476,14 @@ SQLStatisticsUtils.trendMapChartSQLResult2JavaScript = (chart, sqlRows, chartSQL
       compareDate,
       comparedDate
     } = getCompareDate(date_granularity);
-    for (let index = sqlRows.length - 1; index >= 0; index--) {
-      const item = sqlRows[index];
+    for (const item of sqlRows) {
       if (!item[sqlGroupbyColumnKey]) continue;
       const currentDate = item[sqlGroupbyColumnKey] + '';
-      if (currentDate && currentDate < comparedDate) {
-        break;
-      }
       if (currentDate === compareDate) {
         compareValue = item[sqlSummaryColumnKey];
       }
       if (currentDate === comparedDate) {
         comparedValue = item[sqlSummaryColumnKey];
-        break;
       }
     }
   }

package/dist/view/wrapper/funnel.js

@@ -99,8 +99,8 @@ class Funnel extends ChartComponent {
       }
       const contentFormatterMap = {
         [FUNNEL_LABEL_FORMAT.NUMBER]: obj => obj.value,
-        [FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => obj.percent + '%',
-        [FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => "".concat(obj.value, " (").concat(obj.percent, "%)")
+        [FUNNEL_LABEL_FORMAT.PERCENTAGE]: obj => ((obj === null || obj === void 0 ? void 0 : obj.percent) || 0) + '%',
+        [FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE]: obj => "".concat(obj.value, " (").concat((obj === null || obj === void 0 ? void 0 : obj.percent) || 0, "%)")
       };
       this.chart.axis(false);
       this.chart.coordinate('rect').transpose().scale(1, -1);
@@ -149,10 +149,11 @@ class Funnel extends ChartComponent {
           });
         });
         if (funnel_show_overall_rate) {
+          var _sortedData;
           this.chart.annotation().text({
             top: true,
             position: ['50.5%', '-4%'],
-            content: sortedData[sortedData.length - 1].percent + '%',
+            content: (((_sortedData = sortedData[sortedData.length - 1]) === null || _sortedData === void 0 ? void 0 : _sortedData.percent) || 0) + '%',
             style: {
               fontSize: funnel_label_font_size,
               stroke: null,

package/dist/view/wrapper/index.js

@@ -289,7 +289,16 @@ const Wrapper = _ref => {
         }
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderChart(), isStatisticRecordsDialogShow && /*#__PURE__*/React.createElement(StatisticRecordDialog, {
+  const {
+    config
+  } = chart;
+  const {
+    drill_down_status
+  } = config;
+  const drillDownStatus = drill_down_status !== undefined && drill_down_status !== null ? drill_down_status : true;
+  // in dtable-statistics always support drill down
+  const supportDrillDown = isCalculateByView ? true : drillDownStatus;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, renderChart(), isStatisticRecordsDialogShow && supportDrillDown && /*#__PURE__*/React.createElement(StatisticRecordDialog, {
     chartRecordsParams: {
       statisticRecord: {
         ...statisticRecords

package/package.json

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