Options
All
  • Public
  • Public/Protected
  • All
Menu

Class SurfaceGridSeries3D

Class for visualization of a 3D height map inside a Chart3D.

The grid is defined between two XZ locations, and an Array of Y values.

Supports colouring cells by a look up table (LUT) based on user set values as well as geometry Y coordinates.

SurfaceGridSeries3D are created with Chart3D.addSurfaceSeries.

Example usage:

const resolution = 20
const grid = chart3D.addSurfaceSeries( {
    type: SurfaceSeriesTypes3D.Grid,
    rows: resolution,
    columns: resolution,
    start: { x: 0, z: 0 },
    end: { x: 100, z: 100 },
    pixelate: true
} )
    .invalidateYOnly( ( row, column, prev ) => {
        return Math.sin( row * 2 * Math.PI / resolution )
    } )
    .setFillStyle( new PalettedFill( {
         // Refer to "palette" examples for LUT creation.
         lut,
         lookUpProperty: 'y'
     } ) )

Color shading style.

By default, SurfaceGridSeries3D uses Simple shading style.

This can be changed with SurfaceGridSeries3D.setColorShadingStyle(new ColorShadingStyles.Phong())

Index

Methods

addColumn

  • addColumn(columns: number, type: "color", colors: Matrix<Color>): this
  • addColumn(columns: number, type: "value", values: Matrix<number>): this
  • addColumn(columns: number, type: "y", values: Matrix<number>): this
  • Append new column of Color data to the end of the Grids X dimension. Example:

    // Shift previous (1 column, 10 rows) of Colors and push new ones
    heatmap.addColumn(1, 'color', [
     [
         ColorHSV(0),
         ColorHSV(30),
         ColorHSV(60),
         ColorHSV(90),
         ColorHSV(120),
         ColorHSV(150),
         ColorHSV(180),
         ColorHSV(210),
         ColorHSV(240),
         ColorHSV(270)
     ]
    ])
    

    Parameters

    Returns this

  • Append new column of Intensity data to the end of the Grids X dimension. Example:

    // Shift previous (1 column, 10 rows) of Intensity values and push new ones
    heatmap.addColumn(1, 'value', [
     [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0]
    ])
    

    Parameters

    • columns: number
    • type: "value"
    • values: Matrix<number>

    Returns this

  • Append new column of Y coordinate data to the end of the Grids X dimension. Example:

    // Shift previous (1 column, 10 rows) of Y coordinates and push new ones
    heatmap.addColumn(1, 'y', [
     [10, 20, 30, 40, 50, 40, 30, 20, 10, 0],
    ])
    

    Parameters

    • columns: number
    • type: "y"
    • values: Matrix<number>

    Returns this

addRow

  • addRow(rows: number, type: "color", colors: Matrix<Color>): this
  • addRow(rows: number, type: "value", values: Matrix<number>): this
  • addRow(rows: number, type: "y", values: Matrix<number>): this
  • Append new row of Color data to the end of the Grids Z dimension. Example:

    // Shift previous (1 row, 10 columns) of Colors and push new ones
    SurfaceGridSeries3D.addRow(1, 'color', [
     [
         ColorHSV(0),
         ColorHSV(30),
         ColorHSV(60),
         ColorHSV(90),
         ColorHSV(120),
         ColorHSV(150),
         ColorHSV(180),
         ColorHSV(210),
         ColorHSV(240),
         ColorHSV(270)
     ]
    ])
    

    Parameters

    Returns this

  • Append new row of Intensity data to the end of the Grids Z dimension. Example:

    // Shift previous (1 row, 10 columns) of Intensity values and push new ones
    SurfaceGridSeries3D.addRow(1, 'value', [
     [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0]
    ])
    

    Parameters

    • rows: number
    • type: "value"
    • values: Matrix<number>

    Returns this

  • Append new row of Y coordinate data to the end of the Grids Z dimension. Example:

    // Shift previous (1 row, 10 columns) of Y coordinates and push new ones
    SurfaceGridSeries3D.addRow(1, 'y', [
     [10, 20, 30, 40, 50, 40, 30, 20, 10, 0],
    ])
    

    Parameters

    • rows: number
    • type: "y"
    • values: Matrix<number>

    Returns this

attach

  • attach(entry: LegendBoxEntry, disposeOnClick?: undefined | false | true): this
  • Attach object to an legendBox entry

    Parameters

    • entry: LegendBoxEntry

      Object which has to be attached

    • disposeOnClick: undefined | false | true

      Flag that indicates whether the Attachable should be disposed/restored, when its respective Entry is clicked.

    Returns this

    Series itself for fluent interface

dispose

  • dispose(): this
  • Tell the owning chart to remove this component.

    Returns this

    Object itself.

getColorShadingStyle

getFillStyle

  • Get fill style of Intensity Heatmap Series.

    • SolidFill: apply single solid color.
    • IndividualPointFill: apply individual color per data-point.
      • lookUpProperty = 'value': Pick colors based on values set using addRow, addColumn or invalidateValuesOnly.
      • lookUpProperty = 'y': Pick colors based on geometry Y coordinates.
    • emptyFill: no color, empty rendering.

    Returns FillStyle

    FillStyle.

getHighlightOnHover

  • getHighlightOnHover(): boolean
  • Get boolean flag for whether object should highlight on mouse hover

    Returns boolean

    Boolean for if object should highlight on mouse hover or not.

getHighlighted

  • getHighlighted(): boolean
  • Returns boolean

    the state of highlighted flag

getIsUnderMouse

  • getIsUnderMouse(): boolean
  • Get boolean flag for whether object is currently under mouse or not

    Returns boolean

    Boolean for is object under mouse currently

getMouseInteractions

  • getMouseInteractions(): boolean
  • Get mouse interactions enabled or disabled. Disabled mouse-interactions will naturally prevent mouse-driven highlighting from ever happening.

    Returns boolean

    Mouse interactions state

getName

  • getName(): string
  • Get the name of the Component.

    Returns string

    The name of the Component.

getWireframeStyle

  • Get style of wireframe.

    Wireframe is a line grid that highlights the edges of each cell of the 3D surface.

    Returns FillStyle

    FillStyle.

getXMax

  • getXMax(): number | undefined
  • Returns number | undefined

    Max X value of the series

getXMin

  • getXMin(): number | undefined
  • Returns number | undefined

    Min X value of the series

getYMax

  • getYMax(): number | undefined
  • Returns number | undefined

    Max Y value of the series

getYMin

  • getYMin(): number | undefined
  • Returns number | undefined

    Min Y value of the series

getZMax

  • getZMax(): number | undefined
  • Returns number | undefined

    Max Z value of the series

getZMin

  • getZMin(): number | undefined
  • Returns number | undefined

    Min Z value of the series

invalidateColorsOnly

  • Treat the data of the matrix as ColorValue-based type of points. ColorValue-based data is represented in format { ...color: Color } for IndividualPointFill style.

    Invalidates only the color without update the geometry data, providing significantly faster rendering of dynamically changed colors.

    Parameters

    • colors: Matrix<Color>

      Matrix of new colors. The resolution of the IntensityShape should be valid.

    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

  • Treat the data of the matrix as ColorValue-based type of points. ColorValue-based date is represented in format { ...color: Color } for IndividualPointFill style.

    Invalidates only the color without update the geometry data, providing significantly faster rendering of dynamically changed colors.

    Example usage:

      // Fill each surface cell with a color for demonstration purposes.
      SurfaceSeries3D
          .invalidateColorsOnly( ( row, column ) => ColorHSV( row * column ) )
    

    Parameters

    • callback: UpdateColorCallback

      Callback function to map through the input to modify the matrix colors. The resolution of the IntensityShape should be valid.

    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

invalidateValuesOnly

  • Treat the data of the matrix as IntensityValue-based type of points. IntensityValue-based data is represented in format { ...intensity: number } for PalettedFill style.

    Invalidates only the intensity values without update the geometry data, providing significantly faster rendering of dynamically changed intensity.

    Parameters

    • values: Matrix<number>

      Matrix of new intensity values.

    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

  • Treat the data of the matrix as IntensityValue-based type of points. IntensityValue-based data is represented in format { ...intensity: number } for PalettedFill style.

    Invalidates only the intensity values without update the geometry data, providing significantly faster rendering of dynamically changed intensity.

    Example usage:

      // Fill each surface cell with a value for demonstration purposes.
      SurfaceSeries3D
          .invalidateValuesOnly( ( row, column ) => row + column )
    

    Parameters

    • callback: UpdateValueCallback

      Callback function to map through the input to modify the matrix of intensity values. The resolution of the IntensityShape should be valid.

    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

invalidateYOnly

  • Treat the data of the matrix as Y coordinates.

    Invalidates only the geometry coordinates without update the intensity or color data, providing significantly faster rendering of dynamically changed geometry.

    Parameters

    • matrix: Matrix<number>
    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

  • Treat the data of the matrix as Y coordinates.

    Invalidates only the geometry coordinates without update the intensity or color data, providing significantly faster rendering of dynamically changed geometry.

    Example usage:

    const resolution = 20
    SurfaceGridSeries3D
        .invalidateYOnly( ( row, column, prev ) => {
            return Math.sin( row * 2 * Math.PI / resolution )
        } )
    

    Parameters

    • callback: UpdateYCallback

      Callback function to map through the input to modify the geometry by Y coordinates. The resolution of the IntensityMesh should be valid.

    • range: GridRangeOptions

      Optional configuration object to specify the range of the grid to be invalidated.

    Returns this

    Series itself for fluent interface.

isDisposed

  • isDisposed(): boolean
  • Returns boolean

    TODO: True for enabled and false for disabled

offHighlight

  • offHighlight(token: Token): boolean
  • Unsubscribe from Highlight object event. This is called whenever an object is highlighted

    Parameters

    • token: Token

      Token that was received when subscribing to the event.

    Returns boolean

    True if the unsubscription was successful.

offMouseClick

  • offMouseClick(token: Token): boolean
  • Remove event listener from Mouse Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDoubleClick

  • offMouseDoubleClick(token: Token): boolean
  • Remove event listener from Mouse Double Click Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDown

  • offMouseDown(token: Token): boolean
  • Remove event listener from Mouse Down Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDrag

  • offMouseDrag(token: Token): boolean
  • Remove event listener from Mouse Drag Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStart

  • offMouseDragStart(token: Token): boolean
  • Remove event listener from Mouse Drag Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseDragStop

  • offMouseDragStop(token: Token): boolean
  • Remove event listener from Mouse Drag Stop Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseEnter

  • offMouseEnter(token: Token): boolean
  • Remove event listener from Mouse Enter Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseLeave

  • offMouseLeave(token: Token): boolean
  • Remove event listener from Mouse Leave Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseMove

  • offMouseMove(token: Token): boolean
  • Remove event listener from Mouse Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseUp

  • offMouseUp(token: Token): boolean
  • Remove event listener from Mouse Up Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offMouseWheel

  • offMouseWheel(token: Token): boolean
  • Remove event listener from Mouse Wheel Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchEnd

  • offTouchEnd(token: Token): boolean
  • Remove event listener from Touch End Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchMove

  • offTouchMove(token: Token): boolean
  • Remove event listener from Touch Move Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

offTouchStart

  • offTouchStart(token: Token): boolean
  • Remove event listener from Touch Start Event

    Parameters

    • token: Token

      Token of event listener which has to be removed

    Returns boolean

    True if the listener is successfully removed and false if it is not found

onHighlight

  • onHighlight(handler: function): Token
  • Subscribe to highlight object event. This is called whenever an object is highlighted.

    Parameters

    • handler: function

      Function that is called when event is triggered.

        • Parameters

          • isHighlighted: boolean

          Returns void

    Returns Token

    Token that can be used to unsubscribe from the event.

onMouseClick

  • Add event listener to Mouse Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDoubleClick

  • Add event listener to Mouse Double Click Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDown

  • Add event listener to Mouse Down Event

    Parameters

    Returns Token

    Token of the event listener

onMouseDrag

onMouseDragStart

onMouseDragStop

onMouseEnter

  • Add event listener to Enter Event

    Parameters

    Returns Token

    Token of the event listener

onMouseLeave

  • Add event listener to Mouse Leave Event

    Parameters

    Returns Token

    Token of the event listener

onMouseMove

  • Add event listener to Mouse Move Event

    Parameters

    Returns Token

    Token of the event listener

onMouseUp

  • Add event listener to Mouse Up Event

    Parameters

    Returns Token

    Token of the event listener

onMouseWheel

  • Subscribe to Mouse Wheel event

    Parameters

    Returns Token

    Token of subscription

onTouchEnd

  • Subscribe to Touch End event

    Parameters

    Returns Token

    Token of subscription

onTouchMove

  • Subscribe to Touch Move event

    Parameters

    Returns Token

    Token of subscription

onTouchStart

  • Subscribe to Touch Start event

    Parameters

    Returns Token

    Token of subscription

reset

  • Reset the existing intensity shape and apply new settings. The following method removes all the existing data. The shape would be reset to the default state:

    • Old Geometry transformations do not valid. The Intensity is a uniform grid.
    • Old IntensityValues and/or ColorValues do not valid and exist anymore.

    Parameters

    Returns this

    Series itself for fluent interface.

restore

  • restore(): this
  • Tell the owning chart to restore this component.

    Returns this

    Object itself.

setColorShadingStyle

  • Set Color Shading Style for series.

    Shading style changes the visual style of the rendering. See ColorShadingStyles for available shading styles.

    Use Simple color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Simple())
    

    Use Phong color shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong())
    

    Configuring specular highlight for Phong shading style:

    series3D.setShadingStyle(new ColorShadingStyles.Phong({
         specularReflection: 0.5,
         specularColor: ColorRGBA(255, 255, 255)
    }))
    

    Parameters

    Returns this

    Object itself for fluent interface.

setFillStyle

  • Set fill style of Intensity Heatmap Series.

    • SolidFill: apply single solid color.
    • IndividualPointFill: apply individual color per data-point.
    • PalettedFill: apply palette using LUT lookup table of colors.
      • lookUpProperty = 'value': Pick colors based on values set using addRow, addColumn or invalidateValuesOnly.
      • lookUpProperty = 'y': Pick colors based on geometry Y coordinates.
    • emptyFill: no color, empty rendering.

    Parameters

    Returns this

    Series itself for fluent interface.

setHighlightOnHover

  • setHighlightOnHover(state: boolean): this
  • Set highlight on mouse hover enabled or disabled.

    Mouse interactions have to be enabled on the component for this to function as expected. See setMouseInteractions for more information.

    Parameters

    • state: boolean

      True if highlighting on mouse hover, false if no highlight on mouse hover

    Returns this

    Object itself for fluent interface.

setHighlighted

  • setHighlighted(highLight: boolean): this
  • Enable or disable forced highlighting of component

    Parameters

    • highLight: boolean

      True for enabled and false for disabled

    Returns this

    component itself for fluent interface

setMouseInteractions

  • setMouseInteractions(state: boolean): this
  • Set component mouse interactions enabled or disabled.

    Disabling mouse interactions means that the objects below this component can be interacted through it.

    Possible side-effects from disabling mouse interactions:

    • Mouse events are not triggered. For example, onMouseMove.
    • Mouse driven highlighting will not work.

    Parameters

    • state: boolean

      Specifies state of mouse interactions

    Returns this

    Object itself for fluent interface

setName

  • setName(name: string): this
  • Sets the name of the Component updating attached LegendBox entries

    Parameters

    • name: string

      Name of the Component

    Returns this

    Object itself

setWireframeStyle

  • Set style of wireframe.

    Wireframe is a line grid that highlights the edges of each cell of the 3D surface.

    By default, the wireframe is hidden. It can be displayed like so:

     surfaceSeries.setWireframeStyle( new SolidFill({ color: ColorRGBA( 0, 0, 0, 100 ) }) )
    

    Parameters

    Returns this

    Series itself for fluent interface.