File indexing completed on 2025-05-04 05:29:31

 <?php
 /**
  *  ocs-webserver
  *
  *  Copyright 2016 by pling GmbH.
  *
  *    This file is part of ocs-webserver.
  *
  *    This program is free software: you can redistribute it and/or modify
  *    it under the terms of the GNU Affero General Public License as
  *    published by the Free Software Foundation, either version 3 of the
  *    License, or (at your option) any later version.
  *
  *    This program is distributed in the hope that it will be useful,
  *    but WITHOUT ANY WARRANTY; without even the implied warranty of
  *    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  *    GNU Affero General Public License for more details.
  *
  *    You should have received a copy of the GNU Affero General Public License
  *    along with this program.  If not, see <http://www.gnu.org/licenses/>.
  **/
 
 $this->tab = 'payouthistory2';
 $this->countDownloadsOverall = 0;
 
 ?>
 <style type="text/css">
     .chart-wrapper {
     max-width: 950px;
     min-width: 804px;
     margin: 0 auto;
     background-color: #FAF7F7;
 }
 
 .chart-wrapper .inner-wrapper {
     position: relative;
     padding-bottom: 50%;
     width: 100%;
 }
 
 .chart-wrapper .outer-box {
     position: absolute;
     top: 0; bottom: 0; left: 0; right: 0;
 }
 
 .chart-wrapper .inner-box {
     width: 100%;
     height: 100%;
 }
 
 .chart-wrapper text {
   font-family: sans-serif;
   font-size: 11px;
 }
 
 .chart-wrapper p {
     font-size: 16px;
     margin-top:5px;
     margin-bottom: 40px;
 }
 
 .chart-wrapper .axis path,
 .chart-wrapper .axis line {
     fill: none;
     stroke: #1F1F2E;
     stroke-opacity: 0.7;
     shape-rendering: crispEdges;
 
 }
 .chart-wrapper .axis path {
   stroke-width: 2px;
 }
 
 .chart-wrapper .line {
   fill: none;
   stroke: steelblue;
   stroke-width: 5px;
 }
 
 .chart-wrapper .legend  {
     min-width: 200px;
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
     font-size: 16px;
     padding: 10px 40px;
 }
 .chart-wrapper .legend > div {
     margin: 0px 25px 10px 0px;
     flex-grow: 0;
 }
 .chart-wrapper .legend p {
     display:inline;
     font-size: 0.8em;
     font-family: sans-serif;
     font-weight: 600;
 }
 .chart-wrapper .legend .series-marker {
     height: 1em;
     width: 1em;
     border-radius: 35%;
     background-color: crimson;
     display: inline-block;
     margin-right: 4px;
     margin-bottom: -0.16rem;
 }
 
 .chart-wrapper .overlay {
   fill: none;
   pointer-events: all;
 }
 
 .chart-wrapper .focus circle {
   fill: crimson;
   stroke: crimson;
   stroke-width: 2px;
   fill-opacity: 15%;
 }
 .chart-wrapper .focus rect {
     fill: lightblue;
     opacity: 0.4;
     border-radius: 2px;
 }
 .chart-wrapper .focus.line {
     stroke: steelblue;
     stroke-dasharray: 2,5;
     stroke-width: 2;
     opacity: 0.5;
 }
 @media (max-width:500px){
     .chart-wrapper .line {stroke-width: 3px;}
     .chart-wrapper .legend {font-size: 14px;}
 }
 
 
 /* Style the dots by assigning a fill and stroke */
 .dot {
     fill: #2185D0;
     stroke: #fff;
 }
 /* Style the dots by assigning a fill and stroke */
 .dotRed {
     fill: #ffab00;
     stroke: #fff;
 }
 .dotRed
 </style>
 
 
 <main class="user-admin-page">
     <?php echo $this->render('user/partials/userHeader_top.phtml'); ?>
     <section class="body-wrap">
         <section class="wrapper product-page">
             <!-- PAGE BODY -->
             <section class="my-products-page">
                 <!-- NAVIGATION -->
                 <?php echo $this->render('user/partials/userHeader.phtml'); ?>
                 <!-- /NAVIGATION -->
                 <div class="my-products-heading" style="border-bottom: none; padding-bottom: 0px;">
                     <h1 class="page-title left"><?= $this->translate('Payout History') ?></h1>
               
                 </div>
                 
             <div class="my-payouthistory-list" id="my-payouthistory-list">
                 <div id="payouthistorycontainer" class="chart-wrapper" style=" height: 100%; display: block; clear: both ">
 
                 </div>
 
             </div>
             <!-- /PAGE BODY -->
         </section>
         </section>
     </section>
 </main>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="/theme/flatui/js/lib/multiline_payout.js"></script>
 <script type="text/javascript">
     var dataset = <?php echo Zend_Json::encode($this->payouthistory2);?>;
     $(document).ready(function () {
             !(function (d3) {               
                  var parseTime = d3.timeParse("%Y%m");
                if(!dataset){
                      $("#my-payouthistory-list").text('no data found!');
                     return;
                 }
 
                 dataset.forEach(function (d) {                   
                    d.year = parseTime(d.yearmonth);
                    // d.year = d.yearmonth;
                    d.amount = +d.amount;                       
                 });                    
                 var chartColumns ={
                     'Payout Monthly': {column: 'amount'}                       
                 };
                                  
                 var chart = makeLineChart(dataset, 'year',chartColumns , {xAxis: 'Month', yAxis: 'Amount'});
                 
                 chart.bind("#payouthistorycontainer");
                 chart.render();
               
             })(d3);
 
     });
     
 
 </script>