feat: option to add legend on left side (#1520)

Author: itssharmasandeep

projects/observability/src/shared/components/legend/legend.component.ts

@@ -68,5 +68,6 @@ export const enum LegendPosition {
   TopRight = 'top-right',
   TopLeft = 'top-left',
   Top = 'top',
+  Left = 'left',
   None = 'none'
 }

projects/observability/src/shared/components/utils/d3/d3-visualization-builder.service.ts

@@ -117,6 +117,8 @@ export abstract class D3VisualizationBuilderService<
         return 'column-reverse';
       case LegendPosition.Right:
         return 'row';
+      case LegendPosition.Left:
+        return 'row-reverse';
       case LegendPosition.None:
         return '';
       default:
@@ -222,7 +224,7 @@ export abstract class D3VisualizationBuilderService<
 
     const isLegendVisible = this.isLegendVisible(config);
     const isTopOrBottomLegend = this.isTopOrBottomLegend(config);
-    const isSideLegend = config.legend === LegendPosition.Right;
+    const isSideLegend = config.legend === LegendPosition.Right || config.legend === LegendPosition.Left;
     let legendWidth = isLegendVisible
       ? 0
       : isSideLegend
@@ -312,6 +314,7 @@ export abstract class D3VisualizationBuilderService<
   protected getLegendLayout(configuration: TInternalConfig): LegendLayout {
     switch (configuration.legend) {
       case LegendPosition.Right:
+      case LegendPosition.Left:
         return LegendLayout.Column;
       case LegendPosition.Top:
       case LegendPosition.TopRight:

projects/observability/src/shared/components/utils/d3/d3-visualization.scss

@@ -13,6 +13,14 @@
     }
   }
 
+  &.row-reverse {
+    flex-direction: row-reverse;
+    .chart-legend-container {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+  }
+
   &.column {
     flex-direction: column;
     .chart-legend-container {