add editors breakdown

[giotab]

In order to see Editors usage as well, I changed the existing LanguagesBreakdown component to be more generic so that both Languages and Editors require less effort to maintain.

Here are the most significant changes:

New Features:

• src/components/BreakdownsComponent.vue: Introduced a new component that provides a generic breakdown view. This component can display breakdowns by different keys such as language or editor. It includes a pie chart to visualize the top 5 items by accepted prompts and acceptance rate, and a data table for a detailed breakdown.

Enhancements:

• src/components/MainComponent.vue: Replaced the LanguagesBreakdown component with the new BreakdownsComponent. Added 'editors' to the list of tab items to provide a breakdown by editors. [1] [2] [3]
• src/components/MetricsViewer.vue: Removed the processing of language breakdowns as it is now handled by the BreakdownsComponent. [1] [2]

Refactoring:

• src/model/Breakdown.ts: Renamed from Language.ts and updated the class name to Breakdown to make it more generic.
• src/model/Metrics.ts: Renamed the Breakdown class to BreakdownData and updated the breakdown member of the Metrics class to use BreakdownData. [1] [2] [3]

Removals:

• src/components/LanguagesBreakdown.vue: Removed this component as its functionality is now covered by the BreakdownsComponent.
• src/components/MetricsViewer.vue: Removed the import of the Language model as it is no longer used.

[martedesco]

@giotab , thanks for your contribution! I added a few comments 👍🏼

[giotab]

@giotab , thanks for your contribution! I added a few comments 👍🏼

Hi @martedesco , not sure I can see the comments 🤔 unless you mean in the PR's description?
Also, should I bump the version number to 1.5.0?

[martedesco]

Would it make sense to name it BreakdownComponent.vue? As I would assume it is a singular breakdown per component e.g. languages or editors

[martedesco]

Suggested change

	<div class="text-h6 mb-1">Number of {{ breakdownKey }}s</div>
	<div class="text-h6 mb-1">Number of {{ breakdownKey }}</div>

[martedesco]

Is there a specific constraint to use the keys on the singular? If we use Editors and Languages as key we wouldn't need to add 's' in every time we reference this prop.

[giotab]

The breakdownKey is used in this line
const breakdownName = breakdownData[props.breakdownKey as keyof typeof breakdownData] as string;
in order to get the value, e.g. breakdownName would be dockerfile or vscode.

{
    "language": "dockerfile",
    "editor": "vscode",
    "suggestions_count": 3,
    "acceptances_count": 0,
    "lines_suggested": 3,
    "lines_accepted": 0,
    "active_users": 1
}

(replaces the previous const languageName = breakdown.language;)

If we use Editors, then the above access will not work.

I updated the code a little bit, to centralise the "pluralisation" of the key.

[martedesco]

Hi @martedesco , not sure I can see the comments 🤔 unless you mean in the PR's description?

My bad, I didn't submit them!

Also, should I bump the version number to 1.5.0?

I will add a few things before releasing it, so no need to worry about that 🙏🏼