Net Progress <mv-net-progress>

node scripts/add.mjs net-progress --out ./src/marvelous

<div id="np-demo" style="width:min(100%,64rem);margin-inline:auto">
  <style>
    #np-demo { display:grid; gap:1.75rem }
    #np-demo .npd-col { display:grid; gap:.75rem; min-width:0; align-content:start }
    #np-demo .npd-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem }
    #np-demo .npd-bar h3 { margin:0; font-size:1.0625rem; letter-spacing:-.01em }
    #np-demo .npd-bar p { margin:.125rem 0 0; color:var(--mv-fg-muted); font-size:.8125rem }
    #np-demo .npd-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem }
    #np-demo .npd-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; align-items:start }
    #np-demo .npd-log { display:flex; align-items:center; gap:.5rem; min-width:0; color:var(--mv-fg-muted); font-size:.75rem }
    #np-demo .npd-log span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
    @media (max-width:52rem) { #np-demo .npd-row { grid-template-columns:minmax(0,1fr) } }
  </style>

  <!-- A product spec: words written vs words still there after 14 days -->
  <section class="npd-col" aria-labelledby="npd-spec-h">
    <div class="npd-bar">
      <div>
        <h3 id="npd-spec-h">Checkout 2.0 launch spec</h3>
        <p>Shared product doc · 5 editors · a take-back within 14 days counts as churn</p>
      </div>
      <div class="npd-actions">
        <mv-segmented id="npd-period" aria-label="Group by" value="week">
          <button value="week">Weeks</button>
          <button value="day">Days</button>
        </mv-segmented>
        <label class="mv-choice" data-control="end">
          <input type="checkbox" role="switch" class="mv-switch" id="npd-expect">
          <span class="mv-choice-text"><span class="mv-choice-title">Plan says converge</span></span>
        </label>
        <button class="mv-button" data-variant="outline" data-size="sm" type="button" id="npd-revert">Change pricing back to $59/mo</button>
      </div>
    </div>
    <mv-net-progress id="npd-spec" label="Checkout 2.0 launch spec" unit="word|words" window="14d">
      <script type="application/json" data-events>[
        {"at":"-52d","area":"overview","added":900},
        {"at":"-51d","area":"onboarding","added":1400},
        {"at":"-49d","area":"pricing","added":500,"version":"$49/mo"},
        {"at":"-45d","area":"onboarding","removed":900,"added":1200},
        {"at":"-43d","area":"overview","removed":300,"added":350},
        {"at":"-41d","area":"pricing","removed":350,"added":420,"version":"$59/mo"},
        {"at":"-38d","area":"onboarding","removed":800,"added":900},
        {"at":"-37d","area":"api","added":700,"version":"1,000 req/min"},
        {"at":"-35d","area":"pricing","removed":380,"added":400,"version":"$49/mo"},
        {"at":"-31d","area":"onboarding","removed":500,"added":600},
        {"at":"-29d","area":"api","removed":300,"added":350,"version":"600 req/min"},
        {"at":"-27d","area":"pricing","removed":300,"added":320,"version":"$59/mo"},
        {"at":"-24d","area":"onboarding","removed":250,"added":400},
        {"at":"-23d","area":"security","added":800},
        {"at":"-21d","area":"api","removed":200,"added":260,"version":"1,000 req/min"},
        {"at":"-17d","area":"security","removed":150,"added":300},
        {"at":"-16d","area":"onboarding","removed":120,"added":250},
        {"at":"-15d","area":"pricing","removed":280,"added":300,"version":"$49/mo"},
        {"at":"-13d","area":"glossary","added":300},
        {"at":"-14d","area":"security","removed":120,"added":90},
        {"at":"-10d","area":"security","removed":80,"added":450},
        {"at":"-9d","area":"onboarding","removed":40,"added":200},
        {"at":"-8d","area":"overview","added":150},
        {"at":"-7d","area":"security","removed":110},
        {"at":"-6d","area":"api","added":120},
        {"at":"-3d","area":"security","removed":30,"added":380},
        {"at":"-2d","area":"onboarding","added":160},
        {"at":"-1d","area":"overview","removed":20,"added":120},
        {"at":"-1d","area":"onboarding","removed":70},
        {"at":"-8h","area":"security","removed":90,"added":40},
        {"at":"-2h","area":"pricing","added":90}
      ]</script>
      <script type="application/json" data-areas>[
        {"id":"overview","label":"Overview & goals","href":"#spec-overview"},
        {"id":"onboarding","label":"Onboarding flow","href":"#spec-onboarding"},
        {"id":"pricing","label":"Pricing & plans","href":"#spec-pricing"},
        {"id":"api","label":"API rate limits","href":"#spec-api"},
        {"id":"security","label":"Security review","href":"#spec-security"},
        {"id":"glossary","label":"Glossary","href":"#spec-glossary"}
      ]</script>
    </mv-net-progress>
    <div class="npd-log" aria-hidden="true"><span class="mv-badge" data-variant="secondary" data-shape="pill" id="npd-event">event</span><span id="npd-last">Pick a week, or an area in “Most rework”…</span></div>
  </section>

  <div class="npd-row">
    <!-- A sprint backlog: tickets closed vs tickets that stayed closed -->
    <section class="npd-col" aria-labelledby="npd-bl-h">
      <div class="npd-bar"><div><h3 id="npd-bl-h">Payments team backlog</h3><p>Compact · reopened tickets count against the week they were closed</p></div></div>
      <mv-net-progress variant="compact" label="Sprint tickets" unit="ticket|tickets" gross-label="Closed" net-label="Stayed closed" net-verb="stayed closed" window="21d">
        <script type="application/json" data-events>[
          {"at":"-51d","area":"checkout","added":9},
          {"at":"-49d","area":"search","added":6},
          {"at":"-48d","area":"notifications","added":4},
          {"at":"-44d","area":"checkout","reopened":4,"added":7},
          {"at":"-43d","area":"search","reopened":2,"added":5},
          {"at":"-41d","area":"billing","added":6},
          {"at":"-38d","area":"checkout","reopened":3,"added":8},
          {"at":"-36d","area":"billing","reopened":3,"added":5},
          {"at":"-35d","area":"search","added":4},
          {"at":"-30d","area":"checkout","reopened":4,"added":6},
          {"at":"-29d","area":"notifications","reopened":1,"added":5},
          {"at":"-27d","area":"billing","reopened":2,"added":4},
          {"at":"-24d","area":"checkout","reopened":3,"added":7},
          {"at":"-22d","area":"search","reopened":1,"added":6},
          {"at":"-20d","area":"billing","added":5},
          {"at":"-16d","area":"checkout","reopened":4,"added":6},
          {"at":"-14d","area":"notifications","added":5},
          {"at":"-13d","area":"search","reopened":2,"added":4},
          {"at":"-10d","area":"checkout","reopened":3,"added":8},
          {"at":"-8d","area":"billing","reopened":2,"added":6},
          {"at":"-7d","area":"search","added":5},
          {"at":"-3d","area":"checkout","reopened":4,"added":5},
          {"at":"-2d","area":"search","added":4},
          {"at":"-1d","area":"notifications","added":3},
          {"at":"-6h","area":"checkout","reopened":3}
        ]</script>
        <script type="application/json" data-areas>[
          {"id":"checkout","label":"Checkout"},
          {"id":"search","label":"Search"},
          {"id":"billing","label":"Billing"},
          {"id":"notifications","label":"Notifications"}
        ]</script>
      </mv-net-progress>
    </section>

    <!-- A codebase, from pre-computed analytics: lines added vs still there after 21 days -->
    <section class="npd-col" aria-labelledby="npd-code-h">
      <div class="npd-bar"><div><h3 id="npd-code-h">checkout-service repository</h3><p>Compact · pre-computed periods · lines still there after 21 days</p></div></div>
      <mv-net-progress variant="compact" label="Lines of code" unit="line|lines" gross-label="Added" net-label="Still there" net-verb="are still there">
        <script type="application/json" data-periods>[
          {"start":"-52d","gross":3120,"net":1480},
          {"start":"-45d","gross":2840,"net":1620},
          {"start":"-38d","gross":3400,"net":2050},
          {"start":"-31d","gross":2600,"net":1790},
          {"start":"-24d","gross":2950,"net":2240},
          {"start":"-17d","gross":2210,"net":1810,"state":"settling"},
          {"start":"-10d","gross":1980,"net":1700,"state":"settling"},
          {"start":"-3d","gross":1460,"net":1350}
        ]</script>
      </mv-net-progress>
    </section>
  </div>

  <script type="module">
    const spec = document.getElementById("npd-spec");
    await customElements.whenDefined("mv-net-progress");
    const $ = (id) => document.getElementById(id);
    const log = (name, text) => { $("npd-event").textContent = name; $("npd-last").textContent = text; };

    spec.addEventListener("mv-period-change", (e) => log("mv-period-change", `${e.detail.period.name}: ${e.detail.period.gross.toLocaleString("en-US")} written, ${e.detail.period.net.toLocaleString("en-US")} kept`));
    spec.addEventListener("mv-churn-select", (e) => {
      const d = e.detail;
      if (d.action === "open") {
        e.preventDefault(); // the app would scroll to or open that section
        log("mv-churn-select", `Open “${d.label}” (${d.changedBack} changes back, ${Math.round(d.ratio * 100)}% taken back)`);
      } else log("mv-churn-select", d.id ? `Filter to “${d.label}”` : "Show all areas");
    });

    $("npd-period").addEventListener("mv-change", (e) => {
      const day = e.detail.value === "day";
      spec.limit = day ? 14 : 8;
      spec.period = day ? "day" : "week";
    });
    $("npd-expect").addEventListener("change", (e) => { spec.expect = e.target.checked ? "converge" : null; });

    let next = "$59/mo";
    $("npd-revert").addEventListener("click", (e) => {
      spec.addEvents({ at: new Date(), area: "pricing", removed: 300, added: 300, version: next });
      log("addEvents", `Pricing & plans changed back to ${next}`);
      next = next === "$59/mo" ? "$49/mo" : "$59/mo";
      e.currentTarget.textContent = `Change pricing back to ${next}`;
    });
  </script>
</div>