examples: js_dom_draw_bechmark_chart (#15518)

examples/js_dom_draw_bechmark_chart/chart/draw.js.v

@@ -0,0 +1,129 @@
+module main
+
+import js.dom
+
+fn get_canvas(elem JS.HTMLElement) JS.HTMLCanvasElement {
+	//  error: `JS.HTMLElement` doesn't implement method `getContext` of interface `JS.HTMLCanvasElement`
+	match elem {
+		JS.HTMLCanvasElement {
+			return elem
+		}
+		else {
+			JS.console.log('Not canvas')
+			return JS.HTMLCanvasElement{}
+		}
+	}
+}
+
+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
+}
+
+struct FrameworkPlatform {
+mut:
+	v_sqlite_memory []int
+	// v_sqlite_file            []int
+	typescript_sqlite_memory []int
+}
+
+fn (mut state DrawState) draw_bench_chart(color string, time_array []int, max_time int) ? {
+	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
+
+	mut canvas_elem := map[string]JS.HTMLElement{}
+	mut canvas := map[string]JS.HTMLCanvasElement{}
+
+	canvas_elem['insert'] = document.getElementById('canvas_insert_id'.str)?
+	JS.console.log('canvas_insert_id')
+
+	canvas_elem['select'] = document.getElementById('canvas_select_id'.str)?
+	JS.console.log('canvas_select_id')
+
+	canvas_elem['update'] = document.getElementById('canvas_update_id'.str)?
+	JS.console.log('canvas_update_id')
+
+	// for orm_stmt_kind in ["insert", "select", "update"]{
+	for orm_stmt_kind in ['insert', 'select', 'update'] {
+		// type HTMLElement
+
+		canvas[orm_stmt_kind] = get_canvas(canvas_elem[orm_stmt_kind])
+
+		ctx := canvas[orm_stmt_kind].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}
+
+		mut inserts_from_framework := canvas_elem[orm_stmt_kind].getAttribute('inserts_from_framework'.str)?
+
+		mut max_benchmark := canvas_elem[orm_stmt_kind].getAttribute('max_benchmark'.str)?
+
+		// -----------------------------------------------------------------------------------------------------------------------------------------------------------------
+		mut obj := FrameworkPlatform{}
+		obj = JS.JSON.parse(tos(inserts_from_framework))
+
+		// Waiting for v implement for loop getting key and value of object in v.js
+		mut attribute_int_values := []int{}
+
+		//* v framework
+		for variable in obj.v_sqlite_memory {
+			attribute_int_values << variable
+		}
+
+		state.draw_bench_chart('gray', attribute_int_values, tos(max_benchmark).int())?
+		attribute_int_values = []
+
+		//* typescript framework
+
+		for variable in obj.typescript_sqlite_memory {
+			attribute_int_values << variable
+		}
+
+		state.draw_bench_chart('red', attribute_int_values, tos(max_benchmark).int())?
+
+		attribute_int_values = []
+	}
+}