@spteck/fluentui-react-charts 0.1.8

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

@@ -0,0 +1,2905 @@
+import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Tooltip as Tooltip$1, Filler, Legend, Title, BarElement, ArcElement, RadialLinearScale } from 'chart.js';
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { Tooltip, Button, tokens, Caption1, mergeClasses, Menu, MenuTrigger, MenuButton, MenuPopover, MenuList, MenuItem, webLightTheme, ToggleButton } from '@fluentui/react-components';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Line, Bar, Bubble, Chart as Chart$1, Doughnut, Pie, PolarArea, Radar, Scatter } from 'react-chartjs-2';
+import { css } from '@emotion/css';
+import { ResizeObserver } from '@juggle/resize-observer';
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _taggedTemplateLiteralLoose(e, t) {
+  return t || (t = e.slice(0)), e.raw = t, e;
+}
+
+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)));
+};
+
+/**
+ * Mapping of predefined sizes to Fluent UI tokens.
+ */
+var sizeMap = {
+  xs: tokens.spacingHorizontalXS,
+  s: tokens.spacingHorizontalS,
+  m: tokens.spacingHorizontalM,
+  l: tokens.spacingHorizontalL,
+  xl: tokens.spacingHorizontalXL,
+  xxl: tokens.spacingHorizontalXXL
+};
+/**
+ * Stack component provides a flexible layout using Flexbox.
+ * It allows stacking child components either horizontally or vertically with predefined spacing options.
+ */
+var Stack = /*#__PURE__*/React__default.memo(function (_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? "vertical" : _ref$direction,
+    _ref$justifyContent = _ref.justifyContent,
+    justifyContent = _ref$justifyContent === void 0 ? "flex-start" : _ref$justifyContent,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? "stretch" : _ref$alignItems,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    margin = _ref.margin,
+    padding = _ref.padding,
+    marginTop = _ref.marginTop,
+    marginBottom = _ref.marginBottom,
+    marginLeft = _ref.marginLeft,
+    marginRight = _ref.marginRight,
+    paddingTop = _ref.paddingTop,
+    paddingBottom = _ref.paddingBottom,
+    paddingLeft = _ref.paddingLeft,
+    paddingRight = _ref.paddingRight,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$wrap = _ref.wrap,
+    wrap = _ref$wrap === void 0 ? false : _ref$wrap,
+    children = _ref.children,
+    style = _ref.style,
+    className = _ref.className,
+    overflow = _ref.overflow,
+    background = _ref.background;
+  var stackStyle = css(_extends({
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    justifyContent: justifyContent,
+    alignItems: alignItems,
+    gap: gap && sizeMap[gap] ? sizeMap[gap] : gap,
+    columnGap: columnGap && sizeMap[columnGap] ? sizeMap[columnGap] : columnGap,
+    rowGap: rowGap && sizeMap[rowGap] ? sizeMap[rowGap] : rowGap,
+    margin: margin && sizeMap[margin] ? sizeMap[margin] : margin,
+    padding: padding && sizeMap[padding] ? sizeMap[padding] : padding,
+    marginTop: marginTop && sizeMap[marginTop] ? sizeMap[marginTop] : marginTop,
+    marginBottom: marginBottom && sizeMap[marginBottom] ? sizeMap[marginBottom] : marginBottom,
+    marginLeft: marginLeft && sizeMap[marginLeft] ? sizeMap[marginLeft] : marginLeft,
+    marginRight: marginRight && sizeMap[marginRight] ? sizeMap[marginRight] : marginRight,
+    paddingTop: paddingTop && sizeMap[paddingTop] ? sizeMap[paddingTop] : paddingTop,
+    paddingBottom: paddingBottom && sizeMap[paddingBottom] ? sizeMap[paddingBottom] : paddingBottom,
+    paddingLeft: paddingLeft && sizeMap[paddingLeft] ? sizeMap[paddingLeft] : paddingLeft,
+    paddingRight: paddingRight && sizeMap[paddingRight] ? sizeMap[paddingRight] : paddingRight,
+    width: width,
+    height: height,
+    overflow: overflow,
+    flexWrap: wrap ? "wrap" : "nowrap",
+    backgroundColor: background
+  }, style));
+  return React__default.createElement("div", {
+    className: mergeClasses(className, stackStyle)
+  }, children);
+});
+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'
+  })
+};
+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, {
+    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
+      }
+    }, React__default.createElement(LegendButton, {
+      label: renderLabel(item),
+      color: getColor(item),
+      isVisible: isVisible,
+      onClick: function onClick() {
+        return toggleLabel(label);
+      },
+      style: {
+        width: '100px',
+        textAlign: 'left'
+      }
+    }));
+  }))))));
+}
+
+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 _useGraphUtils = useGraphUtils(),
+    debounce = _useGraphUtils.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 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];
+    }
+  });
+};
+
+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        "])))
+  };
+};
+
+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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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 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
+          },
+          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: {
+          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
+          }
+        }
+      }
+    };
+  }, [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, BarElement, Tooltip$1, Legend, Title, ChartDataLabels);
+function BarHorizontalChart(_ref) {
+  var data = _ref.data,
+    getPrimary = _ref.getPrimary,
+    getSecondary = _ref.getSecondary,
+    _ref$stacked = _ref.stacked,
+    stacked = _ref$stacked === void 0 ? false : _ref$stacked,
+    _ref$showDatalabels = _ref.showDatalabels,
+    showDatalabels = _ref$showDatalabels === void 0 ? false : _ref$showDatalabels,
+    title = _ref.title,
+    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 styles = useGraphGlobalStyles();
+  var _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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]);
+  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 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]);
+  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;
+          })
+        };
+      })
+    };
+  }, [data, visibleSeries, allCategories, 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 {
+      indexAxis: 'y',
+      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: {
+          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
+          }
+        }
+      }
+    };
+  }, [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(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(CategoryScale, LinearScale, PointElement, Tooltip$1, Legend, ChartDataLabels, Title);
+function BubbleChart(_ref) {
+  var data = _ref.data,
+    getPrimary = _ref.getPrimary,
+    getSecondary = _ref.getSecondary,
+    getRadius = _ref.getRadius,
+    showDataLabels = _ref.showDataLabels,
+    title = _ref.title,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? webLightTheme : _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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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, 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 chartData = useMemo(function () {
+    return {
+      datasets: data.filter(function (series) {
+        return visibleSeries.includes(series.label);
+      }).map(function (series) {
+        return {
+          label: series.label,
+          data: series.data.map(function (d) {
+            return {
+              x: getPrimary(d),
+              y: getSecondary(d),
+              r: getRadius(d)
+            };
+          }),
+          backgroundColor: seriesColors[series.label],
+          borderColor: theme.colorNeutralStroke1,
+          borderWidth: 1,
+          hoverBorderWidth: 2
+        };
+      })
+    };
+  }, [data, visibleSeries, getPrimary, getSecondary, getRadius, 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 () {
+    var _data$2;
+    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: {
+          type: typeof getPrimary((_data$2 = data[0]) == null ? void 0 : _data$2.data[0]) === 'number' ? 'linear' : 'category',
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
+      }
+    };
+  }, [title, showDataLabels, theme, getPrimary, getSecondary, data, 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(Bubble, {
+    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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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,
+    toggleLabel = _ref.toggleLabel;
+  var _useResponsiveLegend = useResponsiveLegend(entries),
+    containerRef = _useResponsiveLegend.containerRef,
+    visibleItems = _useResponsiveLegend.visibleItems,
+    overflowItems = _useResponsiveLegend.overflowItems;
+  return React__default.createElement(LegendContainer, {
+    containerRef: containerRef,
+    visibleItems: visibleItems,
+    overflowItems: overflowItems,
+    items: entries,
+    visibleLabels: visibleLabels,
+    toggleLabel: toggleLabel,
+    renderLabel: function renderLabel(entry) {
+      return entry.label + ": " + entry.value;
+    },
+    getColor: function getColor(entry) {
+      return entry.color;
+    }
+  });
+};
+
+Chart.register(ChartDataLabels);
+Chart.register(ArcElement, Tooltip$1, Legend, Title);
+function DoughnutChart(_ref) {
+  var data = _ref.data,
+    getLabel = _ref.getLabel,
+    getValue = _ref.getValue,
+    title = _ref.title,
+    _ref$showDataLabels = _ref.showDataLabels,
+    showDataLabels = _ref$showDataLabels === void 0 ? true : _ref$showDataLabels,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme;
+  var styles = useGraphGlobalStyles();
+  var _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.createFluentTooltip;
+  var _useState = useState([]),
+    hiddenLabels = _useState[0],
+    setHiddenLabels = _useState[1];
+  var toggleLabel = function toggleLabel(label) {
+    setHiddenLabels(function (prev) {
+      return prev.includes(label) ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+    });
+  };
+  var valueMap = useMemo(function () {
+    var map = new Map();
+    data.forEach(function (series) {
+      series.data.forEach(function (d) {
+        var label = getLabel(d);
+        var value = getValue(d);
+        map.set(label, (map.get(label) || 0) + value);
+      });
+    });
+    return map;
+  }, [data, getLabel, getValue]);
+  var _useMemo = useMemo(function () {
+      var allLabels = Array.from(valueMap.keys());
+      var palette = getFluentPalette(theme);
+      var colors = allLabels.map(function (_, i) {
+        return lightenColor(palette[i % palette.length], 0.3);
+      });
+      return {
+        allLabels: allLabels,
+        colors: colors
+      };
+    }, [valueMap, getFluentPalette, theme, lightenColor]),
+    allLabels = _useMemo.allLabels,
+    colors = _useMemo.colors;
+  var _useMemo2 = useMemo(function () {
+      var filteredLabels = allLabels.filter(function (label) {
+        return !hiddenLabels.includes(label);
+      });
+      var values = filteredLabels.map(function (label) {
+        return valueMap.get(label) || 0;
+      });
+      var visibleColors = filteredLabels.map(function (label) {
+        var idx = allLabels.indexOf(label);
+        return colors[idx];
+      });
+      return {
+        filteredLabels: filteredLabels,
+        values: values,
+        visibleColors: visibleColors
+      };
+    }, [allLabels, hiddenLabels, valueMap, colors]),
+    filteredLabels = _useMemo2.filteredLabels,
+    values = _useMemo2.values,
+    visibleColors = _useMemo2.visibleColors;
+  var chartData = useMemo(function () {
+    return {
+      labels: filteredLabels,
+      datasets: [{
+        data: values,
+        backgroundColor: visibleColors,
+        borderWidth: 1
+      }]
+    };
+  }, [filteredLabels, values, visibleColors]);
+  var legendEntries = useMemo(function () {
+    return allLabels.map(function (label, idx) {
+      return {
+        label: label,
+        value: valueMap.get(label) || 0,
+        color: colors[idx]
+      };
+    });
+  }, [allLabels, valueMap, colors]);
+  var options = useMemo(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: createFluentTooltip(theme),
+        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
+          },
+          formatter: function formatter(value) {
+            return value;
+          }
+        }
+      }
+    };
+  }, [title, theme, showDataLabels, createFluentTooltip]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Doughnut, {
+    data: chartData,
+    options: options
+  })), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderValueLegend, {
+    entries: legendEntries,
+    visibleLabels: filteredLabels,
+    toggleLabel: toggleLabel
+  })));
+}
+
+Chart.register(ChartDataLabels);
+Chart.register(CategoryScale, LinearScale, BarElement, Tooltip$1, Legend, Title);
+function FloatingBarChart(_ref) {
+  var data = _ref.data,
+    getPrimary = _ref.getPrimary,
+    getRange = _ref.getRange,
+    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 () {
+      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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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 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 ? getRange(match) : [0, 0];
+          }),
+          backgroundColor: seriesColors[series.label],
+          borderRadius: 2
+        };
+      })
+    };
+  }, [data, visibleSeries, allCategories, getPrimary, getRange, 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: {
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
+      }
+    };
+  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, createFluentTooltip]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, 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(LineElement, PointElement, CategoryScale, LinearScale, Tooltip$1, Legend, Title);
+function LineChart(_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 () {
+      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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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 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],
+          tension: 0.4,
+          fill: false,
+          pointRadius: 4
+        };
+      })
+    };
+  }, [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: {
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
+      }
+    };
+  }, [title, theme, showDataLabels, labelColor, fontFamily, fontSize, gridColor, 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("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  })));
+}
+
+Chart.register(ChartDataLabels);
+Chart.register(ArcElement, Tooltip$1, Legend, Title);
+function PieChart(_ref) {
+  var data = _ref.data,
+    getLabel = _ref.getLabel,
+    getValue = _ref.getValue,
+    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 _useGraphUtils = useGraphUtils(theme),
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    lightenColor = _useGraphUtils.lightenColor;
+  var _useState = useState([]),
+    hiddenLabels = _useState[0],
+    setHiddenLabels = _useState[1];
+  var styles = useGraphGlobalStyles();
+  var toggleLabel = function toggleLabel(label) {
+    setHiddenLabels(function (prev) {
+      return prev.includes(label) ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+    });
+  };
+  var valueMap = useMemo(function () {
+    var map = new Map();
+    data.forEach(function (series) {
+      series.data.forEach(function (d) {
+        var label = getLabel(d);
+        var value = getValue(d);
+        map.set(label, (map.get(label) || 0) + value);
+      });
+    });
+    return map;
+  }, [data, getLabel, getValue]);
+  var _useMemo = useMemo(function () {
+      var allLabels = Array.from(valueMap.keys());
+      var palette = getFluentPalette(theme);
+      var colors = allLabels.map(function (_, i) {
+        return lightenColor(palette[i % palette.length], 0.3);
+      });
+      var filteredLabels = allLabels.filter(function (label) {
+        return !hiddenLabels.includes(label);
+      });
+      var values = filteredLabels.map(function (label) {
+        return valueMap.get(label) || 0;
+      });
+      var visibleColors = filteredLabels.map(function (label) {
+        var idx = allLabels.indexOf(label);
+        return colors[idx];
+      });
+      return {
+        allLabels: allLabels,
+        colors: colors,
+        filteredLabels: filteredLabels,
+        values: values,
+        visibleColors: visibleColors
+      };
+    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]),
+    allLabels = _useMemo.allLabels,
+    colors = _useMemo.colors,
+    filteredLabels = _useMemo.filteredLabels,
+    values = _useMemo.values,
+    visibleColors = _useMemo.visibleColors;
+  var _useMemo2 = useMemo(function () {
+      var chartData = {
+        labels: filteredLabels,
+        datasets: [{
+          data: values,
+          backgroundColor: visibleColors,
+          borderWidth: 1
+        }]
+      };
+      var legendEntries = allLabels.map(function (label, i) {
+        return {
+          label: label,
+          value: valueMap.get(label) || 0,
+          color: colors[i]
+        };
+      });
+      return {
+        chartData: chartData,
+        legendEntries: legendEntries
+      };
+    }, [filteredLabels, values, visibleColors, allLabels, valueMap, colors]),
+    chartData = _useMemo2.chartData,
+    legendEntries = _useMemo2.legendEntries;
+  var options = useMemo(function () {
+    return {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        tooltip: createFluentTooltip(theme),
+        legend: {
+          display: false
+        },
+        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
+          }
+        }
+      }
+    };
+  }, [theme, title, showDataLabels]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Pie, {
+    data: chartData,
+    options: options
+  })), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderValueLegend, {
+    entries: legendEntries,
+    visibleLabels: filteredLabels,
+    toggleLabel: toggleLabel
+  })));
+}
+
+var RenderSliceLegend = function RenderSliceLegend(_ref) {
+  var labels = _ref.labels,
+    colors = _ref.colors,
+    visibleLabels = _ref.visibleLabels,
+    toggleLabel = _ref.toggleLabel;
+  var items = labels.map(function (label, i) {
+    return {
+      label: label,
+      color: colors[i]
+    };
+  });
+  var _useResponsiveLegend = useResponsiveLegend(items),
+    containerRef = _useResponsiveLegend.containerRef,
+    visibleItems = _useResponsiveLegend.visibleItems,
+    overflowItems = _useResponsiveLegend.overflowItems;
+  return React__default.createElement(LegendContainer, {
+    containerRef: containerRef,
+    visibleItems: visibleItems,
+    overflowItems: overflowItems,
+    items: items,
+    visibleLabels: visibleLabels,
+    toggleLabel: toggleLabel,
+    renderLabel: function renderLabel(item) {
+      return item.label;
+    },
+    getColor: function getColor(item) {
+      return item.color;
+    }
+  });
+};
+
+Chart.register(RadialLinearScale, ArcElement, Tooltip$1, Legend, Title, ChartDataLabels);
+function PolarChart(_ref) {
+  var data = _ref.data,
+    getLabel = _ref.getLabel,
+    getValue = _ref.getValue,
+    title = _ref.title,
+    _ref$showDataLabels = _ref.showDataLabels,
+    showDataLabels = _ref$showDataLabels === void 0 ? true : _ref$showDataLabels,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? webLightTheme : _ref$theme;
+  var _useGraphUtils = useGraphUtils(theme),
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    lightenColor = _useGraphUtils.lightenColor;
+  var _useState = useState([]),
+    hiddenLabels = _useState[0],
+    setHiddenLabels = _useState[1];
+  var styles = useGraphGlobalStyles();
+  var toggleLabel = function toggleLabel(label) {
+    setHiddenLabels(function (prev) {
+      return prev.includes(label) ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+    });
+  };
+  var valueMap = useMemo(function () {
+    var map = new Map();
+    data.forEach(function (series) {
+      series.data.forEach(function (d) {
+        var label = getLabel(d);
+        var value = getValue(d);
+        map.set(label, (map.get(label) || 0) + value);
+      });
+    });
+    return map;
+  }, [data, getLabel, getValue]);
+  var _useMemo = useMemo(function () {
+      var allLabels = Array.from(valueMap.keys());
+      var palette = getFluentPalette(theme);
+      var colors = allLabels.map(function (_, i) {
+        return lightenColor(palette[i % palette.length], 0.3);
+      });
+      var filteredLabels = allLabels.filter(function (label) {
+        return !hiddenLabels.includes(label);
+      });
+      var values = filteredLabels.map(function (label) {
+        return valueMap.get(label) || 0;
+      });
+      var visibleColors = filteredLabels.map(function (label) {
+        var idx = allLabels.indexOf(label);
+        return colors[idx];
+      });
+      return {
+        allLabels: allLabels,
+        colors: colors,
+        filteredLabels: filteredLabels,
+        values: values,
+        visibleColors: visibleColors
+      };
+    }, [valueMap, getFluentPalette, lightenColor, theme, hiddenLabels]),
+    allLabels = _useMemo.allLabels,
+    colors = _useMemo.colors,
+    filteredLabels = _useMemo.filteredLabels,
+    values = _useMemo.values,
+    visibleColors = _useMemo.visibleColors;
+  var chartData = useMemo(function () {
+    return {
+      labels: filteredLabels,
+      datasets: [{
+        data: values,
+        backgroundColor: visibleColors,
+        borderWidth: 1
+      }]
+    };
+  }, [filteredLabels, values, visibleColors]);
+  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
+          },
+          formatter: function formatter(value) {
+            return value;
+          }
+        },
+        tooltip: createFluentTooltip(theme),
+        legend: {
+          display: false
+        }
+      },
+      scales: {
+        r: {
+          ticks: {
+            color: theme.colorNeutralForeground1,
+            backdropColor: 'transparent',
+            font: {
+              family: theme.fontFamilyBase,
+              size: parseInt(theme.fontSizeBase200.replace('px', '')) || 14
+            }
+          },
+          grid: {
+            color: theme.colorNeutralStroke2
+          }
+        }
+      }
+    };
+  }, [theme, title, showDataLabels, createFluentTooltip]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(PolarArea, {
+    data: chartData,
+    options: options
+  })), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderSliceLegend, {
+    labels: allLabels,
+    colors: colors,
+    visibleLabels: filteredLabels,
+    toggleLabel: toggleLabel
+  })));
+}
+
+Chart.register(ChartDataLabels);
+Chart.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip$1, Legend, Title);
+function RadarChart(_ref) {
+  var data = _ref.data,
+    getLabel = _ref.getLabel,
+    getValue = _ref.getValue,
+    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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette;
+  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, getFluentPalette, lightenColor, theme]);
+  var toggleSeries = function toggleSeries(label) {
+    setVisibleSeries(function (prev) {
+      return prev.includes(label) ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+    });
+  };
+  var allLabels = useMemo(function () {
+    var set = new Set();
+    data.forEach(function (series) {
+      series.data.forEach(function (d) {
+        return set.add(getLabel(d));
+      });
+    });
+    return Array.from(set);
+  }, [data, getLabel]);
+  var chartData = useMemo(function () {
+    return {
+      labels: allLabels,
+      datasets: data.filter(function (series) {
+        return visibleSeries.includes(series.label);
+      }).map(function (series) {
+        return {
+          label: series.label,
+          data: allLabels.map(function (label) {
+            var match = series.data.find(function (d) {
+              return getLabel(d) === label;
+            });
+            return match ? getValue(match) : 0;
+          }),
+          backgroundColor: seriesColors[series.label] + '33',
+          borderColor: seriesColors[series.label],
+          borderWidth: 2,
+          pointBackgroundColor: seriesColors[series.label]
+        };
+      })
+    };
+  }, [data, visibleSeries, allLabels, getLabel, getValue, 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
+          }
+        },
+        tooltip: createFluentTooltip(theme),
+        legend: {
+          display: false
+        }
+      },
+      scales: {
+        r: {
+          angleLines: {
+            color: gridColor
+          },
+          grid: {
+            color: gridColor
+          },
+          pointLabels: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          }
+        }
+      }
+    };
+  }, [theme, title, showDataLabels, createFluentTooltip, gridColor, labelColor, fontFamily, fontSize]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Radar, {
+    data: chartData,
+    options: options
+  })), React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  }));
+}
+
+Chart.register(ChartDataLabels);
+Chart.register(LinearScale, PointElement, Tooltip$1, Legend);
+function ScatterChart(_ref) {
+  var data = _ref.data,
+    getX = _ref.getX,
+    getY = _ref.getY,
+    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 _useGraphUtils = useGraphUtils(theme),
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    lightenColor = _useGraphUtils.lightenColor,
+    createFluentTooltip = _useGraphUtils.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 = React__default.useCallback(function (label) {
+    setVisibleSeries(function (prev) {
+      return prev.includes(label) ? prev.filter(function (l) {
+        return l !== label;
+      }) : [].concat(prev, [label]);
+    });
+  }, []);
+  var chartData = useMemo(function () {
+    return {
+      datasets: data.filter(function (series) {
+        return visibleSeries.includes(series.label);
+      }).map(function (series) {
+        return {
+          label: series.label,
+          data: series.data.map(function (d) {
+            return {
+              x: getX(d),
+              y: getY(d)
+            };
+          }),
+          backgroundColor: seriesColors[series.label],
+          borderColor: seriesColors[series.label],
+          pointRadius: 4
+        };
+      })
+    };
+  }, [data, visibleSeries, getX, getY, 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: {
+          type: 'linear',
+          position: 'bottom',
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          type: 'linear',
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
+      }
+    };
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  return React__default.createElement("div", {
+    className: styles.chartWithLegend
+  }, React__default.createElement("div", {
+    className: styles.chartArea
+  }, React__default.createElement(Scatter, {
+    data: chartData,
+    options: options
+  })), React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  }));
+}
+
+Chart.register(ChartDataLabels);
+Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Tooltip$1, Legend, Title);
+function StackedLineChart(_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 () {
+      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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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 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) : 0;
+          }),
+          borderColor: seriesColors[series.label],
+          backgroundColor: seriesColors[series.label],
+          fill: true,
+          tension: 0.4,
+          pointRadius: 3
+        };
+      })
+    };
+  }, [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: {
+          stacked: true,
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          stacked: true,
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        }
+      }
+    };
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor]);
+  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(ChartDataLabels);
+Chart.register(LineElement, PointElement, Filler, CategoryScale, LinearScale, Tooltip$1, Legend, Title);
+function SteamChart(_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 () {
+      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 _useState2 = useState(false),
+    showPercent = _useState2[0],
+    setShowPercent = _useState2[1];
+  var styles = useGraphGlobalStyles();
+  var _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette;
+  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, getFluentPalette, lightenColor, theme]);
+  var toggleSeries = React__default.useCallback(function (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;
+    });
+  }, [data]);
+  var allLabels = 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 totalPerPoint = useMemo(function () {
+    return allLabels.map(function (cat) {
+      return data.reduce(function (sum, series) {
+        var match = series.data.find(function (d) {
+          return getPrimary(d) === cat;
+        });
+        return sum + (match ? getSecondary(match) : 0);
+      }, 0);
+    });
+  }, [allLabels, data, getPrimary, getSecondary]);
+  var chartData = useMemo(function () {
+    return {
+      labels: allLabels,
+      datasets: data.filter(function (series) {
+        return visibleSeries.includes(series.label);
+      }).map(function (series) {
+        return {
+          label: series.label,
+          fill: true,
+          backgroundColor: seriesColors[series.label],
+          borderColor: 'transparent',
+          borderWidth: 0,
+          data: allLabels.map(function (cat, index) {
+            var match = series.data.find(function (d) {
+              return getPrimary(d) === cat;
+            });
+            var rawValue = match ? getSecondary(match) : 0;
+            var total = totalPerPoint[index] || 1;
+            return showPercent ? Math.round((rawValue / total * 100 + Number.EPSILON) * 100) / 100 : Math.round((rawValue + Number.EPSILON) * 100) / 100;
+          }),
+          tension: 0.5
+        };
+      })
+    };
+  }, [data, visibleSeries, allLabels, getPrimary, getSecondary, seriesColors, totalPerPoint, showPercent]);
+  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,
+      animation: {
+        duration: 800,
+        easing: 'easeOutQuart'
+      },
+      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)
+      },
+      interaction: {
+        mode: 'index',
+        intersect: false
+      },
+      scales: {
+        x: {
+          stacked: true,
+          ticks: {
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          }
+        },
+        y: {
+          stacked: true,
+          ticks: {
+            callback: function callback(value) {
+              return showPercent ? value + "%" : value;
+            },
+            color: labelColor,
+            font: {
+              family: fontFamily,
+              size: fontSize
+            }
+          },
+          grid: {
+            color: gridColor
+          },
+          min: 0,
+          max: showPercent ? 100 : undefined
+        }
+      }
+    };
+  }, [theme, title, showDataLabels, createFluentTooltip, labelColor, fontFamily, fontSize, gridColor, showPercent]);
+  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(Stack, {
+    justifyContent: "center",
+    alignItems: "center",
+    margin: "7px"
+  }, React__default.createElement(ToggleButton, {
+    onClick: function onClick() {
+      return setShowPercent(function (p) {
+        return !p;
+      });
+    },
+    shape: "circular",
+    appearance: "secondary",
+    size: "small",
+    style: {
+      width: '150px'
+    }
+  }, showPercent ? 'Show Raw Values' : 'Show %')), React__default.createElement("div", {
+    className: styles.legendArea
+  }, React__default.createElement(RenderLegend, {
+    data: data,
+    visibleSeries: visibleSeries,
+    seriesColors: seriesColors,
+    toggleSeries: toggleSeries
+  })));
+}
+
+/**
+ * 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'];
+};
+var chartProps = function chartProps(chart) {
+  return {
+    data: chart.data,
+    title: chart.title,
+    getPrimary: function getPrimary(d) {
+      return d.name;
+    },
+    getSecondary: function getSecondary(d) {
+      return d.value;
+    }
+  };
+};
+var getChartComponent = function getChartComponent(chart, theme) {
+  var type = chart.type;
+  var fuiTheme = theme != null ? theme : webLightTheme;
+  switch (type) {
+    case 'bar':
+      return React__default.createElement(BarChart, Object.assign({}, chartProps(chart), {
+        stacked: false,
+        theme: fuiTheme
+      }));
+    case 'line':
+      return React__default.createElement(LineChart, Object.assign({}, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'area':
+      return React__default.createElement(AreaChart, Object.assign({}, chartProps(chart), {
+        stacked: false,
+        theme: fuiTheme
+      }));
+    case 'bar-horizontal':
+      return React__default.createElement(BarHorizontalChart, Object.assign({}, chartProps(chart), {
+        stacked: true,
+        theme: fuiTheme
+      }));
+    case 'bubble':
+      return React__default.createElement(BubbleChart, Object.assign({}, chartProps(chart), {
+        getRadius: function getRadius(d) {
+          var _d$radius;
+          return (_d$radius = d.radius) != null ? _d$radius : 1;
+        },
+        theme: fuiTheme
+      }));
+    case 'multiple-axes':
+      return React__default.createElement(ComboChart, Object.assign({}, chartProps(chart), {
+        theme: fuiTheme,
+        data: chart.data.map(function (series) {
+          var _series$type;
+          return {
+            label: series.label,
+            type: (_series$type = series.type) != null ? _series$type : 'bar',
+            data: series.data,
+            yAxisID: series.secondaryAxisId
+          };
+        })
+      }));
+    case 'steam':
+      return React__default.createElement(SteamChart, Object.assign({}, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'floating-bar':
+      return React__default.createElement(FloatingBarChart, Object.assign({
+        getRange: function getRange(d) {
+          var _d$min, _d$max;
+          return [(_d$min = d.min) != null ? _d$min : 0, (_d$max = d.max) != null ? _d$max : 0];
+        }
+      }, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'stacked-line':
+      return React__default.createElement(StackedLineChart, Object.assign({}, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'doughnut':
+      return React__default.createElement(DoughnutChart, Object.assign({
+        getLabel: function getLabel(datum) {
+          return datum.name;
+        },
+        getValue: function getValue(datum) {
+          var _datum$value;
+          return (_datum$value = datum.value) != null ? _datum$value : 0;
+        }
+      }, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'pie':
+      return React__default.createElement(PieChart, Object.assign({
+        getLabel: function getLabel(datum) {
+          return datum.name;
+        },
+        getValue: function getValue(datum) {
+          var _datum$value2;
+          return (_datum$value2 = datum.value) != null ? _datum$value2 : 0;
+        },
+        showDataLabels: true
+      }, chartProps(chart), {
+        theme: fuiTheme
+      }));
+    case 'scatter':
+      return React__default.createElement(ScatterChart, Object.assign({
+        getX: function getX(d) {
+          if (typeof d.x === 'number') return d.x;
+          if (typeof d.x === 'string') return Number(d.x) || 0;
+          if (d.x instanceof Date) return d.x.getTime();
+          return 0;
+        },
+        getY: function getY(d) {
+          return typeof d.y === 'number' ? d.y : 0;
+        }
+      }, chartProps(chart), {
+        theme: fuiTheme,
+        showDataLabels: false
+      }));
+    case 'polar':
+      return React__default.createElement(PolarChart, {
+        data: chart.data,
+        getLabel: function getLabel(d) {
+          return d.name;
+        },
+        getValue: function getValue(d) {
+          var _d$value;
+          return (_d$value = d.value) != null ? _d$value : 0;
+        },
+        title: chart.title,
+        showDataLabels: true,
+        theme: fuiTheme
+      });
+    case 'radar':
+      return React__default.createElement(RadarChart, {
+        data: chart.data,
+        getLabel: function getLabel(d) {
+          return d.name;
+        },
+        getValue: function getValue(d) {
+          var _d$value2;
+          return (_d$value2 = d.value) != null ? _d$value2 : 0;
+        },
+        title: chart.title,
+        theme: fuiTheme
+      });
+    default:
+      throw new Error("Unsupported chart type: " + type);
+  }
+};
+/**
+ * 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 : '';
+    },
+    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;
+    },
+    beforeTitle: function beforeTitle() {
+      return '';
+    },
+    afterTitle: function afterTitle() {
+      return '';
+    },
+    beforeBody: function beforeBody() {
+      return '';
+    },
+    afterBody: function afterBody() {
+      return '';
+    },
+    beforeLabel: function beforeLabel() {
+      return '';
+    },
+    afterLabel: function afterLabel() {
+      return '';
+    },
+    labelColor: function labelColor() {
+      return undefined;
+    },
+    labelTextColor: function labelTextColor() {
+      return '';
+    },
+    footer: function footer() {
+      return '';
+    },
+    beforeFooter: function beforeFooter() {
+      return '';
+    },
+    afterFooter: function afterFooter() {
+      return '';
+    },
+    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
+    },
+    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);
+  };
+}
+/**
+ * useGraphUtils — shared theming and chart helpers.
+ */
+function useGraphUtils(theme) {
+  return useMemo(function () {
+    return {
+      lightenColor: lightenColor,
+      getFluentPalette: getFluentPalette,
+      getChartComponent: getChartComponent,
+      createFluentTooltip: createFluentTooltip,
+      createAxisLabelFormatter: createAxisLabelFormatter,
+      debounce: debounce
+    };
+  }, [theme]);
+}
+
+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 _useGraphUtils = useGraphUtils(theme),
+    lightenColor = _useGraphUtils.lightenColor,
+    getFluentPalette = _useGraphUtils.getFluentPalette,
+    createFluentTooltip = _useGraphUtils.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
+  }, 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
+  })));
+}
+
+export { createAxisLabelFormatter, createFluentTooltip, getFluentPalette, lightenColor, useGraphUtils };
+//# sourceMappingURL=fluentui-react-charts.esm.js.map