Skip to content

Commit

Permalink
Basket on market (#895)
Browse files Browse the repository at this point in the history
* add on market table

* wire up FilterTableFeature

* fix type issues
  • Loading branch information
heswell authored Oct 6, 2023
1 parent f5b5be8 commit 58287f0
Show file tree
Hide file tree
Showing 49 changed files with 908 additions and 496 deletions.
1 change: 1 addition & 0 deletions vuu-ui/packages/vuu-datagrid-types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
} from "@finos/vuu-protocol-types";
import type { FunctionComponent, MouseEvent } from "react";
import type { ClientSideValidationChecker } from "@finos/vuu-ui-controls";
import type { ColumnMap } from "@finos/vuu-utils";

export type TableSelectionModel = "none" | "single" | "checkbox" | "extended";

Expand Down
2 changes: 1 addition & 1 deletion vuu-ui/packages/vuu-icons/index.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export const MeasuredContainer = forwardRef(function MeasuredContainer(
width,
});

console.log(`MeasuredContainer ${width} * ${height}`);
const { cssSize, innerSize } = containerMeasurements;
const unmeasured = innerSize === undefined;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { TableCellProps } from "@finos/vuu-datagrid-types";
import {
isColumnTypeRenderer,
isTypeDescriptor,
isValidNumber,
registerComponent,
} from "@finos/vuu-utils";
import cx from "classnames";
Expand All @@ -21,23 +22,28 @@ const ProgressCell = ({ column, columnMap, row }: TableCellProps) => {

if (isTypeDescriptor(type) && isColumnTypeRenderer(type.renderer)) {
const { associatedField } = type.renderer;
const associatedValue = row[columnMap[associatedField]];
if (typeof value === "number" && typeof associatedValue === "number") {
percentage = Math.min(Math.round((value / associatedValue) * 100), 100);
showProgress = isFinite(percentage);
} else {
// Temp workaround for bug on server that sends aggregated values as strings
const floatValue = parseFloat(value as string);
if (Number.isFinite(floatValue)) {
const floatOtherValue = parseFloat(associatedValue as string);
if (Number.isFinite(floatOtherValue)) {
percentage = Math.min(
Math.round((floatValue / floatOtherValue) * 100),
100
);
showProgress = isFinite(percentage);
if (associatedField) {
const associatedValue = row[columnMap[associatedField]];
if (typeof isValidNumber(value) && isValidNumber(associatedValue)) {
percentage = Math.min(Math.round((value / associatedValue) * 100), 100);
percentage = Math.min(Math.round((value / associatedValue) * 100), 100);
showProgress = isFinite(percentage);
} else {
// Temp workaround for bug on server that sends aggregated values as strings
const floatValue = parseFloat(value as string);
if (Number.isFinite(floatValue)) {
const floatOtherValue = parseFloat(associatedValue as string);
if (Number.isFinite(floatOtherValue)) {
percentage = Math.min(
Math.round((floatValue / floatOtherValue) * 100),
100
);
showProgress = isFinite(percentage);
}
}
}
} else {
throw Error("ProgressCell associatedField is required to render");
}
}

Expand Down
8 changes: 0 additions & 8 deletions vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ export const TableNext = ({
}: TableProps) => {
const id = useId(idProp);
const containerRef = useRef<HTMLDivElement>(null);
console.log(`TableNext rowHeight = ${rowHeight}`);
const {
columnMap,
columns,
Expand Down Expand Up @@ -73,13 +72,6 @@ export const TableNext = ({
selectionModel,
});

useEffect(() => {
console.log("Table mounted");
return () => {
console.log("Table unmounted");
};
}, []);

const getStyle = () => {
return {
...styleProp,
Expand Down
5 changes: 4 additions & 1 deletion vuu-ui/packages/vuu-theme/css/foundations/color.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,15 @@
--vuu-color-gray-28: rgb(249, 249, 251); /* #F9F9FB */
--vuu-color-gray-30: rgb(214, 215, 218); /* #D6D7Da */
--vuu-color-gray-35: rgb(155, 158, 168); /* #9B9EA8; */
--vuu-color-gray-40: rgb(169, 170, 173); /* #A9AAAD */
--vuu-color-gray-40: rgb(169, 170, 173); /* #A9AAAD */
--vuu-color-gray-42: rgb(135, 139, 158); /* #878b9e */
--vuu-color-gray-45: rgb(119, 124, 148); /* #777C94 */
--vuu-color-gray-50: rgb(96, 100, 119); /* #606477 */
--vuu-color-gray-80: rgb(21, 23, 27); /* #15171B */

--vuu-color-green-50: rgb(102, 174, 90); /* #66AE5A */
--vuu-color-green-60: rgb(36, 137, 19); /* #248913 */
--vuu-color-green-60-fade-30: rgba(36, 137, 19, .3); /* #248913 */

--vuu-color-red-50: rgb(226, 52, 52); /* #E23434 */

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,25 +19,29 @@ const basketStatus: [BasketStatus, BasketStatus] = ["design", "on-market"];
export interface BasketTradingFeatureProps {
basketDefinitionsSchema: TableSchema;
basketDesignSchema: TableSchema;
basketOrdersSchema: TableSchema;
instrumentsSchema: TableSchema;
}

const VuuBasketTradingFeature = ({
basketDesignSchema,
basketDefinitionsSchema,
basketDesignSchema,
basketOrdersSchema,
instrumentsSchema,
}: BasketTradingFeatureProps) => {
const {
activeTabIndex,
dataSourceBasket,
dataSourceBasketSearch,
dataSourceBasketDesign,
dataSourceBasketOrders,
dataSourceInstruments,
onSendToMarket,
onTakeOffMarket,
} = useBasketTradingDataSources({
basketDefinitionsSchema,
basketDesignSchema,
basketOrdersSchema,
instrumentsSchema,
});

Expand Down Expand Up @@ -98,7 +102,11 @@ const VuuBasketTradingFeature = ({
dataSource={dataSourceBasketDesign}
tableSchema={basketDesignSchema}
/>
<BasketTableLive data-tab-title="On Market" />
<BasketTableLive
data-tab-title="On Market"
dataSource={dataSourceBasketOrders}
tableSchema={basketOrdersSchema}
/>
</Stack>
</FlexboxLayout>
</ContextMenuProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,9 +70,10 @@ const applyColumnDefaults = (tableSchema: TableSchema) =>
name: "string",
renderer: {
name: "dropdown-cell",
// TODO how do we get these
values: [
"Strategy 1",
"Strategy 2",
"Peg to near touch",
"Limit",
"Strategy 3",
"Strategy 4",
"Strategy 5",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.vuuBasketTableLive .vuuTableNextCell:has(.vuuBasketSpreadCell),
.vuuBasketTableLive .vuuTableNextCell:has(.vuuBasketTradingStatusCell){
align-items: center;;
display: inline-flex;
}
Original file line number Diff line number Diff line change
@@ -1,7 +1,156 @@
import { TableSchema } from "@finos/vuu-data";
import { ColumnDescriptor, TableConfig } from "@finos/vuu-datagrid-types";
import { TableNext, TableProps } from "@finos/vuu-table";
import { useMemo } from "react";
import { StatusCell } from "../cell-renderers";

console.log(`component loaded StatusCell ${typeof StatusCell}`);
import "./BasketTableLive.css";

const classBase = "vuuBasketTableLive";

export const BasketTableLive = () => {
return <div className={classBase} />;
export interface BasketTableLiveProps extends Omit<TableProps, "config"> {
tableSchema: TableSchema;
}

const labels: { [key: string]: string } = {
ask: "Ask",
bid: "Bid",
filled: "Pct Filled",
limitPrice: "Limit Price",
priceSpread: "Price Spread",
priceStrategy: "Price Strategy",
quantity: "Quantity",
weighting: "Weighting",
};

const applyColumnDefaults = (tableSchema: TableSchema) =>
tableSchema.columns.map<ColumnDescriptor>((column) => {
switch (column.name) {
case "ric":
return {
...column,
label: "Ticker",
pin: "left",
};
case "status":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "string",
renderer: {
name: "basket-status",
},
},
} as ColumnDescriptor;
case "ask":
case "bid":
case "last":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
formatting: {
alignOnDecimals: true,
decimals: 2,
zeroPad: true,
},
},
} as ColumnDescriptor;
case "limitPrice":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
formatting: {
alignOnDecimals: true,
decimals: 2,
zeroPad: true,
},
},
} as ColumnDescriptor;
case "priceStrategy":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "string",
},
};
case "priceSpread":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
renderer: {
name: "basket-spread",
},
},
};
case "quantity":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
formatting: {
decimals: 0,
},
},
};
case "filled":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
renderer: {
name: "basket-progress",
associatedField: "quantity",
},
},
};
case "weighting":
return {
...column,
label: labels[column.name] ?? column.name,
type: {
name: "number",
formatting: {
alignOnDecimals: true,
decimals: 2,
zeroPad: true,
},
},
};
default:
return column;
}
});

export const BasketTableLive = ({
tableSchema,
...props
}: BasketTableLiveProps) => {
const tableConfig = useMemo<TableConfig>(
() => ({
columns: applyColumnDefaults(tableSchema),
rowSeparators: true,
}),
[tableSchema]
);

return (
<TableNext
{...props}
renderBufferSize={20}
className={classBase}
config={tableConfig}
rowHeight={21}
/>
);
};
Loading

0 comments on commit 58287f0

Please sign in to comment.