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

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelChartLabels/FunnelChartLabels.tsx

@@ -0,0 +1,387 @@
+import type { IPointSecondaryAction } from '@/shared/charts/types';
+import type { FunnelChartMetaData } from '../../types';
+import type { ScaleBand } from 'd3-scale';
+import type { ReactNode } from 'react';
+
+import { getTrendIndicatorData } from '../../../../utilities/getTrendIndicatorData';
+import { estimateStringWidth, useChartContext } from '@shopify/polaris-viz-core';
+import { estimateStringWidthWithOffset } from '../../../../utilities';
+import { TrendIndicator } from '../../../TrendIndicator';
+import { ScaleIconTooltip } from '../ScaleIconTooltip';
+import { LINE_HEIGHT } from '../../../../constants';
+import { Fragment, useMemo, useState } from 'react';
+import { Button, Tooltip } from '@shopify/polaris';
+import { SingleTextLine } from '../../../Labels';
+import { ScaleIcon } from '../ScaleIcon';
+
+const LINE_GAP = 5;
+const LINE_PADDING = 4;
+const GROUP_OFFSET = 10;
+const LABEL_FONT_SIZE = 12;
+const VALUE_FONT_SIZE = 14;
+const VALUE_FONT_WEIGHT = 500;
+const PRIMARY_VALUE_FONT_WEIGHT = 550;
+const VALUE_FONT_SIZE_SMALL = 12;
+const TREND_INDICATOR_SPACING = 20;
+const TREND_INDICATOR_SPACING_2 = 10;
+const VERTICAL_STACK_SPACING = 3;
+const MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY = 400;
+export const LABEL_VERTICAL_OFFSET = 2;
+const TREND_INDICATOR_SPACING_ADJUSTMENT = 35;
+
+const ACTION_BUTTON_WIDTH = 20;
+
+const TEXT_COLOR = '#616161';
+
+const PRIMARY_TEXT_COLOR = '#303030';
+
+const REDUCED_FONT_SIZE = 11;
+
+interface IFunnelChartLabel {
+  id?: string;
+  value: string;
+  isDeleted?: boolean;
+  secondaryActions?: IPointSecondaryAction[];
+}
+export interface FunnelChartLabelsProps {
+  formattedValues: string[];
+  labels: IFunnelChartLabel[];
+  labelWidth: number;
+  barWidth: number;
+  percentages: string[];
+  trends?: FunnelChartMetaData['trends'];
+  xScale: ScaleBand<string>;
+  shouldApplyScaling: boolean;
+  showPercentages?: boolean;
+  renderScaleIconTooltipContent?: () => ReactNode;
+  hoverIndex?: number | null;
+  onMouseEnter?: (index: number) => void;
+  onMouseLeave?: () => void;
+  isShowScaleIcon?: boolean;
+}
+
+const LAYOUT_STRATEGY = {
+  ONE_LINE_ALL: 'one_line_all',
+  ONE_LINE_COUNTS_AND_TRENDS: 'one_line_counts_and_trends',
+  VERTICAL_STACKING: 'vertical_stacking',
+} as const;
+
+export function FunnelChartLabels({
+  formattedValues,
+  labels,
+  labelWidth,
+  barWidth,
+  percentages,
+  trends,
+  xScale,
+  shouldApplyScaling,
+  showPercentages = true,
+  renderScaleIconTooltipContent,
+  hoverIndex,
+  onMouseEnter,
+  onMouseLeave,
+  isShowScaleIcon = false,
+}: FunnelChartLabelsProps) {
+  const { characterWidths, containerBounds } = useChartContext();
+  const chartContainerWidth = containerBounds?.width ?? 0;
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const labelFontSize = useMemo(() => {
+    const maxLabelWidth = Math.max(...labels.map((label) => estimateStringWidth(label.value, characterWidths)));
+    return maxLabelWidth > labelWidth ? REDUCED_FONT_SIZE : LABEL_FONT_SIZE;
+  }, [labels, characterWidths, labelWidth]);
+
+  const { layoutStrategy } = useMemo(() => {
+    // Check if all items can fit in one Main Percentage, Counts, and TI (if present) on a single line.
+    const actionButtonWidth = labels[0]?.secondaryActions?.length ? ACTION_BUTTON_WIDTH : 0;
+    const canAllFitInOneLine = labels.every((_, i) => {
+      const isLast = i === labels.length - 1;
+      const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+
+      const availableWidth = currentTargetWidth - actionButtonWidth;
+
+      const currentPercentWidth = showPercentages
+        ? estimateStringWidthWithOffset(percentages[i]!, VALUE_FONT_SIZE, VALUE_FONT_WEIGHT)
+        : 0;
+      const currentCountStringWidth = estimateStringWidthWithOffset(
+        formattedValues[i]!,
+        VALUE_FONT_SIZE,
+        VALUE_FONT_WEIGHT,
+      );
+      const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(
+        (trends as any[])?.[i]?.reached,
+      );
+
+      return (
+        currentPercentWidth +
+          LINE_PADDING +
+          currentCountStringWidth +
+          (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+        availableWidth
+      );
+    });
+
+    if (canAllFitInOneLine) {
+      // All elements in one line
+      return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_ALL };
+    }
+
+    // If chart width is very narrow, prioritize full stacking.
+    if (chartContainerWidth < MIN_CHART_WIDTH_FOR_RULE_3_PRIORITY) {
+      return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+    }
+
+    // Check if counts and trends can fit in one line.
+    const canCountsAndTrendsFitOneLine = labels.every((_, i) => {
+      const isLast = i === labels.length - 1;
+      const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+
+      const availableWidth = currentTargetWidth - actionButtonWidth;
+
+      const currentCountStringWidth = estimateStringWidthWithOffset(
+        formattedValues[i]!,
+        VALUE_FONT_SIZE,
+        VALUE_FONT_WEIGHT,
+      );
+      const { trendIndicatorWidth: currentTrendWidth, trendIndicatorProps: currentTrendProps } = getTrendIndicatorData(
+        (trends as any[])?.[i]?.reached,
+      );
+
+      return (
+        currentCountStringWidth + (currentTrendProps ? TREND_INDICATOR_SPACING + currentTrendWidth : 0) <
+        Number(availableWidth) + TREND_INDICATOR_SPACING_ADJUSTMENT
+      );
+    });
+
+    if (canCountsAndTrendsFitOneLine) {
+      return { layoutStrategy: LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS };
+    }
+
+    // Fall back to vertical stacking.
+    return { layoutStrategy: LAYOUT_STRATEGY.VERTICAL_STACKING };
+  }, [
+    labels,
+    percentages,
+    formattedValues,
+    trends,
+    labelWidth,
+    barWidth,
+    chartContainerWidth,
+    showPercentages,
+    hoverIndex,
+  ]);
+
+  function displayChartLabels(
+    layoutStrategy: (typeof LAYOUT_STRATEGY)[keyof typeof LAYOUT_STRATEGY],
+    index: number,
+    currentTargetWidth: number,
+    percentWidth: number,
+    countStringWidth: number,
+    trendIndicatorProps: any,
+    trendIndicatorWidth: number,
+    showPercentages: boolean,
+  ) {
+    if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_ALL) {
+      return (
+        <Fragment>
+          {showPercentages ? (
+            <SingleTextLine
+              color={PRIMARY_TEXT_COLOR}
+              text={percentages[index]!}
+              targetWidth={percentWidth}
+              textAnchor="start"
+              fontSize={VALUE_FONT_SIZE}
+              fontWeight={PRIMARY_VALUE_FONT_WEIGHT}
+            />
+          ) : null}
+          <SingleTextLine
+            color={TEXT_COLOR}
+            text={formattedValues[index]!}
+            x={showPercentages ? percentWidth + LINE_PADDING : 0}
+            targetWidth={
+              currentTargetWidth -
+              (percentWidth + LINE_PADDING) -
+              (trendIndicatorProps ? TREND_INDICATOR_SPACING + trendIndicatorWidth : 0)
+            }
+            textAnchor="start"
+            fontSize={VALUE_FONT_SIZE}
+            fontWeight={!showPercentages ? VALUE_FONT_WEIGHT : undefined}
+          />{' '}
+          {trendIndicatorProps && (
+            <g
+              transform={`translate(${
+                percentWidth + countStringWidth + TREND_INDICATOR_SPACING
+              }, ${-LABEL_VERTICAL_OFFSET})`}
+            >
+              <TrendIndicator {...trendIndicatorProps} />
+            </g>
+          )}
+        </Fragment>
+      );
+    }
+
+    if (layoutStrategy === LAYOUT_STRATEGY.ONE_LINE_COUNTS_AND_TRENDS) {
+      const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+      return (
+        <Fragment>
+          {showPercentages ? (
+            <Fragment>
+              <SingleTextLine
+                color={TEXT_COLOR}
+                text={percentages[index]!}
+                targetWidth={currentTargetWidth}
+                textAnchor="start"
+                fontSize={VALUE_FONT_SIZE}
+                fontWeight={VALUE_FONT_WEIGHT}
+              />
+            </Fragment>
+          ) : null}
+          <g transform={`translate(0, ${formattedValueTransformY})`}>
+            <SingleTextLine
+              color={TEXT_COLOR}
+              text={formattedValues[index]!}
+              targetWidth={trendIndicatorProps ? countStringWidth : currentTargetWidth}
+              textAnchor="start"
+              fontSize={VALUE_FONT_SIZE_SMALL}
+              fontWeight={VALUE_FONT_WEIGHT}
+              x={0}
+              y={2}
+            />
+            {trendIndicatorProps && (
+              <g transform={`translate(${countStringWidth + TREND_INDICATOR_SPACING_2}, ${-LABEL_VERTICAL_OFFSET})`}>
+                <TrendIndicator {...trendIndicatorProps} />
+              </g>
+            )}
+          </g>
+        </Fragment>
+      );
+    }
+
+    if (layoutStrategy === LAYOUT_STRATEGY.VERTICAL_STACKING) {
+      const formattedValueTransformY = showPercentages ? LINE_HEIGHT + VERTICAL_STACK_SPACING : 0;
+      const trendIndicatorTransformY = showPercentages
+        ? LINE_HEIGHT * 2 + VERTICAL_STACK_SPACING * 2
+        : LINE_HEIGHT + VERTICAL_STACK_SPACING * 2;
+      return (
+        <Fragment>
+          {showPercentages ? (
+            <SingleTextLine
+              color={TEXT_COLOR}
+              text={percentages[index]!}
+              targetWidth={currentTargetWidth}
+              textAnchor="start"
+              fontSize={VALUE_FONT_SIZE}
+              fontWeight={VALUE_FONT_WEIGHT}
+            />
+          ) : null}
+          <g transform={`translate(0, ${formattedValueTransformY})`}>
+            <SingleTextLine
+              color={TEXT_COLOR}
+              text={formattedValues[index]!}
+              targetWidth={currentTargetWidth}
+              textAnchor="start"
+              fontSize={VALUE_FONT_SIZE}
+              fontWeight={VALUE_FONT_WEIGHT}
+              x={0}
+            />
+          </g>
+          {trendIndicatorProps && (
+            <g transform={`translate(0, ${trendIndicatorTransformY})`}>
+              <g transform={`translate(0, ${-LABEL_VERTICAL_OFFSET})`}>
+                <TrendIndicator {...trendIndicatorProps} />
+              </g>
+            </g>
+          )}
+        </Fragment>
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <Fragment>
+      {labels.map((label, index) => {
+        const x = xScale(index.toString()) ?? 0;
+        const showScaleIcon = index === 0 && shouldApplyScaling && isShowScaleIcon;
+        const isLast = index === labels.length - 1;
+
+        const currentTargetWidth = isLast ? barWidth - GROUP_OFFSET * 2 : labelWidth - GROUP_OFFSET * 2;
+
+        const percentWidth = estimateStringWidthWithOffset(percentages[index]!, VALUE_FONT_SIZE, VALUE_FONT_WEIGHT);
+
+        const countStringWidth = estimateStringWidthWithOffset(
+          formattedValues[index]!,
+          VALUE_FONT_SIZE,
+          VALUE_FONT_WEIGHT,
+        );
+
+        const { trendIndicatorProps, trendIndicatorWidth } = getTrendIndicatorData((trends as any[])?.[index]?.reached);
+
+        const updatedPercentWidth = showPercentages ? percentWidth : 0;
+
+        return (
+          <g
+            transform={`translate(${index === 0 ? x : x + GROUP_OFFSET},${GROUP_OFFSET})`}
+            key={index}
+            onMouseEnter={() => onMouseEnter?.(index)}
+            onMouseLeave={() => onMouseLeave?.()}
+          >
+            {showScaleIcon && (
+              <g
+                transform="translate(0, -3)"
+                onMouseEnter={() => setShowTooltip(true)}
+                onMouseLeave={() => setShowTooltip(false)}
+              >
+                <ScaleIcon />
+                {showTooltip && renderScaleIconTooltipContent && (
+                  <ScaleIconTooltip renderScaleIconTooltipContent={renderScaleIconTooltipContent} />
+                )}
+              </g>
+            )}
+            <SingleTextLine
+              color={TEXT_COLOR}
+              text={label.value}
+              targetWidth={currentTargetWidth}
+              textAnchor="start"
+              fontSize={labelFontSize}
+              x={showScaleIcon ? 20 : 0}
+            />
+            <g transform={`translate(0,${LINE_HEIGHT + LINE_GAP})`}>
+              {displayChartLabels(
+                layoutStrategy,
+                index,
+                currentTargetWidth,
+                updatedPercentWidth,
+                countStringWidth,
+                trendIndicatorProps,
+                trendIndicatorWidth,
+                showPercentages,
+              )}
+            </g>
+            {hoverIndex === index &&
+              label.secondaryActions?.map((action, index) => (
+                <foreignObject
+                  x={currentTargetWidth - (index + 1) * 20}
+                  y={LINE_HEIGHT}
+                  style={{ overflow: 'visible' }}
+                  key={index}
+                >
+                  <Tooltip content={'Remove step'}>
+                    <Button
+                      variant="tertiary"
+                      tone="critical"
+                      onClick={() => action.onAction?.()}
+                      icon={action.icon}
+                      disabled={action.disabled}
+                      loading={action.loading}
+                    />
+                  </Tooltip>
+                </foreignObject>
+              ))}
+          </g>
+        );
+      })}
+    </Fragment>
+  );
+}

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

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

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.scss

@@ -0,0 +1,8 @@
+.GFunnelChartNextTooltip-container {
+  top: 0;
+  left: 0;
+  position: absolute;
+  pointer-events: auto;
+  z-index: 520;
+  max-width: 300px;
+}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/FunnelTooltip/FunnelTooltip.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+
+import { animated, to as interpolate, useSpring } from '@react-spring/web';
+import { FUNNEL_CONNECTOR_Y_OFFSET } from '../../constants';
+
+export type TooltipPlacement = 'above' | 'below';
+
+export function FunnelTooltip({
+  children,
+  x,
+  y,
+  placement = 'above',
+}: {
+  children: ReactNode;
+  x: number;
+  y: number;
+  placement?: TooltipPlacement;
+}) {
+  const yOffset = placement === 'above' ? FUNNEL_CONNECTOR_Y_OFFSET : -FUNNEL_CONNECTOR_Y_OFFSET;
+  const placementTranslateY = placement === 'above' ? '-100%' : '0%';
+
+  const springs = useSpring({
+    from: { opacity: 0, posX: x, posY: y + yOffset },
+    to: { opacity: 1, posX: Math.round(x), posY: Math.round(y) },
+  });
+
+  const transform = interpolate(
+    [springs.posX, springs.posY],
+    (px, py) => `translate(${px}px, ${py}px) translateY(${placementTranslateY})`,
+  );
+
+  return (
+    <animated.div className="GFunnelChartNextTooltip-container" style={{ transform, opacity: springs.opacity }}>
+      {children}
+    </animated.div>
+  );
+}

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

@@ -0,0 +1,3 @@
+export type { TooltipPlacement } from './FunnelTooltip';
+
+export { FunnelTooltip } from './FunnelTooltip';

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIcon.tsx

@@ -0,0 +1,20 @@
+import { Fragment } from 'react';
+
+const ICON_COLOR = '#050F2E';
+const ICON_BACKGROUND_COLOR = '#F3F3F3';
+
+export function ScaleIcon() {
+  return (
+    <Fragment>
+      <circle cx="8" cy="8" r="8" fill={ICON_BACKGROUND_COLOR} />
+      <g transform="translate(4, 2)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.99996 0.820219C2.99996 0.367258 3.36716 6.10352e-05 3.82012 6.10352e-05C4.27308 6.10352e-05 4.64027 0.367258 4.64027 0.820219V3.55216L6.04518 2.98454C6.46516 2.81486 6.94318 3.01777 7.11286 3.43774C7.28254 3.85772 7.07964 4.33574 6.65966 4.50542L1.3366 6.65608C0.916618 6.82576 0.438604 6.62285 0.268922 6.20287C0.0992403 5.7829 0.302145 5.30488 0.722123 5.1352L3.00068 4.2146C3.0002 4.2031 2.99996 4.19153 2.99996 4.1799V0.820219ZM6.04523 6.3073C6.4652 6.13762 6.94322 6.34052 7.1129 6.7605C7.28258 7.18048 7.07968 7.65849 6.6597 7.82817L4.64032 8.64406V11.7526C4.64032 12.2056 4.27312 12.5728 3.82016 12.5728C3.3672 12.5728 3 12.2056 3 11.7526V9.30679L1.33664 9.97883C0.91666 10.1485 0.438646 9.94561 0.268964 9.52563C0.0992823 9.10565 0.302187 8.62764 0.722165 8.45795L6.04523 6.3073Z"
+          fill={ICON_COLOR}
+        />
+      </g>
+    </Fragment>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/ScaleIconTooltip.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+
+import { DEFAULT_THEME_NAME, useChartContext } from '@shopify/polaris-viz-core';
+import { TooltipContentContainer } from '../../TooltipContent';
+import { TooltipWithPortal } from './TooltipWithPortal';
+import { FunnelTooltip } from './FunnelTooltip';
+import { Fragment } from 'react';
+
+const TOOLTIP_VERTICAL_OFFSET = 65;
+
+interface ScaleIconTooltipProps {
+  renderScaleIconTooltipContent: () => ReactNode;
+}
+
+export function ScaleIconTooltip({ renderScaleIconTooltipContent }: ScaleIconTooltipProps) {
+  const { containerBounds } = useChartContext();
+  const { x, y } = containerBounds ?? {
+    x: 0,
+    y: 0,
+  };
+
+  return (
+    <TooltipWithPortal>
+      <FunnelTooltip x={x} y={y - TOOLTIP_VERTICAL_OFFSET}>
+        <TooltipContentContainer maxWidth={200} theme={DEFAULT_THEME_NAME} color="white">
+          {() => <Fragment>{renderScaleIconTooltipContent()}</Fragment>}
+        </TooltipContentContainer>
+      </FunnelTooltip>
+    </TooltipWithPortal>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/CustomTooltip.tsx

@@ -0,0 +1,68 @@
+import type { GDataPoint, GDataPointTooltipPrimaryAction } from '@/shared/charts/types/chart';
+
+import { TOOLTIP_WIDTH } from '../../constants';
+
+import { BlockStack, Box, Button, Divider, InlineStack, Text } from '@shopify/polaris';
+
+export interface TooltipContentProps {
+  data: {
+    key: string;
+    value: string;
+  }[];
+  primaryAction?: GDataPointTooltipPrimaryAction;
+  item?: GDataPoint;
+}
+
+export function CustomTooltip({ data, primaryAction, item }: TooltipContentProps) {
+  const basicInfo = data[0];
+  const metricsData = data.slice(1);
+
+  return (
+    <div
+      style={{
+        background: '#FFFFFF',
+        borderRadius: 8,
+        padding: 12,
+        boxShadow:
+          '0px 8px 16px -4px rgba(26, 26, 26, 0.22), inset 0px 1px 0px 0px rgba(204, 204, 204, 0.5), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.17), inset -1px 0px 0px 0px rgba(0, 0, 0, 0.13), inset 1px 0px 0px 0px rgba(0, 0, 0, 0.13)',
+        width: TOOLTIP_WIDTH,
+        maxWidth: TOOLTIP_WIDTH,
+      }}
+    >
+      <BlockStack gap="300">
+        <Box>
+          <Text as="p" variant="bodyMd" fontWeight="semibold" truncate>
+            {basicInfo?.key}
+          </Text>
+          <Text as="p" variant="bodyMd" tone="subdued" truncate>
+            {basicInfo?.value}
+          </Text>
+        </Box>
+
+        <Divider />
+
+        <BlockStack gap="100">
+          {metricsData.map(({ key, value }, index) => (
+            <InlineStack key={`row-${index}-${key}`} align="space-between" blockAlign="center" gap="200">
+              <Text as="span" variant="bodySm" tone="subdued">
+                {key}
+              </Text>
+
+              <Text as="span" variant="bodySm" fontWeight="semibold">
+                {value}
+              </Text>
+            </InlineStack>
+          ))}
+        </BlockStack>
+
+        {primaryAction && (
+          <div role="button" tabIndex={0} onMouseDown={() => primaryAction.onClick(item)}>
+            <Button fullWidth size="medium">
+              {primaryAction.content}
+            </Button>
+          </div>
+        )}
+      </BlockStack>
+    </div>
+  );
+}

package/src/shared/charts/components/GPolarisViz/components/FunnelChartNext/components/Tooltip/Tooltip.scss

@@ -0,0 +1,52 @@
+.GFunnelChartNextTooltip-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  > *:not(:last-child)::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background: rgb(227, 227, 227);
+    margin: 8px 0 0;
+    grid-column: 1 / -1;
+  }
+}
+
+.GFunnelChartNextTooltip-row {
+  font-size: 12px;
+  color: rgba(97, 97, 97, 1);
+  display: grid;
+  grid-template-columns: 8px auto;
+  column-gap: 4px;
+  align-items: center;
+  line-height: 16px;
+}
+
+.GFunnelChartNextTooltip-keys {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: center;
+}
+
+.GFunnelChartNextTooltip-values {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  grid-column: 2;
+  font-weight: 600;
+  padding-top: 2px;
+
+  > span {
+    flex: 0 0 auto;
+  }
+
+  .GFunnelChartNextTooltip-trendIndicator {
+    margin-left: auto;
+  }
+
+  strong {
+    font-weight: 500;
+    color: rgba(31, 33, 36, 1);
+  }
+}