Layout - VegaFieldEncodingBuilder

Layout.VegaFieldEncodingBuilder

Define a UI Chart based on a Vega-Lite specification from a

Remarks

See

Vega-Lite for more information about specifications.

Type parameters

Name	Type
`T`	extends `DictType` \| `ArrayType` = `DictType` \| `ArrayType`
`E`	extends `PrimitiveType` = `PrimitiveType`

Layout

value

▸ value(f): V extends

DateTimeType ? VegaDateTimeEncodingFinalizer : V extends IntegerType ? VegaIntegerEncodingFinalizer : V extends FloatType ? VegaFloatEncodingFinalizer : V extends StringType ? VegaStringEncodingFinalizer : never

Define a vega field encoding for a

VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
`F`	extends `TypeToFields`<`DictType`> \| `ArrayToFields`<`ArrayType`>
`V`	extends `PrimitiveType` = `E`

Parameters

Name	Type
`f`	(`fields`: `F`) => `EastFunction`

Returns

V extends

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
              float: FloatType,
          })
      )
  );
  
  // create a vega specification in a layout
  const layout = new LayoutBuilder("My Layout")
      .vega("My Vega-Lite Chart", builder => builder
         .view(
             builder => builder
                 .fromStream(stream)
                 .heatmap({
                     x: builder => builder
                         .value(fields => fields.date)
                         .title("X Title")
                         .sort('descending'),
                     y: builder => builder
                         .value(fields => fields.float)
                         .title("Y Title")
                         .sort('ascending'),
                     color: builder => builder
                         .value(fields => fields.string)
                         .title("Color Title")
                 })
         )
      ))
      .toTemplate()