Draft: Implement minidashboard charts
This merge request adds charting capabilities to a Vue.js web application by integrating Chart.js and vue-chartjs libraries. The changes include:
New Dependencies: Added Chart.js (a popular JavaScript charting library) and vue-chartjs (Vue wrapper for Chart.js) to enable data visualization features.
Two New Chart Components:
-
MiniDurationChart: Creates a line chart showing pipeline execution time trends over the last 10 completed pipelines. It displays average, fastest, and slowest execution times, with color-coded data points based on pipeline success/failure status.
-
MiniPipelineChart: Creates a doughnut (donut) chart showing the distribution of pipeline statuses (success, failed, running, other) with a legend displaying counts for each category.
Key Features: Both charts are responsive, interactive with hover tooltips, and automatically update when new pipeline data is received. They filter out incomplete data (running pipelines without duration) and use GitLab-style colors and styling to match the application's design.
Testing: Includes unit tests for the duration chart component to ensure proper data filtering, statistics calculation, and duration formatting.
The charts provide visual insights into CI/CD pipeline performance and status distribution, making it easier for users to quickly understand their pipeline health and trends at a glance.