Vuetify Basic

by rolence0515

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.16.6/vuetify.min.css">
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.0.5/cytoscape-cose-bilkent.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-card>
          <v-card-title>
            <h2>統計報告頁面</h2>
          </v-card-title>
          <v-card-text>
            <h3>習慣執行頻率：</h3>
            <v-data-table
              :headers="frequencyHeaders"
              :items="habitFrequency"
              :hide-default-footer="true"
            ></v-data-table>

            <h3>習慣持續性：</h3>
            <v-data-table
              :headers="consistencyHeaders"
              :items="habitConsistency"
              :hide-default-footer="true"
            ></v-data-table>

            <h3>目標達成率：</h3>
            <v-progress-linear v-model="goalAchievement" background-color="#e0e0e0" height="20"></v-progress-linear>
          </v-card-text>
        </v-card>
      </v-container>
    </v-content>
  </v-app>
</div>

CSS

#app {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data() {
    return {
      habitEvents: [ // 用戶執行習慣的事件列表
        { date: '2023-06-01', habit: '習慣1', executed: true },
        { date: '2023-06-05', habit: '習慣2', executed: false },
        { date: '2023-06-10', habit: '習慣1', executed: true },
        { date: '2023-06-15', habit: '習慣2', executed: true },
      ],
      frequencyHeaders: [
        { text: '日期', value: 'date' },
        { text: '執行次數', value: 'count' },
      ],
      consistencyHeaders: [
        { text: '習慣', value: 'habit' },
        { text: '持續天數', value: 'duration' },
      ],
      habitFrequency: [], // 習慣執行頻率統計數據
      habitConsistency: [], // 習慣持續性統計數據
      goalAchievement: 0, // 目標達成率
    };
  },
  mounted() {
    this.calculateHabitFrequency();
    this.calculateHabitConsistency();
    this.calculateGoalAchievement();
  },
  methods: {
    calculateHabitFrequency() {
      const frequencyMap = new Map();
      this.habitEvents.forEach(event => {
        const habit = event.habit;
        if (frequencyMap.has(habit)) {
          frequencyMap.set(habit, frequencyMap.get(habit) + 1);
        } else {
          frequencyMap.set(habit, 1);
        }
      });

      this.habitFrequency = Array.from(frequencyMap).map(([habit, count]) => ({ habit, count }));
    },
    calculateHabitConsistency() {
      const consistencyMap = new Map();
      this.habitEvents.forEach((event, index, events) => {
        const habit = event.habit;
        if (!consistencyMap.has(habit)) {
          consistencyMap.set(habit, { start: event.date, end: event.date });
        } else {
          const habitData = consistencyMap.get(habit);
          habitData.end = event.date;

          if (index === events.length - 1 || events[index + 1].habit !== habit) {
            const duration = this.calculateDuration(habitData.start, habitData.end);
            consistencyMap.set(habit, { ...habitData, duration });
          }
        }
      });

      this.habitConsistency =...