Table

Quick Start

Creates a table that can be used in layouts and other container components. The graphomate table is highly customizable due to its large amount of properties and aggregations.

jQuery.sap.require("graphomate/ui/DatatypeDictionary");
jQuery.sap.require("graphomate/ui/tables/Table");
jQuery.sap.require("graphomate/ui/tables/enums/RowOrder");
jQuery.sap.require("graphomate/ui/enums/DeviationType");

var dtd = new graphomate.ui.DatatypeDictionary();

var table = new graphomate.ui.tables.Table({
  width: "500px",
  rowOrder: graphomate.ui.tables.enums.RowOrder.PostOrder,
  showSumBorders: true,
  sumPadding: 1.5,
  rows: [
    new graphomate.ui.tables.Row({
      title: "Monitors",
      hierarchyLevel: 0,
      dataPerColumn: [74800000, 65400000]
    }),
    new graphomate.ui.tables.Row({
      title: "North",
      hierarchyLevel: 1,
      dataPerColumn: [15400000, 15000000]
    }),
    new graphomate.ui.tables.Row({
      title: "South",
      hierarchyLevel: 1,
      dataPerColumn: [59400000, 50400000]
    }),
    new graphomate.ui.tables.Row({
      title: "Tablets",
      hierarchyLevel: 0,
      dataPerColumn: [117900000, 108400000]
    }),
    new graphomate.ui.tables.Row({
      title: "North",
      hierarchyLevel: 1,
      dataPerColumn: [70100000, 53900000]
    }),
    new graphomate.ui.tables.Row({
      title: "South",
      hierarchyLevel: 1,
      dataPerColumn: [47800000, 54500000]
    })
  ],
  columns: [
    new graphomate.ui.tables.DataColumn("column-act",{
      title: "ACT",
      datatype: "AC"
    }),
    new graphomate.ui.tables.DataColumn("column-bud",{
      title: "BUD",
      datatype: "BU"
    }),
    new graphomate.ui.tables.DeviationColumn({
      type: graphomate.ui.enums.DeviationType.Absolute,
      title: "\u0394ACT-BUD",
      measureColumnId: "column-act",
      baseColumnId: "column-bud"
    })
  ]
});

Constructor Details

new graphomate.ui.tables.Table(id?:string, settings?:object)

Accepts an id and a settings object or one or none of them. The settings object defines initial property values as well as aggregated and associated objects. Every setting can also be set using the related setter method. The supported settings are:

Properties:

Display

• width : sap.ui.core.CSSSize (default: "800px")
• height : sap.ui.core.CSSSize (default: "300px")
• rowOrder : graphomate.ui.tables.enums.RowOrder (default: PreOrder)
• showDatatypesInCells : boolean (default: false)
• showDatatypesInHeader : boolean (default: true)
• fixedHeader : boolean (default: false)
• showFilterHelper : boolean (default: false)

Scaling

• comparisonGroup : string (default: null)
• manualScaleMax : graphomate.ui.types.PositiveFloat (default: 150)
• manualScaleMin : graphomate.ui.types.NegativeFloat (default: -150)
• manualScalePercentMax : graphomate.ui.types.PositiveFloat (default: 20)
• manualScalePercentMin : graphomate.ui.types.NegativeFloat (default: -20)
• scaleMode : graphomate.ui.enums.ScaleMode (default: Auto)

Deviations

• semanticAxis : boolean (default: false)
• axisWidth : graphomate.ui.types.UnsignedInteger (default: 2)
• deviationGoodColor : graphomate.ui.types.HexColor (default: "#8cb400")
• deviationBadColor : graphomate.ui.types.HexColor (default: "#ff0000")
• negativeDeviationIsGood : boolean (default: false)
• showDeviationLabels : boolean (default: true)
• textualDeviation : boolean (default: false)
• outlierMode : graphomate.ui.enums.OutlierMode (default: Short)
• pinColor : graphomate.ui.types.HexColor (default: "#000000")
• applyPinColor : boolean (default: false)
• pinHeadColor : graphomate.ui.types.HexColor (default: "#000000")
• applyPinHeadColor : boolean (default: false)
• deviationLabelSizeFactor : graphomate.ui.types.PositiveFloat (default: 0.7)
• noClip : boolean (default: false)

Dividers

• showDividers : boolean (default: true)
• dividerColor : graphomate.ui.types.HexColor (default: "#cccccc")
• dividerThickness : graphomate.ui.types.PositiveFloat (default: 0.1)
• showSumBorders : boolean (default: false)
• sumBorderColor : graphomate.ui.types.HexColor (default: "#000000")
• sumBorderThickness : graphomate.ui.types.PositiveFloat (default: 0.1)
• sumPadding : graphomate.ui.types.PositiveFloat (default: 0)

Labels

• fontSize : graphomate.ui.types.UnsignedInteger (default: 14)
• fontFamily : string (default: "Arial")
• fontColor : graphomate.ui.types.HexColor (default: "#000000")
• rowTitleAlignmentRight : boolean (default: false)
• dataCellAlignmentRight : boolean (default: true)
• basicNumberFormat : string (default: "0.0a")
• basicNumberFormatPercent : string (default: "0.0%")
• locale : graphomate.ui.enums.Locale (default: EN)
• labelFormatMode : graphomate.ui.enums.LabelFormatMode (default: Basic)
• showColumnTitles : boolean (default: true)
• showRowTitles : boolean (default: true)
• noWrap : boolean (default: false)
• zeroValueReplacement : string (default: "")
• infinityValueReplacement : string (default: "")

Hierarchy

• hierarchyIndent : graphomate.ui.types.PositiveFloat (default: 1.2)
• showHierarchy : boolean (default: true)
• collapsibleHierarchy : boolean (default: true)
• nodeStyleBold : boolean (default: true)
• nodeStyleItalic : boolean (default: false)
• nodeStyleColor : graphomate.ui.types.HexColor (default: "#000000")
• hierarchyExpansionLevel : graphomate.ui.types.UnsignedInteger (default: 3)
• expandOnRowTitleClick : boolean (default: false)

Exceptions

• exceptionPosition : graphomate.ui.tables.enums.ExceptionPosition (default: Leading)

Aggregations:

• rows : graphomate.ui.tables.Row[] (default: [])
• columns : graphomate.ui.tables.DataColumn[] || graphomate.ui.tables.DeviationColumn[] (default: [])
• extendedNumberFormat : graphomate.ui.ExtendedNumberFormat (default: null)
• extendedNumberFormatPercent : graphomate.ui.ExtendedNumberFormat (default: null)
• rowFormatConfigurations : graphomate.ui.tables.RowFormatConfiguration[] (default: null)

Events:

• elementClick : fnListenerFunction(oEvent)

Property Details

Each property "sampleProperty" can be set using the related setter "setSampleProperty". Each setter expects a valid value for the related property as input parameter and throws an exception for invalid values. It returns the "this context" for method chaining. Each property "sampleProperty" can also be gotten using the related getter method "getSampleProperty". It expects no input parameters and returns the current value of the related property. Each property that represents or partially contains indices excepts a 0 based index.

• setSampleProperty(value) - Sets the property to the passed value if valid and returns this for method chaining.
• getSampleProperty() - Returns the current value of the property.

Aggregation Details

We decided to use aggregation over association for all managed items of the graphomate table because they can be bound to a model and associations can't. The disadvantage of using an aggregation is that a managed item can only be part of one aggregation. So the instance of an extendedNumberFormat for example can be part of an aggregation of table 1 but can't be part of an aggregation of table 2 while it is still part of table 1.

Items of an aggregation named "sampleThings" that has a cardinality of 0...n (and a multiplicity of 1:n) can be accessed by using one of the following methods:

• indexOfSampeThing(object) - Searches for the provided object in the aggregation and returns its 0-based index if found, or -1 otherwise.
• getSampleThings() - Returns an array with the objects contained in the aggregation or an empty array.
• addSampleThing(object) - Adds the provided object as last element in the aggregation. Returns this for method chaining.
• insertSampleThing(object, index) - Inserts the provided object into the aggregation at position i. Returns this for method chaining.
• removeSampleThing(object) - Removes the provided object from the aggregation. Returns the removed object.
• removeAllSampleThings() - Removes all objects from the aggregation. Returns an array of all removed objects.
• destroySampleThings() - Destroys all currently aggregated objects and clears the aggregation. Returns this for method chaining.

The Item of an aggregation named "sampleThing" that has a cardinality of 0...1 (and a multiplicity of 1:1) can be accessed by using one of the following methods:

• getSampleThing() - Returns the current aggregated object or null.
• setSampleThing(object) - Sets the provided object as the new aggregated object. Returns this for method chaining.
• destroySampleThing() - Destroys the current aggregated object and clears the aggregation. Returns this for method chaining.