@guiexpert/table 1.1.18 → 1.1.21

package/src/lib/table/renderer/cell-group-ext-cell-renderer.ts

@@ -0,0 +1,123 @@
+import { AreaModelIf } from '../data/tablemodel/areamodel/area-model.if';
+import { CellRendererIf } from './cell-render.if';
+import { DomServiceIf } from '../service/dom-service.if';
+import { AreaIdent } from '../data/tablemodel/area-ident.type';
+import { RendererCleanupFnType } from './renderer-cleanup-fn.type';
+import { CellGroupExt } from '../data/tablemodel/cellgroup/cell-group-ext';
+import { HeaderGroupOptions } from '../data/options/header-group-options';
+import { HeaderGroupOptionsIf } from '../data/options/header-group-options.if';
+import { IconIf } from '../data/options/icon.if';
+
+
+export class CellGroupExtCellRenderer implements CellRendererIf {
+
+  private static toggleHeaderGroup = 'toggleHeaderGroup';
+
+  constructor(
+    private headerGroupOptions: HeaderGroupOptionsIf = new HeaderGroupOptions()
+  ) {
+  }
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: CellGroupExt | undefined | null,
+    domService: DomServiceIf,
+
+  ): RendererCleanupFnType | undefined {
+
+    const label = cellValue?.data ? cellValue.data : '';
+    if (cellValue) {
+      const { toggle, visibility, closed } = cellValue;
+
+      const action = toggle ? CellGroupExtCellRenderer.toggleHeaderGroup : '';
+      this.addText(cellDiv, areaIdent, rowIndex, columnIndex, label, action);
+      if (toggle && visibility !== 'always') {
+        this.addArrowDiv(domService, cellDiv, !closed, rowIndex, columnIndex, areaIdent, action);
+      }
+    } else {
+      this.addText(cellDiv, areaIdent, rowIndex, columnIndex, label, '');
+    }
+    return undefined;
+  }
+
+
+  private addText(
+    cellDiv: HTMLDivElement,
+    areaIdent: 'header' | 'body' | 'footer',
+    rowIndex: number,
+    columnIndex: number,
+    label: string,
+    action:string) {
+
+    cellDiv.innerHTML = `<span 
+                data-ge-action="${action}"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-col-index="${columnIndex}"
+                >${label}</span>`;
+  }
+
+  private addArrowDiv(
+    domService: DomServiceIf,
+    parent: HTMLDivElement,
+    expanded: boolean = true,
+    rowIndex: number = -1,
+    columnIndex: number = -1,
+    areaIdent: AreaIdent = 'header',
+    action:string
+  ): HTMLDivElement {
+
+    const div = domService.createElement<HTMLDivElement>('div');
+    domService.addClass(div, 'ge-table-toggle-icon-div');
+    domService.setStyle(div, 'display', 'inline-block');
+    domService.setStyle(div, 'position', '');
+    domService.setStyle(div, 'width', '20px');
+    domService.setStyle(div, 'background', 'transparent');
+    domService.setStyle(div, 'cursor', 'pointer');
+    domService.setAttribute(div, 'data-row-index', `${rowIndex}`);
+    domService.setAttribute(div, 'data-col-index', `${columnIndex}`);
+    domService.setAttribute(div, 'data-area', `${areaIdent}`);
+    domService.setAttribute(div, 'data-ge-action', `${action}`);
+
+    let treeOptionsArrow: IconIf;
+    if (expanded) {
+      treeOptionsArrow = this.headerGroupOptions.iconExpanded;
+    } else {
+      treeOptionsArrow = this.headerGroupOptions.iconCollapsed;
+    }
+    // Text:
+    const content = treeOptionsArrow.content;
+    const textElement = domService.createText(content);
+    domService.appendChild(div, textElement);
+
+    // Style:
+    if (treeOptionsArrow.style) {
+      this.applyStyleString(domService, div, treeOptionsArrow.style);
+    }
+
+    // Classes:
+    for (const clazz of treeOptionsArrow.classes) {
+      domService.addClass(div, clazz);
+    }
+
+    domService.appendChild(parent, div);
+    return div;
+  }
+
+
+  applyStyleString(domService: DomServiceIf, div: HTMLDivElement, style: string) {
+    // transform: rotate(-90deg) translate(-100%, 0); transform-origin: left top; font-size: 1.5em;
+    const cmds = style.split(';').map(s => s.trim()).filter(s => s);
+    for (const cmd of cmds) {
+      const [key, value] = cmd.split(':');
+      domService.setStyle(div, key.trim(), value.trim());
+    }
+  }
+
+
+}

package/src/lib/table/renderer/cell-render.if.ts

@@ -0,0 +1,16 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+export interface CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined;
+}

package/src/lib/table/renderer/checkbox-boolean-property-cell-renderer.ts

@@ -0,0 +1,63 @@
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+import { AreaModelObjectArray } from "../data/tablemodel/areamodel/area-model-object-array";
+
+/**
+ * Works with AreaModelObjectArray only
+ */
+export class CheckboxBooleanPropertyCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public property: string,
+    public skipCheckableCheck: boolean = true,
+    public readonly: boolean = false
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelObjectArray<T>,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (this.readonly || this.skipCheckableCheck || areaModel.isRowCheckable(rowIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-checkbox-div");
+      const row = areaModel.getRowByIndex(rowIndex);
+      const boxChecked = areaModel.getValueByT(row, this.property) === true;
+      const checked = boxChecked ? "checked" : "";
+      const readonly = this.readonly ? " readonly " : "";
+
+      domService.addClass(cellDiv, "ge-padding-property-checkbox");
+      cellDiv.innerHTML = `
+        <input
+          type="checkbox"
+          data-area="${areaIdent}"
+          data-row-index="${rowIndex}"
+          data-col-index="${columnIndex}"
+          data-property-index="${this.property}"
+          data-input-type="checkbox"
+          ${checked}
+          ${readonly}
+          class="ge-input-checkbox">`;
+
+      if (!this.readonly) {
+        const inputEle = cellDiv.querySelector<HTMLInputElement>(".ge-input-checkbox");
+        if (inputEle) {
+          // @ts-ignore
+          inputEle.addEventListener("click", (_ele: HTMLInputElement, _evt: MouseEvent) => {
+            // @ts-ignore
+            row[this.property] = !row[this.property];
+            return true;
+          });
+        }
+      }
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/checkbox-cell-renderer.ts

@@ -0,0 +1,39 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class CheckboxCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isRowCheckable(rowIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-checkbox-div");
+      const rowChecked = areaModel.isRowChecked(rowIndex);
+      const checked = (rowChecked === "full") ? "checked" : "";
+      const semi = (rowChecked === "semi") ? "<span style=\"opacity: 0.4;\">✓<span>" : "";
+      cellDiv.innerHTML = `
+        <input
+            type="checkbox"
+            data-area="${areaIdent}"
+            data-row-index="${rowIndex}"
+            data-col-index="${columnIndex}"
+            data-input-type="checkbox"
+            ${checked}
+            class="ge-table-row-checkbox">
+        ${semi}  `;
+    }
+    return undefined;
+  }
+
+
+}

package/src/lib/table/renderer/date-to-int-date-cell-renderer.ts

@@ -0,0 +1,39 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToIntlDDMMYYYYCellRenderer implements CellRendererIf {
+
+  readonly formatter = new Intl.DateTimeFormat("de-DE", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit"
+  });
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      let dateStr = '';
+      try {
+        dateStr = this.formatter.format(new Date(cellValue));
+      } catch (e) {
+        dateStr = cellValue;
+      }
+      cellDiv.innerHTML = `
+          <div class="ge-table-label-div" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}" style="position: relative; background: transparent; width: 100%; height: 100%;">
+            <div class="ge-table-label" data-row-index="${rowIndex}" data-col-index="${columnIndex}" data-area="${areaIdent}">${dateStr}</div>
+          </div>`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/date-to-iso-cell-renderer.ts

@@ -0,0 +1,25 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToIsoCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue).toISOString();
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/date-to-locale-date-cell-renderer.ts

@@ -0,0 +1,24 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToLocaleDateCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue).toLocaleDateString();
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/date-to-tec-cell-renderer.ts

@@ -0,0 +1,28 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class DateToTecCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue) {
+      cellDiv.innerText = new Date(cellValue)
+        .toISOString()
+        .replace(/T/g, " ")
+        .replace(/\..*/g, "");
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/edit/edit-cell-renderer.type.ts

@@ -0,0 +1,3 @@
+import { CellRendererIf } from "../cell-render.if";
+
+export type GetEditRenderer = (rowIndex: number, columnIndex: number) => CellRendererIf | undefined;

package/src/lib/table/renderer/edit/edit-input-pipe-for-number.ts

@@ -0,0 +1,6 @@
+import { editInputPipe } from "./edit-input-pipe.if";
+
+export const editInputPipeForNumber: editInputPipe = function(value: any, _rowIndex: number, _columnIndex: number) {
+  return value ? Number(value) : "";
+}
+

package/src/lib/table/renderer/edit/edit-input-pipe.if.ts

@@ -0,0 +1,15 @@
+
+
+/**
+ * Represents an editInputPipe function.
+ * @typedef {Function} editInputPipe
+ * @param {any} input - The input object.
+ * @param {number} rowIndex - The index of the row.
+ * @param {number} columnIndex - The index of the column.
+ * @returns {any|undefined} - The modified input object or undefined.
+ */
+export interface editInputPipe {
+  (input: any, rowIndex: number, columnIndex: number): any | undefined;
+}
+
+

package/src/lib/table/renderer/edit/input-cell-renderer.ts

@@ -0,0 +1,41 @@
+import { CellRendererIf } from "../cell-render.if";
+import { AreaIdent } from "../../data/tablemodel/area-ident.type";
+import { AreaModelIf } from "../../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../../service/dom-service.if";
+import { RendererCleanupFnType } from "../renderer-cleanup-fn.type";
+
+
+export class InputCellRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isEditable(rowIndex, columnIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-input-div");
+
+      const val = areaModel.getValueAt(rowIndex, columnIndex);
+      cellDiv.innerHTML = `
+            <input
+                type="text"
+                value="${val}"
+                autofocus
+                onfocus="this.setSelectionRange(0, this.value.length)"
+                data-listen="change"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-col-index="${columnIndex}"
+                data-input-type="text"
+                style="width:calc(100% - 8px);height:100%;border:0;padding:0 0 0 8px;"
+                class="ge-table-cell-editor-input">`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/edit/select-cell-renderer.ts

@@ -0,0 +1,60 @@
+import { CellRendererIf } from "../cell-render.if";
+import { AreaIdent } from "../../data/tablemodel/area-ident.type";
+import { AreaModelIf } from "../../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../../service/dom-service.if";
+import { RendererCleanupFnType } from "../renderer-cleanup-fn.type";
+import { ValueLabelIf } from "../../data/common/value-label.if";
+import { ValueLabel } from "../../data/common/value-label";
+
+
+export class SelectCellRenderer implements CellRendererIf {
+
+  constructor(
+    protected options: ValueLabelIf[]
+  ) {
+  }
+
+  static create(values: string[]) {
+    return new SelectCellRenderer(
+      values.map(v => new ValueLabel(v, v))
+    );
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    areaModel: AreaModelIf,
+    _cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (areaModel.isEditable(rowIndex, columnIndex)) {
+      domService.addClass(cellDiv, "ge-table-row-select-div");
+
+      const val = areaModel.getValueAt(rowIndex, columnIndex);
+
+      let opts = [];
+      for (let option of this.options) {
+        const selected = (option.value === val) ? " selected " : "";
+        opts.push(`<option value="${option.value}" ${selected}>${option.label}</option>`);
+      }
+      const o = opts.join("");
+
+      cellDiv.innerHTML = `
+            <select
+                type="text"
+                value="${val}"
+                autofocus
+                data-listen="change"
+                data-area="${areaIdent}"
+                data-row-index="${rowIndex}"
+                data-col-index="${columnIndex}"
+                data-input-type="text"
+                style="width:100%;height:100%;border:0;padding:0 0 0 8px;"
+                class="ge-table-cell-editor-select">${o}</select>`;
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/male-female-to-icon-cell-renderer.ts

@@ -0,0 +1,26 @@
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { CellRendererIf } from "./cell-render.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class MaleFemaleToIconCellRenderer implements CellRendererIf {
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    _domService: DomServiceIf): RendererCleanupFnType | undefined {
+    if (cellValue === "male" || cellValue === "m") {
+      cellDiv.innerText = "♂";
+    } else if (cellValue === "female" || cellValue === "f") {
+      cellDiv.innerText = "♀";
+    }
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/number-cell-progress-bar-cell-renderer.ts

@@ -0,0 +1,57 @@
+import {CellRendererIf} from "./cell-render.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+import {AreaModelObjectArray} from "../data/tablemodel/areamodel/area-model-object-array";
+
+
+export class NumberCellProgressBarCellRenderer<T> implements CellRendererIf {
+
+  constructor(
+    public maxValue: number=100,
+    public labelVisible:boolean = false
+  ) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    _areaModel: AreaModelObjectArray<T>,
+    cellValue: number,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    domService.addClass(cellDiv, "ge-progressbar-div");
+
+    if (!isNaN(cellValue)) {
+      const count: number = Number(cellValue);
+      const per = count * 100 / this.maxValue;
+      const label = this.labelVisible ? (Math.round(per) + '%'):'';
+
+      cellDiv.innerHTML = `
+        <div class="ge-table-label-div"
+          data-row-index="${rowIndex}"
+          data-col-index="${columnIndex}"
+          data-area="${areaIdent}"
+          title="${label}"
+          style="position: relative; background: transparent; width: 100%; height: 100%;">
+              <div class="ge-table-progress-container"
+                  style="width:100%;height:50%;padding:0;margin-top:6px;"
+                  data-row-index="${rowIndex}"
+                  data-col-index="${columnIndex}"
+                  data-area="${areaIdent}">
+                  <div class="ge-table-progress-bar"
+                      style="width:${per}%;height:100%;padding:0;margin:0;"
+                      data-row-index="${rowIndex}"
+                      data-col-index="${columnIndex}"
+                      data-area="${areaIdent}">&nbsp;
+                  </div>
+              </div>
+          </div>`;
+    }
+
+    return undefined;
+  }
+
+}

package/src/lib/table/renderer/number-cell-renderer.ts

@@ -0,0 +1,38 @@
+import { CellRendererIf } from "./cell-render.if";
+import { AreaModelIf } from "../data/tablemodel/areamodel/area-model.if";
+import { DomServiceIf } from "../service/dom-service.if";
+import { AreaIdent } from "../data/tablemodel/area-ident.type";
+import { RendererCleanupFnType } from "./renderer-cleanup-fn.type";
+
+
+export class NumberCellRenderer implements CellRendererIf {
+
+  constructor(
+    protected min: number = Number.MIN_SAFE_INTEGER,
+    protected max: number = Number.MAX_SAFE_INTEGER) {
+  }
+
+  render(
+    cellDiv: HTMLDivElement,
+    _rowIndex: number,
+    _columnIndex: number,
+    _areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (cellValue) {
+      cellDiv.innerText = cellValue;
+      if (typeof cellValue === "string"
+        || isNaN(cellValue)
+        || cellValue < this.min
+        || cellValue > this.max
+      ) {
+        domService.addClass(cellDiv, "ge-cell-error");
+      }
+    }
+    return undefined;
+  }
+
+}
+

package/src/lib/table/renderer/positive-and-negative-number-renderer.ts

@@ -0,0 +1,45 @@
+import {CellRendererIf} from "./cell-render.if";
+import {AreaIdent} from "../data/tablemodel/area-ident.type";
+import {AreaModelIf} from "../data/tablemodel/areamodel/area-model.if";
+import {DomServiceIf} from "../service/dom-service.if";
+import {RendererCleanupFnType} from "./renderer-cleanup-fn.type";
+
+
+export class PositiveAndNegativeNumberRenderer implements CellRendererIf {
+
+
+  render(
+    cellDiv: HTMLDivElement,
+    rowIndex: number,
+    columnIndex: number,
+    areaIdent: AreaIdent,
+    _areaModel: AreaModelIf,
+    cellValue: any,
+    domService: DomServiceIf): RendererCleanupFnType | undefined {
+
+    if (cellValue) {
+      cellDiv.innerHTML = `
+          <div 
+            class="ge-table-label-div" 
+            data-row-index=${rowIndex}" 
+            data-col-index="${columnIndex}" 
+            data-area="${areaIdent}" 
+            style="position: relative; background: transparent; width: 100%; height: 100%;">
+            <div 
+              class="ge-table-label"  
+              data-row-index="${rowIndex}" 
+              data-col-index="${columnIndex}" 
+              data-area="${areaIdent}">${cellValue}</div></div>`;
+      const n = Number(cellValue);
+      if (n > 0) {
+        domService.addClass(cellDiv, "ge-positive-text-color");
+
+      } else if (n < 0) {
+        domService.addClass(cellDiv, "ge-negative-text-color");
+      }
+    }
+    return undefined;
+  }
+
+}
+