[Backport 4.3-7.16] Enhancement/4211 improve visualizations text size (…

…#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 <[email protected]>
wazuh · Jun 17, 2022 · 176d68e · 176d68e
1 parent 184bfdb
commit 176d68e
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 ### Changed
 
 - Changed the reference from Manager to Wazuh server in the guide to deploy a new agent [#4239](https://github.com/wazuh/wazuh-kibana-app/pull/4239)
+- Changed styles in visualizations. [#4254](https://github.com/wazuh/wazuh-kibana-app/pull/4254)
 
 ### Fixed
 

diff --git a/public/components/agents/vuls/inventory.tsx b/public/components/agents/vuls/inventory.tsx
@@ -21,8 +21,6 @@ import {
   EuiFlexItem,
   EuiCard,
   EuiStat,
-  EuiText,
-  EuiIcon,
   EuiToolTip,
   euiPaletteColorBlind,
 } from '@elastic/eui';

diff --git a/public/components/agents/vuls/inventory/table.tsx b/public/components/agents/vuls/inventory/table.tsx
@@ -11,7 +11,7 @@
  */
 
 import React, { Component } from 'react';
-import { Direction, EuiOverlayMask, EuiOutsideClickDetector } from '@elastic/eui';
+import { Direction } from '@elastic/eui';
 import { FlyoutDetail } from './flyout';
 import { filtersToObject, IFilter, IWzSuggestItem } from '../../../wz-search-bar';
 import { TableWzAPI } from '../../../../components/common/tables';

diff --git a/public/components/common/charts/visualizations/basic.tsx b/public/components/common/charts/visualizations/basic.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback, useState} from "react";
+import React, { useCallback, useState } from "react";
 import { ChartLegend } from "./legend";
 import { ChartDonut, ChartDonutProps } from '../charts/donut';
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiSelect, EuiSpacer } from '@elastic/eui';
 import { useAsyncActionRunOnStart } from "../../hooks";
 
 export type VisualizationBasicProps = ChartDonutProps & {
   type: 'donut',
-  size: number | string | {width: number | string, height: number | string}
+  size: number | string | { width: number | string, height: number | string }
   showLegend?: boolean
   isLoading?: boolean
   noDataTitle?: string
   noDataMessage?: string | (() => React.node)
   errorTitle?: string
   errorMessage?: string | (() => React.node)
-  error?: {message: string}
+  error?: { message: string }
 }
 
 const chartTypes = {
@@ -37,45 +37,45 @@ export const VisualizationBasic = ({
   error
 }: VisualizationBasicProps) => {
   const { width, height } = typeof size === 'object' ? size : { width: size, height: size };
-  
+
   let visualization = null;
 
-  if(isLoading){
+  if (isLoading) {
     visualization = (
-      <div style={{ textAlign: "center", width, height, position: 'relative'}}>
-        <EuiLoadingChart size="xl" style={{top: '50%', transform:'translate(-50%, -50%)', position: 'absolute'}}/>
+      <div style={{ textAlign: "center", width, height, position: 'relative' }}>
+        <EuiLoadingChart size="xl" style={{ top: '50%', transform: 'translate(-50%, -50%)', position: 'absolute' }} />
       </div>
     )
-  }else if(errorMessage || error?.message){
+  } else if (errorMessage || error?.message) {
     visualization = (
       <EuiEmptyPrompt
         iconType="alert"
         title={<h4>{errorTitle}</h4>}
         body={errorMessage || error?.message}
       />
     )
-  }else if(!data || (Array.isArray(data) && !data.length)){
+  } else if (!data || (Array.isArray(data) && !data.length)) {
     visualization = (
       <EuiEmptyPrompt
         iconType="stats"
         title={<h4>{noDataTitle}</h4>}
         body={typeof noDataMessage === 'function' ? noDataMessage() : noDataMessage}
       />
     )
-  }else{
+  } else {
     const Chart = chartTypes[type];
     const chartFlexStyle = {
       alignItems: 'flex-end',
       paddingRight: '1em'
     }
     const legendFlexStyle = {
-      height:'100%',
+      height: '100%',
       paddingLeft: '1em'
     }
     visualization = (
-      <EuiFlexGroup responsive={false} style={{ height:'100%'}} gutterSize='none'>
+      <EuiFlexGroup responsive={false} style={{ height: '100%' }} gutterSize='none'>
         <EuiFlexItem style={chartFlexStyle}>
-          <Chart data={data}/>
+          <Chart data={data} />
         </EuiFlexItem>
         {showLegend && (
           <EuiFlexItem style={legendFlexStyle}>
@@ -89,7 +89,7 @@ export const VisualizationBasic = ({
   }
 
   return (
-    <div style={{ width, height}}>
+    <div style={{ width, height }}>
       {visualization}
     </div>
   )
@@ -104,26 +104,26 @@ type VisualizationBasicWidgetProps = VisualizationBasicProps & {
 /**
  * Component that fetch the data and renders the visualization using the visualization basic component
  */
-export const VisualizationBasicWidget = ({onFetch, onFetchDependencies, ...rest}: VisualizationBasicWidgetProps) => {
-  const {running, ...restAsyncAction} = useAsyncActionRunOnStart(onFetch, onFetchDependencies);
+export const VisualizationBasicWidget = ({ onFetch, onFetchDependencies, ...rest }: VisualizationBasicWidgetProps) => {
+  const { running, ...restAsyncAction } = useAsyncActionRunOnStart(onFetch, onFetchDependencies);
 
-  return <VisualizationBasic {...rest} {...restAsyncAction} isLoading={running}/>
+  return <VisualizationBasic {...rest} {...restAsyncAction} isLoading={running} />
 }
 
 type VisualizationBasicWidgetSelectorProps = VisualizationBasicWidgetProps & {
-  selectorOptions: {value: any, text: string}[]
+  selectorOptions: { value: any, text: string }[]
   title?: string
   onFetchExtraDependencies?: any[]
 }
 
 /**
  * Renders a visualization that has a selector to change the resource to fetch data and display it. Use the visualization basic. 
  */
-export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetchExtraDependencies, ...rest}: VisualizationBasicWidgetSelectorProps) => {
+export const VisualizationBasicWidgetSelector = ({ selectorOptions, title, onFetchExtraDependencies, ...rest }: VisualizationBasicWidgetSelectorProps) => {
   const [selectedOption, setSelectedOption] = useState(selectorOptions[0].value);
 
   const onChange = useCallback((e) => setSelectedOption(e.target.value));
-  
+
   return (
     <>
       <EuiFlexGroup
@@ -137,7 +137,7 @@ export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetc
           )}
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiSelect
+          <EuiSelect style={{ fontSize: '0.793rem' }}
             compressed={true}
             options={selectorOptions}
             value={selectedOption}
@@ -146,7 +146,7 @@ export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetc
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size='s'/>
+      <EuiSpacer size='s' />
       <VisualizationBasicWidget
         {...rest}
         {...(rest.noDataMessage ?
@@ -157,8 +157,8 @@ export const VisualizationBasicWidgetSelector = ({selectorOptions, title, onFetc
           }
           : {}
         )}
-        onFetchDependencies={[selectedOption,...(onFetchExtraDependencies || [])]}
+        onFetchDependencies={[selectedOption, ...(onFetchExtraDependencies || [])]}
       />
     </>
-  ) 
+  )
 }
diff --git a/public/components/common/charts/visualizations/legend.tsx b/public/components/common/charts/visualizations/legend.tsx
@@ -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.875rem'}}>{`${label} (${value})`}</div>,
     icon: <EuiIcon type="dot" size='l' color={labelColor} />,
     ...rest
   }));