lib/templates/html/cdf_uplift.html

{% autoescape off %}
<div class="chart"><canvas id="{{segment}}_{{metric}}_cdf_uplift"></canvas>
<button onclick="{{segment}}_{{metric}}_cdf_uplift_chart.resetZoom()">Reset Zoom</button>
</div>
<script>
  ctx = document.getElementById('{{segment}}_{{metric}}_cdf_uplift');

  data = {
      labels: {{quantiles}},
      datasets: [
{% for dataset in datasets %}
      {
          label: "{{dataset.branch}}",
          data: {{dataset.uplift}},
          borderWidth: 2
      },
{% endfor %}
      ]
  };

  var {{segment}}_{{metric}}_cdf_uplift_chart = new Chart(ctx, {
    type: 'line',
    data,
    options: {
      animation: false,
      responsive: true,
      plugins: {
          zoom: zoomOptions,
          datalabels: {
            display: function(context) {

              let num_visible = 0;
              for (let i =0 ; i < context.chart.data.datasets.length ; i++) {
                if (context.chart.isDatasetVisible(i)) {
                  num_visible++;
                  if (num_visible !== 1) {
                    return false;
                  } 
                }
              }

              const index = context.dataIndex;
              const labelValue = context.chart.data.labels[index];
              return (labelValue*100)%10 === 0 ? true : false;
            },
            anchor: 'end',
            align: 'top',
            formatter: n => Math.round(n)+"%"
          },
          annotation: {
              annotations: {
                  line: {
                      type: 'line',
                      yMin: 0,
                      yMax: 0,
                      borderWidth: 2,
                      borderColor: 'gray'
                    }
                }
          },
          legend: {
              display: true,
              position: 'top',
          },
          title: {
              display: true,
              text: ["{{metric}} cdf uplift", "segment: {{segment}}"]
          }
      },
      scales: {
        y: {
          suggestedMax: {{upliftMax}},
          suggestedMin: {{upliftMin}},
          beginAtZero: true,
          title: {
            text: "Uplift (%)",
            display: true
          }
        },
        x: {
          title: {
            text: "Quantile",
            display: true
          },
          ticks: {
            callback: function(val, index) {
              x = this.getLabelForValue(val);
              if (Math.round(x*100)%10===0) {
                  return x;
              }
            }
          }
        }
      },
      elements: {
        point:{
          radius: 1
        }
      }
    }
  });
</script>

<div class="chart"><canvas id="{{segment}}_{{metric}}_cdf_uplift_2"></canvas>
<button onclick="{{segment}}_{{metric}}_cdf_uplift_2_chart.resetZoom()">Reset Zoom</button>
</div>
<script>
  ctx = document.getElementById('{{segment}}_{{metric}}_cdf_uplift_2');

  data = {
      labels: {{quantiles}},
      datasets: [
{% for dataset in datasets %}
      {
          label: "{{dataset.branch}}",
          data: {{dataset.cdf_n}},
          borderWidth: 2
      },
{% endfor %}
      ]
  };

  var {{segment}}_{{metric}}_cdf_uplift_2_chart = new Chart(ctx, {
    type: 'line',
    data,
    options: {
      animation: false,
      responsive: true,
      plugins: {
          zoom: zoomOptions,
          datalabels: {
            display: function(context) {

              let num_visible = 0;
              for (let i =0 ; i < context.chart.data.datasets.length ; i++) {
                if (context.chart.isDatasetVisible(i)) {
                  num_visible++;
                  if (num_visible !== 1) {
                    return false;
                  } 
                }
              }

              const index = context.dataIndex;
              const labelValue = context.chart.data.labels[index];
              return (labelValue*100)%10 === 0 ? true : false;
            },
            anchor: 'end',
            align: 'top',
            formatter: n => Math.round(n)+"%"
          },
          annotation: {
              annotations: {
                  line: {
                      type: 'line',
                      yMin: 0,
                      yMax: 0,
                      borderWidth: 2,
                      borderColor: 'gray'
                    }
                }
          },
          legend: {
              display: true,
              position: 'top',
          },
          title: {
              display: true,
              text: ["{{metric}} cdf_n", "segment: {{segment}}"]
          }
      },
      scales: {
        y: {
          suggestedMax: {{upliftMax}},
          suggestedMin: {{upliftMin}},
          beginAtZero: true,
          title: {
            text: "Uplift (%)",
            display: true
          }
        },
        x: {
          title: {
            text: "Quantile",
            display: true
          },
          ticks: {
            callback: function(val, index) {
              x = this.getLabelForValue(val);
              if (Math.round(x*100)%10===0) {
                  return x;
              }
            }
          }
        }
      },
      elements: {
        point:{
          radius: 1
        }
      }
    }
  });
</script>
{% endautoescape %}