Revision 7059bbcd
Von Bernd Bleßmann vor fast 2 Jahren hinzugefügt
- ID 7059bbcd0fa6154b92d3b9a03c0e50533665b413
- Vorgänger b30b38df
| SL/ReportGenerator.pm | ||
|---|---|---|
| 55 | 55 |
'encoding' => 'UTF-8', |
| 56 | 56 |
}, |
| 57 | 57 |
'chart_export' => {
|
| 58 |
'assignment_x' => 'x',
|
|
| 59 |
'assignment_y' => 'y1',
|
|
| 58 |
'assignment_x' => '', |
|
| 59 |
'assignments_y' => [],
|
|
| 60 | 60 |
}, |
| 61 | 61 |
}; |
| 62 | 62 |
$self->{export} = {
|
| ... | ... | |
| 876 | 876 |
|
| 877 | 877 |
my $opts = $self->{options};
|
| 878 | 878 |
|
| 879 |
my $assignment_x = $opts->{chart_export}->{assignment_x};
|
|
| 880 |
my $assignment_y = $opts->{chart_export}->{assignment_y};
|
|
| 879 |
my $assignment_x = $opts->{chart_export}->{assignment_x};
|
|
| 880 |
my $assignments_y = $opts->{chart_export}->{assignments_y};
|
|
| 881 | 881 |
|
| 882 |
my @data_x;
|
|
| 883 |
my @data_y;
|
|
| 882 |
my @labels;
|
|
| 883 |
my @datasets;
|
|
| 884 | 884 |
foreach my $row_set (@{ $self->{data} }) {
|
| 885 | 885 |
next if ('ARRAY' ne ref $row_set);
|
| 886 | 886 |
foreach my $row (@{ $row_set }) {
|
| 887 |
my $x = $row->{$assignment_x}->{data}->[0];
|
|
| 888 |
my $y = $row->{$assignment_y}->{data}->[0];
|
|
| 889 |
if ($x) {
|
|
| 890 |
push @data_x, $x; |
|
| 891 |
push @data_y, $y//0; |
|
| 887 |
my $label = $row->{$assignment_x}->{data}->[0];
|
|
| 888 |
if ($label) {
|
|
| 889 |
push @labels, $label; |
|
| 890 |
|
|
| 891 |
my @set; |
|
| 892 |
foreach my $assignment_y (@$assignments_y) {
|
|
| 893 |
my $y = $row->{$assignment_y}->{data}->[0];
|
|
| 894 |
push @set, $y; |
|
| 895 |
} |
|
| 896 |
push @datasets, \@set; |
|
| 892 | 897 |
} |
| 893 | 898 |
} |
| 894 | 899 |
} |
| ... | ... | |
| 912 | 917 |
$::form->header; |
| 913 | 918 |
print $::form->parse_html_template('report_generator/chart_report',
|
| 914 | 919 |
{
|
| 915 |
data_x => to_json(\@data_x), |
|
| 916 |
data_y => to_json(\@data_y), |
|
| 917 |
label_x => $assignment_x, |
|
| 918 |
label_y => $assignment_y, |
|
| 920 |
labels => to_json(\@labels), |
|
| 921 |
datasets => to_json(\@datasets), |
|
| 922 |
data_labels => to_json($assignments_y), |
|
| 919 | 923 |
%$variables, |
| 920 | 924 |
} |
| 921 | 925 |
); |
| js/kivi.ChartReport.js | ||
|---|---|---|
| 3 | 3 |
|
| 4 | 4 |
ns.data = undefined; |
| 5 | 5 |
|
| 6 |
ns.background_colors = function() { return [
|
|
| 7 |
'rgba(255, 0, 0, 0.2)', |
|
| 8 |
'rgba(63, 0, 0, 0.2)', |
|
| 9 |
'rgba(0, 127, 0, 0.2)', |
|
| 10 |
'rgba(0, 0, 191, 0.2)', |
|
| 11 |
'rgba(191, 0, 0, 0.2)', |
|
| 12 |
'rgba(0, 255, 0, 0.2)', |
|
| 13 |
'rgba(0, 63, 0, 0.2)', |
|
| 14 |
'rgba(0, 0, 127, 0.2)', |
|
| 15 |
'rgba(127, 0, 0, 0.2)', |
|
| 16 |
'rgba(0, 191, 0, 0.2)', |
|
| 17 |
'rgba(0, 0, 255, 0.2)', |
|
| 18 |
'rgba(0, 0, 63, 0.2)' |
|
| 19 |
]}; |
|
| 20 |
|
|
| 21 |
ns.border_colors = function() { return [
|
|
| 22 |
'rgba(255, 0, 0, 1.0)', |
|
| 23 |
'rgba(63, 0, 0, 1.0)', |
|
| 24 |
'rgba(0, 127, 0, 1.0)', |
|
| 25 |
'rgba(0, 0, 191, 1.0)', |
|
| 26 |
'rgba(191, 0, 0, 1.0)', |
|
| 27 |
'rgba(0, 255, 0, 1.0)', |
|
| 28 |
'rgba(0, 63, 0, 1.0)', |
|
| 29 |
'rgba(0, 0, 127, 1.0)', |
|
| 30 |
'rgba(127, 0, 0, 1.0)', |
|
| 31 |
'rgba(0, 191, 0, 1.0)', |
|
| 32 |
'rgba(0, 0, 255, 1.0)', |
|
| 33 |
'rgba(0, 0, 63, 1.0)' |
|
| 34 |
]}; |
|
| 35 |
|
|
| 6 | 36 |
ns.chart = function() {
|
| 7 |
$(ns.data.data_y).each(function(idx) {ns.data.data_y[idx] = kivi.parse_amount('' + ns.data.data_y[idx]);});
|
|
| 8 |
console.log("bb: data_y (parsed): "); console.log(ns.data.data_y);
|
|
| 37 |
$(ns.data.datasets).each(function(idx, elt) {
|
|
| 38 |
$(elt).each(function(idx) {elt[idx] = kivi.parse_amount('' + elt[idx]);console.log(elt[idx]);});
|
|
| 39 |
}); |
|
| 40 |
|
|
| 41 |
const datasets = []; |
|
| 42 |
for (let i = 0; i < ns.data.data_labels.length; i++) {
|
|
| 43 |
const set = []; |
|
| 44 |
$(ns.data.datasets).each(function(idx, elt) {set.push(elt[i]);});
|
|
| 45 |
const colots = []; |
|
| 46 |
datasets.push({label: ns.data.data_labels[i],
|
|
| 47 |
data: set, |
|
| 48 |
backgroundColor: ns.background_colors()[i % ns.background_colors().length], |
|
| 49 |
borderColor: ns.border_colors()[i % ns.border_colors().length], |
|
| 50 |
borderWidth: 1 |
|
| 51 |
}); |
|
| 52 |
} |
|
| 9 | 53 |
|
| 10 | 54 |
const ctx = 'chart'; |
| 11 | 55 |
const chart = new Chart(ctx, {
|
| 12 | 56 |
type: 'bar', |
| 13 | 57 |
data: {
|
| 14 |
labels: ns.data.data_x, |
|
| 15 |
datasets: [{
|
|
| 16 |
label: ns.data.label_y, |
|
| 17 |
data: ns.data.data_y, |
|
| 18 |
backgroundColor: [ |
|
| 19 |
'rgba(255, 99, 132, 0.2)', |
|
| 20 |
'rgba(54, 162, 235, 0.2)', |
|
| 21 |
'rgba(255, 206, 86, 0.2)', |
|
| 22 |
'rgba(75, 192, 192, 0.2)', |
|
| 23 |
'rgba(153, 102, 255, 0.2)', |
|
| 24 |
'rgba(255, 159, 64, 0.2)' |
|
| 25 |
], |
|
| 26 |
borderColor: [ |
|
| 27 |
'rgba(255, 99, 132, 1)', |
|
| 28 |
'rgba(54, 162, 235, 1)', |
|
| 29 |
'rgba(255, 206, 86, 1)', |
|
| 30 |
'rgba(75, 192, 192, 1)', |
|
| 31 |
'rgba(153, 102, 255, 1)', |
|
| 32 |
'rgba(255, 159, 64, 1)' |
|
| 33 |
], |
|
| 34 |
borderWidth: 1 |
|
| 35 |
}] |
|
| 58 |
labels: ns.data.labels, |
|
| 59 |
datasets: datasets, |
|
| 36 | 60 |
}, |
| 37 | 61 |
options: {
|
| 38 | 62 |
scales: {
|
| ... | ... | |
| 45 | 69 |
}; |
| 46 | 70 |
|
| 47 | 71 |
ns.debug = function() {
|
| 48 |
console.log("bb: data_x: "); console.log(ns.data.data_x);
|
|
| 49 |
console.log("bb: data_y: "); console.log(ns.data.data_y);
|
|
| 50 |
console.log("bb: label_x: "); console.log(ns.data.label_x);
|
|
| 51 |
console.log("bb: label_y: "); console.log(ns.data.label_y);
|
|
| 72 |
console.log("bb: labels: "); console.log(ns.data.labels);
|
|
| 73 |
console.log("bb: datasets: "); console.log(ns.data.datasets);
|
|
| 74 |
console.log("bb: data_labels: "); console.log(ns.data.data_labels);
|
|
| 52 | 75 |
}; |
| 53 | 76 |
|
| 54 | 77 |
$(function() {
|
| templates/webpages/report_generator/chart_export_options.html | ||
|---|---|---|
| 1 | 1 |
[%- USE T8 %] |
| 2 | 2 |
[%- USE HTML %] |
| 3 | 3 |
[%- USE L %] |
| 4 |
[%- USE P %] |
|
| 5 |
[%- USE LxERP %] |
|
| 4 | 6 |
|
| 5 | 7 |
<h1>[% HTML.escape(title) %]</h1> |
| 6 | 8 |
|
| ... | ... | |
| 13 | 15 |
<input type="hidden" name="report_generator_chart_options_set" value="1"> |
| 14 | 16 |
<input type="hidden" name="report_generator_dispatch_to" value=""> |
| 15 | 17 |
|
| 16 |
<table> |
|
| 18 |
<table id="assigment_table">
|
|
| 17 | 19 |
<tr> |
| 18 | 20 |
<th valign="top" align="right">[% 'Chart assignments' | $T8 %]: [% 'X' | $T8 %]</th> |
| 19 | 21 |
<td> |
| ... | ... | |
| 24 | 26 |
title_key = 'text') %] |
| 25 | 27 |
</td> |
| 26 | 28 |
</tr> |
| 27 |
<tr>
|
|
| 29 |
<tr id="y_assignment_row">
|
|
| 28 | 30 |
<th valign="top" align="right">[% 'Chart assignments' | $T8 %]: [% 'Y' | $T8 %]</th> |
| 29 | 31 |
<td> |
| 30 |
[% L.select_tag('report_generator_chart_options_assignment_y',
|
|
| 32 |
[% L.select_tag('report_generator_chart_options_assignments_y[]',
|
|
| 31 | 33 |
fields, |
| 32 |
default = SELF.report_generator_chart_options_assignment_y |
|
| 33 | 34 |
value_key = 'name', |
| 34 | 35 |
title_key = 'text') %] |
| 36 |
[% P.link_tag('', "✘", class='remove_data_assignment interact cursor-pointer', onclick='remove_data_assignment(this)', style='display:none') %]
|
|
| 35 | 37 |
</td> |
| 36 |
</tr> |
|
| 38 |
</tr>
|
|
| 37 | 39 |
</table> |
| 38 | 40 |
|
| 41 |
[% L.button_tag('add_data_assignement()', LxERP.t8('Add row')) %]
|
|
| 42 |
|
|
| 39 | 43 |
[%- IF CONTROLLER_DISPATCH %] |
| 40 | 44 |
<input type="hidden" name="CONTROLLER_DISPATCH" value="[% CONTROLLER_DISPATCH | html %]"> |
| 41 | 45 |
[%- ELSE %] |
| ... | ... | |
| 44 | 48 |
|
| 45 | 49 |
|
| 46 | 50 |
</form> |
| 51 |
|
|
| 52 |
<script type="text/javascript"> |
|
| 53 |
<!-- |
|
| 54 |
function add_data_assignement() {
|
|
| 55 |
const new_row = $('#y_assignment_row').clone();
|
|
| 56 |
new_row.removeAttr('id');
|
|
| 57 |
new_row.find('a').show();
|
|
| 58 |
new_row.find('*').removeAttr('id');
|
|
| 59 |
new_row.appendTo("#assigment_table");
|
|
| 60 |
} |
|
| 61 |
function remove_data_assignment(clicked) {
|
|
| 62 |
$(clicked).closest('tr').remove();
|
|
| 63 |
} |
|
| 64 |
--> |
|
| 65 |
</script> |
|
| templates/webpages/report_generator/chart_report.html | ||
|---|---|---|
| 22 | 22 |
|
| 23 | 23 |
|
| 24 | 24 |
<script> |
| 25 |
kivi.ChartReport.data = { data_x: [% data_x %],
|
|
| 26 |
data_y: [% data_y %], |
|
| 27 |
label_y: "[% label_y %]", |
|
| 28 |
label_x: "[% label_x %]" |
|
| 25 |
kivi.ChartReport.data = { labels: [% labels %],
|
|
| 26 |
datasets: [% datasets %], |
|
| 27 |
data_labels: [% data_labels %], |
|
| 29 | 28 |
}; |
| 30 | 29 |
</script> |
Auch abrufbar als: Unified diff
Reports als Chart: mehrere Y-Werte