<button type="button" class="btn btn-primary" onclick="startDemo()">Start Demo Demo</button>
<button type="button" class="btn btn-primary" onclick="stopDemo()">Stop Demo</button>
<div id="scichart-root"></div>

#scichart-root {
  width: 1000px;
  height: 400px;
}

// Imports when using Browser Bundle
const {
  SciChartSurface,
  SciChartDefaults,
  XyDataSeries,
  FastLineRenderableSeries,
  XyScaleOffsetFilter,
  NumericAxis,
  NumberRange,
  ENumericFormat,
  EAxisAlignment,
  ZoomPanModifier,
  ZoomExtentsModifier,
  MouseWheelZoomModifier,
  CustomAnnotation,
  EVerticalAnchorPoint,
  EHorizontalAnchorPoint,
  BoxAnnotation,
  ECoordinateMode,
  EXyDirection
} = SciChart;

let count = 0;
let rangeNum = 0;
let dataSize = 1250;
let timerId = null;
let isDragging = false;
let sciChartSurfaceRef;
let wasmContextRef;
let powerAnnotation;
const traceSeries = [];
const dataX = Array.from({ length: dataSize }, (_, i) => i + 1);
const genDataY = () => {
  return Array.from({ length: dataSize }, () => Math.floor(Math.random() * 160));
};
   
// Learn more about the programmatic API at
// https://www.scichart.com/javascript-chart-documentation
async function initSciChartProgrammaticApi() {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
  const xAxesNumberRange = new NumberRange(0, dataSize);
	const yAxesNumberRange = new NumberRange(0, 200);

  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "Frequency (GHz)",
    axisTitleStyle: {
		  fontSize: 12,
	    fontFamily: "sans-serif",
	    fontWeight: "bold"
    },
  	labelStyle: {
      fontSize: 12,
      fontFamily: "sans-serif"
    },
    visibleRange: xAxesNumberRange,
		zoomExtentsRange: xAxesNumberRange,
		labelFormat: ENumericFormat.Decimal,
		labelPrecision: 6,
		cursorLabelFormat: ENumericFormat.Decimal,
		cursorLabelPrecision: 6,
		drawMajorBands: false,
  }));
  		
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
    axisTitle: "Power (dBm)",
    axisTitleStyle: {
	    fontSize: 12,
	    fontFamily: "sans-serif",
	    fontWeight: "bold"
  	},
  	labelStyle: {
      fontSize: 12,
      fontFamily: "sans-serif"
    },
  	autoTicks: false,
		majorDelta: 10,
		minorDelta: 5,
		axisAlignment: EAxisAlignment.Left,
    visibleRange: yAxesNumberRange,
    zoomExtentsRange: yAxesNumberRange,
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 2,
    cursorLabelFormat: ENumericFormat.Decimal,
    cursorLabelPrecision: 2,
		drawMajorBands: false,
  }));
  
  sciChartSurface.chartModifiers.add(new ZoomPanModifier({ isAnimated: false }));
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ isAnimated: false }));
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
  
  sciChartSurfaceRef = sciChartSurface;
	wasmContextRef = wasmContext;

  addTrace(0, "#FF2E00");
  
  xAxesNumberRange = null;
	yAxesNumberRange = null;
};

const addTrace = (traceNum, color) => {
 	 	traceSeries[traceNum] = {};
 	 	traceSeries[traceNum]["xyDataSeries"] = new XyDataSeries(wasmContextRef);
 	 	traceSeries[traceNum]["offsetFilter"] = new XyScaleOffsetFilter(traceSeries[traceNum]["xyDataSeries"], { scale: 1, offset: 5 });
    traceSeries[traceNum]["series"] = new FastLineRenderableSeries(wasmContextRef, {
			id: traceNum,
			stroke: color,
			strokeThickness: 1,
			dataIsSortedInX: true, 
			dataEvenlySpacedInX: true, 
			containsNaN: false,
			dataSeries: traceSeries[traceNum]["offsetFilter"],
    });
    sciChartSurfaceRef.renderableSeries.add(traceSeries[traceNum]["series"]);
 };

const updateChart = (traceNum) => {
  traceSeries[traceNum]["xyDataSeries"].clear();
  traceSeries[traceNum]["xyDataSeries"].appendRange(dataX, genDataY());
  timerId = setTimeout(() => {
      updateChart(0);
  }, 100);
};

const updateXVisibleRange = (start, stop) => {
  let xAxesNumberRange = new NumberRange(start, stop);
  let numericAxis = sciChartSurfaceRef.xAxes.get(0);
	numericAxis.visibleRange = xAxesNumberRange;
	numericAxis.zoomExtentsRange = xAxesNumberRange;
	xAxesNumberRange = null;
};

const startDemo = () => {
    if (!timerId) {
      updateChart(0);
      //addMarker(600, 100);
      addPowerAnnotation(400, 800);
    }
};

const stopDemo = () => {
  clearTimeout(timerId);
  timerId = null;
};

const addMarker = (x1, y1) => {
  const svgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
		'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
		'<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
		'<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">1</text>' +
	'</svg>'; 
  const markerAnnotation = new CustomAnnotation({
    x1,
    y1,
    isEditable: true,
    verticalAnchorPoint: EVerticalAnchorPoint.Center,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
    svgString: svgString
  });
  sciChartSurfaceRef.annotations.add(markerAnnotation);
  
  markerAnnotation.dragStarted.handlers.push(() => {
    isDragging = true;
    console.log("drag started - isDragging: ", isDragging);
  });
  
  markerAnnotation.dragEnded.handlers.push(() => {
    isDragging = false;
    console.log("drag ended - isDragging: ", isDragging);
  });
};

const addPowerAnnotation = (x1, x2) => {
 		x1 = parseFloat(x1);
 		x2 = parseFloat(x2);		
 		if (x1 != null && x2 != null) {
 			if (!powerAnnotation) {	
		 		powerAnnotation = new BoxAnnotation({
					id: "powerBox",
				   fill: "#0d6efd30",
				  stroke: "#0d6efd",
					strokeThickness: 1,
					xCoordinateMode: ECoordinateMode.DataValue,
					x1: x1,
					x2: x2,
					yCoordinateMode: ECoordinateMode.Relative,
					y1: 0.0,
					y2: 1.0,
					isEditable: true,
					resizeDirections: EXyDirection.XDirection, 	
				});
				sciChartSurfaceRef.annotations.add(powerAnnotation);
		  	} else {
		  		updatePowerAnnotation(x1, x2);
		  	}
	  	}
 	};
	
	const removePowerAnnotation = () => {
 		if (powerAnnotation) {
	  		sciChartSurfaceRef.annotations.remove(powerAnnotation);
	  		powerAnnotation.delete();
	  		powerAnnotation = null;
  		}
 	};
	
	const updatePowerAnnotation =(x1, x2) => {
		x1 = parseFloat(x1);
 		x2 = parseFloat(x2);
		if (powerAnnotation && x1 != null && x2 != null) {
			powerAnnotation.x1 = x1;
			powerAnnotation.x2 = x2;
		}
	};

initSciChartProgrammaticApi();