Make stats limit configurable

web/frontend/src/components/StatsPie.vue

@@ -1,14 +1,55 @@
 <template>
   <div class="stats-container" :class="containerClass">
-    <h2>{{ title() }}</h2>
+    <h2>
+      {{ title() }}
+      <b-icon :id="chartSettingsID()" icon="gear-fill"></b-icon>
+    </h2>
     <div class="chart-container">
       <canvas :id="chartID()" widht="400" height="400"></canvas>
     </div>
+    <b-popover
+      :target="chartSettingsID()"
+      triggers="click"
+      :show.sync="settingsShow"
+      placement="auto"
+      container="stats-container"
+      ref="popover"
+      @show="onShow"
+    >
+      <template #title>
+        <b-button @click="onClose" class="close" aria-label="Close">
+          <span class="d-inline-block" aria-hidden="true">&times;</span>
+        </b-button>
+        Settings
+      </template>
+
+      <div>
+        <b-form-group
+          label="Limit"
+          label-for="limitinput"
+          label-cols="3"
+          class="mb-1"
+          description="Limit number of items"
+          invalid-feedback="This field is required"
+        >
+          <b-form-input
+            ref="limitinput"
+            id="limitinput"
+            v-model="limitState"
+            type="number"
+            size="sm"
+          ></b-form-input>
+        </b-form-group>
+
+        <b-button @click="onClose" size="sm" variant="danger">Cancel</b-button>
+        <b-button @click="onOk" size="sm" variant="primary">Ok</b-button>
+      </div>
+    </b-popover>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { StatResult } from '@/apiary/apiary';
 import axios from 'axios';
 import Chart from 'chart.js/auto';
@@ -20,23 +61,31 @@ export type StatType = 'username' | 'password' | 'ip' | 'country' | 'total';
 export default class StatsPie extends Vue {
   @Prop() private statType!: StatType;
 
+  limit: number;
+
+  limitState: number;
+
+  settingsShow = false;
+
   stats: StatResult[];
 
   constructor() {
     super();
     this.stats = [];
+    this.limit = 10;
+    this.limitState = 10;
   }
 
   title(): string {
     switch (this.statType) {
       case 'password':
-        return 'Top 10 Passwords';
+        return `Top ${this.limit} Passwords`;
       case 'username':
-        return 'Top 10 Usernames';
+        return `Top ${this.limit} Usernames`;
       case 'ip':
-        return 'Top 10 IPs';
+        return `Top ${this.limit} IPs`;
       case 'country':
-        return 'Top 10 Countries';
+        return `Top ${this.limit} Countries`;
       case 'total':
         return 'Totals';
       // Why doesn't eslint know that this switch is exhaustive?
@@ -53,14 +102,48 @@ export default class StatsPie extends Vue {
     return `chart-${this.statType}`;
   }
 
-  mounted(): void {
-    const url = `/api/stats?type=${this.statType}&limit=10`;
+  chartSettingsID(): string {
+    return `chartsettings-${this.statType}`;
+  }
+
+  settingsID(): string {
+    return `settings-${this.statType}`;
+  }
+
+  onClose(): void {
+    this.settingsShow = false;
+  }
+
+  onOk(): void {
+    if (this.limitState) {
+      this.limit = this.limitState;
+      this.settingsShow = false;
+    }
+  }
+
+  onShow(): void {
+    // This is called just before the popover is shown
+    // Reset our popover form variables
+    this.limitState = this.limit;
+  }
+
+  @Watch('limit')
+  limitChanged(value: number, oldValue: number): void {
+    this.fetchData();
+  }
+
+  fetchData(): void {
+    const url = `/api/stats?type=${this.statType}&limit=${this.limit}`;
     axios.get<StatResult[]>(url).then((resp) => {
       this.stats = resp.data;
       this.renderPie();
     });
   }
 
+  mounted(): void {
+    this.fetchData();
+  }
+
   renderPie(): void {
     const elem = document.getElementById(this.chartID()) as HTMLCanvasElement;
     const ctx = elem.getContext('2d') as CanvasRenderingContext2D;
@@ -87,6 +170,9 @@ export default class StatsPie extends Vue {
 </script>
 
 <style lang="scss" scoped>
+.stats-container {
+  align-content: center;
+}
 .chart-container {
   max-width: 500px;
   max-height: 500px;