<h1><a href="/"><img src="img/logo.png"></a>Spaced Repetition Flashcards</h1>
<div class="status">
<table>
<tr><th>New cards per day:</th
><td>
<span title="Long term average">{{newCardsLongTermAverage}}</span> /
<span title="Short term average">{{newCardsShortTermAverage}}</span> /
<span title="Today">{{newCardsToday}}</span></td></tr>
<tr><th>Cards:</th
><td><span title="Total">{{cardCounts.total}}</span> (
<span title="Unseen">{{cardCounts.unseen}}</span> /
<span title="Seen">{{cardCounts.seen}}</span> (
<span title="New">{{cardCounts.new}}</span> /
<span title="Learning">{{cardCounts.learning}}</span> /
<span title="Mature">{{cardCounts.mature}}</span> /
<span title="Mastered">{{cardCounts.mastered}}</span> ))</td></tr>
<tr><th>Percent correct:</th><td>{{percentCorrect}}%</td></tr>
<tr><th>Average time per review:</th><td>{{averageStudyTimePerReview}} (sec)</td></tr>
<tr><th>Cards today:</th
><td><span title="Cards reviewed today">{{cardsViewedToday}}</span> /
<span title="Cards due later today">{{dueCount}}</span></td></tr
><tr><th>Reviews per new card:</th><td><span title="Reviews until next new card">{{statsNext24Hours.reviewsToNextNew}}</span> / <span title="Minimum reviews between new cards">{{statsNext24Hours.minReviews}}</span></td></tr>
<tr><th>Study time today:</th><td>{{studyTimeToday}} (hh:mm:ss)</td></tr>
<tr><th>Average study time per day:</th><td>{{averageStudyTimePerDay}} (hh:mm:ss)</td></tr>
<tr><th>Time to earliest due card:</th><td>{{timeToNextDue}} (hh:mm:ss)</td></tr>
</table>
</div>
<div class="charts">

<h3>New Cards per day</h3>
<div id="newCardsPerDay" class="chart"></div>

<h3>Card Reviews per day</h3>
<div id="cardViewsPerDay" class="chart"></div>

<h3>Minutes of Study per day</h3>
<div id="minutesStudiedPerDay" class="chart"></div>

<h3>Percent Correct</h3>
<div id="percentCorrect" class="chart"></div>

<h3>Cards per Stage</h3>
<div id="cardsPerStage" class="chart"></div>

<h3>Cards Due per day</h3>
<div id="cardsDuePerDay" class="chart"></div>

<h3>Cards per interval</h3>
<div id="cardsPerInterval" class="chart"></div>

<div class="buttons">
<a href="/" class="default_action"><button>Home</button></a>
</div>
<script src="/js/plotly-latest.min.js" charset="utf-8"></script>
<script>
  let cardViewsPerDay = document.getElementById('cardViewsPerDay');
  if (cardViewsPerDay) {
    Plotly.newPlot(cardViewsPerDay,
      [ {{{json charts.chartCardViewsPerDay}}} ], {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'reviews', automargin: true },
        xaxis: { title: 'date', automargin: true }
      }
    );
  }

  let minutesStudiedPerDay = document.getElementById('minutesStudiedPerDay');
  if (minutesStudiedPerDay) {
    Plotly.newPlot(minutesStudiedPerDay,
      [ {{{json charts.chartMinutesStudiedPerDay}}} ], {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'min', automargin: true },
        xaxis: { title: 'date', automargin: true }
      }
    );
  }

  let percentCorrect = document.getElementById('percentCorrect');
  if (percentCorrect) {
    Plotly.newPlot(percentCorrect,
      [ {{{json charts.chartPercentCorrect}}} ], {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'percent', automargin: true },
        xaxis: { title: 'date', automargin: true }
      }
    );
  }

  let newCardsPerDay  = document.getElementById('newCardsPerDay');
  if (newCardsPerDay) {
    Plotly.newPlot(newCardsPerDay ,
      [ {{{json charts.chartNewCardsPerDay}}} ], {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'cards', automargin: true },
        xaxis: { title: 'date', automargin: true }
      }
    );
  }

  let cardsPerStage = document.getElementById('cardsPerStage');
  if (cardsPerStage) {
    const data = [
        {{{json charts.chartStageNew}}},
        {{{json charts.chartStageLearning}}},
        {{{json charts.chartStageMature}}},
        {{{json charts.chartStageMastered}}},
        {{{json charts.chartTotalCards}}},
    ];
    data[0].connectgaps = true;
    data[0].stackgroup = 0;
    data[0].name = 'new';
    data[1].stackgroup = 0;
    data[1].name = 'learning';
    data[2].stackgroup = 0;
    data[2].name = 'mature';
    data[3].stackgroup = 0;
    data[3].name = 'mastered';
    data[4].name = 'total';
    Plotly.newPlot(cardsPerStage,
      data, {
        showlegend: false,
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'cards', automargin: true },
        xaxis: { title: 'day', automargin: true },
      },
    );
  }

  let cardsDuePerDay = document.getElementById('cardsDuePerDay');
  if (cardsDuePerDay) {
    Plotly.newPlot(cardsDuePerDay,
      [ {{{json charts.chartCardsDuePerDay}}} ], {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'cards', automargin: true },
        xaxis: { title: 'day', automargin: true }
      }
    );
  }

  const intervalData = [
    {{{json charts.chartCardsPerLastInterval}}},
    {{{json charts.chartCardsPerInterval}}}
  ];
  intervalData[0].line = {
    color: 'rgb(185, 213, 232)'
  };
  intervalData[1].line = {
    color: 'rgb(31, 119, 180)'
  };
  let cardsPerInterval = document.getElementById('cardsPerInterval');
  if (cardsPerInterval) {
    Plotly.newPlot(cardsPerInterval,
      intervalData, {
        autosize: true,
        margin: {
          t: 10,
          b: 10,
          l: 10,
          r: 10
        },
        yaxis: { title: 'cards', automargin: true },
        xaxis: { title: 'days', automargin: true },
        legend: {
          orientation: 'h',
          x: 0.2,
          xanchor: 'left',
          y: 1.15
        }
      } 
    );
  }
</script>
