Skip to content

Commit 92b84bd

Browse files
mitrotasiossoilSpoondani-z
authored
feat: connectNulls & curveType (#420)
Co-authored-by: Hee <[email protected]> Co-authored-by: Daniel Zaremba <[email protected]>
1 parent 4fd01a8 commit 92b84bd

File tree

6 files changed

+112
-7
lines changed

6 files changed

+112
-7
lines changed

‎src/components/chart-elements/AreaChart/AreaChart.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,13 @@ import BaseChartProps from "../common/BaseChartProps";
1616
import ChartLegend from "../common/ChartLegend";
1717
import ChartTooltip from "../common/ChartTooltip";
1818

19-
import { BaseColors, defaultValueFormatter, hexColors, themeColorRange } from "lib";
19+
import { BaseColors, CurveType, defaultValueFormatter, hexColors, themeColorRange } from "lib";
2020
import { AxisDomain } from "recharts/types/util/types";
2121

2222
export interface AreaChartProps extends BaseChartProps {
2323
stack?: boolean;
24+
curveType?: CurveType;
25+
connectNulls?: boolean;
2426
}
2527

2628
const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
@@ -41,8 +43,10 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
4143
showGridLines = true,
4244
showGradient = true,
4345
autoMinValue = false,
46+
curveType = "linear",
4447
minValue,
4548
maxValue,
49+
connectNulls = false,
4650
className,
4751
...other
4852
} = props;
@@ -136,14 +140,15 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
136140
<Area
137141
key={category}
138142
name={category}
139-
type="linear"
143+
type={curveType}
140144
dataKey={category}
141145
stroke={hexColors[categoryColors.get(category) ?? BaseColors.Gray]}
142146
fill={`url(#${categoryColors.get(category)})`}
143147
strokeWidth={2}
144148
dot={false}
145149
isAnimationActive={showAnimation}
146150
stackId={stack ? "a" : undefined}
151+
connectNulls={connectNulls}
147152
/>
148153
))}
149154
</ReChartsAreaChart>

‎src/components/chart-elements/LineChart/LineChart.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,15 @@ import BaseChartProps from "../common/BaseChartProps";
1616
import ChartLegend from "components/chart-elements/common/ChartLegend";
1717
import ChartTooltip from "../common/ChartTooltip";
1818

19-
import { BaseColors, defaultValueFormatter, hexColors, themeColorRange } from "lib";
19+
import { BaseColors, CurveType, defaultValueFormatter, hexColors, themeColorRange } from "lib";
2020
import { AxisDomain } from "recharts/types/util/types";
2121

22-
const LineChart = React.forwardRef<HTMLDivElement, BaseChartProps>((props, ref) => {
22+
export interface LineChartProps extends BaseChartProps {
23+
curveType?: CurveType;
24+
connectNulls?: boolean;
25+
}
26+
27+
const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
2328
const {
2429
data = [],
2530
categories = [],
@@ -35,8 +40,10 @@ const LineChart = React.forwardRef<HTMLDivElement, BaseChartProps>((props, ref)
3540
showLegend = true,
3641
showGridLines = true,
3742
autoMinValue = false,
43+
curveType = "linear",
3844
minValue,
3945
maxValue,
46+
connectNulls = false,
4047
className,
4148
...other
4249
} = props;
@@ -110,12 +117,13 @@ const LineChart = React.forwardRef<HTMLDivElement, BaseChartProps>((props, ref)
110117
<Line
111118
key={category}
112119
name={category}
113-
type="linear"
120+
type={curveType}
114121
dataKey={category}
115122
stroke={hexColors[categoryColors.get(category) ?? BaseColors.Gray]}
116123
strokeWidth={2}
117124
dot={false}
118125
isAnimationActive={showAnimation}
126+
connectNulls={connectNulls}
119127
/>
120128
))}
121129
</ReChartsLineChart>

‎src/lib/inputTypes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ export type ValueFormatter = {
22
(value: number): string;
33
};
44

5+
export type CurveType = "linear" | "natural" | "step";
6+
57
const iconVariantValues = ["simple", "light", "shadow", "solid", "outlined"] as const;
68

79
export type IconVariant = (typeof iconVariantValues)[number];

‎src/stories/chart-elements/AreaChart.stories.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
import { ComponentMeta, ComponentStory } from "@storybook/react";
44

55
import { AreaChart, Card, Title } from "components";
6-
import { simpleBaseChartData as data } from "./helpers/testData";
6+
import { simpleBaseChartData as data, simpleBaseChartDataWithNulls } from "./helpers/testData";
77
import { valueFormatter } from "./helpers/utils";
88

99
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -147,3 +147,23 @@ WithNoDataKey.args = {
147147
data: data,
148148
categories: ["Sales", "Successful Payments"],
149149
};
150+
151+
export const WithCurveTypeNatural = DefaultTemplate.bind({});
152+
WithCurveTypeNatural.args = {
153+
data: data,
154+
curveType: "natural",
155+
categories: ["Sales", "Successful Payments"],
156+
};
157+
158+
export const WithConnectNullsTrue = DefaultTemplate.bind({});
159+
WithConnectNullsTrue.args = {
160+
data: simpleBaseChartDataWithNulls,
161+
connectNulls: true,
162+
categories: ["Sales", "Successful Payments"],
163+
};
164+
165+
export const WithConnectNullsFalse = DefaultTemplate.bind({});
166+
WithConnectNullsFalse.args = {
167+
data: simpleBaseChartDataWithNulls,
168+
categories: ["Sales", "Successful Payments"],
169+
};

‎src/stories/chart-elements/LineChart.stories.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from "react";
33
import { ComponentMeta, ComponentStory } from "@storybook/react";
44

55
import { Card, LineChart, Title } from "components";
6-
import { simpleBaseChartData as data } from "./helpers/testData";
6+
import { simpleBaseChartData as data, simpleBaseChartDataWithNulls } from "./helpers/testData";
77
import { valueFormatter } from "stories/chart-elements/helpers/utils";
88

99
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
@@ -136,3 +136,23 @@ WithNoDataKey.args = {
136136
data: data,
137137
categories: ["Sales", "Successful Payments"],
138138
};
139+
140+
export const WithCurveTypeNatural = DefaultTemplate.bind({});
141+
WithCurveTypeNatural.args = {
142+
data: data,
143+
categories: ["Sales", "Successful Payments"],
144+
curveType: "natural",
145+
};
146+
147+
export const WithConnectNullsTrue = DefaultTemplate.bind({});
148+
WithConnectNullsTrue.args = {
149+
data: simpleBaseChartDataWithNulls,
150+
connectNulls: true,
151+
categories: ["Sales", "Successful Payments"],
152+
};
153+
154+
export const WithConnectNullsFalse = DefaultTemplate.bind({});
155+
WithConnectNullsFalse.args = {
156+
data: simpleBaseChartDataWithNulls,
157+
categories: ["Sales", "Successful Payments"],
158+
};

‎src/stories/chart-elements/helpers/testData.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,56 @@ export const simpleBaseChartData = [
5050
},
5151
];
5252

53+
export const simpleBaseChartDataWithNulls = [
54+
{
55+
month: "Jan 21'",
56+
Sales: 4000,
57+
"Successful Payments": 3000,
58+
"This is an edge case": 100000000,
59+
Test: 5000,
60+
},
61+
{
62+
month: "Feb 21'",
63+
Sales: 3000,
64+
"Successful Payments": 2000,
65+
"This is an edge case": 100000000,
66+
Test: 5000,
67+
},
68+
{
69+
month: "Mar 21'",
70+
Sales: 2000,
71+
"Successful Payments": 1700,
72+
"This is an edge case": 100000000,
73+
Test: 5000,
74+
},
75+
{
76+
month: "Apr 21'",
77+
"Successful Payments": 2500,
78+
"This is an edge case": 100000000,
79+
Test: 5000,
80+
},
81+
{
82+
month: "May 21",
83+
"Successful Payments": 1000,
84+
"This is an edge case": 100000000,
85+
Test: 5000,
86+
},
87+
{
88+
month: "Jun 21'",
89+
Sales: 2390,
90+
"Successful Payments": 2000,
91+
"This is an edge case": 100000000,
92+
Test: 5000,
93+
},
94+
{
95+
month: "Jul 21'",
96+
Sales: 3490,
97+
"Successful Payments": 3000,
98+
"This is an edge case": 100000000,
99+
Test: 5000,
100+
},
101+
];
102+
53103
export const simpleSingleCategoryData = [
54104
{
55105
city: "San Francisco",

0 commit comments

Comments
 (0)