impact-ui 4.0.0-alpha.9 → 4.0.1-alpha.2

package/dist/components/Chart/index.js

@@ -1,72 +1,46 @@
+!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode(':root{--ia-focus-color:#4259ee;--ia-focus-bg:#fff;--ia-focus-ring-width:2px;--ia-focus-ring-offset:2px}*,:after,:before{box-sizing:border-box}body,textarea{font-style:normal;font-weight:500}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}body{font-family:Manrope,sans-serif}.impact-notification-separator{background-color:#d9dde7;display:inline-block;height:16px;width:1.5px}.impact-notification-horizontal-separator{background-color:#d9dde7;display:inline-block;height:1px;width:100%}ul.storybook-order-list{list-style-type:disc;padding-left:12px}ul.storybook-order-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-list li strong{font-weight:800}ul.storybook-order-child-list{list-style-type:circle;padding-left:20px}ul.storybook-order-child-list li{font-size:12px;line-height:20px;padding-bottom:8px}ul.storybook-order-child-list li strong{font-weight:800}.chart-container{background:#fff;border-radius:8px;display:flex;flex-direction:column;gap:40px;height:100%;padding:12px 12px 0;position:relative;transform-origin:center center;transition:all .25s ease}.chart-container.above-chart-component{gap:16px}.chart-container.card-container{box-shadow:0 0 4px #0000001f}.chart-container.fullscreen-animating{animation:expandAnim .2s ease forwards}.chart-container.fullscreen-animating-out{animation:collapseAnim .2s ease forwards}.chart-container.expanded{padding:24px}.chart-container .chart-container-header{align-items:center;display:flex;justify-content:space-between}.chart-container .chart-container-header .chart-container-header-title{align-items:center;display:flex;gap:6px}.chart-container .chart-container-header .chart-container-header-title .chart-container-header-title-text{color:#0d152c;font-size:16px;font-style:normal;font-weight:600;line-height:24px}.chart-container .chart-container-header .chart-container-header-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px}.chart-container .divider-line{background:#d9dde7;height:16px;width:1px}.chart-custom-actions{align-items:center;display:flex;gap:12px}.highcharts-xaxis-labels text,.highcharts-yaxis-labels text{color:#60697d!important;font-family:Manrope,sans-serif;font-size:12px!important;font-weight:500}.highcharts-xaxis .highcharts-axis-title,.highcharts-yaxis .highcharts-axis-title{color:#60697d!important;font-family:Manrope,sans-serif;font-size:14px!important;font-style:normal;font-weight:500;line-height:20px}.tooltip-key{font-size:12px;font-weight:500;line-height:16px}.tooltip-value{font-size:14px;font-weight:600;line-height:24px}.highcharts-text-outline{stroke-width:0px}.chart-empty-state{align-items:center;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center}.chart-empty-state span{color:#7a8294;font-size:16px;font-weight:600;line-height:24px;text-align:center}@keyframes expandAnim{0%{opacity:.6;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@keyframes collapseAnim{0%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(.98)}}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import React__default, { useState, useRef, useEffect, useMemo } from "react";
-import default_1$1 from "../../node_modules/@mui/icons-material/FileDownloadOutlined.js";
-import default_1 from "../../node_modules/@mui/icons-material/TableChartOutlined.js";
 import Highcharts from "highcharts";
 import Highcharts3D from "highcharts/highcharts-3d";
 import HighchartsMore from "highcharts/highcharts-more";
+import HighchartsExportData from "highcharts/modules/export-data";
+import HighchartsExporting from "highcharts/modules/exporting";
 import HighchartsHeatmap from "highcharts/modules/heatmap";
+import HighchartsOfflineExporting from "highcharts/modules/offline-exporting";
 import HighchartsStock from "highcharts/modules/stock";
 import HighchartsTreemap from "highcharts/modules/treemap";
 import HighchartsVenn from "highcharts/modules/venn";
-import borderRadiusModule from "highcharts-border-radius";
+import borderRadius from "highcharts-border-radius";
 import HighchartsReact from "highcharts-react-official";
 import { getAssetUrl } from "../../utils/assetBase.js";
+
 import { Button } from "../Button/index.js";
 import { Menu } from "../Menu/index.js";
-/* empty css                  */
-const ChartDropdownUrl = getAssetUrl("icons/Chart-dropdown.svg");
-const CollapseIconUrl = getAssetUrl("icons/Collapse.svg");
-const ExpandIconUrl = getAssetUrl("icons/expand-icon.svg");
-const borderRadius = typeof borderRadiusModule === "function" ? borderRadiusModule : borderRadiusModule.default ?? (() => {
-});
-if (typeof Highcharts === "object" && "seriesTypes" in Highcharts && borderRadius) {
-  const modules = [
+import { Tooltip } from "../Tooltip/index.js";
+import default_1 from "../../node_modules/@mui/icons-material/TableChartOutlined.js";
+import default_1$1 from "../../node_modules/@mui/icons-material/FileDownloadOutlined.js";
+const ExpandIcon = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/expand-icon.svg"), ...props });
+const Collapse = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/collapse-new.svg"), ...props });
+const ChartDropdown = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/Chart-dropdown.svg"), ...props });
+const EmptyStateImage = (props) => /* @__PURE__ */ jsx("img", { alt: "", src: getAssetUrl("icons/emptyStateImage.svg"), ...props });
+if (typeof Highcharts === "object") {
+  [
     HighchartsMore,
     Highcharts3D,
     HighchartsHeatmap,
     HighchartsStock,
     HighchartsVenn,
     HighchartsTreemap,
-    borderRadius
-  ];
-  modules.forEach((mod) => {
+    borderRadius,
+    HighchartsExporting,
+    HighchartsExportData,
+    HighchartsOfflineExporting
+  ].forEach((mod) => {
     if (typeof mod === "function") mod(Highcharts);
   });
 }
-function safeStringify(value, fallback) {
-  try {
-    if (value == null) return fallback;
-    return JSON.stringify(value);
-  } catch {
-    return fallback;
-  }
-}
-function isPromiseLike(value) {
-  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
-}
-function tryFullscreen(call) {
-  try {
-    const result = call();
-    if (isPromiseLike(result)) {
-      void Promise.resolve(result).catch(() => {
-      });
-    }
-  } catch {
-  }
-}
-function chartTypesToMenuOptions(chartTypesOptions) {
-  if (!(chartTypesOptions == null ? void 0 : chartTypesOptions.length)) return [];
-  return chartTypesOptions.map((opt) => ({
-    label: opt.label,
-    value: opt.value,
-    onClick: opt.onClick ? (_opt, event) => {
-      var _a;
-      if (event) (_a = opt.onClick) == null ? void 0 : _a.call(opt, event);
-    } : void 0
-  }));
-}
-function Chart({
+const Chart = ({
   graphType = "column",
   xAxisCategories,
   xAxisTitle = "X Axis",
@@ -107,6 +81,9 @@ function Chart({
   height = null,
   width = null,
   showExpandButton = true,
+  showDownloadMenu = true,
+  showBuiltInDownloadOptions = true,
+  downloadMenuOptions = [],
   customLegend = null,
   customLegendStyle = null,
   yAxisTitleRight,
@@ -125,36 +102,59 @@ function Chart({
   colorAxisOptions = {},
   seriesOptions = null,
   additionalOptions = {},
-  className,
-  "data-testid": dataTestId
-}) {
+  hoveredXAxisIndex = null,
+  exportingOptions = {},
+  aboveChartComponent = null,
+  isEmpty = false
+}) => {
   var _a;
   const [isExpanded, setIsExpanded] = useState(false);
   const [isAnimating, setIsAnimating] = useState(false);
   const [showChartList, setShowChartList] = useState(false);
   const [selectMenuAnchor, setSelectMenuAnchor] = useState(null);
+  const [showDownloadList, setShowDownloadList] = useState(false);
+  const [downloadMenuAnchor, setDownloadMenuAnchor] = useState(null);
   const chartComponentRef = useRef(null);
   const containerRef = useRef(null);
+  const getBuiltInDownloadOptions = () => {
+    var _a2, _b;
+    const chart = (_a2 = chartComponentRef.current) == null ? void 0 : _a2.chart;
+    if (!chart) return [];
+    const globalExporting = Highcharts.getOptions().exporting || {};
+    const instanceExporting = ((_b = chart.options) == null ? void 0 : _b.exporting) || {};
+    const menuItemDefs = {
+      ...globalExporting.menuItemDefinitions || {},
+      ...instanceExporting.menuItemDefinitions || {}
+    };
+    const formatKey = (str) => {
+      const withSpaces = str.replace(/([a-z])([A-Z])/g, "$1 $2");
+      return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
+    };
+    return Object.keys(menuItemDefs).filter(
+      (item) => typeof item === "string" && item !== "separator" && item !== "viewFullscreen" && (item.startsWith("download") || item === "printChart")
+    ).map((item) => {
+      var _a3;
+      return {
+        label: ((_a3 = menuItemDefs[item]) == null ? void 0 : _a3.text) || formatKey(item),
+        value: item,
+        onClick: () => {
+          if (typeof menuItemDefs[item].onclick === "function") {
+            menuItemDefs[item].onclick.call(chart);
+          }
+          setShowDownloadList(false);
+        }
+      };
+    });
+  };
   const enterFullscreen = () => {
     const elem = containerRef.current;
     if (!elem) return;
     setIsAnimating(true);
     elem.classList.add("fullscreen-animating");
     setTimeout(() => {
-      if (!elem.isConnected) return;
-      if (elem.requestFullscreen) {
-        tryFullscreen(() => {
-          return elem.requestFullscreen();
-        });
-      } else if (elem.webkitRequestFullscreen) {
-        tryFullscreen(() => {
-          return elem.webkitRequestFullscreen();
-        });
-      } else if (elem.msRequestFullscreen) {
-        tryFullscreen(() => {
-          return elem.msRequestFullscreen();
-        });
-      }
+      if (elem.requestFullscreen) elem.requestFullscreen();
+      else if (elem.webkitRequestFullscreen) elem.webkitRequestFullscreen();
+      else if (elem.msRequestFullscreen) elem.msRequestFullscreen();
       setIsExpanded(true);
       handleChartExpand(true);
       elem.classList.remove("fullscreen-animating");
@@ -166,20 +166,9 @@ function Chart({
     setIsAnimating(true);
     elem.classList.add("fullscreen-animating-out");
     setTimeout(() => {
-      if (!elem.isConnected) return;
-      if (document.exitFullscreen) {
-        tryFullscreen(() => {
-          return document.exitFullscreen();
-        });
-      } else if (document.webkitExitFullscreen) {
-        tryFullscreen(() => {
-          return document.webkitExitFullscreen();
-        });
-      } else if (document.msExitFullscreen) {
-        tryFullscreen(() => {
-          return document.msExitFullscreen();
-        });
-      }
+      if (document.exitFullscreen) document.exitFullscreen();
+      else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
+      else if (document.msExitFullscreen) document.msExitFullscreen();
       setIsExpanded(false);
       handleChartExpand(false);
       elem.classList.remove("fullscreen-animating-out");
@@ -187,7 +176,7 @@ function Chart({
   };
   useEffect(() => {
     const handleFullscreenChange = () => {
-      const fs = document.fullscreenElement ?? document.webkitFullscreenElement ?? document.msFullscreenElement;
+      const fs = document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
       if (!fs) {
         setIsExpanded(false);
         handleChartExpand(false);
@@ -199,17 +188,16 @@ function Chart({
       document.removeEventListener("fullscreenchange", handleFullscreenChange);
       document.removeEventListener("webkitfullscreenchange", handleFullscreenChange);
     };
-  }, [handleChartExpand]);
+  }, []);
   useEffect(() => {
-    var _a2;
-    const chart = (_a2 = chartComponentRef.current) == null ? void 0 : _a2.chart;
-    if (!chart) return;
+    if (!chartComponentRef.current) return;
+    const chart = chartComponentRef.current.chart;
     const updateSize = () => {
-      const windowWidth = window.innerWidth;
       const windowHeight = window.innerHeight;
+      const windowWidth = window.innerWidth;
       chart.setSize(
-        windowWidth < 768 ? windowWidth - 40 : void 0,
-        isExpanded ? windowHeight - 98 : void 0,
+        windowWidth < 768 ? windowWidth - 40 : null,
+        isExpanded ? windowHeight - 98 : "auto",
         false
       );
     };
@@ -219,23 +207,69 @@ function Chart({
       window.removeEventListener("resize", updateSize);
     };
   }, [isExpanded]);
+  useEffect(() => {
+    if (!chartComponentRef.current) return;
+    const chart = chartComponentRef.current.chart;
+    if (!chart) return;
+    if (hoveredXAxisIndex !== null && hoveredXAxisIndex !== void 0) {
+      const points = chart.series.reduce((acc, series) => {
+        var _a2;
+        const point = (_a2 = series.points) == null ? void 0 : _a2[hoveredXAxisIndex];
+        if (point) acc.push(point);
+        return acc;
+      }, []);
+      if (points.length > 0) {
+        chart.tooltip.refresh(sharedTooltip ? points : points[0]);
+        chart.xAxis[0].drawCrosshair(null, points[0]);
+      }
+    } else {
+      chart.tooltip.hide();
+      chart.xAxis[0].hideCrosshair();
+    }
+  }, [hoveredXAxisIndex, sharedTooltip]);
+  function safeStringify(value, fallback) {
+    try {
+      if (!value) return fallback;
+      return JSON.stringify(value);
+    } catch {
+      return fallback;
+    }
+  }
   const graphData = useMemo(
     () => ({
       chart: {
         type: graphType,
         scrollablePlotArea: {
-          minWidth: showScrollX && (xAxisCategories == null ? void 0 : xAxisCategories.length) ? xAxisCategories.length * 80 : void 0,
+          minWidth: showScrollX ? (xAxisCategories == null ? void 0 : xAxisCategories.length) * 80 : void 0,
           opacity: 1,
           scrollPositionX: 0
         },
         marginBottom: chartMarginBottom,
-        width: width ?? void 0,
+        width,
         style: { fontFamily: "Manrope, sans-serif" },
-        height: isExpanded ? window.innerHeight - 108 : height ?? "auto",
-        options3d: is3D ? { enabled: true, alpha: 10, beta: 30, depth: 550, viewDistance: 10 } : void 0,
+        height: isExpanded ? window.innerHeight - 108 : height || "auto",
+        options3d: is3D ? {
+          enabled: true,
+          alpha: 10,
+          beta: 30,
+          depth: 550,
+          viewDistance: 10
+        } : void 0,
         ...chartOptions || {}
       },
-      title: { text: null, ...titleOptions || {} },
+      title: {
+        text: null,
+        // remove title
+        ...titleOptions || {}
+      },
+      exporting: {
+        buttons: {
+          contextButton: {
+            enabled: false
+          }
+        },
+        ...exportingOptions || {}
+      },
       xAxis: {
         categories: xAxisCategories,
         crosshair: true,
@@ -244,18 +278,27 @@ function Chart({
           text: xAxisTitle,
           align: "middle",
           reserveSpace: true,
-          y: xAxisTitlePositionY ?? (showScrollX ? graphType === "scatter3d" ? 130 : 40 : 3)
+          y: xAxisTitlePositionY ? xAxisTitlePositionY : showScrollX ? graphType === "scatter3d" ? 130 : 40 : 3
         },
         labels: {
           autoRotation: [-45, -60],
+          // Highcharts will choose best rotation automatically
           rotation: void 0,
-          style: { whiteSpace: "nowrap" }
+          style: {
+            whiteSpace: "nowrap"
+          }
         },
         ...xAxisOptions || {}
       },
       yAxis: [
         {
-          title: { text: yAxisTitle, x: -12, align: "middle", margin: 16 },
+          // Left axis
+          title: {
+            text: yAxisTitle,
+            x: -12,
+            align: "middle",
+            margin: 16
+          },
           lineWidth: 1,
           lineColor: "#D9DDE7",
           gridLineDashStyle: "Dash",
@@ -268,7 +311,12 @@ function Chart({
         },
         ...yAxisTitleRight ? [
           {
-            title: { text: yAxisTitleRight, x: 12, align: "middle", margin: 16 },
+            title: {
+              text: yAxisTitleRight,
+              x: 12,
+              align: "middle",
+              margin: 16
+            },
             lineWidth: 1,
             lineColor: "#D9DDE7",
             gridLineDashStyle: "Dash",
@@ -281,7 +329,11 @@ function Chart({
           }
         ] : []
       ],
-      zAxis: is3D ? { min: 0, max: 10, ...zAxisOptions || {} } : zAxisOptions && Object.keys(zAxisOptions).length ? zAxisOptions : void 0,
+      zAxis: is3D ? {
+        min: 0,
+        max: 10,
+        ...zAxisOptions || {}
+      } : zAxisOptions && Object.keys(zAxisOptions).length ? zAxisOptions : void 0,
       tooltip: {
         useHTML: true,
         className: "custom-tooltip",
@@ -291,37 +343,52 @@ function Chart({
         borderColor: "transparent",
         outside: false,
         shared: sharedTooltip,
-        shadow: { color: "rgba(0, 0, 0, 0.2)", offsetX: 2, offsetY: 2, opacity: 0.3 },
-        style: { fontFamily: "'Manrope', sans-serif", color: "#1F2B4D" },
+        shadow: {
+          color: "rgba(0, 0, 0, 0.2)",
+          offsetX: 2,
+          offsetY: 2,
+          opacity: 0.3
+        },
+        style: {
+          fontFamily: "'Manrope', sans-serif",
+          color: "#1F2B4D"
+        },
         positioner(labelWidth, labelHeight, point) {
           const chart = this.chart;
           const left = chart.plotLeft;
           const right = chart.plotLeft + chart.plotWidth;
           const top = chart.plotTop;
           const bottom = chart.plotTop + chart.plotHeight;
-          let x = (point.plotX ?? 0) + left - labelWidth / 2;
-          let y = (point.plotY ?? 0) + top - labelHeight - 10;
-          if (x < left) x = left + 5;
-          if (y < top) y = top + 5;
-          if (x + labelWidth > right) x = right - labelWidth - 5;
-          if (y + labelHeight > bottom) y = bottom - labelHeight - 5;
+          let x = point.plotX + left - labelWidth / 2;
+          let y = point.plotY + top - labelHeight - 10;
+          if (x < left) {
+            x = left + 5;
+          }
+          if (y < top) {
+            y = top + 5;
+          }
+          if (x + labelWidth > right) {
+            x = right - labelWidth - 5;
+          }
+          if (y + labelHeight > bottom) {
+            y = bottom - labelHeight - 5;
+          }
           return { x, y };
         },
-        formatter() {
+        formatter: function() {
           if (customTooltipFormatter) {
-            return customTooltipFormatter(
-              this
-            );
+            return customTooltipFormatter(this);
+          } else if (this.point.value !== void 0) {
+            return `
+            <span class="tooltip-key">X: ${this.point.x} Y: ${this.point.y}</span><br/>
+            <b class="tooltip-value">Value: ${this.point.value}</b>`;
+          } else {
+            return `
+            <span style="color:${this.color};"">●</span>
+            <span class="tooltip-key">${this.key}: </span>
+            <b class="tooltip-value">${this.y.toLocaleString()}</b>
+          `;
           }
-          const pt = this.point;
-          if (pt && pt.value !== void 0) {
-            const v = pt.value;
-            return `<span class="tooltip-key">X: ${pt.x} Y: ${pt.y}</span><br/><b class="tooltip-value">Value: ${v}</b>`;
-          }
-          const key = this.key ?? "";
-          const y = this.y;
-          const color = this.color ?? "";
-          return `<span style="color:${color}">●</span><span class="tooltip-key">${key}: </span><b class="tooltip-value">${typeof y === "number" ? y.toLocaleString() : y}</b>`;
         },
         ...tooltipOptions || {}
       },
@@ -337,15 +404,16 @@ function Chart({
           groupPadding: 0.1,
           borderWidth: 0,
           borderRadius: 8,
-          stacking: stackedColumn ? "normal" : void 0
+          stacking: stackedColumn ? "normal" : null
         },
         areaspline: { fillOpacity: 0.25 },
         heatmap: { borderWidth: 1, borderColor: "#ffffff" },
         series: {
           states: { hover: { backgroundColor: null } },
-          ...plotOptionsEvents ?? {}
+          ...plotOptionsEvents
         },
         pie: {
+          // Semi-donut chart customization
           startAngle: graphType === "semidonut" ? -90 : 0,
           endAngle: graphType === "semidonut" ? 90 : 360,
           center: ["50%", graphType === "semidonut" ? "75%" : "50%"],
@@ -379,8 +447,8 @@ function Chart({
         itemDistance: 24,
         symbolPadding: 6,
         margin: 40,
-        x: legendXPosition ?? void 0,
-        y: legendYPosition ?? void 0,
+        x: legendXPosition,
+        y: legendYPosition,
         itemStyle: {
           color: "#60697D",
           fontFamily: "Manrope, sans-serif",
@@ -389,12 +457,22 @@ function Chart({
           lineHeight: "16px",
           padding: "20px"
         },
-        itemHoverStyle: { color: "#0d152c" },
-        navigation: { activeColor: "#3E576F", animation: true, arrowSize: 12 },
+        itemHoverStyle: {
+          color: "#0d152c"
+        },
+        navigation: {
+          activeColor: "#3E576F",
+          animation: true,
+          arrowSize: 12
+        },
         ...legendOptions || {}
       },
-      series: seriesOptions ?? seriesData ?? [],
-      colorAxis: graphType === "heatmap" || graphType === "bubble" || graphType === "packedbubble" || graphType === "treemap" ? { minColor: "#ffffff", maxColor: "#658EC4", ...colorAxisOptions || {} } : colorAxisOptions && Object.keys(colorAxisOptions).length ? colorAxisOptions : void 0,
+      series: seriesOptions ?? seriesData,
+      colorAxis: graphType === "heatmap" || graphType === "bubble" || graphType === "packedbubble" || graphType === "treemap" ? {
+        minColor: "#ffffff",
+        maxColor: "#658EC4",
+        ...colorAxisOptions || {}
+      } : colorAxisOptions && Object.keys(colorAxisOptions).length ? colorAxisOptions : void 0,
       ...additionalOptions || {}
     }),
     [
@@ -423,93 +501,76 @@ function Chart({
       legendOptions,
       colorAxisOptions,
       seriesOptions,
-      additionalOptions,
-      chartMarginBottom,
-      chartOptions,
-      showSubTitle,
-      subtitleText,
-      legendXPosition,
-      legendYPosition,
-      xAxisTitlePositionY,
-      customTooltipFormatter,
-      sharedTooltip,
-      plotOptionsEvents,
-      subtitleOptions
+      additionalOptions
     ]
   );
-  const menuOptions = useMemo(
-    () => chartTypesToMenuOptions(chartTypesOptions),
-    [chartTypesOptions]
-  );
-  if (!showchart) {
-    return /* @__PURE__ */ jsx(Fragment, { children: fallbackContent });
-  }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Fragment, { children: showchart ? /* @__PURE__ */ jsxs(
     "div",
     {
       ref: containerRef,
-      className: `chart-container ${isExpanded ? "expanded" : ""} ${isAnimating ? "animating" : ""} ${cardContainer ? "card-container" : ""} ${className ?? ""}`.trim(),
-      "data-testid": dataTestId,
-      style: width ? { width } : void 0,
+      className: `chart-container ${isExpanded ? "expanded" : ""} ${isAnimating ? "animating" : ""} ${cardContainer ? "card-container" : ""} ${aboveChartComponent ? "above-chart-component" : ""}`,
+      style: width ? { width } : {},
       children: [
         showHeader && /* @__PURE__ */ jsxs("div", { className: "chart-container-header", children: [
           /* @__PURE__ */ jsxs("div", { className: "chart-container-header-title", children: [
             /* @__PURE__ */ jsx("span", { className: "chart-container-header-title-text", children: graphTitle }),
-            topLeftOptions != null && topLeftOptions !== false && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "divider-line" }),
-              topLeftOptions
-            ] })
+            !!topLeftOptions && topLeftOptions !== null && /* @__PURE__ */ jsx("div", { className: "divider-line" }),
+            topLeftOptions && topLeftOptions
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "chart-container-header-actions", children: [
-            topRightOptions != null && /* @__PURE__ */ jsx("div", { className: "chart-custom-actions", children: React__default.isValidElement(topRightOptions) ? topRightOptions : null }),
-            topRightOptions != null && /* @__PURE__ */ jsx("div", { className: "divider-line" }),
-            showSwitchButton && !isExpanded && /* @__PURE__ */ jsx(
+            topRightOptions && /* @__PURE__ */ jsx("div", { className: "chart-custom-actions", children: React__default.isValidElement(topRightOptions) ? topRightOptions : null }),
+            !!topRightOptions && topRightOptions !== null && /* @__PURE__ */ jsx("div", { className: "divider-line" }),
+            showSwitchButton && !isExpanded && /* @__PURE__ */ jsx(Tooltip, { title: "Switch to Table", variant: "tertiary", children: /* @__PURE__ */ jsx(
               Button,
               {
-                "aria-label": "Switch to table view",
                 icon: /* @__PURE__ */ jsx(default_1, {}),
                 variant: "text",
                 onClick: () => {
                   setShowChart(!showchart);
                 }
               }
-            ),
-            showChartTypeDropdown && /* @__PURE__ */ jsx(
+            ) }),
+            showChartTypeDropdown && /* @__PURE__ */ jsx(Tooltip, { title: "Change chart type", variant: "tertiary", children: /* @__PURE__ */ jsx(
               Button,
               {
-                "aria-label": "Chart type",
-                icon: /* @__PURE__ */ jsx("img", { "aria-hidden": true, alt: "", src: ChartDropdownUrl }),
+                icon: /* @__PURE__ */ jsx(ChartDropdown, {}),
                 variant: "text",
-                onClick: (e) => {
+                onClick: (event) => {
                   setShowChartList((prev) => !prev);
-                  setSelectMenuAnchor(e.currentTarget);
+                  setSelectMenuAnchor(event.currentTarget);
                 }
               }
-            ),
-            showDownloadButton && /* @__PURE__ */ jsx(
+            ) }),
+            showDownloadButton && /* @__PURE__ */ jsx(Tooltip, { title: "Download", variant: "tertiary", children: /* @__PURE__ */ jsx(
               Button,
               {
-                "aria-label": "Download chart",
                 icon: /* @__PURE__ */ jsx(default_1$1, {}),
                 variant: "text",
-                onClick: onChartDownload
+                onClick: (event) => {
+                  if (showDownloadMenu) {
+                    setShowDownloadList((prev) => !prev);
+                    setDownloadMenuAnchor(event.currentTarget);
+                  } else {
+                    onChartDownload(event);
+                  }
+                }
               }
-            ),
-            customSystemButton,
-            showExpandButton && /* @__PURE__ */ jsx(
+            ) }),
+            customSystemButton && customSystemButton,
+            showExpandButton && /* @__PURE__ */ jsx(Tooltip, { title: "Expand", variant: "tertiary", children: /* @__PURE__ */ jsx(
               Button,
               {
-                "aria-label": isExpanded ? "Exit fullscreen" : "Expand chart",
-                icon: isExpanded ? /* @__PURE__ */ jsx("img", { "aria-hidden": true, alt: "", src: CollapseIconUrl }) : /* @__PURE__ */ jsx("img", { "aria-hidden": true, alt: "", src: ExpandIconUrl }),
+                icon: isExpanded ? /* @__PURE__ */ jsx(Collapse, {}) : /* @__PURE__ */ jsx(ExpandIcon, {}),
                 variant: "text",
                 onClick: () => {
                   if (isExpanded) exitFullscreen();
                   else enterFullscreen();
                 }
               }
-            )
+            ) })
           ] })
         ] }),
+        aboveChartComponent && aboveChartComponent,
         /* @__PURE__ */ jsx(
           Menu,
           {
@@ -520,15 +581,37 @@ function Chart({
               anchorOrigin: { vertical: "bottom", horizontal: "right" }
             },
             open: showChartList,
-            options: menuOptions,
-            selected: selectedChart != null ? { value: selectedChart } : void 0,
+            options: chartTypesOptions,
+            selected: selectedChart,
             onClose: () => {
               setShowChartList(false);
             },
-            ...chartMenuProps ?? {}
+            ...chartMenuProps
           }
         ),
-        /* @__PURE__ */ jsx(
+        showDownloadMenu && /* @__PURE__ */ jsx(
+          Menu,
+          {
+            anchorEl: downloadMenuAnchor,
+            iconPlacement: "left",
+            MenuProps: {
+              transformOrigin: { vertical: "top", horizontal: "right" },
+              anchorOrigin: { vertical: "bottom", horizontal: "right" }
+            },
+            open: showDownloadList,
+            options: [
+              ...showBuiltInDownloadOptions ? getBuiltInDownloadOptions() : [],
+              ...downloadMenuOptions
+            ],
+            onClose: () => {
+              setShowDownloadList(false);
+            }
+          }
+        ),
+        isEmpty ? /* @__PURE__ */ jsxs("div", { className: "chart-empty-state", children: [
+          /* @__PURE__ */ jsx(EmptyStateImage, {}),
+          /* @__PURE__ */ jsx("span", { children: "No data to display" })
+        ] }) : /* @__PURE__ */ jsx(
           HighchartsReact,
           {
             ref: chartComponentRef,
@@ -537,19 +620,22 @@ function Chart({
           },
           safeStringify(graphData, "graph") + isExpanded
         ),
-        customLegend != null && /* @__PURE__ */ jsx(
+        customLegend && /* @__PURE__ */ jsx(
           "div",
           {
             className: "chart-custom-legend",
-            style: { marginBottom: 12, marginTop: -32, ...customLegendStyle ?? {} },
+            style: {
+              marginBottom: 12,
+              marginTop: -32,
+              ...customLegendStyle || {}
+            },
             children: React__default.isValidElement(customLegend) ? customLegend : typeof customLegend === "function" ? customLegend((_a = chartComponentRef.current) == null ? void 0 : _a.chart) : null
           }
         )
       ]
     }
-  );
-}
-Chart.displayName = "Chart";
+  ) : fallbackContent });
+};
 export {
   Chart
 };