wip admin/estadisticas

components/TrendStats.vue

@@ -0,0 +1,141 @@
+<template>
+  <div v-if="values" :style="cssProps" class="trendChart">
+    <div class="data">
+      <div class="data-info">
+        <header>
+          <strong class="title">{{ name }}</strong>
+        </header>
+        <div class="period">
+          <span class="period-text">{{ info.month }}</span>
+        </div>
+        <strong class="value">{{ info.value }}</strong>
+      </div>
+      <div class="chart">
+        <ClientOnly>
+          <TrendChart
+            :datasets="[dataset]"
+            padding="5 0 0 5"
+            :min="0"
+            :interactive="true"
+            @mouse-move="onMouseMove"
+          />
+        </ClientOnly>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+    values: {
+      type: Array,
+      default: () => [],
+    },
+    color: {
+      type: String,
+      default: 'inherit',
+      required: false,
+    },
+  },
+
+  data() {
+    return {
+      currentInfo: null,
+      months: [
+        'Enero',
+        'Febrero',
+        'Marzo',
+        'Abril',
+        'Mayo',
+        'Junio',
+        'Julio',
+        'Agosto',
+        'Septiembre',
+        'Octubre',
+        'Noviembre',
+        'Diciembre',
+      ],
+    }
+  },
+  computed: {
+    dataset() {
+      return {
+        data: this.values,
+        showPoints: true,
+        fill: true,
+        smooth: true,
+      }
+    },
+    cssProps() {
+      return {
+        '--color': this.color,
+      }
+    },
+    info() {
+      return {
+        month: this.currentInfo ? this.currentInfo.month : 'Este mes',
+        value: this.currentInfo
+          ? this.currentInfo.value
+          : this.values[11].value,
+      }
+    },
+  },
+  methods: {
+    onMouseMove(params) {
+      if (params) {
+        this.currentInfo = {
+          month: this.months[params.data[0].month - 1],
+          value: params.data[0].value,
+        }
+      } else {
+        this.currentInfo = null
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.trendChart {
+  border-bottom: 2px solid rgba(var(--color), 0.2);
+  .title {
+    color: var(--color);
+  }
+  .data {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    .value {
+      font-size: 30px;
+    }
+    .chart {
+      width: 40%;
+    }
+  }
+  .stroke {
+    stroke-width: 2;
+    stroke: var(--color);
+  }
+  .fill {
+    opacity: 0.2;
+    fill: var(--color);
+  }
+  .active-line {
+    stroke: rgba(0, 0, 0, 0.2);
+  }
+  .point {
+    display: none;
+    fill: var(--color);
+    stroke: var(--color);
+  }
+  .point.is-active {
+    display: block;
+  }
+}
+</style>