v/examples/js_dom_draw_bechmark_chart/draw.js.v

module main

import js.dom

fn get_canvas(elem JS.HTMLElement) JS.HTMLCanvasElement {
	match elem {
		JS.HTMLCanvasElement {
			return elem
		}
		else {
			panic('Not a canvas')
		}
	}
}

fn draw_line(mut context JS.CanvasRenderingContext2D, x1 int, y1 int, x2 int, y2 int) {
	context.beginPath()
	context.strokeStyle = 'black'.str
	context.lineWidth = JS.Number(1)
	context.moveTo(0, 0)
	context.lineTo(100, 100)
	context.stroke()
	context.closePath()
}

struct DrawState {
mut:
	context JS.CanvasRenderingContext2D
	drawing bool
	x       f64
	y       f64
}

fn (mut state DrawState) draw_bench_chart(color string, time_array []int, max_time int) ? {
	println(time_array.len)
	max_height := f64(480)
	max_width := f64(720)

	state.drawing = true
	state.x = f64(0)
	state.y = f64(max_height)
	state.context.strokeStyle = color.str
	state.context.lineWidth = JS.Number(1)

	for i := 0; i <= time_array.len; i++ {
		state.context.beginPath()
		state.context.moveTo(state.x, state.y)
		state.x = max_width / f64(time_array.len) * i + 1.0
		state.y = max_height - (max_height / f64(max_time) * f64(time_array[i]))
		state.context.lineTo(state.x, state.y)
		state.context.stroke()
		state.context.closePath()
	}

	state.drawing = false
}

fn main() {
	document := dom.document

	clear_btn := document.getElementById('clearButton'.str)?

	canvas_elem := document.getElementById('canvas_insert_id'.str)?

	canvas := get_canvas(canvas_elem)
	ctx := canvas.getContext('2d'.str, js_undefined())?
	context := match ctx {
		JS.CanvasRenderingContext2D {
			ctx
		}
		else {
			panic('can not get 2d context')
		}
	}
	mut state := DrawState{context, false, 0, 0}

	attribute_names := ['sqlite_memory_insert_times', 'sqlite_file_insert_times' /*
	,
		'postgres_insert_times', 'mysql_insert_times'
	*/]
	chart_colors := ['gray', 'black', 'red', 'orange', 'purple']

	for idx, name in attribute_names {
		// get values in JS.String values
		mut attribute_js_values := canvas_elem.getAttribute(name.str) or {
			println('Não pegou o attributo')
			continue // if attribute not exist, jump.
		}
		if attribute_js_values.length < JS.Number(1) {
			continue // if attribute value is empty, jump.
		}

		// convert []JS.String in v []string
		mut attribute_string_values := tos(attribute_js_values).replace('[', '').replace(']',
			'').split(',')

		// convert []string in []int
		mut attribute_int_values := []int{}
		for variable in attribute_string_values {
			attribute_int_values << variable.int()
		}
		// draw chart
		state.draw_bench_chart(chart_colors[idx], attribute_int_values, 11204530) or {
			println(err)
		}
	}

	clear_btn.addEventListener('click'.str, fn [mut state, canvas] (_ JS.Event) {
		state.context.clearRect(0, 0, canvas.width, canvas.height)
	}, JS.EventListenerOptions{})
}