Use pie chart for visualization of anaylsis result.

echarts_data.js will take the raw data and convert it into vue-echarts
readable option. PieChart.vue take this option and render it into a
pie chart.

Test: Mannual tested.
Change-Id: I54af3603031f0e23afa743ffc420d240a1b07bb2

tools/otagui/src/components/PayloadComposition.vue

@@ -3,28 +3,31 @@
     v-model="partitionInclude"
     :labels="updatePartitions"
   />
-  <button @click="updateChart">
+  <button @click="updateChart('blocks')">
-    Update the chart
+    Analyse Installed Blocks (in target build)
   </button>
-  <div
+  <button @click="updateChart('payload')">
-    v-if="listData"
+    Analyse Payload Composition
-    class="list-data"
+  </button>
-  >
+  <div v-if="echartsData">
-    <pre>
+    <PieChart :echartsData="echartsData" />
-      {{ listData }}
-    </pre>
   </div>
 </template>
 
 <script>
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
-import { operatedBlockStatistics } from '../services/payload_composition.js'
+import PieChart from '@/components/PieChart.vue'
+import {
+  operatedBlockStatistics,
+  operatedPayloadStatistics,
+} from '../services/payload_composition.js'
 import { EchartsData } from '../services/echarts_data.js'
 import { chromeos_update_engine as update_metadata_pb } from '../services/update_metadata_pb.js'
 
 export default {
   components: {
     PartialCheckbox,
+    PieChart,
   },
   props: {
     manifest: {
@@ -52,12 +55,27 @@ export default {
     })
   },
   methods: {
-    updateChart() {
+    updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
         this.partitionInclude.get(partition.partitionName)
       )
-      let statisticsData = operatedBlockStatistics(partitionSelected)
+      let statisticsData
-      this.echartsData = new EchartsData(statisticsData)
+      switch (metrics) {
+      case 'blocks':
+        statisticsData = operatedBlockStatistics(partitionSelected)
+        this.echartsData = new EchartsData(
+          statisticsData,
+          'Operated blocks in target build'
+        )
+        break
+      case 'payload':
+        statisticsData = operatedPayloadStatistics(partitionSelected)
+        this.echartsData = new EchartsData(
+          statisticsData,
+          'Payload disk usage'
+        )
+        break
+      }
       this.listData = this.echartsData.listData()
     },
   },

tools/otagui/src/components/PieChart.vue

@@ -0,0 +1,53 @@
+<template>
+  <v-chart
+    class="chart"
+    :option="getEchartsOption"
+  />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { EchartsData } from '@/services/echarts_data.js'
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  components: {
+    VChart,
+  },
+  provide: {
+    [THEME_KEY]: 'light',
+  },
+  props: {
+    echartsData: {
+      type: EchartsData,
+      required: true,
+    },
+  },
+  computed: {
+    getEchartsOption() {
+      return this.echartsData.getEchartsOption()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.chart {
+  height: 400px;
+}
+</style>

tools/otagui/src/services/echarts_data.js

@@ -1,9 +1,19 @@
-// This function will be used later for generating a pie chart through eCharts
 export class EchartsData {
-  constructor(statisticData) {
+  /**
+   * Given a set of [key, value] pairs and title, create an object for further
+   * usage in Vue-Echarts.
+   * @param {Map} statisticData
+   * @param {String} title
+   */
+  constructor(statisticData, title) {
     this.statisticData = statisticData
+    this.title = title
   }
 
+  /**
+   * Convert the raw data into a string.
+   * @return {String} A list of [key, value].
+   */
   listData() {
     let table = ''
     for (let [key, value] of this.statisticData) {
@@ -11,4 +21,47 @@ export class EchartsData {
     }
     return table
   }
+
+  /**
+   * Generate necessary parameters (option) for vue-echarts.
+   * Format of the parameters can be found here:
+   * https://echarts.apache.org/en/option.html
+   * @return {Object} an ECharts option object.
+   */
+  getEchartsOption() {
+    let option = new Object()
+    option.title = {
+      text: this.title,
+      left: "center"
+    }
+    option.tooltip = {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)"
+    }
+    option.legend = {
+      orient: "horizontal",
+      left: "top",
+      top: "10%",
+      data: Array.from(this.statisticData.keys())
+    }
+    option.series = [
+      {
+        name: this.title,
+        type: "pie",
+        radius: "55%",
+        center: ["50%", "60%"],
+        data: Array.from(this.statisticData).map((pair) => {
+          return { value: pair[1], name: pair[0] }
+        }),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }
+    ]
+    return option
+  }
 }