@bizdoc/core 1.14.9 → 1.14.10

package/src/lib/cube/parallel/parallel.component.ts

@@ -1,166 +0,0 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
-import { AxisSettingsModel, IPointRegionEventArgs, LineSettingsModel, SparklineType } from '@syncfusion/ej2-angular-charts';
-import { debounceTime, Subject, takeUntil } from 'rxjs';
-import { PromptService } from '../../core/prompt.service';
-import { SessionService } from '../../core/session.service';
-import { AXES_CODE_DIVIDER, CubeService, errResource, Series } from '../../cube/cube.service';
-import { isArray } from '../../core/functions';
-import { AxesMap, Cube } from '../../core/models';
-import { Item } from './item';
-import { ScopeType } from '../../core/configuration';
-/** */
-@Component({
-  selector: 'bizdoc-cube-parallel',
-  templateUrl: './parallel.component.html',
-  styleUrls: ['parallel.component.scss']
-})
-export
-  class CubeParallelComponent implements OnInit, OnChanges, OnDestroy {
-  @Input()
-  filters: AxesMap;
-  @Input()
-  xAxis!: string | string[];
-  @Input()
-  series!: string | string[];
-  @Input()
-  indices?: string | string[];
-  @Input()
-  cube: string;
-  @Input()
-  size: number;
-  @Input()
-  chartType?: SparklineType;
-  @Input()
-  scope?: ScopeType;
-  @Output('explore')
-  readonly onExplore = new EventEmitter<ExploreEvent>();
-  theme: 'Material' | 'MaterialDark' = this._session.theme.dark ? 'MaterialDark' : 'Material';
-  private _palettes = this._session.accentPalette;
-  public get palettes() {
-    return this._palettes;
-  }
-  @Input()
-  public set palettes(value) {
-    this._palettes = value;
-  }
-  items: Item[] = [];
-  format: string;
-  readonly axisSettings = {
-    lineSettings: {
-    } as LineSettingsModel,
-  } as AxisSettingsModel;
-  width: string = '150px';
-  loading: boolean;
-  private _data: Series[];
-  private _cube: Cube;
-  readonly enableRtl = this._session.inverse;
-  private _primary = this._session.primeryPalette;
-  private readonly _loading = new Subject<boolean>();
-  private readonly _destroy = new Subject<void>();
-  constructor(
-    private _sb: PromptService,
-    private _service: CubeService,
-    private _session: SessionService) {
-    this._loading.pipe(debounceTime(200)).subscribe(ok => this.loading = ok);
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
-    this.format = (this._cube.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
-    if (changes['filters']) this._initialize();
-    else if (changes['size'] && this.items.length) this.width = Math.round(this.size / this.items.length) + 'px';
-  }
-  ngOnInit(): void {
-    this._session.themeChange.pipe(takeUntil(this._destroy)).
-      subscribe(t => {
-        this.theme = t.dark ? 'MaterialDark' : 'Material';
-        this._primary = this._session.primeryPalette;
-        this._palettes = this._session.accentPalette;
-        this._draw();
-      });
-  }
-  private _initialize() {
-    this._loading.next(true);
-    const filters = { ...this.filters };
-
-    this._service.series(this._cube.name, this.xAxis, {
-      series: this.series,
-      filters,
-      indices: this.indices,
-      groupIndices: true,
-      scope: this.scope
-    }).subscribe(r => {
-      this._data = r;
-      this._draw();
-      if (this.items.length) this.width = Math.max(Math.round(this.size / this.items.length), 150) + 'px';
-      this._loading.next(false);
-    }, (e: HttpErrorResponse) => {
-      this._sb.error(errResource(e));
-      this._loading.next(false);
-    }
-    );
-  }
-  private _draw() {
-    this.items = [];
-    const colorMap = {};
-    let colorIndex = 0;
-
-    let originalXAxis = this.filters[isArray(this.xAxis) ? this.xAxis[0] : this.xAxis] as string | string[],
-      originalSeries = this.filters[isArray(this.series) ? this.series[0] : this.series] as string | string[];
-
-    if (!isArray(originalXAxis))
-      originalXAxis = [originalXAxis];
-    if (!isArray(originalSeries))
-      originalSeries = [originalSeries];
-    let max = 0;
-    this._data.forEach(s => {
-      if (s.points.length < 2)
-        return;
-      const palettes = [];
-      for (var i = 0; i < s.points.length; i++) {
-        let point = s.points[i], color = colorMap[point.x];
-        if (!color) {
-          color = colorMap[point.x] =
-            s.index
-              || (!this.indices && originalXAxis.indexOf(point.x) > -1
-                && originalSeries.indexOf(s.name) > -1)
-              ? this._primary[colorIndex] : this._palettes[colorIndex];
-          colorIndex++;
-        }
-        palettes.push(color);
-        if (point.y > max)
-          max = point.y;
-      }
-      this.items.push(new Item(this.chartType || 'Pie',
-        s, palettes, s.index ? this._primary[6] :
-        this._palettes[6]));
-    });
-    this.axisSettings.maxY = max;
-  }
-  sprklineClick(item: Item, evt: IPointRegionEventArgs) {
-    const name = item.data.name,
-      x = item.data.points[evt.pointIndex].x, index = item.data.index;
-    const axes: { [axis: string]: any } = {};
-    let { xAxis, series } = this;
-    if (!isArray(xAxis)) xAxis = [xAxis];
-    if (!isArray(series)) xAxis = [series];
-    for (let i = 0; i < series.length; i++)
-      axes[series[i]] = name.split(AXES_CODE_DIVIDER)[i];
-    for (let i = 0; i < xAxis.length; i++) {
-      axes[xAxis[i]] = x.split(AXES_CODE_DIVIDER)[i];
-    }
-    this.onExplore.emit({
-      axes: { ...this.filters, ...axes },
-      index
-    });
-  }
-  ngOnDestroy(): void {
-    this._destroy.next();
-    this._destroy.complete();
-    this._loading.complete();
-  }
-}
-export interface ExploreEvent {
-  axes: AxesMap;
-  index?: string;
-}

package/src/lib/cube/pivot/pivot.component.html

@@ -1,14 +0,0 @@
-<!--<ejs-pivotview #pivotview [id]='id' showGroupingBar='false'
-               [dataSourceSettings]=dataSource [width]='width'
-               [height]='height'
-               [showTooltip]='false' [enableValueSorting]='true'
-               [allowExcelExport]='true'
-               spinnerTemplate=""
-  (excelQueryCellInfo)=excelQueryCellInfo($event)
-               [chartSettings]='chartSettings'
-  [gridSettings]='gridSettings'
-  [displayOption]='displayOption'
-               [hyperlinkSettings]='hyperlinkSettings'
-               (hyperlinkCellClick)='cellClick($event)'
-               [currencyCode]=currencyCode>
-</ejs-pivotview>-->

package/src/lib/cube/pivot/pivot.component.ts

@@ -1,518 +0,0 @@
-import { Component, EventEmitter, OnChanges, Output, OnDestroy, ElementRef, HostBinding, Input, OnInit, SimpleChanges } from '@angular/core';
-import { HttpErrorResponse } from '@angular/common/http';
-import { Direction } from '@angular/cdk/bidi';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { DisplayOptionModel, PivotView, ChartSeriesType, CellClickEventArgs, ExcelExport } from '@syncfusion/ej2-pivotview';
-import { ChartSettingsModel } from '@syncfusion/ej2-pivotview/src/pivotview/model/chartsettings-model';
-import { ConditionalFormatSettingsModel, DataSourceSettingsModel, FieldOptionsModel, FormatSettingsModel, SortModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/datasourcesettings-model";
-import { GridSettingsModel } from "@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings-model";
-import { Chart, IPointEventArgs } from '@syncfusion/ej2-angular-charts';
-import { Internationalization } from '@syncfusion/ej2-base';
-import { Workbook, Worksheet, Row, Column } from '@syncfusion/ej2-excel-export';
-import { Tooltip } from '@syncfusion/ej2-popups';
-import { getWarn, isArray } from '../../core/functions';
-import { FONT_FAMILY } from '../../core/colors';
-import { AxesMap, ChartType, Cube, YAxis } from '../../core/models';
-import { AxisClickEvent, CubeViewerComponent } from "../declarations";
-import { CubeService, DEFAULT_CURRENCY, CLDR_FILES, errResource } from '../cube.service';
-import { PromptService } from '../../core/prompt.service';
-import { SessionService } from '../../core/session.service';
-import { TranslateService } from '../../core/translate.service';
-
-const PIVOT_HEADER_DELIMITER = '|';
-
-@Component({
-  selector: 'bizdoc-cube-pivot',
-  template: '',
-  styles: ['::ng-deep .e-cellvalue { cursor: pointer }'],
-  host: {
-    class: 'cube-view',
-    '[style.direction]': 'dir'
-  }
-})
-/** pivot component*/
-export class CubePivotComponent implements CubeViewerComponent, OnInit, OnChanges, OnDestroy {
-  @Input()
-  width: string | number;
-  @Input()
-  height: string;
-  @Input()
-  cube: string;
-  private _xAxis: string[];
-  tooltip: Tooltip;
-  public get xAxis(): string[] | string {
-    return this._xAxis;
-  }
-  @Input()
-  public set xAxis(value: string[] | string) {
-    this._xAxis = isArray(value) ? value : [value];
-  }
-  @Input()
-  yAxis?: YAxis;
-  private _series?: string[];
-  public get series(): string[] | string {
-    return this._series;
-  }
-  @Input()
-  public set series(value: string[] | string) {
-    if (value) this._series = isArray(value) ? value : [value];
-  }
-  private _indices?: string[];
-  public get indices(): string[] | string {
-    return this._indices;
-  }
-  @Input()
-  public set indices(value: string[] | string) {
-    if (value) this._indices = isArray(value) ? value : [value];
-  }
-  @Input()
-  filters?: AxesMap;
-  @Input()
-  chartType?: ChartType;
-  @Input()
-  indicesChartType?: ChartType;
-  currencyCode: string;
-  private _palettes = this._session.accentPalette;
-  public get palettes() {
-    return this._palettes;
-  }
-  @Input()
-  public set palettes(value) {
-    this._palettes = value;
-  }
-  @Output() readonly explore = new EventEmitter<AxisClickEvent>();
-  @Input() loading: boolean;
-  @Output() readonly loadingChange = new EventEmitter<boolean>();
-  static nextId = 0;
-  @HostBinding()
-  readonly id = `cube-pivotview-${CubePivotComponent.nextId++}`;
-  pivot: PivotView;
-  displayOption: DisplayOptionModel;
-  chartSettings: ChartSettingsModel;
-  dataSource: DataSourceSettingsModel;
-
-  readonly formatSettings: FormatSettingsModel[] = [{
-    name: 'value',
-  }];
-  values: FieldOptionsModel[];
-  private readonly conditionalFormatSettings: ConditionalFormatSettingsModel[] = [{
-    conditions: 'LessThan',
-    value1: 0,
-    measure: 'value',
-    applyGrandTotals: true,
-    style: { color: getWarn() }
-  }];
-  readonly gridSettings: GridSettingsModel = {
-    rowHeight: 36,
-    allowSelection: false
-  };
-  dir: Direction;
-  private _cube: Cube;
-  private _data: {}[];
-  private readonly _intl: Internationalization = new Internationalization();
-  private readonly emptyCellsTextContent = this._intl.formatNumber(0, {});
-  private readonly _destroy = new Subject<void>();
-
-  /** pivot ctor */
-  constructor(private _service: CubeService,
-    private _session: SessionService,
-    private _translate: TranslateService,
-    private _sb: PromptService,
-    private _elementRef: ElementRef) {
-    this._session.themeChange.pipe(takeUntil(this._destroy)).subscribe(t => {
-      if (this.pivot.chart) {
-        this.chartSettings.theme = t.dark ? 'MaterialDark' : 'Material';
-        this.chartSettings.palettes = this._session.accentPalette;
-      } else
-        this.conditionalFormatSettings.forEach(f => f.style.color = getWarn());
-      this._draw();
-    });
-  }
-  ngOnInit() {
-    this._cube = this._session.profile.cubes.find(c => c.name === this.cube) || this._session.profile.cubes[0];
-    this.currencyCode = this._cube.currencyCode;
-    this.dir = this.chartType ? 'ltr' : this._session.direction;
-    this.formatSettings[0].currency = this.currencyCode;
-    if (this._cube.yAxis) switch (this._cube.yAxis.type) {
-      case 'Number':
-      case 'None':
-        this.formatSettings[0].format = 'n' + this._service.fractionDigits;
-        break;
-      default:
-        this.formatSettings[0].format = (this.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
-        break;
-    }
-    else
-      this.formatSettings[0].format = (this.currencyCode ? 'c' : 'n') + this._service.fractionDigits;
-    if (this.chartType) {
-      this.displayOption = {
-        view: 'Chart',
-        primary: 'Chart'
-      };
-      this.chartSettings = {
-        pointClick: this.pointClick.bind(this),
-        chartSeries: { type: this.chartType as ChartSeriesType },
-        //isTransposed: true,        
-        enableExport: true,
-        chartArea: {
-          border: { width: 0 }
-        },
-        palettes: this.palettes,
-        theme: this._session.theme.dark ? 'MaterialDark' : 'Material',
-        background: 'transparent',
-        primaryXAxis: {
-          titleStyle: {
-            fontFamily: FONT_FAMILY
-          },
-          labelStyle: {
-            fontFamily: FONT_FAMILY
-          }
-        },
-        zoomSettings: {
-          enableMouseWheelZooming: true,
-          enablePinchZooming: true,
-          toolbarItems: [],
-          enableSelectionZooming: false,
-          enableScrollbar: true
-        },
-        border: { width: 0 },
-        legendSettings: {
-          isInversed: this._session.inverse,
-          textStyle: {
-            fontFamily: FONT_FAMILY
-          }
-        },
-        tooltip: {
-          enableAnimation: false,
-          border: { width: 0 },
-          textStyle: {
-            fontFamily: FONT_FAMILY
-          }
-        },
-        titleStyle: {
-          fontFamily: FONT_FAMILY
-        },
-        subTitleStyle: {
-          fontFamily: FONT_FAMILY
-        },
-        primaryYAxis: {
-          titleStyle: {
-            fontFamily: FONT_FAMILY
-          },
-          labelStyle: {
-            fontFamily: FONT_FAMILY
-          }
-        }
-      };
-    }
-    this.values = [{
-      name: 'value',
-      caption: (this.yAxis ? this.yAxis.title : null) || this._translate.get('Value')
-    }];
-    this._indices &&
-      this._indices.forEach(i => {
-        this.conditionalFormatSettings.push({
-          conditions: 'LessThan',
-          value1: 0,
-          applyGrandTotals: true,
-          measure: i,
-          style: { color: getWarn() }
-        });
-        this.values.
-          push({
-            name: i,
-            caption: this._getIndexTitle(i)
-          });
-        this.formatSettings.
-          push({
-            name: i,
-            format: this.formatSettings[0].format,
-            currency: this.currencyCode,
-          });
-      });
-    this.execute();
-  }
-  private _getIndexTitle(name: string): string {
-    return this._cube.indices.find(i => i.name === name).title;
-  }
-  private _getAxisTitle(name: string) {
-    const axis = this._cube.axes.find(a => a.name === name);
-    return axis.title;
-  }
-  /**
-   * 
-   */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['filters'] && !changes['filters'].firstChange)
-      this.execute();
-    else
-      if (changes['height'] || changes['width'])
-        this.resize();
-  }
-  execute() {
-    this.loadingChange.emit(true);
-    const keys = Object.keys(this.filters);
-    // remove filtering from pivot axes
-    let xAxis2 = this._xAxis.slice(), series2 = this._series.slice();
-    if (keys.length) {
-      if (xAxis2.length > 1)
-        xAxis2 = xAxis2.filter(x => keys.indexOf(x) < 0);
-      if (series2.length > 1)
-        series2 = series2.filter(x => keys.indexOf(x) < 0);
-    }
-    if (!series2.length) series2 = this._series.slice(-1);
-    if (!xAxis2.length) xAxis2 = this._xAxis.slice(-1);
-    // columns
-    const columns = xAxis2.concat(series2);
-    // query
-    this._service.table(this._cube.name, columns, { filters: this.filters, indices: this.indices }).subscribe(r => {
-      this._presets(xAxis2, series2, r);
-      this._draw();
-      this.loadingChange.emit(false);
-    }, (e: HttpErrorResponse) => {
-      this._sb.error(errResource(e));
-      this.loadingChange.emit(false);
-    });
-  }
-
-  /**
-   * 
-   * @param xAxis
-   * @param series
-   * @param data
-   */
-  private _presets(xAxis: string[], series: string[], data: {}[]) {
-    this._data = data;
-    this.dataSource = {
-      columns: xAxis.map(x => {
-        return {
-          name: x,
-          caption: this._getAxisTitle(x)
-        } as FieldOptionsModel;
-      }),
-      rows: series.map(s => {
-        return {
-          name: s,
-          caption: this._getAxisTitle(s)
-        } as FieldOptionsModel;
-      }),
-      valueSortSettings: { headerDelimiter: PIVOT_HEADER_DELIMITER },
-      values: this.values,
-      sortSettings: xAxis.map(x => {
-        return {
-          name: '_' + x,
-        } as SortModel;
-      }),
-      //conditionalFormatSettings: this.conditionalFormatSettings,
-      alwaysShowValueHeader: false,
-      allowMemberFilter: false,
-      allowValueFilter: false,
-      allowLabelFilter: false,
-      dataSource: data,
-      emptyCellsTextContent: this.emptyCellsTextContent,
-      enableSorting: false,
-      formatSettings: this.formatSettings
-    } as DataSourceSettingsModel;
-  }
-
-  /**
-   * 
-   * @param evt
-   */
-  cellClick(evt: CellClickEventArgs) {
-    const { columnHeaders, rowHeaders, actualText, actualValue, axis, valueSort, isGrandSum } = evt.data as any;
-    if (actualValue === 0) return;
-    let axes, index;
-    if (columnHeaders || rowHeaders) 
-      axes = this._parseAxes(columnHeaders, rowHeaders);
-    else if (axis === 'row')
-      axes = this._parseAxes('', valueSort.levelName);
-    else if (axis === 'column')
-      axes = this._parseAxes(valueSort.levelName, '');
-    else if (isGrandSum) return;
-    if (actualText !== 'value') index = actualText;
-    this.explore.emit({ axes, index });
-  }
-  /**
-   * axes from headers
-   * @param columnHeaders
-   * @param rowHeaders
-   */
-  private _parseAxes(columnHeaders: string, rowHeaders: string): AxesMap {
-    const axes: AxesMap = {};
-    if (columnHeaders !== '')
-      columnHeaders.split(PIVOT_HEADER_DELIMITER).forEach((c, i) => {
-        const column = this.dataSource.columns[i].name,
-          // find any row with header
-          element = this._data.find(e => e[column].toString() === c);
-        // translate back to key
-        axes[column] = element[`_${column}`];
-      });
-    if (rowHeaders !== '')
-      rowHeaders.split(PIVOT_HEADER_DELIMITER).forEach((r, i) => {
-        const column = this.dataSource.rows[i].name,
-          element = this._data.find(e => e[column] === r);
-        axes[column] = element[`_${column}`];
-      });
-    return axes;
-  }
-  /**
-   * chart
-   * @param e
-   */
-  pointClick(e: IPointEventArgs) {
-    const { point: { x }, series: { name } } = e;
-    const axes: { [axis: string]: any } = {};
-    // set axes from x label(s)
-    (x as string).split(' - ').forEach((x, i) => {
-      const column = this.dataSource.rows[i].name,
-        element = this._data.find(e => e[column] === x);
-      axes[column] = element ? element[`_${column}`] : x;
-    });
-    // set axes from series label
-    if (name !== '') {
-      const column = this.dataSource.columns[0].name,
-        // find any row with header
-        element = this._data.find(e => e[column] === name);
-      // translate back to key
-      axes[column] = element ? element[`_${column}`] : name;
-    }
-    this.explore.emit({ axes });
-  }
-  async exportToExcel(title: string) {
-    if (this.currencyCode && this.currencyCode !== DEFAULT_CURRENCY)
-      await this._translate.cldr(this._session.language, CLDR_FILES);
-    if (this.chartType)
-      this._exportExcel(title);
-    else
-      this.pivot.excelExport({ fileName: `${title}.xlsx`, hierarchyExportMode: 'All', });
-  }
-  private _exportExcel(title: string) {
-    const numberFormat = this._service.numberFormat, columns = this._cube.axes.filter(a => this._xAxis.indexOf(a.name) > -1 ||
-      this._series.indexOf(a.name) > -1), rows = [{
-        index: 1,
-        cells: columns.map((c, i) => ({
-          index: i + 1, value: c.title,
-          style: {
-            bold: true
-          }
-        } as Cell))
-      }] as Row[];
-    rows[0].cells.push({
-      index: columns.length + 1,
-      value: this.yAxis ? this.yAxis.title :
-        this._translate.get('Value'),
-      style: {
-        bold: true
-      }
-    });
-    this._indices && this._indices.forEach((x, i) => rows[0].cells.push({
-      index: columns.length + i + 2,
-      value: this._getIndexTitle(x),
-      style: {
-        bold: true
-      }
-    }));
-    this._data.forEach((r, i) => {
-      const cells = columns.map((c, j) => {
-        return {
-          index: j + 1, value: r[c.name],
-          style: {}
-        } as Cell;
-      }
-      );
-      cells.push({
-        type: 'number',
-        index: columns.length + 1,
-        style: {
-          numberFormat,
-          hAlign: 'right'
-        },
-        value: r['value']
-      } as Cell);
-      this._indices && this._indices.forEach((x, i) => cells.push({
-        type: 'number',
-        index: columns.length + i + 2,
-        style: {
-          numberFormat,
-          hAlign: 'right'
-        },
-        value: r[x]
-      } as Cell)
-      );
-      rows.push(
-        {
-          index: i + 2,
-          cells
-        } as Row);
-    });
-    const book = new Workbook(
-      {
-        worksheets: [
-          {
-            enableRtl: this._session.inverse,
-            name: this._translate.get('SheetN', 1),
-            columns: [...columns.map((_, i) => ({ index: i + 1, width: 250 } as Column)),
-            { index: columns.length + 1 },
-            ...(this._indices ? this._indices.map((_, i) => ({
-              index: columns.length + i + 2
-            })) : [])
-            ],
-            rows
-          } as Worksheet
-        ],
-      },
-      'xlsx'
-    );
-    book.save(`${title}.xlsx`);
-  }
-
-  private _draw() {
-    this.pivot && this.pivot.destroy();
-    this.pivot = new PivotView({
-      spinnerTemplate: '',
-      chartSettings: this.chartSettings,
-      displayOption: this.displayOption,
-      dataSourceSettings: this.dataSource,
-      width: this.width,
-      height: '100%',
-      enableValueSorting: true,
-      showTooltip: false,
-      allowConditionalFormatting: true,
-      allowExcelExport: true,
-      gridSettings: this.gridSettings,
-      cellClick: this.cellClick.bind(this),
-      currencyCode: this.currencyCode,
-      dataBound: this.dataBound.bind(this)
-    }, this._elementRef.nativeElement);
-  }
-  dataBound(_) {
-    this.tooltip = new Tooltip({
-      target: '.e-icons',
-      cssClass: 'e-custom-tooltip',
-      position: 'BottomCenter',
-      offsetY: 15,
-      enableRtl: this.pivot.enableRtl,
-      locale: this.pivot.locale,
-    });
-    this.tooltip.appendTo(this._elementRef.nativeElement);
-  }
-  resize(): void {
-    if (this.pivot) {
-      //this.pivot.height = this.height;
-      this.pivot.width = this.width;
-      if (this.chartSettings)
-        this.pivot.chart && (this.pivot.chart as unknown as Chart).chartResize();
-      else
-        this.pivot.onWindowResize();
-    }
-  }
-  ngOnDestroy(): void {
-    this.tooltip && this.tooltip.destroy();
-    this.pivot && this.pivot.destroy();
-    this._destroy.next();
-    this._destroy.complete();
-  }
-}
-interface Cell { }