@spteck/fluentui-react-charts 1.0.7 → 1.0.8

package/dist/fluentui-react-charts.esm.js

@@ -1,12 +1,12 @@
-import { Chart, CategoryScale, LinearScale, BarElement, Tooltip as Tooltip$1, Legend, Title, LineElement, PointElement, Filler, ArcElement, RadialLinearScale } from 'chart.js';
-import React__default, { useMemo, useRef, useState, useEffect, createElement, Fragment, isValidElement, useCallback } from 'react';
-import { Bar, Chart as Chart$1, Line, Bubble, Doughnut, Pie, PolarArea, Radar, Scatter } from 'react-chartjs-2';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { Tooltip, Button, tokens, Caption1, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuItem, webLightTheme, Text, makeStyles, shorthands, ToggleButton, Card, CardHeader } from '@fluentui/react-components';
+import { tokens, mergeClasses, Text, makeStyles, shorthands, Caption1, Menu, MenuTrigger, Tooltip, MenuButton, MenuPopover, Button, MenuList, MenuItem, webLightTheme, ToggleButton, Card, CardHeader } from '@fluentui/react-components';
+import React__default, { createElement, Fragment, isValidElement, useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { css } from '@emotion/css';
-import { ResizeObserver } from '@juggle/resize-observer';
 import { bundleIcon, Settings20Filled, Settings20Regular } from '@fluentui/react-icons';
 import { Icon } from '@iconify/react';
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Tooltip as Tooltip$1, Filler, Legend, Title, BarElement, ArcElement, RadialLinearScale } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Line, Bar, Bubble, Chart as Chart$1, Doughnut, Pie, PolarArea, Radar, Scatter } from 'react-chartjs-2';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { openDB } from 'idb';
 
 function _arrayLikeToArray(r, a) {
@@ -186,211 +186,212 @@ function _unsupportedIterableToArray(r, a) {
   }
 }
 
-/**
- * Lightens a given hex color by a percentage amount (0 to 1).
- */
-var lightenColor = function lightenColor(hex, amount) {
-  if (!/^#?[0-9A-Fa-f]{6}$/.test(hex)) return hex;
-  if (hex.startsWith('#')) hex = hex.slice(1);
-  var r = parseInt(hex.slice(0, 2), 16);
-  var g = parseInt(hex.slice(2, 4), 16);
-  var b = parseInt(hex.slice(4, 6), 16);
-  r = Math.min(255, Math.floor(r + (255 - r) * amount));
-  g = Math.min(255, Math.floor(g + (255 - g) * amount));
-  b = Math.min(255, Math.floor(b + (255 - b) * amount));
-  var toHex = function toHex(v) {
-    return v.toString(16).padStart(2, '0');
-  };
-  return "#" + toHex(r) + toHex(g) + toHex(b);
-};
-var getFluentPalette = function getFluentPalette(_theme) {
-  return ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
-};
-/**
- * Smart Fluent tooltip generator with chart-type awareness.
- */
-function createFluentTooltip(theme) {
-  var fontFamily = theme.fontFamilyBase;
-  var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
-  var tooltipBg = theme.colorNeutralBackground1;
-  var tooltipTitleColor = theme.colorNeutralForeground1;
-  var tooltipBodyColor = theme.colorNeutralForeground2;
-  var borderColor = theme.colorNeutralStroke2;
-  var callbacks = {
-    title: function title(context) {
-      var _context$0$label, _context$;
-      return (_context$0$label = (_context$ = context[0]) == null ? void 0 : _context$.label) != null ? _context$0$label : '';
+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: tokens.colorNeutralForeground2
+    }, style),
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default.createElement("g", {
+    id: "BACKGROUND"
+  }, React__default.createElement("rect", {
+    style: {
+      fill: tokens.colorNeutralBackground1
     },
-    label: function label(item) {
-      var datasetLabel = 'label' in item.dataset && typeof item.dataset.label === 'string' ? item.dataset.label : 'Value';
-      var raw = item.raw;
-      //  Bubble format { x, y, r }
-      if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw && 'r' in raw) {
-        var x = raw.x,
-          y = raw.y,
-          r = raw.r;
-        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r;
-      }
-      //   Scatter format { x, y }
-      if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
-        var _x = raw.x,
-          _y = raw.y;
-        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y;
-      }
-      //  Floating bar [min, max]
-      if (Array.isArray(raw) && raw.length === 2) {
-        var min = raw[0],
-          max = raw[1];
-        return datasetLabel + ": " + min + " \u2013 " + max;
-      }
-      //  Default: single number or string
-      return datasetLabel + ": " + raw;
+    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: tokens.colorNeutralBackground1
     },
-    beforeTitle: function beforeTitle() {
-      return '';
+    width: "1038.994",
+    height: "768.164"
+  }), React__default.createElement("path", {
+    style: {
+      fill: tokens.colorNeutralStroke1
     },
-    afterTitle: function afterTitle() {
-      return '';
+    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: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    beforeBody: function beforeBody() {
-      return '';
+    width: "85",
+    height: "164.492"
+  }), React__default.createElement("rect", {
+    x: "693.003",
+    y: "1004.672",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    afterBody: function afterBody() {
-      return '';
+    width: "85",
+    height: "246.519"
+  }), React__default.createElement("rect", {
+    x: "828.003",
+    y: "835.487",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    beforeLabel: function beforeLabel() {
-      return '';
+    width: "85",
+    height: "415.703"
+  }), React__default.createElement("rect", {
+    x: "963.003",
+    y: "955.6",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    afterLabel: function afterLabel() {
-      return '';
+    width: "85",
+    height: "295.591"
+  }), React__default.createElement("rect", {
+    x: "1098.003",
+    y: "825.238",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    labelColor: function labelColor() {
-      return undefined;
+    width: "85",
+    height: "425.952"
+  }), React__default.createElement("rect", {
+    x: "1233.003",
+    y: "847.489",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    labelTextColor: function labelTextColor() {
-      return '';
+    width: "85",
+    height: "403.701"
+  }), React__default.createElement("rect", {
+    x: "1368.003",
+    y: "699.989",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
     },
-    footer: function footer() {
-      return '';
+    width: "85",
+    height: "551.201"
+  }), React__default.createElement("polygon", {
+    style: {
+      fill: tokens.colorBrandBackground
     },
-    beforeFooter: function beforeFooter() {
-      return '';
+    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: tokens.colorBrandBackground
     },
-    afterFooter: function afterFooter() {
-      return '';
+    width: "418.333",
+    height: "5"
+  }), React__default.createElement("rect", {
+    x: "937.543",
+    y: "717.857",
+    style: {
+      fill: tokens.colorBrandBackground
     },
-    labelPointStyle: function labelPointStyle() {
-      return {
-        pointStyle: 'circle',
-        rotation: 0,
-        radius: 5
-      };
-    }
-  };
-  return {
-    enabled: true,
-    displayColors: true,
-    boxWidth: 10,
-    boxHeight: 10,
-    boxPadding: 5,
-    backgroundColor: tooltipBg,
-    borderColor: borderColor,
-    borderWidth: 1,
-    cornerRadius: 4,
-    padding: 10,
-    titleColor: tooltipTitleColor,
-    bodyColor: tooltipBodyColor,
-    titleFont: {
-      family: fontFamily,
-      size: fontSize
+    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: tokens.colorNeutralBackground1
     },
-    bodyFont: {
-      family: fontFamily,
-      size: fontSize
+    width: "482.581",
+    height: "379.067"
+  }), React__default.createElement("path", {
+    style: {
+      fill: tokens.colorNeutralStroke1
     },
-    callbacks: callbacks
-  };
-}
-/**
- * Returns a Chart.js ticks callback to truncate long labels and add optional prefix/suffix.
- */
-var createAxisLabelFormatter = function createAxisLabelFormatter(_ref) {
-  var _ref$maxLength = _ref.maxLength,
-    maxLength = _ref$maxLength === void 0 ? 12 : _ref$maxLength,
-    _ref$suffix = _ref.suffix,
-    suffix = _ref$suffix === void 0 ? '' : _ref$suffix,
-    _ref$prefix = _ref.prefix,
-    prefix = _ref$prefix === void 0 ? '' : _ref$prefix;
-  return function (value) {
-    var label = typeof value === 'number' ? this.getLabelForValue(value) : String(value);
-    var trimmed = label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
-    return "" + prefix + trimmed + suffix;
-  };
-};
-function debounce(fn, delay) {
-  var timer = null;
-  return function () {
-    var _this = this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(function () {
-      return fn.apply(_this, args);
-    }, delay);
-  };
-}
-/**
- * useChartUtils — shared theming and chart helpers.
- */
-function useChartUtils(theme) {
-  return useMemo(function () {
-    return {
-      lightenColor: lightenColor,
-      getFluentPalette: getFluentPalette,
-      createFluentTooltip: createFluentTooltip,
-      createAxisLabelFormatter: createAxisLabelFormatter,
-      debounce: debounce
-    };
-  }, [theme]);
-}
-
-var LegendButton = function LegendButton(_ref) {
-  var label = _ref.label,
-    isVisible = _ref.isVisible,
-    color = _ref.color,
-    onClick = _ref.onClick,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    buttonRef = _ref.buttonRef;
-  return React__default.createElement(Tooltip, {
-    content: label,
-    relationship: "label"
-  }, React__default.createElement(Button, {
-    ref: buttonRef,
-    shape: "circular",
-    size: "small",
-    appearance: isVisible ? 'primary' : 'outline',
-    onClick: onClick,
-    style: _extends({
-      backgroundColor: isVisible ? color : 'transparent',
-      color: isVisible ? '#fff' : tokens.colorNeutralForeground1,
-      borderColor: color,
-      borderWidth: 1,
-      width: '100px',
-      padding: '4px 8px',
-      textAlign: 'center'
-    }, style)
-  }, React__default.createElement(Caption1, {
-    as: "span",
+    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: {
-      display: 'block',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap',
-      lineHeight: '1.25'
-    }
-  }, label)));
+      fill: 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: tokens.colorBrandBackground
+    },
+    width: "198.014",
+    height: "2.623"
+  }), React__default.createElement("rect", {
+    x: "485.277",
+    y: "532.656",
+    style: {
+      fill: tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "198.014",
+    height: "2.623"
+  }), React__default.createElement("rect", {
+    x: "485.277",
+    y: "556.218",
+    style: {
+      fill: 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: tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "22.73",
+    height: "70.417"
+  }), React__default.createElement("rect", {
+    x: "404.421",
+    y: "653.482",
+    style: {
+      fill: 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: tokens.colorNeutralForeground3,
+      opacity: 0.3
+    },
+    width: "22.73",
+    height: "116.089"
+  }), React__default.createElement("rect", {
+    x: "489.221",
+    y: "714.758",
+    style: {
+      fill: tokens.colorBrandBackground
+    },
+    width: "22.73",
+    height: "42.965"
+  }))))));
 };
 
 /**
@@ -467,920 +468,717 @@ var Stack = /*#__PURE__*/React__default.memo(function (_ref) {
 });
 Stack.displayName = "Stack";
 
-var styles = {
-  wrapper: /*#__PURE__*/css({
-    display: 'flex',
-    flexWrap: 'nowrap',
-    overflow: 'hidden',
-    justifyContent: 'center',
-    gap: 10,
-    padding: 2,
-    width: '100%',
-    boxSizing: 'border-box'
-  })
+var NoDashboards = function NoDashboards(props) {
+  var height = props.height;
+  return createElement(Fragment, null, createElement(Stack, {
+    style: {
+      height: height || "100%"
+    },
+    justifyContent: "Center",
+    alignItems: "Center"
+  }, createElement(BusinessReportIcon, {
+    width: 200,
+    height: 200
+  }), createElement(Text, {
+    size: 500,
+    weight: 'semibold'
+  }, "No Dashboards Available")));
 };
-function LegendContainer(props) {
-  var containerRef = props.containerRef,
-    visibleItems = props.visibleItems,
-    overflowItems = props.overflowItems,
-    visibleLabels = props.visibleLabels,
-    toggleLabel = props.toggleLabel,
-    renderLabel = props.renderLabel,
-    getColor = props.getColor;
-  return React__default.createElement(Stack, {
-    justifyContent: "center",
-    alignItems: "center",
-    marginLeft: "10px",
-    marginRight: "10px",
-    marginTop: "25px",
-    marginBottom: "20px"
-  }, React__default.createElement("div", {
-    ref: containerRef,
-    className: styles.wrapper
-  }, visibleItems.map(function (item) {
-    var label = item.label;
-    var isVisible = visibleLabels.length === 0 || visibleLabels.includes(label);
-    return React__default.createElement(LegendButton, {
-      key: label,
-      label: renderLabel(item),
-      color: getColor(item),
-      isVisible: isVisible,
-      onClick: function onClick() {
-        return toggleLabel(label);
-      }
-    });
-  }), overflowItems.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuTrigger, {
-    disableButtonEnhancement: true
-  }, React__default.createElement(MenuButton, {
-    size: "small",
-    appearance: "transparent"
-  }, "+", overflowItems.length)), React__default.createElement(MenuPopover, {
+
+var useRenderLabelStyles = /*#__PURE__*/makeStyles({
+  labelContainer: /*#__PURE__*/_extends({
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center"
+  }, /*#__PURE__*/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 createElement(Fragment, null, createElement("div", {
+    className: styles.labelContainer
+  }, icon && isValidElement(icon) ? icon : createElement(Icon, {
+    icon: icon,
+    className: styles.iconStyles,
+    width: "20px",
+    height: "20px",
+    color: tokens.colorBrandForeground1
+  }), createElement(Caption1, {
     style: {
-      minWidth: 'fit-content',
-      maxWidth: '200px'
+      color: tokens.colorBrandForeground1
     }
-  }, React__default.createElement(MenuList, null, overflowItems.map(function (item) {
-    var label = item.label;
-    var isVisible = visibleLabels.length === 0 || visibleLabels.includes(label);
-    return React__default.createElement(MenuItem, {
-      key: label,
-      style: {
-        padding: 0
-      }
-    }, React__default.createElement(LegendButton, {
-      label: renderLabel(item),
-      color: getColor(item),
-      isVisible: isVisible,
-      onClick: function onClick() {
-        return toggleLabel(label);
-      },
-      style: {
-        width: '100px',
-        textAlign: 'left'
-      }
-    }));
-  }))))));
-}
+  }, label), createElement(Caption1, {
+    style: {
+      color: tokens.colorPaletteRedForeground1
+    }
+  }, isRequired ? " *" : "")));
+};
 
-var BUTTON_WIDTH = 100;
-var GAP = 10;
-function useResponsiveLegend(items) {
-  var containerRef = useRef(null);
-  var _useState = useState(items.length),
-    maxVisible = _useState[0],
-    setMaxVisible = _useState[1];
-  var _useChartUtils = useChartUtils(),
-    debounce = _useChartUtils.debounce;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var useStyles = function useStyles() {
+  return {
+    gridContainer: css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    display: grid;\n    gap: 4px;\n    padding: 8px;\n    justify-content: center;\n  "]))),
+    cell: css(_templateObject2 || (_templateObject2 = _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  "])), tokens.colorNeutralStroke1, tokens.colorNeutralBackground1),
+    hoveredCell: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    transform: scale(1.05);\n  "])), tokens.colorNeutralBackground1Hover),
+    selectedCell: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n  "])), tokens.colorNeutralBackground1Selected),
+    menuPopover: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    min-width: fit-content;\n  "]))),
+    bottomText: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    padding-left: 8px;\n    padding-right: 8px;\n  "]))),
+    zoomContainer: css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '6px',
+      width: '100%',
+      boxSizing: 'border-box',
+      padding: '8px 0px'
+    })
+  };
+};
+var SelectZoom = function SelectZoom(props) {
+  var onChange = props.onChange,
+    defaultValues = props.values,
+    maxCols = props.maxCols,
+    maxRows = props.maxRows;
+  var Settings = bundleIcon(Settings20Filled, Settings20Regular);
+  var styles = useStyles();
+  var _React$useState = useState(defaultValues),
+    values = _React$useState[0],
+    setValues = _React$useState[1];
+  var _React$useState2 = useState(null),
+    hovered = _React$useState2[0],
+    setHovered = _React$useState2[1];
+  var _React$useState3 = useState(false),
+    open = _React$useState3[0],
+    setOpen = _React$useState3[1];
   useEffect(function () {
-    var measure = function measure() {
-      var _containerRef$current, _containerRef$current2;
-      var containerWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) != null ? _containerRef$current : 0;
-      var itemTotalWidth = BUTTON_WIDTH + GAP;
-      var count = Math.floor(containerWidth / itemTotalWidth);
-      setMaxVisible(count);
+    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
     };
-    var debouncedMeasure = debounce(measure, 100); // debounce resize
-    var observer = new ResizeObserver(debouncedMeasure);
-    if (containerRef.current) observer.observe(containerRef.current);
-    measure(); // initial
-    return function () {
-      return observer.disconnect();
+    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(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);
+      }
     };
-  }, [items]);
-  return {
-    containerRef: containerRef,
-    visibleItems: items.slice(0, maxVisible),
-    overflowItems: items.slice(maxVisible)
+    for (var row = 0; row < maxRows; row++) {
+      _loop(row);
+    }
+    return cells;
   };
-}
-
-var RenderLegend = function RenderLegend(_ref) {
-  var data = _ref.data,
-    visibleSeries = _ref.visibleSeries,
-    seriesColors = _ref.seriesColors,
-    toggleSeries = _ref.toggleSeries;
-  var _useResponsiveLegend = useResponsiveLegend(data),
-    containerRef = _useResponsiveLegend.containerRef,
-    visibleItems = _useResponsiveLegend.visibleItems,
-    overflowItems = _useResponsiveLegend.overflowItems;
-  return React__default.createElement(LegendContainer, {
-    containerRef: containerRef,
-    visibleItems: visibleItems,
-    overflowItems: overflowItems,
-    items: data,
-    visibleLabels: visibleSeries,
-    toggleLabel: toggleSeries,
-    renderLabel: function renderLabel(d) {
-      return d.label;
-    },
-    getColor: function getColor(d) {
-      return seriesColors[d.label];
+  // Compute popover width dynamically
+  var popoverWidth = useMemo(function () {
+    return 30 * maxCols + 4 * (maxCols - 1) + 32;
+  }, [maxCols]); // 30px for each cell, 4px gap, and 32px padding (16 left and right)
+  return createElement(Menu, {
+    open: open,
+    onOpenChange: onOpenChange
+  }, createElement(MenuTrigger, {
+    disableButtonEnhancement: true
+  }, createElement(Tooltip, {
+    content: "Configure",
+    relationship: "label"
+  }, createElement(MenuButton, {
+    icon: createElement(Settings, null),
+    size: "small",
+    appearance: "transparent"
+  }))), createElement(MenuPopover, {
+    style: {
+      width: popoverWidth + "px",
+      minWidth: "120px",
+      padding: 8
     }
-  });
+  }, createElement("div", {
+    className: styles.zoomContainer
+  }, createElement(RenderLabel, {
+    label: "Span (" + values.spanCols + " \xD7 " + values.spanRows + ")"
+  })), createElement("div", {
+    className: styles.gridContainer,
+    style: {
+      gridTemplateColumns: "repeat(" + maxCols + ", 30px)",
+      gridTemplateRows: "repeat(" + maxRows + ", 30px)"
+    },
+    onMouseLeave: handleMouseLeave
+  }, renderGridCells()), createElement(Caption1, {
+    className: styles.bottomText
+  }, "Click to set span")));
 };
 
-var _templateObject, _templateObject2;
-var useGraphGlobalStyles = function useGraphGlobalStyles() {
-  return {
-    chartWithLegend: css({
-      display: 'flex',
-      flexDirection: 'column',
-      height: '100%',
-      chartArea: {
-        flexGrow: 1,
-        minHeight: 0
-      }
-    }),
-    chartArea: css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n            flex-grow: 1;\n            min-height: 0;\n        "]))),
-    legendArea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n            margin-top: 0px;\n            padding-top: 0px;\n            \n            margin-Left: 10px;\n            margin-Right: 10px;\n       \n        "])))
-  };
+var LegendButton = function LegendButton(_ref) {
+  var label = _ref.label,
+    isVisible = _ref.isVisible,
+    color = _ref.color,
+    onClick = _ref.onClick,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    buttonRef = _ref.buttonRef;
+  return React__default.createElement(Tooltip, {
+    content: label,
+    relationship: "label"
+  }, React__default.createElement(Button, {
+    ref: buttonRef,
+    shape: "circular",
+    size: "small",
+    appearance: isVisible ? 'primary' : 'outline',
+    onClick: onClick,
+    style: _extends({
+      backgroundColor: isVisible ? color : 'transparent',
+      color: isVisible ? '#fff' : tokens.colorNeutralForeground1,
+      borderColor: color,
+      borderWidth: 1,
+      width: '100px',
+      padding: '4px 8px',
+      textAlign: 'center'
+    }, style)
+  }, React__default.createElement(Caption1, {
+    as: "span",
+    style: {
+      display: 'block',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      lineHeight: '1.25'
+    }
+  }, label)));
 };
 
-Chart.register(CategoryScale, LinearScale, BarElement, Tooltip$1, Legend, ChartDataLabels, Title);
-function BarChart(_ref) {
-  var data = _ref.data,
-    getPrimary = _ref.getPrimary,
-    getSecondary = _ref.getSecondary,
-    title = _ref.title,
-    _ref$showDatalabels = _ref.showDatalabels,
-    showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
-    _ref$stacked = _ref.stacked,
-    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
-    theme = _ref.theme;
-  var _useState = useState(function () {
-      var _data$;
-      return data.length > 1 ? data.map(function (s) {
-        return s.label;
-      }) : [(_data$ = data[0]) == null ? void 0 : _data$.label];
-    }),
-    visibleSeries = _useState[0],
-    setVisibleSeries = _useState[1];
-  var _useChartUtils = useChartUtils(theme),
-    lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
-  var styles = useGraphGlobalStyles();
-  var seriesColors = useMemo(function () {
-    return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
-      var color = lightenColor(base, 0.3);
-      acc[series.label] = color;
-      return acc;
-    }, {});
-  }, [data]);
-  var toggleSeries = function toggleSeries(label) {
-    setVisibleSeries(function (prev) {
-      var isVisible = prev.includes(label);
-      var next = isVisible ? prev.filter(function (l) {
-        return l !== label;
-      }) : [].concat(prev, [label]);
-      return next.length === 0 && data.length > 0 ? [data[0].label] : next;
-    });
-  };
-  // Extract all unique x-axis categories (from all series)
-  var allCategories = useMemo(function () {
-    var categorySet = new Set();
-    data.forEach(function (series) {
-      series.data.forEach(function (datum) {
-        categorySet.add(getPrimary(datum));
-      });
-    });
-    return Array.from(categorySet);
-  }, [data, getPrimary]);
-  // Construct Chart.js datasets
-  var chartData = useMemo(function () {
-    return {
-      labels: allCategories,
-      datasets: data.filter(function (series) {
-        return visibleSeries.includes(series.label);
-      }).map(function (series) {
-        return {
-          label: series.label,
-          backgroundColor: seriesColors[series.label],
-          data: allCategories.map(function (cat) {
-            var found = series.data.find(function (d) {
-              return getPrimary(d) === cat;
-            });
-            return found ? getSecondary(found) : 0;
-          }),
-          // Assign y-axis based on series type when stacked
-          yAxisID: stacked ? series.type === 'line' ? 'y1' : 'y' : 'y'
-        };
-      })
-    };
-  }, [data, visibleSeries, allCategories, seriesColors, stacked]);
-  var _useMemo = useMemo(function () {
-      return {
-        fontFamily: theme.fontFamilyBase,
-        fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
-        labelColor: theme.colorNeutralForeground1,
-        gridColor: theme.colorNeutralStroke2
-      };
-    }, [theme]),
-    fontFamily = _useMemo.fontFamily,
-    fontSize = _useMemo.fontSize,
-    labelColor = _useMemo.labelColor,
-    gridColor = _useMemo.gridColor;
-  var options = useMemo(function () {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: !!title,
-          text: title,
-          font: {
-            size: 14,
-            family: theme.fontFamilyBase,
-            weight: theme.fontWeightSemibold
-          },
-          color: theme.colorNeutralForeground1,
-          padding: {
-            top: 20,
-            bottom: 20
-          }
-        },
-        datalabels: {
-          display: showDatalabels,
-          color: theme.colorNeutralForeground1,
-          font: {
-            family: theme.fontFamilyBase,
-            size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
-          }
-        },
-        legend: {
-          display: false
-        },
-        tooltip: createFluentTooltip(theme)
-      },
-      scales: _extends({
-        x: {
-          stacked: stacked,
-          ticks: {
-            callback: createAxisLabelFormatter({
-              maxLength: 10
-            }),
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize
-            }
-          },
-          grid: {
-            color: gridColor
-          }
-        },
-        y: {
-          type: 'linear',
-          position: 'left',
-          stacked: stacked,
-          ticks: {
-            callback: createAxisLabelFormatter({
-              maxLength: 10
-            }),
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize
-            }
-          },
-          grid: {
-            color: gridColor
-          }
-        }
-      }, stacked && {
-        y1: {
-          type: 'linear',
-          position: 'right',
-          ticks: {
-            callback: createAxisLabelFormatter({
-              maxLength: 10
-            }),
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize
-            }
-          },
-          grid: {
-            drawOnChartArea: false
-          }
-        }
-      })
-    };
-  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
-  return React__default.createElement("div", {
-    className: styles.chartWithLegend
+var styles = {
+  wrapper: /*#__PURE__*/css({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    gap: 10,
+    padding: 2,
+    width: '100%',
+    boxSizing: 'border-box'
+  })
+};
+function LegendContainer(props) {
+  var containerRef = props.containerRef,
+    visibleItems = props.visibleItems,
+    overflowItems = props.overflowItems,
+    visibleLabels = props.visibleLabels,
+    toggleLabel = props.toggleLabel,
+    renderLabel = props.renderLabel,
+    getColor = props.getColor;
+  return React__default.createElement(Stack, {
+    justifyContent: "center",
+    alignItems: "center",
+    marginLeft: "10px",
+    marginRight: "10px",
+    marginTop: "25px",
+    marginBottom: "20px"
   }, React__default.createElement("div", {
-    className: styles.chartArea
-  }, React__default.createElement(Bar, {
-    data: chartData,
-    options: options
-  })), React__default.createElement("div", {
-    className: styles.legendArea
-  }, React__default.createElement(RenderLegend, {
-    data: data,
-    visibleSeries: visibleSeries,
-    seriesColors: seriesColors,
-    toggleSeries: toggleSeries
-  })));
-}
-
-Chart.register(ChartDataLabels);
-Chart.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Tooltip$1, Legend, Title);
-function ComboChart(_ref) {
-  var data = _ref.data,
-    getPrimary = _ref.getPrimary,
-    getSecondary = _ref.getSecondary,
-    title = _ref.title,
-    _ref$showDataLabels = _ref.showDataLabels,
-    showDataLabels = _ref$showDataLabels === void 0 ? false : _ref$showDataLabels,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme;
-  var _useState = useState(function () {
-      return data.map(function (s) {
-        return s.label;
-      });
-    }),
-    visibleSeries = _useState[0],
-    setVisibleSeries = _useState[1];
-  var styles = useGraphGlobalStyles();
-  var _useChartUtils = useChartUtils(theme),
-    lightenColor = _useChartUtils.lightenColor,
-    getFluentPalette = _useChartUtils.getFluentPalette,
-    createFluentTooltip = _useChartUtils.createFluentTooltip;
-  var seriesColors = useMemo(function () {
-    return data.reduce(function (acc, series, idx) {
-      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
-      acc[series.label] = lightenColor(base, 0.3);
-      return acc;
-    }, {});
-  }, [data, theme]);
-  var toggleSeries = function toggleSeries(label) {
-    setVisibleSeries(function (prev) {
-      var isVisible = prev.includes(label);
-      var next = isVisible ? prev.filter(function (l) {
-        return l !== label;
-      }) : [].concat(prev, [label]);
-      return next.length === 0 ? [data[0].label] : next;
-    });
-  };
-  var allCategories = useMemo(function () {
-    var set = new Set();
-    data.forEach(function (series) {
-      return series.data.forEach(function (d) {
-        return set.add(getPrimary(d));
-      });
-    });
-    return Array.from(set);
-  }, [data, getPrimary]);
-  var chartData = useMemo(function () {
-    var sortedSeries = data.filter(function (series) {
-      return visibleSeries.includes(series.label);
-    }).sort(function (a, b) {
-      // Ensure bars come before lines
-      if (a.type === 'bar' && b.type === 'line') return -1;
-      if (a.type === 'line' && b.type === 'bar') return 1;
-      return 0;
+    ref: containerRef,
+    className: styles.wrapper
+  }, visibleItems.map(function (item) {
+    var label = item.label;
+    var isVisible = visibleLabels.length === 0 || visibleLabels.includes(label);
+    return React__default.createElement(LegendButton, {
+      key: label,
+      label: renderLabel(item),
+      color: getColor(item),
+      isVisible: isVisible,
+      onClick: function onClick() {
+        return toggleLabel(label);
+      }
     });
-    return {
-      labels: allCategories,
-      datasets: sortedSeries.map(function (series) {
-        var _series$yAxisID;
-        return {
-          type: series.type,
-          label: series.label,
-          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : 'y',
-          data: allCategories.map(function (cat) {
-            var found = series.data.find(function (d) {
-              return getPrimary(d) === cat;
-            });
-            return found ? getSecondary(found) : 0;
-          }),
-          backgroundColor: seriesColors[series.label],
-          borderColor: seriesColors[series.label],
-          fill: series.type === 'bar',
-          tension: series.type === 'line' ? 0.4 : 0,
-          pointRadius: series.type === 'line' ? 3 : 0,
-          borderWidth: series.type === 'line' ? 2 : 1,
-          order: series.type === 'bar' ? 1 : 0
-        };
-      })
-    };
-  }, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);
-  var _useMemo = useMemo(function () {
-      return {
-        fontFamily: theme.fontFamilyBase,
-        fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
-        labelColor: theme.colorNeutralForeground1,
-        gridColor: theme.colorNeutralStroke2
-      };
-    }, [theme]),
-    fontFamily = _useMemo.fontFamily,
-    fontSize = _useMemo.fontSize,
-    labelColor = _useMemo.labelColor,
-    gridColor = _useMemo.gridColor;
-  var options = useMemo(function () {
-    return {
-      responsive: true,
-      maintainAspectRatio: false,
-      plugins: {
-        title: {
-          display: !!title,
-          text: title,
-          font: {
-            size: 14,
-            family: theme.fontFamilyBase,
-            weight: theme.fontWeightSemibold
-          },
-          color: theme.colorNeutralForeground1,
-          padding: {
-            top: 20,
-            bottom: 20
-          }
-        },
-        datalabels: {
-          display: showDataLabels,
-          color: theme.colorNeutralForeground1,
-          font: {
-            family: theme.fontFamilyBase,
-            size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
-          }
-        },
-        legend: {
-          display: false
-        },
-        tooltip: createFluentTooltip(theme)
-      },
-      scales: {
-        x: {
-          ticks: {
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize
-            }
-          },
-          grid: {
-            color: gridColor
-          }
-        },
-        y: {
-          position: 'left',
-          ticks: {
-            color: labelColor,
-            font: {
-              family: fontFamily,
-              size: fontSize
-            }
-          },
-          grid: {
-            color: gridColor
-          },
-          stacked: false
-        }
+  }), overflowItems.length > 0 && React__default.createElement(Menu, null, React__default.createElement(MenuTrigger, {
+    disableButtonEnhancement: true
+  }, React__default.createElement(MenuButton, {
+    size: "small",
+    appearance: "transparent"
+  }, "+", overflowItems.length)), React__default.createElement(MenuPopover, {
+    style: {
+      minWidth: 'fit-content',
+      maxWidth: '200px'
+    }
+  }, React__default.createElement(MenuList, null, overflowItems.map(function (item) {
+    var label = item.label;
+    var isVisible = visibleLabels.length === 0 || visibleLabels.includes(label);
+    return React__default.createElement(MenuItem, {
+      key: label,
+      style: {
+        padding: 0
       }
-    };
-  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles.chartWithLegend
-  }, React__default.createElement("div", {
-    className: styles.chartArea
-  }, React__default.createElement(Chart$1, {
-    type: "bar",
-    data: chartData,
-    options: options
-  })), React__default.createElement("div", {
-    className: styles.legendArea
-  }, React__default.createElement(RenderLegend, {
-    data: data,
-    visibleSeries: visibleSeries,
-    seriesColors: seriesColors,
-    toggleSeries: toggleSeries
-  }))));
+    }, React__default.createElement(LegendButton, {
+      label: renderLabel(item),
+      color: getColor(item),
+      isVisible: isVisible,
+      onClick: function onClick() {
+        return toggleLabel(label);
+      },
+      style: {
+        width: '100px',
+        textAlign: 'left'
+      }
+    }));
+  }))))));
 }
 
-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: tokens.colorNeutralForeground2
-    }, style),
-    xmlns: "http://www.w3.org/2000/svg"
-  }, React__default.createElement("g", {
-    id: "BACKGROUND"
-  }, React__default.createElement("rect", {
-    style: {
-      fill: 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: tokens.colorNeutralBackground1
-    },
-    width: "1038.994",
-    height: "768.164"
-  }), React__default.createElement("path", {
-    style: {
-      fill: 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: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "164.492"
-  }), React__default.createElement("rect", {
-    x: "693.003",
-    y: "1004.672",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "246.519"
-  }), React__default.createElement("rect", {
-    x: "828.003",
-    y: "835.487",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "415.703"
-  }), React__default.createElement("rect", {
-    x: "963.003",
-    y: "955.6",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "295.591"
-  }), React__default.createElement("rect", {
-    x: "1098.003",
-    y: "825.238",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "425.952"
-  }), React__default.createElement("rect", {
-    x: "1233.003",
-    y: "847.489",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "403.701"
-  }), React__default.createElement("rect", {
-    x: "1368.003",
-    y: "699.989",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
-    },
-    width: "85",
-    height: "551.201"
-  }), React__default.createElement("polygon", {
-    style: {
-      fill: tokens.colorBrandBackground
+/**
+ * Lightens a given hex color by a percentage amount (0 to 1).
+ */
+var lightenColor = function lightenColor(hex, amount) {
+  if (!/^#?[0-9A-Fa-f]{6}$/.test(hex)) return hex;
+  if (hex.startsWith('#')) hex = hex.slice(1);
+  var r = parseInt(hex.slice(0, 2), 16);
+  var g = parseInt(hex.slice(2, 4), 16);
+  var b = parseInt(hex.slice(4, 6), 16);
+  r = Math.min(255, Math.floor(r + (255 - r) * amount));
+  g = Math.min(255, Math.floor(g + (255 - g) * amount));
+  b = Math.min(255, Math.floor(b + (255 - b) * amount));
+  var toHex = function toHex(v) {
+    return v.toString(16).padStart(2, '0');
+  };
+  return "#" + toHex(r) + toHex(g) + toHex(b);
+};
+var getFluentPalette = function getFluentPalette(_theme) {
+  return ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab', '#8cd17d', '#b6992d', '#d37295', '#fabfd2', '#79706e'];
+};
+/**
+ * Smart Fluent tooltip generator with chart-type awareness.
+ */
+function createFluentTooltip(theme) {
+  var fontFamily = theme.fontFamilyBase;
+  var fontSize = parseInt(theme.fontSizeBase200.replace('px', '')) || 14;
+  var tooltipBg = theme.colorNeutralBackground1;
+  var tooltipTitleColor = theme.colorNeutralForeground1;
+  var tooltipBodyColor = theme.colorNeutralForeground2;
+  var borderColor = theme.colorNeutralStroke2;
+  var callbacks = {
+    title: function title(context) {
+      var _context$0$label, _context$;
+      return (_context$0$label = (_context$ = context[0]) == null ? void 0 : _context$.label) != null ? _context$0$label : '';
     },
-    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: tokens.colorBrandBackground
+    label: function label(item) {
+      var datasetLabel = 'label' in item.dataset && typeof item.dataset.label === 'string' ? item.dataset.label : 'Value';
+      var raw = item.raw;
+      //  Bubble format { x, y, r }
+      if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw && 'r' in raw) {
+        var x = raw.x,
+          y = raw.y,
+          r = raw.r;
+        return datasetLabel + " \u2014 x: " + x + ", y: " + y + ", r: " + r;
+      }
+      //   Scatter format { x, y }
+      if (typeof raw === 'object' && raw !== null && 'x' in raw && 'y' in raw) {
+        var _x = raw.x,
+          _y = raw.y;
+        return datasetLabel + " \u2014 x: " + _x + ", y: " + _y;
+      }
+      //  Floating bar [min, max]
+      if (Array.isArray(raw) && raw.length === 2) {
+        var min = raw[0],
+          max = raw[1];
+        return datasetLabel + ": " + min + " \u2013 " + max;
+      }
+      //  Default: single number or string
+      return datasetLabel + ": " + raw;
     },
-    width: "418.333",
-    height: "5"
-  }), React__default.createElement("rect", {
-    x: "937.543",
-    y: "717.857",
-    style: {
-      fill: tokens.colorBrandBackground
+    beforeTitle: function beforeTitle() {
+      return '';
     },
-    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: tokens.colorNeutralBackground1
+    afterTitle: function afterTitle() {
+      return '';
     },
-    width: "482.581",
-    height: "379.067"
-  }), React__default.createElement("path", {
-    style: {
-      fill: tokens.colorNeutralStroke1
+    beforeBody: function beforeBody() {
+      return '';
     },
-    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: tokens.colorNeutralForeground3,
-      opacity: 0.3
+    afterBody: function afterBody() {
+      return '';
     },
-    width: "108.842",
-    height: "61.633"
-  }), React__default.createElement("g", null, React__default.createElement("rect", {
-    x: "485.277",
-    y: "509.093",
-    style: {
-      fill: tokens.colorBrandBackground
+    beforeLabel: function beforeLabel() {
+      return '';
     },
-    width: "198.014",
-    height: "2.623"
-  }), React__default.createElement("rect", {
-    x: "485.277",
-    y: "532.656",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
+    afterLabel: function afterLabel() {
+      return '';
     },
-    width: "198.014",
-    height: "2.623"
-  }), React__default.createElement("rect", {
-    x: "485.277",
-    y: "556.218",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
+    labelColor: function labelColor() {
+      return undefined;
     },
-    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: tokens.colorNeutralForeground3,
-      opacity: 0.3
+    labelTextColor: function labelTextColor() {
+      return '';
     },
-    width: "22.73",
-    height: "70.417"
-  }), React__default.createElement("rect", {
-    x: "404.421",
-    y: "653.482",
-    style: {
-      fill: tokens.colorBrandBackground
+    footer: function footer() {
+      return '';
     },
-    width: "22.73",
-    height: "104.682"
-  })), React__default.createElement("g", null, React__default.createElement("rect", {
-    x: "466.491",
-    y: "641.634",
-    style: {
-      fill: tokens.colorNeutralForeground3,
-      opacity: 0.3
+    beforeFooter: function beforeFooter() {
+      return '';
     },
-    width: "22.73",
-    height: "116.089"
-  }), React__default.createElement("rect", {
-    x: "489.221",
-    y: "714.758",
-    style: {
-      fill: tokens.colorBrandBackground
+    afterFooter: function afterFooter() {
+      return '';
     },
-    width: "22.73",
-    height: "42.965"
-  }))))));
-};
-
-var NoDashboards = function NoDashboards(props) {
-  var height = props.height;
-  return createElement(Fragment, null, createElement(Stack, {
-    style: {
-      height: height || "100%"
+    labelPointStyle: function labelPointStyle() {
+      return {
+        pointStyle: 'circle',
+        rotation: 0,
+        radius: 5
+      };
+    }
+  };
+  return {
+    enabled: true,
+    displayColors: true,
+    boxWidth: 10,
+    boxHeight: 10,
+    boxPadding: 5,
+    backgroundColor: tooltipBg,
+    borderColor: borderColor,
+    borderWidth: 1,
+    cornerRadius: 4,
+    padding: 10,
+    titleColor: tooltipTitleColor,
+    bodyColor: tooltipBodyColor,
+    titleFont: {
+      family: fontFamily,
+      size: fontSize
     },
-    justifyContent: "Center",
-    alignItems: "Center"
-  }, createElement(BusinessReportIcon, {
-    width: 200,
-    height: 200
-  }), createElement(Text, {
-    size: 500,
-    weight: 'semibold'
-  }, "No Dashboards Available")));
+    bodyFont: {
+      family: fontFamily,
+      size: fontSize
+    },
+    callbacks: callbacks
+  };
+}
+/**
+ * Returns a Chart.js ticks callback to truncate long labels and add optional prefix/suffix.
+ */
+var createAxisLabelFormatter = function createAxisLabelFormatter(_ref) {
+  var _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? 12 : _ref$maxLength,
+    _ref$suffix = _ref.suffix,
+    suffix = _ref$suffix === void 0 ? '' : _ref$suffix,
+    _ref$prefix = _ref.prefix,
+    prefix = _ref$prefix === void 0 ? '' : _ref$prefix;
+  return function (value) {
+    var label = typeof value === 'number' ? this.getLabelForValue(value) : String(value);
+    var trimmed = label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
+    return "" + prefix + trimmed + suffix;
+  };
 };
+function debounce(fn, delay) {
+  var timer = null;
+  return function () {
+    var _this = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(function () {
+      return fn.apply(_this, args);
+    }, delay);
+  };
+}
+/**
+ * useChartUtils — shared theming and chart helpers.
+ */
+function useChartUtils(theme) {
+  return useMemo(function () {
+    return {
+      lightenColor: lightenColor,
+      getFluentPalette: getFluentPalette,
+      createFluentTooltip: createFluentTooltip,
+      createAxisLabelFormatter: createAxisLabelFormatter,
+      debounce: debounce
+    };
+  }, [theme]);
+}
 
-var useRenderLabelStyles = /*#__PURE__*/makeStyles({
-  labelContainer: /*#__PURE__*/_extends({
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    alignItems: "center"
-  }, /*#__PURE__*/shorthands.gap("6px")),
-  iconStyles: {
-    width: "26px"
-  },
-  item: {
-    paddingLeft: "15px"
-  }
-});
+var BUTTON_WIDTH = 100;
+var GAP = 10;
+function useResponsiveLegend(items) {
+  var containerRef = useRef(null);
+  var _useState = useState(items.length),
+    maxVisible = _useState[0],
+    setMaxVisible = _useState[1];
+  var _useChartUtils = useChartUtils(),
+    debounce = _useChartUtils.debounce;
+  useEffect(function () {
+    var measure = function measure() {
+      var _containerRef$current, _containerRef$current2;
+      var containerWidth = (_containerRef$current = (_containerRef$current2 = containerRef.current) == null ? void 0 : _containerRef$current2.offsetWidth) != null ? _containerRef$current : 0;
+      var itemTotalWidth = BUTTON_WIDTH + GAP;
+      var count = Math.floor(containerWidth / itemTotalWidth);
+      setMaxVisible(count);
+    };
+    var debouncedMeasure = debounce(measure, 100); // debounce resize
+    var observer = new ResizeObserver(debouncedMeasure);
+    if (containerRef.current) observer.observe(containerRef.current);
+    measure(); // initial
+    return function () {
+      return observer.disconnect();
+    };
+  }, [items]);
+  return {
+    containerRef: containerRef,
+    visibleItems: items.slice(0, maxVisible),
+    overflowItems: items.slice(maxVisible)
+  };
+}
 
-var RenderLabel = function RenderLabel(props) {
-  var label = props.label,
-    icon = props.icon,
-    isRequired = props.isRequired;
-  var styles = useRenderLabelStyles();
-  return createElement(Fragment, null, createElement("div", {
-    className: styles.labelContainer
-  }, icon && isValidElement(icon) ? icon : createElement(Icon, {
-    icon: icon,
-    className: styles.iconStyles,
-    width: "20px",
-    height: "20px",
-    color: tokens.colorBrandForeground1
-  }), createElement(Caption1, {
-    style: {
-      color: tokens.colorBrandForeground1
-    }
-  }, label), createElement(Caption1, {
-    style: {
-      color: tokens.colorPaletteRedForeground1
+var RenderLegend = function RenderLegend(_ref) {
+  var data = _ref.data,
+    visibleSeries = _ref.visibleSeries,
+    seriesColors = _ref.seriesColors,
+    toggleSeries = _ref.toggleSeries;
+  var _useResponsiveLegend = useResponsiveLegend(data),
+    containerRef = _useResponsiveLegend.containerRef,
+    visibleItems = _useResponsiveLegend.visibleItems,
+    overflowItems = _useResponsiveLegend.overflowItems;
+  return React__default.createElement(LegendContainer, {
+    containerRef: containerRef,
+    visibleItems: visibleItems,
+    overflowItems: overflowItems,
+    items: data,
+    visibleLabels: visibleSeries,
+    toggleLabel: toggleSeries,
+    renderLabel: function renderLabel(d) {
+      return d.label;
+    },
+    getColor: function getColor(d) {
+      return seriesColors[d.label];
     }
-  }, isRequired ? " *" : "")));
+  });
 };
 
-var _templateObject$1, _templateObject2$1, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var useStyles = function useStyles() {
+var _templateObject$1, _templateObject2$1;
+var useGraphGlobalStyles = function useGraphGlobalStyles() {
   return {
-    gridContainer: css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n    display: grid;\n    gap: 4px;\n    padding: 8px;\n    justify-content: center;\n  "]))),
-    cell: 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  "])), tokens.colorNeutralStroke1, tokens.colorNeutralBackground1),
-    hoveredCell: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    transform: scale(1.05);\n  "])), tokens.colorNeutralBackground1Hover),
-    selectedCell: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n  "])), tokens.colorNeutralBackground1Selected),
-    menuPopover: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    min-width: fit-content;\n  "]))),
-    bottomText: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    padding-left: 8px;\n    padding-right: 8px;\n  "]))),
-    zoomContainer: css({
-      display: 'flex',
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: '6px',
-      width: '100%',
-      boxSizing: 'border-box',
-      padding: '8px 0px'
-    })
+    chartWithLegend: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      chartArea: {
+        flexGrow: 1,
+        minHeight: 0
+      }
+    }),
+    chartArea: css(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n            flex-grow: 1;\n            min-height: 0;\n        "]))),
+    legendArea: css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n            margin-top: 0px;\n            padding-top: 0px;\n            \n            margin-Left: 10px;\n            margin-Right: 10px;\n       \n        "])))
   };
 };
-var SelectZoom = function SelectZoom(props) {
-  var onChange = props.onChange,
-    defaultValues = props.values,
-    maxCols = props.maxCols,
-    maxRows = props.maxRows;
-  var Settings = bundleIcon(Settings20Filled, Settings20Regular);
-  var styles = useStyles();
-  var _React$useState = useState(defaultValues),
-    values = _React$useState[0],
-    setValues = _React$useState[1];
-  var _React$useState2 = useState(null),
-    hovered = _React$useState2[0],
-    setHovered = _React$useState2[1];
-  var _React$useState3 = useState(false),
-    open = _React$useState3[0],
-    setOpen = _React$useState3[1];
-  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
+
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip$1, Filler, Legend, ChartDataLabels, Title);
+function AreaChart(_ref) {
+  var data = _ref.data,
+    getPrimary = _ref.getPrimary,
+    getSecondary = _ref.getSecondary,
+    title = _ref.title,
+    _ref$showDatalabels = _ref.showDatalabels,
+    showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
+  var _useState = useState(function () {
+      var _data$;
+      return data.length > 1 ? data.map(function (s) {
+        return s.label;
+      }) : [(_data$ = data[0]) == null ? void 0 : _data$.label];
+    }),
+    visibleSeries = _useState[0],
+    setVisibleSeries = _useState[1];
+  var styles = useGraphGlobalStyles();
+  var _useChartUtils = useChartUtils(theme),
+    lightenColor = _useChartUtils.lightenColor,
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    createFluentTooltip = _useChartUtils.createFluentTooltip;
+  var seriesColors = useMemo(function () {
+    return data.reduce(function (acc, series, idx) {
+      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      var color = lightenColor(base, 0.3);
+      acc[series.label] = color;
+      return acc;
+    }, {});
+  }, [data, theme]);
+  var toggleSeries = function toggleSeries(label) {
+    setVisibleSeries(function (prev) {
+      var isVisible = prev.includes(label);
+      var next = isVisible ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+      return next.length === 0 && data.length > 0 ? [data[0].label] : next;
     });
   };
-  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(createElement("div", {
-          key: row + "-" + col,
-          className: styles.cell + " " + (isHovered ? styles.hoveredCell : "") + " " + (isSelected ? styles.selectedCell : ""),
-          onMouseEnter: function onMouseEnter() {
-            return handleCellHover(row, col);
+  var allCategories = useMemo(function () {
+    var set = new Set();
+    data.forEach(function (series) {
+      series.data.forEach(function (d) {
+        return set.add(getPrimary(d));
+      });
+    });
+    return Array.from(set);
+  }, [data, getPrimary]);
+  var chartData = useMemo(function () {
+    return {
+      labels: allCategories,
+      datasets: data.filter(function (series) {
+        return visibleSeries.includes(series.label);
+      }).map(function (series) {
+        return {
+          label: series.label,
+          data: allCategories.map(function (cat) {
+            var match = series.data.find(function (d) {
+              return getPrimary(d) === cat;
+            });
+            return match ? getSecondary(match) : null;
+          }),
+          borderColor: seriesColors[series.label],
+          backgroundColor: seriesColors[series.label],
+          fill: true,
+          tension: 0.4,
+          pointRadius: 2
+        };
+      })
+    };
+  }, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);
+  var _useMemo = useMemo(function () {
+      return {
+        fontFamily: theme.fontFamilyBase,
+        fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
+        labelColor: theme.colorNeutralForeground1,
+        gridColor: theme.colorNeutralStroke2
+      };
+    }, [theme]),
+    fontFamily = _useMemo.fontFamily,
+    fontSize = _useMemo.fontSize,
+    labelColor = _useMemo.labelColor,
+    gridColor = _useMemo.gridColor;
+  var options = useMemo(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!title,
+          text: title,
+          font: {
+            size: 14,
+            family: theme.fontFamilyBase,
+            weight: theme.fontWeightSemibold
           },
-          onClick: function onClick() {
-            return handleCellClick(row, col);
+          color: theme.colorNeutralForeground1,
+          padding: {
+            top: 20,
+            bottom: 20
           }
-        }));
-      };
-      for (var col = 0; col < maxCols; col++) {
-        _loop2(col);
+        },
+        datalabels: {
+          display: showDatalabels,
+          color: theme.colorNeutralForeground1,
+          font: {
+            family: theme.fontFamilyBase,
+            size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
+          }
+        },
+        legend: {
+          display: false
+        },
+        tooltip: createFluentTooltip(theme)
+      },
+      scales: {
+        x: {
+          stacked: stacked,
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          stacked: stacked,
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
       }
     };
-    for (var row = 0; row < maxRows; row++) {
-      _loop(row);
-    }
-    return cells;
-  };
-  // Compute popover width dynamically
-  var popoverWidth = useMemo(function () {
-    return 30 * maxCols + 4 * (maxCols - 1) + 32;
-  }, [maxCols]); // 30px for each cell, 4px gap, and 32px padding (16 left and right)
-  return createElement(Menu, {
-    open: open,
-    onOpenChange: onOpenChange
-  }, createElement(MenuTrigger, {
-    disableButtonEnhancement: true
-  }, createElement(Tooltip, {
-    content: "Configure",
-    relationship: "label"
-  }, createElement(MenuButton, {
-    icon: createElement(Settings, null),
-    size: "small",
-    appearance: "transparent"
-  }))), createElement(MenuPopover, {
-    style: {
-      width: popoverWidth + "px",
-      minWidth: "120px",
-      padding: 8
-    }
-  }, createElement("div", {
-    className: styles.zoomContainer
-  }, createElement(RenderLabel, {
-    label: "Span (" + values.spanCols + " \xD7 " + values.spanRows + ")"
-  })), createElement("div", {
-    className: styles.gridContainer,
-    style: {
-      gridTemplateColumns: "repeat(" + maxCols + ", 30px)",
-      gridTemplateRows: "repeat(" + maxRows + ", 30px)"
-    },
-    onMouseLeave: handleMouseLeave
-  }, renderGridCells()), createElement(Caption1, {
-    className: styles.bottomText
-  }, "Click to set span")));
-};
+  }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Line, {
+    data: chartData,
+    options: options
+  })), React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  }));
+}
 
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip$1, Filler, Legend, ChartDataLabels, Title);
-function AreaChart(_ref) {
+Chart.register(CategoryScale, LinearScale, BarElement, Tooltip$1, Legend, ChartDataLabels, Title);
+function BarChart(_ref) {
   var data = _ref.data,
     getPrimary = _ref.getPrimary,
     getSecondary = _ref.getSecondary,
     title = _ref.title,
     _ref$showDatalabels = _ref.showDatalabels,
     showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme,
     _ref$stacked = _ref.stacked,
-    stacked = _ref$stacked === void 0 ? false : _ref$stacked;
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    theme = _ref.theme;
   var _useState = useState(function () {
       var _data$;
       return data.length > 1 ? data.map(function (s) {
@@ -1389,11 +1187,11 @@ function AreaChart(_ref) {
     }),
     visibleSeries = _useState[0],
     setVisibleSeries = _useState[1];
-  var styles = useGraphGlobalStyles();
   var _useChartUtils = useChartUtils(theme),
     lightenColor = _useChartUtils.lightenColor,
     getFluentPalette = _useChartUtils.getFluentPalette,
     createFluentTooltip = _useChartUtils.createFluentTooltip;
+  var styles = useGraphGlobalStyles();
   var seriesColors = useMemo(function () {
     return data.reduce(function (acc, series, idx) {
       var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
@@ -1401,7 +1199,7 @@ function AreaChart(_ref) {
       acc[series.label] = color;
       return acc;
     }, {});
-  }, [data, theme]);
+  }, [data]);
   var toggleSeries = function toggleSeries(label) {
     setVisibleSeries(function (prev) {
       var isVisible = prev.includes(label);
@@ -1411,15 +1209,17 @@ function AreaChart(_ref) {
       return next.length === 0 && data.length > 0 ? [data[0].label] : next;
     });
   };
+  // Extract all unique x-axis categories (from all series)
   var allCategories = useMemo(function () {
-    var set = new Set();
+    var categorySet = new Set();
     data.forEach(function (series) {
-      series.data.forEach(function (d) {
-        return set.add(getPrimary(d));
+      series.data.forEach(function (datum) {
+        categorySet.add(getPrimary(datum));
       });
     });
-    return Array.from(set);
+    return Array.from(categorySet);
   }, [data, getPrimary]);
+  // Construct Chart.js datasets
   var chartData = useMemo(function () {
     return {
       labels: allCategories,
@@ -1428,21 +1228,19 @@ function AreaChart(_ref) {
       }).map(function (series) {
         return {
           label: series.label,
+          backgroundColor: seriesColors[series.label],
           data: allCategories.map(function (cat) {
-            var match = series.data.find(function (d) {
+            var found = series.data.find(function (d) {
               return getPrimary(d) === cat;
             });
-            return match ? getSecondary(match) : null;
+            return found ? getSecondary(found) : 0;
           }),
-          borderColor: seriesColors[series.label],
-          backgroundColor: seriesColors[series.label],
-          fill: true,
-          tension: 0.4,
-          pointRadius: 2
+          // Assign y-axis based on series type when stacked
+          yAxisID: stacked ? series.type === 'line' ? 'y1' : 'y' : 'y'
         };
       })
     };
-  }, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);
+  }, [data, visibleSeries, allCategories, seriesColors, stacked]);
   var _useMemo = useMemo(function () {
       return {
         fontFamily: theme.fontFamilyBase,
@@ -1487,10 +1285,13 @@ function AreaChart(_ref) {
         },
         tooltip: createFluentTooltip(theme)
       },
-      scales: {
+      scales: _extends({
         x: {
           stacked: stacked,
           ticks: {
+            callback: createAxisLabelFormatter({
+              maxLength: 10
+            }),
             color: labelColor,
             font: {
               family: fontFamily,
@@ -1502,8 +1303,13 @@ function AreaChart(_ref) {
           }
         },
         y: {
+          type: 'linear',
+          position: 'left',
           stacked: stacked,
           ticks: {
+            callback: createAxisLabelFormatter({
+              maxLength: 10
+            }),
             color: labelColor,
             font: {
               family: fontFamily,
@@ -1514,22 +1320,42 @@ function AreaChart(_ref) {
             color: gridColor
           }
         }
-      }
+      }, stacked && {
+        y1: {
+          type: 'linear',
+          position: 'right',
+          ticks: {
+            callback: createAxisLabelFormatter({
+              maxLength: 10
+            }),
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            drawOnChartArea: false
+          }
+        }
+      })
     };
   }, [title, showDatalabels, theme, fontFamily, fontSize, labelColor, gridColor, stacked, createFluentTooltip]);
   return React__default.createElement("div", {
     className: styles.chartWithLegend
   }, React__default.createElement("div", {
     className: styles.chartArea
-  }, React__default.createElement(Line, {
+  }, React__default.createElement(Bar, {
     data: chartData,
     options: options
-  })), React__default.createElement(RenderLegend, {
+  })), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderLegend, {
     data: data,
     visibleSeries: visibleSeries,
     seriesColors: seriesColors,
     toggleSeries: toggleSeries
-  }));
+  })));
 }
 
 Chart.register(CategoryScale, LinearScale, BarElement, Tooltip$1, Legend, Title, ChartDataLabels);
@@ -1846,6 +1672,180 @@ function BubbleChart(_ref) {
   }))));
 }
 
+Chart.register(ChartDataLabels);
+Chart.register(CategoryScale, LinearScale, BarElement, LineElement, PointElement, Tooltip$1, Legend, Title);
+function ComboChart(_ref) {
+  var data = _ref.data,
+    getPrimary = _ref.getPrimary,
+    getSecondary = _ref.getSecondary,
+    title = _ref.title,
+    _ref$showDataLabels = _ref.showDataLabels,
+    showDataLabels = _ref$showDataLabels === void 0 ? false : _ref$showDataLabels,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme;
+  var _useState = useState(function () {
+      return data.map(function (s) {
+        return s.label;
+      });
+    }),
+    visibleSeries = _useState[0],
+    setVisibleSeries = _useState[1];
+  var styles = useGraphGlobalStyles();
+  var _useChartUtils = useChartUtils(theme),
+    lightenColor = _useChartUtils.lightenColor,
+    getFluentPalette = _useChartUtils.getFluentPalette,
+    createFluentTooltip = _useChartUtils.createFluentTooltip;
+  var seriesColors = useMemo(function () {
+    return data.reduce(function (acc, series, idx) {
+      var base = getFluentPalette(theme)[idx % getFluentPalette(theme).length];
+      acc[series.label] = lightenColor(base, 0.3);
+      return acc;
+    }, {});
+  }, [data, theme]);
+  var toggleSeries = function toggleSeries(label) {
+    setVisibleSeries(function (prev) {
+      var isVisible = prev.includes(label);
+      var next = isVisible ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+      return next.length === 0 ? [data[0].label] : next;
+    });
+  };
+  var allCategories = useMemo(function () {
+    var set = new Set();
+    data.forEach(function (series) {
+      return series.data.forEach(function (d) {
+        return set.add(getPrimary(d));
+      });
+    });
+    return Array.from(set);
+  }, [data, getPrimary]);
+  var chartData = useMemo(function () {
+    var sortedSeries = data.filter(function (series) {
+      return visibleSeries.includes(series.label);
+    }).sort(function (a, b) {
+      // Ensure bars come before lines
+      if (a.type === 'bar' && b.type === 'line') return -1;
+      if (a.type === 'line' && b.type === 'bar') return 1;
+      return 0;
+    });
+    return {
+      labels: allCategories,
+      datasets: sortedSeries.map(function (series) {
+        var _series$yAxisID;
+        return {
+          type: series.type,
+          label: series.label,
+          yAxisID: (_series$yAxisID = series.yAxisID) != null ? _series$yAxisID : 'y',
+          data: allCategories.map(function (cat) {
+            var found = series.data.find(function (d) {
+              return getPrimary(d) === cat;
+            });
+            return found ? getSecondary(found) : 0;
+          }),
+          backgroundColor: seriesColors[series.label],
+          borderColor: seriesColors[series.label],
+          fill: series.type === 'bar',
+          tension: series.type === 'line' ? 0.4 : 0,
+          pointRadius: series.type === 'line' ? 3 : 0,
+          borderWidth: series.type === 'line' ? 2 : 1,
+          order: series.type === 'bar' ? 1 : 0
+        };
+      })
+    };
+  }, [data, visibleSeries, allCategories, getPrimary, getSecondary, seriesColors]);
+  var _useMemo = useMemo(function () {
+      return {
+        fontFamily: theme.fontFamilyBase,
+        fontSize: parseInt(theme.fontSizeBase200.replace('px', '')) || 14,
+        labelColor: theme.colorNeutralForeground1,
+        gridColor: theme.colorNeutralStroke2
+      };
+    }, [theme]),
+    fontFamily = _useMemo.fontFamily,
+    fontSize = _useMemo.fontSize,
+    labelColor = _useMemo.labelColor,
+    gridColor = _useMemo.gridColor;
+  var options = useMemo(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: !!title,
+          text: title,
+          font: {
+            size: 14,
+            family: theme.fontFamilyBase,
+            weight: theme.fontWeightSemibold
+          },
+          color: theme.colorNeutralForeground1,
+          padding: {
+            top: 20,
+            bottom: 20
+          }
+        },
+        datalabels: {
+          display: showDataLabels,
+          color: theme.colorNeutralForeground1,
+          font: {
+            family: theme.fontFamilyBase,
+            size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
+          }
+        },
+        legend: {
+          display: false
+        },
+        tooltip: createFluentTooltip(theme)
+      },
+      scales: {
+        x: {
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          position: 'left',
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          },
+          stacked: false
+        }
+      }
+    };
+  }, [title, showDataLabels, theme, fontFamily, fontSize, labelColor, gridColor, createFluentTooltip]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Chart$1, {
+    type: "bar",
+    data: chartData,
+    options: options
+  })), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  }))));
+}
+
 var RenderValueLegend = function RenderValueLegend(_ref) {
   var entries = _ref.entries,
     visibleLabels = _ref.visibleLabels,
@@ -4083,5 +4083,5 @@ var Dashboard = function Dashboard(_ref) {
   }, renderCards));
 };
 
-export { Dashboard, createAxisLabelFormatter, createFluentTooltip, getFluentPalette, lightenColor, useChartUtils, useChartUtils as useGraphUtils };
+export { AreaChart, BarChart, BarHorizontalChart, BubbleChart, ComboChart, Dashboard, DoughnutChart, FloatingBarChart, LineChart, PieChart, PolarChart, RadarChart, ScatterChart, StackedLineChart, SteamChart, createAxisLabelFormatter, createFluentTooltip, getFluentPalette, lightenColor, useChartUtils, useChartUtils as useGraphUtils };
 //# sourceMappingURL=fluentui-react-charts.esm.js.map