Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
I
intranet-reporting-dashboard
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
project-open
intranet-reporting-dashboard
Commits
962dcd98
Commit
962dcd98
authored
Jan 10, 2017
by
Frank Bergmann
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
-- SENCHA support for histograms
parent
542876ac
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
129 additions
and
84 deletions
+129
-84
histogram-sql.adp
lib/histogram-sql.adp
+84
-33
histogram-sql.tcl
lib/histogram-sql.tcl
+37
-32
intranet-reporting-dashboard-procs.tcl
tcl/intranet-reporting-dashboard-procs.tcl
+8
-19
No files found.
lib/histogram-sql.adp
View file @
962dcd98
<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>
lib/histogram-sql.tcl
View file @
962dcd98
...
...
@@ -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 r
andom ID for the diagram
#
R
andom 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
tcl/intranet-reporting-dashboard-procs.tcl
View file @
962dcd98
...
...
@@ -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
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment