add progress cell renderer (finos#683)

vuu-ui/packages/vuu-table-extras/src/cell-renderers/background-cell/BackgroundCell.tsx

@@ -1,8 +1,4 @@
-import {
-  ColumnType,
-  ColumnTypeRenderer,
-  TableCellProps,
-} from "@finos/vuu-datagrid-types";
+import { ColumnType, TableCellProps } from "@finos/vuu-datagrid-types";
 import {
   DOWN1,
   DOWN2,

vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.css

@@ -0,0 +1,39 @@
+.vuuProgressCell {
+   align-items: center;
+   display: flex;
+}
+
+.vuuProgressCell-track {
+    display: inline-block;
+    flex: auto 1 1;
+    height: 4px;
+    overflow: hidden;
+    position: relative;
+}
+
+.vuuProgressCell-bg {
+    background-color: var(--salt-measured-background);
+    display: inline-block;
+    height: 2px;
+    left: 0;
+    position: absolute;
+    top: 1px;
+    width: 100%;
+}
+
+
+.vuuProgressCell-bar {
+    background-color: var(--salt-measured-fill);
+    display: inline-block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top:0;
+    transform: translateX(var(--progress-bar-pct, -100%));
+    width: 100%;
+}
+
+.vuuProgressCell-text {
+    flex: 35px 0 0;
+    text-align: right;
+}

vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/ProgressCell.tsx

@@ -0,0 +1,66 @@
+import { TableCellProps } from "@finos/vuu-datagrid-types";
+import {
+  isColumnTypeRenderer,
+  isTypeDescriptor,
+  registerComponent,
+} from "@finos/vuu-utils";
+import cx from "classnames";
+import { CSSProperties } from "react";
+
+import "./ProgressCell.css";
+
+const classBase = "vuuProgressCell";
+
+const ProgressCell = ({ column, columnMap, row }: TableCellProps) => {
+  //TODO what about click handling
+
+  const { type } = column;
+  const value = row[column.key];
+  let showProgress = false;
+  let percentage = 0;
+
+  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);
+        }
+      }
+    }
+  }
+
+  const className = cx(classBase, {});
+
+  return (
+    <div className={className} tabIndex={-1}>
+      {showProgress ? (
+        <span className={`${classBase}-track`}>
+          <span className={`${classBase}-bg`} />
+          <span
+            className={`${classBase}-bar`}
+            style={
+              { "--progress-bar-pct": `-${100 - percentage}%` } as CSSProperties
+            }
+          />
+        </span>
+      ) : null}
+      <span className={`${classBase}-text`}>{`${percentage} %`}</span>
+    </div>
+  );
+};
+
+registerComponent("vuu.progress", ProgressCell, "cell-renderer", {
+  serverDataType: ["long", "int", "double"],
+});

vuu-ui/packages/vuu-table-extras/src/cell-renderers/progress-cell/index.ts

@@ -0,0 +1 @@
+export * from "./ProgressCell";

vuu-ui/sample-apps/feature-vuu-blotter/src/VuuBlotter.css

@@ -10,6 +10,7 @@
   --vuuDataGrid-font-size: 10px;
   --vuuDataGridCell-border-style: none;
   --vuuDataGridRow-background-odd: var(--salt-palette-neutral-background-high);
+  max-height: 100%;
 }
 
 .vuuBlotter-gridContainer {

vuu-ui/showcase/src/examples/utils/useSchemas.ts

@@ -1,7 +1,15 @@
+import { TableSchema } from "@finos/vuu-data";
 import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import { VuuTable } from "@finos/vuu-protocol-types";
 import { Reducer, useReducer } from "react";
 
+export type VuuTableName =
+  | "instruments"
+  | "orders"
+  | "childOrders"
+  | "parentOrders"
+  | "prices";
+
 export type Schema = { table: VuuTable; columns: ColumnDescriptor[] };
 const schemas: { [key: string]: Schema } = {
   instruments: {
@@ -22,11 +30,11 @@ const schemas: { [key: string]: Schema } = {
       { name: "created", type: "date" },
       {
         name: "filledQuantity",
-        label: "Filled Quantity %",
+        label: "Fill Progress",
 
         type: {
           name: "number",
-          renderer: { name: "progress", associatedField: "quantity" },
+          renderer: { name: "vuu.progress", associatedField: "quantity" },
           formatting: { decimals: 0 },
         },
         width: 120,
@@ -37,6 +45,11 @@ const schemas: { [key: string]: Schema } = {
       { name: "ric" },
       { name: "side" },
       { name: "trader" },
+      // {
+      //   name: "filledQtyPct",
+      //   expression: "=if(quantity=0, 0, min(1, filledQuantity / quantity))",
+      //   serverDataType: "double",
+      // },
     ],
     table: { module: "SIMUL", table: "orders" },
   },
@@ -147,3 +160,22 @@ export const useSchemas = () => {
     dispatch,
   };
 };
+
+export const useSchema = (tableName: VuuTableName) => {
+  const { schemas } = useSchemas();
+  if (schemas[tableName]) {
+    return schemas[tableName];
+  }
+  throw Error(`useSchema no schema for table ${tableName}`);
+};
+
+export const useTableSchema = (tableName: VuuTableName): TableSchema => {
+  const { table, columns } = useSchema(tableName);
+  return {
+    table,
+    columns: columns.map(({ name, serverDataType = "string" }) => ({
+      name,
+      serverDataType,
+    })),
+  };
+};