/*
 * LightningChartJS example for several AxisXY
 */

// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Import Random Generator 
const { createProgressiveRandomGenerator } = require('@arction/xydata')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    SolidLine,
    ColorRGBA,
    Themes,
} = lcjs

const ls = lightningChart()

const chart = ls.ChartXY({
    // theme: Themes.darkGold
})
    .setTitle('Several Axis')

// Cache colors used in the example
const blueFill = new SolidFill( { color: ColorRGBA(0, 0, 255) } )
const greenFill = new SolidFill( { color: ColorRGBA(0, 255, 0) } )
const redFill = new SolidFill( { color: ColorRGBA( 255, 0, 0 ) } )

// Cache StrokeStyles used in the example
const blueLine = new SolidLine( { fillStyle: blueFill } )
const greenLine = new SolidLine( { fillStyle: greenFill } )
const redLine = new SolidLine( {fillStyle: redFill } )

// First Axes (default)
const axisX1 = chart.getDefaultAxisX()
    // Set title of Axis
    .setTitle('Axis X1')
    // Set interval of X axis 
    .setInterval(-10, 1300, false, true)
    .setStrokeStyle( blueLine )

const axisY1 = chart.getDefaultAxisY()
    // Set title of Axis
    .setTitle('Axis Y1')
    // Set interval of Y axis 
    .setInterval(-150, 100, false, true)
    .setStrokeStyle( blueLine )

// Second Axes  (extra)
const axisX2 = chart.addAxisX({
    opposite: true
})
    .setTitle('Axis X2')
    .setInterval(-60, 500, false, true)
    .setStrokeStyle( greenLine )

const axisY2 = chart.addAxisY({
    opposite: true
})
    .setTitle('Axis Y2')
    .setInterval(-20, 200, false, true)
    .setStrokeStyle( greenLine )

// Create series with explicit axes.
// Axes 1
const splineSeries1 = chart.addSplineSeries({
    xAxis: axisX1,
    yAxis: axisY1
})
    .setStrokeStyle( redLine )
    .setPointFillStyle( blueFill )
    .setName('Axis 1')

// Axes 2
const splineSeries2 = chart.addSplineSeries({
    xAxis: axisX2,
    yAxis: axisY2
})
    .setStrokeStyle( greenLine )
    .setName('Axis 2')

// Function to add random values to given series with createProgressiveRandomGenerator
const setSeries = (amountOfDots, splineSeries) => {
    createProgressiveRandomGenerator()
        .setNumberOfPoints(amountOfDots)
        .generate()
        // Set stream to output X points at a time
        .setStreamBatchSize(amountOfDots)
        // Create a new stream with previously defined stream settings
        .toStream()
        .forEach((point, i) => {
            point.x = point.x * 5, // define X coordinates for point  
                point.y = (20 * Math.sin(i / (10 * Math.PI)) + (Math.floor(Math.random() * 20))) // define Y coordinates for point  
            splineSeries.add(point) // add to series
        })

}

// set Series 1
setSeries(250, splineSeries1)

// set Series 2
setSeries(70, splineSeries2)

// Create Chart.
const chart =  lightningChart().ChartXY()
// Get references to default axes X and Y 
const axisX1 = chart.getDefaultAxisX()
const axisX1 = chart.getDefaultAxisY()
// Create extra axes X and Y 
const axisX2 = chart.addAxisX({
    opposite: true
})
const axisX2 = chart.addAxisY({
    opposite: true
})
// Create series with explicit axes.
const splineSeries1 = chart.addSplineSeries({
    xAxis: axisX1,
    yAxis: axisY1
})
const splineSeries2 = chart.addSplineSeries({
    xAxis: axisX2,
    yAxis: axisY2
})
// Set values of sub-categories on categories (relative Y size).
splineSeries1.add({x: 0, y: 0.4})
splineSeries2.add({x: 2, y : 0.6})