Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Padding improvement when no axes are shown #774

Merged
merged 6 commits into from
Oct 24, 2023
Merged

fix: Padding improvement when no axes are shown #774

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
926c273
Added no axes logic
severinlandolt Oct 24, 2023
414cb80
update logic
severinlandolt Oct 24, 2023
1222c62
Merge branch 'beta' into fix/noaxes
severinlandolt Oct 24, 2023
ee626c9
removed no gradient
severinlandolt Oct 24, 2023
0e289af
Merge branch 'fix/noaxes' of github.com:tremorlabs/tremor into fix/no…
severinlandolt Oct 24, 2023
bc10f7a
Update stories
severinlandolt Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/chart-elements/AreaChart/AreaChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
...other
} = props;
const CustomTooltip = customTooltip;
const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
const [legendHeight, setLegendHeight] = useState(60);
const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
Expand Down Expand Up @@ -145,7 +146,6 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand All @@ -162,7 +162,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
/>
) : null}
<XAxis
padding={{ left: 20, right: 20 }}
padding={{ left: paddingValue, right: paddingValue }}
hide={!showXAxis}
dataKey={index}
tick={{ transform: "translate(0, 6)" }}
Expand Down
4 changes: 2 additions & 2 deletions src/components/chart-elements/BarChart/BarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
...other
} = props;
const CustomTooltip = customTooltip;
const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
const [legendHeight, setLegendHeight] = useState(60);
const categoryColors = constructCategoryColors(categories, colors);
const [activeBar, setActiveBar] = React.useState<any | undefined>(undefined);
Expand Down Expand Up @@ -140,7 +141,6 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand All @@ -159,7 +159,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>

{layout !== "vertical" ? (
<XAxis
padding={{ left: 20, right: 20 }}
padding={{ left: paddingValue, right: paddingValue }}
hide={!showXAxis}
dataKey={index}
interval={startEndOnly ? "preserveStartEnd" : intervalType}
Expand Down
4 changes: 2 additions & 2 deletions src/components/chart-elements/LineChart/LineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
...other
} = props;
const CustomTooltip = customTooltip;
const paddingValue = !showXAxis && !showYAxis ? 0 : 20;
const [legendHeight, setLegendHeight] = useState(60);
const [activeDot, setActiveDot] = useState<ActiveDot | undefined>(undefined);
const [activeLegend, setActiveLegend] = useState<string | undefined>(undefined);
Expand Down Expand Up @@ -142,7 +143,6 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand All @@ -159,7 +159,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
/>
) : null}
<XAxis
padding={{ left: 20, right: 20 }}
padding={{ left: paddingValue, right: paddingValue }}
hide={!showXAxis}
dataKey={index}
interval={startEndOnly ? "preserveStartEnd" : intervalType}
Expand Down
7 changes: 7 additions & 0 deletions src/stories/chart-elements/AreaChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,13 @@ export const WithoutLegendScroll: Story = {
args: { enableLegendSlider: false },
};

export const NoAxes: Story = {
args: {
showXAxis: false,
showYAxis: false,
},
};

//Custom tooltips
const customTooltipColors: Color[] = ["cyan"];
const customTooltipIndex = "month";
Expand Down
7 changes: 7 additions & 0 deletions src/stories/chart-elements/BarChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,6 +172,13 @@ export const MultipleZeroValues: Story = {
},
};

export const NoAxes: Story = {
args: {
showXAxis: false,
showYAxis: false,
},
};

//Custom tooltips
const customTooltipColors: Color[] = ["cyan"];
const customTooltipIndex = "month";
Expand Down
7 changes: 7 additions & 0 deletions src/stories/chart-elements/LineChart.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,13 @@ export const LongIndexNameAndPreserveStartEnd: Story = {
args: { data: longIndexBaseChartData, intervalType: "preserveStartEnd" },
};

export const NoAxes: Story = {
args: {
showXAxis: false,
showYAxis: false,
},
};

//Custom tooltips
const customTooltipColors: Color[] = ["cyan"];
const customTooltipIndex = "month";
Expand Down
Loading