---
  name: sqmchange
  decscription: For each location min, mean, max for each date
  in_parameters:
    - year
      type: integer
    - region
      type: string

  out_parameters:
    - location
      type: string
    - mth
      type: integer
    - mmin
      type: float
    - mmean 
      type: float
    - mmax
      type: float
  
  dataservice:
    type: service
    name: RunPostgresQuery
    sql: "SELECT l.name as location, date_part('month', s.mdate) as mth, min(value) as mmin, avg(value) as mmean, max(value) as mmax from (
SELECT location, mdate, mpsas_1 as value from clearsky.mobilesqmreading
union all
SELECT location, mdate, mpsas_2 as value from clearsky.mobilesqmreading
union all
SELECT location, mdate, mpsas_3 as value from clearsky.mobilesqmreading
union all
SELECT location, mdate, mpsas_4 as value from clearsky.mobilesqmreading
union all
SELECT location, mdate, mpsas_5 as value from clearsky.mobilesqmreading) s right outer join
clearsky.location l on s.location = l.lid
where date_part('year', s.mdate) = ? and l.name like ?
group by l.lid, l.name, s.mdate 
order by l.lid, date_part('month', s.mdate)"

  renderservice:
    type: embedded
    html: "<div class="container">

  <div>
    <canvas id="trend" height=600px width=900px ></canvas>
  </div>
  
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    function checkOnClick( i ) {
      var chart = Chart.getChart('trend');
      var check = document.getElementById('ds' + i );
      chart.setDatasetVisibility(i, check.checked);
      chart.update();
    }
    const ctx = document.getElementById('trend');
    new Chart(ctx, {
      type: 'line',
      data: data,
      options: {
        responsive: true,
        plugins: {
          legend: {
            display: false
            }
        },
        title: {
          display: true,
          text: 'Mean MPSAS Change '
        } 
      }
  });
    
  </script>  
</div>"