@guiexpert/demo-table-models 1.0.9 → 1.0.11

package/src/index.ts

@@ -0,0 +1,26 @@
+export * from "./lib/crypto/generateCryptoModel";
+export * from "./lib/crypto/crypto-top.if";
+export * from "./lib/crypto/crypto-data";
+export * from "./lib/crypto/renderer/change-percentage-renderer";
+export * from "./lib/crypto/renderer/name-and-symbol-renderer";
+export * from "./lib/crypto/renderer/usd-renderer";
+export * from "./lib/crypto/renderer/volumn-24h-renderer";
+export * from "./lib/crypto/renderer/coin-icon-renderer";
+export * from "./lib/crypto/renderer/circulating-supply-renderer";
+
+export * from "./lib/generateSimpleModel";
+export * from "./lib/generateTreeCheckboxModel";
+export * from "./lib/generateHeatMapTableModel";
+export * from "./lib/generateHeatmapSeattle";
+export * from "./lib/headergroup/generateBigHeadergroupModel";
+export * from "./lib/headergroup/generateTeamHeadergroupModel";
+export * from "./lib/createSimplePersonModel";
+export * from "./lib/createTimeTableModel";
+export * from "./lib/createOrderModel";
+export * from "./lib/createLargeModel";
+export * from "./lib/createManyTypesModel";
+export * from "./lib/treepeople/generateTreePeopleModel";
+export * from "./model/address.if";
+export * from "./model/order.if";
+export * from "./model/person.if";
+export * from "./model/many-types.if";

package/src/lib/createLargeModel.ts

@@ -0,0 +1,94 @@
+import {
+  AreaModel, CellRendererIf,
+  ColumnDef,
+  ColumnDefIf,
+  FalseFn, NumberCellProgressBarCellRenderer,
+  px120,
+  px200,
+  SelectionModel,
+  TableFactory,
+  TableModelAndOptions,
+  TableModelAndOptionsIf,
+  TableOptions
+} from '@guiexpert/table';
+
+
+function createLargeColumnDefs(): ColumnDefIf[] {
+
+  return [
+    ColumnDef.create({
+      headerLabel: 'ID',
+      width: px120,
+      bodyClasses: ['ge-table-text-align-left'],
+      headerClasses: ['ge-table-text-align-left'],
+      sortable: FalseFn
+    }),
+    ColumnDef.create({
+      headerLabel: 'Value',
+      width: px200,
+      bodyClasses: ['ge-table-text-align-left'],
+      headerClasses: ['ge-table-text-align-left'],
+      sortable: FalseFn
+    }),
+    ColumnDef.create({
+      headerLabel: " ",
+      width: px200,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"]
+    }),
+  ];
+}
+
+function createLargeTableOptions(): TableOptions {
+  const selectionModel = new SelectionModel();
+  return {
+    ...new TableOptions(), hoverColumnVisible: false, defaultRowHeights: {
+      header: 34, body: 34, footer: 0
+    }, getSelectionModel: () => selectionModel
+  };
+}
+
+export function createLargeModelAndOptions(rowcount: number = 1000000): TableModelAndOptionsIf {
+  const tableOptions = createLargeTableOptions();
+  const columnDefs: ColumnDefIf[] = createLargeColumnDefs();
+  const bodyAreaModel = new LargeBodyModel(rowcount);
+  return new TableModelAndOptions(TableFactory.createTableModel({
+    bodyAreaModel, columnDefs, tableOptions, fixedLeftColumnCount: 0
+  }), tableOptions);
+}
+
+export class LargeBodyModel extends AreaModel {
+
+  private readonly nf = new Intl.NumberFormat('en-Us', { });
+
+  private barRenderer:CellRendererIf;
+
+  constructor(private rowcount: number = 1000000) {
+    super();
+    this.barRenderer = new NumberCellProgressBarCellRenderer(rowcount, false);
+  }
+
+  override getRowCount(): number {
+    return this.rowcount;
+  }
+
+  override getRowHeight(_rowIndex: number): number {
+    return 34;
+  }
+
+  override getValueAt(rowIndex: number, columnIndex: number): number | string {
+    if (columnIndex === 0) return 'id' + rowIndex;
+    if (columnIndex === 1) return this.nf.format(rowIndex);
+    return rowIndex;
+  }
+
+  override getCellRenderer(_rowIndex: number, columnIndex: number): CellRendererIf | undefined {
+    if (columnIndex==2) return this.barRenderer;
+    return undefined;
+  }
+
+  override getYPosByRowIndex(rowIndex: number): number {
+    return rowIndex * this.getRowHeight(0);
+  }
+
+}

package/src/lib/createManyTypesModel.ts

@@ -0,0 +1,210 @@
+import {
+  CheckboxBooleanPropertyCellRenderer,
+  ColumnDef,
+  ColumnDefIf,
+  DateToIntlDDMMYYYYCellRenderer, PositiveAndNegativeNumberRenderer,
+  ProgressBarCellRenderer,
+  px100,
+  px120,
+  px140, px200, px220,
+  px60, px80,
+  px90,
+  SelectionModel,
+  SelectionModelIf,
+  StarRatingCellRenderer,
+  TableFactory,
+  TableModelAndOptions,
+  TableModelAndOptionsIf,
+  TableOptions, TrueFalseCellRenderer,
+  TrueFn
+} from '@guiexpert/table';
+import manyTypesData from '../demodata/many-types';
+import { ManyTypesIf } from '../model/many-types.if';
+
+
+function createTableRows(rowCount: number = 75): ManyTypesIf[] {
+  return manyTypesData.slice(0, rowCount - 1);
+}
+
+function createColumnDefs(editable: boolean): ColumnDefIf[] {
+  return [
+      ColumnDef.create({
+      property: 'company',
+      headerLabel: 'Company',
+      width: px100,
+      bodyClasses: ['ge-table-text-align-left'],
+      headerClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'country',
+      headerLabel: 'Country',
+      width: px140,
+      bodyClasses: ['ge-table-text-align-left'],
+      headerClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'product',
+      headerLabel: 'Name',
+      width: px100,
+      bodyClasses: ['ge-table-text-align-left'],
+      headerClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'birthday',
+      headerLabel: 'Birth Date',
+      width: px100,
+      bodyClasses: ['ge-table-text-align-center'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'sellDate',
+      headerLabel: 'Sell date',
+      width: px100,
+      bodyRenderer: new DateToIntlDDMMYYYYCellRenderer(),
+      bodyClasses: ['ge-table-text-align-center'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'lastVisit',
+      headerLabel: 'Last Visit',
+      width: px220,
+      bodyClasses: ['ge-table-text-align-center'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'time',
+      headerLabel: 'Time',
+      width: px100,
+      bodyClasses: ['ge-table-text-align-center'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'id', headerLabel: 'Order ID', width: px120, bodyClasses: ['ge-table-text-align-center'], sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: 'inStock',
+      headerLabel: 'In stock',
+      width: px90,
+      bodyRenderer: new CheckboxBooleanPropertyCellRenderer('inStock', true, true),
+      bodyClasses: ['ge-table-text-align-center'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'quantity',
+      headerLabel: 'Qty',
+      width: px60,
+      bodyClasses: ['ge-table-text-align-right'],
+      headerClasses: ['ge-table-text-align-right'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'progress',
+      headerLabel: 'Progress',
+      width: px100,
+      bodyRenderer: new ProgressBarCellRenderer('progress', 5, true),
+      bodyClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: 'rating',
+      headerLabel: 'Rating',
+      width: px100,
+      bodyRenderer: new StarRatingCellRenderer('rating'),
+      bodyClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn
+    }),
+
+    ColumnDef.create({
+      property: 'price',
+      headerLabel: 'Price',
+      width: px60,
+      bodyClasses: ['ge-table-text-align-right'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'active',
+      headerLabel: 'Active',
+      width: px60,
+      bodyRenderer: new TrueFalseCellRenderer(),
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'currency',
+      headerLabel: 'CCY',
+      width: px60,
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'average',
+      headerLabel: 'Average',
+      width: px100,
+      bodyClasses: ['ge-table-text-align-right'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'f1',
+      headerLabel: 'F1',
+      width: px80,
+      bodyClasses: ['ge-table-text-align-right'],
+      bodyRenderer: new PositiveAndNegativeNumberRenderer(),
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'f2',
+      headerLabel: 'F2',
+      width: px120,
+      bodyClasses: ['ge-table-text-align-right'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    }),
+    ColumnDef.create({
+      property: 'lorem',
+      headerLabel: 'Lorem',
+      width: px200,
+      bodyClasses: ['ge-table-text-align-left'],
+      sortable: TrueFn,
+      editable: ()=> editable
+    })
+
+  ];
+}
+
+function createManyTypesTableOptions(selectionModel: SelectionModelIf): TableOptions {
+  return {
+    ...new TableOptions(), hoverColumnVisible: false, defaultRowHeights: {
+      header: 32, body: 32, footer: 0
+    }, getSelectionModel: () => selectionModel
+  };
+}
+
+export function createManyTypesModelAndOptions(
+  selectionModel: SelectionModelIf = new SelectionModel('row', 'multi'),
+  rowCount: number = 75,
+  editable: boolean = false
+): TableModelAndOptionsIf {
+  const tableOptions = createManyTypesTableOptions(selectionModel);
+  rowCount = Math.max(10, Math.min(75, rowCount));
+  const rows: ManyTypesIf[] = createTableRows(rowCount);
+  const columnDefs: ColumnDefIf[] = createColumnDefs(editable);
+  return new TableModelAndOptions(TableFactory.createTableModel({
+    rows, columnDefs, tableOptions
+  }), tableOptions);
+}
+

package/src/lib/createOrderModel.ts

@@ -0,0 +1,130 @@
+import {
+  CheckboxBooleanPropertyCellRenderer,
+  ColumnDef,
+  ColumnDefIf,
+  DateToIntlDDMMYYYYCellRenderer,
+  ProgressBarCellRenderer,
+  px100,
+  px120,
+  px140,
+  px60,
+  px90,
+  SelectionModel,
+  StarRatingCellRenderer,
+  TableFactory,
+  TableModelAndOptions,
+  TableModelAndOptionsIf,
+  TableOptions,
+  TrueFn
+} from "@guiexpert/table";
+import orderData from "../demodata/orders";
+import {OrderIf} from "../model/order.if";
+
+
+function createTableRows(): OrderIf[] {
+  return orderData;
+}
+
+function createColumnDefs(): ColumnDefIf[] {
+  return [
+    ColumnDef.create({
+      property: "company",
+      headerLabel: "Company",
+      width: px120,
+      bodyClasses: ["ge-table-text-align-left"],
+      headerClasses: ["ge-table-text-align-left"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "country",
+      headerLabel: "Country",
+      width: px140,
+      bodyClasses: ["ge-table-text-align-left"],
+      headerClasses: ["ge-table-text-align-left"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "product",
+      headerLabel: "Name",
+      width: px120,
+      bodyClasses: ["ge-table-text-align-left"],
+      headerClasses: ["ge-table-text-align-left"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "sellDate",
+      headerLabel: "Sell date",
+      width: px100,
+      bodyRenderer: new DateToIntlDDMMYYYYCellRenderer(),
+      bodyClasses: ["ge-table-text-align-center"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "id",
+      headerLabel: "Order ID",
+      width: px120,
+      bodyClasses: ["ge-table-text-align-center"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "inStock",
+      headerLabel: "In stock",
+      width: px90,
+      bodyRenderer: new CheckboxBooleanPropertyCellRenderer('inStock', true, true),
+      bodyClasses: ["ge-table-text-align-center"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "quantity",
+      headerLabel: "Qty",
+      width: px60,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "progress",
+      headerLabel: "Progress",
+      width: px100,
+      bodyRenderer: new ProgressBarCellRenderer('progress', 5, true),
+      bodyClasses: ["ge-table-text-align-left"],
+      sortable: TrueFn
+    }),
+    ColumnDef.create({
+      property: "rating",
+      headerLabel: "Rating",
+      width: px100,
+      bodyRenderer: new StarRatingCellRenderer('rating'),
+      bodyClasses: ["ge-table-text-align-left"],
+      sortable: TrueFn
+    })
+  ];
+}
+
+function createOrderTableOptions(): TableOptions {
+  const selectionModel = new SelectionModel("row", "multi");
+  return {
+    ...new TableOptions(),
+    hoverColumnVisible: false,
+    defaultRowHeights: {
+      header: 24,
+      body: 24,
+      footer: 0
+    },
+    getSelectionModel: () => selectionModel
+  };
+}
+
+export function createOrderModelAndOptions(): TableModelAndOptionsIf {
+  const tableOptions = createOrderTableOptions();
+  const rows: OrderIf[] = createTableRows();
+  const columnDefs: ColumnDefIf[] = createColumnDefs();
+  return new TableModelAndOptions(TableFactory.createTableModel({
+      rows,
+      columnDefs,
+      tableOptions,
+      fixedLeftColumnCount: 0
+    }),
+    tableOptions);
+}
+