ISSUE #305: Genre Insights: Incorrect Data Mapping in Genre Insights - bar & line Chart

[selina-joy]

Title: Pie Chart Displays Incorrect Genre Labels

Description: The pie chart in the "Genre Insights" visualization displays incorrect labels for genres when hovering over chart segments, causing confusion about the genre distribution.

Steps to Reproduce:

Open the "Genre Insights" menu. Hover over a segment in the pie chart. Observe that the label displayed does not correspond to the actual genre. Expected Behavior: Each pie chart segment should display the correct genre name and percentage when hovered.

Actual Behavior: Labels show incorrect or empty genre names, creating confusion.

Resolution Status: Unresolved

Fix plan:

Correct the data transformation logic to properly map genre names to pie chart segments. Adjust the tooltip configuration to use the correct data fields for genre names and percentages.

Priority: High

Labels: Bug, Data Mapping

[mnmnk43434]

Hello, we tried to solve the issue.

This is what we did:

Updated the genre data processing in views.py and modified the chart configuration in index.html to correctly display genre labels in the pie chart.

You can review changes in this commit: https://github.com/mnmnk43434/BUMETCS673-seprojects-cs673f24a2_team3-25/commit/c07b8410497c7d806e448c04867a7a52d1b6b706.

[!CAUTION] Disclaimer: The concept of solution was created by AI and you should never copy paste this code before you check the correctness of generated code. Solution might not be complete, you should use this code as an inspiration only.

---

If you no longer want Latta AI to attempt solving issues on your repository, you can block this account.

[selina-joy]

Bug Fixed.

Add the following codes to chars-setup.js and make the data format align with the required format.

// Transform the passed original data into the required 'source' format

const sourceData = []; const header = ['genre', ...data.slice(1).map(row => row[0])]; // ['genre', '1921-1931', '1931-1941', ...] sourceData.push(header);

for (let i = 1; i < data[0].length; i++) { const genreRow = [data[0][i]]; // Start with the genre name for (let j = 1; j < data.length; j++) { genreRow.push(data[j][i]); // Append counts for each interval } sourceData.push(genreRow); }