Merge branch 'beta' into fix/noaxes

tremorlabs · Oct 24, 2023 · 1222c62 · 1222c62
2 parents 414cb80 + 416c2ab
commit 1222c62
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 7 deletions.
diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx
@@ -38,6 +38,7 @@ export interface AreaChartProps extends BaseChartProps {
   stack?: boolean;
   curveType?: CurveType;
   connectNulls?: boolean;
+  showGradient?: boolean;
 }
 
 interface ActiveDot {
@@ -75,6 +76,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    rotateLabelX,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -181,6 +183,9 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
               tickLine={false}
               axisLine={false}
               minTickGap={5}
+              angle={rotateLabelX?.angle}
+              dy={rotateLabelX?.verticalShift}
+              height={rotateLabelX?.xAxisHeight}
             />
             <YAxis
               width={yAxisWidth}

diff --git a/src/components/chart-elements/BarChart/BarChart.tsx b/src/components/chart-elements/BarChart/BarChart.tsx
@@ -75,6 +75,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     noDataText,
     onValueChange,
     customTooltip,
+    rotateLabelX,
     className,
     enableLegendSlider = false,
     ...other
@@ -177,6 +178,9 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 )}
                 tickLine={false}
                 axisLine={false}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             ) : (
               <XAxis
@@ -199,6 +203,9 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 tickFormatter={valueFormatter}
                 minTickGap={5}
                 allowDecimals={allowDecimals}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             )}
             {layout !== "vertical" ? (

diff --git a/src/components/chart-elements/LineChart/LineChart.tsx b/src/components/chart-elements/LineChart/LineChart.tsx
@@ -71,6 +71,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    rotateLabelX,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -178,6 +179,9 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
               tickLine={false}
               axisLine={false}
               minTickGap={5}
+              angle={rotateLabelX?.angle}
+              dy={rotateLabelX?.verticalShift}
+              height={rotateLabelX?.xAxisHeight}
             />
             <YAxis
               width={yAxisWidth}

diff --git a/src/components/chart-elements/ScatterChart/ScatterChart.tsx b/src/components/chart-elements/ScatterChart/ScatterChart.tsx
@@ -74,6 +74,11 @@ export interface ScatterChartProps
   enableLegendSlider?: boolean;
   onValueChange?: (value: EventProps) => void;
   customTooltip?: React.ComponentType<CustomTooltipType>;
+  rotateLabelX?: {
+    angle: number;
+    verticalShift: number;
+    xAxisHeight: number;
+  };
 }
 
 const renderShape = (props: any, activeNode: any | undefined, activeLegend: string | undefined) => {
@@ -130,6 +135,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
     noDataText,
     onValueChange,
     customTooltip,
+    rotateLabelX,
     className,
     enableLegendSlider = false,
     ...other
@@ -235,6 +241,9 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
                 minTickGap={5}
                 domain={xAxisDomain as AxisDomain}
                 allowDataOverflow={true}
+                angle={rotateLabelX?.angle}
+                dy={rotateLabelX?.verticalShift}
+                height={rotateLabelX?.xAxisHeight}
               />
             ) : null}
             {y ? (

diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx
@@ -25,7 +25,6 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   yAxisWidth?: number;
   intervalType?: IntervalType;
   showTooltip?: boolean;
-  showGradient?: boolean;
   showLegend?: boolean;
   showGridLines?: boolean;
   autoMinValue?: boolean;
@@ -36,6 +35,11 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   onValueChange?: (value: EventProps) => void;
   enableLegendSlider?: boolean;
   customTooltip?: React.ComponentType<CustomTooltipType>;
+  rotateLabelX?: {
+    angle: number;
+    verticalShift: number;
+    xAxisHeight: number;
+  };
 }
 
 export default BaseChartProps;
diff --git a/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx b/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx
@@ -112,7 +112,7 @@ const ProgressCircle = React.forwardRef<HTMLDivElement, ProgressCircleProps>((pr
                 : "stroke-tremor-brand-muted/50 dark:stroke-dark-tremor-brand-muted",
             )}
           />
-          {value > 0 ? (
+          {value >= 0 ? (
             <circle
               r={normalizedRadius}
               cx={radius}

diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx
@@ -171,6 +171,13 @@ export const MultipleZeroValues: Story = {
   },
 };
 
+export const RotateXLabels: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 export const WithoutLegendScroll: Story = {
   args: { enableLegendSlider: false },
 };

diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx
@@ -58,11 +58,6 @@ export const OtherColors: Story = {
   args: { colors: ["blue", "green"] },
 };
 
-// @sev
-export const NoGradient: Story = {
-  args: { showGradient: false },
-};
-
 export const ChangedCategoriesOrder: Story = {
   args: { categories: ["Successful Payments", "Sales"] },
 };
@@ -177,6 +172,21 @@ export const NoAxes: Story = {
     showXAxis: false,
     showYAxis: false,
   },
+}; 
+
+export const RotateXLabelsHorizontal: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
+export const RotateXLabelVertical: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+    layout: "vertical",
+  },
 };
 
 //Custom tooltips

diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx
@@ -148,6 +148,13 @@ export const NoAxes: Story = {
   },
 };
 
+export const RotateXLabels: Story = {
+  args: {
+    data: longBaseChartData,
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 //Custom tooltips
 const customTooltipColors: Color[] = ["cyan"];
 const customTooltipIndex = "month";

diff --git a/src/stories/chart-elements/ScatterChart.stories.tsx b/src/stories/chart-elements/ScatterChart.stories.tsx
@@ -126,6 +126,12 @@ export const MultipleZeroValues: Story = {
   },
 };
 
+export const RotateXLabel: Story = {
+  args: {
+    rotateLabelX: { angle: -45, verticalShift: 15, xAxisHeight: 50 },
+  },
+};
+
 //Custom tooltips
 const customTooltipColors: Color[] = ["red", "green", "blue", "yellow"];
 const customTooltipIndex = "location";