mirror/opensourcepos
1
0
Fork 0
mirror of https://github.com/opensourcepos/opensourcepos.git synced 2026-07-13 08:22:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed charts responsiveness and Summary placement (#342)

Browse Source
This commit is contained in:
FrancescoUK
2016-05-26 10:36:25 +01:00
parent 9ae5957473
commit e9e5a3e475
9 changed files with 76 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,10 +66,10 @@
<!-- start mincss template tags -->
<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=1e216cf720"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=0b239f1487"/>
<!-- end mincss template tags -->
<!-- start minjs template tags -->
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=f103e2cde8" language="javascript"></script>
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=1ebdfe86c6" language="javascript"></script>
<!-- end minjs template tags -->
<?php endif; ?>

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

@@ -15,11 +15,12 @@
width: '100%',
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: '80%',
height: '100%',
// 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: 20
top: 20,
bottom: 100
},
// X-Axis specific configuration
@@ -91,6 +92,20 @@
})
]
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
height: '80%',
chartPadding: {
top: 20,
bottom: 0
},
}] /*,
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]*/
];
new Chartist.Bar('#chart1', data, options);
new Chartist.Bar('#chart1', data, options, responsiveOptions);
</script>

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

@@ -15,11 +15,12 @@
width: '100%',
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: '80%',
height: '100%',
// 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: 20
top: 20,
bottom: 100
},
// Set the bar chart to be horizontal
@@ -94,6 +95,20 @@
})
]
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
height: '80%',
chartPadding: {
top: 20,
bottom: 0
},
}] /*,
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]*/
];
new Chartist.Bar('#chart1', data, options);
new Chartist.Bar('#chart1', data, options, responsiveOptions);
</script>

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

@@ -15,7 +15,7 @@
width: '100%',
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: '80%',
height: '100%',
// Draw the line chart points
showPoint: true,
@@ -25,7 +25,8 @@
// 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: 20
top: 20,
bottom: 120
},
// X-Axis specific configuration
@@ -151,8 +152,22 @@
})
]
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
height: '80%',
chartPadding: {
top: 20,
bottom: 0
},
}] /*,
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]*/
];
chart = new Chartist.Line('#chart1', data, options);
chart = new Chartist.Line('#chart1', data, options, responsiveOptions);
chart.on('draw', function(data) {
// If the draw event was triggered from drawing a point on the line chart

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

@@ -12,15 +12,18 @@
width: '100%',
// Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
height: '80%',
height: '100%',
// 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: 20
top: 20,
bottom: 100
},
// This option can be set to 'inside', 'outside' or 'center'.
// show the labels on the border with the pie chart
labelPosition: 'outside',
labelDirection: 'explode',
plugins: [
Chartist.plugins.tooltip({
@@ -53,20 +56,19 @@
]
};
/* var responsiveOptions = [
var responsiveOptions = [
['screen and (min-width: 640px)', {
chartPadding: 30,
labelOffset: 100,
labelDirection: 'explode',
labelInterpolationFnc: function(value) {
return value;
}
}],
height: '80%',
chartPadding: {
top: 20,
bottom: 20
},
}] /*,
['screen and (min-width: 1024px)', {
labelOffset: 80,
chartPadding: 20
}]
];*/
}]*/
];
new Chartist.Pie('#chart1', data, options/*, responsiveOptions*/);
new Chartist.Pie('#chart1', data, options, responsiveOptions);
</script>

10
css/reports.css
View File

@@ -16,6 +16,7 @@
#report_summary
{
text-align: center;
margin-top: -100px;
}
#report_summary .summary_row
@@ -29,19 +30,10 @@
/* style chart X axis labels to be rotated of 60 degrees */
.ct-label.ct-horizontal
{
/* Safari */
-webkit-transform: rotate(-60deg);
/* Firefox */
-moz-transform: rotate(-60deg);
/* IE */
-ms-transform: rotate(-60deg);
/* Opera */
-o-transform: rotate(-60deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

2
dist/opensourcepos.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/opensourcepos.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

@@ -60,11 +60,11 @@
<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=1e216cf720"/>
<link rel="stylesheet" type="text/css" href="dist/opensourcepos.min.css?rel=0b239f1487"/>
<!-- 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=f103e2cde8" language="javascript"></script>
<script type="text/javascript" src="dist/opensourcepos.min.js?rel=1ebdfe86c6" language="javascript"></script>
<!-- end minjs template tags -->
<?php endif; ?>