fix no-data placement when legend is on the side

Author: pan-kot

pages/03-core/empty-line-chart.page.tsx

@@ -4,18 +4,40 @@
 import Highcharts from "highcharts";
 import { omit } from "lodash";
 
+import Checkbox from "@cloudscape-design/components/checkbox";
+
 import CoreChart from "../../lib/components/internal-do-not-use/core-chart";
-import { PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { PageSettings, PageSettingsForm, useChartSettings } from "../common/page-settings";
 import { Page } from "../common/templates";
 
+interface ThisPageSettings extends PageSettings {
+  showInLegend?: boolean;
+}
+
 export default function () {
-  const { chartProps } = useChartSettings();
+  const { chartProps, settings, setSettings } = useChartSettings<ThisPageSettings>();
   return (
     <Page
       title="Empty core chart demo"
       settings={
         <PageSettingsForm
-          selectedSettings={["showLegend", "legendPosition", "showLegendTitle", "showLegendActions", "useFallback"]}
+          selectedSettings={[
+            "showLegend",
+            "legendPosition",
+            "showLegendTitle",
+            "showLegendActions",
+            "useFallback",
+            {
+              content: (
+                <Checkbox
+                  checked={!!settings.showInLegend}
+                  onChange={({ detail }) => setSettings({ showInLegend: detail.checked })}
+                >
+                  Show in legend
+                </Checkbox>
+              ),
+            },
+          ]}
         />
       }
     >
@@ -25,7 +47,7 @@ export default function () {
         options={{
           xAxis: { min: 1, max: 50 },
           yAxis: { min: 0, max: 1 },
-          series: [{ type: "line", data: [], showInLegend: false }],
+          series: [{ type: "line", data: [], showInLegend: settings.showInLegend }],
         }}
       />
     </Page>

src/core/chart-container.tsx

@@ -32,6 +32,7 @@ interface ChartContainerProps {
   legendBottomMaxHeight?: number;
   legendPosition: "bottom" | "side";
   footer?: React.ReactNode;
+  noData?: React.ReactNode;
   fitHeight?: boolean;
   chartHeight?: number;
   chartMinHeight?: number;
@@ -49,6 +50,7 @@ export function ChartContainer({
   legendPosition,
   legendBottomMaxHeight,
   navigator,
+  noData,
   fitHeight,
   chartHeight,
   chartMinHeight,
@@ -85,6 +87,7 @@ export function ChartContainer({
           >
             {verticalAxisTitle}
             {chart(effectiveChartHeight)}
+            {noData}
           </div>
           <div className={styles["side-legend-container"]} style={{ maxBlockSize: effectiveChartHeight }}>
             {legend}
@@ -107,6 +110,8 @@ export function ChartContainer({
           (legendBottomMaxHeight ? <div style={{ maxHeight: `${legendBottomMaxHeight}px` }}>{legend}</div> : legend)}
         {footer}
       </div>
+
+      {!legend || legendPosition === "bottom" ? noData : null}
     </div>
   );
 }

src/core/chart-core.tsx

@@ -328,6 +328,7 @@ export function InternalCoreChart({
             />
           ) : null
         }
+        noData={context.noDataEnabled && <ChartNoData {...noDataOptions} i18nStrings={i18nStrings} api={api} />}
       />
 
       {context.tooltipEnabled && (
@@ -338,8 +339,6 @@ export function InternalCoreChart({
           api={api}
         />
       )}
-
-      {context.noDataEnabled && <ChartNoData {...noDataOptions} i18nStrings={i18nStrings} api={api} />}
     </div>
   );
 }

src/core/styles.scss

@@ -108,6 +108,7 @@ $side-legend-min-inline-size: max(20%, 150px);
 }
 
 .chart-plot-wrapper {
+  position: relative;
   flex: 1;
 }