Layout - VegaViewSpecifier

Layout.VegaViewSpecifier

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

Stream within a LayoutBuilder.

Remarks

See

Vega-Lite for more information about specifications.

Type parameters

Name	Type
T	extends DictType | ArrayType = DictType | ArrayType

Layout

area

▸ area(def):

VegaCartesianViewFinalizer

Define a

Area chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value
def.y2?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the second y value https://vega.github.io/vega-lite/docs/encoding.html#position

Returns

VegaCartesianViewFinalizer

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)
                 .area({
                     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()

---

bar

▸ bar(def):

VegaCartesianViewFinalizer

Define a

Bar chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType
Y	extends IntegerType | FloatType | StringType | DateTimeType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<BarMark, "kind" | "orient">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .bar({
                     x: builder => builder
                         .value(fields => fields.float)
                         .title("X Title")
                         .aggregate('sum')
                         .sort('descending'),
                     y: builder => builder
                         .value(fields => fields.string)
                         .title("Y Title")
                         .sort('ascending'),
                 })
         )
      ))
      .toTemplate()

---

boxPlot

▸ boxPlot(def):

VegaCartesianViewFinalizer

Define a

Boxplot chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<{ extent?: number | "min-max" ; kind: "boxplot" } & { fill?: string ; fill_opacity?: number ; invalid?: null | "filter" ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }, "kind">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .boxPlot({
                     x: builder => builder
                         .value(fields => fields.string)
                         .title("X Title")
                         .sort('ascending'),
                     y: builder => builder
                         .value(fields => fields.float)
                         .title("Y Title")
                         .sort('descending'),
                 })
         )
      ))
      .toTemplate()

---

column

▸ column(def):

VegaCartesianViewFinalizer

Define a

Column chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<BarMark, "kind" | "orient">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .column({
                     x: builder => builder
                         .value(fields => fields.string)
                         .title("X Title")
                         .sort('ascending'),
                     y: builder => builder
                         .value(fields => fields.float)
                         .title("Y Title")
                         .aggregate('sum')
                         .sort('descending'),
                 })
         )
      ))
      .toTemplate()

---

errorBand

▸ errorBand(def):

VegaCartesianViewFinalizer

Define a

Boxplot chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<{ extent?: "stdev" | "stderr" | "ci" | "iqr" ; kind: "errorband" } & { fill?: string ; fill_opacity?: number ; invalid?: null | "filter" ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number }, "kind">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .errorBand({
                     x: builder => builder
                         .value(fields => fields.string)
                         .title("X Title")
                         .sort('ascending'),
                     y: builder => builder
                         .value(fields => fields.float)
                         .title("Y Title")
                         .sort('descending'),
                 })
         )
      ))
      .toTemplate()

---

errorBar

▸ errorBar(def):

VegaCartesianViewFinalizer

Define a

Boxplot chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<{ extent?: "stdev" | "stderr" | "ci" | "iqr" ; kind: "errorbar" } & { fill?: string ; fill_opacity?: number ; invalid?: null | "filter" ; opacity?: number ; stroke?: string ; stroke_dash?: [stroke: number, space: number] ; stroke_opacity?: number ; stroke_width?: number ; thickness?: number }, "kind">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .errorBar({
                     x: builder => builder
                         .value(fields => fields.string)
                         .title("X Title")
                         .sort('ascending'),
                     y: builder => builder
                         .value(fields => fields.float)
                         .title("Y Title")
                         .sort('descending'),
                 })
         )
      ))
      .toTemplate()

---

heatmap

▸ heatmap(def):

VegaCartesianViewFinalizer

Define a

Heatmap chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType | StringType | DateTimeType
Color	extends IntegerType | FloatType | StringType | DateTimeType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

Remarks

See

Vega-Lite for more information about specifications.

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.string)
                         .title("Y Title")
                         .sort('ascending'),
                     color: builder => builder
                         .value(fields => fields.float)
                         .title("Color Title")
                 })
         )
      ))
      .toTemplate()

---

line

▸ line(def):

VegaCartesianViewFinalizer

Define a

Line chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType
Color	extends StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .line({
                     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()

---

pie

▸ pie(def):

VegaRadialViewFinalizer

Define a

Pie chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.angle	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the angle value
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<ArcMark, "kind" | "orient">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width

Returns

VegaRadialViewFinalizer

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)
                 .pie({
                     angle: builder => builder
                         .value(fields => fields.float)
                         .title("Angle Title")
                         .aggregate('sum')
                         .sort('descending'),
                     color: builder => builder
                         .value(fields => fields.string)
                         .title("Color Title")
                         .sort('ascending'),
                 })
         )
      ))
      .toTemplate()

---

range

▸ range(def):

VegaCartesianViewFinalizer

Define a

Ranged Bar chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType
Y	extends IntegerType | FloatType | StringType | DateTimeType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit<BarMark, "kind" | "orient">	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.x2	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the second x value https://vega.github.io/vega-lite/docs/encoding.html#position
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .range({
                     x: builder => builder
                         .value(fields => fields.float)
                         .title("X Title")
                         .aggregate('max')
                         .sort('descending'),
                     x: builder => builder
                         .value(fields => Add(fields.float, 1))
                         .title("X Title")
                         .aggregate('max')
                         .sort('descending'),
                     y: builder => builder
                         .value(fields => fields.string)
                         .title("Y Title")
                         .sort('ascending'),
                 })
         )
      ))
      .toTemplate()

---

scatter

▸ scatter(def):

VegaCartesianViewFinalizer

Define a

Scatter chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType | StringType | DateTimeType
Y	extends IntegerType | FloatType | StringType | DateTimeType
Color	extends IntegerType | FloatType | StringType | DateTimeType
Shape	extends IntegerType | FloatType | StringType | DateTimeType
Size	extends IntegerType | FloatType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.shape?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the size value https://vega.github.io/vega-lite/docs/encoding.html#mark-prop
def.size?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the size value https://vega.github.io/vega-lite/docs/encoding.html#mark-prop
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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()

---

spec

▸ spec(def): T extends

DictType ? VegaSpecViewFinalizer<TypeToFields, T> : T extends ArrayType ? VegaSpecViewFinalizer<ArrayToFields, T> : never

Define a unit Vega-Lite specification for a

VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
F	extends ArrayToFieldNames<ArrayType> | TypeToFieldNames<DictType>

Parameters

Name	Type	Description
def	(fields: F) => Omit	a function returning the Vega-Lite specification from the Stream fields names.

Returns

T extends

DictType ? VegaSpecViewFinalizer<TypeToFields, T> : T extends ArrayType ? VegaSpecViewFinalizer<ArrayToFields, T> : never

Remarks

The data is automatically defined from the stream contents, so is to be excluded from the definition.

Example

  // use a DictType stream
  const stream = Stream(
      "My Stream",
      DictType(
          StringType,
          StructType({
              string: StringType,
              date: DateTimeType,
              float: FloatType,
          })
      )
  );
  

  // create a layered vega specification in a layout
  const layout = new LayoutBuilder("My Other Layout")
      .vega("My Chart", builder => builder
          builder.fromStream(stream)
              .unitSpec((fields) => ({
                  $schema: "https://vega.github.io/schema/vega-lite/v5.json",
                  title: "",
                  mark: "point",
                  encoding: {
                      x: { field: fields.date, type: 'temporal', title: `Date Range` },
                      y: { field: fields.integer, type: 'quantitative' },
                      color: {
                          field: fields.float,
                          type: 'quantitative',
                      },
                      tooltip: [
                          { field: fields.date, aggregate: 'min', type: 'temporal' },
                          { field: fields.integer, aggregate: 'max', type: 'quantitative' },
                          { field: fields.float, type: 'quantitative' },
                      ]
                  }
              })))
      .toTemplate()

---

strip

▸ strip(def):

VegaCartesianViewFinalizer

Define a

Strip chart for a VegaBuilder within a LayoutBuilder.

Type parameters

Name	Type
X	extends IntegerType | FloatType
Y	extends IntegerType | FloatType | StringType | DateTimeType
Color	extends IntegerType | FloatType | StringType
Opacity	extends IntegerType | FloatType | StringType | DateTimeType
FillOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeOpacity	extends IntegerType | FloatType | StringType | DateTimeType
StrokeWidth	extends IntegerType | FloatType | StringType | DateTimeType
StrokeDash	extends IntegerType | FloatType | StringType | DateTimeType
Detail	extends IntegerType | FloatType | StringType | DateTimeType

Parameters

Name	Type	Description
def	Object	the Vega-Lite specification define from the Stream fields names.
def.color?	(builder: VegaColorEncodingSpecifier) => VegaColorEncodingFinalizer	the definition and EastFunction for the color value
def.detail?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the detail
def.fill_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill opacity
def.mark?	Omit	the definition of the chart mark
def.opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the fill and stroke opacity
def.stroke_dash?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke dash
def.stroke_opacity?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke opacity
def.stroke_width?	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the stroke width
def.x	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the x value
def.y	(builder: VegaFieldEncodingBuilder) => VegaFieldEncodingFinalizer	the definition and EastFunction for the y value

Returns

VegaCartesianViewFinalizer

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)
                 .strip({
                     x: builder => builder
                         .value(fields => fields.float)
                         .title("X Title")
                         .aggregate('sum')
                         .sort('descending'),
                     y: builder => builder
                         .value(fields => fields.string)
                         .title("Y Title")
                         .sort('ascending'),
                 })
         )
      ))
      .toTemplate()