Projekt

Allgemein

Profil

« Zurück | Weiter » 

Revision 961bd689

Von Bernd Bleßmann vor etwa 2 Jahren hinzugefügt

  • ID 961bd6899e73d135960a86617ee09501d156b540
  • Vorgänger 0cbda6c9
  • Nachfolger 3ed8f261

Kunden-/Lieferanten-Umsatzstatistik als Chart (chart.js)

Unterschiede anzeigen:

SL/Controller/CustomerVendor.pm
1221 1221

  
1222 1222
  $self->{template_args} ||= {};
1223 1223

  
1224
  $::request->{layout}->add_javascripts("$_.js") for qw (kivi.CustomerVendor kivi.File kivi.CustomerVendorTurnover ckeditor/ckeditor ckeditor/adapters/jquery follow_up);
1224
  $::request->{layout}->add_javascripts("$_.js") for qw (kivi.CustomerVendor kivi.File chart kivi.CustomerVendorTurnover ckeditor/ckeditor ckeditor/adapters/jquery follow_up);
1225 1225

  
1226 1226
  $self->_setup_form_action_bar;
1227 1227
}
SL/Controller/CustomerVendorTurnover.pm
8 8
use SL::DB::EmailJournal;
9 9
use SL::DB::Letter;
10 10
use SL::DB;
11
use SL::JSON qw(to_json);
11 12

  
12 13
__PACKAGE__->run_before('check_auth');
13 14

  
......
151 152
  ORDER BY $order_by
152 153
SQL
153 154
  $self->{turnover_statistic} = selectall_hashref_query($::form, $dbh, $query, $cv);
154
  $self->render('customer_vendor_turnover/count_turnover', { layout => 0 });
155

  
156
  if ($::request->type eq 'json') {
157
    $self->render(\ SL::JSON::to_json($self->{turnover_statistic}), { layout => 0, type => 'json', process => 0 });
158
  } else {
159
    $self->render('customer_vendor_turnover/count_turnover', { layout => 0 });
160
  }
155 161
}
156 162

  
157 163
sub action_get_invoices {
js/kivi.CustomerVendorTurnover.js
42 42
    $('#turnovers').load(url);
43 43
  };
44 44

  
45
  ns.show_turnover_chart = function(period) {
46
    const html = '<div class="chart-container" style="position: relative;">'
47
               + '<canvas id="chart"></canvas>'
48
               + '</div>';
49
    $('#turnovers').html(html);
50

  
51
    let mode = "month";
52
    if (period === 'y') {
53
      mode    = "year";
54
    } else if (period === 'm') {
55
      mode    = "month";
56
    }
57

  
58
    const data = { action: 'CustomerVendorTurnover/turnover.json',
59
                   id:   $('#cv_id').val(),
60
                   db:   $('#db').val(),
61
                   mode: mode
62
                 };
63
    $.getJSON('controller.pl', data, function( returned_data ) {
64
      ns.draw_chart(returned_data);
65
      $("html, body").animate({ scrollTop: $("#chart").offset().top }, "slow");
66
    });
67
  };
68

  
69
  ns.draw_chart = function(data) {
70
    // Todos are most probably better done in the perl backend.
71
    // Todo: fill holes
72
    // Todo: show amount/paid in one/each bar
73
    // data = [
74
    //   {date_part: 2022, netamount: 1234.4},
75
    //   {date_part: 2022, netamount: 234.4},
76
    //   {date_part: 2021, netamount: 234.4},
77
    //   {date_part: 2021, netamount: 34.4},
78
    //   {date_part: 2020, netamount: 134.4},
79
    //   {date_part: 2018, netamount: 34.4}
80
    // ];
81

  
82
    $(data).each(function(idx, elt) {
83
      elt.date_part = '' + elt.date_part;
84
    });
85

  
86
    ns.chart(data);
87
  };
88

  
89
  ns.chart = function(data) {
90
    const ctx = 'chart';
91
    const myChart = new Chart(ctx, {
92
      type: 'bar',
93
      data: {
94
        datasets: [{
95
          label: kivi.t8('Net.Turnover'),
96
          data: data,
97
          backgroundColor: [
98
            'rgba(255, 99, 132, 0.2)',
99
            'rgba(54, 162, 235, 0.2)',
100
            'rgba(255, 206, 86, 0.2)',
101
            'rgba(75, 192, 192, 0.2)',
102
            'rgba(153, 102, 255, 0.2)',
103
            'rgba(255, 159, 64, 0.2)'
104
          ],
105
          borderColor: [
106
            'rgba(255, 99, 132, 1)',
107
            'rgba(54, 162, 235, 1)',
108
            'rgba(255, 206, 86, 1)',
109
            'rgba(75, 192, 192, 1)',
110
            'rgba(153, 102, 255, 1)',
111
            'rgba(255, 159, 64, 1)'
112
          ],
113
          borderWidth: 1
114
        }]
115
      },
116
      options: {
117
        scales: {
118
          y: {
119
            beginAtZero: true
120
          }
121
        },
122
        parsing: {
123
          xAxisKey: 'date_part',
124
          yAxisKey: 'netamount'
125
        }
126
      }
127
    });
128
  };
129

  
130
  ns.sample_chart = function() {
131
    const ctx = 'chart';
132
    const myChart = new Chart(ctx, {
133
      type: 'bar',
134
      data: {
135
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
136
        datasets: [{
137
          label: '# of Votes',
138
          data: [12, 19, 3, 5, 2, 3],
139
          backgroundColor: [
140
            'rgba(255, 99, 132, 0.2)',
141
            'rgba(54, 162, 235, 0.2)',
142
            'rgba(255, 206, 86, 0.2)',
143
            'rgba(75, 192, 192, 0.2)',
144
            'rgba(153, 102, 255, 0.2)',
145
            'rgba(255, 159, 64, 0.2)'
146
          ],
147
          borderColor: [
148
            'rgba(255, 99, 132, 1)',
149
            'rgba(54, 162, 235, 1)',
150
            'rgba(255, 206, 86, 1)',
151
            'rgba(75, 192, 192, 1)',
152
            'rgba(153, 102, 255, 1)',
153
            'rgba(255, 159, 64, 1)'
154
          ],
155
          borderWidth: 1
156
        }]
157
      },
158
      options: {
159
        scales: {
160
          y: {
161
            beginAtZero: true
162
          }
163
        }
164
      }
165
    });
166
  };
167

  
45 168
  ns.cv_tabs_init = function () {
46 169
    $("#customer_vendor_tabs").on('tabsbeforeactivate', function(event, ui){
47 170
      if (ui.newPanel.attr('id') == 'quotations') {
js/locale/de.js
101 101
"Mon":"Mo",
102 102
"Monday":"Montag",
103 103
"More than one file selected, please set only one checkbox!":"Mehr als ein Element selektiert, bitte nur eine Box anklicken",
104
"Net.Turnover":"Netto Umsatz",
104 105
"Next month":"nächster Monat",
105 106
"No":"Nein",
106 107
"No article has been selected yet.":"Es wurde noch kein Artikel ausgewählt.",
js/locale/en.js
101 101
"Mon":"",
102 102
"Monday":"",
103 103
"More than one file selected, please set only one checkbox!":"",
104
"Net.Turnover":"",
104 105
"Next month":"",
105 106
"No":"",
106 107
"No article has been selected yet.":"",
locale/de/all
2225 2225
  'Monat'                       => 'Monat',
2226 2226
  'Monday'                      => 'Montag',
2227 2227
  'Month'                       => 'Monat',
2228
  'Month as chart'              => 'Monat als Grafik',
2228 2229
  'Month/Year'                  => 'Monat/Jahr',
2229 2230
  'Monthly'                     => 'monatlich',
2230 2231
  'More than one control file with the tag \'%s\' exist.' => 'Es gibt mehr als eine Kontrolldatei mit dem Tag \'%s\'.',
......
4477 4478
  'X'                           => 'X',
4478 4479
  'YYYY'                        => 'JJJJ',
4479 4480
  'Year'                        => 'Jahr',
4481
  'Year as chart'               => 'Jahr als Grafik',
4480 4482
  'Year-end bookings were successfully completed!' => 'Die Jahresabschlußbuchungen wurden erfolgreich durchgeführt!',
4481 4483
  'Year-end closing'            => 'Jahresabschluß',
4482 4484
  'Year-end date'               => 'Jahresabschlußdatum',
locale/en/all
2158 2158
  'Monat'                       => '',
2159 2159
  'Monday'                      => '',
2160 2160
  'Month'                       => '',
2161
  'Month as chart'              => '',
2161 2162
  'Month/Year'                  => '',
2162 2163
  'Monthly'                     => '',
2163 2164
  'More than one control file with the tag \'%s\' exist.' => '',
......
4346 4347
  'X'                           => '',
4347 4348
  'YYYY'                        => '',
4348 4349
  'Year'                        => '',
4350
  'Year as chart'               => '',
4349 4351
  'Year-end bookings were successfully completed!' => '',
4350 4352
  'Year-end closing'            => '',
4351 4353
  'Year-end date'               => '',
templates/webpages/customer_vendor_turnover/turnover_statistic.html
5 5
<p>
6 6
[% L.radio_button_tag('period', value='year', label= LxERP.t8('Year'), onclick='kivi.CustomerVendorTurnover.show_turnover_stat("y");') %]
7 7

  
8
[% L.radio_button_tag('period', value='year_chart', label= LxERP.t8('Year as chart'), onclick='kivi.CustomerVendorTurnover.show_turnover_chart("y");') %]
9

  
8 10
[% L.radio_button_tag('period', value='month', label= LxERP.t8('Month'), onclick='kivi.CustomerVendorTurnover.show_turnover_stat("m");') %]
11

  
12
[% L.radio_button_tag('period', value='month_chart', label= LxERP.t8('Month as chart'), onclick='kivi.CustomerVendorTurnover.show_turnover_chart("m");') %]
9 13
</p>
10 14
<div id="turnovers"></div>

Auch abrufbar als: Unified diff