charting_ui 0.1.3

data/app/assets/javascripts/charting_ui/charting_engine.coffee

@@ -0,0 +1,39 @@
+#= require ./charting_scatter
+#= require ./charting_histogram
+
+@charts = []
+
+@create_new_canvas = (block,  is_mobile, type) ->
+	chart = switch type
+		when "scatter" then new ChartEngine_HardCoded_Scatter(block)
+		when "histogram_model" then new ChartEngine_Histogram(block)
+		else null
+
+	if chart == null
+		console.log "Unknown type: " + type
+		return
+
+	charts.push(chart)
+	register_canvas_resize(is_mobile)
+	return chart
+
+@register_canvas_resize = (is_mobile) ->
+	if is_mobile
+		window.addEventListener("orientationchange",
+			() ->
+				setTimeout(() ->
+							$.each(charts, (i, chart) ->
+								chart.canvas_resize()
+							)
+				, 150)
+		, false);
+	else
+		$(window).resize(
+			() ->
+				$.each(charts, (i, chart) ->
+					chart.canvas_resize()
+				)
+		)
+	$.each(charts, (i, chart) ->
+		chart.canvas_resize()
+	)

data/app/assets/javascripts/charting_ui/charting_histogram.coffee

@@ -0,0 +1,254 @@
+#= require ./charting_core
+
+class window.ChartEngine_Histogram extends ChartEngine_Core
+
+	offset_bar: 5
+	alone: false
+	min_height: 3
+	is_dates: false
+
+	#########################################
+	############### SETUP ###################
+	constructor: (block) ->
+		super(block)
+
+		$(@info_box).css('border-radius', '0px')
+		if @alone
+			$(@info_box).css('opacity', '1')
+		else
+			$(@info_box).css('opacity', '0.8')
+
+		if @is_dates
+			@create_extra_menu($(block).parent())
+
+		console.log "Chart histogram initialized!"
+
+	create_extra_menu: (container) ->
+		self = this
+		block = '<div class="charting_ui_date_range_pick">'
+		block += '<span>Date range: </span>'
+		block += '<select class="charting_ui_date_range_selector">'
+		block += '<option value="all" selected="selected">All</option>'
+		block += '<option value="day">per Days</option>'
+		block += '<option value="month">per Months</option>'
+		block += '<option value="year">per Years</option>'
+		block += '</select>'
+		block += '</div>'
+
+		container.append($(block))
+
+		$(container).on('change','.charting_ui_date_range_selector', (event) ->
+			self.load_source($(this).val())
+			self.redraw()
+		)
+
+		return block
+
+	get_info_box_content: () ->
+		return '<h3 class="charting_ui_info_main_title"></h3><ul class="charting_ui_info_container"></ul>'
+
+	create_info_info_box: (index, main_title, titles) ->
+		container = $(@info_box).find('ul.charting_ui_info_container')
+
+		block = '<li>'
+		if ! @alone
+			block += '<span class="charting_ui_info_title charting_ui_info_title_' + main_title + '" style="color:' + @colors[index] + '" >' + main_title + ':</span>&nbsp;'
+		block += '<ul style="display:inline-block;">'
+		$.each(titles, (i, t) ->
+		       block += '<li style="display:inline-block;"><span class="charting_ui_info_sub_title charting_ui_info_sub_title_' + main_title + '_' + t.class_name + '" >' + t.name + ':</span>&nbsp;<span class="charting_ui_info_value charting_ui_info_box_value_' + main_title + '_' + t.class_name + '"></span>&nbsp;</li>'
+		)
+		block += '</ul></li>'
+		container.append($(block))
+
+
+	load_source: (date_scope = "all") ->
+		model = @data.model.name
+		key = @data.model.key
+		self = this
+		success = false
+
+		func_done = (data) ->
+			self.source = data.success
+			self.min_x = 0
+			self.max_x = self.source.length
+			self.min_y = 0
+			self.max_y = - Number.MAX_VALUE
+			total_value = {}
+			self.alone = self.source[0].values.length == 1
+
+			$.map(self.source, (v, k) ->
+				$.map(v.values, (v, k) ->
+					if k of total_value
+						total_value[k] += v.value
+					else
+						total_value[k] = v.value
+				)
+			)
+
+			$.map(self.source,(v, k) ->
+				type = v.key_type
+				if type == "date"
+					v.key = new Date(v.key)
+					self.is_dates = true
+
+				$.map(v.values, (v, k) ->
+					y = parseInt(v.value)
+					v.percent = self.round_up(v.value / total_value[k] * 1.0 * 100, 1)
+					if y > self.max_y
+						self.max_y = y
+				)
+			)
+
+			$(self.info_box).find('ul.charting_ui_info_container').empty()
+			$.map(self.source[0].values, (v, k) ->
+				self.create_info_info_box(k, v.serie, [{name: "Sum", class_name:"sum"}, {name: "%", class_name: "percent"}])
+			)
+
+			success = true
+
+		func_error = (data) ->
+			success = false
+			response = $.parseJSON data.responseText
+			console.log "ERROR: #" + data.status + ": " + response.error
+
+		func_always = (data) ->
+			console.log "Data fetched"
+
+		$.ajax({
+			url: '/charting_ui/fetch_data',
+			data: 'model_name=' + model + '&model_key=' + JSON.stringify(key) + "&date_scope=" + date_scope,
+			async: false,
+			method: 'post',
+			success: func_done,
+			done: func_done,
+			error: func_error,
+			fail: func_error,
+			complete: func_always,
+			always: func_always
+			})
+
+		console.log("MinX: " + @min_x + ", MaxX: " + @max_x)
+		console.log("MinY: " + @min_y + ", MaxY: " + @max_y)
+		return success
+
+
+	before_redraw: () ->
+
+	#########################################
+	############ DRAW GLOBAL ################
+	getIndentation: () ->
+		return @source.length
+
+	draw_chart: () ->
+		self = this
+
+		$.each(@source, (i, p) ->
+			series = p.values.length
+			$.map(p.values, (v, index) ->
+				x_start =  i + (1.0 / series * index)
+				x_end =  i + (1.0 / series * (index + 1))
+				top_left = new Chart_Point(x_start, v.value)
+				bottom_right = new Chart_Point(x_end, self.min_y)
+				top_left = self.convert_unit_to_pixel(top_left)
+				if v.value == 0
+					top_left.y -= self.min_height
+
+				bottom_right = self.convert_unit_to_pixel(bottom_right)
+				if index == 0
+					top_left.x += self.offset_bar
+				if index == series - 1
+					bottom_right.x -= self.offset_bar
+
+
+				self.draw_rectangle(top_left, bottom_right, self.colors[index], "white", 0)
+			)
+		)
+
+	get_axe_text_x_pixel_position: (n, indent) ->
+		return @convert_unit_to_pixel_x(n + @indent_x / 2)
+
+	get_axe_text_x_text: (n) ->
+		if n >= @source.length
+			return null
+		return @source[n].key
+
+	#########################################
+	######### UPDATE INTERACTIVE ############
+	update_user_interaction: (mouse_coordinate) ->
+		value_x = Math.ceil(@convert_pixel_to_unit_x(mouse_coordinate.x)) - 1
+		if value_x >= @source.length
+			return false
+		column = @source[value_x]
+
+		series = column.values.length
+		if series == 1
+			coordinate_x = value_x
+			coordinate_y = column.values[0].value
+
+			if mouse_coordinate.y < @convert_unit_to_pixel_y(coordinate_y) && coordinate_y > 0
+				return false
+
+			top_left = new Chart_Point(coordinate_x, coordinate_y)
+			bottom_right = new Chart_Point(coordinate_x + 1, @min_y)
+
+			top_left = @convert_unit_to_pixel(top_left)
+
+			if coordinate_y == 0
+				thickness = 1
+				top_left.y -= @min_height
+			else
+				thickness = 4
+
+			top_left.x += @offset_bar
+
+			bottom_right = @convert_unit_to_pixel(bottom_right)
+			bottom_right.x -= @offset_bar
+			bottom_right.y -= thickness / 2
+
+
+
+			@previous_drawn_region.push(@draw_rectangle_interactive(top_left, bottom_right, @default_cross_color, "black", thickness))
+		else
+			slice = 1.0 / series
+
+		return true
+
+	updateInfoBoxPosition: (mouse_coordinate) ->
+		value_x = Math.ceil(@convert_pixel_to_unit_x(mouse_coordinate.x)) - 1
+		column = @source[value_x]
+
+		coordinate_x = @convert_unit_to_pixel_x(value_x) + 1
+
+		if @alone
+			if column.values[0].value == 0
+				coordinate_y = @convert_unit_to_pixel_y(@max_y)
+				coordinate_x -= 2
+			else
+				coordinate_y = @convert_unit_to_pixel_y(column.values[0].value) + 1
+		else
+			coordinate_y = @convert_unit_to_pixel_y(@max_y)
+
+		if $(@info_box).outerWidth() > @canvas_width - coordinate_x - @offset_bar
+			coordinate_x = @convert_unit_to_pixel_x(value_x + 1) - 1
+			@info_box.css('left', (coordinate_x - $(@info_box).outerWidth() - @offset_bar) + 'px')
+		else
+			@info_box.css('left', (coordinate_x + @offset_bar) + 'px')
+
+		@info_box.css('top', (coordinate_y) + 'px')
+
+
+	update_info_box_content: (mouse_coordinate) ->
+		value_x = Math.ceil(@convert_pixel_to_unit_x(mouse_coordinate.x)) - 1
+		column = @source[value_x]
+		self = this
+		@info_box.find('.charting_ui_info_main_title').text(column.key)
+
+		$.map(column.values, (v, k) ->
+			serie = v.serie
+			self.info_box.find('.charting_ui_info_box_value_' + serie + '_sum').text(v.value)
+			self.info_box.find('.charting_ui_info_box_value_' + serie + '_percent').text(v.percent)
+		)
+		#@info_box.find('.charting_ui_info_box_y').text(column.values[0].value)
+		#@info_box.find('.charting_ui_info_box_extra').text(column.values[0].percent)
+
+	#########################################

data/app/assets/javascripts/charting_ui/charting_point.coffee

@@ -0,0 +1,8 @@
+class window.Chart_Point
+
+	constructor: (_x, _y) ->
+		@x = parseFloat(_x)
+		@y = parseFloat(_y)
+
+	to_s: () ->
+		return "(" + @x + ", " + @y + ")"

data/app/assets/javascripts/charting_ui/charting_scatter.coffee

@@ -0,0 +1,72 @@
+#= require ./charting_core
+
+class window.ChartEngine_HardCoded_Scatter extends ChartEngine_Core
+
+	#########################################
+	############### SETUP ###################
+	constructor: (block) ->
+		super(block)
+
+		console.log "Chart scatter initialized!"
+
+	get_info_box_content: () ->
+		return '<ul class="charting_ui_info_container">
+				<li><span class="charting_ui_info_title charting_ui_info_x_title" >x:</span>&nbsp;<span class="charting_ui_info_value charting_ui_info_box_x"></span></li>
+				<li><span class="charting_ui_info_title charting_ui_info_y_title" >y:</span>&nbsp;<span class="charting_ui_info_value charting_ui_info_box_y"></span></li>
+			</ul>'
+
+	load_source: () ->
+		@source = @data.collection
+		@min_x = 0
+		@max_x = @source.length
+		@min_y = Math.min.apply(null, @source)
+		@max_y = Math.max.apply(null, @source)
+		console.log("MinX: " + @min_x + ", MaxX: " + @max_x)
+		console.log("MinY: " + @min_y + ", MaxY: " + @max_y)
+		return true
+
+	#########################################
+	############ DRAW GLOBAL ################
+	draw_chart: () ->
+		points = []
+		self = this
+		$.each(@source, (i, p) ->
+		       points.push(self.convert_unit_to_pixel(new Chart_Point(i, p)))
+		)
+		@draw_lines(points, @default_line_color)
+
+	#########################################
+	######### UPDATE INTERACTIVE ############
+	update_user_interaction: (mouse_coordinate) ->
+		value_x =  Math.round(@convert_pixel_to_unit_x(mouse_coordinate.x))
+		if value_x >= @source.length
+			return false
+		value_y = @source[value_x]
+
+
+		mouse_coordinate.x = @convert_unit_to_pixel_x(value_x)
+		mouse_coordinate.y = @convert_unit_to_pixel_y(value_y)
+
+		@draw_line_interactive(new Chart_Point(@offset_left, mouse_coordinate.y), #new Chart_Point(mouse_coordinate.x - @default_font_size, mouse_coordinate.y),
+		                      new Chart_Point(@canvas_width - @offset_right, mouse_coordinate.y),#new Chart_Point(mouse_coordinate.x + @default_font_size, mouse_coordinate.y),
+		                      @default_cross_color, 1
+		                      )
+		@draw_line_interactive(new Chart_Point(mouse_coordinate.x, @offset_top), #new Chart_Point(mouse_coordinate.x, mouse_coordinate.y - @default_font_size),
+		                      new Chart_Point(mouse_coordinate.x, @canvas_height - @offset_bottom),#new Chart_Point(mouse_coordinate.x, mouse_coordinate.y + @default_font_size),
+		                      @default_cross_color, 1
+		                      )
+
+		#@previous_drawn_region.push(@draw_circle(@ctx_interactive, @convert_unit_to_pixel(new Chart_Point(value_x, value_y)), 5))
+		@draw_circle(@ctx_interactive, @convert_unit_to_pixel(new Chart_Point(value_x, value_y)), 5)
+
+		@previous_drawn_region.push([
+								0,0#mouse_coordinate.x - @default_font_size, mouse_coordinate.y - @default_font_size,
+								@canvas_width, @canvas_height #mouse_coordinate.x + @default_font_size, mouse_coordinate.y + @default_font_size
+								])
+		return true
+
+	update_info_box_content: (mouse_coordinate) ->
+		@info_box.find('.charting_ui_info_box_x').text(@round_up(@convert_pixel_to_unit_x(mouse_coordinate.x)))
+		@info_box.find('.charting_ui_info_box_y').text(@round_up(@convert_pixel_to_unit_y(mouse_coordinate.y)))
+
+	#########################################

data/app/assets/javascripts/charting_ui/index.js

@@ -0,0 +1,6 @@
+//= require jquery
+//= require jquery_ujs
+//= require ./charting_point
+//= require ./charting_core
+//= require ./charting_scatter
+//= require ./charting_engine

data/app/assets/stylesheets/charting_ui.scss

@@ -0,0 +1,77 @@
+.charting_ui_area{
+	width: 100%;
+	display: block;
+	position: relative;
+
+	.charting_ui_date_range_pick{
+		display: block;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+	}
+
+	&.charting_ui_bordered_area{
+		border: 1px lightgray solid;
+	}
+
+	.charting_ui_main_title{
+		text-align: center;
+	}
+
+	.charting_ui_canvas_area{
+		position: relative;
+		display: block;
+		width: 100%;
+
+		.charting_ui_data{
+			display: none;
+		}
+
+		.charting_ui_info_block{
+			position: absolute;
+			display: none;
+			background: white;
+			border: 1px solid black;
+			border-radius: 5px;
+			z-index: 2;
+			pointer-events:none;
+			padding: 5px;
+			opacity: 0.7;
+
+
+			h3{
+				font-size: 1.0em;
+				text-align: center;
+				font-weight: bold;
+				margin: 0px;
+				border-bottom: 1px solid darkgray
+			}
+
+			ul{
+				font-size: 0.9em;
+				-webkit-padding-start: 0px;
+				list-style-type: none;
+				-webkit-margin-before: 0px;
+				-webkit-margin-after: 0px;
+				text-align: center;
+
+				.charting_ui_info_title, .charting_ui_info_sub_title{
+					font-weight: bold;
+					text-transform: capitalize;
+				}
+			}
+		}
+
+		.charting_ui_chart_interactive{
+			position: absolute;
+			z-index: 1;
+			display: block;
+		}
+
+		.charting_ui_chart_fix{
+			position: absolute;
+			z-index: 0;
+			display: block;
+		}
+	}
+}