Skip to content

Commit 4eebb38

Browse files
sanjithcyphersanjithcypher
authored
Merge pull request #1 from CypherD-IO/chart-fix
Chart fix
2 parents 1a623fb + fe8f809 commit 4eebb38

File tree

1 file changed

+27
-50
lines changed

1 file changed

+27
-50
lines changed

‎src/charts/linear/ChartPath.js

Lines changed: 27 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,9 @@ export default function ChartPathProvider({
191191
proceededData,
192192
} = useContext(ChartContext) || generateValues();
193193

194+
const height = rest.height || layoutSize.value.height;
195+
const width = rest.width || layoutSize.value.width;
196+
194197
const prevData = useSharedValue(valuesStore.current.prevData, 'prevData');
195198
const currData = useSharedValue(valuesStore.current.currData, 'currData');
196199
const curroriginalData = useSharedValue(
@@ -287,16 +290,12 @@ export default function ChartPathProvider({
287290
}
288291
isStarted.value = true;
289292

290-
const eventX = positionXWithMargin(
291-
event.x,
292-
hitSlopValue.value,
293-
layoutSize.value.width
294-
);
293+
const eventX = positionXWithMargin(event.x, hitSlopValue.value, width);
295294

296295
let idx = 0;
297296
const ss = smoothingStrategy;
298297
for (let i = 0; i < currData.value.length; i++) {
299-
if (getValue(currData, i, ss).x > eventX / layoutSize.value.width) {
298+
if (getValue(currData, i, ss).x > eventX / width) {
300299
idx = i;
301300
break;
302301
}
@@ -308,38 +307,32 @@ export default function ChartPathProvider({
308307
if (
309308
ss.value === 'bezier' &&
310309
currData.value.length > 30 &&
311-
eventX / layoutSize.value.width >=
312-
currData.value[currData.value.length - 2].x
310+
eventX / width >= currData.value[currData.value.length - 2].x
313311
) {
314312
const prevLastY = currData.value[currData.value.length - 2].y;
315313
const prevLastX = currData.value[currData.value.length - 2].x;
316314
const lastY = currData.value[currData.value.length - 1].y;
317315
const lastX = currData.value[currData.value.length - 1].x;
318-
const progress =
319-
(eventX / layoutSize.value.width - prevLastX) / (lastX - prevLastX);
320-
positionY.value =
321-
(prevLastY + progress * (lastY - prevLastY)) *
322-
layoutSize.value.height;
316+
const progress = (eventX / width - prevLastX) / (lastX - prevLastX);
317+
positionY.value = (prevLastY + progress * (lastY - prevLastY)) * height;
323318
} else if (idx === 0) {
324-
positionY.value =
325-
getValue(currData, idx, ss).y * layoutSize.value.height;
319+
positionY.value = getValue(currData, idx, ss).y * height;
326320
} else {
327321
// prev + diff over X
328322
positionY.value =
329323
(getValue(currData, idx - 1, ss).y +
330324
(getValue(currData, idx, ss).y -
331325
getValue(currData, idx - 1, ss).y) *
332-
((eventX / layoutSize.value.width -
333-
getValue(currData, idx - 1, ss).x) /
326+
((eventX / width - getValue(currData, idx - 1, ss).x) /
334327
(getValue(currData, idx, ss).x -
335328
getValue(currData, idx - 1, ss).x))) *
336-
layoutSize.value.height;
329+
height;
337330
}
338331

339332
setoriginalXYAccordingToPosition(
340333
originalX,
341334
originalY,
342-
eventX / layoutSize.value.width,
335+
eventX / width,
343336
curroriginalData
344337
);
345338
positionX.value = eventX;
@@ -425,17 +418,13 @@ export default function ChartPathProvider({
425418
}
426419
isStarted.value = true;
427420

428-
const eventX = positionXWithMargin(
429-
event.x,
430-
hitSlopValue.value,
431-
layoutSize.value.width
432-
);
421+
const eventX = positionXWithMargin(event.x, hitSlopValue.value, width);
433422

434423
progress.value = 1;
435424
let idx = 0;
436425
const ss = smoothingStrategy;
437426
for (let i = 0; i < currData.value.length; i++) {
438-
if (getValue(currData, i, ss).x > eventX / layoutSize.value.width) {
427+
if (getValue(currData, i, ss).x > eventX / width) {
439428
idx = i;
440429
break;
441430
}
@@ -447,38 +436,32 @@ export default function ChartPathProvider({
447436
if (
448437
ss.value === 'bezier' &&
449438
currData.value.length > 30 &&
450-
eventX / layoutSize.value.width >=
451-
currData.value[currData.value.length - 2].x
439+
eventX / width >= currData.value[currData.value.length - 2].x
452440
) {
453441
const prevLastY = currData.value[currData.value.length - 2].y;
454442
const prevLastX = currData.value[currData.value.length - 2].x;
455443
const lastY = currData.value[currData.value.length - 1].y;
456444
const lastX = currData.value[currData.value.length - 1].x;
457-
const progress =
458-
(eventX / layoutSize.value.width - prevLastX) / (lastX - prevLastX);
459-
positionY.value =
460-
(prevLastY + progress * (lastY - prevLastY)) *
461-
layoutSize.value.height;
445+
const progress = (eventX / width - prevLastX) / (lastX - prevLastX);
446+
positionY.value = (prevLastY + progress * (lastY - prevLastY)) * height;
462447
} else if (idx === 0) {
463-
positionY.value =
464-
getValue(currData, idx, ss).y * layoutSize.value.height;
448+
positionY.value = getValue(currData, idx, ss).y * height;
465449
} else {
466450
// prev + diff over X
467451
positionY.value =
468452
(getValue(currData, idx - 1, ss).y +
469453
(getValue(currData, idx, ss).y -
470454
getValue(currData, idx - 1, ss).y) *
471-
((eventX / layoutSize.value.width -
472-
getValue(currData, idx - 1, ss).x) /
455+
((eventX / width - getValue(currData, idx - 1, ss).x) /
473456
(getValue(currData, idx, ss).x -
474457
getValue(currData, idx - 1, ss).x))) *
475-
layoutSize.value.height;
458+
height;
476459
}
477460

478461
setoriginalXYAccordingToPosition(
479462
originalX,
480463
originalY,
481-
eventX / layoutSize.value.width,
464+
eventX / width,
482465
curroriginalData
483466
);
484467
positionX.value = eventX;
@@ -506,7 +489,6 @@ export default function ChartPathProvider({
506489
data,
507490
dotStyle,
508491
extremes,
509-
layoutSize,
510492
onLongPressGestureEvent,
511493
originalX,
512494
originalY,
@@ -542,7 +524,6 @@ function ChartPath({
542524
currSmoothing,
543525
pathOpacity,
544526
progress,
545-
layoutSize,
546527
__disableRendering,
547528
children,
548529
...props
@@ -553,10 +534,6 @@ function ChartPath({
553534
const selectedStrokeWidthValue = useSharedValue(selectedStrokeWidth);
554535
const strokeWidthValue = useSharedValue(strokeWidth);
555536

556-
useEffect(() => {
557-
layoutSize.value = { height, width };
558-
}, [height, layoutSize, width]);
559-
560537
const path = useDerivedValue(() => {
561538
let fromValue = prevData.value;
562539
let toValue = currData.value;
@@ -605,16 +582,16 @@ function ChartPath({
605582

606583
res = fromValue.map(({ x, y }, i) => {
607584
const { x: nX, y: nY } = toValue[i];
608-
const mX = (x + (nX - x) * progress.value) * layoutSize.value.width;
609-
const mY = (y + (nY - y) * progress.value) * layoutSize.value.height;
585+
const mX = (x + (nX - x) * progress.value) * width;
586+
const mY = (y + (nY - y) * progress.value) * height;
610587
return { x: mX, y: mY };
611588
});
612589
} else {
613590
smoothing = currSmoothing.value;
614591
res = toValue.map(({ x, y }) => {
615592
return {
616-
x: x * layoutSize.value.width,
617-
y: y * layoutSize.value.height,
593+
x: x * width,
594+
y: y * height,
618595
};
619596
});
620597
}
@@ -632,7 +609,7 @@ function ChartPath({
632609
{ x: -res[4].x, y: res[0].y },
633610
].concat(res);
634611
}
635-
if (lastValue.x === layoutSize.value.width && strategy !== 'bezier') {
612+
if (lastValue.x === width && strategy !== 'bezier') {
636613
// extrapolate the last points
637614
res[res.length - 1].x = lastValue.x + 20;
638615
if (res.length > 2) {
@@ -656,7 +633,7 @@ function ChartPath({
656633
})
657634
.join(' ')
658635
.replace('L', 'M');
659-
});
636+
}, [currData.value, prevData.value, smoothingStrategy.value, width, height]);
660637

661638
const animatedProps = useAnimatedStyle(() => {
662639
const props = {

0 commit comments

Comments
 (0)