Layout - HeaderItemSpecifier

Layout.HeaderItemSpecifier

Define a UI Header container from one or more

Stream's within a LayoutBuilder.

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  const float = Stream("String", FloatType);
  const date = Stream("Date", DateTimeType);
  
  // create a table in a layout
  const layout = new LayoutBuilder("My Layout")
      .table("My Table", builder => builder
          .fromStream(stream)
          .columns()
      )
       .header(builder => builder
          .item("My Header", builder => builder
              .fromStream(string)
              .input({ name: "date", stream: date })
              .value({
                  value: (value, inputs) => AddDuration(inputs.date, value, 'hour'),
                  color: () => Const('blue'),
                  tooltip: (value, inputs) => StringJoin`The date is ${AddDuration(inputs.date, value, 'hour')}`,
              })
          )
      )
      .toTemplate()

Type parameters

Name	Type
T	extends EastType = EastType
Inputs	extends Record = Record

Layout

input

▸ input(config):

HeaderItemSpecifier<T, Inputs & { [K in string]: Variable }>

Add an additional named input

Stream to the Visual.

Type parameters

Name	Type
Name	extends string
I	extends EastType

Parameters

Name	Type	Description
config	Object	the input stream and the resulting variable name
config.name	Name extends "input" | keyof Inputs ? never : Name	The name of the input. *
config.stream	Stream	The Stream to input. *

Returns

HeaderItemSpecifier<T, Inputs & { [K in string]: Variable }>

a new

LayoutBuilder

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  const float = Stream("String", FloatType);
  const date = Stream("Date", DateTimeType);
  
  // create a table in a layout
  const layout = new LayoutBuilder("My Layout")
      .table("My Table", builder => builder
          .fromStream(stream)
          .columns()
      )
       .header(builder => builder
          .item("My Header", builder => builder
              .fromStream(string)
              .input({ name: "date", stream: date })
              .value({
                  value: (value, inputs) => AddDuration(inputs.date, value, 'hour'),
                  color: () => Const('blue'),
                  tooltip: (value, inputs) => StringJoin`The date is ${AddDuration(inputs.date, value, 'hour')}`,
              })
          )
      )
      .toTemplate()

---

kpi

▸ kpi(def):

HeaderItemFinalizer

Add KPI visual to a

HeaderBuilder within a LayoutBuilder.

Type parameters

Name	Type
V	extends PrimitiveType

Parameters

Name	Type	Description
def	Object	the definition of the kpi
def.comparison?	(stream: Variable, inputs: Inputs) => EastFunction<IntegerType | FloatType>	The EastFunction describing the comparison between the value and target (where < 0 == value < target, 0 == value == target, > 0 == value > target)
def.goal	"less" | "equal" | "greater"	Should the value be equal to (default), greater than or less than the target *
def.target	(stream: Variable, inputs: Inputs) => EastFunction	The input target value EastFunction *
def.tooltip?	(stream: Variable, inputs: Inputs) => EastFunction	The tooltip EastFunction value *
def.value	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction to display. *

Returns

HeaderItemFinalizer

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  const struct = Stream("Struct", StructType({
      value: FloatType,
      target: IntegerType
  }));
  
  // create a table in a layout
  const layout = new LayoutBuilder("My Layout")
      .table("My Table", builder => builder
          .fromStream(stream)
           .columns()
      )
       .header(builder => builder
          .item("My Header", builder => builder
              .fromStream(struct)
              .kpi({
                  goal: 'less',
                  value: (value) => GetField(value, 'value'),
                  target: (value) => GetField(value, 'target'),
              })
          )
      )
      .toTemplate()

---

progress

▸ progress(def):

HeaderItemFinalizer

Add progress indicator to a

HeaderBuilder within a LayoutBuilder.

Type parameters

Name	Type
V	extends IntegerType | FloatType

Parameters

Name	Type	Description
def	Object	the definition of the kpi
def.display?	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction for rendered progress value. *
def.max?	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction for the minimum possible value (default 100) *
def.min?	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction for the minimum possible value (default 0) *
def.tooltip?	(stream: Variable, inputs: Inputs) => EastFunction	The tooltip EastFunction value *
def.value	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction for the progress value. *

Returns

HeaderItemFinalizer

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  const struct = Stream("Struct", StructType({
      value: FloatType,
      target: IntegerType
  }));
  
  // create a table in a layout
  const layout = new LayoutBuilder("My Layout")
      .table("My Table", builder => builder
          .fromStream(stream)
           .columns()
      )
       .header(builder => builder
          .item("My Header", builder => builder
              .fromStream(struct)
              .progress({
                  value: (value) => GetField(value, 'value'),
                  min: () => Const(0),
                  max: (value) => GetField(value, 'target'),
                  display: (value) => StringJoin`${Multiply(Divide(GetField(value, 'value'), GetField(value, 'target')), 100)}%`,
              })
          )
      )
      .toTemplate()

---

value

▸ value(def):

HeaderItemFinalizer

Add value to a

HeaderBuilder within a LayoutBuilder.

Type parameters

Name	Type
V	extends PrimitiveType

Parameters

Name	Type	Description
def	Object	the definition of the value
def.color?	(stream: Variable, inputs: Inputs) => EastFunction	The text color EastFunction *
def.tooltip?	(stream: Variable, inputs: Inputs) => EastFunction	The tooltip EastFunction value *
def.value	(stream: Variable, inputs: Inputs) => EastFunction	The EastFunction to display. *

Returns

HeaderItemFinalizer

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
          })
      )
  );
  const float = Stream("String", FloatType);
  const date = Stream("Date", DateTimeType);
  
  // create a table in a layout
  const layout = new LayoutBuilder("My Layout")
      .table("My Table", builder => builder
          .fromStream(stream)
          .columns()
      )
       .header(builder => builder
          .item("My Header", builder => builder
              .fromStream(float)
              .input({ name: "date", stream: date })
              .value({
                  value: (value, inputs) => AddDuration(inputs.date, value, 'hour'),
                  color: () => Const('blue'),
                  tooltip: (value, inputs) => StringJoin`The date is ${AddDuration(inputs.date, value, 'hour')}`,
              })
          )
          .item("My Function Header", builder => builder
              .fromStream(float)
              .input({ name: "date", stream: date })
              .value((value, inputs) => AddDuration(inputs.date, value, 'hour'))
          )
      )
      .toTemplate()