Skip to content

Commit a641abb

Browse files
alexbalonperinalexbalonperin
authored
Feat/allow toggling axisline (#2)
* allow toggling axisline for all chart types * fix styling + add tests
1 parent d77d755 commit a641abb

File tree

9 files changed

+100
-10
lines changed

9 files changed

+100
-10
lines changed

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
6565
showTooltip = true,
6666
showLegend = true,
6767
showGridLines = true,
68+
showAxisLine = false,
6869
showGradient = true,
6970
autoMinValue = false,
7071
curveType = "linear",
@@ -188,10 +189,16 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
188189
"fill-tremor-content",
189190
// dark
190191
"dark:fill-dark-tremor-content",
192+
// common
193+
"stroke-1",
194+
// light
195+
"stroke-tremor-border",
196+
// dark
197+
"dark:stroke-dark-tremor-border",
191198
)}
192199
interval={startEndOnly ? "preserveStartEnd" : intervalType}
193200
tickLine={false}
194-
axisLine={false}
201+
axisLine={showAxisLine}
195202
minTickGap={tickGap}
196203
angle={rotateLabelX?.angle}
197204
dy={rotateLabelX?.verticalShift}
@@ -210,7 +217,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
210217
<YAxis
211218
width={yAxisWidth}
212219
hide={!showYAxis}
213-
axisLine={false}
220+
axisLine={showAxisLine}
214221
tickLine={false}
215222
type="number"
216223
domain={yAxisDomain as AxisDomain}
@@ -224,6 +231,12 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
224231
"fill-tremor-content",
225232
// dark
226233
"dark:fill-dark-tremor-content",
234+
// common
235+
"stroke-1",
236+
// light
237+
"stroke-tremor-border",
238+
// dark
239+
"dark:stroke-dark-tremor-border",
227240
)}
228241
tickFormatter={valueFormatter}
229242
allowDecimals={allowDecimals}

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

Lines changed: 29 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
8484
showTooltip = true,
8585
showLegend = true,
8686
showGridLines = true,
87+
showAxisLine = false,
8788
autoMinValue = false,
8889
minValue,
8990
maxValue,
@@ -202,9 +203,15 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
202203
"fill-tremor-content",
203204
// dark
204205
"dark:fill-dark-tremor-content",
206+
// common
207+
"stroke-1",
208+
// light
209+
"stroke-tremor-border",
210+
// dark
211+
"dark:stroke-dark-tremor-border",
205212
)}
206213
tickLine={false}
207-
axisLine={false}
214+
axisLine={showAxisLine}
208215
angle={rotateLabelX?.angle}
209216
dy={rotateLabelX?.verticalShift}
210217
height={rotateLabelX?.xAxisHeight}
@@ -235,9 +242,15 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
235242
"fill-tremor-content",
236243
// dark
237244
"dark:fill-dark-tremor-content",
245+
// common
246+
"stroke-1",
247+
// light
248+
"stroke-tremor-border",
249+
// dark
250+
"dark:stroke-dark-tremor-border",
238251
)}
239252
tickLine={false}
240-
axisLine={false}
253+
axisLine={showAxisLine}
241254
tickFormatter={valueFormatter}
242255
minTickGap={tickGap}
243256
allowDecimals={allowDecimals}
@@ -260,7 +273,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
260273
<YAxis
261274
width={yAxisWidth}
262275
hide={!showYAxis}
263-
axisLine={false}
276+
axisLine={showAxisLine}
264277
tickLine={false}
265278
type="number"
266279
domain={yAxisDomain as AxisDomain}
@@ -274,6 +287,12 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
274287
"fill-tremor-content",
275288
// dark
276289
"dark:fill-dark-tremor-content",
290+
// common
291+
"stroke-1",
292+
// light
293+
"stroke-tremor-border",
294+
// dark
295+
"dark:stroke-dark-tremor-border",
277296
)}
278297
tickFormatter={
279298
relative ? (value: number) => `${(value * 100).toString()} %` : valueFormatter
@@ -297,7 +316,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
297316
width={yAxisWidth}
298317
hide={!showYAxis}
299318
dataKey={index}
300-
axisLine={false}
319+
axisLine={showAxisLine}
301320
tickLine={false}
302321
ticks={startEndOnly ? [data[0][index], data[data.length - 1][index]] : undefined}
303322
type="category"
@@ -312,6 +331,12 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
312331
"fill-tremor-content",
313332
// dark
314333
"dark:fill-dark-tremor-content",
334+
// common
335+
"stroke-1",
336+
// light
337+
"stroke-tremor-border",
338+
// dark
339+
"dark:stroke-dark-tremor-border",
315340
)}
316341
>
317342
{yAxisLabel && (

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

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
6161
showTooltip = true,
6262
showLegend = true,
6363
showGridLines = true,
64+
showAxisLine = false,
6465
autoMinValue = false,
6566
curveType = "linear",
6667
minValue,
@@ -185,9 +186,15 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
185186
"fill-tremor-content",
186187
// dark
187188
"dark:fill-dark-tremor-content",
189+
// common
190+
"stroke-1",
191+
// light
192+
"stroke-tremor-border",
193+
// dark
194+
"dark:stroke-dark-tremor-border",
188195
)}
189196
tickLine={false}
190-
axisLine={false}
197+
axisLine={showAxisLine}
191198
minTickGap={tickGap}
192199
angle={rotateLabelX?.angle}
193200
dy={rotateLabelX?.verticalShift}
@@ -206,7 +213,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
206213
<YAxis
207214
width={yAxisWidth}
208215
hide={!showYAxis}
209-
axisLine={false}
216+
axisLine={showAxisLine}
210217
tickLine={false}
211218
type="number"
212219
domain={yAxisDomain as AxisDomain}
@@ -220,6 +227,12 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
220227
"fill-tremor-content",
221228
// dark
222229
"dark:fill-dark-tremor-content",
230+
// common
231+
"stroke-1",
232+
// light
233+
"stroke-tremor-border",
234+
// dark
235+
"dark:stroke-dark-tremor-border",
223236
)}
224237
tickFormatter={valueFormatter}
225238
allowDecimals={allowDecimals}

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export interface ScatterChartProps
6464
showTooltip?: boolean;
6565
showLegend?: boolean;
6666
showGridLines?: boolean;
67+
showAxisLine?: boolean;
6768
autoMinXValue?: boolean;
6869
minXValue?: number;
6970
maxXValue?: number;
@@ -129,6 +130,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
129130
showTooltip = true,
130131
showLegend = true,
131132
showGridLines = true,
133+
showAxisLine = false,
132134
autoMinXValue = false,
133135
minXValue,
134136
maxXValue,
@@ -246,10 +248,16 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
246248
"fill-tremor-content",
247249
// dark
248250
"dark:fill-dark-tremor-content",
251+
// common
252+
"stroke-1",
253+
// light
254+
"stroke-tremor-border",
255+
// dark
256+
"dark:stroke-dark-tremor-border",
249257
)}
250258
tickLine={false}
251259
tickFormatter={valueFormatter.x}
252-
axisLine={false}
260+
axisLine={showAxisLine}
253261
minTickGap={tickGap}
254262
domain={xAxisDomain as AxisDomain}
255263
allowDataOverflow={true}
@@ -272,7 +280,7 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
272280
<YAxis
273281
width={yAxisWidth}
274282
hide={!showYAxis}
275-
axisLine={false}
283+
axisLine={showAxisLine}
276284
tickLine={false}
277285
dataKey={y}
278286
type="number"
@@ -289,6 +297,12 @@ const ScatterChart = React.forwardRef<HTMLDivElement, ScatterChartProps>((props,
289297
"fill-tremor-content",
290298
// dark
291299
"dark:fill-dark-tremor-content",
300+
// common
301+
"stroke-1",
302+
// light
303+
"stroke-tremor-border",
304+
// dark
305+
"dark:stroke-dark-tremor-border",
292306
)}
293307
allowDecimals={allowDecimals}
294308
allowDataOverflow={true}

‎src/components/chart-elements/common/BaseChartProps.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
2727
showTooltip?: boolean;
2828
showLegend?: boolean;
2929
showGridLines?: boolean;
30+
showAxisLine?: boolean;
3031
autoMinValue?: boolean;
3132
minValue?: number;
3233
maxValue?: number;

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,3 +364,9 @@ export const AxisLabels: Story = {
364364
yAxisLabel: "Amount (USD)",
365365
},
366366
};
367+
368+
export const ShowAxisLine: Story = {
369+
args: {
370+
showAxisLine: true,
371+
},
372+
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -387,3 +387,9 @@ export const AxisLabels: Story = {
387387
yAxisLabel: "Amount (USD)",
388388
},
389389
};
390+
391+
export const ShowAxisLine: Story = {
392+
args: {
393+
showAxisLine: true,
394+
},
395+
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -324,3 +324,9 @@ export const AxisLabels: Story = {
324324
yAxisLabel: "Amount (USD)",
325325
},
326326
};
327+
328+
export const ShowAxisLine: Story = {
329+
args: {
330+
showAxisLine: true,
331+
},
332+
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,9 @@ export const AxisLabels: Story = {
197197
yAxisLabel: "Amount (USD)",
198198
},
199199
};
200+
201+
export const ShowAxisLine: Story = {
202+
args: {
203+
showAxisLine: true,
204+
},
205+
};

0 commit comments

Comments
 (0)