diff --git a/src/components/chart-elements/FunnelChart/FunnelChart.tsx b/src/components/chart-elements/FunnelChart/FunnelChart.tsx index 25359941..2940bdb0 100644 --- a/src/components/chart-elements/FunnelChart/FunnelChart.tsx +++ b/src/components/chart-elements/FunnelChart/FunnelChart.tsx @@ -46,8 +46,8 @@ type DataT = { name: string; }; -const DEFAULT_X_AXIS_HEIGHT = 15; -const GLOBAL_PADDING = 20; +const DEFAULT_X_AXIS_HEIGHT = 25; +const GLOBAL_PADDING = 10; const HALF_PADDING = GLOBAL_PADDING / 2; const Y_AXIS_LABELS = ["100%", "75%", "50%", "25%", "0%"]; @@ -79,7 +79,6 @@ export interface FunnelChartProps extends React.HTMLAttributes { } //#region Funnel Chart Primitive -// ============================================================================ const FunnelChartPrimitive = React.forwardRef( (props: FunnelChartProps, ref) => { @@ -98,7 +97,7 @@ const FunnelChartPrimitive = React.forwardRef( showArrow = true, xAxisLabel = "", yAxisLabel = "", - yAxisPadding = showYAxis ? (yAxisLabel ? 75 : 45) : 0, + yAxisPadding = showYAxis ? (yAxisLabel ? 70 : 45) : 0, showTooltip = true, onValueChange, customTooltip, @@ -623,14 +622,14 @@ const FunnelChartPrimitive = React.forwardRef( {showXAxis && xAxisLabel ? ( ( {xAxisLabel} ) : null} - {/* {showXAxis && xAxisLabel ? ( - -
- {xAxisLabel} -
-
- ) : null} */} - {/* {showYAxis && yAxisLabel ? ( - -
- {yAxisLabel} -
-
- ) : null} */} {showYAxis && yAxisLabel ? ( ( stroke="" className={tremorTwMerge( // base - "text-tremor-default", + "text-tremor-default cursor-default font-medium", // light "fill-tremor-content-emphasis", // dark @@ -776,7 +729,6 @@ const FunnelChartPrimitive = React.forwardRef( FunnelChartPrimitive.displayName = "FunnelChart"; //#region Data Validation -// ============================================================================ const validateData = (data: DataT[], calculatedFrom?: CalculateFrom): string | null => { if (data && data.length > 0) { @@ -794,7 +746,6 @@ const validateData = (data: DataT[], calculatedFrom?: CalculateFrom): string | n }; //#region Exports -// ============================================================================ const FunnelChart = ({ data, ...props }: FunnelChartProps) => { const errorMessage = data ? validateData(data, props.calculateFrom) : null;