overview and first part of detailed

src/views/size/App.vue

@@ -6,6 +6,61 @@
         <SizeFilter />
         <div v-if="isOverviewEnabled">
           <Overview />
+          <ProgressBar
+            name="D/IRAM"
+            :usedData="overviewData.used_diram"
+            :usedRatioData="overviewData.used_diram_ratio"
+            :totalData="overviewData.diram_total"
+            v-if="overviewData.diram_total"
+          />
+          <ProgressBar
+            name="DRAM"
+            :usedData="overviewData.used_dram"
+            :usedRatioData="overviewData.used_dram_ratio"
+            :totalData="overviewData.dram_total"
+            v-if="overviewData.dram_total"
+          />
+          <ProgressBar
+            name="IRAM"
+            :usedData="overviewData.used_iram"
+            :usedRatioData="overviewData.used_iram_ratio"
+            :totalData="overviewData.iram_total"
+            v-if="overviewData.iram_total"
+          />
+        </div>
+        <div v-else>
+          <div class="field">
+            <p class="control has-icons-right">
+              <input
+                class="input"
+                type="text"
+                placeholder="Search"
+                v-model="searchText"
+              />
+              <span class="icon is-right">
+                <iconify-icon icon="search" />
+              </span>
+            </p>
+          </div>
+          <div
+            v-for="(archiveInfo, archiveName) in filteredArchives"
+            :key="archiveName"
+            class="notification is-clipped"
+          >
+            <ArchiveItem
+              :archiveInfo="archiveInfo"
+              :archiveName="archiveName"
+            />
+            <div
+              class="columns"
+              style="overflow: auto;"
+              v-if="archiveInfo.files && archiveInfo.isFileInfoVisible"
+            >
+              <div class="column">
+                <FileTable :archiveInfo="archiveInfo" />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -14,26 +69,69 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import ArchiveItem from "./components/ArchiveItem.vue";
+import FileTable from "./components/FileTable.vue";
 import Header from "./components/Header.vue";
-import SizeFilter from "./components/SizeFilter.vue";
 import Overview from "./components/Overview.vue";
-import { Action, State } from "vuex-class";
+import ProgressBar from "./components/ProgressBar.vue";
+import SizeFilter from "./components/SizeFilter.vue";
+import { Action, Mutation, State } from "vuex-class";
 
 @Component({
   components: {
+    ArchiveItem,
+    FileTable,
     Header,
     Overview,
+    ProgressBar,
     SizeFilter,
   },
 })
 export default class App extends Vue {
   @Action requestInitialValues: Function;
+  @Mutation setSearchText;
+  @State("archives") storeArchives;
   @State("isOverviewEnabled") storeIsOverviewEnabled: boolean;
+  @State("overviewData") storeOverviewData;
+  @State("searchText") storeSearchText;
+
+  get overviewData() {
+    return this.storeOverviewData;
+  }
 
   get isOverviewEnabled() {
     return this.storeIsOverviewEnabled;
   }
 
+  get searchText() {
+    return this.storeSearchText;
+  }
+
+  set searchText(text: string) {
+    this.setSearchText(text);
+  }
+
+  get filteredArchives() {
+    const { searchText } = this;
+    let filteredObj = this.storeArchives;
+    if (searchText !== "") {
+      filteredObj = {};
+      Object.keys(this.storeArchives).forEach((archive) => {
+        // tslint:disable-next-line: max-line-length
+        if (
+          archive.toLowerCase().match(searchText.toLowerCase()) ||
+          (this.storeArchives[archive].files &&
+            Object.keys(this.storeArchives[archive].files).filter((file) =>
+              file.toLowerCase().match(this.searchText.toLowerCase())
+            ).length > 0)
+        ) {
+          filteredObj[archive] = this.storeArchives[archive];
+        }
+      });
+    }
+    return filteredObj;
+  }
+
   mounted() {
     this.requestInitialValues();
   }

src/views/size/components/ArchiveItem.vue

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="columns is-vcentered has-text-right is-mobile"
+    v-on:click="toggleArchiveFileInfoTable(archiveName)"
+  >
+    <div class="column is-hidden-mobile">
+      <div class="control">
+        <span class="icon is-large">
+          <iconify-icon icon="file-zip" class="is-size-4" />
+        </span>
+      </div>
+    </div>
+    <div class="column is-3 is-clipped">
+      <p
+        class="is-size-7-mobile is-size-6-tablet is-size-5-desktop has-text-weight-medium"
+      >
+        {{ archiveName }}
+      </p>
+    </div>
+
+    <div class="column" v-for="(value, key) in archiveInfo" :key="key">
+      <p class="is-size-7-mobile is-size-6-tablet is-size-5-desktop">
+        {{ convertToKB(value)
+        }}<span class="has-text-weight-light is-uppercase">kb</span>
+      </p>
+      <p class="heading">{{ key }}</p>
+    </div>
+
+    <div v-if="archiveInfo.files" class="column">
+      <div v-if="!archiveInfo.isFileInfoVisible">
+        <span class="icon is-large is-hidden-mobile">
+          <iconify-icon icon="chevron-down" />
+        </span>
+        <span class="icon is-small is-hidden-tablet">
+          <iconify-icon icon="chevron-down" />
+        </span>
+      </div>
+      <div v-else>
+        <span class="icon is-large is-hidden-mobile">
+          <iconify-icon icon="chevron-up" />
+        </span>
+        <span class="icon is-small is-hidden-tablet">
+          <iconify-icon icon="chevron-up" />
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { isNumber } from "util";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { State } from "vuex-class";
+
+@Component
+export default class ArchiveItem extends Vue {
+  @Prop() archiveInfo;
+  @Prop() archiveName: string;
+  @State("archives") storeArchives;
+
+  convertToKB(byte: number) {
+    return isNumber(byte) ? Math.round(byte / 1024) : 0;
+  }
+
+  toggleArchiveFileInfoTable(archiveName: string) {
+    Object.keys(this.storeArchives).forEach((archive) => {
+      let toggleVisibility = false;
+      if (archive === archiveName) {
+        toggleVisibility = !this.storeArchives[archive].isFileInfoVisible;
+      }
+      this.$set(this.storeArchives[archive], "isFileInfoVisible", toggleVisibility);
+    });
+  }
+}
+</script>

src/views/size/components/FileTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <table
+    class="table is-fullwidth is-hoverable is-size-7-mobile is-size-6-tablet is-size-5-desktop"
+  >
+    <thead>
+      <tr class="is-uppercase">
+        <!-- <td>#</td> -->
+        <td class="has-text-right">File Name</td>
+        <td class="has-text-right">
+          <abbr title="DRAM .data">.data (B)</abbr>
+        </td>
+        <td class="has-text-right">
+          <abbr title="DRAM .bss">.bss (B)</abbr>
+        </td>
+        <td class="has-text-right">IRAM (B)</td>
+        <td class="has-text-right">
+          <abbr title="Flash Code">code(B)</abbr>
+        </td>
+        <td class="has-text-right">
+          <abbr title="Flash Rodata">rodata (B)</abbr>
+        </td>
+        <td class="has-text-right">RAM ST Total</td>
+        <td class="has-text-right">Total</td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(fileInfo, fileName) in archiveInfo.files" :key="fileName">
+        <!-- <td>{{count}}</td> -->
+        <td class="has-text-right">{{ fileName }}</td>
+        <td
+          class="has-text-right"
+          v-for="(fileInfoValue, fileInfoKey) in fileInfo"
+          :key="fileInfoKey"
+        >
+          {{ convertToSpacedString(fileInfoValue) }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import { isNumber } from "util";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class FileTable extends Vue {
+  @Prop() archiveInfo;
+  convertToSpacedString(byte: number) {
+    return isNumber(byte) ? byte.toLocaleString("en-US").replace(/,/g, " ") : 0;
+  }
+}
+</script>

src/views/size/components/ProgressBar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="notification is-clipped">
+    <div class="columns is-vcentered has-text-centered is-mobile">
+      <div class="column is-1-tablet is-2-mobile is-clipped">
+        <div>
+          <span class="icon is-large is-hidden-mobile">
+            <iconify-icon icon="server" class="is-size-3" />
+          </span>
+          <strong style="vertical-align: super;">{{ name }}</strong>
+        </div>
+      </div>
+      <div class="column">
+        <progress
+          class="progress"
+          v-bind:class="progressBarColorClass(usedRatioData)"
+          v-bind:title="Math.round(usedRatioData * 100) + '%'"
+          v-bind:value="usedData"
+          v-bind:max="totalData"
+        ></progress>
+      </div>
+      <div
+        class="column is-3-mobile is-2-tablet is-2-desktop is-size-7-tablet is-size-7-mobile"
+      >
+        {{ convertToKB(usedData) }}KB / {{ convertToKB(totalData) }}KB
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { isNumber } from "util";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class ProgressBar extends Vue {
+  @Prop() usedData: number;
+  @Prop() usedRatioData: number;
+  @Prop() totalData: number;
+  @Prop() name: string;
+
+  convertToKB(byte: number) {
+    return isNumber(byte) ? Math.round(byte / 1024) : 0;
+  }
+
+  progressBarColorClass(ratio: number) {
+    if (ratio <= 0.3) {
+      return { "is-success": true };
+    }
+    if (ratio <= 0.7) {
+      return { "is-warning": true };
+    }
+    return { "is-danger": true };
+  }
+
+  mounted() {
+    console.log(this.usedData);
+    console.log(this.usedRatioData);
+    console.log(this.totalData);
+    console.log(this.name);
+  }
+}
+</script>

src/views/size/store.ts

@@ -90,6 +90,11 @@ export const mutations: MutationTree<IState> = {
     newState.overviewData = overview;
     Object.assign(state, newState);
   },
+  setSearchText(state, text: string) {
+    const newState = state;
+    newState.searchText = text;
+    Object.assign(state, newState);
+  },
   toggleOverviewAndDetails(state) {
     const newState = state;
     newState.isOverviewEnabled = !state.isOverviewEnabled;