Create UI dashboard For output file

### Prize category

Best Plugin

### Overview

The plugin is called through the IF tool, and the corresponding file is generated according to the user's instructions, including various carbon emission information that the user wants to know.

Since the file format is yaml or json, there will be the following pain points:

1. Users cannot intuitively feel the returned carbon emission information;
2. The cost of understanding the return information of various indicators of the plug-in is relatively high;
3. The analysis of the output carbon emission information is not intuitive enough.

In response to the above pain points, the team will develop a plug-in to solve it.

This will allow users to obtain output files such as yaml after inputting instructions, and at the same time generate a visual UI interface, display the output results more intuitively through charts and other methods, and reduce the cost of usage analysis.

### Questions to be answered

_No response_

### Have you got a project team yet?

Yes and we aren't recruiting

### Project team

@DaQianZ
@bakazhou
@xuanwu1yzyz

### Terms of Participation

- [X] I agree to the hackathon [Rules & Terms](https://github.com/Green-Software-Foundation/hack/wiki/Rules-and-Terms) and [Code of Conduct](https://github.com/Green-Software-Foundation/hack/wiki/Code-of-Conduct)

### Summary
The Visualization plugin is designed to enhance the user experience by providing a graphical representation of carbon emissions data or all-arounds output data generated from your manifests file. By incorporating this plugin into the manifests file, you can transform the raw output data into an intuitive HTML file with visualizations, enabling better understanding and analysis of the outputs (e.g. carbon emissions associated with cpu/utilization).

### Problems
1. Users cannot intuitively feel the returned carbon emission information;
2. The cost of understanding the return information of various indicators of the plug-in is relatively high;
3. The analysis of the output carbon emission information is not intuitive enough.

### Application
Run the manifest file with the plugin reference.
Upon completion, an HTML file will be generated with visual representations of “output” data.

### Prize category
Best Plugin

### Judging criteria
Our plug-in can be used with other plug-ins to generate corresponding charts synchronously based on the output results, and can support comparison chart viewing, data viewing and chart downloading.

Key Features:
- Converts impact frame output into HTML files with interactive visualizations.
- Provides insights among different types of “outputs” through charts and graphs.
- Enhances readability and comprehension of carbon footprint information.

### Video：
https://youtu.be/Ko7CHuqShoI

### Artefacts
https://github.com/green-software-hackthon-visualization/visualization-plugging/tree/main

### Process
After choosing the direction of "visualization," our team began by identifying pain points, goals, and technology options. We decided on a solution that involves using plugins and ECharts to generate HTML. This approach aims to address the current issues of non-technical users finding the output non-visual, unfriendly, and challenging for data analysis.

### Inspiration
Generate an HTML file for Jest test coverage

### Challenges
During the development process, we tackled several challenges. We started by building the plugin project according to the official documentation. Next, we focused on extracting the output, categorizing the output results, analyzing the relationships within the output content, determining the measurement units for the output indicators, and generating HTML files that met our expectations. By overcoming these obstacles, we achieved our first milestone of visualizing the output results using eCharts.

### Accomplishments
The team worked together to achieve a small goal: if carbon emission tool visualization.

### Learnings
1. How to collaborate better as a team
2. Participate in and implement the development of an open source project
3. Use of if tool
4. Knowledge about carbon emissions
5. Develop a pipeline plugin

### What's next?
1. Users can interact with an HTML page to freely select plugins and configure them to generate carbon footprint information, without the need for manual code manipulation. This allows users to dynamically choose the desired functionality without any coding requirements.

2. The generated results should be flexible, allowing users to selectively display specific content that meets their analysis needs. Users can customize the visualization and analysis of the carbon footprint information according to their preferences and requirements.

3. Develop a browser plugin that dynamically fetches carbon footprint information from webpages and displays the results in real-time. This plugin will enable users to seamlessly access and monitor carbon footprint data while browsing the web, providing instant visibility and awareness of environmental impact.