Skip to content

Commit

Permalink
added equidistant props
Browse files Browse the repository at this point in the history
  • Loading branch information
@severinlandolt
severinlandolt committed Oct 17, 2023
1 parent dbba04a commit 7dd7a7d
Show file tree
Hide file tree
Showing 9 changed files with 397 additions and 4,611 deletions.
3 changes: 1 addition & 2 deletions src/components/chart-elements/AreaChart/AreaChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,8 +144,8 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{" "}
{showGridLines ? (
<CartesianGrid
className={tremorTwMerge(
Expand Down Expand Up @@ -178,7 +178,6 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
interval={intervalType}
tickLine={false}
axisLine={false}
padding={{ left: 10, right: 10 }}
minTickGap={5}
/>
<YAxis
Expand Down
5 changes: 3 additions & 2 deletions src/components/chart-elements/BarChart/BarChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
showXAxis = true,
showYAxis = true,
yAxisWidth = 56,
intervalType = "preserveStartEnd",
showTooltip = true,
showLegend = true,
showGridLines = true,
Expand Down Expand Up @@ -138,6 +139,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand All @@ -158,7 +160,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
<XAxis
hide={!showXAxis}
dataKey={index}
interval="preserveStartEnd"
interval={intervalType}
tick={{ transform: "translate(0, 6)" }}
ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
fill=""
Expand Down Expand Up @@ -193,7 +195,6 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
tickLine={false}
axisLine={false}
tickFormatter={valueFormatter}
padding={{ left: 10, right: 10 }}
minTickGap={5}
allowDecimals={allowDecimals}
/>
Expand Down
5 changes: 3 additions & 2 deletions src/components/chart-elements/LineChart/LineChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
showXAxis = true,
showYAxis = true,
yAxisWidth = 56,
intervalType = "preserveStartEnd",
animationDuration = 900,
showAnimation = false,
showTooltip = true,
Expand Down Expand Up @@ -140,6 +141,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand All @@ -158,7 +160,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
<XAxis
hide={!showXAxis}
dataKey={index}
interval="preserveStartEnd"
interval={intervalType}
tick={{ transform: "translate(0, 6)" }}
ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
fill=""
Expand All @@ -173,7 +175,6 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
)}
tickLine={false}
axisLine={false}
padding={{ left: 10, right: 10 }}
minTickGap={5}
/>
<YAxis
Expand Down
2 changes: 1 addition & 1 deletion src/components/chart-elements/ScatterChart/ScatterChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
}
: undefined
}
margin={{ left: 20, right: 20 }}
>
{showGridLines ? (
<CartesianGrid
Expand Down Expand Up @@ -229,7 +230,6 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
tickLine={false}
tickFormatter={valueFormatter.x}
axisLine={false}
padding={{ left: 0, right: 0 }}
minTickGap={5}
domain={xAxisDomain as AxisDomain}
allowDataOverflow={true}
Expand Down
24 changes: 21 additions & 3 deletions src/stories/chart-elements/AreaChart.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
simpleBaseChartData as data,
simpleBaseChartDataWithNulls,
singleAndMultipleData,
longBaseChartData,
longIndexBaseChartData,
} from "./helpers/testData";
import { valueFormatter } from "./helpers/utils";

Expand Down Expand Up @@ -127,10 +129,26 @@ export const SingleAndMultipleDataAndOnValueChange: Story = {
args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },
};

export const IntervalTypePreserve: Story = {
export const Equidistant: Story = {
args: { intervalType: "equidistantPreserveStart" },
};

export const LongDataInput: Story = {
args: { data: longBaseChartData },
};

export const LongDataInputAndEquidistant: Story = {
args: { data: longBaseChartData, intervalType: "equidistantPreserveStart" },
};

export const LongIndexName: Story = {
args: { data: longIndexBaseChartData },
};

export const LongIndexNameAndEquidistant: Story = {
args: { data: longIndexBaseChartData, intervalType: "equidistantPreserveStart" },
};

export const MultipleZeroValues: Story = {
args: {
data: [
Expand All @@ -140,12 +158,12 @@ export const MultipleZeroValues: Story = {
"Successful Payments": 0,
},
{
month: "Jun 21'",
month: "Jun 21",
Sales: 2390,
"Successful Payments": 0,
},
{
month: "Jul 21'",
month: "Jul 21",
Sales: 3490,
"Successful Payments": 0,
},
Expand Down
47 changes: 45 additions & 2 deletions src/stories/chart-elements/BarChart.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,12 @@ import type { Meta, StoryObj } from "@storybook/react";
import { BarChart } from "components";
import { CustomTooltipType } from "components/chart-elements/common/CustomTooltipProps";
import { Color, currencyValueFormatter } from "lib";
import { simpleBaseChartData as data, singleAndMultipleData } from "./helpers/testData";
import {
simpleBaseChartData as data,
singleAndMultipleData,
longBaseChartData,
longIndexBaseChartData,
} from "./helpers/testData";

const meta: Meta<typeof BarChart> = {
title: "Components/Chart/BarChart",
Expand Down Expand Up @@ -121,10 +126,48 @@ export const SingleAndMultipleDataAndOnValueChange: Story = {
args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },
};

export const IntervalTypePreserve: Story = {
export const Equidistant: Story = {
args: { intervalType: "equidistantPreserveStart" },
};

export const LongDataInput: Story = {
args: { data: longBaseChartData },
};

export const LongDataInputAndEquidistant: Story = {
args: { data: longBaseChartData, intervalType: "equidistantPreserveStart" },
};

export const LongIndexName: Story = {
args: { data: longIndexBaseChartData },
};

export const LongIndexNameAndEquidistant: Story = {
args: { data: longIndexBaseChartData, intervalType: "equidistantPreserveStart" },
};

export const MultipleZeroValues: Story = {
args: {
data: [
{
month: "May 21",
Sales: 2390,
"Successful Payments": 0,
},
{
month: "Jun 21",
Sales: 2390,
"Successful Payments": 0,
},
{
month: "Jul 21",
Sales: 3490,
"Successful Payments": 0,
},
],
},
};

//Custom tooltips
const customTooltipColors: Color[] = ["cyan"];
const customTooltipIndex = "month";
Expand Down
20 changes: 19 additions & 1 deletion src/stories/chart-elements/LineChart.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {
simpleBaseChartData as data,
simpleBaseChartDataWithNulls,
singleAndMultipleData,
longBaseChartData,
longIndexBaseChartData,
} from "./helpers/testData";
import { valueFormatter } from "./helpers/utils";

Expand Down Expand Up @@ -116,10 +118,26 @@ export const SingleAndMultipleDataAndOnValueChange: Story = {
args: { data: singleAndMultipleData, onValueChange: (v: any) => alert(JSON.stringify(v)) },
};

export const IntervalTypePreserve: Story = {
export const Equidistant: Story = {
args: { intervalType: "equidistantPreserveStart" },
};

export const LongDataInput: Story = {
args: { data: longBaseChartData },
};

export const LongDataInputAndEquidistant: Story = {
args: { data: longBaseChartData, intervalType: "equidistantPreserveStart" },
};

export const LongIndexName: Story = {
args: { data: longIndexBaseChartData },
};

export const LongIndexNameAndEquidistant: Story = {
args: { data: longIndexBaseChartData, intervalType: "equidistantPreserveStart" },
};

//Custom tooltips
const customTooltipColors: Color[] = ["cyan"];
const customTooltipIndex = "month";
Expand Down
26 changes: 26 additions & 0 deletions src/stories/chart-elements/ScatterChart.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,32 @@ export const RichDataExample: Story = {
},
};

export const Equidistant: Story = {
args: { intervalType: "equidistantPreserveStart" },
};

export const MultipleZeroValues: Story = {
args: {
data: [
{
month: "May 21",
Sales: 2390,
"Successful Payments": 0,
},
{
month: "Jun 21",
Sales: 2390,
"Successful Payments": 0,
},
{
month: "Jul 21",
Sales: 3490,
"Successful Payments": 0,
},
],
},
};

//Custom tooltips
const customTooltipColors: Color[] = ["red", "green", "blue", "yellow"];
const customTooltipIndex = "location";
Expand Down
Loading

0 comments on commit 7dd7a7d

Please sign in to comment.