chore(trading): grid cell fixes (#2986)

2023-02-24 06:38:45 -08:00 · 2023-02-24 06:38:45 -08:00 · 56b5214dbf
commit 56b5214dbf
parent 94509a29c5
11 changed files with 163 additions and 118 deletions
--- a/libs/market-depth/src/lib/orderbook-row.tsx
+++ b/libs/market-depth/src/lib/orderbook-row.tsx
@ -70,7 +70,6 @@ export const OrderbookRow = React.memo(
          relativeAsk={cumulativeRelativeAsk}
          relativeBid={cumulativeRelativeBid}
          indicativeVolume={indicativeVolume}
-          className="pr-4 text-black dark:text-white"
        />
      </>
    );
--- a/libs/market-depth/src/lib/orderbook.tsx
+++ b/libs/market-depth/src/lib/orderbook.tsx
@ -201,26 +201,8 @@ const OrderbookDebugInfo = ({
  midPrice?: string;
 }) => (
  <Fragment>
-    <div
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '0',
-        borderTop: '1px solid rgba(255,0,0,0.5)',
-        background: 'black',
-        width: '100%',
-        transform: 'translateY(-50%)',
-      }}
-    ></div>
-    <div
-      className="absolute left-0 bottom-0 font-mono"
-      style={{
-        fontSize: '10px',
-        color: '#FFF',
-        background: '#000',
-        padding: '2px',
-      }}
-    >
+    <div className="absolute top-1/2 left-0 border-t border-t-black w-full" />
+    <div className="text-xs p-2 bg-black/80 text-white absolute left-0 bottom-6 font-mono">
      <pre>
        {JSON.stringify(
          {
@ -493,12 +475,7 @@ export const Orderbook = ({

  const tableBody =
    data && data.length !== 0 ? (
-      <div
-        className="grid grid-cols-4 gap-[0.3125rem] text-right"
-        style={{
-          gridAutoRows: '17px',
-        }}
-      >
+      <div className="grid grid-cols-4 gap-1 text-right auto-rows-[17px]">
        {data.map((data, i) => (
          <OrderbookRow
            key={data.price}
@ -559,14 +536,13 @@ export const Orderbook = ({
      onDoubleClick={() => setDebug(!debug)}
    >
      <div
-        className="absolute top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
-        style={{ gridAutoRows: '17px' }}
+        className="absolute top-0 grid grid-cols-4 auto-rows-[17px] gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
        ref={headerElement}
      >
        <div>{t('Bid vol')}</div>
        <div>{t('Ask vol')}</div>
        <div>{t('Price')}</div>
-        <div className="pr-[2px] whitespace-nowrap overflow-hidden text-ellipsis">
+        <div className="pr-1 whitespace-nowrap overflow-hidden text-ellipsis">
          {t('Cumulative vol')}
        </div>
      </div>
@ -605,8 +581,7 @@ export const Orderbook = ({
        )}
      </div>
      <div
-        className="absolute bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black w-full"
-        style={{ gridAutoRows: '20px' }}
+        className="absolute bottom-0 grid grid-cols-4 gap-2 border-t border-default mt-2 z-10 bg-white dark:bg-black w-full"
        ref={footerElement}
      >
        <div className="col-span-2">
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/libs/positions/src/lib/positions-table.tsx
@ -323,6 +323,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
          field="realisedPNL"
          type="rightAligned"
          cellClassRules={signedNumberCssClassRules}
+          cellClass="text-right font-mono"
          filter="agNumberColumnFilter"
          valueGetter={({
            data,
@ -347,6 +348,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
          field="unrealisedPNL"
          type="rightAligned"
          cellClassRules={signedNumberCssClassRules}
+          cellClass="text-right font-mono"
          filter="agNumberColumnFilter"
          valueGetter={({
            data,
--- a/libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx
@ -1,7 +1,6 @@
-import React from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
-import classNames from 'classnames';
+import { memo } from 'react';
 import { BID_COLOR, ASK_COLOR } from './vol-cell';
+import { NumericCell } from './numeric-cell';
 import { addDecimalsFormatNumber } from '../format';

 export interface CumulativeVolProps {
@ -15,11 +14,7 @@ export interface CumulativeVolProps {
  positionDecimalPlaces: number;
 }

-export interface ICumulativeVolCellProps extends ICellRendererParams {
-  value: CumulativeVolProps;
-}
-
-export const CumulativeVol = React.memo(
+export const CumulativeVol = memo(
  ({
    relativeAsk,
    relativeBid,
@ -27,7 +22,6 @@ export const CumulativeVol = React.memo(
    bid,
    indicativeVolume,
    testId,
-    className,
    positionDecimalPlaces,
  }: CumulativeVolProps) => {
    const askBar = relativeAsk ? (
@ -40,7 +34,7 @@ export const CumulativeVol = React.memo(
          backgroundColor: ASK_COLOR,
          opacity: 0.6,
        }}
-      ></div>
+      />
    ) : null;
    const bidBar = relativeBid ? (
      <div
@ -53,25 +47,48 @@ export const CumulativeVol = React.memo(
          backgroundColor: BID_COLOR,
          opacity: 0.6,
        }}
-      ></div>
+      />
    ) : null;

    const volume = indicativeVolume ? (
-      <span className="relative">
-        ({addDecimalsFormatNumber(indicativeVolume, positionDecimalPlaces ?? 0)}
+      <span>
+        (
+        <NumericCell
+          value={Number(indicativeVolume)}
+          valueFormatted={addDecimalsFormatNumber(
+            indicativeVolume,
+            positionDecimalPlaces ?? 0
+          )}
+        />
        )
      </span>
    ) : (
-      <span className="relative">
-        {ask ? addDecimalsFormatNumber(ask, positionDecimalPlaces ?? 0) : null}
+      <span>
+        {ask ? (
+          <NumericCell
+            value={ask}
+            valueFormatted={addDecimalsFormatNumber(
+              ask,
+              positionDecimalPlaces ?? 0
+            )}
+          />
+        ) : null}
        {ask && bid ? '/' : null}
-        {bid ? addDecimalsFormatNumber(bid, positionDecimalPlaces ?? 0) : null}
+        {bid ? (
+          <NumericCell
+            value={ask}
+            valueFormatted={addDecimalsFormatNumber(
+              bid,
+              positionDecimalPlaces ?? 0
+            )}
+          />
+        ) : null}
      </span>
    );

    return (
      <div
-        className={classNames('h-full relative', className)}
+        className="relative font-mono pr-1"
        data-testid={testId || 'cumulative-vol'}
      >
        {askBar}
@ -83,9 +100,3 @@ export const CumulativeVol = React.memo(
 );

 CumulativeVol.displayName = 'CumulativeVol';
-
-export const CumulativeVolCell = ({ value }: ICumulativeVolCellProps) => (
-  <CumulativeVol {...value} />
-);
-
-CumulativeVolCell.displayName = 'CumulativeVolCell';
--- a/libs/react-helpers/src/lib/grid/index.ts
+++ b/libs/react-helpers/src/lib/grid/index.ts
@ -8,3 +8,4 @@ export * from './summary-rows';
 export * from './vol-cell';
 export * from './set-filter';
 export * from './date-range-filter';
+export * from './numeric-cell';
--- a/libs/react-helpers/src/lib/grid/numeric-cell.spec.tsx
+++ b/libs/react-helpers/src/lib/grid/numeric-cell.spec.tsx
@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { NumericCell } from './numeric-cell';
+
+describe('NumericCell', () => {
+  const testId = 'cell';
+  it('Displays formatted value', () => {
+    const valueFormatted = '111.00';
+    render(
+      <NumericCell
+        value={111}
+        valueFormatted={valueFormatted}
+        testId={testId}
+      />
+    );
+    expect(screen.getByTestId(testId)).toHaveTextContent(valueFormatted);
+    expect(screen.getByText('00')).toBeInTheDocument();
+    expect(screen.getByText('00')).toHaveClass('opacity-60');
+  });
+
+  it('Displays 0', () => {
+    render(<NumericCell value={0} valueFormatted="0.00" testId={testId} />);
+    expect(screen.getByTestId(testId)).toHaveTextContent('0.00');
+  });
+
+  it('Displays - if value is not a number', () => {
+    render(<NumericCell value={null} valueFormatted="" testId={testId} />);
+    expect(screen.getByTestId(testId)).toHaveTextContent('-');
+  });
+});
--- a/libs/react-helpers/src/lib/grid/numeric-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/numeric-cell.tsx
@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { getDecimalSeparator, isNumeric } from '../format';
+
+interface NumericCellProps {
+  value: number | bigint | null | undefined;
+  valueFormatted: string;
+  testId?: string;
+}
+
+/**
+ * Renders a numeric value in a consistent way for data grid
+ * use, right aligned, monospace and decimals deemphasised
+ */
+export const NumericCell = forwardRef<HTMLSpanElement, NumericCellProps>(
+  ({ value, valueFormatted, testId }, ref) => {
+    if (!isNumeric(value)) {
+      return (
+        <span ref={ref} data-testid={testId}>
+          -
+        </span>
+      );
+    }
+
+    const decimalSeparator = getDecimalSeparator();
+    const valueSplit: string[] = decimalSeparator
+      ? valueFormatted.split(decimalSeparator).map((v) => `${v}`)
+      : [`${value}`];
+
+    return (
+      <span
+        ref={ref}
+        className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
+        data-testid={testId}
+        title={valueFormatted}
+      >
+        {valueSplit[0]}
+        {valueSplit[1] ? decimalSeparator : null}
+        {valueSplit[1] ? (
+          <span className="opacity-60">{valueSplit[1]}</span>
+        ) : null}
+      </span>
+    );
+  }
+);
--- a/libs/react-helpers/src/lib/grid/price-cell.spec.tsx
+++ b/libs/react-helpers/src/lib/grid/price-cell.spec.tsx
@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import * as React from 'react';
+import userEvent from '@testing-library/user-event';

 import { PriceCell } from './price-cell';

-describe('<PriceCell />', () => {
+describe('PriceCell', () => {
  it('Displays formatted value', () => {
    render(<PriceCell value={100} valueFormatted="100.00" />);
    expect(screen.getByTestId('price')).toHaveTextContent('100.00');
    expect(screen.getByTestId('price')).toHaveAttribute('title', '100.00');
  });
+
  it('Displays 0', () => {
    render(<PriceCell value={0} valueFormatted="0.00" />);
    expect(screen.getByTestId('price')).toHaveTextContent('0.00');
@ -19,4 +19,14 @@ describe('<PriceCell />', () => {
    render(<PriceCell value={null} valueFormatted="" />);
    expect(screen.getByTestId('price')).toHaveTextContent('-');
  });
+
+  it('can be clicked if given an onClick handler', async () => {
+    const mockOnClick = jest.fn();
+    const value = 100;
+    render(
+      <PriceCell value={value} valueFormatted="100.00" onClick={mockOnClick} />
+    );
+    await userEvent.click(screen.getByTestId('price'));
+    expect(mockOnClick).toHaveBeenCalledWith(value);
+  });
 });
--- a/libs/react-helpers/src/lib/grid/price-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/price-cell.tsx
@ -1,5 +1,6 @@
 import { memo, forwardRef } from 'react';
-import { getDecimalSeparator, isNumeric } from '../format';
+import { isNumeric } from '../format';
+import { NumericCell } from './numeric-cell';
 export interface IPriceCellProps {
  value: number | bigint | null | undefined;
  valueFormatted: string;
@ -17,41 +18,23 @@ export const PriceCell = memo(
          </span>
        );
      }
-      const decimalSeparator = getDecimalSeparator();
-      const valueSplit: string[] = decimalSeparator
-        ? valueFormatted.split(decimalSeparator).map((v) => `${v}`)
-        : [`${value}`];
      return onClick ? (
        <button
          onClick={() => onClick(value)}
-          className="hover:dark:bg-neutral-800 hover:bg-neutral-200"
+          className="hover:dark:bg-neutral-800 hover:bg-neutral-200 text-right"
        >
-          <span
-            ref={ref}
-            className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
-            data-testid={testId || 'price'}
-            title={valueFormatted}
-          >
-            {valueSplit[0]}
-            {valueSplit[1] ? decimalSeparator : null}
-            {valueSplit[1] ? (
-              <span className="opacity-60">{valueSplit[1]}</span>
-            ) : null}
-          </span>
+          <NumericCell
+            value={value}
+            valueFormatted={valueFormatted}
+            testId={testId || 'price'}
+          />
        </button>
      ) : (
-        <span
-          ref={ref}
-          className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
-          data-testid={testId || 'price'}
-          title={valueFormatted}
-        >
-          {valueSplit[0]}
-          {valueSplit[1] ? decimalSeparator : null}
-          {valueSplit[1] ? (
-            <span className="opacity-60">{valueSplit[1]}</span>
-          ) : null}
-        </span>
+        <NumericCell
+          value={value}
+          valueFormatted={valueFormatted}
+          testId={testId || 'price'}
+        />
      );
    }
  )
--- a/libs/react-helpers/src/lib/grid/vol-cell.tsx
+++ b/libs/react-helpers/src/lib/grid/vol-cell.tsx
@ -1,8 +1,8 @@
 import React from 'react';
 import type { ICellRendererParams } from 'ag-grid-community';
-import { PriceCell } from './price-cell';
 import classNames from 'classnames';
 import * as tailwind from '@vegaprotocol/tailwindcss-config';
+import { NumericCell } from './numeric-cell';

 export enum VolumeType {
  bid,
@ -43,17 +43,11 @@ export const Vol = React.memo(
            backgroundColor: type === VolumeType.bid ? BID_COLOR : ASK_COLOR,
            opacity: type === VolumeType.bid ? 0.6 : 0.6,
          }}
-        ></div>
-        <PriceCell value={value} valueFormatted={valueFormatted} />
+        />
+        <NumericCell value={value} valueFormatted={valueFormatted} />
      </div>
    );
  }
 );

 Vol.displayName = 'Vol';
-
-export const VolCell = ({ value, valueFormatted }: IVolCellProps) => (
-  <Vol value={value} {...valueFormatted} />
-);
-
-VolCell.displayName = 'VolCell';
--- a/libs/trades/src/lib/trades-table.tsx
+++ b/libs/trades/src/lib/trades-table.tsx
@ -1,16 +1,20 @@
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
 import { forwardRef } from 'react';
-import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+import type {
+  VegaICellRendererParams,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import {
  addDecimal,
  addDecimalsFormatNumber,
  getDateTimeFormat,
+  NumericCell,
  t,
 } from '@vegaprotocol/react-helpers';
 import type { IDatasource, IGetRowsParams } from 'ag-grid-community';
-import type { CellClassParams, ValueFormatterParams } from 'ag-grid-community';
+import type { CellClassParams } from 'ag-grid-community';
 import type { AgGridReactProps } from 'ag-grid-react';
 import type { Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
@ -44,21 +48,15 @@ interface Props extends AgGridReactProps {
  onClick?: (price?: string) => void;
 }

-type TradesTableValueFormatterParams = Omit<
-  ValueFormatterParams,
-  'data' | 'value'
-> & {
-  data: Trade | null;
-};
-
 export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
  return (
    <AgGrid
-      style={{ width: '100%', height: '100%' }}
+      style={{ width: '100%', height: '100%', background: 'red' }}
      overlayNoRowsTemplate={t('No trades')}
      getRowId={({ data }) => data.id}
      ref={ref}
      defaultColDef={{
+        flex: 1,
        resizable: true,
      }}
      {...props}
@ -72,10 +70,8 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
        valueFormatter={({
          value,
          data,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['price'];
-        }) => {
-          if (!data?.market) {
+        }: VegaValueFormatterParams<Trade, 'price'>) => {
+          if (!value || !data?.market) {
            return null;
          }
          return addDecimalsFormatNumber(value, data.market.decimalPlaces);
@ -110,10 +106,8 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
        valueFormatter={({
          value,
          data,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['size'];
-        }) => {
-          if (!data?.market) {
+        }: VegaValueFormatterParams<Trade, 'size'>) => {
+          if (!value || !data?.market) {
            return null;
          }
          return addDecimalsFormatNumber(
@ -121,16 +115,17 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
            data.market.positionDecimalPlaces
          );
        }}
+        cellRenderer={NumericCell}
      />
      <AgGridColumn
        headerName={t('Created at')}
        field="createdAt"
+        type="rightAligned"
        width={170}
+        cellClass="text-right"
        valueFormatter={({
          value,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['createdAt'];
-        }) => {
+        }: VegaValueFormatterParams<Trade, 'createdAt'>) => {
          return value && getDateTimeFormat().format(new Date(value));
        }}
      />