New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add editors breakdown #24
base: main
Are you sure you want to change the base?
add editors breakdown #24
Conversation
@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? |
@@ -0,0 +1,243 @@ | |||
<template> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
<v-card-item> | ||
<div> | ||
<div class="text-overline mb-1" style="visibility: hidden;">filler</div> | ||
<div class="text-h6 mb-1">Number of {{ breakdownKey }}s</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<div class="text-h6 mb-1">Number of {{ breakdownKey }}s</div> | |
<div class="text-h6 mb-1">Number of {{ breakdownKey }}</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
My bad, I didn't submit them!
I will add a few things before releasing it, so no need to worry about that 🙏🏼 |
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 theLanguagesBreakdown
component with the newBreakdownsComponent
. 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 theBreakdownsComponent
. [1] [2]Refactoring:
src/model/Breakdown.ts
: Renamed fromLanguage.ts
and updated the class name toBreakdown
to make it more generic.src/model/Metrics.ts
: Renamed theBreakdown
class toBreakdownData
and updated thebreakdown
member of theMetrics
class to useBreakdownData
. [1] [2] [3]Removals:
src/components/LanguagesBreakdown.vue
: Removed this component as its functionality is now covered by theBreakdownsComponent
.src/components/MetricsViewer.vue
: Removed the import of theLanguage
model as it is no longer used.