linkmore-design 1.1.2 → 1.1.3

package/lib/LmTable/components/tableChartsModal.js

@@ -2,25 +2,53 @@
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _lodash = require("lodash");
-
 var _linkmoreDesign = require("linkmore-design");
 
-var _plots = require("@ant-design/plots");
+var echarts = _interopRequireWildcard(require("echarts/core"));
+
+var _charts = require("echarts/charts");
+
+var _components = require("echarts/components");
+
+var _features = require("echarts/features");
+
+var _renderers = require("echarts/renderers");
 
+var _chartUtil = require("../chartUtil");
+
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+// 引入柱状图图表，图表后缀都为 Chart
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+// 标签自动布局，全局过渡动画等特性
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+// 注册必须的组件
+echarts.use([_components.TitleComponent, _components.TooltipComponent, _components.GridComponent, _components.DatasetComponent, _components.TransformComponent, _charts.BarChart, _charts.LineChart, _charts.PieChart, _features.LabelLayout, _features.UniversalTransition, _renderers.CanvasRenderer]);
+
+function getSelectRange(data, start, end) {
+  var max = Math.max(start, end);
+  var min = Math.min(start, end);
+  var result = data === null || data === void 0 ? void 0 : data.filter(function (item, index) {
+    if (index >= min && index <= max) {
+      return true;
+    }
+
+    return false;
+  });
+  return result;
+}
 /** i 是行  j 是列 */
+
+
 var TableChartsModal = function TableChartsModal(props) {
+  var chartRef = (0, _react.useRef)(null);
+  var chart;
   var type = props.type,
       onCancel = props.onCancel,
       data = props.data,
@@ -29,128 +57,48 @@ var TableChartsModal = function TableChartsModal(props) {
       rowKey = props.rowKey,
       deepDataSource = props.deepDataSource;
   console.log(data, columns, '---props---', rowKey);
-  var keyByCol = (0, _react.useMemo)(function () {
-    return (0, _lodash.keyBy)(columns, 'dataIndex');
-  }, [columns]);
   var resultData = (0, _react.useMemo)(function () {
-    var _a;
-
     var start = selectInfo.start,
         end = selectInfo.end;
-    var rCol = columns === null || columns === void 0 ? void 0 : columns.filter(function (item, index) {
-      var maxJ = Math.max(start.j, end.j);
-      var minJ = Math.min(start.j, end.j);
-
-      if (index >= minJ && index <= maxJ) {
-        return true;
-      }
-
-      return false;
-    }).map(function (item) {
-      return item.dataIndex;
-    });
-    var maxi = Math.max(start.i, end.i);
-    var mini = Math.min(start.i, end.i);
-    var rDataSource = (_a = deepDataSource || data) === null || _a === void 0 ? void 0 : _a.filter(function (item, index) {
-      if (index >= mini && index <= maxi) {
-        return true;
-      }
-
-      return false;
-    }).map(function (item) {
-      return (0, _lodash.pick)(item, [].concat((0, _toConsumableArray2.default)(rCol), [rowKey]));
-    });
-    return {
-      rDataSource: rDataSource,
-      rCol: rCol
-    };
-  }, [data, columns, selectInfo]);
-  var getTypeCol = (0, _react.useMemo)(function () {
-    return columns.filter(function (item) {
-      return item.etype === 'number';
-    }).map(function (item) {
-      return item.dataIndex;
-    });
-  }, [columns]);
-  var Field = (0, _react.useMemo)(function () {
-    var rCol = resultData.rCol;
-    var xField = rCol.find(function (item) {
-      return !getTypeCol.includes(item);
-    });
-    var yField = getTypeCol === null || getTypeCol === void 0 ? void 0 : getTypeCol[0];
-    return {
-      xField: xField,
-      yField: yField
-    };
-  }, [resultData, getTypeCol]);
-  console.log(Field, '--Field--', resultData);
-  var config = (0, _react.useMemo)(function () {
+    var cols = getSelectRange(columns, start.j, end.j);
+    var source = getSelectRange(deepDataSource || data, start.i, end.i);
+    var option;
+
+    if (type === 'bar') {
+      option = (0, _chartUtil.getBarOption)(cols, source);
+    }
+
+    if (type === 'line') {
+      option = (0, _chartUtil.getLineOption)(cols, source);
+    }
+
     if (type === 'pie') {
-      return {
-        appendPadding: 10,
-        data: resultData.rDataSource,
-        angleField: Field.yField,
-        colorField: Field.xField,
-        radius: 0.9,
-        label: {
-          type: 'inner',
-          offset: '-30%',
-          content: function content(_ref) {
-            var percent = _ref.percent;
-            return "".concat((percent * 100).toFixed(0), "%");
-          },
-          style: {
-            fontSize: 14,
-            textAlign: 'center'
-          }
-        },
-        interactions: [{
-          type: 'element-active'
-        }]
-      };
+      option = (0, _chartUtil.getPieOption)(cols, source);
     }
 
     return {
-      data: resultData.rDataSource,
-      xField: rowKey,
-      yField: Field.yField,
-      label: {
-        position: 'middle',
-        style: {
-          fill: '#FFFFFF',
-          opacity: 0.6
-        }
-      },
-      tooltip: {
-        title: Field.xField,
-        formatter: function formatter(datum) {
-          var _a, _b;
-
-          return {
-            name: ((_a = keyByCol[Field.yField]) === null || _a === void 0 ? void 0 : _a.title) || ((_b = keyByCol[Field.yField]) === null || _b === void 0 ? void 0 : _b.dataIndex),
-            value: datum === null || datum === void 0 ? void 0 : datum[Field.yField]
-          };
-        }
-      },
-      xAxis: {
-        label: {
-          formatter: function formatter(text, item, index) {
-            var _a, _b;
-
-            return ((_b = (_a = resultData.rDataSource) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b[Field.xField]) || text;
-          },
-          autoHide: true,
-          autoRotate: false
-        }
-      }
+      source: source,
+      cols: cols,
+      option: option
     };
-  }, [Field, resultData, type]);
+  }, [data, columns, selectInfo]);
+  (0, _react.useEffect)(function () {
+    chart = echarts.init(chartRef.current);
+    chart.setOption(resultData.option);
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_linkmoreDesign.Modal, {
     visible: !!type,
     title: "\u667A\u80FD\u62A5\u8868",
     onOk: onCancel,
     onCancel: onCancel
-  }, type === 'column' && /*#__PURE__*/_react.default.createElement(_plots.Column, Object.assign({}, config)), type === 'line' && /*#__PURE__*/_react.default.createElement(_plots.Line, Object.assign({}, config)), type === 'pie' && /*#__PURE__*/_react.default.createElement(_plots.Pie, Object.assign({}, config)));
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'xiaoming',
+    ref: chartRef,
+    style: {
+      width: 500,
+      height: 400
+    }
+  }));
 };
 
 var _default = TableChartsModal;

package/lib/Popover/index.d.ts

@@ -7,5 +7,5 @@ export interface PopoverProps extends AbstractTooltipProps {
     /** @private Used For Popconfirm. Safe to remove. */
     _overlay?: React.ReactNode;
 }
-declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<unknown>>;
+declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverProps, keyof PopoverProps> & React.RefAttributes<unknown>>;
 export default Popover;

package/lib/QuickMenu/style/index.css

@@ -521,10 +521,12 @@ p {
   width: 0;
   transition: all 0.1s;
   opacity: 0;
+  display: none;
 }
 .lm_quick_menu .lm_menu_list.show {
   opacity: 1;
   width: inherit;
+  display: block;
 }
 .lm_quick_menu .lm_menu_list::before {
   position: absolute;

package/lib/QuickMenu/style/variables.css

@@ -10,10 +10,12 @@
   width: 0;
   transition: all 0.1s;
   opacity: 0;
+  display: none;
 }
 .lm_quick_menu .lm_menu_list.show {
   opacity: 1;
   width: inherit;
+  display: block;
 }
 .lm_quick_menu .lm_menu_list::before {
   position: absolute;

package/lib/Tooltip/index.d.ts

@@ -40,5 +40,5 @@ export interface TooltipPropsWithTitle extends AbstractTooltipProps {
     overlay?: React.ReactNode | RenderFunction;
 }
 export declare type TooltipProps = TooltipPropsWithTitle | TooltipPropsWithOverlay;
-declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<unknown>>;
+declare const Tooltip: React.ForwardRefExoticComponent<(Pick<TooltipPropsWithOverlay, keyof TooltipPropsWithOverlay> | Pick<TooltipPropsWithTitle, keyof TooltipPropsWithTitle>) & React.RefAttributes<unknown>>;
 export default Tooltip;

package/lib/Tree/utils/dropIndicator.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const offset = 4;
 export default function dropIndicatorRender(props: {
     dropPosition: -1 | 0 | 1;

package/lib/locale-provider/index.d.ts

@@ -54,8 +54,8 @@ export default class LocaleProvider extends React.Component<LocaleProviderProps,
     componentDidMount(): void;
     componentDidUpdate(prevProps: LocaleProviderProps): void;
     componentWillUnmount(): void;
-    getMemoizedContextValue: import("memoize-one").MemoizedFn<(localeValue: Locale) => Locale & {
+    getMemoizedContextValue: (localeValue: Locale) => Locale & {
         exist?: boolean;
-    }>;
+    };
     render(): JSX.Element;
 }

package/lib/styles/variables.css

@@ -822,6 +822,11 @@ p {
 .ant-btn.lm-button-primary.ant-btn-loading {
   background: var(--primary-loading-color);
 }
+.ant-btn.lm-button-ghost {
+  color: var(--font-color);
+  border-color: var(--color-15);
+  background: transparent;
+}
 .ant-btn.lm-button-danger {
   border: 1px solid var(--error-color);
   color: var(--error-color);
@@ -11875,10 +11880,12 @@ button.ant-table-row-expand-icon::after {
   width: 0;
   transition: all 0.1s;
   opacity: 0;
+  display: none;
 }
 .lm_quick_menu .lm_menu_list.show {
   opacity: 1;
   width: inherit;
+  display: block;
 }
 .lm_quick_menu .lm_menu_list::before {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkmore-design",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": {
     "name": "nowthen",
     "email": "rnlvwyx@gmail.com"