Commit 962dcd98 authored by Frank Bergmann's avatar Frank Bergmann

-- SENCHA support for histograms

parent 542876ac
<div id=@diagram_id@></div>
<script type='text/javascript'>
Ext.require(['Ext.chart.*', 'Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit']);
Ext.require([
'Ext.chart.*',
'Ext.Window',
'Ext.fx.target.Sprite',
'Ext.layout.container.Fit'
]);
Ext.onReady(function () {
histogramStore = Ext.create('Ext.data.Store', {
fields: ['category', 'value'],
data : [
@store_json;noquote@
]
histogramStore@diagram_rand@ = Ext.create('Ext.data.Store', {
fields: [@fields;noquote@],
data : @store_json;noquote@
});
histogramChart = new Ext.chart.Chart({
title: '@diagram_title@',
renderTo: '@diagram_id@',
width: @diagram_width@,
height: @diagram_height@,
animate: false,
store: histogramStore,
legend: false,
insetPadding: 20,
theme: 'Base:gradients',
axes: [{
type: 'category',
position: 'left',
fields: ['category']
}, {
type: 'numeric',
position: 'bottom',
fields: 'value'
}],
series: [{
type: 'line',
title: '@diagram_title@',
axis: 'bottom',
xField: 'value',
yField: 'category'
}]
<if @chart_type@ eq "default">
var histogramChart = new Ext.chart.Chart({
animate: true,
shadow: true,
renderTo: '@diagram_id@',
store: histogramStore@diagram_rand@,
width: 'auto',
height: 'auto',
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['@axes_bottom_value;noquote@'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
/* title: 'Horizontal Title', */
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['@axes_left_value;noquote@'],
/* title: 'Vertical Title' */
}],
/*
background: {
gradient: {
id: 'backgroundGradient',
angle: 45,
stops: {
0: {
color: '#ffffff'
},
100: {
color: '#eaf1f8'
}
}
}
},
*/
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
renderer: function(sprite, record, attr, index, store) {
return Ext.apply(attr, { fill: '<%=[im_color_code blue_dark ""]%>'});
},
/* Tips appearing on "Mouse over" */
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('@axes_left_value;noquote@') + ': ' + storeItem.get('@axes_bottom_value;noquote@'));
}
},
/* "Labels" show up on top of the bar*/
/* label: {
display: 'insideEnd',
field: '@axes_bottom_value;noquote@',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#000',
'text-anchor': 'middle'
}, */
xField: '@axes_left_value;noquote@',
yField: ['@axes_bottom_value;noquote@']
}]
});
</if>
});
</script>
......@@ -5,44 +5,49 @@
# All rights reserved. Please check
# http://www.project-open.com/license/ for details.
# ----------------------------------------------------------------------
# Variables
# ---------------------------------------------------------------------
# The following variables are expected in the environment
# defined by the calling /tcl/*.tcl libary:
if {![info exists diagram_width]} { set diagram_width 600 }
if {![info exists diagram_title]} { set diagram_title "" }
# Create a random ID for the diagram
# Random ID for the diagram
set diagram_rand [expr {round(rand() * 100000000.0)}]
set diagram_id "histogram_sql_$diagram_rand"
# Execute the sql and create inline store code.
set json_list [list]
db_with_handle db {
set selection [db_exec select $db query $sql 1]
while { [db_getrow $db $selection] } {
set col_names [ad_ns_set_keys $selection]
set json_entry ""
for { set i 0 } { $i < [ns_set size $selection] } { incr i } {
set var [lindex $col_names $i]
set val [ns_set value $selection $i]
switch $i {
0 { append json_entry "\{category: '$val'" }
1 { append json_entry ", value: $val\}" }
default { ad_return_complaint "histogram-sql: The provided SQL statement returns more the two columns.
Expected: column 1 should contain a category string, column 2 should contain a numerical value" }
}
}
lappend json_list $json_entry
}
# JSON
set name_list [list]
set name_list_quoted [list]
set l10n_list [list]
# Ignore width/height - try 'auto' instead
# Set width/height
# if {![info exists diagram_width]} { set diagram_width 600 }
# if {![info exists diagram_height]} {
# set cnt [db_string sql "select count(*) from ($sql) t" -default 0]
# set diagram_height [expr $cnt * 50]
# }
# Get JSON from DB
set sql "select
array_to_json(array_agg(row_to_json(t)))
from
($sql) t
"
set store_json [db_string get_json_for_histogram $sql -default ""]
# Building lists
foreach {x y} [lindex [json::json2dict $store_json] 0] {
lappend name_list $x
lappend name_list_quoted "'$x'"
lappend l10n_list [lang::message::lookup "" intranet-reporting-dashboard.$x "$x"]
}
db_release_unused_handles
set store_json [join $json_list ",\n\t"]
set fields [join $name_list_quoted ", "]
# Other chart types might be supported in the future
set chart_type "default"
# Calculate diagram height depending on SQL output
if {![info exists diagram_height]} {
set diagram_height [expr 60 + [llength json_list] * 15]
if { "default" eq $chart_type } {
set axes_left_value [lindex $name_list 0]
set axes_bottom_value [lindex $name_list 1]
}
# Clean up - not sure if still required with OpenACS 5.x
db_release_unused_handles
......@@ -32,7 +32,6 @@ ad_proc -public v {
# Sweeper - Cleans up the dashboard cache
# ---------------------------------------------------------------------
ad_proc -public im_reporting_dashboard_sweeper { } {
Deletes old dashboard DW entries
} {
......@@ -210,26 +209,18 @@ ad_proc -public im_dashboard_histogram_sql {
{ -diagram_width 400 }
{ -restrict_to_object_type_id 0 }
} {
Returns a Sencha histogram with the categories and values
defined by a SQL statement. Example:
"select im_category_from_id(project_type_id), count(*) from im_projects group by project_type_id"
This diagram is suitable for up to 20 categories. Beyond
this it will probably break the GUI design and become slow.
In these cases please use a different widget.
@param object_id ID of a container object.
@param restrict_to_object_type_id Show this widget only in objects of a specific type
If ExtJS is available returns an ExtJS BarChart, otherwise uses the Tautenhahn lib
} {
set enable_sencha_p 0
if {$enable_sencha_p && [im_sencha_extjs_installed_p]} {
if { [im_sencha_extjs_installed_p] } {
# ad_return_complaint xx $sql
return [im_dashboard_histogram_sql_sencha \
-sql $sql \
-object_id $object_id \
-menu_label $menu_label \
-name $name \
-diagram_width $diagram_width \
-restrict_to_object_type_id -restrict_to_object_type_id \
-restrict_to_object_type_id $restrict_to_object_type_id \
]
} else {
return [im_dashboard_histogram_sql_tautenhahn \
......@@ -238,13 +229,11 @@ ad_proc -public im_dashboard_histogram_sql {
-menu_label $menu_label \
-name $name \
-diagram_width $diagram_width \
-restrict_to_object_type_id -restrict_to_object_type_id \
-restrict_to_object_type_id $restrict_to_object_type_id \
]
}
}
ad_proc -public im_dashboard_histogram_sql_sencha {
-sql:required
{ -menu_label "" }
......@@ -253,12 +242,13 @@ ad_proc -public im_dashboard_histogram_sql_sencha {
{ -object_id "" }
{ -restrict_to_object_type_id 0 }
} {
Returns a dashboard component using the Tautenhan JavaScript library.
Returns a dashboard component using Sencha ExtJS
Requires a SQL statement like
"select im_category_from_id(project_type_id), count(*) from im_projects group by project_type_id"
@param object_id ID of a container object.
@param restrict_to_object_type_id Show this widget only in objects of a specific type
} {
# Check if this portlet should only apply to a specific object sub-type
set object_subtype_id ""
if {"" != $object_id && 0 != $object_id} {
......@@ -272,8 +262,7 @@ ad_proc -public im_dashboard_histogram_sql_sencha {
}
}
# Sencha check and permissions
if {![im_sencha_extjs_installed_p]} { return "" }
# Load libs
im_sencha_extjs_load_libraries
# Call the portlet page
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment