@czi-sds/data-viz 0.14.1 → 0.14.3

package/dist/index.cjs.d.ts

@@ -246,11 +246,11 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
     selectionBehavior?: "dim" | "hide";
     /**
      * Chart mode - controls how segments are calculated
-     * - "porportional": Segments fill entire bar (100%), proportional to their values
+     * - "proportional": Segments fill entire bar (100%), proportional to their values
      * - "cumulative": Segments sized based on actual values relative to maxAmount
-     * @default "porportional"
+     * @default "proportional"
      */
-    mode?: "porportional" | "cumulative";
+    mode?: "proportional" | "cumulative";
     /**
      * Maximum amount for the bar (used only in "cumulative" mode)
      * If not provided, defaults to sum of all values (no remaining segment)

package/dist/index.cjs.js

@@ -24967,7 +24967,7 @@ var renderBarSegment = function (item, index, options) {
     // Mark hidden segments with data-hide attribute when in hide mode
     var isHidden = selectionBehavior === "hide" && item.percentage === 0;
     var barSegment = (jsxRuntime.jsx(BarSegment, { color: item.color, percentage: item.percentage, height: barHeight, opacity: getSegmentOpacity(item.originalIndex, hoveredIndex, selectedIndicesSet, selectionBehavior), isLast: isLast, "data-hide": isHidden, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
-    return item.tooltip !== undefined ? (jsxRuntime.jsx(Tooltip, { title: null, componentSlot: jsxRuntime.jsx(TooltipTableContent, __assign$1({}, item.tooltip)), placement: "top", hasInvertedStyle: false, open: hoveredIndex === item.originalIndex, disableInteractive: true, PopperProps: {
+    return item.tooltip !== undefined ? (jsxRuntime.jsx(Tooltip, { title: null, componentSlot: jsxRuntime.jsx(TooltipTableContent, __assign$1({}, item.tooltip)), placement: "top", hasInvertedStyle: false, open: hoveredIndex === item.originalIndex && !isHidden, disableInteractive: true, PopperProps: {
             disablePortal: false,
             modifiers: [
                 {
@@ -24981,7 +24981,7 @@ var renderBarSegment = function (item, index, options) {
 };
 var StackedBarChart = function (props) {
     var _a, _b, _c;
-    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "porportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
+    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
     // Ensure barHeight is at least 1px
     var barHeight = Math.max(1, barHeightProp);
     var theme = material.useTheme();

package/dist/index.esm.d.ts

@@ -246,11 +246,11 @@ interface StackedBarChartProps extends HTMLAttributes<HTMLDivElement> {
     selectionBehavior?: "dim" | "hide";
     /**
      * Chart mode - controls how segments are calculated
-     * - "porportional": Segments fill entire bar (100%), proportional to their values
+     * - "proportional": Segments fill entire bar (100%), proportional to their values
      * - "cumulative": Segments sized based on actual values relative to maxAmount
-     * @default "porportional"
+     * @default "proportional"
      */
-    mode?: "porportional" | "cumulative";
+    mode?: "proportional" | "cumulative";
     /**
      * Maximum amount for the bar (used only in "cumulative" mode)
      * If not provided, defaults to sum of all values (no remaining segment)

package/dist/index.esm.js

@@ -24943,7 +24943,7 @@ var renderBarSegment = function (item, index, options) {
     // Mark hidden segments with data-hide attribute when in hide mode
     var isHidden = selectionBehavior === "hide" && item.percentage === 0;
     var barSegment = (jsx(BarSegment, { color: item.color, percentage: item.percentage, height: barHeight, opacity: getSegmentOpacity(item.originalIndex, hoveredIndex, selectedIndicesSet, selectionBehavior), isLast: isLast, "data-hide": isHidden, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }));
-    return item.tooltip !== undefined ? (jsx(Tooltip, { title: null, componentSlot: jsx(TooltipTableContent, __assign$1({}, item.tooltip)), placement: "top", hasInvertedStyle: false, open: hoveredIndex === item.originalIndex, disableInteractive: true, PopperProps: {
+    return item.tooltip !== undefined ? (jsx(Tooltip, { title: null, componentSlot: jsx(TooltipTableContent, __assign$1({}, item.tooltip)), placement: "top", hasInvertedStyle: false, open: hoveredIndex === item.originalIndex && !isHidden, disableInteractive: true, PopperProps: {
             disablePortal: false,
             modifiers: [
                 {
@@ -24957,7 +24957,7 @@ var renderBarSegment = function (item, index, options) {
 };
 var StackedBarChart = function (props) {
     var _a, _b, _c;
-    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "porportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
+    var title = props.title, badge = props.badge, _d = props.hideBadge, hideBadge = _d === void 0 ? false : _d, data = props.data, _e = props.width, width = _e === void 0 ? "100%" : _e, _f = props.barHeight, barHeightProp = _f === void 0 ? 16 : _f, _g = props.showLegend, showLegend = _g === void 0 ? true : _g, _h = props.showLegendValues, showLegendValues = _h === void 0 ? true : _h, _j = props.legendValueFormat, legendValueFormat = _j === void 0 ? "percentage" : _j, _k = props.selectedIndices, selectedIndices = _k === void 0 ? [] : _k, onSelectionChange = props.onSelectionChange, _l = props.selectionBehavior, selectionBehavior = _l === void 0 ? "dim" : _l, _m = props.mode, mode = _m === void 0 ? "proportional" : _m, maxAmount = props.maxAmount, _o = props.remainingLabel, remainingLabel = _o === void 0 ? "Remaining" : _o, remainingUnit = props.remainingUnit, unit = props.unit, colorGeneratorOptions = props.colorGeneratorOptions, rest = __rest(props, ["title", "badge", "hideBadge", "data", "width", "barHeight", "showLegend", "showLegendValues", "legendValueFormat", "selectedIndices", "onSelectionChange", "selectionBehavior", "mode", "maxAmount", "remainingLabel", "remainingUnit", "unit", "colorGeneratorOptions"]);
     // Ensure barHeight is at least 1px
     var barHeight = Math.max(1, barHeightProp);
     var theme = useTheme$4();