refactor(Legend): abstract chart legend props
What does this MR do?
Abstracts legend props since they are repeated through multiple files
Possible approach
We could abstract these to a utility file that lives alongside the charts and then each component can just import them by default:
// ../../../utils/charts/utils
export const legendAverageText = {
type: String,
required: false,
default: LEGEND_AVERAGE_TEXT,
};
export const legendMaxText= {
type: String,
required: false,
default: LEGEND_MAX_TEXT,
};
export const legendMinText = {
type: String,
required: false,
default: LEGEND_MIN_TEXT,
};
export const legendCurrentText = {
type: String,
required: false,
default: LEGEND_CURRENT_TEXT,
};
export const legendLayout = {
type: String,
required: false,
default: LEGEND_LAYOUT_INLINE,
validator(layout) {
return [LEGEND_LAYOUT_INLINE, LEGEND_LAYOUT_TABLE].indexOf(layout) !== -1;
},
};
// area.vue / line.vue / stacked_column.vue
import { legendAverageText, legendCurrentText, legendLayout, legendMaxText, legendMinText } from '../../../utils/charts/utils'
formatTooltipText: {
type: Function,
required: false,
default: null,
},
legendMaxText,
legendMinText,
legendLayout,
legendCurrentText,
legendAverageText
This really helps cut down on the repeated code and lets us adhere to the open closed principal of the props being open to extension but closed for modification, which I think would be useful for the charts legend.
Does this MR meet the acceptance criteria?
Conformity
-
Code review guidelines. -
GitLab UI's contributing guidlines. -
If it changes a Pajamas-compliant component's look & feel, the MR has been reviewed by a UX designer. -
If it changes GitLab UI's documentation guidelines, the MR has been reviewed by a Technical Writer. -
If the MR changes a component's API, integration MR(s) have been opened in the following projects to ensure that the @gitlab/ui
package can be upgraded quickly after the changes are released:-
GitLab: mr_url -
Customers Portal: mr_url -
Status Page: mr_url
-
-
Added the ~"component:*"
label(s) if applicable.