npmcharts.com/packages/frontend/src/graph/legend/legend.vue at 53a6555b2193c897e43da37af52a638972cd4111 · cheapsteak/npmcharts.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<template>
  <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="removePackageByName(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>
</template>

<script>
import _ from 'lodash';
import {
  isSameMonth,
  format as formatDate,
  addDays,
  isSameYear,
} from 'date-fns';

export default {
  props: {
    modules: Array,
    date: Date,
    interval: Number,
  },
  computed: {
    sortedModules() {
      return _.orderBy(this.modules, module => module.entries, ['desc']);
    },
  },
  inject: ['removePackage'],
  methods: {
    removePackageByName(packageName) {
      ga('send', 'event', 'legend', 'remove', packageName);
      this.removePackage(packageName);
      this.$emit('legend-blur');
    },
    handleMouseEnterLegend() {
      this.$emit('legend-focus');
    },
    handleMouseLeaveLegend() {
      this.$emit('legend-blur');
    },
    handleMouseEnterPackage(packageName) {
      this.$emit('package-focus', packageName);
    },
    handleMouseLeavePackage(packageName) {
      this.$emit('package-blur', packageName);
    },
    formatInterval(startOfPeriod) {
      const endOfPeriod = addDays(startOfPeriod, this.interval - 1);
      if (isSameMonth(startOfPeriod, endOfPeriod)) {
        return `${formatDate(startOfPeriod, 'MMMM Do')} - ${formatDate(
          endOfPeriod,
          'Do',
        )}, ${formatDate(startOfPeriod, 'YYYY')}`;
      } else if (isSameYear(startOfPeriod, endOfPeriod)) {
        return `${formatDate(startOfPeriod, 'MMMM Do')} - ${formatDate(
          endOfPeriod,
          'MMMM Do',
        )}, ${formatDate(startOfPeriod, 'YYYY')}`;
      }
      return `${formatDate(startOfPeriod, 'MMMM Do, YYYY')} - ${formatDate(
        endOfPeriod,
        'MMMM Do, YYYY',
      )}`;
    },
  },
};
</script>