Table : TooltipOperator

ziglana · May 23, 2022 · 7ae2e19 · 7ae2e19
1 parent 10c19b4
commit 7ae2e19
Show file tree

Hide file tree

Showing 13 changed files with 526 additions and 26 deletions.
diff --git a/app/src/assets/styles/global.css b/app/src/assets/styles/global.css
@@ -1,5 +1,6 @@
 @import 'normalize.css';
 @import './reset-defaults.css';
+
 body {
   font-size: 13px;
   background: #404040;

diff --git a/app/src/components/Dashboard/ServerOverviewTabPage/ServerOverviewTabPage.tsx b/app/src/components/Dashboard/ServerOverviewTabPage/ServerOverviewTabPage.tsx
@@ -9,6 +9,7 @@ interface Props {
 
 export default function ServerOverviewTabPage({ store }: Props) {
   const [data, setData] = useState(null as DataDecorator | null);
+  const [data2, setData2] = useState(null as DataDecorator | null);
   // const [load, setLoad] = useState(false);
   const { current: a } = useRef(['a']);
   useEffect(() => {
@@ -18,11 +19,16 @@ export default function ServerOverviewTabPage({ store }: Props) {
       store.api.query(sql).then((data) => {
         setData(data);
       });
+      const sql2 = store.api.prepared().queryLogFast(500);
+      store.api.query(sql2).then((data) => {
+        setData2(data);
+      });
     }; // fetch
     fetchData();
   }, [a]);
   return (
     <div>
+      <TableSheet data={data2} />
       <TableSheet data={data} />
     </div>
   );

diff --git a/app/src/components/TableSheet/Icons/html-icon.tsx b/app/src/components/TableSheet/Icons/html-icon.tsx
diff --git a/app/src/components/TableSheet/Icons/icon.tsx b/app/src/components/TableSheet/Icons/icon.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { S2_PREFIX_CLS, IconProps, getIcon, TooltipContentType } from '@antv/s2';
+import { HtmlIcon, HtmlIconProps } from './html-icon';
+import cx from 'classnames';
+
+export const TOOLTIP_DEFAULT_ICON_PROPS: Partial<HtmlIconProps> = {
+  width: 14,
+  height: 14,
+  style: {
+    verticalAlign: 'sub',
+    marginRight: 4,
+  },
+};
+
+interface Props {
+  content: TooltipContentType;
+  style?: any;
+  className?: string;
+}
+
+class ReactElement extends React.PureComponent<Props> {
+  render() {
+    const { style = {}, className, content } = this.props;
+    let htmlNode: string;
+    if (typeof content !== 'string') {
+      htmlNode = content?.innerHTML || '';
+    } else {
+      htmlNode = content;
+    }
+    return (
+      <div
+        style={style}
+        className={cx(`${S2_PREFIX_CLS}-react-element`, className)}
+        dangerouslySetInnerHTML={{ __html: htmlNode }}
+      />
+    );
+  }
+}
+
+export const Icon = (props: IconProps) => {
+  const { icon, ...attrs } = props;
+
+  if (!icon) {
+    return null;
+  }
+
+  if (getIcon(icon as string)) {
+    const name = icon as string;
+
+    return <HtmlIcon name={name} {...TOOLTIP_DEFAULT_ICON_PROPS} {...attrs} />;
+  }
+  return <ReactElement content={icon} {...TOOLTIP_DEFAULT_ICON_PROPS} {...attrs} />;
+};
diff --git a/app/src/components/TableSheet/Icons/index.ts b/app/src/components/TableSheet/Icons/index.ts
@@ -1 +1,2 @@
+export { Icon } from './icon';
 export * from './html-icon';
diff --git a/app/src/components/TableSheet/TableSheet.tsx b/app/src/components/TableSheet/TableSheet.tsx
@@ -57,7 +57,7 @@ export default function TableSheet({
     },
     tooltip: {
       showTooltip: true,
-      renderTooltip: (spreadsheet) => new Tooltip(spreadsheet),
+      renderTooltip: (spreadsheet) => new Tooltip(spreadsheet, data),
     },
     // https://s2.antv.vision/en/examples/case/data-preview#index
     style: {
@@ -66,6 +66,13 @@ export default function TableSheet({
       },
     },
   } as S2Options;
+  // -----
+
+  const getDataInfo = (cellName: string) => {
+    console.log('getCellInfo', cellName);
+    return 'OK!';
+  };
+
   // ----------------------------------- Update Sheet Type
   useEffect(() => {
     //  sheetType = 'pivot' | 'table' | 'gridAnalysis' | 'strategy';
@@ -98,7 +105,6 @@ export default function TableSheet({
     //     {  field: 'type',       name: 'type',     },
     //   ],
     if (!data?.error && data?.rows) {
-      // console.log('Set Data', data);
       setData({
         data: data.rows,
         fields: { columns: data.getColumns().map((o) => o.name) },
@@ -108,7 +114,17 @@ export default function TableSheet({
         //   columns: [],
         // },
         meta: data.getColumns().map((o) => {
-          return { field: o.name, name: o.name };
+          return {
+            field: o.name,
+            name: o.name,
+            // @ts-ignore
+            formatter: (v: unknown) => {
+              if (v instanceof String || typeof v === 'string') {
+                return v.replace('\n', '\u23CE');
+              }
+              return v as string;
+            }, //v.split('\n')?.[0],
+          };
         }),
       });
       setLoading(false);

diff --git a/app/src/components/TableSheet/Tooltip.tsx b/app/src/components/TableSheet/Tooltip.tsx
@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { S2CellType } from '@antv/s2/esm/common/interface';
 import { TooltipComponent, TooltipRenderProps } from './Tooltip/TooltipComponent';
+import DataDecorator from '../../services/api/DataDecorator';
 
 export class Tooltip extends BaseTooltip {
-  constructor(spreadsheet: SpreadSheet) {
+  private data: DataDecorator | null = null;
+
+  constructor(spreadsheet: SpreadSheet, data: DataDecorator | null) {
     super(spreadsheet);
+    this.data = data;
   }
 
   renderContent() {
@@ -16,6 +20,7 @@ export class Tooltip extends BaseTooltip {
       cell = this.spreadsheet.getCell(showOptions.event.target);
     }
     const tooltipProps: TooltipRenderProps = {
+      dataDecorator: this.data,
       ...showOptions,
       cell,
     };

diff --git a/app/src/components/TableSheet/Tooltip/DataCellTips.tsx b/app/src/components/TableSheet/Tooltip/DataCellTips.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { S2CellType, TOOLTIP_PREFIX_CLS } from '@antv/s2';
+import { Event as CanvasEvent } from '@antv/g-base';
+
+export interface TooltipSimple {
+  cell: S2CellType;
+  event?: CanvasEvent | MouseEvent;
+}
+
+export const DataCellTips = (props: TooltipSimple) => {
+  const { cell, event } = props;
+  try {
+    console.log('DataCellTips', cell);
+    if (!cell) throw 'Not set cell';
+    const value = cell.getMeta().fieldValue;
+    console.log('value', value);
+    // /ERe
+    return (
+      <div className={'cell-hint'}>
+        {
+          <textarea
+            wrap={'soft'}
+            readOnly={true}
+            spellCheck={false}
+            defaultValue={''}
+            value={value}
+          />
+        }
+      </div>
+    );
+  } catch (e) {
+    return <div>Tooltip error ${e} </div>;
+  }
+};
diff --git a/app/src/components/TableSheet/Tooltip/TooltipComponent.tsx b/app/src/components/TableSheet/Tooltip/TooltipComponent.tsx
@@ -1,5 +1,8 @@
 import type { S2CellType, TooltipShowOptions } from '@antv/s2';
 import React from 'react';
+import { isEmpty } from 'lodash';
+
+import { Icon } from '../Icons';
 import {
   ListItem,
   TooltipOperatorOptions,
@@ -8,17 +11,33 @@ import {
   TooltipHeadInfo as TooltipHeadInfoType,
   TooltipInterpretationOptions,
   getTooltipDefaultOptions,
+  TOOLTIP_PREFIX_CLS,
+  CellTypes,
 } from '@antv/s2';
 import { Menu, Divider } from 'antd';
 import { TooltipOperator } from './TooltipOperator';
+import { DataCellTips } from './DataCellTips';
+import { TooltipSummary } from './TooltipSummary';
+import { Event as CanvasEvent } from '@antv/g-base';
+import { DataDecorator } from '../../../services';
 
 export interface TooltipRenderProps<T = React.ReactNode> extends TooltipShowOptions<T> {
   readonly cell: S2CellType | null;
+  readonly dataDecorator: null | DataDecorator;
 }
 
 export const TooltipComponent: React.FC<TooltipRenderProps> = (props) => {
-  const { data, options, content, cell } = props;
-
+  const { data, options, content, cell, cellInfos, dataDecorator, event } = props;
+  // TableDataCell , TableColCell
+  // DataCell | HeaderCell | ColCell | CornerCell | RowCell | MergedCell | BaseCell
+  const cellType = cell?.constructor.name;
+  const isClick = event && event.type.match('/mouseup|click/g'); //: "mouseup" | "mousemove" | "click"
+  // const isTargetTotalCell = cell?.isTotals;
+  const isTargetColCell = cell?.cellType === CellTypes.COL_CELL;
+  const isTargetRowCell = cell?.cellType === CellTypes.ROW_CELL;
+  //
+  // const isDataCell = cellType && cellType.includes('DataCell');
+  // const isColCell = cellType && cellType.includes('ColCell');
   // ------------------------------------------------------------------------------------------
   // ------------------------------------------------------------------------------------------
   const renderDivider = () => {
@@ -27,29 +46,97 @@ export const TooltipComponent: React.FC<TooltipRenderProps> = (props) => {
 
   // ------------------------------------------------------------------------------------------
   // Menu column
-  const renderOperation = (operator: TooltipOperatorOptions, onlyMenu?: boolean) => {
-    if (operator && cell && onlyMenu)
-      return (
+  const renderOperation = (operator: TooltipOperatorOptions, onlyMenu: boolean) => {
+    console.log('....operator', operator);
+    return (
+      cell && (
         <TooltipOperator
           onClick={operator.onClick}
           menus={operator.menus}
           onlyMenu={onlyMenu}
           cell={cell}
         />
-      );
-    return <div>Bad muny1</div>;
+      )
+    );
+  };
+  // ------------------------------------------------------------------------------------------
+  const renderContentTip = (cell: S2CellType, event: CanvasEvent | MouseEvent) => {
+    return <DataCellTips cell={cell} event={event} />;
+  };
+  const renderNameTips = (nameTip: TooltipNameTipsOptions) => {
+    const { name, tips } = nameTip || {};
+    console.log('nametip', nameTip);
+    // return <SimpleTips name={name} tips={tips} />;
+  };
+  const renderSummary = (summaries: TooltipSummaryOptions[]) => {
+    return !isEmpty(summaries) && <TooltipSummary summaries={summaries} />;
+  };
+  // ------------------------------------------------------------------------------------------
+  const renderHeadInfo = (headInfo: TooltipHeadInfoType) => {
+    const { cols, rows } = headInfo || {};
+
+    return (
+      (!isEmpty(cols) || !isEmpty(rows)) && (
+        <>
+          {renderDivider()}
+          <div className={`${TOOLTIP_PREFIX_CLS}-head-info-list`}>
+            {cols.map((item: ListItem) => item.value)?.join('/')}
+            {cols.length > 0 && rows.length > 0 && '，'}
+            {rows.map((item: ListItem) => item.value)?.join('/')}
+          </div>
+        </>
+      )
+    );
   };
   // ------------------------------------------------------------------------------------------
   // Base
   const renderContent = () => {
     const option = getTooltipDefaultOptions(options);
     const { operator, onlyMenu } = option;
+
+    //
     const { summaries, headInfo, details, interpretation, infos, tips, name } = data || {};
+    const type = cell;
     const nameTip = { name, tips };
+    //
+
+    console.log('------------', cellType);
+    console.log('Data', data);
+    console.log('interpretation', interpretation);
+    console.log('content', content);
+    console.log('cell', cell);
+    console.log('cellInfos', cellInfos);
+    console.log('event', event);
+
+    // console.log('summaries',summaries);
+    //   console.log('headInfo',headInfo):
+    // console.log('details',details);
+    //   console.log('interpretation',interpretation, infos, tips, name);
+
     if (operator && cell && onlyMenu) {
+      //
       return renderOperation(operator, true);
     }
-    return <div>qwe</div>;
+    const DefaultContent = (
+      <>
+        {
+          cell && isClick && isTargetColCell && (
+            <DataCellTips cell={cell} event={event} />
+          ) /* Содержимое ячейки */
+        }
+        {summaries && renderSummary(summaries) /* Кол-во выбранных элементов и median...*/}
+        {/*{renderInterpretation(interpretation)} ??? Толкование ??? */}
+        {headInfo && renderHeadInfo(headInfo)}
+        {/*{renderDetail(details)}*/}
+        {/*{renderInfos(infos)}*/}
+      </>
+    );
+    return (
+      <div>
+        {operator && renderOperation(operator, false)}
+        {content ?? DefaultContent}
+      </div>
+    );
   };
-  return renderContent();
+  return renderContent(); //  : <></>;
 };
diff --git a/app/src/components/TableSheet/Tooltip/TooltipOperator.tsx b/app/src/components/TableSheet/Tooltip/TooltipOperator.tsx
@@ -2,6 +2,7 @@ import { Menu, Dropdown, MenuProps } from 'antd';
 import { isEmpty, map } from 'lodash';
 import React from 'react';
 import { TooltipOperatorMenu, S2CellType } from '@antv/s2';
+import { Icon } from '../Icons';
 
 interface TooltipOperatorProps {
   onlyMenu: boolean;
@@ -16,15 +17,13 @@ export const TooltipOperator = (props: TooltipOperatorProps) => {
   const renderTitle = (menu: TooltipOperatorMenu) => {
     return (
       <span onClick={() => menu.onClick?.(cell)}>
-        {/*<Icon*/}
-        {/*  icon={menu.icon}*/}
-        {/*  className={`${TOOLTIP_PREFIX_CLS}-operator-icon`}*/}
-        {/*/>*/}
+        {/*className={`${TOOLTIP_PREFIX_CLS}-operator-icon`}*/}
+        {menu.icon && <Icon icon={menu.icon} />}
         {menu.text}
       </span>
     );
   };
-
+  //
   const renderMenu = (menu: TooltipOperatorMenu) => {
     const { key, text, children, onClick } = menu;
 
@@ -63,12 +62,12 @@ export const TooltipOperator = (props: TooltipOperatorProps) => {
       );
 
       return (
-        <Dropdown key={key} overlay={menuRender}>
+        <Dropdown key={key} overlay={menuRender} arrow>
           {renderTitle(menu)}
         </Dropdown>
       );
     });
   };
-
-  return <div>{renderMenus()}</div>;
+  console.log('menus', menus);
+  return <div>reew {renderMenus()}</div>;
 };
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { Icon } from './icon';
		export * from './html-icon';