@fluentui/react-charts 9.1.9 → 9.2.0

package/lib-commonjs/components/FunnelChart/FunnelChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FunnelChart/FunnelChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Data point for funnel chart\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartDataPoint {\n  /**\n   * Stage name or identifier\n   */\n  stage: string | number;\n  /**\n   * Sub-values for stacked funnel charts\n   * Each sub-value represents a category within the stage\n   */\n  subValues?: Array<{ category: string; value: number; color: string }>;\n  /**\n   * Value for the stage (used for non-stacked funnel charts)\n   */\n  value?: number;\n  /**\n   * Color for the stage (used for non-stacked funnel charts)\n   */\n  color?: string;\n}\n\n/**\n * Funnel Chart component props\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartProps {\n  /**\n   * Data points for the funnel chart\n   */\n  data: FunnelChartDataPoint[];\n  /**\n   * Title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * Width of the chart\n   */\n  width?: number;\n\n  /**\n   * Height of the chart\n   */\n  height?: number;\n\n  /**\n   * Decides whether to show/hide legends\n   * @defaultvalue false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * Props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules\n   */\n  styles?: FunnelChartStyles;\n\n  /**\n   * Defines the culture to localize the numbers and dates\n   */\n  culture?: string;\n\n  /**\n   * Reference to the chart component\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  componentRef?: React.RefObject<any>;\n\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n\n  /**\n   * Orientation of the funnel chart\n   * @defaultvalue 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical';\n}\n\n/**\n * Funnel Chart style properties\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyleProps {\n  /**\n   * Additional CSS class(es) to apply to the chart\n   */\n  className?: string;\n  /**\n   * Width of the chart\n   */\n  chartWidth: number;\n  /**\n   * Height of the chart\n   */\n  chartHeight: number;\n}\n\n/**\n * Funnel Chart styles\n * {@docCategory FunnelChart}\n */\nexport interface FunnelChartStyles {\n  /**\n   * Styles for the root element\n   */\n  root?: string;\n\n  /**\n   * Styles for the chart\n   */\n  chart?: string;\n\n  /**\n   * Styles for text elements\n   */\n  text?: string;\n\n  /**\n   * Styles for the callout root element\n   */\n  calloutContentRoot?: string;\n}\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

package/lib-commonjs/components/FunnelChart/funnelGeometry.js

@@ -0,0 +1,248 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getHorizontalFunnelSegmentGeometry: function() {
+        return getHorizontalFunnelSegmentGeometry;
+    },
+    getSegmentTextProps: function() {
+        return getSegmentTextProps;
+    },
+    getStackedHorizontalFunnelSegmentGeometry: function() {
+        return getStackedHorizontalFunnelSegmentGeometry;
+    },
+    getStackedVerticalFunnelSegmentGeometry: function() {
+        return getStackedVerticalFunnelSegmentGeometry;
+    },
+    getVerticalFunnelSegmentGeometry: function() {
+        return getVerticalFunnelSegmentGeometry;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL }) {
+    const segmentHeight = funnelHeight / data.length;
+    const widthScale = (value)=>value / Math.max(...data.map((dataPoint)=>dataPoint.value)) * funnelWidth;
+    const topWidth = widthScale(d.value);
+    const bottomWidth = i < data.length - 1 ? widthScale(data[i + 1].value) : 0;
+    const xOffset = (funnelWidth - topWidth) / 2;
+    const nextXOffset = (funnelWidth - bottomWidth) / 2;
+    const xStart = isRTL ? funnelWidth - xOffset : xOffset;
+    const xEnd = isRTL ? funnelWidth - nextXOffset : nextXOffset;
+    const isLastSegment = i === data.length - 1;
+    const textY = isLastSegment ? i * segmentHeight + segmentHeight * 0.33 : i * segmentHeight + segmentHeight / 2;
+    const textX = funnelWidth / 2;
+    let availableWidth = topWidth;
+    if (isLastSegment) {
+        const yFromTop = textY - i * segmentHeight;
+        const widthAtY = topWidth * (1 - yFromTop / segmentHeight);
+        availableWidth = Math.max(widthAtY * 0.8, 0);
+    } else {
+        availableWidth = Math.min(topWidth, bottomWidth) * 0.9;
+    }
+    const pathD = `M${xStart},${i * segmentHeight}
+    L${funnelWidth - xStart},${i * segmentHeight}
+    L${funnelWidth - xEnd},${(i + 1) * segmentHeight}
+    L${xEnd},${(i + 1) * segmentHeight}
+    Z`;
+    return {
+        pathD,
+        textX,
+        textY,
+        availableWidth
+    };
+}
+function getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL }) {
+    const segmentWidth = funnelWidth / data.length;
+    const heightScale = (value)=>value / Math.max(...data.map((dataPoint)=>dataPoint.value)) * funnelHeight;
+    const leftHeight = heightScale(d.value);
+    const rightHeight = i < data.length - 1 ? heightScale(data[i + 1].value) : 0;
+    const yOffset = (funnelHeight - leftHeight) / 2;
+    const nextYOffset = (funnelHeight - rightHeight) / 2;
+    const x0 = i * segmentWidth;
+    const x1 = (i + 1) * segmentWidth;
+    const isLastSegment = i === data.length - 1;
+    let textX;
+    let textY;
+    let availableWidth = segmentWidth * 0.8;
+    if (isLastSegment) {
+        // For the triangular last segment, position text at 1/4 from the left edge
+        textX = x0 + (x1 - x0) * 0.25;
+        textY = funnelHeight / 2;
+        // For triangular segments, we need to check both height and width constraints
+        // The segment needs to be large enough to contain text
+        const segmentArea = leftHeight * segmentWidth / 2; // Area of triangle
+        const minAreaForText = 800; // Minimum area needed to show text
+        if (leftHeight < 40 || segmentArea < minAreaForText) {
+            // Hide text if height is too small or area is insufficient
+            availableWidth = 0;
+        } else {
+            // Calculate available width at text position
+            const widthAtTextPosition = (x1 - x0) * 0.75;
+            availableWidth = widthAtTextPosition * 0.6;
+        }
+    } else {
+        textX = (x0 + x1) / 2;
+        textY = funnelHeight / 2;
+        const minHeight = Math.min(leftHeight, rightHeight);
+        availableWidth = minHeight > 20 ? segmentWidth * 0.8 : 0;
+    }
+    const pathD = `M${x0},${yOffset}
+    L${x1},${nextYOffset}
+    L${x1},${funnelHeight - nextYOffset}
+    L${x0},${funnelHeight - yOffset}
+    Z`;
+    return {
+        pathD,
+        textX,
+        textY,
+        availableWidth
+    };
+}
+function getStackedVerticalFunnelSegmentGeometry({ i, k, stages, totals, maxTotal, funnelWidth, funnelHeight }) {
+    var _next_subValues;
+    const segmentHeight = funnelHeight / stages.length;
+    const cur = stages[i];
+    const next = stages[i + 1] || {
+        subValues: []
+    };
+    const curTotal = totals[i] || 1;
+    const nextTotal = totals[i + 1] || 0;
+    let cumTop = 0;
+    let cumBot = 0;
+    for(let idx = 0; idx < k; idx++){
+        var _next_subValues1;
+        const v = cur.subValues[idx];
+        const vNext = (_next_subValues1 = next.subValues) === null || _next_subValues1 === void 0 ? void 0 : _next_subValues1.find((x)=>x.category === v.category);
+        const val = v.value;
+        const nextVal = vNext ? vNext.value : 0;
+        cumTop += val / curTotal * (curTotal / maxTotal) * funnelWidth;
+        cumBot += (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelWidth;
+    }
+    const v = cur.subValues[k];
+    const vNext = (_next_subValues = next.subValues) === null || _next_subValues === void 0 ? void 0 : _next_subValues.find((x)=>x.category === v.category);
+    const val = v.value;
+    const nextVal = vNext ? vNext.value : 0;
+    const topW = val / curTotal * (curTotal / maxTotal) * funnelWidth;
+    const botW = (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelWidth;
+    const topStart = (funnelWidth - curTotal / maxTotal * funnelWidth) / 2 + cumTop;
+    const topEnd = topStart + topW;
+    const botStart = (funnelWidth - nextTotal / maxTotal * funnelWidth) / 2 + cumBot;
+    const botEnd = botStart + botW;
+    const textX = (topStart + topEnd + botStart + botEnd) / 4;
+    const isLastSegment = i === stages.length - 1;
+    const textY = isLastSegment ? i * segmentHeight + segmentHeight * 0.33 : (i + 0.5) * segmentHeight;
+    // Calculate available width based on this specific segment's width
+    let availableWidth;
+    if (isLastSegment) {
+        // For triangular last segment, use the width at text Y position
+        const yFromTop = textY - i * segmentHeight;
+        const widthRatio = 1 - yFromTop / segmentHeight;
+        availableWidth = topW * widthRatio;
+    } else {
+        // For trapezoidal segments, use the actual segment width
+        availableWidth = Math.min(topW, botW);
+    }
+    const pathD = `M${topStart},${i * segmentHeight}
+    L${topEnd},${i * segmentHeight}
+    L${botEnd},${(i + 1) * segmentHeight}
+    L${botStart},${(i + 1) * segmentHeight}
+    Z`;
+    return {
+        pathD,
+        textX,
+        textY,
+        availableWidth
+    };
+}
+function getStackedHorizontalFunnelSegmentGeometry({ i, k, stages, totals, maxTotal, funnelWidth, funnelHeight }) {
+    var _next_subValues;
+    const segmentWidth = funnelWidth / stages.length;
+    const cur = stages[i];
+    const next = stages[i + 1] || {
+        subValues: []
+    };
+    const curTotal = totals[i] || 1;
+    const nextTotal = totals[i + 1] || 0;
+    let cumTop = 0;
+    let cumBot = 0;
+    for(let idx = 0; idx < k; idx++){
+        var _next_subValues1;
+        const v = cur.subValues[idx];
+        const vNext = (_next_subValues1 = next.subValues) === null || _next_subValues1 === void 0 ? void 0 : _next_subValues1.find((x)=>x.category === v.category);
+        const val = v.value;
+        const nextVal = vNext ? vNext.value : 0;
+        cumTop += val / curTotal * (curTotal / maxTotal) * funnelHeight;
+        cumBot += (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelHeight;
+    }
+    const v = cur.subValues[k];
+    const vNext = (_next_subValues = next.subValues) === null || _next_subValues === void 0 ? void 0 : _next_subValues.find((x)=>x.category === v.category);
+    const val = v.value;
+    const nextVal = vNext ? vNext.value : 0;
+    const topH = val / curTotal * (curTotal / maxTotal) * funnelHeight;
+    const botH = (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelHeight;
+    const leftStart = i * segmentWidth;
+    const leftEnd = (i + 1) * segmentWidth;
+    const topStart = (funnelHeight - curTotal / maxTotal * funnelHeight) / 2 + cumTop;
+    const topEnd = topStart + topH;
+    const botStart = (funnelHeight - nextTotal / maxTotal * funnelHeight) / 2 + cumBot;
+    const botEnd = botStart + botH;
+    const isLastSegment = i === stages.length - 1;
+    let textX;
+    let textY;
+    let availableWidth;
+    if (isLastSegment) {
+        textX = leftStart + (leftEnd - leftStart) * 0.25;
+        textY = (topStart + topEnd) / 2;
+        // For triangular segments, calculate available width at text position
+        const segmentWidthAtTextPos = (leftEnd - leftStart) * 0.5;
+        availableWidth = segmentWidthAtTextPos * 0.8;
+        // For triangular last segments, also check if there's enough height
+        // The segment area should be large enough to contain text
+        const segmentArea = topH * segmentWidth / 2;
+        if (topH < 24 || segmentArea < 600) {
+            availableWidth = 0;
+        }
+    } else {
+        textX = (leftStart + leftEnd) / 2;
+        textY = (topStart + topEnd + botStart + botEnd) / 4;
+        // For trapezoidal segments, use full segment width
+        availableWidth = Math.abs(leftEnd - leftStart) * 0.9;
+        // Check if the segment has sufficient height for text
+        // For non-last segments, we need to ensure there's enough vertical space
+        const avgHeight = (topH + botH) / 2;
+        if (avgHeight < 20) {
+            availableWidth = 0;
+        }
+    }
+    const pathD = `M${leftStart},${topStart}
+    L${leftEnd},${botStart}
+    L${leftEnd},${botEnd}
+    L${leftStart},${topEnd}
+    Z`;
+    return {
+        pathD,
+        textX,
+        textY,
+        availableWidth
+    };
+}
+function getSegmentTextProps({ availableWidth, minTextWidth = 24, textX, textY, value, culture, onMouseOver, onMouseMove, onMouseOut }) {
+    return {
+        show: availableWidth > minTextWidth && availableWidth > 0,
+        x: textX,
+        y: textY,
+        value,
+        culture,
+        onMouseOver,
+        onMouseMove,
+        onMouseOut
+    };
+}

package/lib-commonjs/components/FunnelChart/funnelGeometry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FunnelChart/funnelGeometry.ts"],"sourcesContent":["import * as React from 'react';\nimport { FunnelChartDataPoint } from './FunnelChart.types';\n\nexport interface FunnelSegmentGeometry {\n  pathD: string;\n  textX: number;\n  textY: number;\n  availableWidth: number;\n}\n\nexport interface StackedFunnelSegmentGeometry {\n  pathD: string;\n  textX: number;\n  textY: number;\n  availableWidth: number;\n}\n\ninterface SubValue {\n  category: string;\n  value: number;\n  color: string;\n}\n\ninterface Stage {\n  subValues: SubValue[];\n}\n\nexport function getVerticalFunnelSegmentGeometry({\n  d,\n  i,\n  data,\n  funnelWidth,\n  funnelHeight,\n  isRTL,\n}: {\n  d: FunnelChartDataPoint;\n  i: number;\n  data: FunnelChartDataPoint[];\n  funnelWidth: number;\n  funnelHeight: number;\n  isRTL: boolean;\n}): FunnelSegmentGeometry {\n  const segmentHeight = funnelHeight / data.length;\n  const widthScale = (value: number) => (value / Math.max(...data.map(dataPoint => dataPoint.value!))) * funnelWidth;\n  const topWidth = widthScale(d.value!);\n  const bottomWidth = i < data.length - 1 ? widthScale(data[i + 1].value!) : 0;\n  const xOffset = (funnelWidth - topWidth) / 2;\n  const nextXOffset = (funnelWidth - bottomWidth) / 2;\n  const xStart = isRTL ? funnelWidth - xOffset : xOffset;\n  const xEnd = isRTL ? funnelWidth - nextXOffset : nextXOffset;\n\n  const isLastSegment = i === data.length - 1;\n  const textY = isLastSegment ? i * segmentHeight + segmentHeight * 0.33 : i * segmentHeight + segmentHeight / 2;\n\n  const textX = funnelWidth / 2;\n  let availableWidth = topWidth;\n  if (isLastSegment) {\n    const yFromTop = textY - i * segmentHeight;\n    const widthAtY = topWidth * (1 - yFromTop / segmentHeight);\n    availableWidth = Math.max(widthAtY * 0.8, 0);\n  } else {\n    availableWidth = Math.min(topWidth, bottomWidth) * 0.9;\n  }\n  const pathD = `M${xStart},${i * segmentHeight}\n    L${funnelWidth - xStart},${i * segmentHeight}\n    L${funnelWidth - xEnd},${(i + 1) * segmentHeight}\n    L${xEnd},${(i + 1) * segmentHeight}\n    Z`;\n  return { pathD, textX, textY, availableWidth };\n}\n\nexport function getHorizontalFunnelSegmentGeometry({\n  d,\n  i,\n  data,\n  funnelWidth,\n  funnelHeight,\n  isRTL,\n}: {\n  d: FunnelChartDataPoint;\n  i: number;\n  data: FunnelChartDataPoint[];\n  funnelWidth: number;\n  funnelHeight: number;\n  isRTL: boolean;\n}): FunnelSegmentGeometry {\n  const segmentWidth = funnelWidth / data.length;\n  const heightScale = (value: number) => (value / Math.max(...data.map(dataPoint => dataPoint.value!))) * funnelHeight;\n  const leftHeight = heightScale(d.value!);\n  const rightHeight = i < data.length - 1 ? heightScale(data[i + 1].value!) : 0;\n  const yOffset = (funnelHeight - leftHeight) / 2;\n  const nextYOffset = (funnelHeight - rightHeight) / 2;\n  const x0 = i * segmentWidth;\n  const x1 = (i + 1) * segmentWidth;\n\n  const isLastSegment = i === data.length - 1;\n  let textX: number;\n  let textY: number;\n  let availableWidth = segmentWidth * 0.8;\n\n  if (isLastSegment) {\n    // For the triangular last segment, position text at 1/4 from the left edge\n    textX = x0 + (x1 - x0) * 0.25;\n    textY = funnelHeight / 2;\n\n    // For triangular segments, we need to check both height and width constraints\n    // The segment needs to be large enough to contain text\n    const segmentArea = (leftHeight * segmentWidth) / 2; // Area of triangle\n    const minAreaForText = 800; // Minimum area needed to show text\n\n    if (leftHeight < 40 || segmentArea < minAreaForText) {\n      // Hide text if height is too small or area is insufficient\n      availableWidth = 0;\n    } else {\n      // Calculate available width at text position\n      const widthAtTextPosition = (x1 - x0) * 0.75;\n      availableWidth = widthAtTextPosition * 0.6;\n    }\n  } else {\n    textX = (x0 + x1) / 2;\n    textY = funnelHeight / 2;\n    const minHeight = Math.min(leftHeight, rightHeight);\n    availableWidth = minHeight > 20 ? segmentWidth * 0.8 : 0;\n  }\n\n  const pathD = `M${x0},${yOffset}\n    L${x1},${nextYOffset}\n    L${x1},${funnelHeight - nextYOffset}\n    L${x0},${funnelHeight - yOffset}\n    Z`;\n  return { pathD, textX, textY, availableWidth };\n}\n\nexport function getStackedVerticalFunnelSegmentGeometry({\n  i,\n  k,\n  stages,\n  totals,\n  maxTotal,\n  funnelWidth,\n  funnelHeight,\n}: {\n  i: number;\n  k: number;\n  stages: Stage[];\n  totals: number[];\n  maxTotal: number;\n  funnelWidth: number;\n  funnelHeight: number;\n}): StackedFunnelSegmentGeometry {\n  const segmentHeight = funnelHeight / stages.length;\n  const cur = stages[i];\n  const next = stages[i + 1] || { subValues: [] };\n  const curTotal = totals[i] || 1;\n  const nextTotal = totals[i + 1] || 0;\n\n  let cumTop = 0;\n  let cumBot = 0;\n  for (let idx = 0; idx < k; idx++) {\n    const v = cur.subValues[idx];\n    const vNext = next.subValues?.find((x: SubValue) => x.category === v.category);\n    const val = v.value;\n    const nextVal = vNext ? vNext.value : 0;\n    cumTop += (val / curTotal) * (curTotal / maxTotal) * funnelWidth;\n    cumBot += (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelWidth;\n  }\n  const v = cur.subValues[k];\n  const vNext = next.subValues?.find((x: SubValue) => x.category === v.category);\n  const val = v.value;\n  const nextVal = vNext ? vNext.value : 0;\n  const topW = (val / curTotal) * (curTotal / maxTotal) * funnelWidth;\n  const botW = (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelWidth;\n  const topStart = (funnelWidth - (curTotal / maxTotal) * funnelWidth) / 2 + cumTop;\n  const topEnd = topStart + topW;\n  const botStart = (funnelWidth - (nextTotal / maxTotal) * funnelWidth) / 2 + cumBot;\n  const botEnd = botStart + botW;\n  const textX = (topStart + topEnd + botStart + botEnd) / 4;\n\n  const isLastSegment = i === stages.length - 1;\n  const textY = isLastSegment ? i * segmentHeight + segmentHeight * 0.33 : (i + 0.5) * segmentHeight;\n\n  // Calculate available width based on this specific segment's width\n  let availableWidth: number;\n  if (isLastSegment) {\n    // For triangular last segment, use the width at text Y position\n    const yFromTop = textY - i * segmentHeight;\n    const widthRatio = 1 - yFromTop / segmentHeight;\n    availableWidth = topW * widthRatio;\n  } else {\n    // For trapezoidal segments, use the actual segment width\n    availableWidth = Math.min(topW, botW);\n  }\n\n  const pathD = `M${topStart},${i * segmentHeight}\n    L${topEnd},${i * segmentHeight}\n    L${botEnd},${(i + 1) * segmentHeight}\n    L${botStart},${(i + 1) * segmentHeight}\n    Z`;\n  return { pathD, textX, textY, availableWidth };\n}\n\nexport function getStackedHorizontalFunnelSegmentGeometry({\n  i,\n  k,\n  stages,\n  totals,\n  maxTotal,\n  funnelWidth,\n  funnelHeight,\n}: {\n  i: number;\n  k: number;\n  stages: Stage[];\n  totals: number[];\n  maxTotal: number;\n  funnelWidth: number;\n  funnelHeight: number;\n}): StackedFunnelSegmentGeometry {\n  const segmentWidth = funnelWidth / stages.length;\n  const cur = stages[i];\n  const next = stages[i + 1] || { subValues: [] };\n  const curTotal = totals[i] || 1;\n  const nextTotal = totals[i + 1] || 0;\n\n  let cumTop = 0;\n  let cumBot = 0;\n  for (let idx = 0; idx < k; idx++) {\n    const v = cur.subValues[idx];\n    const vNext = next.subValues?.find((x: SubValue) => x.category === v.category);\n    const val = v.value;\n    const nextVal = vNext ? vNext.value : 0;\n    cumTop += (val / curTotal) * (curTotal / maxTotal) * funnelHeight;\n    cumBot += (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelHeight;\n  }\n  const v = cur.subValues[k];\n  const vNext = next.subValues?.find((x: SubValue) => x.category === v.category);\n  const val = v.value;\n  const nextVal = vNext ? vNext.value : 0;\n  const topH = (val / curTotal) * (curTotal / maxTotal) * funnelHeight;\n  const botH = (nextVal / nextTotal || 0) * (nextTotal / maxTotal) * funnelHeight;\n  const leftStart = i * segmentWidth;\n  const leftEnd = (i + 1) * segmentWidth;\n  const topStart = (funnelHeight - (curTotal / maxTotal) * funnelHeight) / 2 + cumTop;\n  const topEnd = topStart + topH;\n  const botStart = (funnelHeight - (nextTotal / maxTotal) * funnelHeight) / 2 + cumBot;\n  const botEnd = botStart + botH;\n\n  const isLastSegment = i === stages.length - 1;\n  let textX: number;\n  let textY: number;\n  let availableWidth: number;\n\n  if (isLastSegment) {\n    textX = leftStart + (leftEnd - leftStart) * 0.25;\n    textY = (topStart + topEnd) / 2;\n    // For triangular segments, calculate available width at text position\n    const segmentWidthAtTextPos = (leftEnd - leftStart) * 0.5;\n    availableWidth = segmentWidthAtTextPos * 0.8;\n\n    // For triangular last segments, also check if there's enough height\n    // The segment area should be large enough to contain text\n    const segmentArea = (topH * segmentWidth) / 2;\n    if (topH < 24 || segmentArea < 600) {\n      availableWidth = 0;\n    }\n  } else {\n    textX = (leftStart + leftEnd) / 2;\n    textY = (topStart + topEnd + botStart + botEnd) / 4;\n    // For trapezoidal segments, use full segment width\n    availableWidth = Math.abs(leftEnd - leftStart) * 0.9;\n\n    // Check if the segment has sufficient height for text\n    // For non-last segments, we need to ensure there's enough vertical space\n    const avgHeight = (topH + botH) / 2;\n    if (avgHeight < 20) {\n      availableWidth = 0;\n    }\n  }\n\n  const pathD = `M${leftStart},${topStart}\n    L${leftEnd},${botStart}\n    L${leftEnd},${botEnd}\n    L${leftStart},${topEnd}\n    Z`;\n  return { pathD, textX, textY, availableWidth };\n}\n\nexport function getSegmentTextProps({\n  availableWidth,\n  minTextWidth = 24,\n  textX,\n  textY,\n  value,\n  culture,\n  onMouseOver,\n  onMouseMove,\n  onMouseOut,\n}: {\n  availableWidth: number;\n  minTextWidth?: number;\n  textX: number;\n  textY: number;\n  value: number;\n  culture: string | undefined;\n  onMouseOver: ((event: React.MouseEvent<SVGElement>) => void) | undefined;\n  onMouseMove: ((event: React.MouseEvent<SVGElement>) => void) | undefined;\n  onMouseOut: (() => void) | undefined;\n}) {\n  return {\n    show: availableWidth > minTextWidth && availableWidth > 0,\n    x: textX,\n    y: textY,\n    value,\n    culture,\n    onMouseOver,\n    onMouseMove,\n    onMouseOut,\n  };\n}\n"],"names":["React","getVerticalFunnelSegmentGeometry","d","i","data","funnelWidth","funnelHeight","isRTL","segmentHeight","length","widthScale","value","Math","max","map","dataPoint","topWidth","bottomWidth","xOffset","nextXOffset","xStart","xEnd","isLastSegment","textY","textX","availableWidth","yFromTop","widthAtY","min","pathD","getHorizontalFunnelSegmentGeometry","segmentWidth","heightScale","leftHeight","rightHeight","yOffset","nextYOffset","x0","x1","segmentArea","minAreaForText","widthAtTextPosition","minHeight","getStackedVerticalFunnelSegmentGeometry","k","stages","totals","maxTotal","next","cur","subValues","curTotal","nextTotal","cumTop","cumBot","idx","v","vNext","find","x","category","val","nextVal","topW","botW","topStart","topEnd","botStart","botEnd","widthRatio","getStackedHorizontalFunnelSegmentGeometry","topH","botH","leftStart","leftEnd","segmentWidthAtTextPos","abs","avgHeight","getSegmentTextProps","minTextWidth","culture","onMouseOver","onMouseMove","onMouseOut","show","y"],"mappings":"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"}

package/lib-commonjs/components/FunnelChart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./FunnelChart"), exports);
+_export_star._(require("./FunnelChart.types"), exports);

package/lib-commonjs/components/FunnelChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FunnelChart/index.ts"],"sourcesContent":["export * from './FunnelChart';\nexport * from './FunnelChart.types';\n"],"names":[],"mappings":";;;;;uBAAc,gBAAgB;uBAChB,sBAAsB"}

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.js

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    funnelClassNames: function() {
+        return funnelClassNames;
+    },
+    useFunnelChartStyles: function() {
+        return useFunnelChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const funnelClassNames = {
+    root: 'fui-funnel__root',
+    chart: 'fui-funnel__chart',
+    text: 'fui-funnel__text',
+    calloutContentRoot: 'fui-funnel__callout-content-root'
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bt984gj: "f122n59",
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        qhf8xq: "f10pi13n"
+    },
+    chart: {
+        mc9l5x: "ftgm304",
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl"
+    },
+    text: {
+        Bkecrkj: "f1aehjj5",
+        Bhrd7zp: "fl43uef",
+        Bkfmm31: "fhuob2q",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508"
+    },
+    calloutContentRoot: {
+        B2u0y6b: "f15g8at8"
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f10pi13n{position:relative;}",
+        ".ftgm304{display:block;}",
+        ".f1aehjj5{pointer-events:none;}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".fhuob2q{fill:var(--colorNeutralForeground1);}",
+        ".f15g8at8{max-width:238px;}"
+    ]
+});
+const useFunnelChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: (0, _react.mergeClasses)(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        text: (0, _react.mergeClasses)(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
+        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
+    };
+};

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useFunnelChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const funnelClassNames = {\n    root: 'fui-funnel__root',\n    chart: 'fui-funnel__chart',\n    text: 'fui-funnel__text',\n    calloutContentRoot: 'fui-funnel__callout-content-root'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        width: '100%',\n        height: '100%',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightRegular,\n        position: 'relative'\n    },\n    chart: {\n        display: 'block',\n        width: '100%',\n        height: '100%'\n    },\n    text: {\n        pointerEvents: 'none',\n        fontWeight: tokens.fontWeightSemibold,\n        fill: tokens.colorNeutralForeground1,\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300\n    },\n    calloutContentRoot: {\n        maxWidth: '238px'\n    }\n});\n/**\n * Apply styling to the FunnelChart component\n */ export const useFunnelChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2, _props_styles3;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        text: mergeClasses(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),\n        calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)\n    };\n};\n"],"names":["__styles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","Bt984gj","a9b677","Bqenvij","Bahqtrf","Be2twd7","Bhrd7zp","qhf8xq","mc9l5x","Bkecrkj","Bkfmm31","B2u0y6b","d","useFunnelChartStyles","props","_props_styles","_props_styles1","_props_styles2","_props_styles3","className","baseStyles","styles"],"mappings":";;;;;;;;;;;IAIiBG,gBAAgB;;;wBAoCI;eAApBkB;;;uBAxCwB,gBAAgB;AAI9C,yBAAyB;IAChCjB,IAAI,EAAE,kBAAkB;IACxBC,KAAK,EAAE,mBAAmB;IAC1BC,IAAI,EAAE,kBAAkB;IACxBC,kBAAkB,EAAE;AACxB,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGR,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAK,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAV,KAAA,EAAA;QAAAW,MAAA,EAAA;QAAAN,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAL,IAAA,EAAA;QAAAW,OAAA,EAAA;QAAAH,OAAA,EAAA;QAAAI,OAAA,EAAA;QAAAN,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAN,kBAAA,EAAA;QAAAY,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAyBrB,CAAC;AAGS,8BAA8BE,KAAK,IAAG;IAC7C,IAAIC,aAAa,EAAEC,cAAc,EAAEC,cAAc,EAAEC,cAAc;IACjE,MAAM,EAAEC,SAAAA,EAAW,GAAGL,KAAK;IAC3B,MAAMM,UAAU,GAAGpB,SAAS,CAAC,CAAC;IAC9B,OAAO;QACHJ,IAAI,MAAEH,mBAAY,EAACE,gBAAgB,CAACC,IAAI,EAAEwB,UAAU,CAACxB,IAAI,EAAEuB,SAAS,EAAE,CAACJ,aAAa,GAAGD,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIN,aAAa,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,aAAa,CAACnB,IAAI,CAAC;QACxKC,KAAK,MAAEJ,mBAAY,EAACE,gBAAgB,CAACE,KAAK,EAAEuB,UAAU,CAACvB,KAAK,EAAE,CAACmB,cAAc,GAAGF,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIL,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACnB,KAAK,CAAC;QACpKC,IAAI,MAAEL,mBAAY,EAACE,gBAAgB,CAACG,IAAI,EAAEsB,UAAU,CAACtB,IAAI,EAAE,CAACmB,cAAc,GAAGH,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIJ,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACnB,IAAI,CAAC;QAChKC,kBAAkB,MAAEN,mBAAY,EAAC2B,UAAU,CAACrB,kBAAkB,EAAE,CAACmB,cAAc,GAAGJ,KAAK,CAACO,MAAAA,AAAM,MAAM,IAAI,IAAIH,cAAc,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,cAAc,CAACnB,kBAAkB;IACtL,CAAC;AACL,CAAC"}

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.raw.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    funnelClassNames: function() {
+        return funnelClassNames;
+    },
+    useFunnelChartStyles: function() {
+        return useFunnelChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const funnelClassNames = {
+    root: 'fui-funnel__root',
+    chart: 'fui-funnel__chart',
+    text: 'fui-funnel__text',
+    calloutContentRoot: 'fui-funnel__callout-content-root'
+};
+/**
+ * Base Styles
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        position: 'relative'
+    },
+    chart: {
+        display: 'block',
+        width: '100%',
+        height: '100%'
+    },
+    text: {
+        pointerEvents: 'none',
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        fill: _reacttheme.tokens.colorNeutralForeground1,
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        fontSize: _reacttheme.tokens.fontSizeBase300
+    },
+    calloutContentRoot: {
+        maxWidth: '238px'
+    }
+});
+const useFunnelChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2, _props_styles3;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(funnelClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: (0, _react.mergeClasses)(funnelClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        text: (0, _react.mergeClasses)(funnelClassNames.text, baseStyles.text, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.text),
+        calloutContentRoot: (0, _react.mergeClasses)(baseStyles.calloutContentRoot, (_props_styles3 = props.styles) === null || _props_styles3 === void 0 ? void 0 : _props_styles3.calloutContentRoot)
+    };
+};

package/lib-commonjs/components/FunnelChart/useFunnelChartStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FunnelChart/useFunnelChartStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { FunnelChartProps, FunnelChartStyles } from './index';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @internal\n */\nexport const funnelClassNames: SlotClassNames<FunnelChartStyles> = {\n  root: 'fui-funnel__root',\n  chart: 'fui-funnel__chart',\n  text: 'fui-funnel__text',\n  calloutContentRoot: 'fui-funnel__callout-content-root',\n};\n\n/**\n * Base Styles\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    width: '100%',\n    height: '100%',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    position: 'relative',\n  },\n  chart: {\n    display: 'block',\n    width: '100%',\n    height: '100%',\n  },\n  text: {\n    pointerEvents: 'none',\n    fontWeight: tokens.fontWeightSemibold,\n    fill: tokens.colorNeutralForeground1,\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n  },\n  calloutContentRoot: {\n    maxWidth: '238px',\n  },\n});\n\n/**\n * Apply styling to the FunnelChart component\n */\nexport const useFunnelChartStyles = (props: FunnelChartProps): FunnelChartStyles => {\n  const { className } = props;\n  const baseStyles = useStyles();\n\n  return {\n    root: mergeClasses(funnelClassNames.root, baseStyles.root, className, props.styles?.root),\n    chart: mergeClasses(funnelClassNames.chart, baseStyles.chart, props.styles?.chart),\n    text: mergeClasses(funnelClassNames.text, baseStyles.text, props.styles?.text),\n    calloutContentRoot: mergeClasses(baseStyles.calloutContentRoot, props.styles?.calloutContentRoot),\n  };\n};\n"],"names":["makeStyles","mergeClasses","tokens","funnelClassNames","root","chart","text","calloutContentRoot","useStyles","alignItems","width","height","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","position","display","pointerEvents","fontWeightSemibold","fill","colorNeutralForeground1","maxWidth","useFunnelChartStyles","props","className","baseStyles","styles"],"mappings":";;;;;;;;;;;IAQaG,gBAAAA;;;IAwCAsB,oBAAAA;;;;uBAhD4B,iBAAiB;4BACnC,wBAAwB;AAOxC,yBAA4D;IACjErB,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,oBAAoB;AACtB,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYR,iBAAAA,EAAW;IAC3BI,MAAM;QACJK,YAAY;QACZC,OAAO;QACPC,QAAQ;QACRC,YAAYV,kBAAAA,CAAOW,cAAc;QACjCC,UAAUZ,kBAAAA,CAAOa,eAAe;QAChCC,YAAYd,kBAAAA,CAAOe,iBAAiB;QACpCC,UAAU;IACZ;IACAb,OAAO;QACLc,SAAS;QACTT,OAAO;QACPC,QAAQ;IACV;IACAL,MAAM;QACJc,eAAe;QACfJ,YAAYd,kBAAAA,CAAOmB,kBAAkB;QACrCC,MAAMpB,kBAAAA,CAAOqB,uBAAuB;QACpCX,YAAYV,kBAAAA,CAAOW,cAAc;QACjCC,UAAUZ,kBAAAA,CAAOa,eAAe;IAClC;IACAR,oBAAoB;QAClBiB,UAAU;IACZ;AACF;AAKO,6BAA6B,CAACE;QAKqCA,eACRA,gBACHA,gBACKA;IAPlE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAME,aAAapB;IAEnB,OAAO;QACLJ,UAAMH,mBAAAA,EAAaE,iBAAiBC,IAAI,EAAEwB,WAAWxB,IAAI,EAAEuB,WAAAA,CAAWD,gBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAActB,IAAI;QACxFC,WAAOJ,mBAAAA,EAAaE,iBAAiBE,KAAK,EAAEuB,WAAWvB,KAAK,EAAA,CAAEqB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcrB,KAAK;QACjFC,UAAML,mBAAAA,EAAaE,iBAAiBG,IAAI,EAAEsB,WAAWtB,IAAI,EAAA,CAAEoB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcpB,IAAI;QAC7EC,wBAAoBN,mBAAAA,EAAa2B,WAAWrB,kBAAkB,EAAA,CAAEmB,iBAAAA,MAAMG,MAAAA,AAAM,MAAA,QAAZH,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAcnB,kBAAkB;IAClG;AACF,EAAE"}