legend.html

<div
  class="legend"
>
  <div class="date" v-if="interval > 1">
    {{formatInterval(date)}}
  </div>
  <div class="date" v-else>
    {{date | formatDate('dddd MMMM Do, YYYY')}}
  </div>
  <table class="modules">
    <tbody
      @mouseover="handleMouseEnterLegend()"
      @mouseleave="handleMouseLeaveLegend()"
    >
      <tr
        class="module"
        v-for="module in sortedModules"
        track-by="name"
        :style="{color: module.color}"
        @mouseover="handleMouseEnterPackage(module.name)"
        @mouseleave="handleMouseLeavePackage(module.name)"
      >
        <td class="actions">
          <button class="remove-entry-button" @click="removePackage(module.name)" :title="`remove '${module.name}' from comparison`">
            <div class="nub" :style="{ '--module-color': module.color }"></div>
          </button>
        </td>
        <td class="name-wrapper">
          <div class="name">
            {{module.name}}
          </div>
        </td>
        <td class="downloads" style="min-width: 4.5em;">
          {{module.downloads.toLocaleString()}}
        </td>
      </tr>
    </tbody>
  </table>
</div>