@levi-gemcommerce/analytics 2.1.0-test.0 → 3.0.1-dev.3

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getHorizontalBarChartTooltipPosition.ts

@@ -0,0 +1,79 @@
+import type { ScaleLinear } from 'd3-scale';
+
+import { getStackedValuesFromDataSeries } from '../../../utilities/getStackedValuesFromDataSeries';
+import type { TooltipPosition, TooltipPositionParams } from '../types';
+import { TOOLTIP_POSITION_DEFAULT_RETURN } from '../constants';
+
+import { eventPointNative } from './eventPoint';
+
+interface Props extends Omit<TooltipPositionParams, 'xScale'> {
+  xScale: ScaleLinear<number, number>;
+}
+
+export function getHorizontalBarChartTooltipPosition({
+  chartBounds,
+  data,
+  event,
+  eventType,
+  index,
+  longestSeriesIndex,
+  type,
+  xScale,
+}: Props): TooltipPosition {
+  const groupHeight = chartBounds.height / data[longestSeriesIndex]!.data.length;
+  const isStacked = type === 'stacked';
+
+  if (eventType === 'mouse' && (event instanceof MouseEvent || event instanceof TouchEvent)) {
+    const point = eventPointNative(event);
+
+    if (point == null) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    const { svgY } = point;
+
+    const currentPoint = svgY - 0;
+    const currentIndex = Math.floor(currentPoint / groupHeight);
+
+    if (currentIndex < 0 || currentIndex > data[longestSeriesIndex]!.data.length - 1) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    return formatPositionForTooltip(currentIndex);
+  } else if (index != null) {
+    return formatPositionForTooltip(index);
+  }
+
+  return TOOLTIP_POSITION_DEFAULT_RETURN;
+
+  function formatPositionForTooltip(index: number): TooltipPosition {
+    if (isStacked) {
+      const { formattedStackedValues } = getStackedValuesFromDataSeries(data);
+
+      const x = formattedStackedValues[index]!.reduce((prev, cur) => {
+        const [start, end] = cur!;
+
+        if (start < 0) {
+          return prev;
+        }
+
+        return prev + (xScale(end) - xScale(start));
+      }, xScale(0));
+
+      return {
+        x: chartBounds.x + x,
+        y: chartBounds.y + groupHeight * index,
+        activeIndex: index,
+      };
+    }
+
+    const highestValue = data[longestSeriesIndex]!.data[index]!.value ?? 0;
+    const x = chartBounds.x + (xScale(highestValue ?? 0) ?? 0);
+
+    return {
+      x: highestValue < 0 ? -x : x,
+      y: groupHeight * index,
+      activeIndex: index,
+    };
+  }
+}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getLineChartTooltipPosition.ts

@@ -0,0 +1,68 @@
+import type { BoundingRect } from '@shopify/polaris-viz-core';
+import { clamp } from '@shopify/polaris-viz-core';
+import type { ScaleLinear } from 'd3-scale';
+
+import { TOOLTIP_POSITION_DEFAULT_RETURN } from '../constants';
+import type { TooltipPositionParams } from '../types';
+
+import { getXYFromEventType, eventPointNative } from './eventPoint';
+
+interface Props extends Omit<TooltipPositionParams, 'xScale'> {
+  containerBounds: BoundingRect;
+  isTouchDevice: boolean;
+  scrollY: number;
+  xScale: ScaleLinear<number, number>;
+}
+
+export function getLineChartTooltipPosition({
+  containerBounds,
+  chartBounds,
+  data,
+  event,
+  eventType,
+  index,
+  isTouchDevice,
+  longestSeriesIndex,
+  scrollY,
+  xScale,
+}: Props) {
+  if (eventType === 'mouse' && (event instanceof MouseEvent || event instanceof TouchEvent)) {
+    if (event == null) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    const point = eventPointNative(event);
+
+    if (point == null || xScale == null || data[longestSeriesIndex] == null) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    const { svgX } = point;
+
+    const closestIndex = Math.round(xScale.invert(svgX - chartBounds.x));
+
+    const activeIndex = clamp({
+      amount: closestIndex,
+      min: 0,
+      max: data[longestSeriesIndex].data.length - 1,
+    });
+
+    const { x, y } = getXYFromEventType(event);
+
+    return {
+      x: isTouchDevice ? xScale(activeIndex) : x,
+      y,
+      activeIndex,
+    };
+  } else {
+    const activeIndex = index ?? 0;
+
+    const x = xScale?.(activeIndex) ?? 0;
+
+    return {
+      x: x + containerBounds.x,
+      y: containerBounds.y - scrollY,
+      activeIndex,
+    };
+  }
+}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/getVerticalBarChartTooltipPosition.ts

@@ -0,0 +1,123 @@
+import type { BoundingRect, DataSeries } from '@shopify/polaris-viz-core';
+import type { TooltipPosition, TooltipPositionParams } from '../types';
+import type { ScaleBand, ScaleLinear } from 'd3-scale';
+
+import { TooltipHorizontalOffset, TooltipVerticalOffset } from '../types';
+import { sortBarChartData } from '../../VerticalBarChart/utilities';
+import { TOOLTIP_POSITION_DEFAULT_RETURN } from '../constants';
+import { eventPointNative } from './eventPoint';
+
+interface Props extends Omit<TooltipPositionParams, 'xScale'> {
+  containerBounds: BoundingRect;
+  xScale: ScaleBand<string>;
+  yScale: ScaleLinear<number, number>;
+}
+
+export function getVerticalBarChartTooltipPosition({
+  chartBounds,
+  containerBounds,
+  data,
+  event,
+  eventType,
+  index,
+  longestSeriesIndex,
+  type,
+  xScale,
+  yScale,
+}: Props): TooltipPosition {
+  const isStacked = type === 'stacked';
+
+  if (eventType === 'mouse' && (event instanceof MouseEvent || event instanceof TouchEvent)) {
+    const point = eventPointNative(event);
+
+    if (point == null) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    const { svgX } = point;
+
+    const currentPoint = svgX - chartBounds.x;
+    const activeIndex = Math.floor(currentPoint / xScale.step());
+
+    if (activeIndex < 0 || activeIndex > data[longestSeriesIndex]!.data.length - 1) {
+      return TOOLTIP_POSITION_DEFAULT_RETURN;
+    }
+
+    return formatPositionForTooltip({
+      chartBounds,
+      containerBounds,
+      index: activeIndex,
+      xScale,
+      yScale,
+      data,
+      isStacked,
+    });
+  } else if (index != null) {
+    return formatPositionForTooltip({
+      chartBounds,
+      containerBounds,
+      index,
+      xScale,
+      yScale,
+      data,
+      isStacked,
+    });
+  }
+
+  return TOOLTIP_POSITION_DEFAULT_RETURN;
+}
+
+function formatPositionForTooltip({
+  chartBounds,
+  containerBounds,
+  data,
+  index,
+  xScale,
+  yScale,
+  isStacked,
+}: {
+  chartBounds: BoundingRect;
+  containerBounds: BoundingRect;
+  data: DataSeries[];
+  index: number | null;
+  xScale: ScaleBand<string>;
+  yScale: ScaleLinear<number, number>;
+  isStacked: boolean;
+}): TooltipPosition {
+  if (index == null) {
+    return TOOLTIP_POSITION_DEFAULT_RETURN;
+  }
+
+  const xPosition = xScale(`${index}`) ?? 0;
+
+  const highestValue = getHighestValue(data, index);
+
+  const x = containerBounds.x + xPosition;
+  const y = yScale(highestValue < 0 ? 0 : highestValue) + containerBounds.y;
+
+  return {
+    x: chartBounds.x + x,
+    y: Math.abs(y),
+    position: {
+      horizontal: TooltipHorizontalOffset.Center,
+      vertical: TooltipVerticalOffset.Above,
+    },
+    activeIndex: index,
+  };
+
+  function getHighestValue(data: DataSeries[], index: number): number {
+    if (isStacked) {
+      const sortedData = sortBarChartData(data);
+
+      return sortedData![index]!.reduce(sumPositiveData, 0) ?? 0;
+    }
+
+    const values = data.map((series) => series.data[index]!.value).filter(Boolean) as number[];
+
+    return Math.max(...values);
+  }
+}
+
+function sumPositiveData(prevValue: number | null, currValue: number | null | undefined) {
+  return currValue != null && currValue < 0 ? prevValue : (prevValue ?? 0) + (currValue ?? 0);
+}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities/shouldBlockTooltipEvents.ts

@@ -0,0 +1,6 @@
+export function shouldBlockTooltipEvents(event: MouseEvent | TouchEvent) {
+  return event.composedPath().some((path) => {
+    const dataset = (path as HTMLElement).dataset;
+    return dataset != null && dataset.blockTooltipEvents === 'true';
+  });
+}

package/src/shared/charts/components/GPolarisViz/components/TooltipWrapper/utilities.ts

@@ -0,0 +1,162 @@
+import type { AlteredPositionProps } from './types';
+import { TOOLTIP_MARGIN } from './constants';
+
+interface IsOutsideBoundsData {
+  current: number;
+  direction: 'x' | 'y';
+  alteredPosition: AlteredPositionProps;
+}
+
+function isOutsideBounds(data: IsOutsideBoundsData): boolean {
+  const { current, direction, alteredPosition } = data;
+
+  if (direction === 'x') {
+    const isLeft = current < 0;
+    const isRight = current + alteredPosition.tooltipDimensions.width > window.innerWidth;
+
+    return isLeft || isRight;
+  } else {
+    const isAbove = current < window.scrollY;
+    const isBelow =
+      current + alteredPosition.tooltipDimensions.height >
+      window.scrollY + window.innerHeight - alteredPosition.tooltipDimensions.height;
+
+    return isAbove || isBelow;
+  }
+}
+
+type getFunction = (value: number, props: AlteredPositionProps) => { value: number; wasOutsideBounds: boolean };
+
+export function getInlinePosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let y = value;
+  const wasOutsideBounds = isOutsideBounds({
+    current: y,
+    direction: 'y',
+    alteredPosition: props,
+  });
+
+  if (wasOutsideBounds) {
+    const bottom = y + props.tooltipDimensions.height;
+    const offset = bottom - props.chartBounds.height;
+
+    y -= offset + props.margin.Bottom;
+  }
+
+  return { value: y, wasOutsideBounds };
+}
+
+export function getVerticalCenterPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let y = value - props.tooltipDimensions.height / 2;
+  const wasOutsideBounds = isOutsideBounds({
+    current: y,
+    direction: 'y',
+    alteredPosition: props,
+  });
+
+  if (wasOutsideBounds) {
+    if (y <= 0) {
+      y = 0;
+    } else {
+      y = window.scrollY + window.innerHeight - props.tooltipDimensions.height;
+    }
+  }
+
+  return { value: y, wasOutsideBounds };
+}
+
+export function getAbovePosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let y = value - props.tooltipDimensions.height - TOOLTIP_MARGIN;
+  const wasOutsideBounds = isOutsideBounds({
+    current: y,
+    direction: 'y',
+    alteredPosition: props,
+  });
+  if (wasOutsideBounds) {
+    y = props.currentY - (props.scrollContainer?.scrollTop ?? 0);
+  }
+
+  return { value: y, wasOutsideBounds };
+}
+
+export function getBelowPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let y = value + TOOLTIP_MARGIN * 2;
+  const wasOutsideBounds = isOutsideBounds({
+    current: y,
+    direction: 'y',
+    alteredPosition: props,
+  });
+
+  if (wasOutsideBounds) {
+    y -= props.tooltipDimensions.height + TOOLTIP_MARGIN;
+  }
+
+  return { value: y, wasOutsideBounds };
+}
+
+export function getLeftPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let x = value - props.tooltipDimensions.width;
+  const wasOutsideBounds = isOutsideBounds({
+    current: x,
+    direction: 'x',
+    alteredPosition: props,
+  });
+  if (wasOutsideBounds) {
+    x = props.currentX + props.margin.Left + props.bandwidth + TOOLTIP_MARGIN;
+  } else {
+    x -= TOOLTIP_MARGIN;
+  }
+
+  return { value: x, wasOutsideBounds };
+}
+
+export function getRightPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  let x = value + props.bandwidth;
+  const wasOutsideBounds = isOutsideBounds({
+    current: x,
+    direction: 'x',
+    alteredPosition: props,
+  });
+
+  if (wasOutsideBounds) {
+    x -= props.tooltipDimensions.width + props.bandwidth + TOOLTIP_MARGIN;
+  } else {
+    x += TOOLTIP_MARGIN;
+  }
+
+  return { value: x, wasOutsideBounds };
+}
+
+export function getCenterPosition(...args: Parameters<getFunction>): ReturnType<getFunction> {
+  const [value, props] = args;
+
+  const offset = props.bandwidth - props.tooltipDimensions.width;
+  let x = value + offset / 2;
+
+  if (x < props.margin.Left) {
+    x = props.currentX + props.margin.Left;
+  }
+
+  const wasOutsideBounds = isOutsideBounds({
+    current: x,
+    direction: 'x',
+    alteredPosition: props,
+  });
+
+  if (wasOutsideBounds) {
+    x = window.innerWidth - props.tooltipDimensions.width - TOOLTIP_MARGIN * 2;
+  }
+
+  return { value: x, wasOutsideBounds };
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/TrendIndicator.tsx

@@ -0,0 +1,72 @@
+import type { TrendIndicator as TrendIndicatorType } from '@shopify/polaris-viz-core';
+
+import { NO_VALUE_WIDTH, NO_VALUE_ICON_HEIGHT, TEXT_ICON_SPACING, ICON_SIZE, HEIGHT, Y_OFFSET } from './constants';
+import { estimateTrendIndicatorWidth } from './utilities/estimateTrendIndicatorWidth';
+import { useTheme, FONT_FAMILY } from '@shopify/polaris-viz-core';
+import { getFontSize } from '../../utilities/getFontSize';
+import { ArrowDown, ArrowUp, Svg } from './components';
+
+const TREND_FONT_WEIGHT = 650;
+
+export interface TrendIndicatorProps extends TrendIndicatorType {
+  tabIndex?: number;
+  theme?: string;
+}
+
+export function TrendIndicator({
+  accessibilityLabel,
+  direction = 'upward',
+  tabIndex = -1,
+  theme = 'Light',
+  trend = 'neutral',
+  value,
+}: TrendIndicatorProps) {
+  const selectedTheme = useTheme(theme);
+  const fontSize = getFontSize();
+
+  const svgProps = {
+    accessibilityLabel,
+    height: HEIGHT,
+    tabIndex,
+  };
+
+  if (value == null) {
+    return (
+      <Svg {...svgProps} width={NO_VALUE_WIDTH}>
+        <path
+          d="M0.519531 1.79395H12.0039V0.249023H0.519531V1.79395Z"
+          fill={selectedTheme.trendIndicator.neutral}
+          transform={`translate(${(NO_VALUE_WIDTH - NO_VALUE_WIDTH) / 2}, ${(HEIGHT - NO_VALUE_ICON_HEIGHT) / 2})`}
+        />
+      </Svg>
+    );
+  }
+
+  const { textWidth, totalWidth } = estimateTrendIndicatorWidth(value, fontSize, TREND_FONT_WEIGHT);
+
+  return (
+    <Svg {...svgProps} width={totalWidth}>
+      <g color={selectedTheme.trendIndicator[trend]}>
+        {value !== '0%' && (
+          <g transform={`translate(0, ${(HEIGHT - ICON_SIZE) / 2})`}>
+            {direction === 'upward' ? <ArrowUp /> : <ArrowDown />}
+          </g>
+        )}
+
+        <text
+          x={ICON_SIZE + TEXT_ICON_SPACING}
+          y={(HEIGHT + Y_OFFSET) / 2}
+          fontSize={fontSize}
+          fill="currentColor"
+          fontWeight={TREND_FONT_WEIGHT}
+          dominantBaseline="middle"
+          fontFamily={FONT_FAMILY}
+          textRendering="geometricPrecision"
+          width={textWidth}
+        >
+          {value}
+        </text>
+      </g>
+    </Svg>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowDown.tsx

@@ -0,0 +1,12 @@
+export function ArrowDown() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="none" viewBox="0 0 6 6">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M5.75 1a.75.75 0 0 0-1.5 0v2.19L1.655.594a.75.75 0 1 0-1.06 1.06L3.189 4.25H1a.75.75 0 0 0 0 1.5h4a.748.748 0 0 0 .529-.218l.001-.002.002-.001A.748.748 0 0 0 5.75 5V1Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/ArrowUp.tsx

@@ -0,0 +1,12 @@
+export function ArrowUp() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="none" viewBox="0 0 6 6">
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M1 .25a.75.75 0 1 0 0 1.5h2.19L.594 4.345a.75.75 0 0 0 1.06 1.06L4.25 2.811V5a.75.75 0 0 0 1.5 0V1A.748.748 0 0 0 5 .25H1Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Arrows/index.ts

@@ -0,0 +1,2 @@
+export { ArrowUp } from './ArrowUp';
+export { ArrowDown } from './ArrowDown';

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Svg/Svg.scss

@@ -0,0 +1,7 @@
+@import '../../../../styles/common';
+
+.SVG {
+  display: block;
+  font-feature-settings: normal;
+  @include no-outline;
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Svg/Svg.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  height: number;
+  width: number;
+  accessibilityLabel?: string;
+  tabIndex?: number;
+}
+
+export function Svg({ accessibilityLabel, children, height, width, tabIndex = 0 }: Props) {
+  const hasLabel = accessibilityLabel != null;
+
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      height={height}
+      width={width}
+      role={hasLabel ? 'img' : undefined}
+      className={'SVG'}
+      tabIndex={tabIndex}
+    >
+      {hasLabel && <title>{accessibilityLabel}</title>}
+      {children}
+    </svg>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/Svg/index.ts

@@ -0,0 +1 @@
+export { Svg } from './Svg';

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/components/index.ts

@@ -0,0 +1,2 @@
+export { ArrowUp, ArrowDown } from './Arrows';
+export { Svg } from './Svg';

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/constants.ts

@@ -0,0 +1,12 @@
+export const NO_VALUE_WIDTH = 11;
+export const NO_VALUE_ICON_HEIGHT = 2;
+
+export const TEXT_ICON_SPACING = 4;
+export const ICON_SIZE = 5.5;
+
+export const FONT_SIZE = 11;
+export const FONT_WEIGHT = 450;
+
+export const HEIGHT = 16;
+
+export const Y_OFFSET = 3;

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/index.ts

@@ -0,0 +1,6 @@
+export { TrendIndicator } from './TrendIndicator';
+export type { TrendIndicatorProps } from './TrendIndicator';
+export { estimateTrendIndicatorWidth } from './utilities/estimateTrendIndicatorWidth';
+export { HEIGHT as TREND_INDICATOR_HEIGHT } from './constants';
+export { FONT_WEIGHT as TREND_INDICATOR_FONT_WEIGHT } from './constants';
+export { NO_VALUE_WIDTH as TREND_INDICATOR_NO_VALUE_WIDTH } from './constants';

package/src/shared/charts/components/GPolarisViz/components/TrendIndicator/utilities/estimateTrendIndicatorWidth.ts

@@ -0,0 +1,9 @@
+import { ICON_SIZE, NO_VALUE_WIDTH, TEXT_ICON_SPACING } from '../constants';
+import { estimateStringWidthWithOffset } from '../../../utilities';
+
+export function estimateTrendIndicatorWidth(value: string, fontSize: number, fontWeight: number) {
+  const textWidth = value ? estimateStringWidthWithOffset(value, fontSize, fontWeight) : NO_VALUE_WIDTH;
+  const totalWidth = Math.round(ICON_SIZE + TEXT_ICON_SPACING + textWidth);
+
+  return { totalWidth, textWidth };
+}

package/src/shared/charts/components/GPolarisViz/components/VerticalBarChart/utilities/index.ts

@@ -0,0 +1 @@
+export { sortBarChartData } from './sortBarChartData';

package/src/shared/charts/components/GPolarisViz/components/VerticalBarChart/utilities/sortBarChartData.ts

@@ -0,0 +1,20 @@
+import type { DataSeries } from '@shopify/polaris-viz-core';
+
+export function sortBarChartData(data: DataSeries[]) {
+  if (data.length === 0) {
+    return [];
+  }
+
+  const labels = data[0]?.data.map(({ key }) => key);
+
+  return labels?.map((_, index) => {
+    return data.map((type) => {
+      const value = type.data[index]?.value;
+      if (value !== null && isNaN(Number(value))) {
+        return null;
+      }
+
+      return value;
+    });
+  });
+}

package/src/shared/charts/components/GPolarisViz/components/VerticalGridLines/VerticalGridLines.tsx

@@ -0,0 +1,32 @@
+import type { ScaleLinear } from 'd3-scale';
+
+import { HORIZONTAL_GROUP_LABEL_HEIGHT } from '../../constants';
+
+interface VerticalGridLinesProps {
+  chartHeight: number;
+  stroke: string;
+  ticks: number[];
+  xScale: ScaleLinear<number, number>;
+}
+
+export const VerticalGridLines = ({ chartHeight, ticks, xScale, stroke }: VerticalGridLinesProps) => {
+  return (
+    <g transform={`translate(0, ${HORIZONTAL_GROUP_LABEL_HEIGHT})`} aria-hidden="true">
+      {ticks.map((value, index) => {
+        if (value === 0) {
+          return null;
+        }
+
+        return (
+          <line
+            key={index}
+            y1={0}
+            y2={chartHeight - HORIZONTAL_GROUP_LABEL_HEIGHT}
+            stroke={stroke}
+            transform={`translate(${xScale(value)},0)`}
+          />
+        );
+      })}
+    </g>
+  );
+};

package/src/shared/charts/components/GPolarisViz/components/VerticalGridLines/index.ts

@@ -0,0 +1 @@
+export { VerticalGridLines } from './VerticalGridLines';

package/src/shared/charts/components/GPolarisViz/components/index.ts

@@ -0,0 +1,6 @@
+export { FunnelChart } from './FunnelChart';
+export type { FunnelChartProps } from './FunnelChart';
+export { ChartSkeleton } from './ChartSkeleton';
+export { TrendIndicator, estimateTrendIndicatorWidth } from './TrendIndicator';
+export type { TrendIndicatorProps } from './TrendIndicator';
+export { ConicGradientWithStops } from './ConicGradientWithStops';