blog
/
query-npm.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>查询npm包的下载量</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.global.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.js"></script>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/theme-chalk/index.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css"
    />
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-echarts/6.0.0-rc.4/index.umd.js"></script> -->
    <style>
      .query-form-item {
        width: 100% !important;
      }
      .device-info {
        position: absolute;
        bottom: 30px;
        color: #666;
        font-size: 12px;
      }

      @media only screen and (max-width: 960px) {
        body {
          background-color: #b59afe;
          color: black;
        }
      }
      @media only screen and (min-width: 960px) {
        body {
          background-color: bisque;
        }
      }
    </style>
  </head>

  <body oncontextmenu="return false">
    <div id="app">
      <span class="device-info">{{device.width}}x{{device.height}}</span>
      <h1>查询npm包的下载量</h1>
      <el-row :gutter="20">
        <el-col class="npm-query" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
          <el-form
            label-width="160px"
            label-position="right"
            :model="form"
            :rules="rules"
            ref="formRef"
          >
            <el-form-item prop="name">
              <span slot="label">
                要查询的包名
                <el-switch v-model="switchValue"></el-switch>
              </span>
              <el-select
                v-if="switchValue"
                v-model="form.name"
                class="query-form-item"
                clearable
              >
                <el-option
                  v-for="item in packageList"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
              <el-input
                v-else
                v-model.trim="form.name"
                class="query-form-item"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="时间范围" prop="timerange">
              <el-date-picker
                ref="datepickerRef"
                v-model="form.timerange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期"
                class="query-form-item"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="submit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col class="npm-chart" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
          <ve-histogram
            :data="chartData"
            :extend="hartExtend"
            :loading="loading"
          ></ve-histogram>
        </el-col>
      </el-row>
    </div>
    <script>
      window.onload = function () {
        console.log('load');
      };
      document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
      });
      const hartExtend = {
        legend: {
          show: false,
        },
        grid: {
          left: '5%',
          containLabel: true,
          top: '5%',
          bottom: '5%',
        },
        xAxis: {
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: 14,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'blue',
            },
          },
        },
        yAxis: {
          axisLabel: {
            textStyle: {
              color: '#000',
              fontSize: 14,
            },
          },
          splitLine: {
            show: true,
          },
          position: 'left',
          axisLine: {
            show: true,
            lineStyle: {
              color: 'blue',
            },
          },
        },
        series: {
          type: 'bar',
          itemStyle: {
            normal: {
              color: 'green',
            },
          },
        },
      };

      function queryFn(name, { range = 'last-month', type } = {}) {
        const api = 'https://api.npmjs.org/downloads';

        if (type === 'range') {
          return axios(`${api}/range/${range}/${name}`)
            .then(({ data }) => data)
            .catch(
              ({
                response: {
                  data: { error },
                },
              }) => error
            );
        }

        return axios(`${api}/point/${range}/${name}`)
          .then(({ data }) => data)
          .catch(
            ({
              response: {
                data: { error },
              },
            }) => error
          );
      }

      var app = new Vue({
        el: '#app',
        name: 'QueryNpmPackageDownload',
        data() {
          return {
            switchValue: true,
            hartExtend,
            form: {
              name: '@hubary/element-plugins',
              timerange: null,
            },
            packageList: [
              '@hubary/element-plugins',
              '@hubary/ftp-auto-upload',
              '@hubary/vue-cron-generator',
              '@hubary/utils',
              'vue',
            ],
            rules: {
              name: [
                {
                  required: true,
                  message: '包名不能为空',
                  trigger: ['change', 'blur'],
                },
              ],
              timerange: [
                {
                  required: true,
                  message: '请选择时间范围',
                  trigger: ['change', 'blur'],
                },
              ],
            },
            chartData: {
              columns: ['day', 'downloads'],
              rows: [],
            },
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
              shortcuts: [
                {
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    console.log(start, end);
                    picker.$emit('pick', [start, end]);
                  },
                },
                {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                  },
                },
                {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  },
                },
              ],
            },
            loading: false,
          };
        },

        computed: {
          device() {
            return {
              width: window.screen.width,
              height: window.screen.height,
            };
          },
        },
        mounted() {
          console.log('mounted');
          const defaultRange = (() => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return this.formatToValue([start, end]);
          })();
          console.log('formatToValue', defaultRange);
          this.form.timerange = defaultRange;
          this.submit();
        },
        methods: {
          formatToValue(range) {
            return this.$refs.datepickerRef.formatToValue(range);
          },
          submit() {
            this.$refs.formRef.validate((valid) => {
              if (valid) {
                const { name, timerange } = this.form;
                const search = {
                  range: timerange.join(':'),
                  type: 'range',
                };
                this.loading = true;
                queryFn(name, search)
                  .then((res) => {
                    console.log(res);
                    this.chartData.rows = res.downloads;
                  })
                  .catch((err) => {
                    console.log(err);
                  })
                  .finally(() => {
                    this.loading = false;
                  });
              }
            });
          },
        },
      });
      Vue.config.devtools = true;
    </script>
  </body>
</html>