@@ -12,7 +12,6 @@ import {
1212 YAxis ,
1313 Tooltip ,
1414 LabelList ,
15- ResponsiveContainer ,
1615} from 'recharts' ;
1716
1817import {
@@ -220,120 +219,119 @@ export function AreaGraph({
220219 >
221220 { ( width , height ) =>
222221 data . intervalData && (
223- < ResponsiveContainer >
224- < div >
225- { ! compact && < div style = { { marginTop : '15px' } } /> }
226- < AreaChart
227- width = { width }
228- height = { height }
229- data = { data . intervalData }
230- margin = { {
231- top : 0 ,
232- right : labelsMargin ,
233- left : leftMargin ,
234- bottom : 10 ,
235- } }
236- >
237- { compact ? null : (
238- < CartesianGrid strokeDasharray = "3 3" vertical = { false } />
239- ) }
240- { compact ? null : (
241- < XAxis
242- dataKey = "date"
243- tick = { { fill : theme . pageText } }
244- tickLine = { { stroke : theme . pageText } }
222+ < div >
223+ { ! compact && < div style = { { marginTop : '15px' } } /> }
224+ < AreaChart
225+ responsive
226+ width = { width }
227+ height = { height }
228+ data = { data . intervalData }
229+ margin = { {
230+ top : 0 ,
231+ right : labelsMargin ,
232+ left : leftMargin ,
233+ bottom : 10 ,
234+ } }
235+ >
236+ { compact ? null : (
237+ < CartesianGrid strokeDasharray = "3 3" vertical = { false } />
238+ ) }
239+ { compact ? null : (
240+ < XAxis
241+ dataKey = "date"
242+ tick = { { fill : theme . pageText } }
243+ tickLine = { { stroke : theme . pageText } }
244+ />
245+ ) }
246+ { compact ? null : (
247+ < YAxis
248+ dataKey = { balanceTypeOp }
249+ domain = { [
250+ viewLabels ? labelsMin : 'auto' ,
251+ viewLabels ? labelsMax : 'auto' ,
252+ ] }
253+ tickFormatter = { tickFormatter }
254+ tick = { { fill : theme . pageText } }
255+ tickLine = { { stroke : theme . pageText } }
256+ tickSize = { 0 }
257+ />
258+ ) }
259+ { showTooltip && (
260+ < Tooltip
261+ content = {
262+ < CustomTooltip
263+ balanceTypeOp = { balanceTypeOp }
264+ format = { format }
265+ />
266+ }
267+ isAnimationActive = { false }
268+ />
269+ ) }
270+ < defs >
271+ < linearGradient
272+ id = { `fill${ balanceTypeOp } ` }
273+ x1 = "0"
274+ y1 = "0"
275+ x2 = "0"
276+ y2 = "1"
277+ >
278+ < stop
279+ offset = { off }
280+ stopColor = { theme . reportsBlue }
281+ stopOpacity = { 0.2 }
245282 />
246- ) }
247- { compact ? null : (
248- < YAxis
249- dataKey = { balanceTypeOp }
250- domain = { [
251- viewLabels ? labelsMin : 'auto' ,
252- viewLabels ? labelsMax : 'auto' ,
253- ] }
254- tickFormatter = { tickFormatter }
255- tick = { { fill : theme . pageText } }
256- tickLine = { { stroke : theme . pageText } }
257- tickSize = { 0 }
283+ < stop
284+ offset = { off }
285+ stopColor = { theme . reportsRed }
286+ stopOpacity = { 0.2 }
258287 />
259- ) }
260- { showTooltip && (
261- < Tooltip
262- content = {
263- < CustomTooltip
264- balanceTypeOp = { balanceTypeOp }
265- format = { format }
266- />
288+ </ linearGradient >
289+ < linearGradient
290+ id = { `stroke${ balanceTypeOp } ` }
291+ x1 = "0"
292+ y1 = "0"
293+ x2 = "0"
294+ y2 = "1"
295+ >
296+ < stop
297+ offset = { off }
298+ stopColor = { theme . reportsBlue }
299+ stopOpacity = { 1 }
300+ />
301+ < stop
302+ offset = { off }
303+ stopColor = { theme . reportsRed }
304+ stopOpacity = { 1 }
305+ />
306+ </ linearGradient >
307+ </ defs >
308+
309+ < Area
310+ type = "linear"
311+ dot = { false }
312+ activeDot = { false }
313+ animationDuration = { 0 }
314+ dataKey = { balanceTypeOp }
315+ stroke = { `url(#stroke${ balanceTypeOp } )` }
316+ fill = { `url(#fill${ balanceTypeOp } )` }
317+ fillOpacity = { 1 }
318+ >
319+ { viewLabels && ! compact && (
320+ < LabelList
321+ dataKey = { balanceTypeOp }
322+ content = { props =>
323+ customLabel ( {
324+ props,
325+ width,
326+ end : lastLabel ,
327+ format,
328+ } )
267329 }
268- isAnimationActive = { false }
269330 />
270331 ) }
271- < defs >
272- < linearGradient
273- id = { `fill${ balanceTypeOp } ` }
274- x1 = "0"
275- y1 = "0"
276- x2 = "0"
277- y2 = "1"
278- >
279- < stop
280- offset = { off }
281- stopColor = { theme . reportsBlue }
282- stopOpacity = { 0.2 }
283- />
284- < stop
285- offset = { off }
286- stopColor = { theme . reportsRed }
287- stopOpacity = { 0.2 }
288- />
289- </ linearGradient >
290- < linearGradient
291- id = { `stroke${ balanceTypeOp } ` }
292- x1 = "0"
293- y1 = "0"
294- x2 = "0"
295- y2 = "1"
296- >
297- < stop
298- offset = { off }
299- stopColor = { theme . reportsBlue }
300- stopOpacity = { 1 }
301- />
302- < stop
303- offset = { off }
304- stopColor = { theme . reportsRed }
305- stopOpacity = { 1 }
306- />
307- </ linearGradient >
308- </ defs >
309-
310- < Area
311- type = "linear"
312- dot = { false }
313- activeDot = { false }
314- animationDuration = { 0 }
315- dataKey = { balanceTypeOp }
316- stroke = { `url(#stroke${ balanceTypeOp } )` }
317- fill = { `url(#fill${ balanceTypeOp } )` }
318- fillOpacity = { 1 }
319- >
320- { viewLabels && ! compact && (
321- < LabelList
322- dataKey = { balanceTypeOp }
323- content = { props =>
324- customLabel ( {
325- props,
326- width,
327- end : lastLabel ,
328- format,
329- } )
330- }
331- />
332- ) }
333- </ Area >
334- </ AreaChart >
335- </ div >
336- </ ResponsiveContainer >
332+ </ Area >
333+ </ AreaChart >
334+ </ div >
337335 )
338336 }
339337 </ Container >
0 commit comments