fix: mixed timeseries chart add legend margin

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -129,6 +129,7 @@ export default function transformProps(
     theme,
     inContextMenu,
     emitCrossFilters,
+    legendState,
   } = chartProps;
 
   let focusedSeries: string | null = null;
@@ -157,6 +158,7 @@ export default function transformProps(
     timeShiftColor,
     contributionMode,
     legendOrientation,
+    legendMargin,
     legendType,
     legendSort,
     logAxis,
@@ -553,7 +555,7 @@ export default function transformProps(
     legendOrientation,
     addYAxisTitleOffset,
     zoomable,
-    null,
+    legendMargin,
     addXAxisTitleOffset,
     yAxisTitlePosition,
     convertInteger(yAxisTitleMargin),
@@ -716,6 +718,8 @@ export default function transformProps(
         showLegend,
         theme,
         zoomable,
+        legendState,
+        chartPadding,
       ),
       // @ts-ignore
       data: series

superset-frontend/plugins/plugin-chart-echarts/test/MixedTimeseries/transformProps.test.ts

@@ -258,3 +258,66 @@ describe('legend sorting', () => {
     ]);
   });
 });
+
+it('legend margin: top orientation sets grid.top correctly', () => {
+  const chartPropsConfigWithoutIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      legendMargin: 250,
+      showLegend: true,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers);
+  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
+
+  expect((transformed.echartOptions.grid as any).top).toEqual(270);
+});
+
+it('legend margin: bottom orientation sets grid.bottom correctly', () => {
+  const chartPropsConfigWithoutIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      legendMargin: 250,
+      showLegend: true,
+      legendOrientation: LegendOrientation.Bottom,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers);
+  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
+
+  expect((transformed.echartOptions.grid as any).bottom).toEqual(270);
+});
+
+it('legend margin: left orientation sets grid.left correctly', () => {
+  const chartPropsConfigWithoutIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      legendMargin: 250,
+      showLegend: true,
+      legendOrientation: LegendOrientation.Left,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers);
+  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
+
+  expect((transformed.echartOptions.grid as any).left).toEqual(270);
+});
+
+it('legend margin: right orientation sets grid.right correctly', () => {
+  const chartPropsConfigWithoutIdentifiers = {
+    ...chartPropsConfig,
+    formData: {
+      ...formData,
+      legendMargin: 270,
+      showLegend: true,
+      legendOrientation: LegendOrientation.Right,
+    },
+  };
+  const chartProps = new ChartProps(chartPropsConfigWithoutIdentifiers);
+  const transformed = transformProps(chartProps as EchartsMixedTimeseriesProps);
+
+  expect((transformed.echartOptions.grid as any).right).toEqual(270);
+});