sea-chart 1.1.4 → 1.1.5

package/dist/assets/icons/funnel.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?>
+<!-- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -->
+<svg viewBox="0 0 1024 1024" version="1.1"  style="enable-background:new 0 0 1024 1024;" xmlns="http://www.w3.org/2000/svg">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M1024.5 96c0 17.673-14.327 32-32 32H32.5c-17.673 0-32-14.327-32-32 0-17.673 14.327-32 32-32h960c17.673 0 32 14.327 32 32z" />
+<path class="st0" d="M0.5 95.958h32v32H0.5zM421.5 95.958h32v32h-32zM992.5 95.958h32v32h-32zM640 959l-256-127V576h256zM926.398 128L816.685 256s-40.846-25.455-94.852-12.802c-99.37 23.282-83.758 80.729-168.495 76.802C476.954 316.459 448.5 246.979 325.6 230.604c-74.018-9.861-117.286 25.393-117.286 25.393L98.602 128H0l384 448h256l384-448h-97.602z" /></svg>

package/dist/components/font-settings/index.js

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { FormGroup, Input, Label } from 'reactstrap';
-import intl from '../../intl';
+import { Input } from 'reactstrap';
 import { FontColorSettings, FontSizeSettings, FontWeightSettings } from '../../settings/widgets/font-settings';
 import TextHorizontalSettings from '../../settings/widgets/text-horizontal-settings';
 import { CHART_SUPPORT_FONT_WEIGHTS } from '../../constants';

package/dist/constants/index.js

@@ -6,7 +6,17 @@ import { CHART_TYPE, CHART_TYPE_SHOW, CHART_TYPES } from './type';
 import { CHART_TYPE_IMAGE } from './type-image';
 import { regions } from './regions';
 import { TABLE_DIMENSIONS } from './table';
+export const SETTING_DEFAULT_FONT_SIZE = 12;
 export const DEFAULT_LANG = 'en';
+export const FUNNEL_LABEL_FORMAT = {
+  NUMBER: 'number',
+  PERCENTAGE: 'percentage',
+  NUMBER_AND_PERCENTAGE: 'number_and_percentage'
+};
+export const FUNNEL_LABEL_POSITIONS = {
+  INSIDE: 'inside',
+  OUTSIDE: 'outside'
+};
 export const TREND_TYPES = {
   UP: 'up',
   DOWN: 'down',
@@ -311,7 +321,8 @@ export const xAxisMap = {
   [CHART_TYPE.SCATTER]: 'x_axis_column_key',
   [CHART_TYPE.TABLE]: 'groupby_column_key',
   [CHART_TYPE.TREE_MAP]: 'groupby_column_key',
-  [CHART_TYPE.TREND]: 'date_column_key'
+  [CHART_TYPE.TREND]: 'date_column_key',
+  [CHART_TYPE.FUNNEL]: 'x_axis_column_key'
 };
 export const groupAxisMap = {
   [CHART_TYPE.BAR_GROUP]: 'column_groupby_column_key',

package/dist/constants/type-image.js

@@ -28,5 +28,6 @@ export const CHART_TYPE_IMAGE = {
   [CHART_TYPE.TREND]: 'trend-chart.png',
   [CHART_TYPE.DASHBOARD]: 'dashboard-chart.png',
   [CHART_TYPE.TREE_MAP]: 'treemap.png',
-  [CHART_TYPE.TABLE]: 'pivot-table.png'
+  [CHART_TYPE.TABLE]: 'pivot-table.png',
+  [CHART_TYPE.FUNNEL]: 'funnel.png'
 };

package/dist/constants/type.js

@@ -27,7 +27,8 @@ export const CHART_TYPE = {
   TREND: 'trend',
   DASHBOARD: 'dashboard',
   TREE_MAP: 'tree_map',
-  TABLE: 'table'
+  TABLE: 'table',
+  FUNNEL: 'funnel'
 };
 export const CHART_TYPE_SHOW = {
   [CHART_TYPE.BAR]: 'Basic_histogram',
@@ -58,7 +59,8 @@ export const CHART_TYPE_SHOW = {
   [CHART_TYPE.TREND]: 'Trend',
   [CHART_TYPE.DASHBOARD]: 'Gauge',
   [CHART_TYPE.TREE_MAP]: 'Tree_map',
-  [CHART_TYPE.TABLE]: 'Pivot_table'
+  [CHART_TYPE.TABLE]: 'Pivot_table',
+  [CHART_TYPE.FUNNEL]: 'Funnel'
 };
 export const CHART_TYPES = [{
   name: 'Histogram',
@@ -116,4 +118,8 @@ export const CHART_TYPES = [{
   name: 'Table',
   icon: 'dtable-logo',
   children: [CHART_TYPE.TABLE]
+}, {
+  name: 'Funnel',
+  icon: 'funnel',
+  children: [CHART_TYPE.FUNNEL]
 }];

package/dist/locale/lang/de.js

@@ -144,7 +144,7 @@ const de = {
   "Internal_server_error": "Interner Serverfehler",
   "Network_error": "Netzwerkfehler",
   "Permission_denied": "Zugriff verweigert",
-  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
+  "Execution_time_of_the_query_exceeds_the_limit": "Le temps d'exécution de la requête dépasse la limite. Les données ne peuvent pas être chargées.",
   "There_are_some_problems_with_the_filters": "Die Filterbedingungen sind abnormal. Bitte setzen sie die Filterbedingungen in den Ansichtseinstellungen zurück.",
   "Please_complete_the_chart_configuration_first": "Schließen Sie die Konfiguration des Diagramms ab.",
   "Not_used": "Nicht verwendet",
@@ -253,7 +253,17 @@ const de = {
   "Use_colors_in_single_select_solumn": "Verwenden Sie Farben in einer einzelnen Auswahlspalte",
   "Search_records": "Einträge suchen",
   "Please_select_a_grouping_column": "Please select grouping column",
-  "View": "View",
-  "All_charts": "All charts"
+  "View": "Sicht",
+  "Funnel": "Trichterdiagramm",
+  "All_charts": "Alle Diagramme",
+  "Show_legend": "Legende anzeigen",
+  "Funnel_layer": "Trichterschicht",
+  "funnel_accumulate_values": "Werte anhäufen",
+  "Show_funnel_layer_label": "Beschriftung der Trichterebene anzeigen",
+  "Inside": "Innen",
+  "Outside": "Draußen",
+  "Show_overall_rate": "Gesamtpreisbeschriftung anzeigen",
+  "Percentage": "Prozentsatz",
+  "Number_and_percentage": "Anzahl und Prozentsatz"
 };
 export default de;

package/dist/locale/lang/en.js

@@ -254,6 +254,16 @@ const en = {
   "Search_records": "Search records",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
-  "All_charts": "All charts"
+  "Funnel": "Funnel",
+  "All_charts": "All charts",
+  "Show_legend": "Show legend",
+  "Funnel_layer": "Funnel layer",
+  "funnel_accumulate_values": "Funnel accumulate values",
+  "Show_funnel_layer_label": "Show funnel layer label",
+  "Inside": "Inside",
+  "Outside": "Outside",
+  "Show_overall_rate": "Show overall rate",
+  "Percentage": "Percentage",
+  "Number_and_percentage": "Number and percentage"
 };
 export default en;

package/dist/locale/lang/es.js

@@ -254,6 +254,16 @@ const es = {
   "Search_records": "Search records",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
-  "All_charts": "All charts"
+  "Funnel": "Funnel",
+  "All_charts": "All charts",
+  "Show_legend": "Show legend",
+  "Funnel_layer": "Funnel layer",
+  "funnel_accumulate_values": "Funnel accumulate values",
+  "Show_funnel_layer_label": "Show funnel layer label",
+  "Inside": "Inside",
+  "Outside": "Outside",
+  "Show_overall_rate": "Show overall rate",
+  "Percentage": "Percentage",
+  "Number_and_percentage": "Number and percentage"
 };
 export default es;

package/dist/locale/lang/fr.js

@@ -144,7 +144,7 @@ const fr = {
   "Internal_server_error": "Erreur interne du serveur",
   "Network_error": "Erreur réseau",
   "Permission_denied": "Permission refusée",
-  "Execution_time_of_the_query_exceeds_the_limit": "Execution time of the query exceeds the limit. Data cannot be loaded.",
+  "Execution_time_of_the_query_exceeds_the_limit": "Le temps d'exécution de la requête dépasse la limite. Les données ne peuvent pas être chargées.",
   "There_are_some_problems_with_the_filters": "Les conditions de filtrage sont anormales. Veuillez réinitialiser les conditions de filtrage dans les paramètres de vue.",
   "Please_complete_the_chart_configuration_first": "Compléter la configuration du diagramme",
   "Not_used": "Ne pas utilisé",
@@ -253,7 +253,17 @@ const fr = {
   "Use_colors_in_single_select_solumn": "Utiliser les couleurs dans une colonne de sélection unique",
   "Search_records": "Rechercher des enregistrements",
   "Please_select_a_grouping_column": "Please select grouping column",
-  "View": "View",
-  "All_charts": "All charts"
+  "View": "Voir",
+  "Funnel": "Entonnoir",
+  "All_charts": "Tous les graphiques",
+  "Show_legend": "Afficher la légende",
+  "Funnel_layer": "Couche d'entonnoir",
+  "funnel_accumulate_values": "accumuler des valeurs",
+  "Show_funnel_layer_label": "Afficher l'étiquette du calque",
+  "Inside": "À l'intérieur",
+  "Outside": "Dehors",
+  "Show_overall_rate": "Afficher le libellé du tarif global",
+  "Percentage": "Couche d'entonnoir",
+  "Number_and_percentage": "Nombre et pourcentage"
 };
 export default fr;

package/dist/locale/lang/pt.js

@@ -254,6 +254,16 @@ const pt = {
   "Search_records": "Search records",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
-  "All_charts": "All charts"
+  "Funnel": "Funnel",
+  "All_charts": "All charts",
+  "Show_legend": "Show legend",
+  "Funnel_layer": "Funnel layer",
+  "funnel_accumulate_values": "Funnel accumulate values",
+  "Show_funnel_layer_label": "Show funnel layer label",
+  "Inside": "Inside",
+  "Outside": "Outside",
+  "Show_overall_rate": "Show overall rate",
+  "Percentage": "Percentage",
+  "Number_and_percentage": "Number and percentage"
 };
 export default pt;

package/dist/locale/lang/ru.js

@@ -254,6 +254,16 @@ const ru = {
   "Search_records": "Search records",
   "Please_select_a_grouping_column": "Please select grouping column",
   "View": "View",
-  "All_charts": "All charts"
+  "Funnel": "Funnel",
+  "All_charts": "All charts",
+  "Show_legend": "Show legend",
+  "Funnel_layer": "Funnel layer",
+  "funnel_accumulate_values": "Funnel accumulate values",
+  "Show_funnel_layer_label": "Show funnel layer label",
+  "Inside": "Inside",
+  "Outside": "Outside",
+  "Show_overall_rate": "Show overall rate",
+  "Percentage": "Percentage",
+  "Number_and_percentage": "Number and percentage"
 };
 export default ru;

package/dist/locale/lang/zh_CN.js

@@ -254,6 +254,16 @@ const zh_CN = {
   "Search_records": "搜索记录",
   "Please_select_a_grouping_column": "请选择一个分组列",
   "View": "视图",
-  "All_charts": "所有图表"
+  "Funnel": "漏斗图",
+  "All_charts": "所有图表",
+  "Show_legend": "显示图例",
+  "Funnel_layer": "漏斗层",
+  "funnel_accumulate_values": "每层累计当前层与所有下层数值",
+  "Show_funnel_layer_label": "显示漏斗层标签",
+  "Inside": "在图表内",
+  "Outside": "在图表外",
+  "Show_overall_rate": "显示总转化率标签",
+  "Percentage": "百分比",
+  "Number_and_percentage": "数值和百分比"
 };
 export default zh_CN;

package/dist/model/funnel.js

@@ -0,0 +1,50 @@
+import { CellType } from 'dtable-utils';
+import { cloneDeep } from 'lodash-es';
+import { CHART_SUMMARY_TYPE, CHART_TYPE, FUNNEL_LABEL_FORMAT, FUNNEL_LABEL_POSITIONS } from '../constants';
+import BaseModel from './base-model';
+class Funnel extends BaseModel {
+  constructor(options, tables) {
+    var _options$x_axis_optio;
+    options = options._options;
+    super({
+      ...options,
+      type: CHART_TYPE.FUNNEL
+    });
+
+    // init a default value here so settings won't need to check existence of the config
+
+    // data-settings
+    // needs to be single select
+    this.x_axis_column_key = options.x_axis_column_key;
+
+    // if no x_axis_option_list but x_axis_column_key is single select type, then use it's option list
+    if ((_options$x_axis_optio = options.x_axis_option_list) === null || _options$x_axis_optio === void 0 ? void 0 : _options$x_axis_optio.length) {
+      this.x_axis_option_list = options.x_axis_option_list;
+    } else if (options.table_id && options.x_axis_column_key) {
+      const table = tables.find(table => table._id === options.table_id);
+      const column = table.columns.find(column => column.key === options.x_axis_column_key);
+      if (column.type === CellType.SINGLE_SELECT) {
+        this.x_axis_option_list = cloneDeep(column.data.options);
+      } else {
+        this.x_axis_option_list = [];
+      }
+    } else {
+      this.x_axis_option_list = [];
+    }
+
+    // y-axis
+    this.y_axis_summary_column_key = options.y_axis_summary_column_key;
+    this.y_axis_summary_type = options.y_axis_summary_type || CHART_SUMMARY_TYPE.COUNT;
+    this.y_axis_summary_method = options.y_axis_summary_method || CHART_SUMMARY_TYPE.SUM;
+    this.funnel_accumulate_values = typeof options.funnel_accumulate_values !== 'boolean' ? true : options.funnel_accumulate_values;
+
+    // style settings
+    this.funnel_show_legend = typeof options.funnel_show_legend !== 'boolean' ? true : options.funnel_show_legend;
+    this.funnel_show_labels = typeof options.funnel_show_labels !== 'boolean' ? true : options.funnel_show_labels;
+    this.funnel_label_position = options.funnel_label_position || FUNNEL_LABEL_POSITIONS.OUTSIDE;
+    this.funnel_label_format = options.funnel_label_format || FUNNEL_LABEL_FORMAT.NUMBER;
+    this.funnel_label_font_size = options.funnel_label_font_size || 12;
+    this.funnel_show_overall_rate = typeof options.funnel_show_overall_rate !== 'boolean' ? true : options.funnel_show_overall_rate;
+  }
+}
+export default Funnel;

package/dist/model/generic-model.js

@@ -6,7 +6,7 @@ export default class GenericModel extends BaseModel {
   constructor(object) {
     const options = object || {};
     super(options);
-
+    this._options = object;
     // x data
     this.x_axis_column_key = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_COLUMN_KEY, options);
     this.x_axis_include_empty_cells = getChartConfigValueByKey(GENERIC_KEY.X_AXIS_INCLUDE_EMPTY_CELLS, options);

package/dist/model/index.js

@@ -31,6 +31,7 @@ import BasicNumberCard from './basic-number-card';
 import Trend from './trend';
 import Dashboard from './dashboard';
 import Table from './table';
+import Funnel from './funnel';
 const CHART_MAP = {
   [CHART_TYPE.BAR]: Bar,
   [CHART_TYPE.BAR_GROUP]: BarGroup,
@@ -60,6 +61,7 @@ const CHART_MAP = {
   [CHART_TYPE.TREND]: Trend,
   [CHART_TYPE.DASHBOARD]: Dashboard,
   [CHART_TYPE.TREE_MAP]: TreeMap,
-  [CHART_TYPE.TABLE]: Table
+  [CHART_TYPE.TABLE]: Table,
+  [CHART_TYPE.FUNNEL]: Funnel
 };
 export { ChartModel, GenericModel, CHART_MAP, User };

package/dist/settings/data-settings.js

@@ -15,6 +15,7 @@ import { MapDataSettings } from './map-settings';
 import { HeatMapDataSettings } from './heat-map-settings';
 import { MirrorDataSettings } from './mirror-settings';
 import { TrendDataSettings } from './trend-settings';
+import { FunnelDataSettings } from './funnel-settings';
 const DataSettings = props => {
   const [refreshToggle, setRefreshToggle] = useState(false);
   const cacheRef = useRef(props);
@@ -122,6 +123,10 @@ const DataSettings = props => {
       {
         return /*#__PURE__*/React.createElement(TrendDataSettings, props);
       }
+    case CHART_TYPE.FUNNEL:
+      {
+        return /*#__PURE__*/React.createElement(FunnelDataSettings, props);
+      }
     default:
       {
         return null;

package/dist/settings/funnel-settings/components/dnd-item/dnd-item.js

@@ -0,0 +1,35 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import React from 'react';
+import styles from './dnd-item.module.css';
+export default function DndItem(_ref) {
+  let {
+    option
+  } = _ref;
+  const {
+    setNodeRef,
+    attributes,
+    listeners,
+    transform,
+    transition
+  } = useSortable({
+    id: option.id,
+    transition: {
+      duration: 500,
+      easing: 'cubic-bezier(0.25, 1, 0.5, 1)'
+    }
+  });
+  const dndStyles = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: styles['dnd-item'],
+    ref: setNodeRef,
+    style: dndStyles
+  }, attributes, listeners), /*#__PURE__*/React.createElement("i", {
+    className: "dtable-font dtable-icon-drag pr-2"
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles['option-name']
+  }, option.name));
+}

package/dist/settings/funnel-settings/components/dnd-item/dnd-item.module.css

@@ -0,0 +1,22 @@
+
+.dnd-item {
+    width: 100%;
+    border-radius: 6px;
+    height: 30px;
+    background-color: #f2f3f5;
+    margin-bottom: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.option-name {
+    width: calc(100% - 30px);
+    white-space: nowrap;    
+    overflow: hidden;      
+    text-overflow: ellipsis;
+}
+
+:global(.dnd-list-container .dtable-font.dtable-icon-drag) {
+    font-size: 12px;
+    padding-left: 10px;
+}

package/dist/settings/funnel-settings/components/dnd-list.js

@@ -0,0 +1,60 @@
+import React, { useCallback } from 'react';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { restrictToParentElement } from '@dnd-kit/modifiers';
+import DndItem from './dnd-item/dnd-item';
+const getIndex = (active, over, array) => {
+  let activeIndex = 0;
+  let overIndex = 0;
+  try {
+    array.forEach((item, index) => {
+      if (active.id === item.id) {
+        activeIndex = index;
+      }
+      if (over.id === item.id) {
+        overIndex = index;
+      }
+    });
+  } catch (error) {
+    // reset
+    overIndex = activeIndex;
+  }
+  return {
+    activeIndex,
+    overIndex
+  };
+};
+export default function DndList(_ref) {
+  let {
+    list,
+    onListChange
+  } = _ref;
+  const handleDragEnd = useCallback(_ref2 => {
+    let {
+      active,
+      over
+    } = _ref2;
+    if (over && active.id !== over.id) {
+      const {
+        activeIndex,
+        overIndex
+      } = getIndex(active, over, list);
+      const newList = [...list];
+      const newSortedList = arrayMove(newList, activeIndex, overIndex);
+      onListChange(newSortedList);
+    }
+  }, [list, onListChange]);
+  if (!(list === null || list === void 0 ? void 0 : list.length)) return null;
+  return /*#__PURE__*/React.createElement(DndContext, {
+    onDragEnd: handleDragEnd,
+    modifiers: [restrictToParentElement]
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: list.map(item => item.id),
+    strategy: verticalListSortingStrategy
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dnd-list-container"
+  }, list.map(item => /*#__PURE__*/React.createElement(DndItem, {
+    option: item,
+    key: item.id
+  })))));
+}

package/dist/settings/funnel-settings/components/funnel-label-setting.js

@@ -0,0 +1,66 @@
+import _CollapsibleSettingLayout from "dtable-ui-component/lib/CollapsibleSettingLayout";
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import intl from '../../../intl';
+import { FontSizeSettings } from '../../widgets/font-settings';
+import { FUNNEL_LABEL_FORMAT, FUNNEL_LABEL_POSITIONS, SETTING_DEFAULT_FONT_SIZE } from '../../../constants';
+const labelPositionOptions = [{
+  value: FUNNEL_LABEL_POSITIONS.INSIDE,
+  label: /*#__PURE__*/React.createElement("span", null, intl.get('Inside'))
+}, {
+  value: FUNNEL_LABEL_POSITIONS.OUTSIDE,
+  label: /*#__PURE__*/React.createElement("span", null, intl.get('Outside'))
+}];
+const labelFormatOptions = [{
+  value: FUNNEL_LABEL_FORMAT.NUMBER,
+  label: /*#__PURE__*/React.createElement("span", null, intl.get('Number'))
+}, {
+  value: FUNNEL_LABEL_FORMAT.PERCENTAGE,
+  label: /*#__PURE__*/React.createElement("span", null, intl.get('Percentage'))
+}, {
+  value: FUNNEL_LABEL_FORMAT.NUMBER_AND_PERCENTAGE,
+  label: /*#__PURE__*/React.createElement("span", null, intl.get('Number_and_percentage'))
+}];
+export default function FunnelLabelSetting(_ref) {
+  let {
+    onChange,
+    funnelLabelPosition,
+    funnelLabelFormat,
+    funnelLabelFontSize,
+    funnelShowOverallRate,
+    funnelShowLabels
+  } = _ref;
+  const handleChange = useCallback(function handleChange(value, key) {
+    onChange && onChange({
+      [key]: value
+    });
+  }, [onChange]);
+  const selectedLabelPosition = labelPositionOptions.find(option => option.value === funnelLabelPosition);
+  const selectedLabelFormat = labelFormatOptions.find(option => option.value === funnelLabelFormat);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_CollapsibleSettingLayout, {
+    title: intl.get('Label')
+  }, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
+    checked: funnelShowLabels,
+    placeholder: intl.get('Show_funnel_layer_label'),
+    onChange: e => handleChange(e.target.checked, 'funnel_show_labels')
+  })), funnelShowLabels && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_position')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    value: selectedLabelPosition || labelPositionOptions[1],
+    onChange: e => handleChange(e.value, 'funnel_label_position'),
+    options: labelPositionOptions
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Label_format')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    value: selectedLabelFormat || labelFormatOptions[0],
+    onChange: e => handleChange(e.value, 'funnel_label_format'),
+    options: labelFormatOptions
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(FontSizeSettings, {
+    className: 'mt-3',
+    fontSize: funnelLabelFontSize,
+    defaultFontSize: SETTING_DEFAULT_FONT_SIZE,
+    modifyFontSize: e => handleChange(e, 'funnel_label_font_size')
+  })), /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
+    checked: funnelShowOverallRate,
+    placeholder: intl.get('Show_overall_rate'),
+    onChange: e => handleChange(e.target.checked, 'funnel_show_overall_rate')
+  })))));
+}

package/dist/settings/funnel-settings/components/funnel-layer-setting.js

@@ -0,0 +1,72 @@
+import _DTableSelect from "dtable-ui-component/lib/DTableSelect";
+import { COLUMNS_ICON_CONFIG } from 'dtable-utils';
+import React, { useCallback, useMemo } from 'react';
+import { FormGroup, Label } from 'reactstrap';
+import { cloneDeep } from 'lodash-es';
+import intl from '../../../intl';
+import DndList from './dnd-list';
+export default function FunnelLayerSetting(_ref) {
+  let {
+    selectedColumnKey,
+    x_axis_option_list,
+    columnList,
+    onChange
+  } = _ref;
+  const options = useMemo(() => columnList.map(column => {
+    return {
+      value: column,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "header-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: COLUMNS_ICON_CONFIG[column.type]
+      })), /*#__PURE__*/React.createElement("span", {
+        className: 'select-option-name'
+      }, column.name))
+    };
+  }), [columnList]);
+
+  // selectedColumnKey maybe inherited from another chart and so maybe it's not a singleSelect column
+  // columnList here is a list of singleSelect columns
+  const selectedColumn = columnList.find(c => c.key === selectedColumnKey);
+
+  // if selectedColumn is a singleSelect column, then use it's option and option's list
+  let selectedOption,
+    singleSelectOptionsList = [];
+  if (selectedColumnKey && selectedColumn) {
+    selectedOption = {
+      value: selectedColumn,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        className: "header-icon"
+      }, /*#__PURE__*/React.createElement("i", {
+        className: COLUMNS_ICON_CONFIG[selectedColumn.type]
+      })), /*#__PURE__*/React.createElement("span", {
+        className: 'select-option-name'
+      }, selectedColumn.name))
+    };
+    singleSelectOptionsList = x_axis_option_list;
+  }
+  const handleXAxisColumnKeyChange = useCallback(option => {
+    const {
+      value
+    } = option;
+    const newList = cloneDeep(value.data.options);
+    onChange({
+      'x_axis_column_key': value.key,
+      'x_axis_option_list': newList
+    });
+  }, [onChange]);
+  const handleListOrderChange = useCallback(newList => {
+    onChange({
+      'x_axis_option_list': newList
+    });
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Funnel_layer')), /*#__PURE__*/React.createElement(_DTableSelect, {
+    value: selectedOption,
+    options: options,
+    onChange: handleXAxisColumnKeyChange
+  })), /*#__PURE__*/React.createElement(DndList, {
+    selectedColumnKey: selectedColumnKey,
+    list: singleSelectOptionsList,
+    onListChange: handleListOrderChange
+  }));
+}

package/dist/settings/funnel-settings/data-settings.js

@@ -0,0 +1,69 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback } from 'react';
+import { CellType } from 'dtable-utils';
+import CommonDataSettings from '../widgets/common-data-settings';
+import Divider from '../widgets/divider';
+import BasicSummary from '../widgets/basic-summary';
+import intl from '../../intl';
+import { CHART_SUMMARY_TYPES, CHART_TYPE } from '../../constants';
+import FunnelLayerSetting from './components/funnel-layer-setting';
+export default function DataSetting(_ref) {
+  let {
+    dataSources,
+    chart,
+    tables,
+    onChange
+  } = _ref;
+  const {
+    x_axis_column_key,
+    table_id,
+    type,
+    x_axis_option_list,
+    funnel_accumulate_values
+  } = chart.config;
+  let singleSelectColumns;
+  if (table_id) {
+    const selectedTable = tables.find(table => table._id === table_id);
+    // only use single select columns
+    singleSelectColumns = selectedTable.columns.filter(column => column.type === CellType.SINGLE_SELECT);
+  } else {
+    singleSelectColumns = [];
+  }
+  const handleFunnelAccumulateValuesChange = useCallback(function (e) {
+    onChange && onChange({
+      funnel_accumulate_values: e.target.checked
+    });
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CommonDataSettings, {
+    dataSources: dataSources,
+    chart: chart,
+    tables: tables,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(FunnelLayerSetting, {
+    selectedColumnKey: x_axis_column_key,
+    x_axis_option_list: x_axis_option_list,
+    columnList: singleSelectColumns,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(BasicSummary, {
+    className: "selected-y-axis",
+    label: intl.get('Y_axis'),
+    showSummaryTypes: type === CHART_TYPE.BAR_CUSTOM ? false : true,
+    summaryTypeKey: 'y_axis_summary_type',
+    summaryMethodKey: 'y_axis_summary_method',
+    summaryColumnKey: 'y_axis_summary_column_key',
+    chart: chart,
+    selectedTableId: table_id,
+    tables: tables,
+    supportColumnTypes: [CellType.NUMBER],
+    summaryTypeOptions: CHART_SUMMARY_TYPES,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(_DTableSwitch, {
+    checked: funnel_accumulate_values,
+    placeholder: intl.get('funnel_accumulate_values'),
+    onChange: handleFunnelAccumulateValuesChange
+  }));
+}

package/dist/settings/funnel-settings/index.js

@@ -0,0 +1,3 @@
+import FunnelDataSettings from './data-settings';
+import FunnelStyleSettings from './style-settings';
+export { FunnelDataSettings, FunnelStyleSettings };

package/dist/settings/funnel-settings/style-settings.js

@@ -0,0 +1,39 @@
+import _DTableSwitch from "dtable-ui-component/lib/DTableSwitch";
+import React, { useCallback } from 'react';
+import intl from '../../intl';
+import Divider from '../widgets/divider';
+import FunnelLabelSetting from './components/funnel-label-setting';
+export default function StyleSetting(_ref) {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const {
+    funnel_show_legend,
+    funnel_show_labels,
+    funnel_label_position,
+    funnel_label_format,
+    funnel_label_font_size,
+    funnel_show_overall_rate
+  } = chart.config;
+  const handleShowLegendChange = useCallback(function (event) {
+    const value = event.target.checked;
+    onChange && onChange({
+      funnel_show_legend: value
+    });
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_DTableSwitch, {
+    checked: funnel_show_legend,
+    placeholder: intl.get('Show_legend'),
+    onChange: handleShowLegendChange
+  }), /*#__PURE__*/React.createElement(Divider, {
+    className: "mt-4"
+  }), /*#__PURE__*/React.createElement(FunnelLabelSetting, {
+    onChange: onChange,
+    funnelShowLabels: funnel_show_labels,
+    funnelLabelPosition: funnel_label_position,
+    funnelLabelFormat: funnel_label_format,
+    funnelLabelFontSize: funnel_label_font_size,
+    funnelShowOverallRate: funnel_show_overall_rate
+  }));
+}

package/dist/settings/style-settings.js

@@ -13,6 +13,7 @@ import StatisticTitleSetting from './widgets/title-settings';
 import { CompletenessStyleSettings } from './completeness-settings';
 import { MapStyleSettings } from './map-settings';
 import { TrendStyleSettings } from './trend-settings';
+import { FunnelStyleSettings } from './funnel-settings';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -131,6 +132,10 @@ const StyleSettings = _ref => {
         {
           return /*#__PURE__*/React.createElement(TrendStyleSettings, props);
         }
+      case CHART_TYPE.FUNNEL:
+        {
+          return /*#__PURE__*/React.createElement(FunnelStyleSettings, props);
+        }
       default:
         {
           return null;

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

@@ -89,6 +89,10 @@ BaseUtils.isValidExistChart = (tables, chart) => {
   }
   if (!groupByColumnKey) return false;
   if (!getTableColumnByKey(table, groupByColumnKey)) return false;
+  if (type === CHART_TYPE.FUNNEL) {
+    const column = getColumnByKey(config.x_axis_column_key, table.columns);
+    if (column.type !== CellType.SINGLE_SELECT) return false;
+  }
   if (type === CHART_TYPE.COMBINATION) {
     const isExist = _BaseUtils.isValidCombinationChart(config, table);
     if (!isExist) return false;

package/dist/utils/chart-utils/original-data-utils/basic-chart-calculator.js

@@ -87,6 +87,7 @@ async function calculateBasicChart(chart, value, _ref) {
     BaseUtils.sortCharts(results, groupbyColumn, 'name'); // sortby statistic label
   }
   results.forEach(item => {
+    item.group_name = item.name;
     item.name = getFormattedLabel(groupbyColumn, item.name, value.collaborators);
   });
   if ([CHART_TYPE.HEAT_MAP].includes(chart.type)) {

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

@@ -32,7 +32,8 @@ const calculatorMap = {
   [CHART_TYPE.MIRROR]: MirrorCalculator,
   [CHART_TYPE.BASIC_NUMBER_CARD]: CardCalculator,
   [CHART_TYPE.TREND]: TrendCalculator,
-  [CHART_TYPE.DASHBOARD]: DashboardCalculator
+  [CHART_TYPE.DASHBOARD]: DashboardCalculator,
+  [CHART_TYPE.FUNNEL]: BasicChartCalculator
 };
 class OriginalDataUtils {}
 _OriginalDataUtils = OriginalDataUtils;

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

@@ -1474,6 +1474,7 @@ SQLStatisticsUtils.sqlResult2JavaScript = (chart, sqlRows, chartSQLMap, columnMa
     case CHART_TYPE.LINE:
     case CHART_TYPE.HORIZONTAL_BAR:
     case CHART_TYPE.AREA:
+    case CHART_TYPE.FUNNEL:
       {
         return {
           result: _SQLStatisticsUtils.basicChartSQLResult2JavaScript(chart, sqlRows, chartSQLMap, columnMap, tables)

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash-es';
 import { GENERIC_KEY_2_SIMILAR_KEYS, GEOLOCATION_GRANULARITY, MAP_LEVEL, MUNICIPALITIES, regions } from '../constants';
 import intl from '../intl';
 import { SERVER_ERROR_DISPLAY_KEY, SERVER_ERROR_MSG } from '../constants/error';
@@ -13,6 +14,28 @@ export { getDateColumnFormat, isCheckboxColumn, getColumnByKey, isStatisticMapCo
 export { generatorKey } from './key-generator';
 export { translateCalendar } from './date-translate';
 export { isFunction } from './common-utils';
+
+/**
+ * return a deep cloned list sorted by the given list
+ *
+ * used in Funnel chart to sort single select options
+ * @param {Array} data
+ * @param {Array} x_axis_option_list
+ * @returns {Array} sortedData
+ */
+export const getSortedDataByGivenOrder = (data, x_axis_option_list) => {
+  const idIndexMap = {};
+  x_axis_option_list.forEach((item, index) => {
+    idIndexMap[item.id] = index;
+  });
+  let sortedData = [];
+  data.forEach(item => {
+    const index = idIndexMap[item.group_name];
+    sortedData[index] = cloneDeep(item);
+  });
+  sortedData = sortedData.filter(Boolean);
+  return sortedData;
+};
 export function getMapCanvasStyle(container, ratio) {
   let cWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
   let cHeight = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 200;

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

@@ -824,7 +824,7 @@ class ChartDataSQL {
           error: this.error
         };
       }
-      if ([CHART_TYPE.BAR, CHART_TYPE.LINE, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.AREA].includes(this.chart_type)) {
+      if ([CHART_TYPE.BAR, CHART_TYPE.LINE, CHART_TYPE.HORIZONTAL_BAR, CHART_TYPE.AREA, CHART_TYPE.FUNNEL].includes(this.chart_type)) {
         const sql = this._basic_statistic_2_sql();
         return {
           sql,

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

@@ -790,6 +790,7 @@ const chartColumn2SqlColumn = (chartElement, table) => {
     case CHART_TYPE.HORIZONTAL_BAR:
     case CHART_TYPE.AREA:
     case CHART_TYPE.COMPARE_BAR:
+    case CHART_TYPE.FUNNEL:
       {
         return basicChartStatisticColumn2sqlColumn(chart, table);
       }
@@ -867,6 +868,7 @@ export const getDatabaseGroupName = (statItem, selectedTable) => {
     case CHART_TYPE.HORIZONTAL_BAR:
     case CHART_TYPE.HORIZONTAL_GROUP_BAR:
     case CHART_TYPE.STACKED_HORIZONTAL_BAR:
+    case CHART_TYPE.FUNNEL:
       {
         let groupby_column_key, groupby_date_granularity, groupby_geolocation_granularity;
         const {

package/dist/view/wrapper/bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash-es';
 import classNames from 'classnames';
-import { CHART_SUMMARY_TYPE, CHART_SUMMARY_SHOW, TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
+import { TYPE_COLOR_USING, CHART_STYLE_COLORS, CHART_THEME_COLOR } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import { getLabelColor, getConvertedColorRules } from '../../utils/color-utils';
 import intl from '../../intl';

package/dist/view/wrapper/funnel.js

@@ -0,0 +1,199 @@
+import React from 'react';
+import { DataSet } from '@antv/data-set';
+import classNames from 'classnames';
+import { BaseUtils, getSortedDataByGivenOrder } from '../../utils';
+import { CHART_THEME_COLOR, FUNNEL_LABEL_FORMAT, FUNNEL_LABEL_POSITIONS } from '../../constants';
+import ChartComponent from './chart-component';
+class Funnel extends ChartComponent {
+  constructor(props) {
+    super(props);
+    this.createChart = () => {
+      const appendPadding = [17, 0, 0, 0]; // used to display value on the top
+      this.initChart(this.container, {
+        appendPadding
+      });
+      this.chart.on('interval:click', e => {
+        this.props.toggleRecords(e.data.data);
+      });
+    };
+    this.drawChart = () => {
+      const {
+        result: data,
+        chart
+      } = this.props;
+      const {
+        x_axis_option_list,
+        funnel_accumulate_values
+      } = chart.config;
+      if (!x_axis_option_list.length) return;
+      const sortedData = getSortedDataByGivenOrder(data, x_axis_option_list);
+      sortedData.total = 0;
+      sortedData.forEach(item => {
+        sortedData.total += item.value;
+      });
+      if (funnel_accumulate_values) {
+        for (let i = sortedData.length - 2; i >= 0; i--) {
+          sortedData[i].value += sortedData[i + 1].value;
+        }
+      }
+      const {
+        DataView
+      } = DataSet;
+      const dv = new DataView().source(sortedData);
+      dv.transform({
+        type: 'map',
+        callback(row) {
+          row.percent = sortedData.total === 0 ? 0 : (row.value / sortedData.total * 100).toFixed(2);
+          return row;
+        }
+      });
+      const dvData = dv.rows;
+      this.loadData(dvData);
+      this.draw(dvData);
+      this.chart.render();
+    };
+    this.draw = sortedData => {
+      const {
+        chart,
+        summaryColumn,
+        tables,
+        globalTheme
+      } = this.props;
+      const {
+        table_id,
+        y_axis_summary_type,
+        y_axis_column_key,
+        y_axis_summary_column_key,
+        y_axis_summary_method,
+        funnel_show_legend,
+        funnel_label_position,
+        funnel_label_font_size,
+        funnel_label_format,
+        funnel_show_labels,
+        funnel_show_overall_rate
+      } = chart.config;
+      const theme = CHART_THEME_COLOR[globalTheme];
+      const title = this.getTitle(tables, table_id, y_axis_summary_type, y_axis_column_key || y_axis_summary_column_key);
+      const isInside = funnel_label_position === FUNNEL_LABEL_POSITIONS.INSIDE;
+      let labelStyle;
+      if (isInside) {
+        labelStyle = {
+          position: 'middle',
+          offsetY: -(funnel_label_font_size + 5),
+          style: {
+            fontSize: funnel_label_font_size,
+            fill: '#fff'
+          },
+          labelLine: true
+        };
+      } else {
+        labelStyle = {
+          position: 'left',
+          offset: -30,
+          style: {
+            fontSize: funnel_label_font_size,
+            fill: theme.labelColor
+          },
+          labelLine: true
+        };
+      }
+      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, "%)")
+      };
+      this.chart.axis(false);
+      this.chart.coordinate('rect').transpose().scale(1, -1);
+      this.chart.interval().adjust('symmetric').position('name*value').shape('funnel').color('name', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']).label('name*value*percent', name => {
+        if (name.length > 35) {
+          name = name.substring(0, 35) + '...';
+        }
+        return {
+          content: funnel_show_labels ? "".concat(name) : ''
+        };
+      }, labelStyle).tooltip('name*value', (name, value) => {
+        return {
+          title,
+          value: BaseUtils.getSummaryValueDisplayString(summaryColumn, value, y_axis_summary_method),
+          name
+        };
+      }).animate({
+        appear: {
+          animation: 'fade-in'
+        },
+        update: {
+          annotation: 'fade-in'
+        }
+      }).state({
+        active: {
+          style: {
+            stroke: null
+          }
+        }
+      });
+      this.chart.on('beforepaint', () => {
+        this.chart.annotation().clear(true);
+        if (!funnel_show_labels) return;
+        sortedData.forEach(obj => {
+          this.chart.annotation().text({
+            top: true,
+            offsetY: isInside ? 12 : 0,
+            position: [obj.name, 'center'],
+            content: contentFormatterMap[funnel_label_format](obj),
+            style: {
+              fontSize: funnel_label_font_size,
+              stroke: null,
+              fill: '#fff',
+              textAlign: 'center'
+            }
+          });
+        });
+        if (funnel_show_overall_rate) {
+          this.chart.annotation().text({
+            top: true,
+            position: ['50.5%', '-4%'],
+            content: sortedData[sortedData.length - 1].percent + '%',
+            style: {
+              fontSize: funnel_label_font_size,
+              stroke: null,
+              fill: theme.labelColor,
+              textAlign: 'center'
+            }
+          });
+        }
+      });
+
+      // console.log(funnel_show_overall_rate);
+
+      if (funnel_show_legend) {
+        this.setLegend('name', theme, 'top-right');
+      } else {
+        this.chart.legend(false);
+      }
+      this.setToolTip();
+      this.chart.interaction('element-active');
+    };
+    this.chart = null;
+  }
+  componentDidMount() {
+    this.createChart();
+    this.drawChart();
+  }
+  componentDidUpdate(prevProps) {
+    if (BaseUtils.shouldChartComponentUpdate(prevProps, this.props)) {
+      this.chart && this.chart.destroy();
+      this.createChart();
+      this.drawChart();
+    }
+  }
+  componentWillUnmount() {
+    this.chart && this.chart.destroy();
+  }
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames('sea-chart-container'),
+      ref: ref => this.container = ref
+    });
+  }
+}
+export default Funnel;

package/dist/view/wrapper/index.js

@@ -25,6 +25,7 @@ import WorldMap from './world-map';
 import HeatMap from './heat-map';
 import Mirror from './mirror';
 import Trend from './trend';
+import Funnel from './funnel';
 const Wrapper = _ref => {
   let {
     dtableStoreValue,
@@ -276,6 +277,12 @@ const Wrapper = _ref => {
             canvasStyle: canvasStyle
           }));
         }
+      case CHART_TYPE.FUNNEL:
+        {
+          return /*#__PURE__*/React.createElement(Funnel, Object.assign({}, baseProps, {
+            canvasStyle: canvasStyle
+          }));
+        }
       default:
         {
           return null;

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "sea-chart",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
     "@antv/g2": "4.1.46",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@seafile/seafile-calendar": "^0.0.24",
     "classnames": "^2.3.2",
     "dayjs": "1.10.7",