/*
 * LightningChartJS example that showcases simple usage of SurfaceGrid3D.
 */
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SurfaceSeriesTypes3D,
    ColorHSV,
    ColorRGBA,
    IndividualPointFill,
    PalettedFill,
    SolidFill,
    LUT,
    UIOrigins,
    UIBackgrounds,
    UIElementBuilders,
    UILayoutBuilders,
    emptyFill,
    Themes
} = lcjs


const chart3D = lightningChart().Chart3D( {
    // theme: Themes.darkGold
} )
    .setTitle( 'Simple 3D Surface Grid' )

chart3D.getDefaultAxisY()
    .setScrollStrategy( undefined )
    .setInterval( 0, 200 )

// Create color Look-Up-Table for dynamic colouring.
const palette = new LUT( {
    steps: [
        { value: 0, color: ColorRGBA( 0, 0, 0 ) },
        { value: 66, color: ColorRGBA( 255, 0, 0 ) },
        { value: 133, color: ColorRGBA( 0, 255, 0 ) },
        { value: 200, color: ColorRGBA( 0, 0, 255 ) }
    ],
    interpolate: true
} )

const rows = 25
const columns = rows
const surface = chart3D.addSurfaceSeries( {
    type: SurfaceSeriesTypes3D.Grid,
    rows,
    columns,
    start: { x: 0, z: 0 },
    end: { x: 1000, z: 1000 },
    pixelate: true
} )
    // Set Wireframe style.
    .setWireframeStyle( new SolidFill( { color: ColorRGBA( 0, 0, 0, 50 ) } ) )



// Assign a Value to each coordinate of the Grid to be used when colouring by look up value.
surface.invalidateValuesOnly( ( row, column ) =>  row * ( 200 / rows ) )



// Assign a Color to each coordinate of the Grid to be used when colouring by individual color.
// Leave some blanks to showcase fall back color.
surface.invalidateColorsOnly( ( row, column ) => Math.random() >= 0.50 ? ColorHSV( Math.random() * 360 ) : undefined )



// Animate data point heights by a function of time, row and column: y = f( row, column, t )
const y = ( row, column ) => 100 + 4* Math.sin( Date.now() / 500 + (row / rows) * 5 ) * ( Math.cos( (column/columns) * 2.5 ) * 20 )
const update = () => {
    // By passing a function to a invalidation method, the function is called back for each coordinate in the Surface Grid.
    // With the invalidateYOnly variant, the Number returned by the function will be assigned to that data points Y coordinate.
    surface.invalidateYOnly( y )

    requestAnimationFrame( update )
}
update()



// Animate Camera movement from file.
;(async () => {
    const cameraAnimationData = await (
        fetch( document.head.baseURI + 'examples/assets/lcjs_example_0905_3dSimpleSurfaceGrid-camera.json' )
            .then( r => r.json() )
    )
    if ( ! cameraAnimationData ) {
        console.log(`No Camera animation data.`)
        return
    }
    console.log(`Loaded Camera animation data.`)
    let frame = 0
    const nextFrame = () => {
        if ( cameraAnimationEnabledCheckbox.getOn() ) {
            const { cameraLocation } = cameraAnimationData.frames[Math.floor(frame) % cameraAnimationData.frames.length]
            chart3D.setCameraLocation( cameraLocation )
            frame += 1.5
        }
        requestAnimationFrame( nextFrame )
    }
    requestAnimationFrame( nextFrame )
})()



// * UI controls *
const group = chart3D.addUIElement( UILayoutBuilders.Column
    .setBackground( UIBackgrounds.Rectangle )
)
group
    .setPosition( { x: 0, y: 100 } )
    .setOrigin( UIOrigins.LeftTop )
    .setMargin( 10 )
    .setPadding( 4 )
    // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
    .setAutoDispose({
        type: 'max-height',
        maxHeight: 0.30,
    })


// Add UI controls for changing surface style.
const options = []
const addOption = ( label, onEnabled, defaultSelection = false ) => {
    const checkBox = group.addElement( UIElementBuilders.CheckBox )
        .setText( label )

    if ( defaultSelection ) {
        checkBox.setOn( true )
        onEnabled()
    }

    checkBox.onSwitch( ( _, state ) => {
        if ( state ) {
            onEnabled()
            checkBox.setMouseInteractions( false )
            // Set all other check boxes off.
            options.forEach( option => option.checkBox !== checkBox && option.checkBox.setOn( false ).setMouseInteractions( true ) )
        }
    } )

    options.push( { checkBox } )
}

addOption( 'Color look up by Y', () =>
    // Look up data point color from LUT by Y coordinate
    surface.setFillStyle( new PalettedFill( { lut: palette, lookUpProperty: 'y' } ) )
    , true
)
addOption( 'Color look up by Value', () =>
    // Look up data point color from LUT by number Value associated with it (assigned by user)
    surface.setFillStyle( new PalettedFill( { lut: palette, lookUpProperty: 'value' } ) )
)
addOption( 'Individual Color', () =>
    // Color data points by Colors assigned to each data point.
    surface.setFillStyle( new IndividualPointFill()
        // Specify Color to be used for data points that haven't been assigned a Color.
        .setFallbackColor( ColorRGBA( 100, 0, 0 ) )
    )
)
addOption( 'Solid color', () =>
    // Single solid color.
    surface.setFillStyle( new SolidFill( { color: ColorHSV( Math.random() * 360 ) } ) )
)


// Add UI control for toggling wireframe.
const handleWireframeToggled = ( state ) => {
    // Set Wireframe style.
    surface.setWireframeStyle( state ?
        new SolidFill( { color: ColorRGBA( 0, 0, 0, 50 ) } ) :
        emptyFill
    )
    wireframeCheckbox.setText( state ? 'Hide wireframe' : 'Show wireframe' )
} 
const wireframeCheckbox = group.addElement( UIElementBuilders.CheckBox )
wireframeCheckbox.onSwitch((_, state) => handleWireframeToggled( state ))
wireframeCheckbox.setOn( true )


// Add UI control for toggling camera animation.
const handleCameraAnimationToggled = ( state ) => {
    cameraAnimationEnabledCheckbox.setText( state ? 'Disable camera animation' : 'Enable camera animation' )
    if ( cameraAnimationEnabledCheckbox.getOn() !== state ) {
        cameraAnimationEnabledCheckbox.setOn( state )
    }
}
const cameraAnimationEnabledCheckbox = group.addElement( UIElementBuilders.CheckBox )
cameraAnimationEnabledCheckbox.onSwitch((_, state) => handleCameraAnimationToggled( state ))
handleCameraAnimationToggled( true )
chart3D.onBackgroundMouseDrag(() => {
    handleCameraAnimationToggled( false )
})

// Add LegendBox to chart.
const legend = chart3D.addLegendBox()
    // Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
    .setAutoDispose({
        type: 'max-width',
        maxWidth: 0.30,
    })
    .add(chart3D)

JavaScript 3D Simple Surface Grid - Editor

3d surface palette

This example shows an animated 3D grid surface with various different dynamic styles selectable from the User Interface.

The Chart is rendered using SurfaceGridSeries3D, a series type that renders a grid of XZ coordinates with varying Y and Color values.

SurfaceGridSeries3D data format

SurfaceGridSeries3D stores 3 kinds of user modifiable data.
Each type of data has its own invalidation method. All these methods can be called either with:

callback function.
- Called back for each XZ coordinate of the grid.
- Function then returns the value to be associated with the XZ coordinate.
data matrix.
- Multidimensional array of data values.

It is also possible to not invalidate the whole grid, but only a section of it. This is done by appending a second parameter, which specifies the range of modification (GridRangeOptions).

// Invalidate first row of Colors by callback.
SurfaceGridSeries3D.invalidateColorsOnly(
    ( row, column, prev ) => new ColorHSV( column * 10 ),
    {
        row: { start: 0, end: 1 },
        column: { start: 0, end: numberOfColumns }
    }
)

Height map

Each XZ coordinate on the grid is associated with a Y coordinate (Number).

Y coordinates are invalidated with SurfaceGridSeries3D.invalidateYOnly

// Invalidate full grids Y coordinates by callback.
SurfaceGridSeries3D.invalidateYOnly(
    ( row, column ) => Math.sin( row / 10 ) * Math.cos( column / 5 )
)

Look-Up-Value map

Each XZ coordinate on the grid can be associated with a numeric look-up value (Number).

This can be used to dynamically color each grid coordinate based on an attached Color look-up table (LUT).
Note that coloring by the look-up values needs to be enabled by setting the Series' FillStyle as PalettedFill.

Look-Up-Values are invalidated with SurfaceGridSeries3D.invalidateValuesOnly

// Define Color Look-Up-Table.
const lut = new LUT( {
    steps: [
        { value: 0, color: ColorRGBA( 0, 0, 0 ) },
        { value: 50, color: ColorRGBA( 255, 0, 0 ) }
    ],
    interpolate: true
} )

// Invalidate a 5x5 grids Look-Up-Values by data matrix.
SurfaceGridSeries3D.invalidateValuesOnly(
    [
        // First row.
        [0,0,0,0,0],
        // Second row.
        [10,10,10,10,10],
        // and so forth...
        [20,20,20,20,20],
        [30,30,30,30,30],
        [40,40,40,40,40],
    ]
)

// Configure Series fill style as look up from table.
SurfaceGridSeries3D.setFillStyle( new PalettedFill({ lut }) )

Color map

Each XZ coordinate on the grid can be associated with a Color.

This can be used to color each grid coordinate with its own Color.
Note that coloring by the individual Colors needs to be enabled by setting the Series' FillStyle as IndividualPointFill.

Color values are invalidated with SurfaceGridSeries3D.invalidateColorsOnly

// Invalidate first row of Colors by callback.
SurfaceGridSeries3D.invalidateColorsOnly(
    ( row, column, prev ) => new ColorHSV( column * 10 ),
    {
        row: { start: 0, end: 1 },
        column: { start: 0, end: numberOfColumns }
    }
)

// Configure Series fill style as individual colors.
SurfaceGridSeries3D.setFillStyle( new IndividualPointFill() )