Gesture handler not working with ui-chart on ios

[nc1401]

Summary
I am using @nativescript-cummunity/ui-chart to display a line chart in my application, it seems to work out in android seamlessly, for IOS though, I have to refresh my screen twice for my chart to be visible and once it appears I am not able to tap or drag on the chart.

This is the error I keep seeing :
NS error log:{"type":"JavaScript","message":"this.manager.registerGestureHandler is not a function","stack":"TypeError: this.manager.registerGestureHandler is not a function\n at Manager.attachGestureHandler (file:///app/vendor.js:6169:22)\n at TapHandler.attachToView (file:///app/vendor.js:5971:28)\n at BarLineChartTouchListener.setTap (file:///app/vendor.js:17827:49)\n at LineChart.setHighlightPerTapEnabled (file:///app/vendor.js:11637:48)\n at ChartsComponent.createLineChart (file:///app/bundle.js:2209:22)\n at ChartsComponent.onLineChartLoaded (file:///app/bundle.js:2148:14)\n at ChartsComponent__chart_LineChart_3_Template__chart_LineChart_loaded_0_listener (file:///app/bundle.js:1993:386)\n at executeListenerWithErrorHandling (file:///app/vendor.js:139587:12)\n at Object.wrapListenerIn_markDirtyAndPreventDefault (file:///app/vendor.js:139618:18)\n at _ZoneDelegate.invokeTask (file:///app/vendor.js:103604:31)"}

P.S
this is only an issue with GestureHandler version > 2.0.12, I have 2 repos, it seems to work where my GestureHandler version is 2.0.12, it does not work for the second repo where version is 2.0.24/2.0.28. This version is controlled by ui-chart automatically.

Also, if I remove the below lines which are essentially calling for gesture handler, the issue goes away but then I don't have the functionality for tap or drag:
this.lineRef.setHighlightPerTapEnabled(true);
this.lineRef.setHighlightPerDragEnabled(true);

Expected Behaviour:

Chart should be visible at all times and gestures should be enabled.

Device (please complete the following information):

Device: Iphone 15 pro, pro max, iphone 13
Ios version : 17.0.2, 15.0.0
Library Version :

ui-chart : 1.2.28/1.2.32/1.2.35
gestureHandler: 2.0.24/2.0.28

[nc1401]

@farfromrefug Let me know if you need further information

[farfromrefug]

@nc1401 i cant fix it just like that. Please share a very simple repro example (not angular please).

[hg071]

@farfromrefug here is the sample for this issue.

`public onLineChartLoaded({ object: lineChart }: { object: LineChart }): void {
data = [
{ label: '', value: ‘4.6', index: 0 },
{ label: '', value: ‘8.14', index: 1 },
{ label: '', value: ’12.18', index: 2 },
{ label: '', value: '2.1', index: 3 },
{ label: '', value: ‘4.1', index: 4 }
];

this.lineRef = lineChart;
this.lineRef.setClipValuesToContent(false);
this.lineRef.setTouchEnabled(true);
this.lineRef.setHighlightPerTapEnabled(true);
this.lineRef.setHighlightPerDragEnabled(true);
this.lineRef.setDrawHighlight(true);


this.lineRef.getDescription().setEnabled(false);
this.styleLineChartAxes(this.lineRef);
const chartDataSets: LineDataSet[] = [];
const chartDataSet: LineDataSet = new LineDataSet(this.data, ‘Line Chart', ‘index' , 'value');
chartDataSet.setDrawValues(false);
chartDataSet.setDrawFilled(true);
chartDataSet.setFillColor(this.lineChartFillColor);
chartDataSet.setColor(this.lineChartLineColor);
chartDataSet.setLineWidth(2);
chartDataSets.push(chartDataSet);


const lineData = new LineData(chartDataSets);
this.lineRef.setData(lineData);
this.lineRef.setGridBackgroundColor('white');
this.lineRef.invalidate();	

this.customInfoRenderer = new CustomInfoRenderer();
this.lineRef.setCustomRenderer(this.customInfoRenderer);

}

// used for Line chart styles
private styleLineChartAxes(lineRef: LineChart): void {
const axisTextColor = new Color(ColorLib.getColorForIndex(13));
const xAxis: XAxis = this.lineRef.getXAxis();
xAxis.setEnabled(true);
xAxis.setDrawLabels(true);
xAxis.setPosition(XAxisPosition.BOTTOM);
xAxis.setLabelCount(this.data.length);
xAxis.setLabelTextAlign(Align.CENTER);
xAxis.setFont(this.baseTypeFace);
xAxis.setTextColor(axisTextColor);
xAxis.setValueFormatter(new XAxisFormatter(this.getLabels(this.propertyXName)));
xAxis.setForcedInterval(this.lineChartXAxisInterval);
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);

const yAxis: YAxis = lineRef.axisLeft;
yAxis.setTextColor(axisTextColor);
yAxis.setFont(this.baseTypeFace);
yAxis.setTextColor(axisTextColor);
yAxis.setValueFormatter(new YAxisFormatter());

const chartRange = this.dataValueMax - this.dataValueMin;
//If the range is very small, then the tick calculations are thrown off and return NaN.
// So, make sure there is at least a 20% difference between the high and low numbers
const chartMinValue = chartRange > 10 ? this.dataValueMin : this.dataValueMin - this.dataValueMin * 0.1;
const chartMaxValue = chartRange > 10 ? this.dataValueMax : this.dataValueMax + this.dataValueMax * 0.1;

const yAxisInfo = this.calculateTicks(4, chartMinValue, chartMaxValue);
yAxis.setAxisMinimum(yAxisInfo.niceMin);
//We add an extra level of tick at the top, so that the top of tooltip at topmost point still shows inside the chart
yAxis.setAxisMaximum(yAxisInfo.niceMax + yAxisInfo.tickSpacing);
yAxis.setForcedInterval(yAxisInfo.tickSpacing);

yAxis.setDrawGridLines(true);
yAxis.setDrawZeroLine(false);
yAxis.setDrawAxisLine(false);
yAxis.setGridColor(new Color(ColorLib.getColorForIndex(15)));

}`

[vallemar]

@hg071 Please share a complete project so I can download and run it and see the error. a project zip file or a repository would be fine

[hg071]

@farfromrefug @vallemar Here is the folder structure and project zip file.

Folder structure :

chart-issue-sample-repo.zip

[farfromrefug]

@hg071 i cant run your project. Yarn is not even able to install correctly with Nx. Could you create a simple project without nx?
Also i see it is angular, i cant promise anything with angular.

[hg071]

@farfromrefug Please consider it as pseudocode and check the function implementation for charts.

[farfromrefug]

@hg071 i am sorry but i dont do angular so wont be straightforward. Plus i dont really have the time to do it. I have my job + maintaining more than 50 plugins takes a lot of time. Sorry but without your help i wont be able to look at this anytime soon.
This is why i always ask people to create very simple repro example without any specific layout outside of N default template. And i also almost always ask for NO angular.
Sorry