@spteck/fluentui-react-charts 1.0.1 → 1.0.2

package/dist/components/dashboard/DashBoard.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IDashboardProps } from './IDashboardProps';
-declare const Dashboard: React.FC<IDashboardProps>;
+export declare const Dashboard: React.FC<IDashboardProps>;
 export default Dashboard;

package/dist/fluentui-react-charts.cjs.development.js

@@ -12,8 +12,8 @@ var ChartDataLabels = _interopDefault(require('chartjs-plugin-datalabels'));
 var reactChartjs2 = require('react-chartjs-2');
 var css = require('@emotion/css');
 var resizeObserver = require('@juggle/resize-observer');
-require('@fluentui/react-icons');
-require('@iconify/react');
+var reactIcons = require('@fluentui/react-icons');
+var react = require('@iconify/react');
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -2910,6 +2910,618 @@ function BarChart(_ref) {
   })));
 }
 
+var BusinessReportIcon = function BusinessReportIcon(_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 200 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 200 : _ref$height,
+    className = _ref.className,
+    style = _ref.style;
+  return React__default.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "200 400 1400 1000",
+    className: className,
+    style: _extends({
+      fill: reactComponents.tokens.colorNeutralForeground2
+    }, style),
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("g", {
+    id: "BACKGROUND"
+  }, React__default.createElement("rect", {
+    style: {
+      fill: reactComponents.tokens.colorNeutralBackground1
+    },
+    x: "200",
+    y: "400",
+    width: "1400",
+    height: "1000"
+  })), React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "486.006",
+    y: "568.026",
+    style: {
+      fill: reactComponents.tokens.colorNeutralBackground1
+    },
+    width: "1038.994",
+    height: "768.164"
+  }), React__default.createElement("path", {
+    style: {
+      fill: reactComponents.tokens.colorNeutralStroke1
+    },
+    d: "M1527.5,1338.69H483.506V565.526H1527.5V1338.69z M488.506,1333.69H1522.5V570.526H488.506V1333.69z"
+  })), React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "558.003",
+    y: "1086.698",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "164.492"
+  }), React__default.createElement("rect", {
+    x: "693.003",
+    y: "1004.672",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "246.519"
+  }), React__default.createElement("rect", {
+    x: "828.003",
+    y: "835.487",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "415.703"
+  }), React__default.createElement("rect", {
+    x: "963.003",
+    y: "955.6",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "295.591"
+  }), React__default.createElement("rect", {
+    x: "1098.003",
+    y: "825.238",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "425.952"
+  }), React__default.createElement("rect", {
+    x: "1233.003",
+    y: "847.489",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "403.701"
+  }), React__default.createElement("rect", {
+    x: "1368.003",
+    y: "699.989",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "85",
+    height: "551.201"
+  }), React__default.createElement("polygon", {
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    points: "583.634,1185.919 581.366,1181.462 723.336,1109.231 869.748,909.808 1003.791,1050.114 1141.593,912.312 1275.235,928.549 1409.365,774.548 1413.135,777.833 1277.265,933.832 1143.407,917.569 1003.709,1057.267 870.251,917.573 726.664,1113.149"
+  })), React__default.createElement("rect", {
+    x: "796.336",
+    y: "662.857",
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    width: "418.333",
+    height: "5"
+  }), React__default.createElement("rect", {
+    x: "937.543",
+    y: "717.857",
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    width: "135.92",
+    height: "5"
+  })), React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "264.978",
+    y: "441.049",
+    style: {
+      fill: reactComponents.tokens.colorNeutralBackground1
+    },
+    width: "482.581",
+    height: "379.067"
+  }), React__default.createElement("path", {
+    style: {
+      fill: reactComponents.tokens.colorNeutralStroke1
+    },
+    d: "M750.06,822.616H262.478V438.549H750.06V822.616z M267.478,817.616H745.06V443.549H267.478V817.616z"
+  })), React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "330.537",
+    y: "503.15",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "108.842",
+    height: "61.633"
+  }), React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "485.277",
+    y: "509.093",
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    width: "198.014",
+    height: "2.623"
+  }), React__default.createElement("rect", {
+    x: "485.277",
+    y: "532.656",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "198.014",
+    height: "2.623"
+  }), React__default.createElement("rect", {
+    x: "485.277",
+    y: "556.218",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "198.014",
+    height: "2.623"
+  }))), React__default.createElement("g", null, React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "381.691",
+    y: "687.747",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "22.73",
+    height: "70.417"
+  }), React__default.createElement("rect", {
+    x: "404.421",
+    y: "653.482",
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    width: "22.73",
+    height: "104.682"
+  })), React__default.createElement("g", null, React__default.createElement("rect", {
+    x: "466.491",
+    y: "641.634",
+    style: {
+      fill: reactComponents.tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "22.73",
+    height: "116.089"
+  }), React__default.createElement("rect", {
+    x: "489.221",
+    y: "714.758",
+    style: {
+      fill: reactComponents.tokens.colorBrandBackground
+    },
+    width: "22.73",
+    height: "42.965"
+  }))))));
+};
+
+var NoDashboards = function NoDashboards(props) {
+  var height = props.height;
+  return React.createElement(React.Fragment, null, React.createElement(Stack, {
+    style: {
+      height: height || "100%"
+    },
+    justifyContent: "Center",
+    alignItems: "Center"
+  }, React.createElement(BusinessReportIcon, {
+    width: 200,
+    height: 200
+  }), React.createElement(reactComponents.Text, {
+    size: 500,
+    weight: 'semibold'
+  }, "No Dashboards Available")));
+};
+
+var useRenderLabelStyles = /*#__PURE__*/reactComponents.makeStyles({
+  labelContainer: /*#__PURE__*/_extends({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /*#__PURE__*/reactComponents.shorthands.gap("6px")),
+  iconStyles: {
+    width: "26px"
+  },
+  item: {
+    paddingLeft: "15px"
+  }
+});
+
+var RenderLabel = function RenderLabel(props) {
+  var label = props.label,
+    icon = props.icon,
+    isRequired = props.isRequired;
+  var styles = useRenderLabelStyles();
+  return React.createElement(React.Fragment, null, React.createElement("div", {
+    className: styles.labelContainer
+  }, icon && React.isValidElement(icon) ? icon : React.createElement(react.Icon, {
+    icon: icon,
+    className: styles.iconStyles,
+    width: "20px",
+    height: "20px",
+    color: reactComponents.tokens.colorBrandForeground1
+  }), React.createElement(reactComponents.Caption1, {
+    style: {
+      color: reactComponents.tokens.colorBrandForeground1
+    }
+  }, label), React.createElement(reactComponents.Caption1, {
+    style: {
+      color: reactComponents.tokens.colorPaletteRedForeground1
+    }
+  }, isRequired ? " *" : "")));
+};
+
+var _templateObject$1, _templateObject2$1, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var useStyles = function useStyles() {
+  return {
+    gridContainer: css.css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n    display: grid;\n    gap: 4px;\n    padding: 8px;\n    justify-content: center;\n  "]))),
+    cell: css.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n    width: 30px;\n    height: 30px;\n    border: 1px solid ", ";\n    background-color: ", ";\n    cursor: pointer;\n    transition: background-color 150ms ease, transform 150ms ease;\n    will-change: background-color, transform;\n  "])), reactComponents.tokens.colorNeutralStroke1, reactComponents.tokens.colorNeutralBackground1),
+    hoveredCell: css.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    transform: scale(1.05);\n  "])), reactComponents.tokens.colorNeutralBackground1Hover),
+    selectedCell: css.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n  "])), reactComponents.tokens.colorNeutralBackground1Selected),
+    menuPopover: css.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    min-width: fit-content;\n  "]))),
+    bottomText: css.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    padding-left: 8px;\n    padding-right: 8px;\n  "])))
+  };
+};
+var SelectZoom = function SelectZoom(props) {
+  var onChange = props.onChange,
+    defaultValues = props.values,
+    maxCols = props.maxCols,
+    maxRows = props.maxRows;
+  var Settings = reactIcons.bundleIcon(reactIcons.Settings20Filled, reactIcons.Settings20Regular);
+  var styles = useStyles();
+  var _React$useState = React.useState(defaultValues),
+    values = _React$useState[0],
+    setValues = _React$useState[1];
+  var _React$useState2 = React.useState(null),
+    hovered = _React$useState2[0],
+    setHovered = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    open = _React$useState3[0],
+    setOpen = _React$useState3[1];
+  React.useEffect(function () {
+    setValues(defaultValues);
+  }, [defaultValues]);
+  var onOpenChange = function onOpenChange(_, data) {
+    setOpen(data.open);
+    setHovered(null);
+  };
+  var handleCellClick = function handleCellClick(row, col) {
+    var newValues = {
+      spanCols: col + 1,
+      spanRows: row + 1
+    };
+    setValues(newValues);
+    onChange == null || onChange(newValues);
+    setOpen(false);
+  };
+  var handleCellHover = function handleCellHover(row, col) {
+    setHovered({
+      spanCols: col + 1,
+      spanRows: row + 1
+    });
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    setHovered(null);
+  };
+  var renderGridCells = function renderGridCells() {
+    var cells = [];
+    var _loop = function _loop(row) {
+      var _loop2 = function _loop2(col) {
+        var isSelected = row < values.spanRows && col < values.spanCols;
+        var isHovered = hovered && row < hovered.spanRows && col < hovered.spanCols;
+        cells.push(React.createElement("div", {
+          key: row + "-" + col,
+          className: styles.cell + " " + (isHovered ? styles.hoveredCell : "") + " " + (isSelected ? styles.selectedCell : ""),
+          onMouseEnter: function onMouseEnter() {
+            return handleCellHover(row, col);
+          },
+          onClick: function onClick() {
+            return handleCellClick(row, col);
+          }
+        }));
+      };
+      for (var col = 0; col < maxCols; col++) {
+        _loop2(col);
+      }
+    };
+    for (var row = 0; row < maxRows; row++) {
+      _loop(row);
+    }
+    return cells;
+  };
+  // Compute popover width dynamically
+  var popoverWidth = React.useMemo(function () {
+    return 30 * maxCols + 4 * (maxCols - 1) + 32;
+  }, [maxCols]); // 30px for each cell, 4px gap, and 32px padding (16 left and right)
+  return React.createElement(reactComponents.Menu, {
+    open: open,
+    onOpenChange: onOpenChange
+  }, React.createElement(reactComponents.MenuTrigger, {
+    disableButtonEnhancement: true
+  }, React.createElement(reactComponents.Tooltip, {
+    content: "Configure",
+    relationship: "label"
+  }, React.createElement(reactComponents.MenuButton, {
+    icon: React.createElement(Settings, null),
+    size: "small",
+    appearance: "transparent"
+  }))), React.createElement(reactComponents.MenuPopover, {
+    style: {
+      width: popoverWidth + "px",
+      minWidth: "120px",
+      padding: 8
+    }
+  }, React.createElement("div", {
+    style: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "center",
+      gap: "6px",
+      width: "100%",
+      boxSizing: "border-box",
+      padding: "8px"
+    }
+  }, React.createElement(RenderLabel, {
+    label: "Selected Span (" + values.spanCols + " \xD7 " + values.spanRows + ")",
+    icon: React.createElement(react.Icon, {
+      icon: "fluent:number-row-20-regular",
+      width: "32",
+      height: "32"
+    })
+  })), React.createElement("div", {
+    className: styles.gridContainer,
+    style: {
+      gridTemplateColumns: "repeat(" + maxCols + ", 30px)",
+      gridTemplateRows: "repeat(" + maxRows + ", 30px)"
+    },
+    onMouseLeave: handleMouseLeave
+  }, renderGridCells()), React.createElement(reactComponents.Caption1, {
+    className: styles.bottomText
+  }, "Click to set span")));
+};
+
+var useDashboardStyles = function useDashboardStyles() {
+  return {
+    dashboardContainer: css.css({
+      display: 'grid',
+      padding: '20px',
+      gap: '16px',
+      backgroundColor: reactComponents.tokens.colorNeutralBackground2,
+      gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
+      gridAutoRows: '350px',
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      // Scrollbar styles
+      '::-webkit-scrollbar': {
+        width: '5px',
+        height: '5px'
+      },
+      '::-webkit-scrollbar-track': {
+        background: reactComponents.tokens.colorNeutralBackground4,
+        borderRadius: '10px'
+      },
+      '::-webkit-scrollbar-thumb': {
+        background: reactComponents.tokens.colorBrandStroke2Hover,
+        borderRadius: '10px'
+      },
+      '::-webkit-scrollbar-thumb:hover': {
+        background: reactComponents.tokens.colorNeutralStroke2
+      },
+      justifyContent: 'center',
+      gridAutoFlow: 'dense'
+    }),
+    cardBody: css.css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      minHeight: '320px'
+    }),
+    chartContainer: css.css({
+      flex: 1,
+      width: '100%',
+      minHeight: '280px'
+    }),
+    cardDescription: css.css({
+      color: "" + reactComponents.tokens.colorNeutralForeground2,
+      marginTop: '4px'
+    }),
+    cardWrapper: css.css({
+      position: 'relative',
+      height: '100%',
+      minHeight: '300px',
+      borderRadius: reactComponents.tokens.borderRadiusMedium,
+      transition: 'all 0.2s ease',
+      '&:hover': {
+        transform: 'translateY(-2px)',
+        boxShadow: "" + reactComponents.tokens.shadow16
+      },
+      '&:active': {
+        transform: 'translateY(0)',
+        boxShadow: "" + reactComponents.tokens.shadow8
+      }
+    })
+  };
+};
+
+var MINIMUM_DASHBOARD_WIDTH = 600;
+var MAX_ROWS = 4;
+var Dashboard = function Dashboard(_ref) {
+  var cardCharts = _ref.cardCharts,
+    theme = _ref.theme,
+    containerWidth = _ref.containerWidth,
+    _ref$containerHeight = _ref.containerHeight,
+    containerHeight = _ref$containerHeight === void 0 ? '100%' : _ref$containerHeight,
+    _ref$maxSpanRows = _ref.maxSpanRows,
+    maxSpanRows = _ref$maxSpanRows === void 0 ? MAX_ROWS : _ref$maxSpanRows;
+  var styles = useDashboardStyles();
+  var _useGraphUtils = useGraphUtils(theme),
+    getChartComponent = _useGraphUtils.getChartComponent;
+  var _useState = React.useState([]),
+    CardChartContainer = _useState[0],
+    setCardChartContainer = _useState[1];
+  var _useState2 = React.useState({}),
+    sizes = _useState2[0],
+    setSizes = _useState2[1];
+  var dragItem = React.useRef(null);
+  var dragOverItem = React.useRef(null);
+  var containerRef = React.useRef(null);
+  React__default.useEffect(function () {
+    setCardChartContainer(cardCharts);
+    setSizes(function () {
+      var initialSizes = {};
+      cardCharts.forEach(function (c) {
+        var _c$defaultSpan$spanCo, _c$defaultSpan, _c$defaultSpan$spanRo, _c$defaultSpan2;
+        initialSizes[c.id] = {
+          spanCols: (_c$defaultSpan$spanCo = (_c$defaultSpan = c.defaultSpan) == null ? void 0 : _c$defaultSpan.spanCols) != null ? _c$defaultSpan$spanCo : 1,
+          spanRows: (_c$defaultSpan$spanRo = (_c$defaultSpan2 = c.defaultSpan) == null ? void 0 : _c$defaultSpan2.spanRows) != null ? _c$defaultSpan$spanRo : 1
+        };
+      });
+      return initialSizes;
+    });
+  }, [cardCharts]);
+  React.useEffect(function () {
+    if (containerWidth <= MINIMUM_DASHBOARD_WIDTH) {
+      setSizes(function () {
+        var reset = {};
+        CardChartContainer.forEach(function (c) {
+          reset[c.id] = {
+            spanCols: 1,
+            spanRows: 1
+          };
+        });
+        return reset;
+      });
+    }
+  }, [containerWidth, CardChartContainer]);
+  var showZoom = React.useMemo(function () {
+    return containerWidth > MINIMUM_DASHBOARD_WIDTH;
+  }, [containerWidth]);
+  var _useMemo = React.useMemo(function () {
+      return {
+        minCardWidth: 350,
+        gridGap: 16,
+        containerPadding: 20
+      };
+    }, []),
+    minCardWidth = _useMemo.minCardWidth,
+    gridGap = _useMemo.gridGap,
+    containerPadding = _useMemo.containerPadding;
+  var innerWidth = containerWidth - containerPadding * 2;
+  var columns = React.useMemo(function () {
+    return Math.floor((innerWidth + gridGap) / (minCardWidth + gridGap));
+  }, [innerWidth, gridGap, minCardWidth]);
+  var maxZoom = Math.max(columns, 1);
+  var handleSort = React.useCallback(function () {
+    if (dragItem.current !== null && dragOverItem.current !== null && dragItem.current !== dragOverItem.current) {
+      var copy = [].concat(CardChartContainer);
+      var _copy$splice = copy.splice(dragItem.current, 1),
+        moved = _copy$splice[0];
+      copy.splice(dragOverItem.current, 0, moved);
+      setCardChartContainer(copy);
+    }
+    dragItem.current = null;
+    dragOverItem.current = null;
+  }, [CardChartContainer]);
+  var handleZoomSelect = React.useCallback(function (id, span) {
+    setSizes(function (prev) {
+      var _extends2;
+      return _extends({}, prev, (_extends2 = {}, _extends2[id] = {
+        spanCols: Math.min(Math.max(span.spanCols, 1), maxZoom),
+        spanRows: Math.min(Math.max(span.spanRows, 1), maxSpanRows)
+      }, _extends2));
+    });
+  }, [maxZoom, maxSpanRows]);
+  var defaultColsAndRowSpanBasedOnNumberColumns = React.useMemo(function () {
+    return CardChartContainer.reduce(function (acc, card) {
+      var _card$defaultSpan$spa, _card$defaultSpan, _card$defaultSpan$spa2, _card$defaultSpan2;
+      acc[card.id] = {
+        spanCols: Math.min((_card$defaultSpan$spa = (_card$defaultSpan = card.defaultSpan) == null ? void 0 : _card$defaultSpan.spanCols) != null ? _card$defaultSpan$spa : 1, columns),
+        spanRows: (_card$defaultSpan$spa2 = (_card$defaultSpan2 = card.defaultSpan) == null ? void 0 : _card$defaultSpan2.spanRows) != null ? _card$defaultSpan$spa2 : 1
+      };
+      return acc;
+    }, {});
+  }, [CardChartContainer, columns]);
+  var renderCards = React.useMemo(function () {
+    return CardChartContainer.map(function (cardContainer, idx) {
+      var _sizes$cardContainer$, _defaultColsAndRowSpa, _sizes$cardContainer$2, _defaultColsAndRowSpa2;
+      return React__default.createElement("div", {
+        className: styles.cardWrapper,
+        key: cardContainer.id,
+        draggable: true,
+        onDragStart: function onDragStart() {
+          return dragItem.current = idx;
+        },
+        onDragEnter: function onDragEnter() {
+          return dragOverItem.current = idx;
+        },
+        onDragOver: function onDragOver(e) {
+          return e.preventDefault();
+        },
+        onDragEnd: handleSort,
+        style: {
+          gridColumnEnd: (_sizes$cardContainer$ = sizes[cardContainer.id]) != null && _sizes$cardContainer$.spanCols ? "span " + sizes[cardContainer.id].spanCols : "span " + (((_defaultColsAndRowSpa = defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id]) == null ? void 0 : _defaultColsAndRowSpa.spanCols) || 1),
+          gridRowEnd: (_sizes$cardContainer$2 = sizes[cardContainer.id]) != null && _sizes$cardContainer$2.spanRows ? "span " + sizes[cardContainer.id].spanRows : "span " + (((_defaultColsAndRowSpa2 = defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id]) == null ? void 0 : _defaultColsAndRowSpa2.spanRows) || 1)
+        }
+      }, React__default.createElement(reactComponents.Card, {
+        className: styles.cardBody
+      }, React__default.createElement(reactComponents.CardHeader, {
+        header: React__default.createElement(reactComponents.Text, {
+          weight: "semibold",
+          size: 400
+        }, cardContainer.cardTitle),
+        action: showZoom ? React__default.createElement(SelectZoom, {
+          values: sizes[cardContainer.id] || defaultColsAndRowSpanBasedOnNumberColumns[cardContainer.id] || {
+            spanCols: 1,
+            spanRows: 1
+          },
+          maxCols: maxZoom,
+          maxRows: maxSpanRows,
+          IsOpen: false,
+          onChange: function onChange(v) {
+            return handleZoomSelect(cardContainer.id, v);
+          }
+        }) : undefined
+      }), React__default.createElement("div", {
+        className: styles.chartContainer,
+        style: {
+          height: containerHeight
+        }
+      }, theme && theme.fontSizeBase100 && getChartComponent(cardContainer.chart, theme))));
+    });
+  }, [CardChartContainer, handleSort, sizes, styles.cardBody, styles.chartContainer, showZoom, maxZoom, getChartComponent, handleZoomSelect, theme]);
+  if (CardChartContainer.length === 0) {
+    return React__default.createElement(NoDashboards, null);
+  }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    ref: containerRef,
+    className: styles.dashboardContainer
+  }, renderCards));
+};
+
+exports.Dashboard = Dashboard;
 exports.createAxisLabelFormatter = createAxisLabelFormatter;
 exports.createFluentTooltip = createFluentTooltip;
 exports.getFluentPalette = getFluentPalette;