@guiexpert/demo-table-models 1.0.9 → 1.0.11

package/src/lib/crypto/crypto-top.if.ts

@@ -0,0 +1,19 @@
+export interface CryptoTopIf {
+  id?: number,
+  name: string,
+  symbol: string,
+  priceInUsd: number,
+  change1h: number,
+  change24h: number,
+  change7d: number,
+  change30d: number,
+  change60d: number,
+  change90d: number,
+  marketCapUsd: number,
+  volUsd: number,
+  volBtc: number,
+  circulatingSupply: number,
+  maxSupply: number,
+  tags: string[],
+
+}

package/src/lib/crypto/generateCryptoModel.ts

@@ -0,0 +1,102 @@
+import {
+  ColumnDef,
+  ColumnDefIf,
+  px100,
+  px120,
+  px140,
+  px160,
+  px200,
+  px60,
+  TableFactory,
+  TableModelAndOptions,
+  TableModelAndOptionsIf,
+  TableOptions,
+  TableOptionsIf
+} from "@guiexpert/table";
+import {CryptoTopIf} from "./crypto-top.if";
+import {ChangePercentageRenderer} from "./renderer/change-percentage-renderer";
+import {UsdRenderer} from "./renderer/usd-renderer";
+import {NameAndSymbolRenderer} from "./renderer/name-and-symbol-renderer";
+import {Volumn24hRenderer} from "./renderer/volumn-24h-renderer";
+import {CirculatingSupplyRenderer} from "./renderer/circulating-supply-renderer";
+import {CoinIconRenderer} from "./renderer/coin-icon-renderer";
+import {cryptoData} from "./crypto-data";
+
+
+export function createCryptoModelAndOptions(): TableModelAndOptionsIf {
+
+  const rows: CryptoTopIf[] = cryptoData;
+  const changePercentageRenderer = new ChangePercentageRenderer();
+  const usdRenderer = new UsdRenderer();
+  const nameAndSymbolRenderer = new NameAndSymbolRenderer();
+  const volumn24hRenderer = new Volumn24hRenderer();
+  const circulatingSupplyRenderer = new CirculatingSupplyRenderer(120);
+  const coinIconRenderer = new CoinIconRenderer();
+
+  const columnDefs: ColumnDefIf[] = [
+    ColumnDef.create({
+    property: "symbol",
+    headerLabel: "",
+    width: px60,
+    bodyClasses: ["ge-table-text-align-left"],
+    bodyRenderer: coinIconRenderer
+  }),
+    ColumnDef.create({
+      property: "symbol",
+      headerLabel: "Name",
+      width: px120,
+      bodyClasses: ["ge-table-text-align-left"],
+      headerClasses: ["ge-table-text-align-left"],
+      bodyRenderer: nameAndSymbolRenderer
+    }),
+    ColumnDef.create({
+      property: "priceInUsd",
+      headerLabel: "Price $",
+      width: px100,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"]
+    }),
+    new ColumnDef("change1h", "1h %", px100, undefined, ColumnDef.bodyRenderer(changePercentageRenderer)),
+    new ColumnDef("change24h", "24h %", px100, undefined, ColumnDef.bodyRenderer(changePercentageRenderer)),
+    new ColumnDef("change7d", "7d %", px100, undefined, ColumnDef.bodyRenderer(changePercentageRenderer)),
+    ColumnDef.create({
+      property: "marketCapUsd",
+      headerLabel: "Market Cap",
+      width: px160,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"],
+      bodyRenderer: usdRenderer
+    }),
+    ColumnDef.create({
+      headerLabel: "Volumne (24h)",
+      width: px200,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"],
+      bodyRenderer: volumn24hRenderer
+    }),
+    ColumnDef.create({
+      property: "circulatingSupply",
+      headerLabel: "Circulating Supply",
+      width: px140,
+      bodyRenderer: circulatingSupplyRenderer,
+      bodyClasses: ["ge-table-text-align-right"],
+      headerClasses: ["ge-table-text-align-right"]
+    })];
+  columnDefs.forEach(cd => cd.sortable = () => true);
+
+  const tableOptions: TableOptionsIf = {
+    ...new TableOptions(),
+    hoverColumnVisible: false,
+    verticalBorderVisible: false,
+    defaultRowHeights: {
+      header: 34, body: 50, footer: 0
+    },
+  };
+
+  return new TableModelAndOptions(
+    TableFactory.createTableModel({
+      rows, columnDefs, tableOptions
+    }),
+    tableOptions
+  );
+}

package/src/lib/crypto/renderer/change-percentage-renderer.ts

@@ -0,0 +1,30 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+
+
+export class ChangePercentageRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (cellValue) {
+      const n = Number(cellValue);
+      if (n < 0) {
+        cellDiv.innerHTML = "▾ " + n.toFixed(2) + "%";
+        domService.addClass(cellDiv, "ge-positive-text-color");
+      } else {
+        cellDiv.innerHTML = "▴ " + n.toFixed(2) + "%";
+        domService.addClass(cellDiv, "ge-negative-text-color");
+      }
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/crypto/renderer/circulating-supply-renderer.ts

@@ -0,0 +1,46 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+import { CryptoTopIf } from "../crypto-top.if";
+
+
+export class CirculatingSupplyRenderer implements CellRendererIf {
+
+  private formatter = new Intl.NumberFormat("en-US");
+
+  constructor(
+    private readonly maxWidth: number = 120) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const coin: CryptoTopIf = areaModel.getRowByIndex(rowIndex);
+    if (coin) {
+      const cs = this.formatter.format(coin.circulatingSupply);
+      const max = coin.maxSupply;
+      const buf: string[] = [];
+      buf.push("<div style=\"line-height: 1.2;padding: 10px 0 0 10px;\">");
+      buf.push(cs);
+      buf.push("<br>");
+      if (max) {
+        const w = this.maxWidth * coin.circulatingSupply / max;
+        buf.push(`
+          <div style="width: ${this.maxWidth}px;height: 5px;background-color: #eee;margin:10px 0 0 10px">
+            <div style="width: ${w}px;height: 5px;background-color: #ccc;"></div>
+          </div>
+        `);
+      }
+      buf.push("</div>");
+
+      cellDiv.innerHTML = buf.join("");
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/crypto/renderer/coin-icon-renderer.ts

@@ -0,0 +1,25 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+import { CryptoTopIf } from "../crypto-top.if";
+
+
+export class CoinIconRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const coin: CryptoTopIf = areaModel.getRowByIndex(rowIndex);
+    if (coin?.id) {
+      cellDiv.innerHTML = `<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/${coin.id}.png" style="width:30px;height: 30px;margin: 10px 10px 0 20px;">`;
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/crypto/renderer/name-and-symbol-renderer.ts

@@ -0,0 +1,31 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+import { CryptoTopIf } from "../crypto-top.if";
+
+
+export class NameAndSymbolRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const coin: CryptoTopIf = areaModel.getRowByIndex(rowIndex);
+    if (coin) {
+      const name = coin.name ?? coin.symbol;
+      cellDiv.innerHTML = `
+      <div style="line-height: 1.2;padding: 10px 0 0 10px;">
+        ${name}<br>
+        ${coin.symbol}
+      </div>
+      `;
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/crypto/renderer/usd-renderer.ts

@@ -0,0 +1,26 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+
+
+export class UsdRenderer implements CellRendererIf {
+
+  private formatter = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (cellValue) {
+      const n = Number(cellValue);
+      cellDiv.innerText = this.formatter.format(n);
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/crypto/renderer/volumn-24h-renderer.ts

@@ -0,0 +1,35 @@
+import { AreaIdent, AreaModelIf, CellRendererIf, DomServiceIf, RendererCleanupFnType } from "@guiexpert/table";
+import { CryptoTopIf } from "../crypto-top.if";
+
+
+export class Volumn24hRenderer implements CellRendererIf {
+
+  private formatterUsd = new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });
+  private formatter = new Intl.NumberFormat("en-US");
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    const coin: CryptoTopIf = areaModel.getRowByIndex(rowIndex);
+    if (coin) {
+      const usd = this.formatterUsd.format(coin.volUsd);
+      const btc = this.formatter.format(coin.volBtc);
+      cellDiv.innerHTML = `
+      <div style="line-height: 1.2;padding: 10px 0 0 10px;">
+        ${usd}<br>
+        ${btc} BTC
+      </div>
+      `;
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/generateHeatMapTableModel.ts

@@ -0,0 +1,86 @@
+import { AreaModelArrayOfArrays, DefaultRowHeights, TableFactory, TableModelIf } from "@guiexpert/table";
+
+const defaultRowHeights = new DefaultRowHeights(34, 50, 0);
+
+
+const headerLabel = "_ Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec".split(" ");
+
+const data: number[][] =
+  `2009 27.9 36.7 42.4 54.5 62.5 67.5 72.7 75.7 66.3 55.0 51.2 35.9
+2010 32.5 33.1 48.2 57.9 65.3 74.7 81.3 77.4 71.1 58.1 47.9 32.8
+2011 29.7 36.0 42.3 54.3 64.5 72.3 80.2 75.3 70.0 57.1 51.9 43.3
+2012 37.3 40.9 50.9 54.8 65.1 71.0 78.8 76.7 68.8 58.0 43.9 41.5
+2013 35.1 33.9 40.1 53.0 62.8 72.7 79.8 74.6 67.9 60.2 45.3 38.5
+2014 28.6 31.6 37.7 52.3 64.0 72.5 76.1 74.5 69.7 59.6 45.3 40.5
+2015 29.9 23.9 38.1 54.3 68.5 71.2 78.8 79.0 74.5 58.0 52.8 50.8
+2016 34.5 37.7 48.9 53.3 62.8 72.3 78.7 79.2 71.8 58.8 49.8 38.3
+2017 38.0 41.6 39.2 57.2 61.1 72.0 76.8 74.0 70.5 64.1 46.6 33.4`
+    .split("\n")
+    .map(row => row
+      .split(" ")
+      .map(s => Number(s))
+    );
+
+const MIN = 27.9;
+const MAX = 77.4;
+
+// function getHsl(v: number): string {
+//   const normalizedValue0to1 = (v - MIN) / (MAX - MIN);
+//   const h = Math.floor((1 - normalizedValue0to1) * 360);
+//   return `hsl(${h}deg ,100% ,50%)`;
+// }
+
+class RGB {
+  constructor(
+    public r: number,
+    public g: number,
+    public b: number
+  ) {
+  }
+}
+
+function normalize(value: number, fromSource: number, toSource: number, fromTarget: number, toTarget: number) {
+  return (value - fromSource) / (toSource - fromSource) * (toTarget - fromTarget) + fromTarget;
+}
+
+function getTwoColorGradientRGB(min: number, max: number, value: number): string {
+  var startRGB = new RGB(255, 0, 0);
+  var endRGB = new RGB(0, 0, 255);
+  var percentFade = normalize(value, min, max, 0, 1);
+
+  var diffRed = endRGB.r - startRGB.r;
+  var diffGreen = endRGB.g - startRGB.g;
+  var diffBlue = endRGB.b - startRGB.b;
+
+  diffRed = (diffRed * percentFade) + startRGB.r;
+  diffGreen = (diffGreen * percentFade) + startRGB.g;
+  diffBlue = (diffBlue * percentFade) + startRGB.b;
+
+  return `rgb(${Math.round(diffRed)}, ${Math.round(diffGreen)}, ${Math.round(diffBlue)})`;
+}
+
+
+export function createHeatMapModel(): TableModelIf {
+  const bodyAreaModel = new AreaModelArrayOfArrays("body", data, defaultRowHeights.body);
+  const columnSizes = new Array(headerLabel.length).fill(50);
+  const headerAreaModel = new AreaModelArrayOfArrays("header", [headerLabel], defaultRowHeights.header);
+
+  bodyAreaModel.getCustomStyleAt = (rowIndex: number, columnIndex: number) => {
+    let ret: { [key: string]: string } = {};
+    if (columnIndex > 0) {
+      const n = bodyAreaModel.getValueAt(rowIndex, columnIndex) as number;
+      ret = {
+        "background": getTwoColorGradientRGB(MIN, MAX, n),
+        "color": "#fff"
+      };
+    }
+    ret["paddingTop"] = "10px";
+    return ret;
+  };
+
+  return TableFactory.createTableModel({
+    headerAreaModel,
+    bodyAreaModel,
+    columnSizes
+  });
+}

package/src/lib/generateHeatmapSeattle.ts

@@ -0,0 +1,170 @@
+import { getRawData, RawData } from "./generateHeatmapSeattleData";
+import {
+  AreaModel,
+  ColorRgb,
+  GeCssColorUtil,
+  TableFactory,
+  TableModelIf,
+  ThreeColorGradientArg
+} from "@guiexpert/table";
+
+const defaultRowHeights = 30;
+const defaultColumnWidth = 3;
+const data: RawData[] = getRawData();
+
+
+const map: { [key: string]: { [key: string]: RawData } } = {};
+data.forEach(item => {
+  const [d, t] = item.date.split("T") as [string, string];
+  if (!map[d]) {
+    map[d] = {};
+  }
+  map[d][t.substring(0, 5)] = item;
+});
+
+
+const days = Object.keys(map);
+const times = ["06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00",
+  "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00",
+  "00:00", "01:00", "02:00", "03:00", "04:00", "05:00"];
+
+
+function getMinMax(): [number, number] {
+  let min = 10;
+  let max = 0;
+  data.forEach(item => {
+    min = Math.min(min, item.temperature);
+    max = Math.max(max, item.temperature);
+  });
+  return [min, max];
+}
+
+const [MIN, MAX] = getMinMax();
+
+export function createHeatMapSeattleModel(): TableModelIf {
+  const bodyAreaModel = new HeatMapSeattleBodyModel();
+  const footerAreaModel = new HeatMapSeattleFooterModel();
+  const columnSizes = [60, ...(new Array(days.length).fill(defaultColumnWidth))];
+
+  return TableFactory.createTableModel({
+    bodyAreaModel,
+    footerAreaModel,
+    columnSizes,
+    fixedLeftColumnCount: 1
+  });
+}
+
+// TODO  split   time vs date, see https://vega.github.io/vega/examples/heatmap/
+// colors  from   #430355 -> #1F908D  -> #FAE625
+
+class HeatMapSeattleBodyModel extends AreaModel {
+
+  override getRowCount(): number {
+    return times.length;
+  }
+
+  override getRowHeight(_rowIndex: number): number {
+    return defaultRowHeights;
+  }
+
+  override getValueAt(rowIndex: number, columnIndex: number): any {
+    if (columnIndex === 0) return times[rowIndex];
+    return "";
+  }
+
+
+  override getTooltipAt(rowIndex: number, columnIndex: number): any {
+    if (columnIndex === 0) {
+      return "";
+    }
+    columnIndex--;
+    const date = days[columnIndex];
+    const time = times[rowIndex];
+    if (map[date] && map[date][time]) {
+      return `${date} ${time} → ${map[date][time].temperature}`;
+    }
+    return "";
+  }
+
+  override getCustomStyleAt(rowIndex: number, columnIndex: number): { [p: string]: string } | undefined {
+    if (columnIndex === 0) {
+      return undefined;
+    }
+    columnIndex--;
+    const date = days[columnIndex];
+    const time = times[rowIndex];
+    if (!map[date] || !map[date][time]) return undefined;
+
+    const n = map[date][time].temperature;
+
+    // const red = new ColorRgb(255, 0, 0);
+    // const blue = new ColorRgb(0, 0, 255);
+    // const p = new TwoColorGradientArg(MIN, red, MAX, blue);
+    // -> "background": GeCssColorUtil.getTwoColorGradientRGB(n, p),
+
+    const minColor = new ColorRgb(67, 1, 84);
+    const middleColor = new ColorRgb(31, 144, 141);
+    const maxColor = new ColorRgb(250, 230, 37);
+    const MIDDLE = (MAX + MIN) / 2;
+    const p = new ThreeColorGradientArg(MIN, minColor, MIDDLE, middleColor, MAX, maxColor);
+
+    return {
+      "background": GeCssColorUtil.getThreeColorGradientRGB(n, p),
+      "color": "transparent" // we only want to show the bg color
+    };
+  }
+}
+
+
+class HeatMapSeattleFooterModel extends AreaModel {
+
+  override getRowCount(): number {
+    return 1;
+  }
+
+  override getRowHeight(_rowIndex: number): number {
+    return defaultRowHeights;
+  }
+
+  override getValueAt(_rowIndex: number, columnIndex: number): any {
+    if (columnIndex === 1) return "Jan";
+    if (columnIndex === 32) return "Feb";
+    if (columnIndex === 60) return "Mar";
+    if (columnIndex === 91) return "Apr";
+    if (columnIndex === 121) return "May";
+    if (columnIndex === 152) return "Jun";
+    if (columnIndex === 182) return "Jul";
+    if (columnIndex === 213) return "Aug";
+    if (columnIndex === 244) return "Sep";
+    if (columnIndex === 274) return "Oct";
+    if (columnIndex === 305) return "Nov";
+    if (columnIndex === 335) return "Dec";
+    return "";
+  }
+
+  override getColspanAt(_rowIndex: number, columnIndex: number): number {
+    if (columnIndex === 1) return 31;
+    if (columnIndex === 32) return 28;
+    if (columnIndex === 60) return 31;
+    if (columnIndex === 91) return 30;
+    if (columnIndex === 121) return 31;
+    if (columnIndex === 152) return 30;
+    if (columnIndex === 182) return 31;
+    if (columnIndex === 213) return 31;
+    if (columnIndex === 244) return 30;
+    if (columnIndex === 274) return 31;
+    if (columnIndex === 305) return 30;
+    if (columnIndex === 335) return 31;
+    return 0;
+  }
+
+  override getMaxColspan(): number {
+    return 32;
+  }
+
+  override getCustomStyleAt(_rowIndex: number, columnIndex: number): { [p: string]: string } | undefined {
+    return {
+      "border-left": columnIndex > 2 ? "solid 1px #555" : "none"
+    };
+  }
+}