[FEATURE] Update chart legend font size and padding (opensearch-proje…

…ct#196)

* [FEATURE] Charts | Set legend font size to match the font size on the page. opensearch-project#166

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Charts | Set legend font size to match the font size on the page. opensearch-project#166

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

* [FEATURE] Charts | Change charts time-unit to bigger timespan #164

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

public/pages/Overview/utils/helpers.ts

@@ -18,7 +18,21 @@ export type DateOpts = {
 
 function getVisualizationSpec(description: string, data: any, layers: any[]): TopLevelSpec {
   return {
-    config: { view: { stroke: null } },
+    config: {
+      view: { stroke: null },
+      legend: {
+        labelColor: '#343741',
+        titleColor: '#1a1c21',
+        labelFontSize: 14,
+        titleFontWeight: 600,
+        titleLineHeight: 21,
+        titleFontSize: 14,
+        titlePadding: 10,
+        rowPadding: 6,
+        labelFont:
+          '"Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      },
+    },
     $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
     description: description,
     data: {
@@ -201,7 +215,7 @@ export function getTopRulesVisualizationSpec(visualizationData: any[]) {
         color: {
           field: 'ruleName',
           type: 'nominal',
-          header: { title: '' },
+          title: 'Rule name',
           scale: {
             range: euiPaletteColorBlind(),
           },