Enhancement/4211 improve visualizations text size #4254
Conversation
…into enhancement/4211-improve-visualizations-text-size
chantal-kelm
added
type/enhancement
|
thoughts: The visualizations generated with the visualization plugin of the platform have the legend aligned to the top. For consistency, I would not change this alignment. Do we want the modified aligment? In my opinion, the select is not part of the visualization, so I would not include this element to be aligned with the legend. |
| @@ -34,51 +36,55 @@ export const VisualizationBasic = ({ | |||
| noDataMessage, | |||
| errorTitle = 'Error', | |||
| errorMessage, | |||
| error | |||
| error, | |||
| select | |||
There was a problem hiding this comment.
nitpick If we want to include some element before the legend, we should not call it select and I would suggest a more generic name.
|
It was concluded that it was better not to implement some changes in the styles, in order to maintain some consistency in the visual. Modules/Vulnerabilities The other view where font size also impacts is Agents which looks like this: |
| @@ -17,7 +17,7 @@ type ChartLegendProps = { | |||
| */ | |||
| export function ChartLegend({ data }: ChartLegendProps) { | |||
| const list = data.map(({label, labelColor, value, ...rest}, idx) => ({ | |||
| label: `${label} (${value})`, | |||
| label: <div style={{fontSize: '0.793rem'}}>{`${label} (${value})`}</div>, | |||
There was a problem hiding this comment.
nitpick: The EuiListGroup component has a property to modify the size of all EuiListItem. You could use the property instead of the proposed solution.
Example:
return (
<EuiListGroup
className="chart-legend"
listItems={list}
color='text'
size='xs'
flush />
)
|
* Unused imports * Centered gravity graphic and list * font size texts first graph * CHANGELOG * Removing centered, and putting the same font size to the select (cherry picked from commit ad37304)
* Unused imports * Centered gravity graphic and list * font size texts first graph * CHANGELOG * Removing centered, and putting the same font size to the select (cherry picked from commit ad37304)
…#4275) Enhancement/4211 improve visualizations text size (#4254) * Unused imports * Centered gravity graphic and list * font size texts first graph * CHANGELOG * Removing centered, and putting the same font size to the select (cherry picked from commit ad37304) Co-authored-by: Chantal Belén kelm <99441266+chantal-kelm@users.noreply.github.com>
…ize (#4276) Enhancement/4211 improve visualizations text size (#4254) * Unused imports * Centered gravity graphic and list * font size texts first graph * CHANGELOG * Removing centered, and putting the same font size to the select (cherry picked from commit ad37304) Co-authored-by: Chantal Belén kelm <99441266+chantal-kelm@users.noreply.github.com>
The two graphs, the lists and the select were centered.
The font size was also corrected to the same used in the table.
To test go to:
Modules/Vulnerabilities.
or Agents/Select an agent/Click on the more button/Click on Vulnerabilities.