add basic stats

app/components/stats.hbs

@@ -0,0 +1,113 @@
+<div class="stats-wrapper">
+  {{#if this.removedToday}}
+  <div class="stat-card">
+    Rules removed today
+
+    <ul>
+    {{#each this.removedToday as |rule|}}
+    <li>
+      <LinkTo @route="rule" @model={{rule}}>{{rule}}</LinkTo>
+    </li>
+    {{/each}}
+    </ul>
+  </div>
+  {{/if}}
+
+  {{#if this.removedThisWeek}}
+  <div class="stat-card">
+    Rules removed this week
+
+    <ul>
+    {{#each this.removedThisWeek as |rule|}}
+    <li>
+      <LinkTo @route="rule" @model={{rule}}>{{rule}}</LinkTo>
+    </li>
+    {{/each}}
+    </ul>
+  </div>
+  {{/if}}
+
+
+  {{#if this.improvedToday}}
+  <div class="stat-card">
+  Biggest improver since yesterday
+  <ul>
+    <li>
+
+  <LinkTo @route="rule" @model={{this.improvedToday.rule}}>{{this.improvedToday.rule}}</LinkTo> which has improved by {{this.improvedToday.value}}
+    </li>
+  </ul>
+  </div>
+  {{/if}}
+
+  {{#if this.improvedThisWeek}}
+  <div class="stat-card">
+  Biggest improver this week:
+
+  <ul>
+    <li>
+
+ <LinkTo @route="rule" @model={{this.improvedThisWeek.rule}}>{{this.improvedThisWeek.rule}}</LinkTo> which has improved by {{this.improvedThisWeek.value}}
+    </li>
+  </ul>
+
+  </div>
+  {{/if}}
+</div>
+
+<div class="stats-wrapper">
+  {{#if this.newToday}}
+  <div class="stat-card">
+    New rules added since yesterday:
+
+    <ul>
+    {{#each this.newToday as |rule|}}
+    <LinkTo @route="rule" @model={{rule}}>{{rule}}</LinkTo>
+    {{/each}}
+    </ul>
+  </div>
+  {{/if}}
+
+
+  {{#if this.newThisWeek}}
+  <div class="stat-card">
+    New rules added this week:
+
+    <ul>
+    {{#each this.newThisWeek as |rule|}}
+    <LinkTo @route="rule" @model={{rule}}>{{rule}}</LinkTo>
+    {{/each}}
+    </ul>
+  </div>
+  {{/if}}
+
+  {{#if this.mostAddedToday}}
+  <div class="stat-card">
+  Rule with most files added since yesterday:
+
+  <ul>
+    <li>
+
+ <LinkTo @route="rule" @model={{this.mostAddedThisWeekrule}}>{{this.mostAddedThisWeek.rule}}</LinkTo> which added {{this.mostAddedToday.value}} files
+    </li>
+  </ul>
+
+
+  </div>
+  {{/if}}
+
+  {{#if this.mostAddedThisWeek}}
+  <div class="stat-card">
+  Rule with most files added this week:
+
+  <ul>
+    <li>
+
+ <LinkTo @route="rule" @model={{this.mostAddedThisWeek.rule}}>{{this.mostAddedThisWeek.rule}}</LinkTo> which added {{this.mostAddedThisWeek.value}} files
+    </li>
+  </ul>
+
+
+  </div>
+  {{/if}}
+</div>

app/components/stats.js

@@ -0,0 +1,114 @@
+import Component from '@glimmer/component';
+
+export default class Stats extends Component {
+  get improvedToday() {
+    let biggest;
+
+    for (let [rule, value] of Object.entries(this.args.data?.today?.changed)) {
+      if (value > 0) {
+        continue;
+      }
+      // removing trumps improvement
+      if (this.removedToday.has(rule)) {
+        continue;
+      }
+      // remember smaller numbers are bigger "improvmeents";
+      if (!biggest || value < biggest.value) {
+        biggest = { rule, value };
+      }
+    }
+    return biggest;
+  }
+
+  get improvedThisWeek() {
+    let biggest;
+
+    for (let [rule, value] of Object.entries(
+      this.args.data?.thisWeek?.changed,
+    )) {
+      if (
+        value > 0 ||
+        rule === this.improvedToday?.rule ||
+        value >= this.improvedToday?.value
+      ) {
+        continue;
+      }
+
+      // removing trumps improvement
+      if (this.removedThisWeek.has(rule)) {
+        continue;
+      }
+
+      // remember smaller numbers are bigger "improvmeents";
+      if (!biggest || value < biggest.value) {
+        biggest = { rule, value };
+      }
+    }
+
+    return biggest;
+  }
+
+  get mostAddedToday() {
+    let biggest;
+
+    for (let [rule, value] of Object.entries(this.args.data?.today?.changed)) {
+      if (value < 0) {
+        continue;
+      }
+      // new trumps added
+      if (this.newToday.has(rule)) {
+        continue;
+      }
+
+      if (!biggest || value > biggest.value) {
+        biggest = { rule, value };
+      }
+    }
+    return biggest;
+  }
+
+  get mostAddedThisWeek() {
+    let biggest;
+
+    for (let [rule, value] of Object.entries(
+      this.args.data?.thisWeek?.changed,
+    )) {
+      if (
+        value < 0 ||
+        rule === this.mostAddedToday?.rule ||
+        value <= this.mostAddedToday?.value
+      ) {
+        continue;
+      }
+
+      // new trumps added
+      if (this.newThisWeek.has(rule)) {
+        continue;
+      }
+
+      if (!biggest || value > biggest.value) {
+        biggest = { rule, value };
+      }
+    }
+
+    return biggest;
+  }
+
+  get newToday() {
+    return new Set(this.args.data?.today?.added);
+  }
+
+  get newThisWeek() {
+    return new Set(this.args.data.thisWeek.added).difference(this.newToday);
+  }
+
+  get removedToday() {
+    return new Set(this.args.data?.today?.removed);
+  }
+
+  get removedThisWeek() {
+    return new Set(this.args.data.thisWeek.removed).difference(
+      this.removedToday,
+    );
+  }
+}

app/routes/application.js

@@ -1,30 +1,98 @@
 /* eslint-disable prettier/prettier */
 import Route from '@ember/routing/route';
 import fetch from 'fetch';
+import { Temporal } from 'temporal-polyfill'
 
 import env from 'lint-to-the-future/config/environment';
 
 import timeSeries from 'lint-to-the-future/utils/time-series';
 
+function lengthOrValuOrZero(data) {
+  if(!data) {
+    return 0;
+  }
+  return data.length ?? data;
+}
+
+function compareData(data, today, past) {
+  const timeSeriesData = timeSeries(data);
+
+  let changed = {}
+  let removed = [];
+  let added = [];
+
+  for(let rule in timeSeriesData) {
+    let diff = lengthOrValuOrZero(timeSeriesData[rule][today]) - lengthOrValuOrZero(timeSeriesData[rule][past]);
+
+    if (diff !== 0 ) {
+      changed[rule] = diff;
+    }
+
+    if (!timeSeriesData[rule][today] && timeSeriesData[rule][past]) {
+      removed.push(rule);
+    }
+
+    if (timeSeriesData[rule][today] && !timeSeriesData[rule][past]) {
+      added.push(rule);
+    }
+  }
+  return {
+    changed,
+    removed,
+    added,
+  }
+}
+
 export default class ApplicationRoute extends Route {
   async model() {
     let data = await (await fetch(`${env.rootURL}data.json`)).json();
 
+    let allDates = Object.keys(data).sort((a, b) => b.localeCompare(a))
+
     let timeSeriesData =  timeSeries(data);
 
-    let highestDate;
+    const globalHighestDate = allDates[0];
+    const stats = {}
+
+    const today = Temporal.PlainDate.from(globalHighestDate);
+
+    // there is at least another date in the data
+    if (allDates[1]) {
+      const yesterday = Temporal.PlainDate.from(allDates[1]);
+      if (yesterday.until(today).days === 1) {
+        // there was a yesterday
+        stats.today = compareData({
+          [globalHighestDate]: data[globalHighestDate],
+          [allDates[1]]: data[allDates[1]]
+        }, globalHighestDate, allDates[1])
+      }
+
+      let lastWeek = yesterday;
+
+      for (let i = 2; i < allDates.length; i++) {
+        const currentDate = Temporal.PlainDate.from(allDates[i]);
+        if (currentDate.until(today).days > 7) {
+          break;
+        }
 
-    for (const rule in timeSeriesData) {
-      for (const date in timeSeriesData[rule]) {
-        if(!highestDate || highestDate < date) {
-          highestDate = date;
+        if (currentDate.until(lastWeek).days > 0) {
+          lastWeek = Temporal.PlainDate.from(currentDate)
         }
       }
+
+      // if we have a date that is bigger than yesterday but not bigger than 7 days ago
+      if (lastWeek !== yesterday) {
+        stats.thisWeek = compareData({
+          [globalHighestDate]: data[globalHighestDate],
+          [lastWeek.toString()]: data[lastWeek.toString()]
+        }, globalHighestDate, lastWeek.toString())
+      }
     }
 
     return {
       data: timeSeriesData,
-      highestDate,
+      highestDate: globalHighestDate,
+      stats,
     }
   }
 }

app/styles/app.css

@@ -20,10 +20,24 @@ a {
   color: black;
 }
 
+.stats-wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
+  grid-gap: 20px;
+  margin-bottom: 20px;
+}
+
+.stat-card {
+  background-color: white;
+  border-radius: var(--chart-border-radius);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+}
+
 .graphs {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(600px, 100%), 1fr));
-  grid-gap: 20px
+  grid-gap: 20px;
 }
 
 .lttf-chart {
@@ -102,9 +116,11 @@ details > .graphs {
   a {
     color: #FBBF24;
   }
-  .lttf-chart {
+
+  .lttf-chart, .stat-card {
     background-color: #16213E;
   }
+
   .chart-container .axis {
     fill: white !important;
   }

app/templates/index.hbs

@@ -1,3 +1,5 @@
+<Stats @data={{@model.stats}}/>
+
 <div class="graphs">
   {{#each-in this.rules.rulesToComplete as |key value|}}
     <Chart @rule={{key}} @data={{value}} @highestDate={{@model.highestDate}} />

package.json

@@ -37,7 +37,8 @@
     "commander": "^9.4.1",
     "fs-extra": "^7.0.1",
     "import-cwd": "^3.0.0",
-    "node-fetch": "^2.6.0"
+    "node-fetch": "^2.6.0",
+    "temporal-polyfill": "^0.2.5"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",