Skip to content

Commit 5ecdc30

Browse files
mustafasaifee42mustafasaifee42
committed
Fix prop in motion
1 parent 126ee40 commit 5ecdc30

25 files changed

Lines changed: 311 additions & 154 deletions

File tree

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@undp/data-viz",
3-
"version": "1.5.7",
3+
"version": "1.5.8",
44
"main": "./dist/index.cjs",
55
"module": "./dist/index.js",
66
"browser": "./dist/index.umd.js",

‎src/Components/Elements/RegressionLine.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export function RegressionLine(props: Props) {
3838
className,
3939
)}
4040
style={{
41-
...(color && { stroke: color }),
4241
fill: 'none',
4342
...(style || {}),
4443
}}
@@ -49,12 +48,14 @@ export function RegressionLine(props: Props) {
4948
y2: y1,
5049
x1,
5150
x2: x1,
51+
...(color && { stroke: color }),
5252
},
5353
whileInView: {
5454
y1,
5555
y2,
5656
x1,
5757
x2,
58+
...(color && { stroke: color }),
5859
transition: { duration: animate.duration },
5960
},
6061
}}

‎src/Components/Graphs/BarGraph/Horizontal/GroupedBarGraph/Graph.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -276,18 +276,18 @@ export function Graph(props: Props) {
276276
<motion.text
277277
y={(subBarScale(`${j}`) as number) + subBarScale.bandwidth() / 2}
278278
style={{
279-
fill: valueColor || barColors[j],
280279
textAnchor: el ? (el < 0 ? 'end' : 'start') : 'start',
281280
...(styles?.graphObjectValues || {}),
282281
}}
283282
className={cn('graph-value text-sm', classNames?.graphObjectValues)}
284283
dx={el ? (el < 0 ? -5 : 5) : 5}
285284
dy='0.33em'
286285
variants={{
287-
initial: { x: x(0), opacity: 0 },
286+
initial: { x: x(0), opacity: 0, fill: valueColor || barColors[j] },
288287
whileInView: {
289288
x: x(el || 0),
290289
opacity: 1,
290+
fill: valueColor || barColors[j],
291291
transition: { duration: animate.duration },
292292
},
293293
}}

‎src/Components/Graphs/BarGraph/Horizontal/StackedBarGraph/Graph.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,10 +355,12 @@ export function Graph(props: Props) {
355355
initial: {
356356
x: x(0),
357357
opacity: 0,
358+
...(valueColor ? { fill: valueColor } : {}),
358359
},
359360
whileInView: {
360361
x: x(sum(d.size.map(el => el || 0))),
361362
opacity: 1,
363+
...(valueColor ? { fill: valueColor } : {}),
362364
transition: { duration: animate.duration },
363365
},
364366
}}

‎src/Components/Graphs/BarGraph/Vertical/GroupedBarGraph/Graph.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -300,17 +300,17 @@ export function Graph(props: Props) {
300300
<motion.text
301301
x={(subBarScale(`${j}`) as number) + subBarScale.bandwidth() / 2}
302302
style={{
303-
fill: valueColor || barColors[j],
304303
textAnchor: 'middle',
305304
...(styles?.graphObjectValues || {}),
306305
}}
307306
className={cn('graph-value text-sm', classNames?.graphObjectValues)}
308307
dy={el ? (el >= 0 ? '-5px' : '1em') : '-5px'}
309308
variants={{
310-
initial: { y: y(0), opacity: 0 },
309+
initial: { y: y(0), opacity: 0, fill: valueColor || barColors[j] },
311310
whileInView: {
312311
y: y(el || 0),
313312
opacity: 1,
313+
fill: valueColor || barColors[j],
314314
transition: { duration: animate.duration },
315315
},
316316
}}

‎src/Components/Graphs/BarGraph/Vertical/StackedBarGraph/Graph.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,6 @@ export function Graph(props: Props) {
290290
<motion.text
291291
x={x.bandwidth() / 2}
292292
style={{
293-
fill: getTextColorBasedOnBgColor(barColors[j]),
294293
textAnchor: 'middle',
295294
...(styles?.graphObjectValues || {}),
296295
}}
@@ -352,7 +351,6 @@ export function Graph(props: Props) {
352351
{showValues ? (
353352
<motion.text
354353
style={{
355-
...(valueColor && { fill: valueColor }),
356354
textAnchor: 'middle',
357355
...(styles?.graphObjectValues || {}),
358356
}}
@@ -369,10 +367,12 @@ export function Graph(props: Props) {
369367
initial: {
370368
y: y(0),
371369
opacity: 0,
370+
...(valueColor && { fill: valueColor }),
372371
},
373372
whileInView: {
374373
y: y(sum(d.size.map(el => el || 0))),
375374
opacity: 1,
375+
...(valueColor && { fill: valueColor }),
376376
transition: { duration: animate.duration },
377377
},
378378
}}

‎src/Components/Graphs/BulletChart/Horizontal/Graph.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,6 @@ export function Graph(props: Props) {
447447
<motion.text
448448
y={y.bandwidth() / 2}
449449
style={{
450-
...(valueColor ? { fill: valueColor } : { fill: barColor }),
451450
textAnchor: d.size ? (d.size < 0 ? 'end' : 'start') : 'start',
452451
...(styles?.graphObjectValues || {}),
453452
}}
@@ -465,10 +464,12 @@ export function Graph(props: Props) {
465464
initial: {
466465
x: x(0),
467466
opacity: 0,
467+
fill: valueColor || barColor,
468468
},
469469
whileInView: {
470470
x: d.size ? x(d.size) : x(0),
471471
opacity: 1,
472+
fill: valueColor || barColor,
472473
transition: { duration: animate.duration },
473474
},
474475
}}

‎src/Components/Graphs/BulletChart/Vertical/Graph.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,6 @@ export function Graph(props: Props) {
473473
<motion.text
474474
x={x.bandwidth() / 2}
475475
style={{
476-
...(valueColor ? { fill: valueColor } : { fill: barColor }),
477476
textAnchor: 'middle',
478477
...(styles?.graphObjectValues || {}),
479478
}}
@@ -490,10 +489,12 @@ export function Graph(props: Props) {
490489
initial: {
491490
y: y(0),
492491
opacity: 0,
492+
fill: valueColor || barColor,
493493
},
494494
whileInView: {
495495
y: y(d.size || 0),
496496
opacity: 1,
497+
fill: valueColor || barColor,
497498
transition: { duration: animate.duration },
498499
},
499500
}}

‎src/Components/Graphs/ButterflyChart/Graph.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,6 @@ export function Graph(props: Props) {
234234
<motion.text
235235
y={(y(`${i}`) as number) + y.bandwidth() / 2}
236236
style={{
237-
fill: barColors[0],
238237
textAnchor: d.rightBar ? (d.rightBar > 0 ? 'end' : 'start') : 'start',
239238
...(styles?.graphObjectValues || {}),
240239
}}
@@ -249,12 +248,14 @@ export function Graph(props: Props) {
249248
initial: {
250249
x: xLeftBar(0),
251250
opacity: 0,
251+
fill: barColors[0],
252252
},
253253
whileInView: {
254254
x: d.leftBar
255255
? xLeftBar(d.leftBar)
256256
: xLeftBar(minValueLeftBar < 0 ? 0 : minValueLeftBar),
257257
opacity: 1,
258+
fill: barColors[0],
258259
transition: { duration: animate.duration },
259260
},
260261
}}
@@ -386,7 +387,6 @@ export function Graph(props: Props) {
386387
<motion.text
387388
y={(y(`${i}`) as number) + y.bandwidth() / 2}
388389
style={{
389-
fill: barColors[1],
390390
textAnchor: d.rightBar ? (d.rightBar < 0 ? 'end' : 'start') : 'start',
391391
...(styles?.graphObjectValues || {}),
392392
}}
@@ -401,12 +401,14 @@ export function Graph(props: Props) {
401401
initial: {
402402
x: xRightBar(0),
403403
opacity: 0,
404+
fill: barColors[1],
404405
},
405406
whileInView: {
406407
x: d.rightBar
407408
? xRightBar(d.rightBar)
408409
: xRightBar(minValueRightBar < 0 ? 0 : minValueRightBar),
409410
opacity: 1,
411+
fill: barColors[1],
410412
transition: { duration: animate.duration },
411413
},
412414
}}

0 commit comments

Comments
 (0)