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
diff --git a/tools/otagui/src/components/PayloadComposition.vue b/tools/otagui/src/components/PayloadComposition.vue
index 420b96d..96a4884 100644
--- a/tools/otagui/src/components/PayloadComposition.vue
+++ b/tools/otagui/src/components/PayloadComposition.vue
@@ -3,28 +3,31 @@
v-model="partitionInclude"
:labels="updatePartitions"
/>
- <button @click="updateChart">
- Update the chart
+ <button @click="updateChart('blocks')">
+ Analyse Installed Blocks (in target build)
</button>
- <div
- v-if="listData"
- class="list-data"
- >
- <pre>
- {{ listData }}
- </pre>
+ <button @click="updateChart('payload')">
+ Analyse Payload Composition
+ </button>
+ <div v-if="echartsData">
+ <PieChart :echartsData="echartsData" />
</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 @@
})
},
methods: {
- updateChart() {
+ updateChart(metrics) {
let partitionSelected = this.manifest.partitions.filter((partition) =>
this.partitionInclude.get(partition.partitionName)
)
- let statisticsData = operatedBlockStatistics(partitionSelected)
- this.echartsData = new EchartsData(statisticsData)
+ let 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()
},
},
diff --git a/tools/otagui/src/components/PieChart.vue b/tools/otagui/src/components/PieChart.vue
new file mode 100644
index 0000000..52c1f8e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/tools/otagui/src/services/echarts_data.js b/tools/otagui/src/services/echarts_data.js
index faddeec..6e3b41c 100644
--- a/tools/otagui/src/services/echarts_data.js
+++ b/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 @@
}
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
+ }
}
\ No newline at end of file
