fix: dont render legend container on empty items (#75)

* fix: dont render legend container on empty items

* fix empty legend items check

* fix no-data placement when legend is on the side

* update api snapshot

---------

Co-authored-by: Andrei Zhaleznichenka <[email protected]>

Author: jsilll

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

@@ -0,0 +1,55 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+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 { PageSettings, PageSettingsForm, useChartSettings } from "../common/page-settings";
+import { Page } from "../common/templates";
+
+interface ThisPageSettings extends PageSettings {
+  showInLegend?: boolean;
+}
+
+export default function () {
+  const { chartProps, settings, setSettings } = useChartSettings<ThisPageSettings>();
+  return (
+    <Page
+      title="Empty core chart demo"
+      settings={
+        <PageSettingsForm
+          selectedSettings={[
+            "showLegend",
+            "legendPosition",
+            "showLegendTitle",
+            "showLegendActions",
+            "useFallback",
+            {
+              content: (
+                <Checkbox
+                  checked={!!settings.showInLegend}
+                  onChange={({ detail }) => setSettings({ showInLegend: detail.checked })}
+                >
+                  Show in legend
+                </Checkbox>
+              ),
+            },
+          ]}
+        />
+      }
+    >
+      <CoreChart
+        {...omit(chartProps.cartesian, "ref")}
+        highcharts={Highcharts}
+        options={{
+          xAxis: { min: 1, max: 50 },
+          yAxis: { min: 0, max: 1 },
+          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

@@ -26,7 +26,7 @@ import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
 import { getFormatter } from "./formatters";
 import { useChartI18n } from "./i18n-utils";
 import { CoreChartProps } from "./interfaces";
-import { getPointAccessibleDescription } from "./utils";
+import { getPointAccessibleDescription, hasVisibleLegendItems } from "./utils";
 
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
@@ -302,7 +302,7 @@ export function InternalCoreChart({
         }}
         navigator={navigator}
         legend={
-          context.legendEnabled ? (
+          context.legendEnabled && hasVisibleLegendItems(options) ? (
             <ChartLegend
               {...legendOptions}
               position={legendPosition}
@@ -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;
 }
 

src/core/utils.ts

@@ -170,6 +170,21 @@ export function getChartLegendItems(chart: Highcharts.Chart): readonly LegendIte
   return legendItems;
 }
 
+export function hasVisibleLegendItems(options: Highcharts.Options) {
+  return !!options.series?.some((series) => {
+    // The pie series is not shown in the legend, but their segments are always shown.
+    if (series.type === "pie") {
+      return Array.isArray(series.data) && series.data.length > 0;
+    }
+    // We only support errorbar series that are linked to other series. Those are not represented separately
+    // in the legend, but can be controlled from the outside, using controllable items visibility API.
+    if (series.type === "errorbar") {
+      return false;
+    }
+    return series.showInLegend !== false;
+  });
+}
+
 // This function returns coordinates of a rectangle, including the target point.
 // There are differences in how the rectangle is computed, but in all cases it is supposed to
 // enclose the point's visual representation in the chart, with no extra offsets.