From 5ca3e54348b580991504148cdfe09f1006fa52ff Mon Sep 17 00:00:00 2001 From: Severin Landolt Date: Tue, 24 Oct 2023 15:03:02 +0200 Subject: [PATCH 1/3] fixed gradient prop to only be on areachart --- src/components/chart-elements/AreaChart/AreaChart.tsx | 1 + src/components/chart-elements/common/BaseChartProps.tsx | 1 - src/stories/chart-elements/BarChart.stories.tsx | 5 ----- 3 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 3e3f647af..53d166437 100644 --- 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 { diff --git a/src/components/chart-elements/common/BaseChartProps.tsx b/src/components/chart-elements/common/BaseChartProps.tsx index 7e66521f3..4dca0306f 100644 --- 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; diff --git a/src/stories/chart-elements/BarChart.stories.tsx b/src/stories/chart-elements/BarChart.stories.tsx index 5f4c2629d..12ae02870 100644 --- 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"] }, }; From 87fd00a9763d770c320c392db8336c4bf2ae9f16 Mon Sep 17 00:00:00 2001 From: Severin Landolt Date: Tue, 24 Oct 2023 15:04:39 +0200 Subject: [PATCH 2/3] fix: value test circle --- src/components/vis-elements/ProgressCircle/ProgressCircle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx b/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx index 3ccf0c5b4..5e38ce177 100644 --- a/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx +++ b/src/components/vis-elements/ProgressCircle/ProgressCircle.tsx @@ -112,7 +112,7 @@ const ProgressCircle = React.forwardRef((pr : "stroke-tremor-brand-muted/50 dark:stroke-dark-tremor-brand-muted", )} /> - {value > 0 ? ( + {value >= 0 ? ( Date: Tue, 24 Oct 2023 18:11:08 +0200 Subject: [PATCH 3/3] feat: New prop for x-axis label rotation (#775) * Add label rotation --- .../chart-elements/AreaChart/AreaChart.tsx | 4 ++++ .../chart-elements/BarChart/BarChart.tsx | 7 +++++++ .../chart-elements/LineChart/LineChart.tsx | 4 ++++ .../chart-elements/ScatterChart/ScatterChart.tsx | 9 +++++++++ .../chart-elements/common/BaseChartProps.tsx | 5 +++++ src/stories/chart-elements/AreaChart.stories.tsx | 7 +++++++ src/stories/chart-elements/BarChart.stories.tsx | 15 +++++++++++++++ src/stories/chart-elements/LineChart.stories.tsx | 7 +++++++ .../chart-elements/ScatterChart.stories.tsx | 6 ++++++ 9 files changed, 64 insertions(+) diff --git a/src/components/chart-elements/AreaChart/AreaChart.tsx b/src/components/chart-elements/AreaChart/AreaChart.tsx index 53d166437..18c721edc 100644 --- a/src/components/chart-elements/AreaChart/AreaChart.tsx +++ b/src/components/chart-elements/AreaChart/AreaChart.tsx @@ -76,6 +76,7 @@ const AreaChart = React.forwardRef((props, ref) onValueChange, enableLegendSlider = false, customTooltip, + rotateLabelX, ...other } = props; const CustomTooltip = customTooltip; @@ -182,6 +183,9 @@ const AreaChart = React.forwardRef((props, ref) tickLine={false} axisLine={false} minTickGap={5} + angle={rotateLabelX?.angle} + dy={rotateLabelX?.verticalShift} + height={rotateLabelX?.xAxisHeight} /> ((props, ref) => noDataText, onValueChange, customTooltip, + rotateLabelX, className, enableLegendSlider = false, ...other @@ -177,6 +178,9 @@ const BarChart = React.forwardRef((props, ref) => )} tickLine={false} axisLine={false} + angle={rotateLabelX?.angle} + dy={rotateLabelX?.verticalShift} + height={rotateLabelX?.xAxisHeight} /> ) : ( ((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 index 359f9c753..21f9d9faa 100644 --- a/src/components/chart-elements/LineChart/LineChart.tsx +++ b/src/components/chart-elements/LineChart/LineChart.tsx @@ -71,6 +71,7 @@ const LineChart = React.forwardRef((props, ref) onValueChange, enableLegendSlider = false, customTooltip, + rotateLabelX, ...other } = props; const CustomTooltip = customTooltip; @@ -178,6 +179,9 @@ const LineChart = React.forwardRef((props, ref) tickLine={false} axisLine={false} minTickGap={5} + angle={rotateLabelX?.angle} + dy={rotateLabelX?.verticalShift} + height={rotateLabelX?.xAxisHeight} /> void; customTooltip?: React.ComponentType; + 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((props, noDataText, onValueChange, customTooltip, + rotateLabelX, className, enableLegendSlider = false, ...other @@ -235,6 +241,9 @@ const ScatterChart = React.forwardRef((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 index 4dca0306f..b4d6ce2e0 100644 --- a/src/components/chart-elements/common/BaseChartProps.tsx +++ b/src/components/chart-elements/common/BaseChartProps.tsx @@ -35,6 +35,11 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes< onValueChange?: (value: EventProps) => void; enableLegendSlider?: boolean; customTooltip?: React.ComponentType; + rotateLabelX?: { + angle: number; + verticalShift: number; + xAxisHeight: number; + }; } export default BaseChartProps; diff --git a/src/stories/chart-elements/AreaChart.stories.tsx b/src/stories/chart-elements/AreaChart.stories.tsx index fbfdb83b5..22cb71d66 100644 --- 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 index 12ae02870..3895c0c3d 100644 --- a/src/stories/chart-elements/BarChart.stories.tsx +++ b/src/stories/chart-elements/BarChart.stories.tsx @@ -167,6 +167,21 @@ export const MultipleZeroValues: Story = { }, }; +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 const customTooltipColors: Color[] = ["cyan"]; const customTooltipIndex = "month"; diff --git a/src/stories/chart-elements/LineChart.stories.tsx b/src/stories/chart-elements/LineChart.stories.tsx index e03c64bf7..98ef6753a 100644 --- a/src/stories/chart-elements/LineChart.stories.tsx +++ b/src/stories/chart-elements/LineChart.stories.tsx @@ -141,6 +141,13 @@ export const LongIndexNameAndPreserveStartEnd: Story = { args: { data: longIndexBaseChartData, intervalType: "preserveStartEnd" }, }; +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 index 0af9a4f1e..4358f805c 100644 --- 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";