d0ec016adc
* [#151] Add orderbook * [#151] Add orderbook components * [#151] Add market-depth data provider * [#151] Add orderbook manager * [#151] handle market depth updates in orderbook manager * [#151] Fix PageQueryContainer usage of AsyncRenderer * [#151] Move data handling logig out from orderbook manager * [#151] Use mocked data, fix data issues * [#151] Add compact order book data unit tests * [#151] Add updateData unit tests * [#151] Add updateCompactedData unit tests * [#151] update cummulative vol on update, move data ref handling from effect to manager * [#151] Update cummulative vol on update, fixes * [#151] Optimieze orderbook ag-grid render * [#151] Replace ag-grid with orderbook component * [#151] Use react memo to optimize orderbook rendering * [#151] Fix cummulative vol computation on compacted data update * [#151] Add resolution controls * [#151] Fix cumulative spelling mistake * [#151] Use number instead of string for cumulative values * [#151] Expose restart callback in useDataProvider hook * [#151] Update empty cumulative values * [#151] Add horizontal line under header in orderbook * [#151] reuse orderbook data in market-depth chart * [#151] restart market depth provider on sequenceNumber gap * [#151] use throttle in orderbook and depth-chart * [#151] Add comments, refactor data functions * [#151] Add comments, refactor data functions * [#151] move orderbook and depth-chart libs to market-depth
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import { useRef, useCallback, useMemo } from 'react';
|
|
import { produce } from 'immer';
|
|
import merge from 'lodash/merge';
|
|
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
|
|
import { useDataProvider } from '@vegaprotocol/react-helpers';
|
|
import type { PositionSubscribe_positions } from './__generated__/PositionSubscribe';
|
|
import type { Positions_party_positions } from './__generated__/Positions';
|
|
|
|
import type { AgGridReact } from 'ag-grid-react';
|
|
import PositionsTable, { getRowId } from './positions-table';
|
|
import { positionsDataProvider } from './positions-data-provider';
|
|
|
|
interface PositionsManagerProps {
|
|
partyId: string;
|
|
}
|
|
|
|
export const PositionsManager = ({ partyId }: PositionsManagerProps) => {
|
|
const gridRef = useRef<AgGridReact | null>(null);
|
|
const variables = useMemo(() => ({ partyId }), [partyId]);
|
|
const update = useCallback(
|
|
(delta: PositionSubscribe_positions) => {
|
|
const update: Positions_party_positions[] = [];
|
|
const add: Positions_party_positions[] = [];
|
|
if (!gridRef.current?.api) {
|
|
return false;
|
|
}
|
|
const rowNode = gridRef.current.api.getRowNode(getRowId({ data: delta }));
|
|
if (rowNode) {
|
|
const updatedData = produce<Positions_party_positions>(
|
|
rowNode.data,
|
|
(draft: Positions_party_positions) => {
|
|
merge(draft, delta);
|
|
}
|
|
);
|
|
if (updatedData !== rowNode.data) {
|
|
update.push(updatedData);
|
|
}
|
|
} else {
|
|
add.push(delta);
|
|
}
|
|
if (update.length || add.length) {
|
|
gridRef.current.api.applyTransactionAsync({
|
|
update,
|
|
add,
|
|
addIndex: 0,
|
|
});
|
|
}
|
|
return true;
|
|
},
|
|
[gridRef]
|
|
);
|
|
const { data, error, loading } = useDataProvider<
|
|
Positions_party_positions[],
|
|
PositionSubscribe_positions
|
|
>(positionsDataProvider, update, variables);
|
|
return (
|
|
<AsyncRenderer loading={loading} error={error} data={data}>
|
|
<PositionsTable ref={gridRef} data={data} />
|
|
</AsyncRenderer>
|
|
);
|
|
};
|