Adjust min/max size

mui · May 3, 2024 · 8610ff1 · 8610ff1
1 parent 0bb1e9b
commit 8610ff1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/packages/x-charts/src/BarChart/BarElementLabel.tsx b/packages/x-charts/src/BarChart/BarElementLabel.tsx
@@ -56,13 +56,14 @@ export const BarElementLabelRoot = styled(animated.text, {
   opacity: (ownerState.isFaded && 0.3) || 1,
   textAnchor: 'middle',
   textAlign: 'center',
-  dominantBaseline: 'middle',
+  dominantBaseline: 'central',
   pointerEvents: 'none',
 }));
 
 export type BarLabelProps = Omit<React.ComponentPropsWithoutRef<'text'>, 'id'> & {
-  highlightScope?: Partial<HighlightScope>;
   ownerState: BarElementLabelOwnerState;
+  minWidth?: number;
+  minHeight?: number;
 };
 
 export interface BarElementLabelSlots {
@@ -78,8 +79,7 @@ export interface BarElementLabelSlotProps {
 }
 
 export type BarElementLabelProps = Omit<BarElementLabelOwnerState, 'isFaded' | 'isHighlighted'> &
-  Pick<BarLabelProps, 'style' | 'highlightScope'> & {
-    barLabel?: Partial<BarLabelProps>;
+  Pick<BarLabelProps, 'style' | 'minWidth' | 'minHeight'> & {
     /**
      * The props used for each component slot.
      * @default {}
@@ -91,6 +91,10 @@ export type BarElementLabelProps = Omit<BarElementLabelOwnerState, 'isFaded' | '
      */
     slots?: BarElementLabelSlots;
     labelText: string | null;
+    highlightScope?: Partial<HighlightScope>;
+    height?: number;
+    width?: number;
+    layout?: 'vertical' | 'horizontal';
   };
 
 function BarElementLabel(props: BarElementLabelProps) {
@@ -104,6 +108,10 @@ function BarElementLabel(props: BarElementLabelProps) {
     labelText,
     slots,
     slotProps,
+    minHeight,
+    minWidth,
+    height,
+    width,
     ...other
   } = props;
   const { item } = React.useContext(InteractionContext);
@@ -139,7 +147,7 @@ function BarElementLabel(props: BarElementLabelProps) {
     ownerState,
   });
 
-  if (!labelText) {
+  if (!labelText || (height ?? 0) < (minHeight ?? 0) || (width ?? 0) < (minWidth ?? 0)) {
     return null;
   }
 

diff --git a/packages/x-charts/src/BarChart/BarPlot.tsx b/packages/x-charts/src/BarChart/BarPlot.tsx
@@ -66,7 +66,7 @@ export interface BarPlotProps extends BarPlotSlotProps {
   ) => void;
 }
 
-interface CompletedBarData {
+export interface CompletedBarData {
   seriesId: SeriesId;
   dataIndex: number;
   layout: BarSeriesType['layout'];
@@ -284,17 +284,19 @@ function BarPlot(props: BarPlotProps) {
           style={style}
         />
       ))}
-      {barLabelTransition((style, { seriesId, dataIndex, color, value }) => (
+      {barLabelTransition((style, { seriesId, dataIndex, color, value, width, height }) => (
         <BarElementLabel
           seriesId={seriesId}
           dataIndex={dataIndex}
           color={color}
+          width={width}
+          height={height}
           {...other}
           style={
             {
               ...style,
-              x: to([(style as any).x, (style as any).width], (x, width) => (x ?? 0) + width / 2),
-              y: to([(style as any).y, (style as any).height], (x, width) => (x ?? 0) + width / 2),
+              x: to([(style as any).x, (style as any).width], (x, w) => (x ?? 0) + w / 2),
+              y: to([(style as any).y, (style as any).height], (y, w) => (y ?? 0) + w / 2),
             } as any
           }
           labelText={value ? value.toString() : null}