Charts
Charts are used to visualise different data sets, i.e. in the HistoryDetail view. Each type of chart is encapsulated in its own component, located in the /components/charts folder. This modular approach allows for better organisation and maintenance of the codebase. The data to be displayed is passed as properties to the chart component, streamlining the process of updating and adapting to changing data requirements. This modular architecture promotes maintainability and extensibility as new chart types can be seamlessly integrated into the project. In the chart components, the options for the chart are explicitly defined within the component. This deliberate design choice ensures that each type of chart, regardless of the underlying data, maintains the same styling within its chart group. Consistency in presentation not only enhances visual appeal, but also contributes to a seamless and intuitive user experience. To integrate them into a view, easily import the Chart component and provide the data you wish to display in the chart. At present, two distinct charts are being utilized namely the LineCharts and BoxPlots.
To display data trends over time, the LineChart component is used. It is implemented with vue-chartjs, a Vue wrapper for Chart.js that integrates Chart.js functionality into Vue components seamlessly. The component emits hover events that allow interactive user experience. Developers can use these events to enhance user interaction and offer additional information based on the user's actions. The Hover event also specifies the index of the hovered data point.
In the HistoryDetail view, the LineChart is used to show how different measures change over the files in a history. The chart and the feature model table work together to give a clear and informative view of data trends and associated feature model information. The chart only displays the items shown in the table. The data properties used in this feature adjust the radius of each point based on the activity of the corresponding row in the associated feature model table. This creates a visual link between the chart and the table, enabling users to identify and interpret data points more easily. The LineChart is fed with data structured as a computed property, guaranteeing that the chart updates dynamically when changes occur in the underlying dataset. Conversely, the feature model table receives the currently active hovered item in the LineChart via the hover event. In the history detail view, each feature model is given an active property at the top of the files list to centralize the feature model's active state in one location.
The BoxPlot component is a potent tool for displaying statistical distributions of data. Box plots, also called box-and-whisker plots, succinctly summarize the central tendency and variability of the distribution. They demonstrate notable statistical measures like the median, quartiles, and possible outliers. The BoxPlot component has been realized as a single-file component for Vue. The @sgratzl/chartjs-chart-boxplot library is employed to display the box plot on a canvas element. Through the data prop, the component can visualise different datasets dynamically. A rectangular "box" symbolises the interquartile range (IQR) between the first and third quartiles in box plots. The median is represented by a horizontal line inside the box. The "whiskers" of the box plot extend from the minimum to maximum values within a defined range, while individual dots may indicate potential outliers. The styling options, such as background color, are implemented directly in the dataset. A sample dataset is included in the comments of the BoxPlot.vue component to demonstrate the appropriate dataset structure. To omit the individual points, simply set the itemRadius to 0. Unfortunately, we are currently unable to provide the same level of responsiveness to hover emissions as we do in the LineChart.