mirror/opensourcepos
1
0
Fork 0
mirror of https://github.com/opensourcepos/opensourcepos.git synced 2026-07-10 15:06:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added tooltip support to charts, regen dist files (#342)

Browse Source
This commit is contained in:
FrancescoUK
2016-05-25 22:31:58 +01:00
parent 9137c89fb7
commit 5531f7fa9e
15 changed files with 156 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
application/controllers/Reports.php
View File

@@ -404,8 +404,9 @@ class Reports extends Secure_area
$series = array();
foreach($report_data as $row)
{
$labels[] = date($this->config->item('dateformat'), strtotime($row['sale_date']));
$series[] = $row['total'];
$date = date($this->config->item('dateformat'), strtotime($row['sale_date']));
$labels[] = $date;
$series[] = array('meta' => $date, 'value' => $row['total']);
}
$data = array(
@@ -421,8 +422,7 @@ class Reports extends Secure_area
$this->load->view("reports/graphical", $data);
}
// escape js text to avoid any issue with php strings having only one \ where js requires \\
//Graphical summary items report
function graphical_summary_items($start_date, $end_date, $sale_type)
{
@@ -460,13 +460,14 @@ class Reports extends Secure_area
$model = $this->Summary_categories;
$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$summary = $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$labels = array();
$series = array();
foreach($report_data as $row)
{
$labels[] = $row['category'];
$series[] = $row['total'];
$series[] = array('meta' => $row['category'] . ' ' . round($row['total'] / $summary['total'] * 100, 2) . '%', 'value' => $row['total']);
}
$data = array(
@@ -475,7 +476,7 @@ class Reports extends Secure_area
"chart_type" => "reports/graphs/pie",
"labels_1" => $labels,
"series_data_1" => $series,
"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
"summary_data_1" => $summary
);
$this->load->view("reports/graphical", $data);
@@ -488,13 +489,14 @@ class Reports extends Secure_area
$model = $this->Summary_suppliers;
$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$summary = $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$labels = array();
$series = array();
foreach($report_data as $row)
{
$labels[] = $row['supplier'];
$series[] = $row['total'];
$series[] = array('meta' => $row['supplier'] . ' ' . round($row['total'] / $summary['total'] * 100, 2) . '%', 'value' => $row['total']);
}
$data = array(
@@ -503,7 +505,7 @@ class Reports extends Secure_area
"chart_type" => "reports/graphs/pie",
"labels_1" => $labels,
"series_data_1" => $series,
"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
"summary_data_1" => $summary
);
$this->load->view("reports/graphical", $data);
@@ -516,13 +518,14 @@ class Reports extends Secure_area
$model = $this->Summary_employees;
$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$summary = $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$labels = array();
$series = array();
foreach($report_data as $row)
{
$labels[] = $row['employee'];
$series[] = $row['total'];
$series[] = array('meta' => $row['employee'] . ' ' . round($row['total'] / $summary['total'] * 100, 2) . '%', 'value' => $row['total']);
}
$data = array(
@@ -531,7 +534,7 @@ class Reports extends Secure_area
"chart_type" => "reports/graphs/pie",
"labels_1" => $labels,
"series_data_1" => $series,
"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
"summary_data_1" => $summary
);
$this->load->view("reports/graphical", $data);
@@ -544,13 +547,14 @@ class Reports extends Secure_area
$model = $this->Summary_taxes;
$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$summary = $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$labels = array();
$series = array();
foreach($report_data as $row)
{
$labels[] = $row['percent'];
$series[] = $row['total'];
$series[] = array('meta' => $row['percent'] . ' ' . round($row['total'] / $summary['total'] * 100, 2) . '%', 'value' => $row['total']);
}
$data = array(
@@ -559,7 +563,7 @@ class Reports extends Secure_area
"chart_type" => "reports/graphs/pie",
"labels_1" => $labels,
"series_data_1" => $series,
"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
"summary_data_1" => $summary
);
$this->load->view("reports/graphical", $data);
@@ -632,13 +636,14 @@ class Reports extends Secure_area
$model = $this->Summary_payments;
$report_data = $model->getData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$summary = $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type));
$labels = array();
$series = array();
foreach($report_data as $row)
{
$labels[] = $row['payment_type'];
$series[]= $row['payment_amount'];
$series[] = array('meta' => $row['payment_type'] . ' ' . round($row['payment_amount'] / $summary['total'] * 100, 2) . '%', 'value' => $row['payment_amount']);
}
$data = array(
@@ -647,7 +652,7 @@ class Reports extends Secure_area
"chart_type" => "reports/graphs/pie",
"labels_1" => $labels,
"series_data_1" => $series,
"summary_data_1" => $model->getSummaryData(array('start_date'=>$start_date, 'end_date'=>$end_date, 'sale_type'=>$sale_type))
"summary_data_1" => $summary
);
$this->load->view("reports/graphical", $data);

2
application/views/login.php
View File

@@ -6,7 +6,7 @@
<title>Open Source Point Of Sale <?php echo $this->lang->line('login_login'); ?></title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<!-- start css template tags -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css?rel=9ed20b1ee8"/>
<link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css?rel=50ab19585f"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<!-- end css template tags -->

8
application/views/partial/header.php
View File

@@ -16,6 +16,7 @@
<link rel="stylesheet" href="bower_components/bootstrap-table/src/bootstrap-table.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css" />
<link rel="stylesheet" href="bower_components/chartist-plugin-tooltip/dist/chartist-plugin-tooltip.css" />
<!-- endbower -->
<!-- start css template tags -->
<link rel="stylesheet" type="text/css" href="css/barcode_font.css"/>
@@ -49,6 +50,7 @@
<script src="bower_components/chartist/dist/chartist.min.js"></script>
<script src="bower_components/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.min.js"></script>
<script src="bower_components/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.min.js"></script>
<script src="bower_components/chartist-plugin-tooltip/dist/chartist-plugin-tooltip.min.js"></script>
<!-- endbower -->
<!-- start js template tags -->
<script type="text/javascript" src="js/common.js" language="javascript"></script>
@@ -62,12 +64,12 @@
<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />
<![endif]-->
<!-- start mincss template tags -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css?rel=9ed20b1ee8"/>
<link rel="stylesheet" type="text/css" href="dist/bootstrap.min.css?rel=50ab19585f"/>
<link rel="stylesheet" type="text/css" href="dist/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=a8e5525857"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=1e216cf720"/>
<!-- end mincss template tags -->
<!-- start minjs template tags -->
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=77957c6da1" language="javascript"></script>
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=f103e2cde8" language="javascript"></script>
<!-- end minjs template tags -->
<?php endif; ?>

7
application/views/reports/graphs/bar.php
View File

@@ -19,10 +19,7 @@
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
chartPadding: {
top: 10,
// right: 15,
// bottom: 10,
// left: 10
top: 20
},
// X-Axis specific configuration
@@ -45,7 +42,7 @@
axisTitle: '<?php echo $xaxis_title; ?>',
axisClass: 'ct-axis-title',
offset: {
x: 0,
x: -100,
y: 100
},
textAnchor: 'middle'

7
application/views/reports/graphs/hbar.php
View File

@@ -19,10 +19,7 @@
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
chartPadding: {
top: 10,
// right: 15,
// bottom: 10,
// left: 10
top: 20
},
// Set the bar chart to be horizontal
@@ -48,7 +45,7 @@
axisTitle: '<?php echo $xaxis_title; ?>',
axisClass: 'ct-axis-title',
offset: {
x: 0,
x: -100,
y: 100
},
textAnchor: 'middle'

84
application/views/reports/graphs/line.php
View File

@@ -25,10 +25,7 @@
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
chartPadding: {
top: 10,
// right: 15,
// bottom: 10,
// left: 10
top: 20
},
// X-Axis specific configuration
@@ -44,9 +41,22 @@
offset: 60,
// The label interpolation function enables you to modify the values
// used for the labels on each axis.
// labelInterpolationFnc: function(value) {
// return '$' + value;
// }
labelInterpolationFnc: function(value) {
<?php
if( $this->config->item('currency_side') )
{
?>
return value + '<?php echo $this->config->item('currency_symbol'); ?>';
<?php
}
else
{
?>
return '<?php echo $this->config->item('currency_symbol'); ?>' + value;
<?php
}
?>
}
},
// plugins configuration
@@ -56,7 +66,7 @@
axisTitle: '<?php echo $xaxis_title; ?>',
axisClass: 'ct-axis-title',
offset: {
x: 0,
x: -100,
y: 100
},
textAnchor: 'middle'
@@ -74,10 +84,64 @@
}),
Chartist.plugins.ctPointLabels({
textAnchor: 'middle'
textAnchor: 'middle',
labelInterpolationFnc: function(value) {
<?php
if( $this->config->item('currency_side') )
{
?>
return value + '<?php echo $this->config->item('currency_symbol'); ?>';
<?php
}
else
{
?>
return '<?php echo $this->config->item('currency_symbol'); ?>' + value;
<?php
}
?>
}
}),
Chartist.plugins.tooltip({
pointClass: 'ct-tooltip-point',
transformTooltipTextFnc: function(value) {
<?php
if( $this->config->item('currency_side') )
{
?>
return value + '<?php echo $this->config->item('currency_symbol'); ?>';
<?php
}
else
{
?>
return '<?php echo $this->config->item('currency_symbol'); ?>' + value;
<?php
}
?>
}
})
]
};
new Chartist.Line('#chart1', data, options);
chart = new Chartist.Line('#chart1', data, options);
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart
if(data.type === 'point') {
// We are creating a new path SVG element that draws a triangle around the point coordinates
var circle = new Chartist.Svg('circle', {
cx: [data.x],
cy: [data.y],
r: [5],
'ct:value': data.value.y,
'ct:meta': data.meta,
class: 'ct-tooltip-point',
}, 'ct-area');
// With data.element we get the Chartist SVG wrapper and we can replace the original point drawn by Chartist with our newly created triangle
data.element.replace(circle);
}
});
</script>

19
application/views/reports/graphs/pie.php
View File

@@ -4,8 +4,6 @@
labels: <?php echo json_encode($labels_1); ?>,
series: <?php echo json_encode($series_data_1); ?>
};
var sum = function(a, b) { return a + b };
// We are setting a few options for our chart and override the defaults
var options = {
@@ -18,20 +16,17 @@
// Padding of the chart drawing area to the container element and labels as a number or padding object {top: 5, right: 5, bottom: 5, left: 5}
chartPadding: {
top: 10,
// right: 15,
// bottom: 10,
// left: 10
top: 20
},
// show the labels on the border with the pie chart
labelPosition: 'outside',
// interpolate labels to show lable, value and %
labelInterpolationFnc: function(label, index) {
debugger;;
return label + ": " + data.series[index] + " / " + Math.round(data.series[index] / data.series.reduce(sum) * 100) + '%';
}
plugins: [
Chartist.plugins.tooltip({
currency: '<?php echo $this->config->item('currency_symbol'); ?>'
})
]
};
/* var responsiveOptions = [

3
bower.json
View File

@@ -39,7 +39,8 @@
"jquery.base64": "https://raw.githubusercontent.com/carlo/jquery-base64/master/jquery.base64.js",
"chartist": "^0.9.7",
"chartist-plugin-axistitle": "^0.1.0",
"chartist-plugin-pointlabels": "^0.0.4"
"chartist-plugin-pointlabels": "^0.0.4",
"chartist-plugin-tooltip": "https://github.com/Globegitter/chartist-plugin-tooltip/archive/master.zip"
},
"overrides": {
"bootswatch-dist": {

15
css/reports.css
View File

@@ -51,4 +51,19 @@
fill: rgba(0,0,0,1);
color: rgba(0,0,0,1);
font-size: 1.2rem;
}
.ct-tooltip-point
{
fill-opacity: 1!important;
stroke-width: 0px;
stroke: red;
transition: all 0.2s linear;
}
.ct-tooltip-point:hover
{
r: 7;
stroke-opacity: 0.2;
stroke-width: 20px;
}

4
dist/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

8
dist/opensourcepos.js vendored
View File

@@ -23639,6 +23639,14 @@ void 0!==g){var v={};v[l.units.pos+"1"]=r[l.units.pos],v[l.units.pos+"2"]=r[l.un
!function(a,b){"function"==typeof define&&define.amd?define([],function(){return a.returnExportsGlobal=b()}):"object"==typeof exports?module.exports=b():a["Chartist.plugins.ctPointLabels"]=b()}(this,function(){return function(a,b,c){"use strict";var d={labelClass:"ct-label",labelOffset:{x:0,y:-10},textAnchor:"middle",labelInterpolationFnc:c.noop};c.plugins=c.plugins||{},c.plugins.ctPointLabels=function(a){return a=c.extend({},d,a),function(b){b instanceof c.Line&&b.on("draw",function(b){"point"===b.type&&b.group.elem("text",{x:b.x+a.labelOffset.x,y:b.y+a.labelOffset.y,style:"text-anchor: "+a.textAnchor},a.labelClass).text(a.labelInterpolationFnc(void 0===b.value.x?b.value.y:b.value.x+", "+b.value.y))})}}}(window,document,Chartist),Chartist.plugins.ctPointLabels});
//# sourceMappingURL=chartist-plugin-pointlabels.min.js.map
/* chartist-plugin-pointlabels 0.0.12
* Copyright © 2016 Gion Kunz
* Free to use under the WTFPL license.
* http://www.wtfpl.net/
*/
!function(a,b){"function"==typeof define&&define.amd?define(["chartist"],function(c){return a.returnExportsGlobal=b(c)}):"object"==typeof exports?module.exports=b(require("chartist")):a["Chartist.plugins.tooltips"]=b(Chartist)}(this,function(a){return function(a,b,c){"use strict";function d(a){f(a,"tooltip-show")||(a.className=a.className+" tooltip-show")}function e(a){var b=new RegExp("tooltip-show\\s*","gi");a.className=a.className.replace(b,"").trim()}function f(a,b){return(" "+a.getAttribute("class")+" ").indexOf(" "+b+" ")>-1}function g(a,b){do a=a.nextSibling;while(a&&!f(a,b));return a}function h(a){return a.innerText||a.textContent}var i={currency:void 0,tooltipOffset:{x:0,y:-20},appendToBody:!1,"class":void 0,pointClass:"ct-point"};c.plugins=c.plugins||{},c.plugins.tooltip=function(a){return a=c.extend({},i,a),function(i){function j(a,b,c){m.addEventListener(a,function(a){b&&!f(a.target,b)||c(a)})}function k(b){o=o||n.offsetHeight,p=p||n.offsetWidth,a.appendToBody?(n.style.top=b.pageY-o+a.tooltipOffset.y+"px",n.style.left=b.pageX-p/2+a.tooltipOffset.x+"px"):(n.style.top=(b.layerY||b.offsetY)-o+a.tooltipOffset.y+"px",n.style.left=(b.layerX||b.offsetX)-p/2+a.tooltipOffset.x+"px")}var l=a.pointClass;i instanceof c.Bar?l="ct-bar":i instanceof c.Pie&&(l=i.options.donut?"ct-slice-donut":"ct-slice-pie");var m=i.container,n=m.querySelector(".chartist-tooltip");n||(n=b.createElement("div"),n.className=a["class"]?"chartist-tooltip "+a["class"]:"chartist-tooltip",a.appendToBody?b.body.appendChild(n):m.appendChild(n));var o=n.offsetHeight,p=n.offsetWidth;e(n),j("mouseover",l,function(e){var f=e.target,j="",l=i instanceof c.Pie?f:f.parentNode,m=l?f.parentNode.getAttribute("ct:meta")||f.parentNode.getAttribute("ct:series-name"):"",q=f.getAttribute("ct:meta")||m||"",r=!!q,s=f.getAttribute("ct:value");if(a.transformTooltipTextFnc&&"function"==typeof a.transformTooltipTextFnc&&(s=a.transformTooltipTextFnc(s)),a.tooltipFnc&&"function"==typeof a.tooltipFnc)j=a.tooltipFnc(q,s);else{if(a.metaIsHTML){var t=b.createElement("textarea");t.innerHTML=q,q=t.value}if(q='<span class="chartist-tooltip-meta">'+q+"</span>",r)j+=q+"<br>";else if(i instanceof c.Pie){var u=g(f,"ct-label");u&&(j+=h(u)+"<br>")}s&&(a.currency&&(s=a.currency+s.replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g,"$1,")),s='<span class="chartist-tooltip-value">'+s+"</span>",j+=s)}j&&(n.innerHTML=j,k(e),d(n),o=n.offsetHeight,p=n.offsetWidth)}),j("mouseout",l,function(){e(n)}),j("mousemove",null,function(a){k(a)})}}}(window,document,a),a.plugins.tooltips});
//# sourceMappingURL=chartist-plugin-tooltip.min.js.map
/*!
* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)
* Copyright 2012-2014 Arnold Daniels

6
dist/opensourcepos.min.css vendored
View File

File diff suppressed because one or more lines are too long

28
dist/opensourcepos.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
templates/spacelab/views/login.php
View File

@@ -6,7 +6,7 @@
<title>Open Source Point Of Sale <?php echo $this->lang->line('login_login'); ?></title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<!-- start css template tags -->
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/bootstrap.min.css?rel=9ed20b1ee8"/>
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/bootstrap.min.css?rel=50ab19585f"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/style.css"/>
<!-- end css template tags -->

6
templates/spacelab/views/partial/header.php
View File

@@ -57,14 +57,14 @@
<!--[if lte IE 8]>
<link rel="stylesheet" media="print" href="css/print.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/bootstrap.min.css?rel=9ed20b1ee8"/>
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/bootstrap.min.css?rel=50ab19585f"/>
<!-- start mincss template tags -->
<link rel="stylesheet" type="text/css" href="dist/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=a8e5525857"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=1e216cf720"/>
<!-- end mincss template tags -->
<link rel="stylesheet" type="text/css" href="templates/spacelab/css/style.css"/>
<!-- start minjs template tags -->
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=77957c6da1" language="javascript"></script>
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=f103e2cde8" language="javascript"></script>
<!-- end minjs template tags -->
<?php endif; ?>