├── .eslintrc.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── Bug_report.md │ ├── Feature_request.md │ └── Support_help.md ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── release.yml ├── .gitignore ├── .gitmodules ├── .npmrc ├── .prettierignore ├── .prettierrc.js ├── .vscode └── settings.json ├── .yarnrc.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── config.json ├── demo-snippets ├── assets │ ├── fonts │ │ ├── OpenSans-Bold.ttf │ │ ├── OpenSans-BoldItalic.ttf │ │ ├── OpenSans-ExtraBold.ttf │ │ ├── OpenSans-ExtraBoldItalic.ttf │ │ ├── OpenSans-Italic.ttf │ │ ├── OpenSans-Light.ttf │ │ ├── OpenSans-LightItalic.ttf │ │ ├── OpenSans-Regular.ttf │ │ ├── OpenSans-Semibold.ttf │ │ ├── OpenSans-SemiboldItalic.ttf │ │ ├── fa-brands-400.ttf │ │ ├── fa-regular-400.ttf │ │ └── fa-solid-900.ttf │ ├── star.png │ └── star.svg ├── package.json └── vue │ ├── Basic.vue │ ├── BubbleChart.vue │ ├── CandleStickChart.vue │ ├── CombinedChart.vue │ ├── NSChart.vue │ ├── PieChart.vue │ ├── Realtime.vue │ ├── ScatterPlot.vue │ └── install.ts ├── docs ├── .nojekyll ├── assets │ ├── hierarchy.js │ ├── highlight.css │ ├── icons.js │ ├── icons.svg │ ├── main.js │ ├── navigation.js │ ├── search.js │ └── style.css ├── classes │ ├── animation_ChartAnimator.ChartAnimator.html │ ├── animation_Tween.Tween.html │ ├── buffer_AbstractBuffer.AbstractBuffer.html │ ├── buffer_BarBuffer.BarBuffer.html │ ├── buffer_HorizontalBarBuffer.HorizontalBarBuffer.html │ ├── charts_BarChart.BarChart.html │ ├── charts_BarLineChartBase.BarLineChartBase.html │ ├── charts_BubbleChart.BubbleChart.html │ ├── charts_CandleStickChart.CandleStickChart.html │ ├── charts_Chart.Chart.html │ ├── charts_CombinedChart.CombinedChart.html │ ├── charts_HorizontalBarChart.HorizontalBarChart.html │ ├── charts_LineChart.LineChart.html │ ├── charts_PieChart.PieChart.html │ ├── charts_PieRadarChartBase.PieRadarChartBase.html │ ├── charts_RadarChart.RadarChart.html │ ├── charts_ScatterChart.ScatterChart.html │ ├── components_AxisBase.AxisBase.html │ ├── components_ComponentBase.ComponentBase.html │ ├── components_Description.Description.html │ ├── components_Legend.Legend.html │ ├── components_LegendEntry.LegendEntry.html │ ├── components_LimitLine.LimitLine.html │ ├── components_XAxis.XAxis.html │ ├── components_YAxis.YAxis.html │ ├── data_BarData.BarData.html │ ├── data_BarDataSet.BarDataSet.html │ ├── data_BarLineScatterCandleBubbleData.BarLineScatterCandleBubbleData.html │ ├── data_BarLineScatterCandleBubbleDataSet.BarLineScatterCandleBubbleDataSet.html │ ├── data_BaseDataSet.BaseDataSet.html │ ├── data_BubbleData.BubbleData.html │ ├── data_BubbleDataSet.BubbleDataSet.html │ ├── data_CandleData.CandleData.html │ ├── data_CandleDataSet.CandleDataSet.html │ ├── data_ChartData.ChartData.html │ ├── data_CombinedData.CombinedData.html │ ├── data_DataSet.DataSet.html │ ├── data_LineData.LineData.html │ ├── data_LineDataSet.LineDataSet.html │ ├── data_LineRadarDataSet.LineRadarDataSet.html │ ├── data_LineScatterCandleRadarDataSet.LineScatterCandleRadarDataSet.html │ ├── data_PieData.PieData.html │ ├── data_PieDataSet.PieDataSet.html │ ├── data_RadarData.RadarData.html │ ├── data_RadarDataSet.RadarDataSet.html │ ├── data_ScatterData.ScatterData.html │ ├── data_ScatterDataSet.ScatterDataSet.html │ ├── formatter_DefaultAxisValueFormatter.DefaultAxisValueFormatter.html │ ├── formatter_DefaultFillFormatter.DefaultFillFormatter.html │ ├── formatter_DefaultValueFormatter.DefaultValueFormatter.html │ ├── formatter_ValueFormatter.ValueFormatter.html │ ├── highlight_BarHighlighter.BarHighlighter.html │ ├── highlight_ChartHighlighter.ChartHighlighter.html │ ├── highlight_CombinedHighlighter.CombinedHighlighter.html │ ├── highlight_Highlight.Highlight.html │ ├── highlight_HorizontalBarHighlighter.HorizontalBarHighlighter.html │ ├── highlight_PieHighlighter.PieHighlighter.html │ ├── highlight_PieRadarHighlighter.PieRadarHighlighter.html │ ├── highlight_RadarHighlighter.RadarHighlighter.html │ ├── jobs_AnimatedMoveViewJob.AnimatedMoveViewJob.html │ ├── jobs_AnimatedViewPortJob.AnimatedViewPortJob.html │ ├── jobs_AnimatedZoomJob.AnimatedZoomJob.html │ ├── jobs_MoveViewJob.MoveViewJob.html │ ├── jobs_ViewPortJob.ViewPortJob.html │ ├── jobs_ZoomJob.ZoomJob.html │ ├── listener_BarLineChartTouchListener.BarLineChartTouchListener.html │ ├── listener_ChartTouchListener.ChartTouchListener.html │ ├── listener_PieRadarChartTouchListener.PieRadarChartTouchListener.html │ ├── model_GradientColor.GradientColor.html │ ├── renderer_AxisRenderer.AxisRenderer.html │ ├── renderer_BarChartRenderer.BarChartRenderer.html │ ├── renderer_BarLineScatterCandleBubbleRenderer.BarLineScatterCandleBubbleRenderer.html │ ├── renderer_BarLineScatterCandleBubbleRenderer.XBounds.html │ ├── renderer_BubbleChartRenderer.BubbleChartRenderer.html │ ├── renderer_CandleStickChartRenderer.CandleStickChartRenderer.html │ ├── renderer_CombinedChartRenderer.CombinedChartRenderer.html │ ├── renderer_DataRenderer.DataRenderer.html │ ├── renderer_HorizontalBarChartRenderer.HorizontalBarChartRenderer.html │ ├── renderer_LegendRenderer.LegendRenderer.html │ ├── renderer_LineChartRenderer.DataSetImageCache.html │ ├── renderer_LineChartRenderer.LineChartRenderer.html │ ├── renderer_LineRadarRenderer.LineRadarRenderer.html │ ├── renderer_LineScatterCandleRadarRenderer.LineScatterCandleRadarRenderer.html │ ├── renderer_PieChartRenderer.PieChartRenderer.html │ ├── renderer_RadarChartRenderer.RadarChartRenderer.html │ ├── renderer_Renderer.Renderer.html │ ├── renderer_ScatterChartRenderer.ScatterChartRenderer.html │ ├── renderer_XAxisRenderer.XAxisRenderer.html │ ├── renderer_XAxisRendererHorizontalBarChart.XAxisRendererHorizontalBarChart.html │ ├── renderer_XAxisRendererRadarChart.XAxisRendererRadarChart.html │ ├── renderer_YAxisRenderer.YAxisRenderer.html │ ├── renderer_YAxisRendererHorizontalBarChart.YAxisRendererHorizontalBarChart.html │ ├── renderer_YAxisRendererRadarChart.YAxisRendererRadarChart.html │ ├── renderer_scatter_ChevronDownShapeRenderer.ChevronDownShapeRenderer.html │ ├── renderer_scatter_ChevronUpShapeRenderer.ChevronUpShapeRenderer.html │ ├── renderer_scatter_CircleShapeRenderer.CircleShapeRenderer.html │ ├── renderer_scatter_CrossShapeRenderer.CrossShapeRenderer.html │ ├── renderer_scatter_SquareShapeRenderer.SquareShapeRenderer.html │ ├── renderer_scatter_TriangleShapeRenderer.TriangleShapeRenderer.html │ ├── renderer_scatter_XShapeRenderer.XShapeRenderer.html │ ├── utils_ColorTemplate.ColorTemplate.html │ ├── utils_HorizontalViewPortHandler.HorizontalViewPortHandler.html │ ├── utils_ObjectPool.ObjectPool.html │ ├── utils_ObjectPool.Poolable.html │ ├── utils_Transformer.Transformer.html │ ├── utils_TransformerHorizontalBarChart.TransformerHorizontalBarChart.html │ └── utils_ViewPortHandler.ViewPortHandler.html ├── enums │ ├── charts_CombinedChart.DrawOrder.html │ ├── charts_ScatterChart.ScatterShape.html │ ├── components_Legend.LegendDirection.html │ ├── components_Legend.LegendForm.html │ ├── components_Legend.LegendHorizontalAlignment.html │ ├── components_Legend.LegendOrientation.html │ ├── components_Legend.LegendVerticalAlignment.html │ ├── components_LimitLine.LimitLabelPosition.html │ ├── components_XAxis.XAxisPosition.html │ ├── components_YAxis.AxisDependency.html │ ├── components_YAxis.YAxisLabelPosition.html │ ├── data_DataSet.Rounding.html │ ├── data_LineDataSet.Mode.html │ ├── data_PieDataSet.ValuePosition.html │ ├── listener_ChartTouchListener.ChartGesture.html │ └── utils_Utils.CLogTypes.html ├── functions │ ├── index.install.html │ ├── renderer_LineChartRenderer.splineCurve.html │ ├── utils_Utils.CLog.html │ ├── utils_Utils.Utils.arrayToNativeArray.html │ ├── utils_Utils.Utils.calcPosNegSum.html │ ├── utils_Utils.Utils.calcSum.html │ ├── utils_Utils.Utils.calcSumToIndex.html │ ├── utils_Utils.Utils.calcTextHeight.html │ ├── utils_Utils.Utils.calcTextSize.html │ ├── utils_Utils.Utils.calcTextWidth.html │ ├── utils_Utils.Utils.clipPathSupported.html │ ├── utils_Utils.Utils.convertDpToPixel.html │ ├── utils_Utils.Utils.convertPixelsToDp.html │ ├── utils_Utils.Utils.createArrayBuffer.html │ ├── utils_Utils.Utils.createArrayBufferOrNativeArray.html │ ├── utils_Utils.Utils.createNativeArray.html │ ├── utils_Utils.Utils.drawMultilineText.html │ ├── utils_Utils.Utils.drawMultilineTextConstrained.html │ ├── utils_Utils.Utils.drawXAxisValue.html │ ├── utils_Utils.Utils.formatNumber.html │ ├── utils_Utils.Utils.generateDefaultValueFormatter.html │ ├── utils_Utils.Utils.getArrayItem.html │ ├── utils_Utils.Utils.getDecimals.html │ ├── utils_Utils.Utils.getDefaultValueFormatter.html │ ├── utils_Utils.Utils.getLineHeight.html │ ├── utils_Utils.Utils.getLineHeightFromMetrics.html │ ├── utils_Utils.Utils.getLineSpacing.html │ ├── utils_Utils.Utils.getLineSpacingFromMetrics.html │ ├── utils_Utils.Utils.getNormalizedAngle.html │ ├── utils_Utils.Utils.getPosition.html │ ├── utils_Utils.Utils.getSizeOfRotatedRectangleByDegrees.html │ ├── utils_Utils.Utils.getSizeOfRotatedRectangleByRadians.html │ ├── utils_Utils.Utils.getTempArray.html │ ├── utils_Utils.Utils.getTempMatrix.html │ ├── utils_Utils.Utils.getTempPaint.html │ ├── utils_Utils.Utils.getTempPath.html │ ├── utils_Utils.Utils.getTempRect.html │ ├── utils_Utils.Utils.getTempRectF.html │ ├── utils_Utils.Utils.getTemplatePaint.html │ ├── utils_Utils.Utils.init.html │ ├── utils_Utils.Utils.nativeArrayToArray.html │ ├── utils_Utils.Utils.nextUp.html │ ├── utils_Utils.Utils.pointsFromBuffer.html │ ├── utils_Utils.Utils.roundToNextSignificant.html │ ├── utils_Utils.Utils.supportsDirectArrayBuffers.html │ └── utils_Utils.Utils.toRadians.html ├── hierarchy.html ├── index.html ├── interfaces │ ├── charts_BarChart.CustomRenderer.html │ ├── charts_BubbleChart.CustomRenderer.html │ ├── charts_CandleStickChart.CustomRenderer.html │ ├── charts_Chart.HighlightEventData.html │ ├── charts_LineChart.CustomRenderer.html │ ├── charts_PieChart.CustomRenderer.html │ ├── charts_RadarChart.CustomRenderer.html │ ├── charts_ScatterChart.CustomRenderer.html │ ├── components_IMarker.IMarker.html │ ├── data_BarEntry.BarEntry.html │ ├── data_BaseEntry.BaseEntry.html │ ├── data_BubbleEntry.BubbleEntry.html │ ├── data_CandleEntry.CandleEntry.html │ ├── data_Entry.Entry.html │ ├── data_PieEntry.PieEntry.html │ ├── data_RadarEntry.RadarEntry.html │ ├── formatter_IAxisValueFormatter.IAxisValueFormatter.html │ ├── formatter_IFillFormatter.IFillFormatter.html │ ├── formatter_IValueFormatter.IValueFormatter.html │ ├── highlight_IHighlighter.IHighlighter.html │ ├── interfaces_dataprovider_BarDataProvider.BarDataProvider.html │ ├── interfaces_dataprovider_BarLineScatterCandleBubbleDataProvider.BarLineScatterCandleBubbleDataProvider.html │ ├── interfaces_dataprovider_BubbleDataProvider.BubbleDataProvider.html │ ├── interfaces_dataprovider_CandleDataProvider.CandleDataProvider.html │ ├── interfaces_dataprovider_ChartInterface.ChartInterface.html │ ├── interfaces_dataprovider_CombinedDataProvider.CombinedDataProvider.html │ ├── interfaces_dataprovider_LineDataProvider.LineDataProvider.html │ ├── interfaces_dataprovider_ScatterDataProvider.ScatterDataProvider.html │ ├── interfaces_datasets_IBarDataSet.IBarDataSet.html │ ├── interfaces_datasets_IBarLineScatterCandleBubbleDataSet.IBarLineScatterCandleBubbleDataSet.html │ ├── interfaces_datasets_IBubbleDataSet.IBubbleDataSet.html │ ├── interfaces_datasets_ICandleDataSet.ICandleDataSet.html │ ├── interfaces_datasets_IDataSet.IDataSet.html │ ├── interfaces_datasets_ILineDataSet.ILineDataSet.html │ ├── interfaces_datasets_ILineRadarDataSet.ILineRadarDataSet.html │ ├── interfaces_datasets_ILineScatterCandleRadarDataSet.ILineScatterCandleRadarDataSet.html │ ├── interfaces_datasets_IPieDataSet.IPieDataSet.html │ ├── interfaces_datasets_IRadarDataSet.IRadarDataSet.html │ ├── interfaces_datasets_IScatterDataSet.IScatterDataSet.html │ ├── jobs_AnimatedViewPortJob.AnimatorListener.html │ ├── jobs_AnimatedViewPortJob.AnimatorUpdateListener.html │ ├── renderer_AxisRenderer.CustomRenderer.html │ ├── renderer_DataRenderer.BaseCustomRenderer.html │ ├── renderer_scatter_IShapeRenderer.IShapeRenderer.html │ ├── utils_MPPointD.MPPointD.html │ ├── utils_MPPointF.MPPointF.html │ └── utils_MPSize.MPSize.html ├── modules.html ├── modules │ ├── animation_ChartAnimator.html │ ├── animation_Tween.html │ ├── buffer_AbstractBuffer.html │ ├── buffer_BarBuffer.html │ ├── buffer_HorizontalBarBuffer.html │ ├── charts.html │ ├── charts_BarChart.html │ ├── charts_BarLineChartBase.html │ ├── charts_BubbleChart.html │ ├── charts_CandleStickChart.html │ ├── charts_Chart.html │ ├── charts_CombinedChart.html │ ├── charts_HorizontalBarChart.html │ ├── charts_LineChart.html │ ├── charts_PieChart.html │ ├── charts_PieRadarChartBase.html │ ├── charts_RadarChart.html │ ├── charts_ScatterChart.html │ ├── components_AxisBase.html │ ├── components_ComponentBase.html │ ├── components_Description.html │ ├── components_IMarker.html │ ├── components_Legend.html │ ├── components_LegendEntry.html │ ├── components_LimitLine.html │ ├── components_MarkerImage.html │ ├── components_XAxis.html │ ├── components_YAxis.html │ ├── data_BarData.html │ ├── data_BarDataSet.html │ ├── data_BarEntry.html │ ├── data_BarLineScatterCandleBubbleData.html │ ├── data_BarLineScatterCandleBubbleDataSet.html │ ├── data_BaseDataSet.html │ ├── data_BaseEntry.html │ ├── data_BubbleData.html │ ├── data_BubbleDataSet.html │ ├── data_BubbleEntry.html │ ├── data_CandleData.html │ ├── data_CandleDataSet.html │ ├── data_CandleEntry.html │ ├── data_ChartData.html │ ├── data_CombinedData.html │ ├── data_DataSet.html │ ├── data_Entry.html │ ├── data_LineData.html │ ├── data_LineDataSet.html │ ├── data_LineRadarDataSet.html │ ├── data_LineScatterCandleRadarDataSet.html │ ├── data_PieData.html │ ├── data_PieDataSet.html │ ├── data_PieEntry.html │ ├── data_RadarData.html │ ├── data_RadarDataSet.html │ ├── data_RadarEntry.html │ ├── data_ScatterData.html │ ├── data_ScatterDataSet.html │ ├── formatter_DefaultAxisValueFormatter.html │ ├── formatter_DefaultFillFormatter.html │ ├── formatter_DefaultValueFormatter.html │ ├── formatter_IAxisValueFormatter.html │ ├── formatter_IFillFormatter.html │ ├── formatter_IValueFormatter.html │ ├── formatter_ValueFormatter.html │ ├── highlight_BarHighlighter.html │ ├── highlight_ChartHighlighter.html │ ├── highlight_CombinedHighlighter.html │ ├── highlight_Highlight.html │ ├── highlight_HorizontalBarHighlighter.html │ ├── highlight_IHighlighter.html │ ├── highlight_PieHighlighter.html │ ├── highlight_PieRadarHighlighter.html │ ├── highlight_RadarHighlighter.html │ ├── index.html │ ├── interfaces_dataprovider_BarDataProvider.html │ ├── interfaces_dataprovider_BarLineScatterCandleBubbleDataProvider.html │ ├── interfaces_dataprovider_BubbleDataProvider.html │ ├── interfaces_dataprovider_CandleDataProvider.html │ ├── interfaces_dataprovider_ChartInterface.html │ ├── interfaces_dataprovider_CombinedDataProvider.html │ ├── interfaces_dataprovider_LineDataProvider.html │ ├── interfaces_dataprovider_ScatterDataProvider.html │ ├── interfaces_datasets_IBarDataSet.html │ ├── interfaces_datasets_IBarLineScatterCandleBubbleDataSet.html │ ├── interfaces_datasets_IBubbleDataSet.html │ ├── interfaces_datasets_ICandleDataSet.html │ ├── interfaces_datasets_IDataSet.html │ ├── interfaces_datasets_ILineDataSet.html │ ├── interfaces_datasets_ILineRadarDataSet.html │ ├── interfaces_datasets_ILineScatterCandleRadarDataSet.html │ ├── interfaces_datasets_IPieDataSet.html │ ├── interfaces_datasets_IRadarDataSet.html │ ├── interfaces_datasets_IScatterDataSet.html │ ├── jobs_AnimatedMoveViewJob.html │ ├── jobs_AnimatedViewPortJob.html │ ├── jobs_AnimatedZoomJob.html │ ├── jobs_MoveViewJob.html │ ├── jobs_ViewPortJob.html │ ├── jobs_ZoomJob.html │ ├── listener_BarLineChartTouchListener.html │ ├── listener_ChartTouchListener.html │ ├── listener_PieRadarChartTouchListener.html │ ├── model_GradientColor.html │ ├── renderer_AxisRenderer.html │ ├── renderer_BarChartRenderer.html │ ├── renderer_BarLineScatterCandleBubbleRenderer.html │ ├── renderer_BubbleChartRenderer.html │ ├── renderer_CandleStickChartRenderer.html │ ├── renderer_CombinedChartRenderer.html │ ├── renderer_DataRenderer.html │ ├── renderer_HorizontalBarChartRenderer.html │ ├── renderer_LegendRenderer.html │ ├── renderer_LineChartRenderer.html │ ├── renderer_LineRadarRenderer.html │ ├── renderer_LineScatterCandleRadarRenderer.html │ ├── renderer_PieChartRenderer.html │ ├── renderer_RadarChartRenderer.html │ ├── renderer_Renderer.html │ ├── renderer_ScatterChartRenderer.html │ ├── renderer_XAxisRenderer.html │ ├── renderer_XAxisRendererHorizontalBarChart.html │ ├── renderer_XAxisRendererRadarChart.html │ ├── renderer_YAxisRenderer.html │ ├── renderer_YAxisRendererHorizontalBarChart.html │ ├── renderer_YAxisRendererRadarChart.html │ ├── renderer_scatter_ChevronDownShapeRenderer.html │ ├── renderer_scatter_ChevronUpShapeRenderer.html │ ├── renderer_scatter_CircleShapeRenderer.html │ ├── renderer_scatter_CrossShapeRenderer.html │ ├── renderer_scatter_IShapeRenderer.html │ ├── renderer_scatter_SquareShapeRenderer.html │ ├── renderer_scatter_TriangleShapeRenderer.html │ ├── renderer_scatter_XShapeRenderer.html │ ├── utils_ColorTemplate.html │ ├── utils_HorizontalViewPortHandler.html │ ├── utils_MPPointD.html │ ├── utils_MPPointF.html │ ├── utils_MPSize.html │ ├── utils_ObjectPool.html │ ├── utils_Transformer.html │ ├── utils_TransformerHorizontalBarChart.html │ ├── utils_Utils.Utils.html │ ├── utils_Utils.html │ ├── utils_ViewPortHandler.html │ ├── utils_colors_colorful.html │ ├── utils_colors_joyful.html │ ├── utils_colors_liberty.html │ ├── utils_colors_material.html │ ├── utils_colors_pastel.html │ └── utils_colors_vordiplom.html ├── types │ ├── charts_CombinedChart.CustomRenderer.html │ ├── renderer_AxisRenderer.CustomRendererGridLineFunction.html │ ├── renderer_AxisRenderer.CustomRendererLabelFunction.html │ ├── renderer_AxisRenderer.CustomRendererLimitLineFunction.html │ ├── renderer_AxisRenderer.CustomRendererTickFunction.html │ └── renderer_AxisRenderer.CustomRendererZeroLineFunction.html └── variables │ ├── utils_Utils.ChartTraceCategory.html │ ├── utils_Utils.Utils.DEG2RAD.html │ ├── utils_Utils.Utils.NUMBER_EPSILON.html │ ├── utils_Utils.Utils.RAD2DEG.html │ ├── utils_Utils.Utils.density.html │ ├── utils_colors_colorful.colors.html │ ├── utils_colors_joyful.colors.html │ ├── utils_colors_liberty.colors.html │ ├── utils_colors_material.colors.html │ ├── utils_colors_pastel.colors.html │ └── utils_colors_vordiplom.colors.html ├── lerna.json ├── media ├── example1.gif ├── example2.gif └── example3.gif ├── package.json ├── packages └── ui-chart │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── platforms │ └── android │ │ └── native-api-usage.json │ └── tsconfig.json ├── pnpm-workspace.yaml ├── references.d.ts ├── src └── ui-chart │ ├── animation │ ├── ChartAnimator.ts │ └── Tween.ts │ ├── buffer │ ├── AbstractBuffer.ts │ ├── BarBuffer.ts │ └── HorizontalBarBuffer.ts │ ├── charts │ ├── BarChart.ts │ ├── BarLineChartBase.ts │ ├── BubbleChart.ts │ ├── CandleStickChart.ts │ ├── Chart.ts │ ├── CombinedChart.ts │ ├── HorizontalBarChart.ts │ ├── LineChart.ts │ ├── PieChart.ts │ ├── PieRadarChartBase.ts │ ├── RadarChart.ts │ ├── ScatterChart.ts │ └── index.ts │ ├── components │ ├── AxisBase.ts │ ├── ComponentBase.ts │ ├── Description.ts │ ├── IMarker.ts │ ├── Legend.ts │ ├── LegendEntry.ts │ ├── LimitLine.ts │ ├── MarkerImage.ts │ ├── MarkerView.java │ ├── XAxis.ts │ └── YAxis.ts │ ├── data │ ├── BarData.ts │ ├── BarDataSet.ts │ ├── BarEntry.ts │ ├── BarLineScatterCandleBubbleData.ts │ ├── BarLineScatterCandleBubbleDataSet.ts │ ├── BaseDataSet.ts │ ├── BaseEntry.ts │ ├── BubbleData.ts │ ├── BubbleDataSet.ts │ ├── BubbleEntry.ts │ ├── CandleData.ts │ ├── CandleDataSet.ts │ ├── CandleEntry.ts │ ├── ChartData.ts │ ├── CombinedData.ts │ ├── DataSet.ts │ ├── Entry.ts │ ├── LineData.ts │ ├── LineDataSet.ts │ ├── LineRadarDataSet.ts │ ├── LineScatterCandleRadarDataSet.ts │ ├── PieData.ts │ ├── PieDataSet.ts │ ├── PieEntry.ts │ ├── RadarData.ts │ ├── RadarDataSet.ts │ ├── RadarEntry.ts │ ├── ScatterData.ts │ ├── ScatterDataSet.ts │ └── filter │ │ └── Approximator.java │ ├── formatter │ ├── DefaultAxisValueFormatter.ts │ ├── DefaultFillFormatter.ts │ ├── DefaultValueFormatter.ts │ ├── IAxisValueFormatter.ts │ ├── IFillFormatter.ts │ ├── IValueFormatter.ts │ └── ValueFormatter.ts │ ├── highlight │ ├── BarHighlighter.ts │ ├── ChartHighlighter.ts │ ├── CombinedHighlighter.ts │ ├── Highlight.ts │ ├── HorizontalBarHighlighter.ts │ ├── IHighlighter.ts │ ├── PieHighlighter.ts │ ├── PieRadarHighlighter.ts │ ├── RadarHighlighter.ts │ └── Range.java │ ├── index.ts │ ├── interfaces │ ├── dataprovider │ │ ├── BarDataProvider.d.ts │ │ ├── BarLineScatterCandleBubbleDataProvider.d.ts │ │ ├── BubbleDataProvider.d.ts │ │ ├── CandleDataProvider.d.ts │ │ ├── ChartInterface.d.ts │ │ ├── CombinedDataProvider.d.ts │ │ ├── LineDataProvider.d.ts │ │ └── ScatterDataProvider.d.ts │ └── datasets │ │ ├── IBarDataSet.d.ts │ │ ├── IBarLineScatterCandleBubbleDataSet.d.ts │ │ ├── IBubbleDataSet.d.ts │ │ ├── ICandleDataSet.d.ts │ │ ├── IDataSet.d.ts │ │ ├── ILineDataSet.d.ts │ │ ├── ILineRadarDataSet.d.ts │ │ ├── ILineScatterCandleRadarDataSet.d.ts │ │ ├── IPieDataSet.d.ts │ │ ├── IRadarDataSet.d.ts │ │ └── IScatterDataSet.d.ts │ ├── jobs │ ├── AnimatedMoveViewJob.ts │ ├── AnimatedViewPortJob.ts │ ├── AnimatedZoomJob.ts │ ├── MoveViewJob.ts │ ├── ViewPortJob.ts │ └── ZoomJob.ts │ ├── listener │ ├── BarLineChartTouchListener.ts │ ├── ChartTouchListener.ts │ └── PieRadarChartTouchListener.ts │ ├── model │ └── GradientColor.ts │ ├── renderer │ ├── AxisRenderer.ts │ ├── BarChartRenderer.ts │ ├── BarLineScatterCandleBubbleRenderer.ts │ ├── BubbleChartRenderer.ts │ ├── CandleStickChartRenderer.ts │ ├── CombinedChartRenderer.ts │ ├── DataRenderer.ts │ ├── HorizontalBarChartRenderer.ts │ ├── LegendRenderer.ts │ ├── LineChartRenderer.ts │ ├── LineRadarRenderer.ts │ ├── LineScatterCandleRadarRenderer.ts │ ├── PieChartRenderer.ts │ ├── RadarChartRenderer.ts │ ├── Renderer.ts │ ├── ScatterChartRenderer.ts │ ├── XAxisRenderer.ts │ ├── XAxisRendererHorizontalBarChart.ts │ ├── XAxisRendererRadarChart.ts │ ├── YAxisRenderer.ts │ ├── YAxisRendererHorizontalBarChart.ts │ ├── YAxisRendererRadarChart.ts │ └── scatter │ │ ├── ChevronDownShapeRenderer.ts │ │ ├── ChevronUpShapeRenderer.ts │ │ ├── CircleShapeRenderer.ts │ │ ├── CrossShapeRenderer.ts │ │ ├── IShapeRenderer.ts │ │ ├── SquareShapeRenderer.ts │ │ ├── TriangleShapeRenderer.ts │ │ └── XShapeRenderer.ts │ └── utils │ ├── ColorTemplate.ts │ ├── HorizontalViewPortHandler.ts │ ├── MPPointD.d.ts │ ├── MPPointF.d.ts │ ├── MPSize.d.ts │ ├── ObjectPool.ts │ ├── Transformer.ts │ ├── TransformerHorizontalBarChart.ts │ ├── Utils.ts │ ├── ViewPortHandler.ts │ └── colors │ ├── colorful.ts │ ├── joyful.ts │ ├── liberty.ts │ ├── material.ts │ ├── pastel.ts │ └── vordiplom.ts ├── svelte.config.js ├── tsconfig.json ├── tsconfig.vue3.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './tools/.eslintrc.js' 3 | }; 4 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [farfromrefug] 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 17 | 18 | **Summary** 19 | 20 | 21 | **Expected Behavior** 22 | 23 | 24 | **Possible Solution** 25 | 26 | 27 | 28 | **Device (please complete the following information):** 29 | - Device: [e.g. Google Pixel] 30 | - Android Version [e.g. 7.0] 31 | - Library Version (e.g. 3.1.0-alpha) 32 | 33 | **Additional Context** 34 | 38 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bugs 3 | about: Create a bug report to help us improve 4 | 5 | --- 6 | 7 | 22 | 23 | **Summary** 24 | 25 | 26 | **Expected Behavior** 27 | 28 | 29 | **Possible Solution** 30 | 31 | 32 | 33 | **Device (please complete the following information):** 34 | - Device: [e.g. Google Pixel] 35 | - Android Version [e.g. 7.0] 36 | - Library Version (e.g. 3.1.0-alpha) 37 | 38 | **Additional Context** 39 | 43 | 44 | ADD A REWARD using [Speed](speedoss.com) to SOLVE this issue QUICKLY and SUPPORT this project. 45 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | 22 | 23 | **Is your feature request related to a problem? Please describe.** 24 | 25 | 26 | **Describe the solution you'd like** 27 | 28 | 29 | **Describe alternatives you've considered** 30 | 31 | 32 | **Additional context** 33 | 34 | ADD A REWARD using [Speed](speedoss.com) to SOLVE this issue QUICKLY and SUPPORT this project. 35 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/Support_help.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Support 3 | about: I need help! 4 | 5 | --- 6 | 7 | # *STOP RIGHT THERE!* 8 | 9 | Issues are ***NOT*** for getting help, only for reporting bugs and feature requests. 10 | 11 | Search open and closed issues to see if your question already has an answer. However, **do not create a new issue.** 12 | 13 | Instead, do the following: 14 | 15 | 1. Download the [Example App](https://play.google.com/store/apps/details?id=com.xxmassdeveloper.mpchartexample) and check out the [source code](https://github.com/PhilJay/MPAndroidChart/tree/master/MPChartExample/src/com/xxmassdeveloper/mpchartexample). 90% of the time there is an example that does exactly what you are trying to do. 16 | 17 | 1. Look at the [Wiki](https://github.com/PhilJay/MPAndroidChart/wiki) for the official documentation for MPAndroidChart. You can also browse the [javadoc](https://jitpack.io/com/github/philjay/mpandroidchart/v3.1.0-alpha/javadoc/) for a more detailed tutorial of the API. 18 | 19 | 1. Go to [StackOverflow](https://stackoverflow.com/questions/tagged/mpandroidchart) and ask your questions there. The community will be much more helpful and willing to offer guidance. 20 | 21 | 22 | ### You have been warned! 23 | 24 | From now on, any issues asking for help will get closed with a link to this file. 25 | 26 | ### Additional Context 27 | ADD A REWARD using [Speed](speedoss.com) to SOLVE this issue QUICKLY and SUPPORT this project. 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## PR Checklist: 2 | - [ ] I have tested this extensively and it does not break any existing behavior. 3 | - [ ] I have added/updated examples and tests for any new behavior. 4 | - [ ] If this is a significant change, an issue has already been created where the problem / solution was discussed: [N/A, or add link to issue here] 5 | 8 | 9 | 10 | ## PR Description 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: 'release' 2 | 3 | on: 4 | workflow_dispatch: 5 | inputs: 6 | release_type: 7 | type: choice 8 | default: auto 9 | description: What kind of version upgrade 10 | options: 11 | - auto 12 | - patch 13 | - minor 14 | - major 15 | 16 | jobs: 17 | release: 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout repository 21 | uses: actions/checkout@v4 22 | with: 23 | fetch-depth: "0" 24 | submodules: true 25 | 26 | - name: setup node 27 | uses: actions/setup-node@v4 28 | with: 29 | node-version: lts/* 30 | registry-url: 'https://registry.npmjs.org' 31 | 32 | 33 | - uses: oNaiPs/secrets-to-env-action@v1 34 | with: 35 | secrets: ${{ toJSON(secrets) }} 36 | 37 | 38 | - uses: oleksiyrudenko/gha-git-credentials@v2-latest 39 | with: 40 | token: '${{ secrets.GITHUB_TOKEN }}' 41 | name: Martin Guillon 42 | email: dev@akylas.fr 43 | 44 | - name: install jq 45 | run: sudo apt install jq 46 | 47 | - name: Enable CorePack 48 | run: | 49 | corepack enable 50 | yarn config get globalFolder # the yarn command will ensure the correct yarn version is downloaded and installed 51 | 52 | - name: Get yarn cache directory path 53 | id: yarn-cache-dir-path 54 | run: echo "::set-output name=dir::$(yarn config get globalFolder)" 55 | 56 | - name: Remove package.json resolutions 57 | run: echo "`jq 'delpaths([["resolutions"]])' package.json`" > package.json 58 | 59 | - uses: actions/cache@v4 60 | name: Handle node_modules Cache 61 | id: yarn-node_modules # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 62 | with: 63 | path: node_modules 64 | key: ${{ runner.os }}-yarn-node_modules-${{ hashFiles('**/yarn.lock') }} 65 | restore-keys: | 66 | ${{ runner.os }}-node_modules- 67 | 68 | - uses: actions/cache@v4 69 | if: steps.yarn-node_modules.outputs.cache-hit != 'true' 70 | name: Handle Yarn cache 71 | id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) 72 | with: 73 | path: ${{ steps.yarn-cache-dir-path.outputs.dir }} 74 | key: ${{ runner.os }}-yarn-cache-${{ hashFiles('**/yarn.lock') }} 75 | restore-keys: | 76 | ${{ runner.os }}-yarn- 77 | 78 | - name: Install deps 79 | if: steps.yarn-node_modules.outputs.cache-hit != 'true' 80 | uses: bahmutov/npm-install@v1 81 | with: 82 | install-command: yarn install --silent 83 | env: 84 | YARN_ENABLE_IMMUTABLE_INSTALLS: false 85 | 86 | - name: run setup 87 | run: | 88 | npm run setup 89 | 90 | - name: "NPM Identity" 91 | env: 92 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 93 | run: | 94 | echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" > .npmrc 95 | 96 | - name: publish auto 97 | if: github.event.inputs.release_type == 'auto' 98 | run: | 99 | npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes 100 | env: 101 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 102 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 103 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 104 | 105 | - name: publish 106 | if: github.event.inputs.release_type != 'auto' 107 | run: | 108 | npm run publish -- --force-publish --no-verify-access --no-private --no-commit-hooks --yes --bump ${{ github.event.inputs.release_type }} 109 | env: 110 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 111 | GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} 112 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # NativeScript 2 | hooks/ 3 | node_modules/ 4 | platforms 5 | 6 | # NativeScript Template 7 | *.js.map 8 | !ngcc.config.js 9 | !webpack.config.js 10 | 11 | # Logs 12 | logs 13 | *.log 14 | npm-debug.log* 15 | yarn-debug.log* 16 | yarn-error.log* 17 | 18 | # General 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | .idea 23 | .cloud 24 | .gradle 25 | .project 26 | .yarn 27 | .cxx 28 | tmp/ 29 | 30 | !.eslintrc.js 31 | !.prettierrc.js 32 | 33 | !e2e/*.js 34 | !detox.config.js 35 | devices.js 36 | 37 | *.framework 38 | *.xcframework 39 | **/*.js.map 40 | src/**/*.js 41 | packages/**/*.js 42 | packages/**/*.d.ts 43 | bin 44 | build 45 | Pods 46 | !packages/*/platforms 47 | /packages/**/*.aar 48 | /packages/**/*.framework 49 | /packages/**/*.xcframework 50 | /demo-snippets/**/*.aar 51 | *.xcuserdatad 52 | /packages/README.md 53 | packages/**/*js.map 54 | packages/**/*js 55 | packages/angular 56 | packages/typings 57 | packages/**/angular/*.json 58 | packages/**/*.ngsummary.json 59 | packages/**/*.metadata.json 60 | 61 | .vscode/settings.json 62 | 63 | /blueprint.md -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "tools"] 2 | path = tools 3 | url = https://github.com/nativescript-community/plugin-seed-tools.git 4 | [submodule "demo-vue"] 5 | path = demo-vue 6 | url = https://github.com/nativescript-community/plugin-seed-demo-vue.git 7 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | public-hoist-pattern[]=*eslint* 3 | public-hoist-pattern[]=source-map-support 4 | public-hoist-pattern[]=ts-patch 5 | public-hoist-pattern[]=typescript 6 | public-hoist-pattern[]=cpy-cli 7 | strict-peer-dependencies=false 8 | shell-emulator=true 9 | auto-install-peers=false 10 | loglevel=error 11 | engine-strict=true 12 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules/ 3 | plugin/ 4 | docs/ 5 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 200, 3 | semi: true, 4 | tabWidth: 4, 5 | trailingComma: 'none', 6 | singleQuote: true 7 | }; 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.exclude": { 3 | "schema": true 4 | }, 5 | "search.exclude": { 6 | "**/*demo*": true, 7 | "src/**/*.js": true, 8 | "src/**/*.js.map": true 9 | }, 10 | "java.configuration.updateBuildConfiguration": "disabled", 11 | "editor.snippetSuggestions": "top", 12 | "NE.enable.snippets": true, 13 | "xml.fileAssociations": [ 14 | { 15 | "systemId": "/Volumes/data/dev/nativescript/nativescript-carto/schema/tns.xsd", 16 | "pattern": "**/**/*.xml" 17 | } 18 | ], 19 | "typescript.tsdk": "node_modules/typescript/lib" 20 | } -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | nmHoistingLimits: workspaces 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: tools/.yarn/releases/yarn-4.0.1.cjs 8 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "readme": true, 3 | "angular": false, 4 | "demos": [ 5 | "vue" 6 | ], 7 | "doc": { 8 | "plugin": [ 9 | "typedoc-plugin-remove-references" 10 | ], 11 | "includeSubDirDefinitions": true 12 | } 13 | } -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-Bold.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-BoldItalic.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-ExtraBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-ExtraBold.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-ExtraBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-ExtraBoldItalic.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-Italic.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-Light.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-LightItalic.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-Semibold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-Semibold.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/OpenSans-SemiboldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/OpenSans-SemiboldItalic.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/fonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/fonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /demo-snippets/assets/star.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/demo-snippets/assets/star.png -------------------------------------------------------------------------------- /demo-snippets/assets/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | image/svg+xml 20 | 21 | 22 | 23 | 24 | Openclipart 25 | 26 | 27 | Star 28 | 2010-11-13T20:17:55 29 | A star with simple shadowing 30 | https://openclipart.org/detail/95431/star-by-artokem 31 | 32 | 33 | artokem 34 | 35 | 36 | 37 | 38 | star 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /demo-snippets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/template-snippet", 3 | "version": "0.0.1", 4 | "private": true, 5 | "nativescript": { 6 | "platforms": { 7 | "android": "*" 8 | } 9 | }, 10 | "dependencies": { 11 | "@nativescript-community/ui-chart": "*", 12 | "@nativescript-community/ui-svg": "*" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /demo-snippets/vue/install.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'nativescript-vue'; 2 | 3 | import LineChart from './Basic.vue'; 4 | import BubbleChart from './BubbleChart.vue'; 5 | import CandleStickChart from './CandleStickChart.vue'; 6 | import Basic from './NSChart.vue'; 7 | import PieChart from './PieChart.vue'; 8 | import ScatterPlot from './ScatterPlot.vue'; 9 | import CombineChart from './CombinedChart.vue'; 10 | import Realtime from './Realtime.vue'; 11 | import { ChartTraceCategory, install } from '@nativescript-community/ui-chart'; 12 | import CanvasSVG from '@nativescript-community/ui-svg/vue'; 13 | import { Trace } from '@nativescript/core'; 14 | 15 | export function installPlugin() { 16 | install(); 17 | Vue.use(CanvasSVG); 18 | Trace.addCategories(ChartTraceCategory); 19 | // Trace.enable(); 20 | 21 | Vue.registerElement('LineChart', () => require('@nativescript-community/ui-chart/charts').LineChart); 22 | Vue.registerElement('BarChart', () => require('@nativescript-community/ui-chart/charts').BarChart); 23 | Vue.registerElement('PieChart', () => require('@nativescript-community/ui-chart/charts').PieChart); 24 | Vue.registerElement('RadarChart', () => require('@nativescript-community/ui-chart/charts').RadarChart); 25 | Vue.registerElement('CandleStickChart', () => require('@nativescript-community/ui-chart/charts').CandleStickChart); 26 | Vue.registerElement('BubbleChart', () => require('@nativescript-community/ui-chart/charts').BubbleChart); 27 | Vue.registerElement('ScatterChart', () => require('@nativescript-community/ui-chart/charts').ScatterChart); 28 | Vue.registerElement('CombinedChart', () => require('@nativescript-community/ui-chart/charts').CombinedChart); 29 | } 30 | 31 | export const demos = [ 32 | { name: 'Basic', path: 'Basic', component: Basic }, 33 | { name: 'LineChart', path: 'LineChart', component: LineChart }, 34 | { name: 'BubbleChart', path: 'BubbleChart', component: BubbleChart }, 35 | { name: 'CandleStickChart', path: 'CandleStickChart', component: CandleStickChart }, 36 | { name: 'PieChart', path: 'PieChart', component: PieChart }, 37 | { name: 'ScatterPlot', path: 'ScatterPlot', component: ScatterPlot }, 38 | { name: 'CombineChart', path: 'CombineChart', component: CombineChart }, 39 | { name: 'Realtime', path: 'Realtime', component: Realtime } 40 | ]; 41 | -------------------------------------------------------------------------------- /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. -------------------------------------------------------------------------------- /docs/assets/hierarchy.js: -------------------------------------------------------------------------------- 1 | window.hierarchyData = "eJytXG1z2zYS/i/6jKIACOLF3/JymeimnfPUaSe5TsdDy3TMVhZ9JJ32rpP/frMkJWFJUATIfJEBEIt9sLt43/Xfm6osm3pz9as0hHNhZfvLCBdSJESnLCFGSE54ygQnnCtjiOIJI5xpnRCeKihmWlvCOYdGVMoMlFhOuOTWEC4FU4QnwrTpFMqVEb+RTZU/7PNdU5SHenP190Ya+D1kT/nmavPqrm6qbNe8fnl4yKsN2fxRHO43V1wYsnmp9purzW6f1XVef3/X1rjFBHSQfWye9hvS0WyuNk19/x00+F1XQDa7x2J/X+WHzdWv2v72lWy0dcC8zqpgHKe69JyK4M6FBPZcSIf/+7Iq/lcemmwfg8RDRX1ll9EBGOUK481L3ZRPP+WH+7xycIhUHXEUhyavHrJdXn+/e8yqpgahvIEUxcSTrE8tAHvBDdZF29QlAQy5nhIRikhE2hlCOrCEH4pD3rb2OqvzMBSIhI4KIlAJbghPEk24lZIIzS1JjGQklZZ1dmP5Wl293N3t8+XqAniuxM7NhQjLYe6m523UqGRlx99kh/t9ftMUuz9W9N5Kd+QO2wwQwRjGsGBWGEJqJIxQzh272JGiU0ukNgnYH1iky7l8uisO+X0wArc+xbnZXsOInZo0QwGMiainaB6KtmunzNMUscgMYVJwAJwaCxDBmfE5NdthmSizssPXxYr+Ssnd/h7bCujuie0pMd9ZbRLM7KfsvreNwEVhREPHJRFDELpPUi4UjMGU6bW6OCNZpA1A4iA4txYgGYe1k5zVSSrRqrOk0ze7rGnyNd2W1jVCt72AjiP2KDPbecW42/lXfxX1rB2WT8/lIT809e2xOj0lIixPJakiShoBlgcnAzz7dzwiwCAainMxsBjXRPGUEyV4SlTCVAcwdbdHb/N6VxXPcAIJhOdQUDc9ryLBU3dCzj/nh/tApl1l2v+ZZ5Uwheb+p6KBqTyU27E+PacCeKYuz49gSoH82rq0+53nI41w+HyK4NPWpZ8C+aiE423/26zJLnG6z5rstq9Hj3/n+Wibjvnc5BcnDJfVTd5QJznP0FqFGf7j0FT/nZkhjxzbuvSUCJoVNWN6fII6TnDt3rbb6YdK+AI5nfkcM4OohMMFiCXaKElMYhUx7Z0HS3i719VcieCOBar0cgsz3Zs3ANxDbVOilUqITfpLjyTFVl9HYK8dlPUSPCbtUaQsGaCIsNG+Mj2n5q0Uw9BK9zDs6BwbZqOOPYbaHjBU6AgbaTvYTiJsAjibdHxkD5f5uTp102Gzg1Hj83KQlM9VqZOc7athaCE+k4ZIGdWmODfPWaA1paMOlrJTnbrpICnDHe7wQiBMyMea9JyKuRpgTBObGkaslSmMKphHPRcEYWCcyhRl5mWfogvdUH0fdbtgNoPVgVgtedtrrdwBFqz0TsWLpjFY6AkMbAJ2R6xN4Fo+YbrDgy6IYE0J0sCxIj0l5iVvhfWwCpG+U5e66Vmelo+6154lYxi7BHRUELOsWWEJZ8y2koeldgANrebROCep6eWvMT1gPCUgU8KZVO1BCsY0vgIJsp++Hj3+ndekRhNXTxcim3NV6iTnGdrEYIbBg/VYl54SQXMzzIzDy5IgYZ5q0nNq/p4cDNHHLkSmyIAirKnlm7AR32DRnmtTJxl2IQ/b9fGtTJCEnbrUTQf0VirlZxoiZ1ydDrIB3JV2Tept/pC97Bs4+f6S7V/yd2X11LZ4CcjDsdLtJDmd/hLz4sm0MO3bFdOCjWG/K/b7ZYgRJfUWBshSCzMGtUKOfhlGya/Dhda47QXt+gfWGZiHlvrKIncgnBnGe8WiRW/rV+ksTKy6bZgmJ8FpwXpw6Ml0u1SIQwF+M+EZ5uJbYnkDKGvGqtJpj0oOLsjeF58f98XnxxlUj8dqt5iGDrIxqDjTSYfKIl+B9swSjWtIRUcFURIz4D7DrOnlZk3qOf/EgxwTUl/Z/EQCwpt6No2GNUVNJz8EAOTIM2jrA+UfnWdcLhHdhvCfHJcWXDBAjeDxZLo5hHP09Hxd5NGSwzR0kA2R0nBH3u6UluAYElJfWdT45Cn4h4nu8NkmhlvBaJwjQJEIOyDoRubVoXjKmvz+x/JL/kuR//nP8u4Slt/Lu/rWQ0N9ZSFg0Oth10hZ/fx8nzX5D0Xd5IdZg0eQgPV1WTVnSMPWoo2fJ/2iBK6CHrDfCuY3AJgwn2odZsGqHQPEZVEjAe5iOE+k6VFip8e+9X+X5VMMwr4+HeYDjE4K9w0jxvJd6460dJm6TGN04sp9sQ4SBjqQQsCvFp0mpHYxhWrgKOkIiad8sHE6udl8KF92j6Mh5GG97+vcTlLT6S8BEJUZ7aLisXlYR6MZKC7loDgtus0eJKbccOLhTpPTC58ChGnwhXeMY0rVV2tdNE6+KIvcEjm+hnUbvCQePwKUidFgkhhGeKK56jRozeAFtRVxFLAhER0VRHlfp7ybmQUbPsxPPLzGgp1p5sIT76IOgYgJF1yDT79V3WQHWb+LblxvxnTUVzY/SIRA7iNDj9coVFPEIz/aGHyJTDyntgXgfJTUXxoAS4rhS/my+QWuFh0LHDYTvQ1TFqyNE/DKJuAMS8BBlIBnIgFPPdJOi32gA3bJcpAESRRBR5mocc9sSlo1E54w2S0wMBlcdCiOAjpN7nExjjEChVyuOy+xKGSYhA6yIQjM8E0rXjwjKjouCYCCwwBO73bRUBAVHZdEGZcylvCEd34l7TQ8+wQYDXi6iYmHwGVdgYmklTJEdNkuVgkGjMf5OqoLQyI6KphXPkjY63YchWRMRj1FAWgE2kXHYThxXrbmw4szTKyknR06JeETu+tgHAXNR0i9hQEiStCd1cfoXSmioB+X70slLFaJYr1BS/QkgNqNCyvxI/WElMx9DxCmYnIKdJgHvh+s44U/VR4ATnN3g/cpWtOIgn5armnDBOGJMd02H7JTuBZqeqYNOvc9QJgGzSyfVmh6gpZOlc+Dk4z5nxOO1zXv2yXootZfmmLvxmINSOn0lwB8HM2DP15fl8WheTuzU+4QHSvTUyLs8A1x0GOe72J4vqOnROxmHHrcGjsEYrvrdFnus7v9xbiADsO/7n7Pdw3Up0eiuAVJpqJHgDb7H6rsUMMzZYg5OJWpm44BAqeQDgiOV3Paixv1I2ieAX35a4DFKuO7Lg0eR8MxEjdmBgJkrDsbSWPw0bN1T7muyi/F/ey585y8BX+X557qdtAKHeYjLb8Nlk6Z7N7opEXeJZdd6dd3JKDxGXf+pd2GeNxWP4RLm7a/RoMg4Mky5aIfijb1e5uv7bqnm6u71IW8O6o0enRd9A2wjxuinqJY7BCpf8YO/0hjeLm+dSgX4UaN0EE2dtRI3dqMOOKVzHP19S2k7WmKegtje6D7Mw+YvMf3eCXuYTN0VBCJt/0PDo6FcPQm53j/rQTuaYn6yiLhQ9grgo/ucreemLYg2HXe1LcONd0GxLlNOcNr27nfpAI9823Dg7biMM9EaQVUiZ30IdyglT3haQJ3/qnt/iVDm0V9Xt2/QV9W4VaqRynRvnzrD8yJQImjc7ZhwTpTMWGM9/aj0Oy9XYHvhGyp5BK43wGDJlz10QU81SgCe+sLt4jA6EZdoEys/KzoZ2Qc7rWdDM2IBImc0cclsUs2iJFwJXgvVYs2u9uwqI3ILkyHasx8juwcRKCQdriRVh2Eq0R2e0KFYwO2nnCLiE45YRfbgBCMKbh9CFWrDRfcWpljEa8yl2NwTytJF+OE338EyoHv/zAfjbSP3+FKKrSte8y/VOXhbfnn4eYxe4571a47TLdTjdDJD/OHX4X9cvqWfn5ejXLQBJ0oDkFoUARrUe32+Qp4Y3rqKwsBhj1PqrKuV+AakVNPUQCqlCFvXj+imffqIyhMTbdhYCZfraWCWV+2K6o0MDNKq+BfGvL2Hxu2a0LaPw4r/Dh885+XrFqhdg899ZWFCBhtAT5URXb4vMYivS1Qf2kIPPRY+HE5LkxKP0Yh+fr1/y5V3Xo=" -------------------------------------------------------------------------------- /docs/assets/highlight.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --light-hl-0: #AF00DB; 3 | --dark-hl-0: #C586C0; 4 | --light-hl-1: #000000; 5 | --dark-hl-1: #D4D4D4; 6 | --light-hl-2: #001080; 7 | --dark-hl-2: #9CDCFE; 8 | --light-hl-3: #A31515; 9 | --dark-hl-3: #CE9178; 10 | --light-hl-4: #795E26; 11 | --dark-hl-4: #DCDCAA; 12 | --light-hl-5: #0000FF; 13 | --dark-hl-5: #569CD6; 14 | --light-hl-6: #0070C1; 15 | --dark-hl-6: #4FC1FF; 16 | --light-hl-7: #267F99; 17 | --dark-hl-7: #4EC9B0; 18 | --light-hl-8: #098658; 19 | --dark-hl-8: #B5CEA8; 20 | --light-hl-9: #008000; 21 | --dark-hl-9: #6A9955; 22 | --light-hl-10: #800000; 23 | --dark-hl-10: #808080; 24 | --light-hl-11: #CD3131; 25 | --dark-hl-11: #F44747; 26 | --light-hl-12: #E50000; 27 | --dark-hl-12: #9CDCFE; 28 | --light-hl-13: #0000FF; 29 | --dark-hl-13: #CE9178; 30 | --light-hl-14: #000000; 31 | --dark-hl-14: #C8C8C8; 32 | --light-code-background: #FFFFFF; 33 | --dark-code-background: #1E1E1E; 34 | } 35 | 36 | @media (prefers-color-scheme: light) { :root { 37 | --hl-0: var(--light-hl-0); 38 | --hl-1: var(--light-hl-1); 39 | --hl-2: var(--light-hl-2); 40 | --hl-3: var(--light-hl-3); 41 | --hl-4: var(--light-hl-4); 42 | --hl-5: var(--light-hl-5); 43 | --hl-6: var(--light-hl-6); 44 | --hl-7: var(--light-hl-7); 45 | --hl-8: var(--light-hl-8); 46 | --hl-9: var(--light-hl-9); 47 | --hl-10: var(--light-hl-10); 48 | --hl-11: var(--light-hl-11); 49 | --hl-12: var(--light-hl-12); 50 | --hl-13: var(--light-hl-13); 51 | --hl-14: var(--light-hl-14); 52 | --code-background: var(--light-code-background); 53 | } } 54 | 55 | @media (prefers-color-scheme: dark) { :root { 56 | --hl-0: var(--dark-hl-0); 57 | --hl-1: var(--dark-hl-1); 58 | --hl-2: var(--dark-hl-2); 59 | --hl-3: var(--dark-hl-3); 60 | --hl-4: var(--dark-hl-4); 61 | --hl-5: var(--dark-hl-5); 62 | --hl-6: var(--dark-hl-6); 63 | --hl-7: var(--dark-hl-7); 64 | --hl-8: var(--dark-hl-8); 65 | --hl-9: var(--dark-hl-9); 66 | --hl-10: var(--dark-hl-10); 67 | --hl-11: var(--dark-hl-11); 68 | --hl-12: var(--dark-hl-12); 69 | --hl-13: var(--dark-hl-13); 70 | --hl-14: var(--dark-hl-14); 71 | --code-background: var(--dark-code-background); 72 | } } 73 | 74 | :root[data-theme='light'] { 75 | --hl-0: var(--light-hl-0); 76 | --hl-1: var(--light-hl-1); 77 | --hl-2: var(--light-hl-2); 78 | --hl-3: var(--light-hl-3); 79 | --hl-4: var(--light-hl-4); 80 | --hl-5: var(--light-hl-5); 81 | --hl-6: var(--light-hl-6); 82 | --hl-7: var(--light-hl-7); 83 | --hl-8: var(--light-hl-8); 84 | --hl-9: var(--light-hl-9); 85 | --hl-10: var(--light-hl-10); 86 | --hl-11: var(--light-hl-11); 87 | --hl-12: var(--light-hl-12); 88 | --hl-13: var(--light-hl-13); 89 | --hl-14: var(--light-hl-14); 90 | --code-background: var(--light-code-background); 91 | } 92 | 93 | :root[data-theme='dark'] { 94 | --hl-0: var(--dark-hl-0); 95 | --hl-1: var(--dark-hl-1); 96 | --hl-2: var(--dark-hl-2); 97 | --hl-3: var(--dark-hl-3); 98 | --hl-4: var(--dark-hl-4); 99 | --hl-5: var(--dark-hl-5); 100 | --hl-6: var(--dark-hl-6); 101 | --hl-7: var(--dark-hl-7); 102 | --hl-8: var(--dark-hl-8); 103 | --hl-9: var(--dark-hl-9); 104 | --hl-10: var(--dark-hl-10); 105 | --hl-11: var(--dark-hl-11); 106 | --hl-12: var(--dark-hl-12); 107 | --hl-13: var(--dark-hl-13); 108 | --hl-14: var(--dark-hl-14); 109 | --code-background: var(--dark-code-background); 110 | } 111 | 112 | .hl-0 { color: var(--hl-0); } 113 | .hl-1 { color: var(--hl-1); } 114 | .hl-2 { color: var(--hl-2); } 115 | .hl-3 { color: var(--hl-3); } 116 | .hl-4 { color: var(--hl-4); } 117 | .hl-5 { color: var(--hl-5); } 118 | .hl-6 { color: var(--hl-6); } 119 | .hl-7 { color: var(--hl-7); } 120 | .hl-8 { color: var(--hl-8); } 121 | .hl-9 { color: var(--hl-9); } 122 | .hl-10 { color: var(--hl-10); } 123 | .hl-11 { color: var(--hl-11); } 124 | .hl-12 { color: var(--hl-12); } 125 | .hl-13 { color: var(--hl-13); } 126 | .hl-14 { color: var(--hl-14); } 127 | pre, code { background: var(--code-background); } 128 | -------------------------------------------------------------------------------- /docs/modules/charts.html: -------------------------------------------------------------------------------- 1 | charts | Nativescript plugin for Charts

Module charts

Settings

Member Visibility
2 | -------------------------------------------------------------------------------- /docs/modules/components_MarkerImage.html: -------------------------------------------------------------------------------- 1 | components/MarkerImage | Nativescript plugin for Charts

Module components/MarkerImage

Settings

Member Visibility
2 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "2.0.25", 3 | "$schema": "node_modules/@lerna-lite/cli/schemas/lerna-schema.json", 4 | "packages": [ 5 | "packages/*" 6 | ], 7 | "npmClient": "yarn", 8 | "useWorkspaces": true, 9 | "command": { 10 | "publish": { 11 | "cleanupTempFiles": true 12 | } 13 | }, 14 | "npmClientArgs": [ 15 | "--no-package-lock" 16 | ], 17 | "commitHooks": false, 18 | "createRelease": "github", 19 | "conventionalCommits": true, 20 | "private": false, 21 | "message": "chore(release): publish new version %v", 22 | "changelogPreset": "conventional-changelog-conventionalcommits", 23 | "ignoreChanges": [ 24 | "**/__fixtures__/**", 25 | "**/__tests__/**", 26 | "**/*.md" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /media/example1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/media/example1.gif -------------------------------------------------------------------------------- /media/example2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/media/example2.gif -------------------------------------------------------------------------------- /media/example3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/media/example3.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "description": "Nativescript plugin for Charts", 4 | "scripts": { 5 | "build": "lerna run build", 6 | "build.watch": "lerna run build.watch", 7 | "build.all": "npm run build", 8 | "build.all.win": "lerna run build.all.win", 9 | "clean": "rimraf 'packages/**/*.d.ts' 'packages/**/*.js' 'packages/**/*.js.map' 'packages/**/*.metada' 'packages/**/angular/ng-package.json'", 10 | "fullclean": "npm run clean && rimraf 'packages/**/node_modules' 'demo-*/hooks' 'demo-*/node_modules' 'package-lock.json' 'pnpm-lock.yaml' 'node_modules'", 11 | "commitmsg": "commitlint -e $GIT_PARAMS", 12 | "demo.vue.android": "cd ./demo-vue && ns run android --no-hmr --env.watchNodeModules", 13 | "demo.vue.clean": "cd ./demo-vue && ns clean", 14 | "demo.vue.ios": "cd ./demo-vue && ns run ios --no-hmr --env.watchNodeModules", 15 | "demo.vue3.android": "cd ./demo-vue3 && ns run android --no-hmr --env.watchNodeModules", 16 | "demo.vue3.clean": "cd ./demo-vue3 && ns clean", 17 | "demo.vue3.ios": "cd ./demo-vue3 && ns run ios --no-hmr --env.watchNodeModules", 18 | "postinstall": "npm run setup", 19 | "publish": "npm run setup && npm run clean && npm run build.all && npm run readme && npm run doc && npm run commit_readme_doc_changes && lerna publish", 20 | "readme": "lerna run readme && node ./tools/readme.js", 21 | "setup": "npm run submodules && ts-patch install", 22 | "start": "./node_modules/.bin/ntl -A -s 15 -o", 23 | "submodules": "git submodule update --init", 24 | "submodules.update": "git submodule -q foreach git pull -q origin master && git add .", 25 | "sync": "node ./tools/sync.js", 26 | "update": "node ./tools/update.js", 27 | "doc": "node tools/builddoc.mjs", 28 | "commit_readme_doc_changes": "git add docs/** *.md ; git commit -m \"readme/doc\" ; echo \"commit readme doc done\"" 29 | }, 30 | "keywords": [ 31 | "NativeScript", 32 | "JavaScript", 33 | "Android", 34 | "iOS" 35 | ], 36 | "author": { 37 | "name": "Martin Guillon", 38 | "email": "martin@akylas.fr" 39 | }, 40 | "bugs": { 41 | "url": "https://github.com/nativescript-community/ui-chart/issues" 42 | }, 43 | "license": "Apache-2.0", 44 | "homepage": "https://github.com/nativescript-community/ui-chart", 45 | "readmeFilename": "README.md", 46 | "devDependencies": { 47 | "@nativescript-community/additween": "^4.0.5", 48 | "@nativescript-community/arraybuffers": "^1.1.5", 49 | "@nativescript-community/gesturehandler": "^2.0.31", 50 | "@nativescript-community/plugin-seed-tools": "file:tools", 51 | "@nativescript-community/ui-canvas": "^4.6.23", 52 | "downsample": "^1.4.0", 53 | "number-format.js": "^2.0.9" 54 | }, 55 | "commitlint": { 56 | "extends": [ 57 | "@commitlint/config-conventional" 58 | ] 59 | }, 60 | "ntl": { 61 | "descriptions": { 62 | "build": "Build the plugin", 63 | "build.all": "Build the plugin for all platforms", 64 | "clean": "Clean the local environment.", 65 | "demo.vue.android": "Runs the Vue demo on Android.", 66 | "demo.vue.ios": "Runs the Vue demo on iOS.", 67 | "watch": "Watch for changes in the plugin source and re-build." 68 | } 69 | }, 70 | "workspaces": [ 71 | "packages/*", 72 | "demo*" 73 | ], 74 | "engines": { 75 | "npm": "please use yarn or pnpm", 76 | "yarn": ">=1.19.1", 77 | "pnpm": ">=7.0.0", 78 | "node": "^14.20.0 || ^16.13.0 || >=18.10.0" 79 | }, 80 | "packageManager": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728" 81 | } 82 | -------------------------------------------------------------------------------- /packages/ui-chart/.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | tsconfig.json 3 | node_modules/ 4 | pnpm-global/ 5 | CHANGELOG.md 6 | blueprint.md 7 | *.aar 8 | *.jar -------------------------------------------------------------------------------- /packages/ui-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@nativescript-community/ui-chart", 3 | "version": "2.0.25", 4 | "description": "A powerful chart / graph plugin, supporting line, bar, pie, radar, bubble, and candlestick charts as well as scaling, panning and animations.", 5 | "main": "./index", 6 | "sideEffects": false, 7 | "typings": "./index.d.ts", 8 | "scripts": { 9 | "build": "npm run tsc", 10 | "build.all": "npm run build", 11 | "readme": "readme generate -c ../../tools/readme/blueprint.json", 12 | "tsc": "cpy '**/*.d.ts' '../../packages/ui-chart' --parents --cwd=../../src/ui-chart && tsc -skipLibCheck -d", 13 | "clean": "rimraf ./*.d.ts ./*.js ./*.js.map" 14 | }, 15 | "nativescript": { 16 | "platforms": { 17 | "android": "6.0.0", 18 | "ios": "6.0.0" 19 | } 20 | }, 21 | "keywords": [ 22 | "NativeScript", 23 | "JavaScript", 24 | "Android", 25 | "iOS", 26 | "chart", 27 | "NativeScript UI", 28 | "nativescript-community", 29 | "Angular", 30 | "Vue", 31 | "Svelte", 32 | "React", 33 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-chart/master/images/example1.gif|Example1", 34 | "preview|https://raw.githubusercontent.com/nativescript-community/ui-chart/master/images/example2.gif|Example2" 35 | ], 36 | "author": { 37 | "name": "Martin Guillon", 38 | "email": "martin@akylas.fr" 39 | }, 40 | "bugs": { 41 | "url": "https://github.com/nativescript-community/ui-chart/issues" 42 | }, 43 | "repository": { 44 | "type": "git", 45 | "url": "https://github.com/nativescript-community/ui-chart" 46 | }, 47 | "license": "Apache-2.0", 48 | "readmeFilename": "README.md", 49 | "dependencies": { 50 | "@nativescript-community/additween": "^4.0.5", 51 | "@nativescript-community/arraybuffers": "^1.1.5", 52 | "@nativescript-community/gesturehandler": "^2.0.31", 53 | "@nativescript-community/ui-canvas": "^4.6.23", 54 | "downsample": "^1.4.0", 55 | "number-format.js": "^2.0.9" 56 | }, 57 | "gitHead": "0189c1aa7fbb64c4481b3caeb26067bd57d9424b" 58 | } 59 | -------------------------------------------------------------------------------- /packages/ui-chart/platforms/android/native-api-usage.json: -------------------------------------------------------------------------------- 1 | { 2 | "uses": [ 3 | "java.nio:FloatBuffer" 4 | ] 5 | } -------------------------------------------------------------------------------- /packages/ui-chart/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": "../../src/ui-chart", 5 | "outDir": "./" 6 | }, 7 | "include": ["../../src/ui-chart/**/*", "../../references.d.ts", "../../tools/references.d.ts", "../../src/references.d.ts"], 8 | "exclude": ["../../src/ui-chart/angular/**"], 9 | "references": [ 10 | { 11 | //Need for tsc 12 | "path": "../../tsconfig.vue3.json" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /pnpm-workspace.yaml: -------------------------------------------------------------------------------- 1 | packages: 2 | - packages/* 3 | - demo-* -------------------------------------------------------------------------------- /references.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nativescript-community/ui-chart/61b333f354a64fa3e5c98421c0252def8d2b8d5b/references.d.ts -------------------------------------------------------------------------------- /src/ui-chart/animation/ChartAnimator.ts: -------------------------------------------------------------------------------- 1 | import { EasingFunction, Tween } from './Tween'; 2 | export { EasingFunction }; 3 | 4 | function clamp(value) { 5 | return Math.min(1, Math.max(0, value)); 6 | } 7 | 8 | export class ChartAnimator { 9 | /** object that is updated upon animation update */ 10 | private mListener: (state) => void; 11 | 12 | /** The phase of drawn values on the y-axis. 0 - 1 */ 13 | protected mPhaseY = 1; 14 | 15 | /** The phase of drawn values on the x-axis. 0 - 1 */ 16 | protected mPhaseX = 1; 17 | 18 | constructor(listener?: (state) => void) { 19 | this.mListener = listener; 20 | } 21 | 22 | private startAnim(duration, easing?: EasingFunction, listener?: (state) => void) { 23 | const anim = new Tween({ 24 | onRender: listener 25 | }); 26 | anim.tween({ value: 0 }, { value: 1 }, duration); 27 | return anim; 28 | } 29 | private startXAnim(duration, easing?: EasingFunction, listener?: (state) => void) { 30 | return this.startAnim(duration, easing, (state) => { 31 | this.phaseX = state.value; 32 | listener?.(state); 33 | }); 34 | } 35 | 36 | private startYAnim(duration, easing?: EasingFunction, listener?: (state) => void) { 37 | return this.startAnim(duration, easing, (state) => { 38 | this.phaseY = state.value; 39 | listener?.(state); 40 | }); 41 | } 42 | 43 | /** 44 | * Animates values along the X axis. 45 | * 46 | * @param durationMillis animation duration 47 | * @param easing EasingFunction 48 | */ 49 | public animateX(durationMillis, easing?: EasingFunction) { 50 | this.startXAnim(durationMillis, easing, this.mListener); 51 | } 52 | 53 | /** 54 | * Animates values along both the X and Y axes. 55 | * 56 | * @param durationMillisX animation duration along the X axis 57 | * @param durationMillisY animation duration along the Y axis 58 | * @param easingX EasingFunction for the X axis 59 | * @param easingY EasingFunction for the Y axis 60 | */ 61 | public animateXY(durationMillisX, durationMillisY, easingX?: EasingFunction, easingY?: EasingFunction) { 62 | this.startXAnim(durationMillisX, easingX, durationMillisX > durationMillisY ? this.mListener : undefined); 63 | this.startYAnim(durationMillisY, easingY || easingX, durationMillisX > durationMillisY ? undefined : this.mListener); 64 | } 65 | 66 | /** 67 | * Animates values along the Y axis. 68 | * 69 | * @param durationMillis animation duration 70 | * @param easing EasingFunction 71 | */ 72 | public animateY(durationMillis, easing?: EasingFunction) { 73 | this.startYAnim(durationMillis, easing, this.mListener); 74 | } 75 | 76 | /** 77 | * Gets the Y axis phase of the animation. 78 | * 79 | * @return let value of {@link #mPhaseY} 80 | */ 81 | public get phaseY() { 82 | return this.mPhaseY; 83 | } 84 | 85 | /** 86 | * Sets the Y axis phase of the animation. 87 | * 88 | * @param phase let value between 0 - 1 89 | */ 90 | public set phaseY(phase) { 91 | this.mPhaseY = clamp(phase); 92 | } 93 | 94 | /** 95 | * Gets the X axis phase of the animation. 96 | * 97 | * @return let value of {@link #mPhaseX} 98 | */ 99 | public get phaseX() { 100 | return this.mPhaseX; 101 | } 102 | 103 | /** 104 | * Sets the X axis phase of the animation. 105 | * 106 | * @param phase let value between 0 - 1 107 | */ 108 | public set phaseX(phase) { 109 | this.mPhaseX = clamp(phase); 110 | } 111 | } 112 | -------------------------------------------------------------------------------- /src/ui-chart/animation/Tween.ts: -------------------------------------------------------------------------------- 1 | import { time } from '@nativescript/core/profiling'; 2 | import { cancelAnimationFrame, requestAnimationFrame } from '@nativescript/core/animation-frame'; 3 | import { AdditiveTweening, EasingFunction } from '@nativescript-community/additween'; 4 | export { EasingFunction }; 5 | if (!global.window) { 6 | global.window = { 7 | requestAnimationFrame, 8 | cancelAnimationFrame, 9 | performance: { 10 | now: time 11 | } 12 | } as any; 13 | } else if (!global.window.requestAnimationFrame) { 14 | global.window.requestAnimationFrame = requestAnimationFrame; 15 | global.window.cancelAnimationFrame = cancelAnimationFrame; 16 | if (!global.window.performance) { 17 | //@ts-ignore 18 | global.window.performance = { 19 | now: time 20 | }; 21 | } 22 | } 23 | 24 | export class Tween> extends AdditiveTweening {} 25 | -------------------------------------------------------------------------------- /src/ui-chart/buffer/AbstractBuffer.ts: -------------------------------------------------------------------------------- 1 | import { Utils } from '../utils/Utils'; 2 | 3 | export abstract class AbstractBuffer { 4 | protected index: number; 5 | protected phaseX: number; 6 | protected phaseY: number; 7 | protected from: number; 8 | protected to: number; 9 | 10 | public buffer; 11 | public entries: T[]; 12 | 13 | /** 14 | * Initialization with buffer-size. 15 | * 16 | * @param size 17 | */ 18 | constructor(size: number) { 19 | this.index = 0; 20 | this.buffer = Utils.getTempArray(size); 21 | } 22 | 23 | /** limits the drawing on the x-axis */ 24 | public limitFrom(from: number) { 25 | if (from < 0) { 26 | from = 0; 27 | } 28 | this.from = from; 29 | } 30 | 31 | /** limits the drawing on the x-axis */ 32 | public limitTo(to: number) { 33 | if (to < 0) { 34 | to = 0; 35 | } 36 | this.to = to; 37 | } 38 | 39 | /** 40 | * Resets the buffer index to 0 and makes the buffer reusable. 41 | */ 42 | public reset() { 43 | this.index = 0; 44 | } 45 | 46 | /** 47 | * Returns the size (length) of the buffer array. 48 | */ 49 | public get length() { 50 | return this.buffer.length; 51 | } 52 | 53 | /** 54 | * Set the phases used for animations. 55 | * 56 | * @param phaseX 57 | * @param phaseY 58 | */ 59 | public setPhases(phaseX, phaseY) { 60 | this.phaseX = phaseX; 61 | this.phaseY = phaseY; 62 | } 63 | 64 | /** 65 | * Builds up the buffer with the provided data and resets the buffer-index 66 | * after feed-completion. This needs to run FAST. 67 | * 68 | * @param data 69 | */ 70 | public abstract feed(data); 71 | } 72 | -------------------------------------------------------------------------------- /src/ui-chart/buffer/HorizontalBarBuffer.ts: -------------------------------------------------------------------------------- 1 | import { BarBuffer } from './BarBuffer'; 2 | import { IBarDataSet } from '../interfaces/datasets/IBarDataSet'; 3 | 4 | export class HorizontalBarBuffer extends BarBuffer { 5 | constructor(size: number, dataSetCount: number, containsStacks: boolean) { 6 | super(size, dataSetCount, containsStacks); 7 | } 8 | 9 | public feed(data: IBarDataSet) { 10 | const size = data.entryCount * this.phaseX; 11 | const barWidthHalf = this.barWidth / 2; 12 | const yKey = data.yProperty; 13 | for (let i = 0; i < size; i++) { 14 | const e = data.getEntryForIndex(i); 15 | if (!e) { 16 | continue; 17 | } 18 | 19 | const x = data.getEntryXValue(e, i); 20 | let y = e[yKey]; 21 | const vals = e.yVals; 22 | 23 | if (!this.containsStacks || !vals || vals.length === 0) { 24 | if (y === undefined || y === null) { 25 | continue; 26 | } 27 | const bottom = x - barWidthHalf; 28 | const top = x + barWidthHalf; 29 | let left, right; 30 | if (this.inverted) { 31 | left = y >= 0 ? y : this.yAxisMax <= 0 ? this.yAxisMax : 0; 32 | right = y <= 0 ? y : this.yAxisMin >= 0 ? this.yAxisMin : 0; 33 | } else { 34 | right = y >= 0 ? y : this.yAxisMax <= 0 ? this.yAxisMax : 0; 35 | left = y <= 0 ? y : this.yAxisMin >= 0 ? this.yAxisMin : 0; 36 | } 37 | 38 | // multiply the height of the rect with the phase 39 | if (right > 0) { 40 | right = left + this.phaseY * (right - left); 41 | } else { 42 | left = right + this.phaseY * (left - right); 43 | } 44 | this.addBar(e, left, top, right, bottom); 45 | } else { 46 | let posY = 0; 47 | let negY = -e.negativeSum; 48 | let yStart = 0; 49 | 50 | // fill the stack 51 | for (let k = 0; k < vals.length; k++) { 52 | const value = vals[k]; 53 | 54 | if (value >= 0) { 55 | y = posY; 56 | yStart = posY + value; 57 | posY = yStart; 58 | } else { 59 | y = negY; 60 | yStart = negY + Math.abs(value); 61 | negY += Math.abs(value); 62 | } 63 | 64 | const bottom = x - barWidthHalf; 65 | const top = x + barWidthHalf; 66 | let left, right; 67 | if (this.inverted) { 68 | left = y >= yStart ? y : yStart; 69 | right = y <= yStart ? y : yStart; 70 | } else { 71 | right = y >= yStart ? y : yStart; 72 | left = y <= yStart ? y : yStart; 73 | } 74 | 75 | // multiply the height of the rect with the phase 76 | if (right > 0) { 77 | right = left + this.phaseY * (right - left); 78 | } else { 79 | left = right + this.phaseY * (left - right); 80 | } 81 | 82 | this.addBar(e, left, top, right, bottom); 83 | } 84 | } 85 | } 86 | const barsCount = this.index / 4; 87 | this.reset(); 88 | return barsCount; 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/ui-chart/charts/BubbleChart.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint } from '@nativescript-community/ui-canvas'; 2 | import { BubbleData } from '../data/BubbleData'; 3 | import { BubbleEntry } from '../data/BubbleEntry'; 4 | import { Highlight } from '../highlight/Highlight'; 5 | import { BubbleDataProvider } from '../interfaces/dataprovider/BubbleDataProvider'; 6 | import { IBubbleDataSet } from '../interfaces/datasets/IBubbleDataSet'; 7 | import { BubbleChartRenderer } from '../renderer/BubbleChartRenderer'; 8 | import { BaseCustomRenderer } from '../renderer/DataRenderer'; 9 | import { BarLineChartBase } from './BarLineChartBase'; 10 | 11 | export interface CustomRenderer extends BaseCustomRenderer { 12 | drawBubble?: (c: Canvas, e: BubbleEntry, cx: number, cy: number, radius: number, paint: Paint) => void; 13 | drawHighlight?: (c: Canvas, e: Highlight, cx: number, cy: number, radius: number, paint: Paint) => void; 14 | } 15 | 16 | /** 17 | * The BubbleChart. Draws bubbles. Bubble chart implementation: Copyright 2015 18 | * Pierre-Marc Airoldi Licensed under Apache License 2.0. In the BubbleChart, it 19 | * is the area of the bubble, not the radius or diameter of the bubble that 20 | * conveys the data. 21 | * 22 | 23 | */ 24 | export class BubbleChart extends BarLineChartBase implements BubbleDataProvider { 25 | renderer: BubbleChartRenderer; 26 | protected init() { 27 | super.init(); 28 | 29 | this.renderer = new BubbleChartRenderer(this, this.animator, this.viewPortHandler); 30 | } 31 | 32 | public get bubbleData() { 33 | return this.mData; 34 | } 35 | customRenderer: CustomRenderer; 36 | } 37 | -------------------------------------------------------------------------------- /src/ui-chart/charts/CandleStickChart.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Path } from '@nativescript-community/ui-canvas'; 2 | import { TypedArray } from '@nativescript-community/arraybuffers'; 3 | import { CandleData } from '../data/CandleData'; 4 | import { CandleEntry } from '../data/CandleEntry'; 5 | import { Highlight } from '../highlight/Highlight'; 6 | import { CandleDataProvider } from '../interfaces/dataprovider/CandleDataProvider'; 7 | import { ICandleDataSet } from '../interfaces/datasets/ICandleDataSet'; 8 | import { CandleStickChartRenderer } from '../renderer/CandleStickChartRenderer'; 9 | import { BaseCustomRenderer } from '../renderer/DataRenderer'; 10 | import { BarLineChartBase } from './BarLineChartBase'; 11 | 12 | export interface CustomRenderer extends BaseCustomRenderer { 13 | drawShadows?: (c: Canvas, e: CandleEntry, line: Path, paint: Paint) => void; 14 | drawOpened?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void; 15 | drawClosed?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void; 16 | drawEqual?: (c: Canvas, e: CandleEntry, left: number, top: number, right: number, bottom: number, paint: Paint) => void; 17 | drawLines?: (c: Canvas, e: CandleEntry, range: number[] | TypedArray, open: number[] | TypedArray, close: number[] | TypedArray, paint: Paint) => void; 18 | drawHighlight?: (c: Canvas, e: Highlight, set: ICandleDataSet, paint: Paint) => void; 19 | } 20 | /** 21 | * Financial chart type that draws candle-sticks (OHCL chart). 22 | * 23 | 24 | */ 25 | export class CandleStickChart extends BarLineChartBase implements CandleDataProvider { 26 | renderer: CandleStickChartRenderer; 27 | protected init() { 28 | super.init(); 29 | 30 | this.renderer = new CandleStickChartRenderer(this, this.animator, this.viewPortHandler); 31 | 32 | this.xAxis.spaceMin = 0.5; 33 | this.xAxis.spaceMax = 0.5; 34 | } 35 | 36 | public get candleData() { 37 | return this.mData; 38 | } 39 | 40 | customRenderer: CustomRenderer; 41 | } 42 | -------------------------------------------------------------------------------- /src/ui-chart/charts/LineChart.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Path } from '@nativescript-community/ui-canvas'; 2 | import { Entry } from '../data/Entry'; 3 | import { LineData } from '../data/LineData'; 4 | import { LineDataSet } from '../data/LineDataSet'; 5 | import { Highlight } from '../highlight/Highlight'; 6 | import { LineDataProvider } from '../interfaces/dataprovider/LineDataProvider'; 7 | import { BaseCustomRenderer } from '../renderer/DataRenderer'; 8 | import { LineChartRenderer } from '../renderer/LineChartRenderer'; 9 | import { BarLineChartBase } from './BarLineChartBase'; 10 | 11 | export interface CustomRenderer extends BaseCustomRenderer { 12 | drawLine?: (c: Canvas, line: Path, paint: Paint) => void; 13 | drawHighlight?: (c: Canvas, e: Highlight, set: LineDataSet, paint: Paint) => void; 14 | } 15 | 16 | export class LineChart extends BarLineChartBase implements LineDataProvider { 17 | renderer: LineChartRenderer; 18 | protected init() { 19 | super.init(); 20 | 21 | this.renderer = new LineChartRenderer(this, this.animator, this.viewPortHandler); 22 | } 23 | 24 | public get lineData() { 25 | return this.mData; 26 | } 27 | 28 | _onDetachedFromWindow() { 29 | // releases the bitmap in the renderer to avoid oom error 30 | if (this.renderer instanceof LineChartRenderer) { 31 | this.renderer.releaseBitmap(); 32 | } 33 | // super._onDetachedFromWindow(); 34 | } 35 | 36 | customRenderer: CustomRenderer; 37 | } 38 | -------------------------------------------------------------------------------- /src/ui-chart/charts/ScatterChart.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from './BarLineChartBase'; 2 | import { ScatterData } from '../data/ScatterData'; 3 | import { ScatterDataProvider } from '../interfaces/dataprovider/ScatterDataProvider'; 4 | import { ScatterDataSet } from '../data/ScatterDataSet'; 5 | import { Entry } from '../data/Entry'; 6 | import { IScatterDataSet } from '../interfaces/datasets/IScatterDataSet'; 7 | import { ScatterChartRenderer } from '../renderer/ScatterChartRenderer'; 8 | import { Canvas, Paint } from '@nativescript-community/ui-canvas'; 9 | import { Highlight } from '../highlight/Highlight'; 10 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 11 | import { BaseCustomRenderer } from '../renderer/DataRenderer'; 12 | 13 | export interface CustomRenderer extends BaseCustomRenderer { 14 | drawShape?: (c: Canvas, e: Entry, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, x: number, y: number, paint: Paint) => void; 15 | drawHighlight?: (c: Canvas, e: Highlight, set: IScatterDataSet, paint: Paint) => void; 16 | } 17 | 18 | export enum ScatterShape { 19 | SQUARE = 'SQUARE', 20 | CIRCLE = 'CIRCLE', 21 | TRIANGLE = 'TRIANGLE', 22 | CROSS = 'CROSS', 23 | X = 'X', 24 | CHEVRON_UP = 'CHEVRON_UP', 25 | CHEVRON_DOWN = 'CHEVRON_DOWN' 26 | } 27 | /** 28 | * The ScatterChart. Draws dots, triangles, squares and custom shapes into the 29 | * Chart-View. CIRCLE and SCQUARE offer the best performance, TRIANGLE has the 30 | * worst performance. 31 | * 32 | 33 | */ 34 | export class ScatterChart extends BarLineChartBase implements ScatterDataProvider { 35 | renderer: ScatterChartRenderer; 36 | 37 | protected init() { 38 | super.init(); 39 | 40 | this.renderer = new ScatterChartRenderer(this, this.animator, this.viewPortHandler); 41 | 42 | this.xAxis.spaceMin = 0.5; 43 | this.xAxis.spaceMax = 0.5; 44 | } 45 | 46 | public get scatterData() { 47 | return this.mData; 48 | } 49 | 50 | customRenderer: CustomRenderer; 51 | } 52 | -------------------------------------------------------------------------------- /src/ui-chart/charts/index.ts: -------------------------------------------------------------------------------- 1 | export { BarChart } from './BarChart'; 2 | export { HorizontalBarChart } from './HorizontalBarChart'; 3 | export { LineChart } from './LineChart'; 4 | export { PieChart } from './PieChart'; 5 | export { RadarChart } from './RadarChart'; 6 | export { ScatterChart } from './ScatterChart'; 7 | export { BubbleChart } from './BubbleChart'; 8 | export { CandleStickChart } from './CandleStickChart'; 9 | export { CombinedChart } from './CombinedChart'; 10 | -------------------------------------------------------------------------------- /src/ui-chart/components/ComponentBase.ts: -------------------------------------------------------------------------------- 1 | import { Font } from '@nativescript/core/ui/styling/font'; 2 | 3 | const DEFAULT_FONT = Font.default.withFontSize(10); 4 | /** 5 | * This class encapsulates everything both Axis, Legend and LimitLines have in common. 6 | * 7 | 8 | */ 9 | export abstract class ComponentBase { 10 | /** 11 | * flag that indicates if this axis / legend is enabled or not 12 | */ 13 | enabled: boolean = true; 14 | 15 | /** 16 | * the offset in pixels this component has on the x-axis 17 | */ 18 | xOffset: number = 5; 19 | 20 | /** 21 | * the offset in pixels this component has on the Y-axis 22 | */ 23 | yOffset: number = 5; 24 | 25 | /** 26 | * the typeface used for the labels 27 | */ 28 | typeface: Font = DEFAULT_FONT; 29 | 30 | /** 31 | * the text size of the labels 32 | */ 33 | protected mTextSize: number = 10; 34 | 35 | /** 36 | * the text color to use for the labels 37 | */ 38 | textColor: string = 'black'; 39 | 40 | public ComponentBase() {} 41 | 42 | /** 43 | * returns the Typeface used for the labels, returns null if none is set 44 | * 45 | * @return {@link Font} 46 | */ 47 | public get font() { 48 | return this.typeface; 49 | } 50 | 51 | /** 52 | * sets a specific Typeface for the labels 53 | * 54 | * @param tf 55 | */ 56 | public set font(tf: Font) { 57 | if (tf.fontSize <= 0) { 58 | tf = tf.withFontSize(this.textSize); 59 | } 60 | this.typeface = tf; 61 | } 62 | /** 63 | * sets the size of the label text in density pixels min = 6f, max = 24f, default 64 | * 10 65 | * 66 | * @param size the text size, in DP 67 | */ 68 | set textSize(size) { 69 | this.mTextSize = size; 70 | // this bit is important to make sure we dont create crazy amount of native fonts on render 71 | this.typeface = this.typeface.withFontSize(size); 72 | } 73 | 74 | /** 75 | * returns the text size that is currently set for the labels, in pixels 76 | */ 77 | get textSize() { 78 | return this.mTextSize; 79 | } 80 | 81 | /** 82 | * Defines if the renderer should ensure we always see the component fully 83 | */ 84 | public ensureVisible = false; 85 | } 86 | -------------------------------------------------------------------------------- /src/ui-chart/components/Description.ts: -------------------------------------------------------------------------------- 1 | import { ComponentBase } from './ComponentBase'; 2 | import { Align } from '@nativescript-community/ui-canvas'; 3 | import { Utils } from '../utils/Utils'; 4 | 5 | /** 6 | * Created by Philipp Jahoda on 17/09/16. 7 | */ 8 | export class Description extends ComponentBase { 9 | /** 10 | * the text used in the description 11 | */ 12 | text = 'Description Label'; 13 | 14 | /** 15 | * the custom position of the description text 16 | */ 17 | position: { x: number; y: number }; 18 | 19 | /** 20 | * the alignment of the description text 21 | */ 22 | textAlign = Align.RIGHT; 23 | 24 | constructor() { 25 | super(); 26 | // default size 27 | this.textSize = 8; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/ui-chart/components/IMarker.ts: -------------------------------------------------------------------------------- 1 | import { Highlight } from '../highlight/Highlight'; 2 | import { Entry } from '../data/Entry'; 3 | import { MPPointF } from '../utils/MPPointF'; 4 | import { Canvas } from '@nativescript-community/ui-canvas'; 5 | 6 | export interface IMarker { 7 | /** 8 | * @return The desired (general) offset you wish the IMarker to have on the x- and y-axis. 9 | * By returning x: -(width / 2) you will center the IMarker horizontally. 10 | * By returning y: -(height / 2) you will center the IMarker vertically. 11 | */ 12 | readonly offset: MPPointF; 13 | 14 | /** 15 | * @return The offset for drawing at the specific `point`. This allows conditional adjusting of the Marker position. 16 | * If you have no adjustments to make, return getOffset(). 17 | * 18 | * @param posX This is the X position at which the marker wants to be drawn. 19 | * You can adjust the offset conditionally based on this argument. 20 | * @param posY This is the X position at which the marker wants to be drawn. 21 | * You can adjust the offset conditionally based on this argument. 22 | */ 23 | getOffsetForDrawingAtPoint(posX, posY): MPPointF; 24 | 25 | /** 26 | * This method enables a specified custom IMarker to update it's content every time the IMarker is redrawn. 27 | * 28 | * @param e The Entry the IMarker belongs to. This can also be any subclass of Entry, like BarEntry or 29 | * CandleEntry, simply cast it at runtime. 30 | * @param highlight The highlight object contains information about the highlighted value such as it's dataset-index, the 31 | * selected range or stack-index (only stacked bar entries). 32 | */ 33 | refreshContent(e: Entry, highlight: Highlight); 34 | 35 | /** 36 | * Draws the IMarker on the given position on the screen with the given Canvas object. 37 | * 38 | * @param canvas 39 | * @param posX 40 | * @param posY 41 | */ 42 | draw(canvas: Canvas, posX, posY); 43 | } 44 | -------------------------------------------------------------------------------- /src/ui-chart/components/LegendEntry.ts: -------------------------------------------------------------------------------- 1 | import { LegendForm } from './Legend'; 2 | import { DashPathEffect } from '@nativescript-community/ui-canvas'; 3 | import { Color } from '@nativescript/core/color'; 4 | 5 | export class LegendEntry { 6 | /** 7 | * 8 | * @param label The legend entry text. A `null` label will start a group. 9 | * @param form The form to draw for this entry. 10 | * @param formSize Set to NaN to use the legend's default. 11 | * @param formLineWidth Set to NaN to use the legend's default. 12 | * @param formLineDashEffect Set to nil to use the legend's default. 13 | * @param formColor The color for drawing the form. 14 | */ 15 | constructor(label: string, form: LegendForm, formSize?, formLineWidth?, formLineDashEffect?: DashPathEffect, formColor?: string | number | Color) { 16 | this.label = label; 17 | this.form = form; 18 | this.formSize = formSize; 19 | this.formLineWidth = formLineWidth; 20 | this.formLineDashEffect = formLineDashEffect; 21 | this.formColor = formColor; 22 | } 23 | 24 | /** 25 | * The legend entry text. 26 | * A `null` label will start a group. 27 | */ 28 | public label: string; 29 | 30 | /** 31 | * The form to draw for this entry. 32 | * 33 | * `NONE` will avoid drawing a form, and any related space. 34 | * `EMPTY` will avoid drawing a form, but keep its space. 35 | * `DEFAULT` will use the Legend's default. 36 | */ 37 | public form = LegendForm.DEFAULT; 38 | 39 | /** 40 | * Form size will be considered except for when .None is used 41 | * 42 | * Set as NaN to use the legend's default 43 | */ 44 | public formSize = NaN; 45 | 46 | /** 47 | * Line width used for shapes that consist of lines. 48 | * 49 | * Set as NaN to use the legend's default 50 | */ 51 | public formLineWidth = NaN; 52 | 53 | /** 54 | * Line dash path effect used for shapes that consist of lines. 55 | * 56 | * Set to null to use the legend's default 57 | */ 58 | public formLineDashEffect: DashPathEffect = null; 59 | 60 | /** 61 | * The color for drawing the form 62 | */ 63 | public formColor: string | number | Color = null; 64 | } 65 | -------------------------------------------------------------------------------- /src/ui-chart/components/LimitLine.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, DashPathEffect, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { Color } from '@nativescript/core'; 3 | import { ComponentBase } from './ComponentBase'; 4 | 5 | /** enum that indicates the position of the LimitLine label */ 6 | export enum LimitLabelPosition { 7 | LEFT_TOP, 8 | LEFT_BOTTOM, 9 | CENTER_TOP, 10 | CENTER_BOTTOM, 11 | RIGHT_TOP, 12 | RIGHT_BOTTOM 13 | } 14 | /** 15 | * The limit line is an additional feature for all Line-, Bar- and 16 | * ScatterCharts. It allows the displaying of an additional line in the chart 17 | * that marks a certain maximum / limit on the specified axis (x- or y-axis). 18 | * 19 | 20 | */ 21 | export class LimitLine extends ComponentBase { 22 | /** limit / maximum (the y-value or xIndex) */ 23 | limit = 0; 24 | 25 | /** the width of the limit line 26 | * thinner line === better performance, thicker line === worse performance 27 | */ 28 | lineWidth = 2; 29 | 30 | /** the color of the limit line */ 31 | lineColor: Color | string = '#ED5B5B'; 32 | 33 | /** the style of the label text */ 34 | textStyle = Style.FILL; 35 | 36 | /** label string that is drawn next to the limit line */ 37 | label = ''; 38 | 39 | /** the path effect of this LimitLine that makes dashed lines possible */ 40 | dashPathEffect: DashPathEffect = null; 41 | 42 | /** position of the LimitLine value label (either on the right or on 43 | * the left edge of the chart). Not supported for RadarChart. 44 | */ 45 | labelPosition: LimitLabelPosition = LimitLabelPosition.RIGHT_TOP; 46 | 47 | /** 48 | * Constructor with limit and label. 49 | * 50 | * @param limit - the position (the value) on the y-axis (y-value) or x-axis 51 | * (xIndex) where this line should appear 52 | * @param label - provide "" if no label is required 53 | */ 54 | constructor(limit, label?) { 55 | super(); 56 | this.limit = limit; 57 | this.label = label; 58 | } 59 | 60 | /** 61 | * Enables the line to be drawn in dashed mode, e.g. like this "- - - - - -" 62 | * 63 | * @param lineLength the length of the line pieces 64 | * @param spaceLength the length of space inbetween the pieces 65 | * @param phase offset, in degrees (normally, use 0) 66 | */ 67 | public enableDashedLine(lineLength, spaceLength, phase) { 68 | this.dashPathEffect = new DashPathEffect([lineLength, spaceLength], phase); 69 | } 70 | public drawLabel ?: (c: Canvas, label: string, x: number, y: number, paint: Paint) => void 71 | } 72 | -------------------------------------------------------------------------------- /src/ui-chart/components/MarkerImage.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Rect } from '@nativescript-community/ui-canvas'; 2 | import { ImageSource } from '@nativescript/core'; 3 | import { Chart } from '../charts/Chart'; 4 | import { Entry } from '../data/Entry'; 5 | import { Highlight } from '../highlight/Highlight'; 6 | import { MPPointF } from '../utils/MPPointF'; 7 | import { IMarker } from './IMarker'; 8 | 9 | /** 10 | * View that can be displayed when selecting values in the chart. Extend this class to provide custom layouts for your 11 | * markers. 12 | * 13 | 14 | */ 15 | class MarkerImage implements IMarker { 16 | private mOffset: MPPointF = { x: 0, y: 0 }; 17 | private mOffset2: MPPointF = { x: 0, y: 0 }; 18 | private mWeakChart: WeakRef>; 19 | 20 | private mSize = { width: 0, height: 0 }; 21 | private mDrawableBoundsCache = new Rect(0, 0, 0, 0); 22 | imageSource: ImageSource; 23 | 24 | /** 25 | * Constructor. Sets up the MarkerView with a custom layout resource. 26 | * 27 | * @param context 28 | * @param drawableResourceId the drawable resource to render 29 | */ 30 | public MarkerImage(imageSource: ImageSource) { 31 | this.imageSource = imageSource; 32 | this.mDrawableBoundsCache.set(0, 0, imageSource.width, imageSource.height); 33 | } 34 | 35 | public set offset(offset: MPPointF) { 36 | this.mOffset = offset || { x: 0, y: 0 }; 37 | } 38 | 39 | public get offset() { 40 | return this.mOffset; 41 | } 42 | 43 | public set size(size) { 44 | this.mSize = size || { width: 0, height: 0 }; 45 | } 46 | 47 | public get size() { 48 | return this.mSize; 49 | } 50 | 51 | public set chartView(chart) { 52 | this.mWeakChart = new WeakRef(chart); 53 | } 54 | 55 | public get chartView() { 56 | return this.mWeakChart?.get(); 57 | } 58 | 59 | public getOffsetForDrawingAtPoint(posX, posY) { 60 | const offset = this.offset; 61 | this.mOffset2.x = offset.x; 62 | this.mOffset2.y = offset.y; 63 | 64 | const chart = this.chartView; 65 | 66 | let width = this.mSize.width; 67 | let height = this.mSize.height; 68 | 69 | if (width === 0 && this.imageSource) { 70 | width = this.imageSource.width; 71 | } 72 | if (height === 0 && this.imageSource) { 73 | height = this.imageSource.height; 74 | } 75 | 76 | if (posX + this.mOffset2.x < 0) { 77 | this.mOffset2.x = -posX; 78 | } else if (chart && posX + width + this.mOffset2.x > chart.getMeasuredWidth()) { 79 | this.mOffset2.x = chart.getMeasuredWidth() - posX - width; 80 | } 81 | 82 | if (posY + this.mOffset2.y < 0) { 83 | this.mOffset2.y = -posY; 84 | } else if (chart && posY + height + this.mOffset2.y > chart.getMeasuredHeight()) { 85 | this.mOffset2.y = chart.getMeasuredHeight() - posY - height; 86 | } 87 | 88 | return this.mOffset2; 89 | } 90 | 91 | refreshContent(e: Entry, highlight: Highlight) {} 92 | 93 | public draw(c: Canvas, posX, posY) { 94 | if (!this.imageSource) return; 95 | 96 | const offset = this.getOffsetForDrawingAtPoint(posX, posY); 97 | 98 | let width = this.mSize.width; 99 | let height = this.mSize.height; 100 | 101 | if (width === 0 && this.imageSource) { 102 | width = this.imageSource.width; 103 | } 104 | if (height === 0 && this.imageSource) { 105 | height = this.imageSource.height; 106 | } 107 | 108 | // this.mDrawable.copyBounds(mDrawableBoundsCache); 109 | // this.mDrawable.setBounds( 110 | // this.mDrawableBoundsCache.left, 111 | // this.mDrawableBoundsCache.top, 112 | // this.mDrawableBoundsCache.left + width, 113 | // this.mDrawableBoundsCache.top + height); 114 | 115 | // c.save(); 116 | // translate to the correct position and draw 117 | // c.translate(posX + offset.x, posY + offset.y); 118 | c.drawBitmap(this.imageSource, this.mDrawableBoundsCache, new Rect(posX + offset.x, posY + offset.y, posX + offset.x + width, posY + offset.y + height), null); 119 | // c.restore(); 120 | 121 | // this.mDrawable.setBounds(mDrawableBoundsCache); 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /src/ui-chart/components/XAxis.ts: -------------------------------------------------------------------------------- 1 | import { AxisBase } from './AxisBase'; 2 | import { Utils } from '../utils/Utils'; 3 | import { Chart } from '../charts/Chart'; 4 | 5 | /** 6 | * enum for the position of the x-labels relative to the chart 7 | */ 8 | export enum XAxisPosition { 9 | TOP, 10 | BOTTOM, 11 | BOTH_SIDED, 12 | TOP_INSIDE, 13 | BOTTOM_INSIDE 14 | } 15 | 16 | /** 17 | * Class representing the x-axis labels settings. Only use the setter methods to 18 | * modify it. Do not access public variables directly. Be aware that not all 19 | * features the XLabels class provides are suitable for the RadarChart. 20 | * 21 | 22 | */ 23 | export class XAxis extends AxisBase { 24 | /** 25 | * width of the x-axis labels in pixels - this is automatically 26 | * calculated by the computeSize() methods in the renderers 27 | */ 28 | public mLabelWidth = 1; 29 | 30 | /** 31 | * height of the x-axis labels in pixels - this is automatically 32 | * calculated by the computeSize() methods in the renderers 33 | */ 34 | public mLabelHeight = 1; 35 | 36 | /** 37 | * width of the (rotated) x-axis labels in pixels - this is automatically 38 | * calculated by the computeSize() methods in the renderers 39 | */ 40 | public mLabelRotatedWidth = 1; 41 | 42 | /** 43 | * height of the (rotated) x-axis labels in pixels - this is automatically 44 | * calculated by the computeSize() methods in the renderers 45 | */ 46 | public mLabelRotatedHeight = 1; 47 | 48 | /** 49 | * This is the angle for drawing the X axis labels (in degrees) 50 | */ 51 | labelRotationAngle = 0; 52 | 53 | /** 54 | * if set to true, the chart will avoid that the first and last label entry 55 | * in the chart "clip" off the edge of the chart 56 | */ 57 | avoidFirstLastClipping = true; 58 | 59 | /** 60 | * the position of the x-labels relative to the chart 61 | */ 62 | position = XAxisPosition.TOP; 63 | 64 | constructor(chart: WeakRef>) { 65 | super(chart); 66 | this.yOffset = 4; 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /src/ui-chart/data/BarEntry.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | 3 | /** 4 | 5 | */ 6 | export interface BarEntry extends Entry { 7 | isStacked?: boolean; 8 | yVals?: number[]; 9 | positiveSum?: number; 10 | negativeSum?: number; 11 | ranges?: [number, number][]; 12 | } 13 | -------------------------------------------------------------------------------- /src/ui-chart/data/BarLineScatterCandleBubbleData.ts: -------------------------------------------------------------------------------- 1 | import { ChartData } from './ChartData'; 2 | import { Entry } from './Entry'; 3 | import { IBarLineScatterCandleBubbleDataSet } from '../interfaces/datasets/IBarLineScatterCandleBubbleDataSet'; 4 | 5 | /** 6 | * Baseclass for all Line, Bar, Scatter, Candle and Bubble data. 7 | * 8 | 9 | */ 10 | export abstract class BarLineScatterCandleBubbleData> extends ChartData {} 11 | -------------------------------------------------------------------------------- /src/ui-chart/data/BarLineScatterCandleBubbleDataSet.ts: -------------------------------------------------------------------------------- 1 | import { DataSet } from './DataSet'; 2 | import { Entry } from './Entry'; 3 | import { IBarLineScatterCandleBubbleDataSet } from '../interfaces/datasets/IBarLineScatterCandleBubbleDataSet'; 4 | import { Color } from '@nativescript/core/color'; 5 | 6 | /** 7 | * Baseclass of all DataSets for Bar-, Line-, Scatter- and CandleStickChart. 8 | * 9 | 10 | */ 11 | export abstract class BarLineScatterCandleBubbleDataSet extends DataSet implements IBarLineScatterCandleBubbleDataSet { 12 | /** 13 | * Sets the color that is used for drawing the highlight indicators. Dont 14 | * forget to resolve the color using getResources().getColor(...) or 15 | * new Color(255, ...). 16 | */ 17 | highlightColor: string | Color = '#FFBB73'; 18 | } 19 | -------------------------------------------------------------------------------- /src/ui-chart/data/BaseEntry.ts: -------------------------------------------------------------------------------- 1 | import Shape from '@nativescript-community/ui-canvas/shapes/shape'; 2 | import { ImageSource } from '@nativescript/core/image-source'; 3 | 4 | /** 5 | * Created by Philipp Jahoda on 02/06/16. 6 | */ 7 | export interface BaseEntry { 8 | icon?: ImageSource | Shape; 9 | data?: any; 10 | [k: string]: any; 11 | } 12 | -------------------------------------------------------------------------------- /src/ui-chart/data/BubbleData.ts: -------------------------------------------------------------------------------- 1 | import { BubbleDataSet } from './BubbleDataSet'; 2 | import { BarLineScatterCandleBubbleData } from './BarLineScatterCandleBubbleData'; 3 | import { BubbleEntry } from './BubbleEntry'; 4 | 5 | export class BubbleData extends BarLineScatterCandleBubbleData { 6 | /** 7 | * Sets the width of the circle that surrounds the bubble when highlighted 8 | * for all DataSet objects this data object contains, in dp. 9 | * 10 | * @param width 11 | */ 12 | public set highlightCircleWidth(width: number) { 13 | for (let index = 0; index < this.mDataSets.length; index++) { 14 | this.mDataSets[index].highlightCircleWidth = width; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/ui-chart/data/BubbleDataSet.ts: -------------------------------------------------------------------------------- 1 | import { IBubbleDataSet } from '../interfaces/datasets/IBubbleDataSet'; 2 | import { BarLineScatterCandleBubbleDataSet } from './BarLineScatterCandleBubbleDataSet'; 3 | import { BubbleEntry } from './BubbleEntry'; 4 | 5 | export class BubbleDataSet extends BarLineScatterCandleBubbleDataSet implements IBubbleDataSet { 6 | mMaxSize: number; 7 | normalizeSizeEnabled: boolean; 8 | 9 | highlightCircleWidth = 2.5; 10 | 11 | /** 12 | * property to access the "high" value of an entry for this set 13 | * 14 | */ 15 | sizeProperty: string = 'size'; 16 | 17 | constructor(yVals, label, xProperty?, yProperty?, sizeProperty?) { 18 | super(yVals, label, xProperty, yProperty); 19 | if (sizeProperty) { 20 | this.sizeProperty = sizeProperty; 21 | } 22 | this.init(); 23 | } 24 | 25 | init() { 26 | // ! init is called before init of class vars 27 | this.mMaxSize = -Infinity; 28 | this.normalizeSizeEnabled = true; 29 | super.init(); 30 | } 31 | calcMinMax() { 32 | super.calcMinMax(); 33 | } 34 | calcMinMaxForEntry(e: BubbleEntry, index?: number) { 35 | super.calcMinMaxForEntry(e, index); 36 | 37 | const size = e.size; 38 | if (size > this.mMaxSize) { 39 | this.mMaxSize = size; 40 | } 41 | } 42 | 43 | public get maxSize() { 44 | return this.mMaxSize; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/ui-chart/data/BubbleEntry.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | 3 | export interface BubbleEntry extends Entry { 4 | /** size value */ 5 | size: number; 6 | } 7 | -------------------------------------------------------------------------------- /src/ui-chart/data/CandleData.ts: -------------------------------------------------------------------------------- 1 | import { BarLineScatterCandleBubbleData } from './BarLineScatterCandleBubbleData'; 2 | import { CandleDataSet } from './CandleDataSet'; 3 | import { CandleEntry } from './CandleEntry'; 4 | 5 | export class CandleData extends BarLineScatterCandleBubbleData {} 6 | -------------------------------------------------------------------------------- /src/ui-chart/data/CandleDataSet.ts: -------------------------------------------------------------------------------- 1 | import { CandleEntry } from './CandleEntry'; 2 | import { ICandleDataSet } from '../interfaces/datasets/ICandleDataSet'; 3 | import { LineScatterCandleRadarDataSet } from './LineScatterCandleRadarDataSet'; 4 | import { Style } from '@nativescript-community/ui-canvas'; 5 | import { ColorTemplate } from '../utils/ColorTemplate'; 6 | import { Utils } from '../utils/Utils'; 7 | import { Color } from '@nativescript/core'; 8 | 9 | export class CandleDataSet extends LineScatterCandleRadarDataSet implements ICandleDataSet { 10 | /** 11 | * property to access the "high" value of an entry for this set 12 | * 13 | */ 14 | highProperty: string = 'high'; 15 | /** 16 | * property to access the "low" value of an entry for this set 17 | * 18 | */ 19 | lowProperty: string = 'low'; 20 | /** 21 | * property to access the "close" value of an entry for this set 22 | * 23 | */ 24 | closeProperty: string = 'close'; 25 | 26 | /** 27 | * property to access the "open" value of an entry for this set 28 | * 29 | */ 30 | openProperty: string = 'open'; 31 | 32 | /** 33 | * the width of the shadow of the candle 34 | */ 35 | shadowWidth = 3; 36 | 37 | /** 38 | * should the candle bars show? 39 | * when false, only "ticks" will show 40 | *

41 | * - default: true 42 | */ 43 | showCandleBar = true; 44 | 45 | /** 46 | * the space between the candle entries, default 0.1 (10%) 47 | */ 48 | barSpace = 0.1; 49 | 50 | /** 51 | * use candle color for the shadow 52 | */ 53 | shadowColorSameAsCandle = false; 54 | 55 | /** 56 | * palet style when open < close 57 | * increasing candlesticks are traditionally hollow 58 | */ 59 | increasingPaintStyle = Style.STROKE; 60 | 61 | /** 62 | * palet style when open > close 63 | * descreasing candlesticks are traditionally filled 64 | */ 65 | decreasingPaintStyle = Style.FILL; 66 | 67 | /** 68 | * color for open === close 69 | */ 70 | neutralColor: Color | string = ColorTemplate.COLOR_SKIP; 71 | 72 | /** 73 | * color for open < close 74 | */ 75 | increasingColor: Color | string = ColorTemplate.COLOR_SKIP; 76 | 77 | /** 78 | * color for open > close 79 | */ 80 | decreasingColor: Color | string = ColorTemplate.COLOR_SKIP; 81 | 82 | /** 83 | * shadow line color, set -1 for backward compatibility and uses default 84 | * color 85 | */ 86 | shadowColor: Color | string = ColorTemplate.COLOR_SKIP; 87 | 88 | constructor(yVals, label, xProperty?, yProperty?, highProperty?, lowProperty?, openProperty?, closeProperty?) { 89 | super(yVals, label, xProperty, yProperty); 90 | if (highProperty) { 91 | this.highProperty = highProperty; 92 | } 93 | if (lowProperty) { 94 | this.lowProperty = lowProperty; 95 | } 96 | if (openProperty) { 97 | this.openProperty = openProperty; 98 | } 99 | if (closeProperty) { 100 | this.closeProperty = closeProperty; 101 | } 102 | this.init(); 103 | } 104 | 105 | public getEntryYValue(e: CandleEntry) { 106 | const lowValue = e[this.lowProperty] || 0; 107 | const highValue = e[this.highProperty] || 0; 108 | return (lowValue + highValue) / 2; 109 | } 110 | 111 | protected calcMinMaxForEntry(e?: CandleEntry, index?: number) { 112 | if (!e) return; 113 | const high = e[this.highProperty]; 114 | const low = e[this.lowProperty]; 115 | 116 | if (low < this.mYMin) this.mYMin = low; 117 | 118 | if (high > this.mYMax) this.mYMax = high; 119 | 120 | this.calcMinMaxX(e, index); 121 | } 122 | 123 | protected calcMinMaxY(e: CandleEntry) { 124 | const high = e[this.highProperty]; 125 | const low = e[this.lowProperty]; 126 | if (high < this.mYMin) this.mYMin = high; 127 | 128 | if (high > this.mYMax) this.mYMax = high; 129 | 130 | if (low < this.mYMin) this.mYMin = low; 131 | 132 | if (low > this.mYMax) this.mYMax = low; 133 | } 134 | 135 | /** BELOW THIS COLOR HANDLING */ 136 | } 137 | -------------------------------------------------------------------------------- /src/ui-chart/data/CandleEntry.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | 3 | export interface CandleEntry extends Entry { 4 | /** shadow-high value */ 5 | high: number; 6 | 7 | /** shadow-low value */ 8 | low: number; 9 | 10 | /** close value */ 11 | close: number; 12 | 13 | /** open value */ 14 | open: number; 15 | 16 | /** 17 | * Constructor. 18 | * 19 | * @param x The value on the x-axis 20 | * @param shadowH The (shadow) high value 21 | * @param shadowL The (shadow) low value 22 | * @param open The open value 23 | * @param close The close value 24 | */ 25 | // constructor(x, shadowH, shadowL, open, close) { 26 | // this.x = x; 27 | // this.y = (shadowH + shadowL) / 2; 28 | 29 | // this.mShadowHigh = shadowH; 30 | // this.mShadowLow = shadowL; 31 | // this.mOpen = open; 32 | // this.mClose = close; 33 | // } 34 | 35 | /** 36 | * Returns the overall range (difference) between shadow-high and 37 | * shadow-low. 38 | */ 39 | // public getShadowRange() { 40 | // return Math.abs(this.mShadowHigh - this.mShadowLow); 41 | // } 42 | 43 | /** 44 | * Returns the body size (difference between open and close). 45 | */ 46 | // public getBodyRange() { 47 | // return Math.abs(this.mOpen - this.mClose); 48 | // } 49 | 50 | /** 51 | * Returns the upper shadows highest value. 52 | */ 53 | // public getHigh() { 54 | // return this.mShadowHigh; 55 | // } 56 | 57 | // public setHigh(mShadowHigh) { 58 | // this.mShadowHigh = mShadowHigh; 59 | // } 60 | 61 | /** 62 | * Returns the lower shadows lowest value. 63 | */ 64 | // public getLow() { 65 | // return this.mShadowLow; 66 | // } 67 | 68 | // public setLow(mShadowLow) { 69 | // this.mShadowLow = mShadowLow; 70 | // } 71 | 72 | /** 73 | * Returns the bodys close value. 74 | */ 75 | // public getClose() { 76 | // return this.mClose; 77 | // } 78 | 79 | // public setClose(mClose) { 80 | // this.mClose = mClose; 81 | // } 82 | 83 | /** 84 | * Returns the bodys open value. 85 | */ 86 | // public getOpen() { 87 | // return this.mOpen; 88 | // } 89 | 90 | // public setOpen(mOpen) { 91 | // this.mOpen = mOpen; 92 | // } 93 | } 94 | -------------------------------------------------------------------------------- /src/ui-chart/data/Entry.ts: -------------------------------------------------------------------------------- 1 | import { BaseEntry } from './BaseEntry'; 2 | 3 | export interface Entry extends BaseEntry {} 4 | -------------------------------------------------------------------------------- /src/ui-chart/data/LineData.ts: -------------------------------------------------------------------------------- 1 | import { BarLineScatterCandleBubbleData } from './BarLineScatterCandleBubbleData'; 2 | import { ILineDataSet } from '../interfaces/datasets/ILineDataSet'; 3 | import { Entry } from './Entry'; 4 | import { LineDataSet } from './LineDataSet'; 5 | 6 | /** 7 | * Data object that encapsulates all data associated with a LineChart. 8 | * 9 | 10 | */ 11 | export class LineData extends BarLineScatterCandleBubbleData {} 12 | -------------------------------------------------------------------------------- /src/ui-chart/data/LineRadarDataSet.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | import { ILineRadarDataSet } from '../interfaces/datasets/ILineRadarDataSet'; 3 | import { LineScatterCandleRadarDataSet } from './LineScatterCandleRadarDataSet'; 4 | import { Color } from '@nativescript/core/color'; 5 | import { Utils } from '../utils/Utils'; 6 | import { ImageSource } from '@nativescript/core'; 7 | 8 | /** 9 | * Base dataset for line and radar DataSets. 10 | * 11 | 12 | */ 13 | export abstract class LineRadarDataSet extends LineScatterCandleRadarDataSet { 14 | /** 15 | * the color that is used for filling the line surface 16 | */ 17 | fillColor: string | Color = '#8CEAFF'; // rgb(140,234,255) 18 | 19 | /** 20 | * the drawable to be used for filling the line surface 21 | */ 22 | fillDrawable: ImageSource; 23 | 24 | /** 25 | * transparency used for filling line surface 26 | */ 27 | fillAlpha = 85; 28 | 29 | /** 30 | * the width of the drawn data lines 31 | * thinner line === better performance, thicker line === worse performance 32 | */ 33 | lineWidth = 1.5; 34 | 35 | /** 36 | * if true, the data will also be drawn filled 37 | */ 38 | drawFilledEnabled = false; 39 | } 40 | -------------------------------------------------------------------------------- /src/ui-chart/data/LineScatterCandleRadarDataSet.ts: -------------------------------------------------------------------------------- 1 | import { DashPathEffect } from '@nativescript-community/ui-canvas'; 2 | import { ILineScatterCandleRadarDataSet } from '../interfaces/datasets/ILineScatterCandleRadarDataSet'; 3 | import { BarLineScatterCandleBubbleDataSet } from './BarLineScatterCandleBubbleDataSet'; 4 | import { Entry } from './Entry'; 5 | 6 | /** 7 | * Created by Philipp Jahoda on 11/07/15. 8 | */ 9 | export abstract class LineScatterCandleRadarDataSet extends BarLineScatterCandleBubbleDataSet implements ILineScatterCandleRadarDataSet { 10 | /** 11 | * Enables / disables the vertical highlight-indicator. If disabled, the indicator is not drawn. 12 | * @param enabled 13 | */ 14 | drawVerticalHighlightIndicator = true; 15 | /** 16 | * Enables / disables the horizontal highlight-indicator. If disabled, the indicator is not drawn. 17 | * @param enabled 18 | */ 19 | drawHorizontalHighlightIndicator = true; 20 | 21 | /** the width of the highlight indicator lines */ 22 | highlightLineWidth = 0.5; 23 | 24 | /** the path effect for dashed highlight-lines */ 25 | highlightDashPathEffect = null; 26 | 27 | constructor(yVals, label, xProperty?, yProperty?) { 28 | super(yVals, label, xProperty, yProperty); 29 | this.highlightLineWidth = 0.5; 30 | } 31 | 32 | /** 33 | * Enables / disables both vertical and horizontal highlight-indicators. 34 | * @param enabled 35 | */ 36 | public set drawHighlightIndicators(enabled) { 37 | this.drawVerticalHighlightIndicator = enabled; 38 | this.drawHorizontalHighlightIndicator = enabled; 39 | } 40 | 41 | /** 42 | * Enables the highlight-line to be drawn in dashed mode, e.g. like this "- - - - - -" 43 | * 44 | * @param lineLength the length of the line pieces 45 | * @param spaceLength the length of space inbetween the line-pieces 46 | * @param phase offset, in degrees (normally, use 0) 47 | */ 48 | public enableHighlightDashPathEffect(lineLength, spaceLength, phase) { 49 | this.highlightDashPathEffect = new DashPathEffect([lineLength, spaceLength], phase); 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/ui-chart/data/PieData.ts: -------------------------------------------------------------------------------- 1 | import { ChartData } from './ChartData'; 2 | import { Entry } from './Entry'; 3 | import { PieEntry } from './PieEntry'; 4 | import { PieDataSet } from './PieDataSet'; 5 | import { Highlight } from '../highlight/Highlight'; 6 | 7 | /** 8 | * A PieData object can only represent one DataSet. Unlike all other charts, the 9 | * legend labels of the PieChart are created from the x-values array, and not 10 | * from the DataSet labels. Each PieData object can only represent one 11 | * PieDataSet (multiple PieDataSets inside a single PieChart are not possible). 12 | * 13 | 14 | */ 15 | export class PieData extends ChartData { 16 | /** 17 | * Sets the PieDataSet this data object should represent. 18 | * 19 | * @param dataSet 20 | */ 21 | public setDataSet(dataSet: PieDataSet) { 22 | this.mDataSets.splice(0); 23 | this.mDataSets.push(dataSet); 24 | this.notifyDataChanged(); 25 | } 26 | 27 | /** 28 | * Returns the DataSet this PieData object represents. A PieData object can 29 | * only contain one DataSet. 30 | */ 31 | public getDataSet(): PieDataSet { 32 | return this.mDataSets[0]; 33 | } 34 | 35 | /** 36 | * The PieData object can only have one DataSet. Use getDataSet() method instead. 37 | * 38 | * @param index 39 | * @return 40 | */ 41 | public getDataSetByIndex(index): PieDataSet { 42 | return index === 0 ? this.getDataSet() : null; 43 | } 44 | 45 | public getDataSetByLabel(label: string, ignoreCase): PieDataSet { 46 | return ignoreCase ? (label?.toLowerCase() === this.mDataSets[0].label?.toLowerCase() ? this.mDataSets[0] : null) : label === this.mDataSets[0].label ? this.mDataSets[0] : null; 47 | } 48 | 49 | public getEntryForHighlight(highlight: Highlight): Entry { 50 | return this.getDataSet().getEntryForIndex(highlight.x); 51 | } 52 | 53 | /** 54 | * Returns the sum of all values in this PieData object. 55 | */ 56 | public getYValueSum() { 57 | const yKey = this.getDataSet().yProperty; 58 | let sum = 0; 59 | 60 | for (let i = 0; i < this.getDataSet().entryCount; i++) { 61 | sum += this.getDataSet().getEntryForIndex(i)[yKey]; 62 | } 63 | 64 | return sum; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/ui-chart/data/PieDataSet.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core/color'; 2 | import { DataSet } from './DataSet'; 3 | import { PieEntry } from './PieEntry'; 4 | import { IPieDataSet } from '../interfaces/datasets/IPieDataSet'; 5 | import { Utils } from '../utils/Utils'; 6 | 7 | export enum ValuePosition { 8 | INSIDE_SLICE, 9 | OUTSIDE_SLICE 10 | } 11 | export class PieDataSet extends DataSet implements IPieDataSet { 12 | /** 13 | * the space in pixels between the chart-slices, default 0 14 | */ 15 | sliceSpace = 0; 16 | 17 | /** 18 | * When enabled, slice spacing will be 0.0 when the smallest value is going to be 19 | * smaller than the slice spacing itself. 20 | */ 21 | automaticallyDisableSliceSpacing; 22 | 23 | /** 24 | * indicates the selection distance of a pie slice 25 | */ 26 | selectionShift = 18; 27 | 28 | xValuePosition = ValuePosition.INSIDE_SLICE; 29 | yValuePosition = ValuePosition.INSIDE_SLICE; 30 | usingSliceColorAsValueLineColor = false; 31 | /** 32 | * When valuePosition is OutsideSlice, indicates line color 33 | */ 34 | valueLineColor = new Color(0xff000000); 35 | /** 36 | * When valuePosition is OutsideSlice, indicates line width 37 | */ 38 | valueLineWidth = 1.0; 39 | /** 40 | * When valuePosition is OutsideSlice, indicates offset as percentage out of the slice size 41 | */ 42 | valueLinePart1OffsetPercentage = 75; 43 | /** 44 | * When valuePosition is OutsideSlice, indicates length of first half of the line 45 | */ 46 | valueLinePart1Length = 0.3; 47 | /** 48 | * When valuePosition is OutsideSlice, indicates length of second half of the line 49 | */ 50 | valueLinePart2Length = 0.4; 51 | /** 52 | * When valuePosition is OutsideSlice, this allows variable line length 53 | */ 54 | valueLineVariableLength = true; 55 | 56 | constructor(yVals, label, yProperty?) { 57 | super(yVals, label, null, yProperty); 58 | this.init(); 59 | } 60 | 61 | protected calcMinMaxForEntry(e?: PieEntry, index?: number) { 62 | if (!e) return; 63 | 64 | this.calcMinMaxY(e, index); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/ui-chart/data/PieEntry.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | 3 | /** 4 | 5 | */ 6 | export interface PieEntry extends Entry { 7 | label: string; 8 | } 9 | -------------------------------------------------------------------------------- /src/ui-chart/data/RadarData.ts: -------------------------------------------------------------------------------- 1 | import { Highlight } from '../highlight/Highlight'; 2 | import { ChartData } from './ChartData'; 3 | import { RadarDataSet } from './RadarDataSet'; 4 | import { RadarEntry } from './RadarEntry'; 5 | 6 | /** 7 | * Data container for the RadarChart. 8 | * 9 | 10 | */ 11 | export class RadarData extends ChartData { 12 | /** 13 | * Sets the labels that should be drawn around the RadarChart at the end of each web line. 14 | */ 15 | labels: string[]; 16 | 17 | constructor(dataSets: RadarDataSet[]) { 18 | super(dataSets); 19 | } 20 | 21 | public getEntryForHighlight(highlight: Highlight) { 22 | return this.getDataSetByIndex(highlight.dataSetIndex).getEntryForIndex(highlight.x); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/ui-chart/data/RadarDataSet.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core'; 2 | import { IRadarDataSet } from '../interfaces/datasets/IRadarDataSet'; 3 | import { RadarEntry } from './RadarEntry'; 4 | import { LineRadarDataSet } from './LineRadarDataSet'; 5 | import { ColorTemplate } from '../utils/ColorTemplate'; 6 | 7 | export class RadarDataSet extends LineRadarDataSet implements IRadarDataSet { 8 | /// flag indicating whether highlight circle should be drawn or not 9 | drawHighlightCircleEnabled = false; 10 | 11 | highlightCircleFillColor = new Color('white'); 12 | 13 | /// The stroke color for highlight circle. 14 | /// If Utils.COLOR_NONE, the color of the dataset is taken. 15 | highlightCircleStrokeColor: string | Color = ColorTemplate.COLOR_NONE; 16 | 17 | highlightCircleStrokeAlpha = 0.3 * 255; 18 | highlightCircleInnerRadius = 3.0; 19 | highlightCircleOuterRadius = 4.0; 20 | highlightCircleStrokeWidth = 2.0; 21 | 22 | constructor(yVals: RadarEntry, label: string, yProperty?) { 23 | super(yVals, label, null, yProperty); 24 | this.init(); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/ui-chart/data/RadarEntry.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from './Entry'; 2 | 3 | export interface RadarEntry extends Entry {} 4 | -------------------------------------------------------------------------------- /src/ui-chart/data/ScatterData.ts: -------------------------------------------------------------------------------- 1 | import { BarLineScatterCandleBubbleData } from './BarLineScatterCandleBubbleData'; 2 | import { ScatterDataSet } from './ScatterDataSet'; 3 | import { Entry } from './Entry'; 4 | 5 | export class ScatterData extends BarLineScatterCandleBubbleData { 6 | /** 7 | * Returns the maximum shape-size across all DataSets. 8 | */ 9 | public get greatestShapeSize() { 10 | let max = 0; 11 | for (let index = 0; index < this.mDataSets.length; index++) { 12 | const size = this.mDataSets[index].scatterShapeSize; 13 | 14 | if (size > max) { 15 | max = size; 16 | } 17 | } 18 | return max; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/ui-chart/data/ScatterDataSet.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core'; 2 | import { ScatterShape } from '../charts/ScatterChart'; 3 | import { IScatterDataSet } from '../interfaces/datasets/IScatterDataSet'; 4 | import { ChevronDownShapeRenderer } from '../renderer/scatter/ChevronDownShapeRenderer'; 5 | import { ChevronUpShapeRenderer } from '../renderer/scatter/ChevronUpShapeRenderer'; 6 | import { CircleShapeRenderer } from '../renderer/scatter/CircleShapeRenderer'; 7 | import { CrossShapeRenderer } from '../renderer/scatter/CrossShapeRenderer'; 8 | import { IShapeRenderer } from '../renderer/scatter/IShapeRenderer'; 9 | import { SquareShapeRenderer } from '../renderer/scatter/SquareShapeRenderer'; 10 | import { TriangleShapeRenderer } from '../renderer/scatter/TriangleShapeRenderer'; 11 | import { XShapeRenderer } from '../renderer/scatter/XShapeRenderer'; 12 | import { ColorTemplate } from '../utils/ColorTemplate'; 13 | import { Entry } from './Entry'; 14 | import { LineScatterCandleRadarDataSet } from './LineScatterCandleRadarDataSet'; 15 | 16 | export class ScatterDataSet extends LineScatterCandleRadarDataSet implements IScatterDataSet { 17 | /** 18 | * the size the scattershape will have, in density pixels 19 | */ 20 | scatterShapeSize = 15; 21 | 22 | /** 23 | * Sets the ScatterShape this DataSet should be drawn with. This will search for an available IShapeRenderer and set this 24 | * renderer for the DataSet. 25 | */ 26 | public set scatterShape(shape: ScatterShape) { 27 | this.shapeRenderer = ScatterDataSet.getRendererForShape(shape); 28 | } 29 | 30 | /** 31 | * Renderer responsible for rendering this DataSet, default: square 32 | */ 33 | shapeRenderer = new SquareShapeRenderer(); 34 | 35 | /** 36 | * The radius of the hole in the shape (applies to Square, Circle and Triangle) 37 | * - default: 0.0 38 | */ 39 | scatterShapeHoleRadius = 0; 40 | 41 | /** 42 | * Color for the hole in the shape. 43 | * Setting to `ColorTemplate.COLOR_NONE` will behave as transparent. 44 | * - default: ColorTemplate.COLOR_NONE 45 | */ 46 | scatterShapeHoleColor: string | Color = ColorTemplate.COLOR_NONE; 47 | 48 | constructor(yVals, label, xProperty?, yProperty?) { 49 | super(yVals, label, xProperty, yProperty); 50 | this.init(); 51 | } 52 | public static getRendererForShape(shape: ScatterShape) { 53 | switch (shape) { 54 | case ScatterShape.SQUARE: 55 | return new SquareShapeRenderer(); 56 | case ScatterShape.CIRCLE: 57 | return new CircleShapeRenderer(); 58 | case ScatterShape.TRIANGLE: 59 | return new TriangleShapeRenderer(); 60 | case ScatterShape.CROSS: 61 | return new CrossShapeRenderer(); 62 | case ScatterShape.X: 63 | return new XShapeRenderer(); 64 | case ScatterShape.CHEVRON_UP: 65 | return new ChevronUpShapeRenderer(); 66 | case ScatterShape.CHEVRON_DOWN: 67 | return new ChevronDownShapeRenderer(); 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/ui-chart/data/filter/Approximator.java: -------------------------------------------------------------------------------- 1 | 2 | package com.github.mikephil.charting.data.filter; 3 | 4 | import android.annotation.TargetApi; 5 | import android.os.Build; 6 | 7 | import java.util.Arrays; 8 | 9 | /** 10 | * Implemented according to Wiki-Pseudocode {@link} 11 | * http://en.wikipedia.org/wiki/Ramer�Douglas�Peucker_algorithm 12 | * 13 | * @author Philipp Baldauf & Phliipp Jahoda 14 | */ 15 | public class Approximator { 16 | 17 | @TargetApi(Build.VERSION_CODES.GINGERBREAD) 18 | public float[] reduceWithDouglasPeucker(float[] points, let tolerance) { 19 | 20 | let greatestIndex = 0; 21 | let greatestDistance = 0; 22 | 23 | Line line = new Line(points[0], points[1], points[points.length - 2], points[points.length - 1]); 24 | 25 | for (let i = 2; i < points.length - 2; i += 2) { 26 | 27 | let distance = line.distance(points[i], points[i + 1]); 28 | 29 | if (distance > greatestDistance) { 30 | greatestDistance = distance; 31 | greatestIndex = i; 32 | } 33 | } 34 | 35 | if (greatestDistance > tolerance) { 36 | 37 | float[] reduced1 = reduceWithDouglasPeucker(Arrays.copyOfRange(points, 0, greatestIndex + 2), tolerance); 38 | float[] reduced2 = reduceWithDouglasPeucker(Arrays.copyOfRange(points, greatestIndex, points.length), 39 | tolerance); 40 | 41 | float[] result1 = reduced1; 42 | float[] result2 = Arrays.copyOfRange(reduced2, 2, reduced2.length); 43 | 44 | return concat(result1, result2); 45 | } else { 46 | return line.getPoints(); 47 | } 48 | } 49 | 50 | /** 51 | * Combine arrays. 52 | * 53 | * @param arrays 54 | * @return 55 | */ 56 | float[] concat(float[]... arrays) { 57 | let length = 0; 58 | for (float[] array : arrays) { 59 | length += array.length; 60 | } 61 | float[] result = new float[length]; 62 | let pos = 0; 63 | for (float[] array : arrays) { 64 | for (let element : array) { 65 | result[pos] = element; 66 | pos++; 67 | } 68 | } 69 | return result; 70 | } 71 | 72 | private class Line { 73 | 74 | private float[] points; 75 | 76 | private let sxey; 77 | private let exsy; 78 | 79 | private let dx; 80 | private let dy; 81 | 82 | private let length; 83 | 84 | public Line(let x1, let y1, let x2, let y2) { 85 | dx = x1 - x2; 86 | dy = y1 - y2; 87 | sxey = x1 * y2; 88 | exsy = x2 * y1; 89 | length = Math.sqrt(dx * dx + dy * dy); 90 | 91 | points = new float[]{x1, y1, x2, y2}; 92 | } 93 | 94 | public distance(let x, let y) { 95 | return Math.abs(dy * x - dx * y + sxey - exsy) / length; 96 | } 97 | 98 | public float[] getPoints() { 99 | return points; 100 | } 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/DefaultAxisValueFormatter.ts: -------------------------------------------------------------------------------- 1 | import { ValueFormatter } from './ValueFormatter'; 2 | import format from 'number-format.js'; 3 | 4 | /** 5 | * Created by philipp on 02/06/16. 6 | */ 7 | export class DefaultAxisValueFormatter extends ValueFormatter { 8 | /** 9 | * decimalformat for formatting 10 | */ 11 | protected mFormat: string; 12 | 13 | /** 14 | * the number of decimal digits this formatter uses 15 | */ 16 | decimalDigits; 17 | 18 | /** 19 | * Constructor that specifies to how many digits the value should be 20 | * formatted. 21 | * 22 | * @param digits 23 | */ 24 | constructor(digits) { 25 | super(); 26 | this.setup(digits); 27 | } 28 | 29 | setup(digits) { 30 | this.decimalDigits = digits; 31 | 32 | let b = ''; 33 | for (let i = 0; i < digits; i++) { 34 | b += '0'; 35 | } 36 | // Requires decimal separator in order to avoid zero format issues 37 | this.mFormat = '###,###,###,##0.' + b; 38 | } 39 | 40 | public getFormattedValue(value) { 41 | return format(this.mFormat, value); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/DefaultFillFormatter.ts: -------------------------------------------------------------------------------- 1 | import { IFillFormatter } from './IFillFormatter'; 2 | import { ILineDataSet } from '../interfaces/datasets/ILineDataSet'; 3 | import { LineDataProvider } from '../interfaces/dataprovider/LineDataProvider'; 4 | 5 | export class DefaultFillFormatter implements IFillFormatter { 6 | public getFillLinePosition(dataSet: ILineDataSet, dataProvider: LineDataProvider) { 7 | let fillMin = 0; 8 | const chartMaxY = dataProvider.yChartMax; 9 | const chartMinY = dataProvider.yChartMin; 10 | 11 | const data = dataProvider.lineData; 12 | 13 | if (dataSet.yMax > 0 && dataSet.yMin < 0) { 14 | fillMin = 0; 15 | } else { 16 | let max, min; 17 | 18 | if (data.yMax > 0) { 19 | max = 0; 20 | } else { 21 | max = chartMaxY; 22 | } 23 | if (data.yMin < 0) { 24 | min = 0; 25 | } else { 26 | min = chartMinY; 27 | } 28 | 29 | fillMin = dataSet.yMin >= 0 ? min : max; 30 | } 31 | 32 | return fillMin; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/DefaultValueFormatter.ts: -------------------------------------------------------------------------------- 1 | import { DefaultAxisValueFormatter } from './DefaultAxisValueFormatter'; 2 | 3 | export class DefaultValueFormatter extends DefaultAxisValueFormatter {} 4 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/IAxisValueFormatter.ts: -------------------------------------------------------------------------------- 1 | import { AxisBase } from '../components/AxisBase'; 2 | 3 | /** 4 | * Created by Philipp Jahoda on 20/09/15. 5 | * Custom formatter interface that allows formatting of 6 | * axis labels before they are being drawn. 7 | * 8 | * Extend {@link ValueFormatter} instead 9 | */ 10 | export interface IAxisValueFormatter { 11 | /** 12 | * Called when a value from an axis is to be formatted 13 | * before being drawn. For performance reasons, avoid excessive calculations 14 | * and memory allocations inside this method. 15 | * 16 | * @param value the value to be formatted 17 | * @param axis the axis the value belongs to 18 | * @param viewPortHandler the viewPortHandler 19 | * @return 20 | * 21 | * Extend {@link ValueFormatter} and use {@link ValueFormatter#getAxisLabel(float, AxisBase)} 22 | */ 23 | getAxisLabel(value, axis: AxisBase): string; 24 | } 25 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/IFillFormatter.ts: -------------------------------------------------------------------------------- 1 | import { ILineDataSet } from '../interfaces/datasets/ILineDataSet'; 2 | import { LineDataProvider } from '../interfaces/dataprovider/LineDataProvider'; 3 | import { Path } from '@nativescript-community/ui-canvas'; 4 | 5 | /** 6 | * Interface for providing a custom logic to where the filling line of a LineDataSet 7 | * should end. This of course only works if setFillEnabled(...) is set to true. 8 | * 9 | 10 | */ 11 | export interface IFillFormatter { 12 | /** 13 | * Returns the vertical (y-axis) position where the filled-line of the 14 | * LineDataSet should end. 15 | * 16 | * @param dataSet the ILineDataSet that is currently drawn 17 | * @param dataProvider 18 | * @return 19 | */ 20 | getFillLinePosition(dataSet: ILineDataSet, dataProvider: LineDataProvider); 21 | /** 22 | * update the fill line Path for the dataset 23 | * 24 | * @param dataSet the ILineDataSet that is currently drawn 25 | * @param dataProvider 26 | * @param linePath 27 | * @param lastLinePath 28 | * @return 29 | */ 30 | getFillLinePath?(dataSet: ILineDataSet, dataProvider: LineDataProvider, linePath: Path, lastLinePath: Path); 31 | } 32 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/IValueFormatter.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from '../data/Entry'; 2 | 3 | /** 4 | * Interface to format all values before they are drawn as labels. 5 | * 6 | 7 | * Extend {@link ValueFormatter} instead 8 | */ 9 | export interface IValueFormatter { 10 | /** 11 | * Called when a value (from labels inside the chart) is formatted 12 | * before being drawn. For performance reasons, avoid excessive calculations 13 | * and memory allocations inside this method. 14 | * 15 | * @param value the value to be formatted 16 | * @param entry the entry the value belongs to - in e.g. BarChart, this is of class BarEntry 17 | * @param index index of the drawn value 18 | * @param count total number of values drawn (useful to draw first or last) 19 | * @param dataSetIndex the index of the DataSet the entry in focus belongs to 20 | * @param viewPortHandler provides information about the current chart state (scale, translation, ...) 21 | * @return the formatted label ready for being drawn 22 | * 23 | * @deprecated Extend {@link ValueFormatter} and override an appropriate method 24 | */ 25 | getFormattedValue(value: number, entry: Entry, index, count, dataSetIndex, viewPortHandler): string; 26 | } 27 | -------------------------------------------------------------------------------- /src/ui-chart/formatter/ValueFormatter.ts: -------------------------------------------------------------------------------- 1 | import { IAxisValueFormatter } from './IAxisValueFormatter'; 2 | import { IValueFormatter } from './IValueFormatter'; 3 | import { AxisBase } from '../components/AxisBase'; 4 | import { BarDataSet } from '../data/BarDataSet'; 5 | import { BarEntry } from '../data/BarEntry'; 6 | import { Entry } from '../data/Entry'; 7 | import { PieEntry } from '../data/PieEntry'; 8 | import { RadarEntry } from '../data/RadarEntry'; 9 | import { BubbleEntry } from '../data/BubbleEntry'; 10 | import { CandleEntry } from '../data/CandleEntry'; 11 | import { BaseEntry } from '../data/BaseEntry'; 12 | 13 | /** 14 | * Class to format all values before they are drawn as labels. 15 | */ 16 | export abstract class ValueFormatter implements IAxisValueFormatter, IValueFormatter { 17 | /** 18 | * Called when drawing any label, used to change numbers into formatted strings. 19 | * 20 | * @param value float to be formatted 21 | * @return formatted string label 22 | */ 23 | public getFormattedValue(value: number, entry?: BaseEntry) { 24 | return value + ''; 25 | } 26 | 27 | /** 28 | * Used to draw axis labels, calls {@link #getFormattedValue} by default. 29 | * 30 | * @param value float to be formatted 31 | * @param axis axis being labeled 32 | * @return formatted string label 33 | */ 34 | public getAxisLabel(value: number, axis: AxisBase) { 35 | return this.getFormattedValue(value); 36 | } 37 | 38 | /** 39 | * Used to draw bar labels, calls {@link #getFormattedValue} by default. 40 | * 41 | * @param value current value to be formatted 42 | * @return formatted string label 43 | */ 44 | public getBarLabel(value, entry: BarEntry) { 45 | return this.getFormattedValue(value, entry); 46 | } 47 | 48 | /** 49 | * Used to draw stacked bar labels, calls {@link #getFormattedValue} by default. 50 | * 51 | * @param value current value to be formatted 52 | * @param entry stacked entry being labeled, contains all Y values 53 | * @return formatted string label 54 | */ 55 | public getBarStackedLabel(value, entry: BarEntry) { 56 | return this.getFormattedValue(value, entry); 57 | } 58 | 59 | /** 60 | * Used to draw line and scatter labels, calls {@link #getFormattedValue} by default. 61 | * 62 | * @param entry point being labeled, contains X value 63 | * @return formatted string label 64 | */ 65 | public getPointLabel(value, entry: Entry) { 66 | return this.getFormattedValue(value, entry); 67 | } 68 | 69 | /** 70 | * Used to draw pie value labels, calls {@link #getFormattedValue} by default. 71 | * 72 | * @param value float to be formatted, may have been converted to percentage 73 | * @param entry slice being labeled, contains original, non-percentage Y value 74 | * @return formatted string label 75 | */ 76 | public getPieLabel(value, entry: PieEntry) { 77 | return this.getFormattedValue(value, entry); 78 | } 79 | 80 | /** 81 | * Used to draw radar value labels, calls {@link #getFormattedValue} by default. 82 | * 83 | * @param entry entry being labeled 84 | * @return formatted string label 85 | */ 86 | public getRadarLabel(value, entry: RadarEntry) { 87 | return this.getFormattedValue(value, entry); 88 | } 89 | 90 | /** 91 | * Used to draw bubble size labels, calls {@link #getFormattedValue} by default. 92 | * 93 | * @param entry bubble being labeled, also contains X and Y values 94 | * @return formatted string label 95 | */ 96 | public getBubbleLabel(value, entry: BubbleEntry) { 97 | return this.getFormattedValue(value, entry); 98 | } 99 | 100 | /** 101 | * Used to draw high labels, calls {@link #getFormattedValue} by default. 102 | * 103 | * @param entry candlestick being labeled 104 | * @return formatted string label 105 | */ 106 | public getCandleLabel(value, entry: CandleEntry) { 107 | return this.getFormattedValue(value, entry); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/BarHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { ChartHighlighter } from './ChartHighlighter'; 2 | import { Highlight } from './Highlight'; 3 | import { BarData } from '../data/BarData'; 4 | import { BarDataProvider } from '../interfaces/dataprovider/BarDataProvider'; 5 | import { IBarDataSet } from '../interfaces/datasets/IBarDataSet'; 6 | 7 | export class BarHighlighter extends ChartHighlighter { 8 | constructor(chart: BarDataProvider) { 9 | super(chart); 10 | } 11 | 12 | protected getChartData() { 13 | return this.mChart.barData; 14 | } 15 | 16 | public getHighlight(x: number, y: number) { 17 | const pos = this.getValsForTouch(x, y); 18 | const xVal = pos.x; 19 | 20 | return this.getHighlightForX(xVal, x, y).map((high) => { 21 | const barData = this.getChartData(); 22 | 23 | const set = barData.getDataSetByIndex(high.dataSetIndex); 24 | if (set.stacked) { 25 | return this.getStackedHighlight(high, set, x, y, xVal, pos.y); 26 | } 27 | 28 | // MPPointD.recycleInstance(pos); 29 | 30 | return high; 31 | }); 32 | } 33 | 34 | /** 35 | * This method creates the Highlight object that also indicates which value of a stacked BarEntry has been 36 | * selected. 37 | * 38 | * @param high the Highlight to work with looking for stacked values 39 | * @param set 40 | * @param xVal 41 | * @param yVal 42 | * @return 43 | */ 44 | public getStackedHighlight(high: Highlight, set: IBarDataSet, touchX, touchY, xVal, yVal): Highlight { 45 | const { entry, index } = set.getEntryAndIndexForXValue(xVal, yVal); 46 | if (!entry) { 47 | return null; 48 | } 49 | 50 | // not stacked 51 | if (!entry.yVals) { 52 | return high; 53 | } 54 | 55 | const ranges = entry.ranges; 56 | if (ranges.length > 0) { 57 | const yKey = set.yProperty; 58 | const stackIndex = this.getClosestStackIndex(ranges, yVal); 59 | const pixels = this.mChart.getTransformer(set.axisDependency).getPixelForValues(high.x, ranges[stackIndex][1]); 60 | 61 | //MPPointD.recycleInstance(pixels); 62 | 63 | return { 64 | x: set.getEntryXValue(entry, index), 65 | y: entry[yKey], 66 | xTouchPx: touchX, 67 | yTouchPx: touchY, 68 | xPx: pixels.x, 69 | yPx: pixels.y, 70 | dataSetIndex: high.dataSetIndex, 71 | stackIndex, 72 | axis: high.axis 73 | }; 74 | } 75 | 76 | return null; 77 | } 78 | 79 | /** 80 | * Returns the index of the closest value inside the values array / ranges (stacked barchart) to the value 81 | * given as 82 | * a parameter. 83 | * 84 | * @param ranges 85 | * @param value 86 | * @return 87 | */ 88 | protected getClosestStackIndex(ranges: any[], value): number { 89 | if (!ranges || ranges.length === 0) { 90 | return 0; 91 | } 92 | 93 | for (let i = 0; i < ranges.length; i++) { 94 | if (ranges[i].includes(value)) { 95 | return i; 96 | } 97 | } 98 | 99 | const length = Math.max(ranges.length - 1, 0); 100 | return value > ranges[length][1] ? length : 0; 101 | } 102 | 103 | protected getDistance(x1, y1, x2, y2): number { 104 | return Math.abs(x1 - x2); 105 | } 106 | 107 | protected getData(): BarData { 108 | return this.mChart.barData; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/CombinedHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { ChartHighlighter } from './ChartHighlighter'; 2 | import { BarHighlighter } from './BarHighlighter'; 3 | import { IHighlighter } from './IHighlighter'; 4 | import { CombinedDataProvider } from '../interfaces/dataprovider/CombinedDataProvider'; 5 | import { BarDataProvider } from '../interfaces/dataprovider/BarDataProvider'; 6 | import { BarData } from '../data/BarData'; 7 | import { Rounding } from '../data/DataSet'; 8 | /** 9 | * Created by Philipp Jahoda on 12/09/15. 10 | */ 11 | export class CombinedHighlighter extends ChartHighlighter implements IHighlighter { 12 | /** 13 | * bar highlighter for supporting stacked highlighting 14 | */ 15 | protected barHighlighter: BarHighlighter; 16 | 17 | constructor(chart: CombinedDataProvider, barChart: BarDataProvider) { 18 | super(chart); 19 | 20 | // if there is BarData, create a BarHighlighter 21 | this.barHighlighter = !barChart.barData ? null : new BarHighlighter(barChart); 22 | } 23 | 24 | protected getChartData() { 25 | return this.mChart.combinedData; 26 | } 27 | 28 | public getHighlightsAtXValue(xVal, x?, y?) { 29 | this.mHighlightBuffer = []; 30 | const data = this.getChartData(); 31 | 32 | if (!data) return this.mHighlightBuffer; 33 | 34 | const dataObjects = data.datas; 35 | const datasArray = data.datasArray; 36 | const keys = Object.keys(dataObjects); 37 | 38 | for (let i = 0; i < keys.length; i++) { 39 | const key = keys[i]; 40 | const dataObject = dataObjects[key]; 41 | if (!dataObject) { 42 | continue; 43 | } 44 | 45 | // in case of BarData, let the BarHighlighter take over 46 | if (this.barHighlighter && dataObject instanceof BarData && x !== undefined) { 47 | const high = this.barHighlighter.getHighlight(x, y); 48 | 49 | if (high) { 50 | this.mHighlightBuffer.push( 51 | ...this.barHighlighter.getHighlight(x, y).map((h) => { 52 | h.dataIndex = datasArray.indexOf(dataObject); 53 | h.dataType = key; 54 | return h; 55 | }) 56 | ); 57 | } 58 | } else { 59 | for (let j = 0, dataSetCount = dataObject.dataSetCount; j < dataSetCount; j++) { 60 | const dataSet = dataObject.getDataSetByIndex(j); 61 | 62 | // don't include datasets that cannot be highlighted 63 | if (!dataSet.highlightEnabled) continue; 64 | 65 | this.mHighlightBuffer.push( 66 | ...this.buildHighlights(dataSet, j, x, y, xVal, Rounding.CLOSEST).map((h) => { 67 | h.dataIndex = datasArray.indexOf(dataObject); 68 | h.dataType = key; 69 | return h; 70 | }) 71 | ); 72 | } 73 | } 74 | } 75 | 76 | return this.mHighlightBuffer; 77 | } 78 | 79 | // protected Highlight getClosest(let x, let y, Highlight... highs) { 80 | // 81 | // Highlight closest = null; 82 | // let minDistance = Infinity; 83 | // 84 | // for (Highlight high : highs) { 85 | // 86 | // if (high === null) 87 | // continue; 88 | // 89 | // let tempDistance = getDistance(x, y, high.getXPx(), high.getYPx()); 90 | // 91 | // if (tempDistance < minDistance) { 92 | // minDistance = tempDistance; 93 | // closest = high; 94 | // } 95 | // } 96 | // 97 | // return closest; 98 | // } 99 | } 100 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/Highlight.ts: -------------------------------------------------------------------------------- 1 | import { AxisDependency } from '../components/YAxis'; 2 | import { Entry } from '../data/Entry'; 3 | 4 | /** 5 | * Contains information needed to determine the highlighted value. 6 | * 7 | 8 | */ 9 | export class Highlight { 10 | /** 11 | * the x-value of the highlighted value 12 | */ 13 | x: number; 14 | 15 | /** 16 | * the y-value of the highlighted value 17 | */ 18 | y: number; 19 | 20 | /** 21 | * the x-pixel of the highlight 22 | */ 23 | xPx?: number; 24 | 25 | /** 26 | * the y-pixel of the highlight 27 | */ 28 | yPx?: number; 29 | 30 | /** 31 | * the x-pixel of the touch corresponding to the highlight 32 | */ 33 | xTouchPx?: number; 34 | 35 | /** 36 | * the y-pixel of the touch corresponding to the highlight 37 | */ 38 | yTouchPx?: number; 39 | 40 | /** 41 | * the index of the data object - in case it refers to more than one 42 | */ 43 | dataIndex?: number; 44 | 45 | /** 46 | * the type of the data object if within CombinedChart (lineData, barData, scatterData, bubbleData, candleData) 47 | */ 48 | dataType?: string; 49 | 50 | /** 51 | * the index of the dataset the highlighted value is in 52 | */ 53 | dataSetIndex: number; 54 | 55 | /** 56 | * index which value of a stacked bar entry is highlighted, default -1 57 | */ 58 | stackIndex?: number; 59 | 60 | /** 61 | * the axis the highlighted value belongs to 62 | */ 63 | axis?: AxisDependency; 64 | 65 | /** 66 | * the x-position (pixels) on which this highlight object was last drawn 67 | */ 68 | drawX?: number; 69 | 70 | /** 71 | * the y-position (pixels) on which this highlight object was last drawn 72 | */ 73 | drawY?: number; 74 | 75 | /** 76 | * the associated entry 77 | */ 78 | entry?: T; 79 | 80 | /** 81 | * the index of the dataset the highlighted value is in 82 | */ 83 | entryIndex?: number; 84 | } 85 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/HorizontalBarHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { BarHighlighter } from './BarHighlighter'; 2 | import { Highlight } from './Highlight'; 3 | import { BarDataProvider } from '../interfaces/dataprovider/BarDataProvider'; 4 | import { IBarDataSet } from '../interfaces/datasets/IBarDataSet'; 5 | 6 | export class HorizontalBarHighlighter extends BarHighlighter { 7 | constructor(chart: BarDataProvider) { 8 | super(chart); 9 | } 10 | 11 | public getHighlight(x: number, y: number) { 12 | const pos = this.getValsForTouch(x, y); 13 | const barData = this.mChart.barData; 14 | return this.getHighlightForX(pos.y, y, x).map((h) => { 15 | const set = barData.getDataSetByIndex(h.dataSetIndex); 16 | if (set.stacked) { 17 | return this.getStackedHighlight(h, set, x, y, pos.y, pos.x); 18 | } 19 | return h; 20 | }); 21 | } 22 | 23 | protected buildHighlights(set: IBarDataSet, dataSetIndex, xVal, rounding) { 24 | const yKey = set.yProperty; 25 | const highlights: Highlight[] = []; 26 | 27 | //noinspection unchecked 28 | let entries = set.getEntriesAndIndexesForXValue(xVal); 29 | if (entries.length === 0) { 30 | // Try to find closest x-value and take all entries for that x-value 31 | const closest = set.getEntryAndIndexForXValue(xVal, NaN, rounding); 32 | if (closest) { 33 | //noinspection unchecked 34 | entries = set.getEntriesAndIndexesForXValue(set.getEntryXValue(closest.entry, closest.index)); 35 | } 36 | } 37 | 38 | if (entries.length === 0) { 39 | return highlights; 40 | } 41 | 42 | for (const r of entries) { 43 | const e = r.entry; 44 | const xVal = set.getEntryXValue(e, r.index); 45 | const pixels = this.mChart.getTransformer(set.axisDependency).getPixelForValues(e[yKey], xVal); 46 | 47 | highlights.push({ 48 | entry: e, 49 | entryIndex: r.index, 50 | x: xVal, 51 | y: e[yKey], 52 | xPx: pixels.x, 53 | yPx: pixels.y, 54 | dataSetIndex, 55 | axis: set.axisDependency 56 | }); 57 | } 58 | 59 | return highlights; 60 | } 61 | 62 | protected getDistance(x1, y1, x2, y2): number { 63 | return Math.abs(y1 - y2); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/IHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { Highlight } from './Highlight'; 2 | 3 | /** 4 | * Created by philipp on 10/06/16. 5 | */ 6 | export interface IHighlighter { 7 | /** 8 | * Returns a Highlight object corresponding to the given x- and y- touch positions in pixels. 9 | * 10 | * @param x 11 | * @param y 12 | * @return 13 | */ 14 | getHighlight(x, y): Highlight[]; 15 | getHighlightsAtXValue(xVal, x?, y?): Highlight[]; 16 | } 17 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/PieHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { Highlight } from './Highlight'; 2 | import { PieRadarHighlighter } from './PieRadarHighlighter'; 3 | import { PieChart } from '../charts/PieChart'; 4 | import { PieEntry } from '../data/PieEntry'; 5 | import { PieDataSet } from '../data/PieDataSet'; 6 | 7 | export class PieHighlighter extends PieRadarHighlighter { 8 | constructor(chart: PieChart) { 9 | super(chart); 10 | } 11 | 12 | protected getClosestHighlight(index, x: number, y: number): Highlight { 13 | const set = this.mChart.data.getDataSet(); 14 | const entry = set.getEntryForIndex(index); 15 | const yProperty = set.yProperty; 16 | 17 | return { 18 | entry, 19 | x: index, 20 | y: entry[yProperty], 21 | xPx: x, 22 | yPx: y, 23 | dataSetIndex: 0, 24 | axis: set.axisDependency 25 | }; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/PieRadarHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { Highlight } from './Highlight'; 2 | import { IHighlighter } from './IHighlighter'; 3 | import { PieRadarChartBase } from '../charts/PieRadarChartBase'; 4 | import { Entry } from '../data/Entry'; 5 | import { DataSet } from '../data/DataSet'; 6 | import { ChartData } from '../data/ChartData'; 7 | 8 | export abstract class PieRadarHighlighter, T extends PieRadarChartBase, ChartData>> implements IHighlighter { 9 | protected mChart: T; 10 | 11 | /** 12 | * buffer for storing previously highlighted values 13 | */ 14 | protected mHighlightBuffer: Highlight[] = []; 15 | 16 | constructor(chart: T) { 17 | this.mChart = chart; 18 | } 19 | getHighlightsAtXValue(xVal, x?, y?): Highlight[] { 20 | // not implemented 21 | return null; 22 | } 23 | 24 | public getHighlight(x: number, y: number) { 25 | const touchDistanceToCenter = this.mChart.distanceToCenter(x, y); 26 | 27 | // Check if a slice was touched 28 | if (touchDistanceToCenter > this.mChart.radius) { 29 | // if no slice was touched, highlight nothing 30 | return null; 31 | } 32 | 33 | let angle = this.mChart.getAngleForPoint(x, y); 34 | 35 | // detect PieChart while preventing circular dep 36 | if (!this.mChart['mCircleBox']) { 37 | angle /= this.mChart.animator.phaseY; 38 | } 39 | 40 | const index = this.mChart.getIndexForAngle(angle); 41 | 42 | // check if the index could be found 43 | if (index < 0 || index >= this.mChart.data.maxEntryCountSet.entryCount) { 44 | return null; 45 | } 46 | return [this.getClosestHighlight(index, x, y)]; 47 | } 48 | 49 | /** 50 | * Returns the closest Highlight object of the given objects based on the touch position inside the chart. 51 | * 52 | * @param index 53 | * @param x 54 | * @param y 55 | * @return 56 | */ 57 | protected abstract getClosestHighlight(index, x: number, y: number): Highlight; 58 | } 59 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/RadarHighlighter.ts: -------------------------------------------------------------------------------- 1 | import { RadarChart } from '../charts/RadarChart'; 2 | import { RadarDataSet } from '../data/RadarDataSet'; 3 | import { RadarEntry } from '../data/RadarEntry'; 4 | import { MPPointF } from '../utils/MPPointF'; 5 | import { Utils } from '../utils/Utils'; 6 | import { PieRadarHighlighter } from './PieRadarHighlighter'; 7 | 8 | /** 9 | * Created by philipp on 12/06/16. 10 | */ 11 | export class RadarHighlighter extends PieRadarHighlighter { 12 | protected getClosestHighlight(index: number, x: number, y: number) { 13 | const highlights = this.getHighlightsAtIndex(index); 14 | 15 | const distanceToCenter = this.mChart.distanceToCenter(x, y) / this.mChart.factor; 16 | 17 | let closest = null; 18 | let distance = Infinity; 19 | 20 | for (let i = 0; i < highlights.length; i++) { 21 | const high = highlights[i]; 22 | // const set = this.mChart.data.getDataSetByIndex(high.dataSetIndex); 23 | // const yProperty = set.yProperty; 24 | const cdistance = Math.abs(high.y - distanceToCenter); 25 | if (cdistance < distance) { 26 | closest = high; 27 | distance = cdistance; 28 | } 29 | } 30 | 31 | return closest; 32 | } 33 | /** 34 | * Returns an array of Highlight objects for the given index. The Highlight 35 | * objects give information about the value at the selected index and the 36 | * DataSet it belongs to. INFORMATION: This method does calculations at 37 | * runtime. Do not over-use in performance critical situations. 38 | * 39 | * @param index 40 | * @return 41 | */ 42 | protected getHighlightsAtIndex(index) { 43 | this.mHighlightBuffer = []; 44 | 45 | const phaseX = this.mChart.animator.phaseX; 46 | const phaseY = this.mChart.animator.phaseY; 47 | const sliceangle = this.mChart.sliceAngle; 48 | const factor = this.mChart.factor; 49 | 50 | const pOut: MPPointF = { x: 0, y: 0 }; 51 | for (let i = 0; i < this.mChart.data.dataSetCount; i++) { 52 | const dataSet = this.mChart.data.getDataSetByIndex(i); 53 | const yKey = dataSet.yProperty; 54 | 55 | const entry = dataSet.getEntryForIndex(index); 56 | 57 | const y = entry[yKey] - this.mChart.yChartMin; 58 | 59 | Utils.getPosition(this.mChart.centerOffsets, y * factor * phaseY, sliceangle * index * phaseX + this.mChart.rotationAngle, pOut); 60 | 61 | this.mHighlightBuffer.push({ 62 | entry, 63 | x: index, 64 | y: entry[yKey], 65 | xPx: pOut.x, 66 | yPx: pOut.y, 67 | dataSetIndex: i, 68 | axis: dataSet.axisDependency 69 | }); 70 | } 71 | 72 | return this.mHighlightBuffer; 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /src/ui-chart/highlight/Range.java: -------------------------------------------------------------------------------- 1 | package com.github.mikephil.charting.highlight; 2 | 3 | /** 4 | * Created by Philipp Jahoda on 24/07/15. Class that represents the range of one value in a stacked bar entry. e.g. 5 | * stack values are -10, 5, 20 -> then ranges are (-10 - 0, 0 - 5, 5 - 25). 6 | */ 7 | public final class Range { 8 | 9 | public from; 10 | public to; 11 | 12 | public Range(let from, let to) { 13 | this.from = from; 14 | this.to = to; 15 | } 16 | 17 | /** 18 | * Returns true if this range contains (if the value is in between) the given value, false if not. 19 | * 20 | * @param value 21 | * @return 22 | */ 23 | public contains(let value) { 24 | 25 | if (value > from && value <= to) 26 | return true; 27 | else 28 | return false; 29 | } 30 | 31 | public isLarger(let value) { 32 | return value > to; 33 | } 34 | 35 | public isSmaller(let value) { 36 | return value < from; 37 | } 38 | } -------------------------------------------------------------------------------- /src/ui-chart/index.ts: -------------------------------------------------------------------------------- 1 | export { BarChart } from './charts/BarChart'; 2 | export { HorizontalBarChart } from './charts/HorizontalBarChart'; 3 | export { LineChart } from './charts/LineChart'; 4 | export { PieChart } from './charts/PieChart'; 5 | export { RadarChart } from './charts/RadarChart'; 6 | export { ScatterChart } from './charts/ScatterChart'; 7 | export { BubbleChart } from './charts/BubbleChart'; 8 | export { CandleStickChart } from './charts/CandleStickChart'; 9 | export { CombinedChart } from './charts/CombinedChart'; 10 | import { install as installGestures } from '@nativescript-community/gesturehandler'; 11 | 12 | export { ChartTraceCategory } from './utils/Utils'; 13 | export function install() { 14 | installGestures(); 15 | } 16 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/BarDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { BarLineScatterCandleBubbleDataProvider } from './BarLineScatterCandleBubbleDataProvider'; 2 | import { BarData } from '../../data/BarData'; 3 | 4 | export interface BarDataProvider extends BarLineScatterCandleBubbleDataProvider { 5 | barData: BarData; 6 | drawBarShadowEnabled: boolean; 7 | drawValueAboveBarEnabled: boolean; 8 | highlightFullBarEnabled: boolean; 9 | } 10 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/BarLineScatterCandleBubbleDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { ChartInterface } from './ChartInterface'; 2 | import { BarLineScatterCandleBubbleData } from '../../data/BarLineScatterCandleBubbleData'; 3 | import { AxisDependency } from '../../components/YAxis'; 4 | import { Transformer } from '../../utils/Transformer'; 5 | import { MPPointF } from '@nativescript-community/ui-chart/utils/MPPointF'; 6 | import { Entry } from '@nativescript-community/ui-chart/data/Entry'; 7 | import { IDataSet } from '../datasets/IDataSet'; 8 | 9 | export interface BarLineScatterCandleBubbleDataProvider extends ChartInterface { 10 | getTransformer(axis?: AxisDependency): Transformer; 11 | getPixelForEntry(set: IDataSet, entry: Entry, index): MPPointF; 12 | readonly transformer: Transformer; 13 | isInverted(axis: AxisDependency); 14 | 15 | lowestVisibleX; 16 | highestVisibleX; 17 | 18 | data: BarLineScatterCandleBubbleData; 19 | } 20 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/BubbleDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { BubbleData } from '../../data/BubbleData'; 2 | import { BarLineScatterCandleBubbleDataProvider } from './BarLineScatterCandleBubbleDataProvider'; 3 | 4 | export interface BubbleDataProvider extends BarLineScatterCandleBubbleDataProvider { 5 | bubbleData: BubbleData; 6 | } 7 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/CandleDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { CandleData } from '../../data/CandleData'; 2 | import { BarLineScatterCandleBubbleDataProvider } from './BarLineScatterCandleBubbleDataProvider'; 3 | 4 | export interface CandleDataProvider extends BarLineScatterCandleBubbleDataProvider { 5 | candleData: CandleData; 6 | } 7 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/ChartInterface.d.ts: -------------------------------------------------------------------------------- 1 | import { MPPointF } from '../../utils/MPPointF'; 2 | import { ValueFormatter } from '../../formatter/ValueFormatter'; 3 | import { ChartData } from '../../data/ChartData'; 4 | import { Rect } from '@nativescript-community/ui-canvas'; 5 | 6 | /** 7 | * Interface that provides everything there is to know about the dimensions, 8 | * bounds, and range of the chart. 9 | * 10 | 11 | */ 12 | export interface ChartInterface { 13 | /** 14 | * Returns the minimum x value of the chart, regardless of zoom or translation. 15 | */ 16 | xChartMin: number; 17 | 18 | /** 19 | * Returns the maximum x value of the chart, regardless of zoom or translation. 20 | */ 21 | xChartMax: number; 22 | 23 | xRange: number; 24 | 25 | /** 26 | * Returns the minimum y value of the chart, regardless of zoom or translation. 27 | */ 28 | yChartMin: number; 29 | 30 | /** 31 | * Returns the maximum y value of the chart, regardless of zoom or translation. 32 | */ 33 | yChartMax: number; 34 | 35 | /** 36 | * Returns the maximum distance in scren dp a touch can be away from an entry to cause it to get highlighted. 37 | */ 38 | maxHighlightDistance: number; 39 | 40 | /** 41 | * Wether to filter highlights by axis. Default is true 42 | */ 43 | highlightsFilterByAxis: boolean; 44 | 45 | getMeasuredWidth(); 46 | 47 | getMeasuredHeight(); 48 | 49 | centerOfView: MPPointF; 50 | 51 | centerOffsets: MPPointF; 52 | 53 | contentRect: Rect; 54 | 55 | defaultValueFormatter: ValueFormatter; 56 | 57 | data: ChartData; 58 | 59 | maxVisibleValueCount: number; 60 | } 61 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/CombinedDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { CombinedData } from '../../data/CombinedData'; 2 | import { BubbleDataProvider } from './BubbleDataProvider'; 3 | import { CandleDataProvider } from './CandleDataProvider'; 4 | import { LineDataProvider } from './LineDataProvider'; 5 | import { ScatterDataProvider } from './ScatterDataProvider'; 6 | import { BarDataProvider } from './BarDataProvider'; 7 | 8 | /** 9 | * Created by philipp on 11/06/16. 10 | */ 11 | export interface CombinedDataProvider extends LineDataProvider, BarDataProvider, BubbleDataProvider, CandleDataProvider, ScatterDataProvider { 12 | combinedData: CombinedData; 13 | } 14 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/LineDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { LineData } from '../../data/LineData'; 2 | import { BarLineScatterCandleBubbleDataProvider } from './BarLineScatterCandleBubbleDataProvider'; 3 | import { AxisDependency } from '../../components/YAxis'; 4 | 5 | export interface LineDataProvider extends BarLineScatterCandleBubbleDataProvider { 6 | lineData: LineData; 7 | 8 | getAxis(dependency: AxisDependency); 9 | } 10 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/dataprovider/ScatterDataProvider.d.ts: -------------------------------------------------------------------------------- 1 | import { ScatterData } from '../../data/ScatterData'; 2 | import { BarLineScatterCandleBubbleDataProvider } from './BarLineScatterCandleBubbleDataProvider'; 3 | 4 | export interface ScatterDataProvider extends BarLineScatterCandleBubbleDataProvider { 5 | scatterData: ScatterData; 6 | } 7 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IBarDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { BarEntry } from '../../data/BarEntry'; 2 | import { IBarLineScatterCandleBubbleDataSet } from './IBarLineScatterCandleBubbleDataSet'; 3 | 4 | /** 5 | * Created by philipp on 21/10/15. 6 | */ 7 | export interface IBarDataSet extends IBarLineScatterCandleBubbleDataSet { 8 | /** 9 | * Returns true if this DataSet is stacked (stacksize > 1) or not. 10 | */ 11 | readonly stacked: boolean; 12 | 13 | /** 14 | * Returns the maximum number of bars that can be stacked upon another in 15 | * this DataSet. This should return 1 for non stacked bars, and > 1 for stacked bars. 16 | */ 17 | stackSize: number; 18 | 19 | /** 20 | * Returns the color used for drawing the bar-shadows. The bar shadows is a 21 | * surface behind the bar that indicates the maximum value. 22 | */ 23 | barShadowColor: string | Color; 24 | 25 | /** 26 | * Returns the width used for drawing borders around the bars. 27 | * If borderWidth === 0, no border will be drawn. 28 | */ 29 | barBorderWidth: number; 30 | 31 | /** 32 | * Returns the color drawing borders around the bars. 33 | */ 34 | barBorderColor: string | Color; 35 | 36 | /** 37 | * Returns the alpha value (transparency) that is used for drawing the 38 | * highlight indicator. 39 | */ 40 | highLightAlpha: number; 41 | 42 | /** 43 | * Returns the labels used for the different value-stacks in the legend. 44 | * This is only relevant for stacked bar entries. 45 | */ 46 | stackLabels: string[]; 47 | } 48 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IBarLineScatterCandleBubbleDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { Entry } from '../../data/Entry'; 2 | import { IDataSet } from './IDataSet'; 3 | 4 | /** 5 | * Created by philipp on 21/10/15. 6 | */ 7 | export interface IBarLineScatterCandleBubbleDataSet extends IDataSet { 8 | /** 9 | * Returns the color that is used for drawing the highlight indicators. 10 | */ 11 | highlightColor: string | Color; 12 | } 13 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IBubbleDataSet.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by philipp on 21/10/15. 3 | */ 4 | import { IBarLineScatterCandleBubbleDataSet } from './IBarLineScatterCandleBubbleDataSet'; 5 | import { BubbleEntry } from '../../data/BubbleEntry'; 6 | 7 | export interface IBubbleDataSet extends IBarLineScatterCandleBubbleDataSet { 8 | /** 9 | * Sets the width of the circle that surrounds the bubble when highlighted, 10 | * in dp. 11 | * 12 | * @param width 13 | */ 14 | highlightCircleWidth: number; 15 | 16 | readonly maxSize: number; 17 | 18 | normalizeSizeEnabled: boolean; 19 | } 20 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/ICandleDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { ILineScatterCandleRadarDataSet } from './ILineScatterCandleRadarDataSet'; 2 | import { CandleEntry } from '../../data/CandleEntry'; 3 | import { Style } from '@nativescript-community/ui-canvas'; 4 | 5 | export interface ICandleDataSet extends ILineScatterCandleRadarDataSet { 6 | /** 7 | * property to access the "high" value of an entry for this set 8 | * 9 | */ 10 | highProperty: string; 11 | /** 12 | * property to access the "low" value of an entry for this set 13 | * 14 | */ 15 | lowProperty: string; 16 | /** 17 | * property to access the "close" value of an entry for this set 18 | * 19 | */ 20 | closeProperty: string; 21 | 22 | /** 23 | * property to access the "open" value of an entry for this set 24 | * 25 | */ 26 | openProperty: string; 27 | 28 | /** 29 | * the width of the shadow of the candle 30 | */ 31 | shadowWidth: number; 32 | 33 | /** 34 | * should the candle bars show? 35 | * when false, only "ticks" will show 36 | *

37 | * - default: true 38 | */ 39 | showCandleBar: boolean; 40 | /** 41 | * the space between the candle entries, default 0.1 (10%) 42 | */ 43 | barSpace: number; 44 | 45 | /** 46 | * use candle color for the shadow 47 | */ 48 | shadowColorSameAsCandle: boolean; 49 | 50 | /** 51 | * palet style when open < close 52 | * increasing candlesticks are traditionally hollow 53 | */ 54 | increasingPaintStyle: Style; 55 | /** 56 | * palet style when open > close 57 | * descreasing candlesticks are traditionally filled 58 | */ 59 | decreasingPaintStyle: Style; 60 | 61 | /** 62 | * color for open === close 63 | */ 64 | neutralColor: Color | string; 65 | 66 | /** 67 | * color for open < close 68 | */ 69 | increasingColor: Color | string; 70 | 71 | /** 72 | * color for open > close 73 | */ 74 | decreasingColor: Color | string; 75 | 76 | /** 77 | * shadow line color, set -1 for backward compatibility and uses default 78 | * color 79 | */ 80 | shadowColor: Color | string; 81 | } 82 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/ILineDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { Mode } from 'src/ui-chart/data/LineDataSet'; 2 | import { IFillFormatter } from 'src/ui-chart/formatter/IFillFormatter'; 3 | import { Entry } from '../../data/Entry'; 4 | import { ILineRadarDataSet } from './ILineRadarDataSet'; 5 | 6 | /** 7 | * Created by Philpp Jahoda on 21/10/15. 8 | */ 9 | export interface ILineDataSet extends ILineRadarDataSet { 10 | /** 11 | * Returns the drawing mode for this line dataset 12 | */ 13 | mode: Mode; 14 | 15 | /** 16 | * Returns the intensity of the cubic lines (the effect intensity). 17 | * Max = 1 = very cubic, Min = 0.05f = low cubic effect, Default: 0.2f 18 | */ 19 | cubicIntensity: number; 20 | 21 | useColorsForFill: boolean; 22 | useColorsForFill: boolean; 23 | 24 | circleColors: string[] | Color[]; 25 | /** 26 | * Returns the size of the drawn circles. 27 | */ 28 | circleRadius: number; 29 | 30 | /** 31 | * Defines whether the circle are drawn in high res (better rendering but slower drawing) 32 | */ 33 | circleHighRes: boolean; 34 | 35 | /** 36 | * Returns the hole radius of the drawn circles. 37 | */ 38 | circleHoleRadius: number; 39 | 40 | /** 41 | * Returns true if drawing circles for this DataSet is enabled, false if not 42 | */ 43 | drawCirclesEnabled: boolean; 44 | 45 | /** 46 | * Returns the color of the inner circle (the circle-hole). 47 | */ 48 | circleHoleColor: string | Color; 49 | 50 | /** 51 | * Returns true if drawing the circle-holes is enabled, false if not. 52 | */ 53 | drawCircleHoleEnabled: boolean; 54 | 55 | /** 56 | * Returns the DashPathEffect that is used for drawing the lines. 57 | */ 58 | dashPathEffect: DashPathEffect; 59 | 60 | /** 61 | * Returns the IFillFormatter that is set for this DataSet. 62 | */ 63 | fillFormatter: IFillFormatter; 64 | 65 | applyFiltering(scaleX: number); 66 | maxFilterNumber: number; 67 | } 68 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/ILineRadarDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { ILineScatterCandleRadarDataSet } from './ILineScatterCandleRadarDataSet'; 2 | import { Entry } from '../../data/Entry'; 3 | import { RadarEntry } from '../../data/RadarEntry'; 4 | import { ImageSource } from '@nativescript/core'; 5 | 6 | /** 7 | * Created by Philipp Jahoda on 21/10/15. 8 | */ 9 | export interface ILineRadarDataSet extends ILineScatterCandleRadarDataSet { 10 | /** 11 | * Returns the color that is used for filling the line surface area. 12 | */ 13 | fillColor: Color | string; 14 | 15 | /** 16 | * Returns the drawable used for filling the area below the line. 17 | */ 18 | fillDrawable: ImageSource; 19 | 20 | /** 21 | * Returns the alpha value that is used for filling the line surface, 22 | * default: 85 23 | */ 24 | fillAlpha: number; 25 | 26 | /** 27 | * the stroke-width of the drawn line 28 | */ 29 | lineWidth: number; 30 | 31 | /** 32 | * Rtrue if filled drawing is enabled, false if not 33 | */ 34 | drawFilledEnabled: boolean; 35 | } 36 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/ILineScatterCandleRadarDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { PathEffect } from '@nativescript-community/ui-canvas'; 2 | import { Entry } from '../../data/Entry'; 3 | import { IBarLineScatterCandleBubbleDataSet } from './IBarLineScatterCandleBubbleDataSet'; 4 | 5 | /** 6 | * Created by Philipp Jahoda on 21/10/15. 7 | */ 8 | export interface ILineScatterCandleRadarDataSet extends IBarLineScatterCandleBubbleDataSet { 9 | /** 10 | * Returns true if vertical highlight indicator lines are enabled (drawn) 11 | * @return 12 | */ 13 | drawVerticalHighlightIndicator: boolea; 14 | 15 | /** 16 | * Returns true if vertical highlight indicator lines are enabled (drawn) 17 | * @return 18 | */ 19 | drawHorizontalHighlightIndicator: boolean; 20 | 21 | /** 22 | * Returns the line-width in which highlight lines are to be drawn. 23 | * @return 24 | */ 25 | highlightLineWidth: number; 26 | 27 | /** 28 | * Returns the DashPathEffect that is used for highlighting. 29 | * @return 30 | */ 31 | highlightDashPathEffect: PathEffect; 32 | } 33 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IPieDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { IDataSet } from './IDataSet'; 2 | import { PieEntry } from '../../data/PieEntry'; 3 | import { ValuePosition } from '../../data/PieDataSet'; 4 | 5 | export interface IPieDataSet extends IDataSet { 6 | /** 7 | * the space in pixels between the chart-slices, default 0 8 | */ 9 | sliceSpace: number; 10 | 11 | /** 12 | * When enabled, slice spacing will be 0.0 when the smallest value is going to be 13 | * smaller than the slice spacing itself. 14 | */ 15 | automaticallyDisableSliceSpacing: boolean; 16 | 17 | /** 18 | * indicates the selection distance of a pie slice 19 | */ 20 | selectionShift: number; 21 | 22 | xValuePosition: ValuePosition; 23 | yValuePosition: ValuePosition; 24 | usingSliceColorAsValueLineColor: boolean; 25 | /** 26 | * When valuePosition is OutsideSlice, indicates line color 27 | */ 28 | valueLineColor: Color | string; 29 | /** 30 | * When valuePosition is OutsideSlice, indicates line width 31 | */ 32 | valueLineWidth: number; 33 | /** 34 | * When valuePosition is OutsideSlice, indicates offset as percentage out of the slice size 35 | */ 36 | valueLinePart1OffsetPercentage: number; 37 | /** 38 | * When valuePosition is OutsideSlice, indicates length of first half of the line 39 | */ 40 | valueLinePart1Length: number; 41 | /** 42 | * When valuePosition is OutsideSlice, indicates length of second half of the line 43 | */ 44 | valueLinePart2Length: number; 45 | /** 46 | * When valuePosition is OutsideSlice, this allows variable line length 47 | */ 48 | valueLineVariableLength: boolean; 49 | } 50 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IRadarDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core'; 2 | import { ILineRadarDataSet } from './ILineRadarDataSet'; 3 | import { RadarEntry } from '../../data/RadarEntry'; 4 | /** 5 | * Created by Philipp Jahoda on 03/11/15. 6 | */ 7 | export interface IRadarDataSet extends ILineRadarDataSet { 8 | /// flag indicating whether highlight circle should be drawn or not 9 | drawHighlightCircleEnabled: boolean; 10 | 11 | highlightCircleFillColor: string | Color; 12 | 13 | /// The stroke color for highlight circle. 14 | /// If Utils.COLOR_NONE, the color of the dataset is taken. 15 | highlightCircleStrokeColor: string | Color; 16 | 17 | highlightCircleStrokeAlpha: number; 18 | highlightCircleInnerRadius: number; 19 | highlightCircleOuterRadius: number; 20 | highlightCircleStrokeWidth: number; 21 | } 22 | -------------------------------------------------------------------------------- /src/ui-chart/interfaces/datasets/IScatterDataSet.d.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core'; 2 | import { Entry } from '../../data/Entry'; 3 | import { IShapeRenderer } from '../../renderer/scatter/IShapeRenderer'; 4 | import { ILineScatterCandleRadarDataSet } from './ILineScatterCandleRadarDataSet'; 5 | /** 6 | * Created by philipp on 21/10/15. 7 | */ 8 | export interface IScatterDataSet extends ILineScatterCandleRadarDataSet { 9 | /** 10 | * the size the scattershape will have, in density pixels 11 | */ 12 | scatterShapeSize: number; 13 | 14 | /** 15 | * Sets the ScatterShape this DataSet should be drawn with. This will search for an available IShapeRenderer and set this 16 | * renderer for the DataSet. 17 | */ 18 | scatterShape: ScatterShape; 19 | 20 | /** 21 | * Renderer responsible for rendering this DataSet, default: square 22 | */ 23 | shapeRenderer: IShapeRenderer; 24 | 25 | /** 26 | * The radius of the hole in the shape (applies to Square, Circle and Triangle) 27 | * - default: 0.0 28 | */ 29 | scatterShapeHoleRadius: number; 30 | 31 | /** 32 | * Color for the hole in the shape. 33 | * Setting to `ColorTemplate.COLOR_NONE` will behave as transparent. 34 | * - default: ColorTemplate.COLOR_NONE 35 | */ 36 | scatterShapeHoleColor: string | Color; 37 | } 38 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/AnimatedMoveViewJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { ObjectPool } from '../utils/ObjectPool'; 3 | import { Transformer } from '../utils/Transformer'; 4 | import { Utils } from '../utils/Utils'; 5 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 6 | import { AnimatedViewPortJob } from './AnimatedViewPortJob'; 7 | /** 8 | * Created by Philipp Jahoda on 19/02/16. 9 | */ 10 | export class AnimatedMoveViewJob extends AnimatedViewPortJob { 11 | public static getInstance(viewPortHandler: ViewPortHandler, xValue, yValue, trans: Transformer, v: BarLineChartBase, xOrigin, yOrigin, duration) { 12 | const result = pool.get(); 13 | result.mViewPortHandler = viewPortHandler; 14 | result.xValue = xValue; 15 | result.yValue = yValue; 16 | result.transformer = trans; 17 | result.mView = v; 18 | result.xOrigin = xOrigin; 19 | result.yOrigin = yOrigin; 20 | //result.resetAnimator(); 21 | result.createAnimator(duration); 22 | return result; 23 | } 24 | 25 | public static recycleInstance(instance: AnimatedMoveViewJob) { 26 | pool.recycle(instance); 27 | } 28 | 29 | constructor(viewPortHandler: ViewPortHandler, xValue, yValue, trans: Transformer, v: BarLineChartBase, xOrigin, yOrigin, duration) { 30 | super(viewPortHandler, xValue, yValue, trans, v, xOrigin, yOrigin, duration); 31 | } 32 | 33 | public onAnimationUpdate(animation) { 34 | const pts = Utils.getTempArray(2); 35 | pts[0] = this.xOrigin + (this.xValue - this.xOrigin) * this.phase; 36 | pts[1] = this.yOrigin + (this.yValue - this.yOrigin) * this.phase; 37 | 38 | this.transformer.pointValuesToPixel(pts); 39 | this.mViewPortHandler.centerViewPort(pts, this.mView); 40 | } 41 | 42 | public recycleSelf() { 43 | AnimatedMoveViewJob.recycleInstance(this); 44 | } 45 | 46 | public instantiate() { 47 | return new AnimatedMoveViewJob(null, 0, 0, null, null, 0, 0, 0); 48 | } 49 | } 50 | const pool = ObjectPool.create(4, new AnimatedMoveViewJob(null, 0, 0, null, null, 0, 0, 0)).setReplenishPercentage(0.5); 51 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/AnimatedViewPortJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { Transformer } from '../utils/Transformer'; 3 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 4 | import { ViewPortJob } from './ViewPortJob'; 5 | import { EasingFunction, Tween } from '../animation/Tween'; 6 | 7 | export interface AnimatorUpdateListener { 8 | onAnimationUpdate(animation: Tween); 9 | } 10 | export interface AnimatorListener { 11 | onAnimationEnd(animation: Tween); 12 | onAnimationCancel(animation: Tween); 13 | } 14 | /** 15 | * Created by Philipp Jahoda on 19/02/16. 16 | */ 17 | export abstract class AnimatedViewPortJob extends ViewPortJob implements AnimatorUpdateListener, AnimatorListener { 18 | animator: Tween; 19 | 20 | phase; 21 | 22 | xOrigin: number; 23 | yOrigin: number; 24 | 25 | constructor( 26 | viewPortHandler: ViewPortHandler, 27 | xValue, 28 | yValue, 29 | trans: Transformer, 30 | v: BarLineChartBase, 31 | xOrigin: number, 32 | yOrigin: number, 33 | private duration: number 34 | ) { 35 | super(viewPortHandler, xValue, yValue, trans, v); 36 | this.xOrigin = xOrigin; 37 | this.yOrigin = yOrigin; 38 | } 39 | 40 | createAnimator(duration) { 41 | this.animator = new Tween({ 42 | onRender: (state) => { 43 | this.phase = state.value; 44 | this.onAnimationUpdate(this.animator); 45 | }, 46 | onFinish: () => this.onAnimationEnd(this.animator), 47 | onCancel: () => this.onAnimationCancel(this.animator) 48 | }); 49 | this.animator['duration'] = duration; 50 | } 51 | 52 | public run() { 53 | if (!this.animator) { 54 | this.createAnimator(this.duration); 55 | } 56 | 57 | this.animator.tween({ value: 0 }, { value: 1 }, this.animator['duration']); 58 | } 59 | 60 | public abstract recycleSelf(); 61 | 62 | protected resetAnimator() { 63 | this.animator.cancel(); 64 | } 65 | 66 | public onAnimationStart(animation: Tween) {} 67 | 68 | public onAnimationEnd(animation: Tween) { 69 | try { 70 | this.recycleSelf(); 71 | } catch (e) { 72 | // don't worry about it. 73 | } 74 | } 75 | 76 | public onAnimationCancel(animation: Tween) { 77 | try { 78 | this.recycleSelf(); 79 | } catch (e) { 80 | // don't worry about it. 81 | } 82 | } 83 | 84 | public onAnimationUpdate(animation: Tween) {} 85 | } 86 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/AnimatedZoomJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { YAxis } from '../components/YAxis'; 3 | import { ObjectPool } from '../utils/ObjectPool'; 4 | import { Transformer } from '../utils/Transformer'; 5 | import { Utils } from '../utils/Utils'; 6 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 7 | import { AnimatedViewPortJob } from './AnimatedViewPortJob'; 8 | /** 9 | * Created by Philipp Jahoda on 19/02/16. 10 | */ 11 | export class AnimatedZoomJob extends AnimatedViewPortJob { 12 | zoomOriginX: number; 13 | zoomOriginY: number; 14 | 15 | zoomCenterX: number; 16 | zoomCenterY: number; 17 | 18 | protected mYAxis: YAxis; 19 | 20 | xAxisRange; 21 | 22 | public static getInstance( 23 | viewPortHandler: ViewPortHandler, 24 | v: BarLineChartBase, 25 | trans: Transformer, 26 | axis: YAxis, 27 | xAxisRange, 28 | scaleX: number, 29 | scaleY: number, 30 | xOrigin: number, 31 | yOrigin: number, 32 | zoomCenterX: number, 33 | zoomCenterY: number, 34 | zoomOriginX: number, 35 | zoomOriginY: number, 36 | duration: number 37 | ) { 38 | const result = pool.get(); 39 | result.mViewPortHandler = viewPortHandler; 40 | result.xValue = scaleX; 41 | result.yValue = scaleY; 42 | result.transformer = trans; 43 | result.mView = v; 44 | result.xOrigin = xOrigin; 45 | result.yOrigin = yOrigin; 46 | 47 | result.zoomCenterX = zoomCenterX; 48 | result.zoomCenterY = zoomCenterY; 49 | result.zoomOriginX = zoomOriginX; 50 | result.zoomOriginY = zoomOriginY; 51 | 52 | result.mYAxis = axis; 53 | result.xAxisRange = xAxisRange; 54 | result.createAnimator(duration); 55 | return result; 56 | } 57 | 58 | constructor( 59 | viewPortHandler: ViewPortHandler, 60 | v: BarLineChartBase, 61 | trans: Transformer, 62 | axis: YAxis, 63 | xAxisRange, 64 | scaleX: number, 65 | scaleY: number, 66 | xOrigin: number, 67 | yOrigin: number, 68 | zoomCenterX: number, 69 | zoomCenterY: number, 70 | zoomOriginX: number, 71 | zoomOriginY: number, 72 | duration: number 73 | ) { 74 | super(viewPortHandler, scaleX, scaleY, trans, v, xOrigin, yOrigin, duration); 75 | 76 | this.zoomCenterX = zoomCenterX; 77 | this.zoomCenterY = zoomCenterY; 78 | this.zoomOriginX = zoomOriginX; 79 | this.zoomOriginY = zoomOriginY; 80 | // this.animator.addListener(this); 81 | this.mYAxis = axis; 82 | this.xAxisRange = xAxisRange; 83 | } 84 | 85 | public onAnimationUpdate(animation) { 86 | const scaleX = this.xOrigin + (this.xValue - this.xOrigin) * this.phase; 87 | const scaleY = this.yOrigin + (this.yValue - this.yOrigin) * this.phase; 88 | 89 | const save = Utils.getTempMatrix(); 90 | const viewPortHanlder = this.mViewPortHandler; 91 | viewPortHanlder.setZoom(scaleX, scaleY, save); 92 | viewPortHanlder.refresh(save, this.mView, false); 93 | 94 | const valsInView = this.mYAxis.axisRange / viewPortHanlder.getScaleY(); 95 | const xsInView = this.xAxisRange / viewPortHanlder.getScaleX(); 96 | const pts = Utils.getTempArray(2); 97 | 98 | pts[0] = this.zoomOriginX + (this.zoomCenterX - xsInView / 2 - this.zoomOriginX) * this.phase; 99 | pts[1] = this.zoomOriginY + (this.zoomCenterY + valsInView / 2 - this.zoomOriginY) * this.phase; 100 | 101 | this.transformer.pointValuesToPixel(pts); 102 | 103 | viewPortHanlder.translate(pts, save); 104 | viewPortHanlder.refresh(save, this.mView, true); 105 | } 106 | 107 | public onAnimationEnd(animation) { 108 | this.mView.calculateOffsets(); 109 | this.mView.invalidate(); 110 | } 111 | 112 | public onAnimationCancel(animation) {} 113 | 114 | public recycleSelf() {} 115 | 116 | public instantiate() { 117 | return new AnimatedZoomJob(null, null, null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0); 118 | } 119 | } 120 | const pool = ObjectPool.create(8, new AnimatedZoomJob(null, null, null, null, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0)).setReplenishPercentage(0.5); 121 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/MoveViewJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { ObjectPool } from '../utils/ObjectPool'; 3 | import { Transformer } from '../utils/Transformer'; 4 | import { Utils } from '../utils/Utils'; 5 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 6 | import { ViewPortJob } from './ViewPortJob'; 7 | /** 8 | * Created by Philipp Jahoda on 19/02/16. 9 | */ 10 | export class MoveViewJob extends ViewPortJob { 11 | public static getInstance(viewPortHandler: ViewPortHandler, xValue, yValue, trans: Transformer, v: BarLineChartBase) { 12 | const result = pool.get(); 13 | result.mViewPortHandler = viewPortHandler; 14 | result.xValue = xValue; 15 | result.yValue = yValue; 16 | result.transformer = trans; 17 | result.mView = v; 18 | return result; 19 | } 20 | 21 | public static recycleInstance(instance: MoveViewJob) { 22 | pool.recycle(instance); 23 | } 24 | 25 | constructor(viewPortHandler: ViewPortHandler, xValue, yValue, trans: Transformer, v: BarLineChartBase) { 26 | super(viewPortHandler, xValue, yValue, trans, v); 27 | } 28 | 29 | public run() { 30 | const pts = Utils.getTempArray(2); 31 | pts[0] = this.xValue; 32 | pts[1] = this.yValue; 33 | 34 | this.transformer.pointValuesToPixel(pts); 35 | this.mViewPortHandler.centerViewPort(pts, this.mView); 36 | 37 | MoveViewJob.recycleInstance(this); 38 | } 39 | 40 | public instantiate() { 41 | return new MoveViewJob(this.mViewPortHandler, this.xValue, this.yValue, this.transformer, this.mView); 42 | } 43 | } 44 | const pool = ObjectPool.create(2, new MoveViewJob(null, 0, 0, null, null)).setReplenishPercentage(0.5); 45 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/ViewPortJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { Poolable } from '../utils/ObjectPool'; 3 | import { Transformer } from '../utils/Transformer'; 4 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 5 | 6 | export abstract class ViewPortJob extends Poolable { 7 | protected mViewPortHandler: ViewPortHandler; 8 | xValue = 0; 9 | yValue = 0; 10 | transformer: Transformer; 11 | protected mView: BarLineChartBase; 12 | 13 | public abstract run(); 14 | 15 | constructor(viewPortHandler: ViewPortHandler, xValue, yValue, trans: Transformer, v) { 16 | super(); 17 | this.mViewPortHandler = viewPortHandler; 18 | this.xValue = xValue; 19 | this.yValue = yValue; 20 | this.transformer = trans; 21 | this.mView = v; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/ui-chart/jobs/ZoomJob.ts: -------------------------------------------------------------------------------- 1 | import { BarLineChartBase } from '../charts/BarLineChartBase'; 2 | import { AxisDependency } from '../components/YAxis'; 3 | import { ObjectPool } from '../utils/ObjectPool'; 4 | import { Transformer } from '../utils/Transformer'; 5 | import { Utils } from '../utils/Utils'; 6 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 7 | import { ViewPortJob } from './ViewPortJob'; 8 | 9 | export class ZoomJob extends ViewPortJob { 10 | protected mScaleX: number; 11 | protected mScaleY: number; 12 | 13 | protected mAxisDependency: AxisDependency; 14 | 15 | public static getInstance(viewPortHandler: ViewPortHandler, scaleX, scaleY, xValue, yValue, trans: Transformer, axis: AxisDependency, v: BarLineChartBase) { 16 | const result = pool.get(); 17 | result.xValue = xValue; 18 | result.yValue = yValue; 19 | result.mScaleX = scaleX; 20 | result.mScaleY = scaleY; 21 | result.mViewPortHandler = viewPortHandler; 22 | result.transformer = trans; 23 | result.mAxisDependency = axis; 24 | result.mView = v; 25 | return result; 26 | } 27 | 28 | public static recycleInstance(instance: ZoomJob) { 29 | pool.recycle(instance); 30 | } 31 | 32 | constructor(viewPortHandler: ViewPortHandler, scaleX, scaleY, xValue, yValue, trans: Transformer, axis: AxisDependency, v: BarLineChartBase) { 33 | super(viewPortHandler, xValue, yValue, trans, v); 34 | 35 | this.mScaleX = scaleX; 36 | this.mScaleY = scaleY; 37 | this.mAxisDependency = axis; 38 | } 39 | 40 | public run() { 41 | const save = Utils.getTempMatrix(); 42 | const viewPortHanlder = this.mViewPortHandler; 43 | viewPortHanlder.zoom(this.mScaleX, this.mScaleY, save); 44 | viewPortHanlder.refresh(save, this.mView, false); 45 | 46 | const yValsInView = this.mView.getAxis(this.mAxisDependency).axisRange / viewPortHanlder.getScaleY(); 47 | const xValsInView = this.mView.xAxis.axisRange / viewPortHanlder.getScaleX(); 48 | const pts = Utils.getTempArray(2); 49 | 50 | pts[0] = this.xValue - xValsInView / 2; 51 | pts[1] = this.yValue + yValsInView / 2; 52 | 53 | this.transformer.pointValuesToPixel(pts); 54 | 55 | viewPortHanlder.translate(pts, save); 56 | viewPortHanlder.refresh(save, this.mView, false); 57 | 58 | this.mView.calculateOffsets(); 59 | this.mView.invalidate(); 60 | 61 | ZoomJob.recycleInstance(this); 62 | } 63 | 64 | public instantiate() { 65 | return new ZoomJob(null, 0, 0, 0, 0, null, null, null); 66 | } 67 | } 68 | const pool = ObjectPool.create(1, new ZoomJob(null, 0, 0, 0, 0, null, null, null)).setReplenishPercentage(0.5); 69 | -------------------------------------------------------------------------------- /src/ui-chart/listener/ChartTouchListener.ts: -------------------------------------------------------------------------------- 1 | import { Chart } from '../charts/Chart'; 2 | import { Highlight } from '../highlight/Highlight'; 3 | 4 | export enum ChartGesture { 5 | NONE, 6 | DRAG, 7 | X_ZOOM, 8 | Y_ZOOM, 9 | PINCH_ZOOM, 10 | ROTATE, 11 | SINGLE_TAP, 12 | DOUBLE_TAP, 13 | LONG_PRESS, 14 | FLING 15 | } 16 | /** 17 | * Created by philipp on 12/06/15. 18 | */ 19 | export abstract class ChartTouchListener> { 20 | /** 21 | * the last touch gesture that has been performed 22 | **/ 23 | protected mLastGesture = ChartGesture.NONE; 24 | 25 | // states 26 | protected static NONE = 0; 27 | protected static DRAG = 1; 28 | protected static X_ZOOM = 2; 29 | protected static Y_ZOOM = 3; 30 | protected static PINCH_ZOOM = 4; 31 | protected static POST_ZOOM = 5; 32 | protected static ROTATE = 6; 33 | 34 | /** 35 | * integer field that holds the current touch-state 36 | */ 37 | protected mTouchMode = ChartTouchListener.NONE; 38 | 39 | /** 40 | * the last highlighted object (via touch) 41 | */ 42 | lastHighlighted: Highlight; 43 | 44 | /** 45 | * the chart the listener represents 46 | */ 47 | readonly chart: T; 48 | 49 | constructor(chart: T) { 50 | this.chart = chart; 51 | } 52 | dispose() {} 53 | init() {} 54 | 55 | /** 56 | * returns the touch mode the listener is currently in 57 | */ 58 | public get touchMode() { 59 | return this.mTouchMode; 60 | } 61 | 62 | /** 63 | * Returns the last gesture that has been performed on the chart. 64 | */ 65 | public get lastGesture() { 66 | return this.mLastGesture; 67 | } 68 | 69 | /** 70 | * Perform a highlight operation. 71 | * 72 | * @param e 73 | */ 74 | protected performHighlight(h: Highlight) { 75 | if (!h || h === this.lastHighlighted) { 76 | this.chart.highlight(null, true); 77 | this.lastHighlighted = null; 78 | } else { 79 | this.chart.highlight(h, true); 80 | this.lastHighlighted = h; 81 | } 82 | } 83 | 84 | /** 85 | * returns the distance between two points 86 | * 87 | * @param eventX 88 | * @param startX 89 | * @param eventY 90 | * @param startY 91 | * @return 92 | */ 93 | protected static distance(eventX, startX, eventY, startY) { 94 | const dx = eventX - startX; 95 | const dy = eventY - startY; 96 | return Math.sqrt(dx * dx + dy * dy); 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/ui-chart/model/GradientColor.ts: -------------------------------------------------------------------------------- 1 | export class GradientColor { 2 | private startColor: number; 3 | private endColor: number; 4 | 5 | constructor(startColor, endColor) { 6 | this.startColor = startColor; 7 | this.endColor = endColor; 8 | } 9 | 10 | public getStartColor() { 11 | return this.startColor; 12 | } 13 | 14 | public setStartColor(startColor) { 15 | this.startColor = startColor; 16 | } 17 | 18 | public getEndColor() { 19 | return this.endColor; 20 | } 21 | 22 | public setEndColor(endColor) { 23 | this.endColor = endColor; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/BarLineScatterCandleBubbleRenderer.ts: -------------------------------------------------------------------------------- 1 | import { ChartAnimator } from '../animation/ChartAnimator'; 2 | import { BarLineScatterCandleBubbleDataSet } from '../data/BarLineScatterCandleBubbleDataSet'; 3 | import { Rounding } from '../data/DataSet'; 4 | import { Entry } from '../data/Entry'; 5 | import { BarLineScatterCandleBubbleDataProvider } from '../interfaces/dataprovider/BarLineScatterCandleBubbleDataProvider'; 6 | import { IBarLineScatterCandleBubbleDataSet } from '../interfaces/datasets/IBarLineScatterCandleBubbleDataSet'; 7 | import { IDataSet } from '../interfaces/datasets/IDataSet'; 8 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 9 | import { DataRenderer } from './DataRenderer'; 10 | 11 | /** 12 | * Class representing the bounds of the current viewport in terms of indices in the values array of a DataSet. 13 | */ 14 | export class XBounds { 15 | /** 16 | * minimum visible entry index 17 | */ 18 | public min: number; 19 | 20 | /** 21 | * maximum visible entry index 22 | */ 23 | public max: number; 24 | 25 | /** 26 | * range of visible entry indices 27 | */ 28 | public range: number; 29 | 30 | /** 31 | * Calculates the minimum and maximum x values as well as the range between them. 32 | * 33 | * @param chart 34 | * @param dataSet 35 | */ 36 | public set(chart: BarLineScatterCandleBubbleDataProvider, dataSet: BarLineScatterCandleBubbleDataSet, animator: ChartAnimator) { 37 | const phaseX = Math.max(0, Math.min(1, animator.phaseX)); 38 | const low = chart.lowestVisibleX; 39 | const high = chart.highestVisibleX; 40 | 41 | const entryFrom = dataSet.getEntryForXValue(low, NaN, Rounding.DOWN); 42 | const entryTo = dataSet.getEntryForXValue(high, NaN, Rounding.UP); 43 | this.min = entryFrom ? dataSet.getEntryIndex(entryFrom) : 0; 44 | this.max = entryTo ? dataSet.getEntryIndex(entryTo) : 0; 45 | 46 | this.range = (this.max - this.min) * phaseX; 47 | } 48 | } 49 | /** 50 | * Created by Philipp Jahoda on 09/06/16. 51 | */ 52 | export abstract class BarLineScatterCandleBubbleRenderer extends DataRenderer { 53 | /** 54 | * buffer for storing the current minimum and maximum visible x 55 | */ 56 | protected mXBounds = new XBounds(); 57 | 58 | constructor(animator: ChartAnimator, viewPortHandler: ViewPortHandler) { 59 | super(animator, viewPortHandler); 60 | } 61 | 62 | /** 63 | * Returns true if the DataSet values should be drawn, false if not. 64 | * 65 | * @param set 66 | * @return 67 | */ 68 | protected shouldDrawValues(set: IDataSet) { 69 | return set.visible && (set.drawValuesEnabled || set.drawIconsEnabled); 70 | } 71 | 72 | /** 73 | * Checks if the provided entry object is in bounds for drawing considering the current animation phase. 74 | * 75 | * @param e 76 | * @param set 77 | * @return 78 | */ 79 | protected isInBoundsX(e: Entry, set: IBarLineScatterCandleBubbleDataSet) { 80 | if (!e) return false; 81 | 82 | const entryIndex = set.getEntryIndex(e); 83 | 84 | if (!e || entryIndex >= set.entryCount * this.animator.phaseY) { 85 | return false; 86 | } else { 87 | return true; 88 | } 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/LineRadarRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Path, Rect, Style } from '@nativescript-community/ui-canvas'; 2 | import { Color, ImageSource, profile } from '@nativescript/core'; 3 | import { ChartAnimator } from '../animation/ChartAnimator'; 4 | import { Utils } from '../utils/Utils'; 5 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 6 | import { LineScatterCandleRadarRenderer } from './LineScatterCandleRadarRenderer'; 7 | 8 | /** 9 | * Created by Philipp Jahoda on 25/01/16. 10 | */ 11 | export abstract class LineRadarRenderer extends LineScatterCandleRadarRenderer { 12 | constructor(animator: ChartAnimator, viewPortHandler: ViewPortHandler) { 13 | super(animator, viewPortHandler); 14 | } 15 | 16 | /** 17 | * Draws the provided path in filled mode with the provided drawable. 18 | * 19 | * @param c 20 | * @param filledPath 21 | * @param drawable 22 | */ 23 | protected drawFilledPathBitmap(c: Canvas, filledPath: Path, drawable: ImageSource, shader) { 24 | if (Utils.clipPathSupported()) { 25 | const save = c.save(); 26 | // c.scale(1, 1/SCALE_FACTOR, 0, this.mViewPortHandler.contentBottom) 27 | c.clipPath(filledPath); 28 | 29 | // drawable.setBounds(this.mViewPortHandler.contentLeft, this.mViewPortHandler.contentTop, this.mViewPortHandler.contentRight, this.mViewPortHandler.contentBottom); 30 | // drawable.draw(c); 31 | c.drawBitmap( 32 | drawable, 33 | new Rect(0, 0, drawable.width, drawable.height), 34 | new Rect(this.mViewPortHandler.contentLeft, this.mViewPortHandler.contentTop, this.mViewPortHandler.contentRight, this.mViewPortHandler.contentBottom), 35 | null 36 | ); 37 | 38 | c.restoreToCount(save); 39 | } else { 40 | throw new Error('Fill-drawables not (yet) supported below API level 18 '); 41 | } 42 | } 43 | 44 | drawPath(canvas: Canvas, path: Path, paint: Paint) { 45 | canvas.drawPath(path, paint); 46 | } 47 | 48 | /** 49 | * Draws the provided path in filled mode with the provided color and alpha. 50 | * Special thanks to Angelo Suzuki (https://github.com/tinsukE) for this. 51 | * 52 | * @param c 53 | * @param filledPath 54 | * @param fillColor 55 | * @param fillAlpha 56 | */ 57 | protected drawFilledPath(c: Canvas, filledPath: Path, fillColor: Color | string, fillAlpha: number = 255, shader?) { 58 | let color = fillColor; 59 | if (fillAlpha < 255) { 60 | fillColor = fillColor instanceof Color ? fillColor : new Color(fillColor); 61 | color = new Color(fillAlpha, fillColor.r, fillColor.g, fillColor.b); 62 | } 63 | const renderPaint = this.renderPaint; 64 | 65 | // save 66 | const previous = renderPaint.getStyle(); 67 | const previousColor = renderPaint.getColor(); 68 | const previousShader = renderPaint.getShader(); 69 | 70 | renderPaint.setStyle(Style.FILL); 71 | 72 | renderPaint.setColor(color); 73 | if (shader) { 74 | renderPaint.setShader(shader); 75 | } 76 | 77 | if (Utils.clipPathSupported()) { 78 | const save = c.save(); 79 | c.clipPath(filledPath); 80 | c.drawPaint(renderPaint); 81 | c.restoreToCount(save); 82 | } else { 83 | this.drawPath(c, filledPath, renderPaint); 84 | } 85 | // restore 86 | renderPaint.setColor(previousColor); 87 | renderPaint.setShader(previousShader); 88 | renderPaint.setStyle(previous); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/LineScatterCandleRadarRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas } from '@nativescript-community/ui-canvas'; 2 | import { ChartAnimator } from '../animation/ChartAnimator'; 3 | import { ILineScatterCandleRadarDataSet } from '../interfaces/datasets/ILineScatterCandleRadarDataSet'; 4 | import { Utils } from '../utils/Utils'; 5 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 6 | import { BarLineScatterCandleBubbleRenderer } from './BarLineScatterCandleBubbleRenderer'; 7 | 8 | /** 9 | * Created by Philipp Jahoda on 11/07/15. 10 | */ 11 | export abstract class LineScatterCandleRadarRenderer extends BarLineScatterCandleBubbleRenderer { 12 | constructor(animator: ChartAnimator, viewPortHandler: ViewPortHandler) { 13 | super(animator, viewPortHandler); 14 | } 15 | 16 | /** 17 | * Draws vertical & horizontal highlight-lines if enabled. 18 | * 19 | * @param c 20 | * @param x x-position of the highlight line intersection 21 | * @param y y-position of the highlight line intersection 22 | * @param set the currently drawn dataset 23 | */ 24 | protected drawHighlightLines(c: Canvas, x, y, set: ILineScatterCandleRadarDataSet) { 25 | const paint = this.highlightPaint; 26 | // set color and stroke-width 27 | paint.setColor(set.highlightColor); 28 | paint.setStrokeWidth(set.highlightLineWidth); 29 | 30 | // draw highlighted lines (if enabled) 31 | paint.setPathEffect(set.highlightDashPathEffect); 32 | // draw vertical highlight lines 33 | if (set.drawVerticalHighlightIndicator) { 34 | const path = Utils.getTempPath(); 35 | // create vertical path 36 | path.reset(); 37 | path.moveTo(x, this.mViewPortHandler.contentTop); 38 | path.lineTo(x, this.mViewPortHandler.contentBottom); 39 | 40 | c.drawPath(path, paint); 41 | } 42 | 43 | // draw horizontal highlight lines 44 | if (set.drawHorizontalHighlightIndicator) { 45 | const path = Utils.getTempPath(); 46 | // create horizontal path 47 | path.reset(); 48 | path.moveTo(this.mViewPortHandler.contentLeft, y); 49 | path.lineTo(this.mViewPortHandler.contentRight, y); 50 | 51 | c.drawPath(path, paint); 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/Renderer.ts: -------------------------------------------------------------------------------- 1 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 2 | /** 3 | * Abstract baseclass of all Renderers. 4 | * 5 | 6 | */ 7 | export abstract class Renderer { 8 | /** 9 | * the component that handles the drawing area of the chart and it's offsets 10 | */ 11 | protected mViewPortHandler: ViewPortHandler; 12 | 13 | constructor(viewPortHandler: ViewPortHandler) { 14 | this.mViewPortHandler = viewPortHandler; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/XAxisRendererRadarChart.ts: -------------------------------------------------------------------------------- 1 | import { Canvas } from '@nativescript-community/ui-canvas'; 2 | import { RadarChart } from '../charts/RadarChart'; 3 | import { XAxis } from '../components/XAxis'; 4 | import { MPPointF } from '../utils/MPPointF'; 5 | import { Utils } from '../utils/Utils'; 6 | import { ViewPortHandler } from '../utils/ViewPortHandler'; 7 | import { XAxisRenderer } from './XAxisRenderer'; 8 | 9 | export class XAxisRendererRadarChart extends XAxisRenderer { 10 | private mChart: RadarChart; 11 | mForceLongestLabelComputation = true; 12 | 13 | constructor(viewPortHandler: ViewPortHandler, xAxis: XAxis, chart: RadarChart) { 14 | super(viewPortHandler, xAxis, null); 15 | this.mChart = chart; 16 | } 17 | 18 | public renderAxisLabels(c: Canvas) { 19 | const axis = this.xAxis; 20 | const chart = this.mChart; 21 | if (!axis.enabled || !axis.drawLabels) return; 22 | 23 | const customRender = axis.customRenderer; 24 | const customRenderFunction = customRender && customRender.drawLabel; 25 | const labelRotationAngleDegrees = axis.labelRotationAngle; 26 | const drawLabelAnchor: MPPointF = { x: 0.5, y: 0.25 }; 27 | const paint = this.axisLabelsPaint; 28 | 29 | paint.setFont(axis.typeface); 30 | paint.setTextAlign(axis.labelTextAlign); 31 | paint.setColor(axis.textColor); 32 | 33 | const sliceangle = chart.sliceAngle; 34 | 35 | // calculate the factor that is needed for transforming the value to 36 | // pixels 37 | const factor = chart.factor; 38 | 39 | const center = chart.centerOffsets; 40 | const pOut: MPPointF = { x: 0, y: 0 }; 41 | const labels = axis.mLabels; 42 | for (let i = 0; i < chart.data.maxEntryCountSet.entryCount; i++) { 43 | const label = labels[i]; 44 | if (!label) { 45 | continue; 46 | } 47 | const angle = (sliceangle * i + chart.rotationAngle) % 360; 48 | 49 | Utils.getPosition(center, chart.yRange * factor + axis.mLabelRotatedWidth / 2, angle, pOut); 50 | 51 | this.drawLabel(c, label, pOut.x, pOut.y - axis.mLabelRotatedHeight / 2, drawLabelAnchor, labelRotationAngleDegrees, paint, customRenderFunction); 52 | } 53 | 54 | // MPPointF.recycleInstance(center); 55 | // MPPointF.recycleInstance(pOut); 56 | // MPPointF.recycleInstance(drawLabelAnchor); 57 | } 58 | 59 | /** 60 | * XAxis LimitLines on RadarChart not yet supported. 61 | * 62 | * @param c 63 | */ 64 | public renderLimitLines(c: Canvas) { 65 | // this space intentionally left blank 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/ChevronDownShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class ChevronDownShapeRenderer implements IShapeRenderer { 11 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 12 | const shapeHalf = dataSet.scatterShapeSize / 2; 13 | 14 | renderPaint.setStyle(Style.STROKE); 15 | renderPaint.setStrokeWidth(1); 16 | 17 | c.drawLine(posX, posY + 2 * shapeHalf, posX + 2 * shapeHalf, posY, renderPaint); 18 | 19 | c.drawLine(posX, posY + 2 * shapeHalf, posX - 2 * shapeHalf, posY, renderPaint); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/ChevronUpShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class ChevronUpShapeRenderer implements IShapeRenderer { 11 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 12 | const shapeHalf = dataSet.scatterShapeSize / 2; 13 | 14 | renderPaint.setStyle(Style.STROKE); 15 | renderPaint.setStrokeWidth(1); 16 | 17 | c.drawLine(posX, posY - 2 * shapeHalf, posX + 2 * shapeHalf, posY, renderPaint); 18 | 19 | c.drawLine(posX, posY - 2 * shapeHalf, posX - 2 * shapeHalf, posY, renderPaint); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/CircleShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class CircleShapeRenderer implements IShapeRenderer { 11 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 12 | const shapeSize = dataSet.scatterShapeSize; 13 | const shapeHalf = shapeSize / 2; 14 | const shapeHoleSizeHalf = dataSet.scatterShapeHoleRadius; 15 | const shapeHoleSize = shapeHoleSizeHalf * 2; 16 | const shapeStrokeSize = (shapeSize - shapeHoleSize) / 2; 17 | const shapeStrokeSizeHalf = shapeStrokeSize / 2; 18 | 19 | const shapeHoleColor = dataSet.scatterShapeHoleColor; 20 | 21 | if (shapeSize > 0.0) { 22 | renderPaint.setStyle(Style.STROKE); 23 | renderPaint.setStrokeWidth(shapeStrokeSize); 24 | 25 | c.drawCircle(posX, posY, shapeHoleSizeHalf + shapeStrokeSizeHalf, renderPaint); 26 | 27 | if (shapeHoleColor) { 28 | renderPaint.setStyle(Style.FILL); 29 | 30 | renderPaint.setColor(shapeHoleColor); 31 | c.drawCircle(posX, posY, shapeHoleSizeHalf, renderPaint); 32 | } 33 | } else { 34 | renderPaint.setStyle(Style.FILL); 35 | 36 | c.drawCircle(posX, posY, shapeHalf, renderPaint); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/CrossShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class CrossShapeRenderer implements IShapeRenderer { 11 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 12 | const shapeHalf = dataSet.scatterShapeSize / 2; 13 | 14 | renderPaint.setStyle(Style.STROKE); 15 | renderPaint.setStrokeWidth(1); 16 | 17 | c.drawLine(posX - shapeHalf, posY, posX + shapeHalf, posY, renderPaint); 18 | c.drawLine(posX, posY - shapeHalf, posX, posY + shapeHalf, renderPaint); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/IShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | 5 | /** 6 | * Created by wajdic on 15/06/2016. 7 | * Created at Time 09:07 8 | */ 9 | export interface IShapeRenderer { 10 | /** 11 | * Renders the provided ScatterDataSet with a shape. 12 | * 13 | * @param c Canvas object for drawing the shape 14 | * @param dataSet The DataSet to be drawn 15 | * @param viewPortHandler Contains information about the current state of the view 16 | * @param posX Position to draw the shape at 17 | * @param posY Position to draw the shape at 18 | * @param renderPaint Paint object used for styling and drawing 19 | */ 20 | renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint); 21 | } 22 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/SquareShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class SquareShapeRenderer implements IShapeRenderer { 11 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 12 | const shapeSize = dataSet.scatterShapeSize; 13 | const shapeHalf = shapeSize / 2; 14 | const shapeHoleSizeHalf = dataSet.scatterShapeHoleRadius; 15 | const shapeHoleSize = shapeHoleSizeHalf * 2; 16 | const shapeStrokeSize = (shapeSize - shapeHoleSize) / 2; 17 | const shapeStrokeSizeHalf = shapeStrokeSize / 2; 18 | 19 | const shapeHoleColor = dataSet.scatterShapeHoleColor; 20 | if (shapeHoleSize > 0.0) { 21 | renderPaint.setStyle(Style.STROKE); 22 | renderPaint.setStrokeWidth(shapeStrokeSize); 23 | 24 | c.drawRect( 25 | posX - shapeHoleSizeHalf - shapeStrokeSizeHalf, 26 | posY - shapeHoleSizeHalf - shapeStrokeSizeHalf, 27 | posX + shapeHoleSizeHalf + shapeStrokeSizeHalf, 28 | posY + shapeHoleSizeHalf + shapeStrokeSizeHalf, 29 | renderPaint 30 | ); 31 | 32 | if (shapeHoleColor && shapeHoleColor) { 33 | renderPaint.setStyle(Style.FILL); 34 | 35 | renderPaint.setColor(shapeHoleColor); 36 | c.drawRect(posX - shapeHoleSizeHalf, posY - shapeHoleSizeHalf, posX + shapeHoleSizeHalf, posY + shapeHoleSizeHalf, renderPaint); 37 | } 38 | } else { 39 | renderPaint.setStyle(Style.FILL); 40 | 41 | c.drawRect(posX - shapeHalf, posY - shapeHalf, posX + shapeHalf, posY + shapeHalf, renderPaint); 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/TriangleShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Path, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 4 | import { IShapeRenderer } from './IShapeRenderer'; 5 | 6 | /** 7 | * Created by wajdic on 15/06/2016. 8 | * Created at Time 09:08 9 | */ 10 | export class TriangleShapeRenderer implements IShapeRenderer { 11 | static mTrianglePathBuffer = new Path(); 12 | 13 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 14 | const shapeSize = dataSet.scatterShapeSize; 15 | const shapeHalf = shapeSize / 2; 16 | const shapeHoleSizeHalf = dataSet.scatterShapeHoleRadius; 17 | const shapeHoleSize = shapeHoleSizeHalf * 2; 18 | const shapeStrokeSize = (shapeSize - shapeHoleSize) / 2; 19 | 20 | const shapeHoleColor = dataSet.scatterShapeHoleColor; 21 | 22 | renderPaint.setStyle(Style.FILL); 23 | 24 | // create a triangle path 25 | const tri = TriangleShapeRenderer.mTrianglePathBuffer; 26 | tri.reset(); 27 | 28 | tri.moveTo(posX, posY - shapeHalf); 29 | tri.lineTo(posX + shapeHalf, posY + shapeHalf); 30 | tri.lineTo(posX - shapeHalf, posY + shapeHalf); 31 | 32 | if (shapeSize > 0.0) { 33 | tri.lineTo(posX, posY - shapeHalf); 34 | 35 | tri.moveTo(posX - shapeHalf + shapeStrokeSize, posY + shapeHalf - shapeStrokeSize); 36 | tri.lineTo(posX + shapeHalf - shapeStrokeSize, posY + shapeHalf - shapeStrokeSize); 37 | tri.lineTo(posX, posY - shapeHalf + shapeStrokeSize); 38 | tri.lineTo(posX - shapeHalf + shapeStrokeSize, posY + shapeHalf - shapeStrokeSize); 39 | } 40 | 41 | tri.close(); 42 | 43 | c.drawPath(tri, renderPaint); 44 | tri.reset(); 45 | 46 | if (shapeSize > 0.0 && shapeHoleColor) { 47 | renderPaint.setColor(shapeHoleColor); 48 | 49 | tri.moveTo(posX, posY - shapeHalf + shapeStrokeSize); 50 | tri.lineTo(posX + shapeHalf - shapeStrokeSize, posY + shapeHalf - shapeStrokeSize); 51 | tri.lineTo(posX - shapeHalf + shapeStrokeSize, posY + shapeHalf - shapeStrokeSize); 52 | tri.close(); 53 | 54 | c.drawPath(tri, renderPaint); 55 | tri.reset(); 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/ui-chart/renderer/scatter/XShapeRenderer.ts: -------------------------------------------------------------------------------- 1 | import { Canvas, Paint, Style } from '@nativescript-community/ui-canvas'; 2 | import { IScatterDataSet } from '../../interfaces/datasets/IScatterDataSet'; 3 | import { ColorTemplate } from '../../utils/ColorTemplate'; 4 | import { ViewPortHandler } from '../../utils/ViewPortHandler'; 5 | import { IShapeRenderer } from './IShapeRenderer'; 6 | 7 | /** 8 | * Created by wajdic on 15/06/2016. 9 | * Created at Time 09:08 10 | */ 11 | export class XShapeRenderer implements IShapeRenderer { 12 | public renderShape(c: Canvas, dataSet: IScatterDataSet, viewPortHandler: ViewPortHandler, posX, posY, renderPaint: Paint) { 13 | const shapeHalf = dataSet.scatterShapeSize / 2; 14 | 15 | renderPaint.setStyle(Style.STROKE); 16 | renderPaint.setStrokeWidth(1); 17 | 18 | c.drawLine(posX - shapeHalf, posY - shapeHalf, posX + shapeHalf, posY + shapeHalf, renderPaint); 19 | c.drawLine(posX + shapeHalf, posY - shapeHalf, posX - shapeHalf, posY + shapeHalf, renderPaint); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/ui-chart/utils/ColorTemplate.ts: -------------------------------------------------------------------------------- 1 | import { Color } from '@nativescript/core'; 2 | 3 | /** 4 | * Class that holds predefined color integer arrays (e.g. 5 | * ColorTemplate.VORDIPLOM_COLORS) and convenience methods for loading colors 6 | * from resources. 7 | * 8 | 9 | */ 10 | export class ColorTemplate { 11 | /** 12 | * an "invalid" color that indicates that no color is set 13 | */ 14 | public static COLOR_NONE = new Color(-1); 15 | 16 | /** 17 | * this "color" is used for the Legend creation and indicates that the next 18 | * form should be skipped 19 | */ 20 | public static COLOR_SKIP = new Color(0x00112234); 21 | 22 | static get LIBERTY_COLORS() { 23 | return require('./colors/liberty').colors; 24 | } 25 | static get JOYFUL_COLORS() { 26 | return require('./colors/joyful').colors; 27 | } 28 | static get PASTEL_COLORS() { 29 | return require('./colors/pastel').colors; 30 | } 31 | static get COLORFUL_COLORS() { 32 | return require('./colors/colorful').colors; 33 | } 34 | static get VORDIPLOM_COLORS() { 35 | return require('./colors/vordiplom').colors; 36 | } 37 | static get MATERIAL_COLORS() { 38 | return require('./colors/material').colors; 39 | } 40 | 41 | public static getColorInstance(c: Color | number | string) { 42 | return c instanceof Color ? c : new Color(c as any); 43 | } 44 | 45 | /** 46 | * Sets the alpha component of the given color. 47 | * 48 | * @param color 49 | * @param alpha 0 - 255 50 | * @return 51 | */ 52 | public static colorWithAlpha(color: Color, alpha) { 53 | return new Color(alpha, color.r, color.g, color.b); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/ui-chart/utils/HorizontalViewPortHandler.ts: -------------------------------------------------------------------------------- 1 | import { ViewPortHandler } from './ViewPortHandler'; 2 | 3 | /** 4 | * ViewPortHandler for HorizontalBarChart. 5 | */ 6 | export class HorizontalViewPortHandler extends ViewPortHandler { 7 | // public setMinimumScaleX(xScale) { 8 | // setMinimumScaleY(xScale); 9 | // } 10 | 11 | // public setMinimumScaleY(yScale) { 12 | // setMinimumScaleX(yScale); 13 | // } 14 | 15 | // public setMinMaxScaleX(minScaleX, maxScaleX) { 16 | // setMinMaxScaleY(minScaleX, maxScaleX); 17 | // } 18 | 19 | // public setMinMaxScaleY(minScaleY, maxScaleY) { 20 | // setMinMaxScaleX(minScaleY, maxScaleY); 21 | // } 22 | } 23 | -------------------------------------------------------------------------------- /src/ui-chart/utils/MPPointD.d.ts: -------------------------------------------------------------------------------- 1 | import { MPPointF } from './MPPointF'; 2 | 3 | export interface MPPointD extends MPPointF { 4 | 5 | } 6 | -------------------------------------------------------------------------------- /src/ui-chart/utils/MPPointF.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Tony Patino on 6/24/16. 3 | */ 4 | export interface MPPointF { 5 | x: number; 6 | y: number; 7 | } 8 | -------------------------------------------------------------------------------- /src/ui-chart/utils/MPSize.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by Tony Patino on 6/24/16. 3 | */ 4 | export interface MPSize { 5 | width: number; 6 | height: number; 7 | } 8 | -------------------------------------------------------------------------------- /src/ui-chart/utils/TransformerHorizontalBarChart.ts: -------------------------------------------------------------------------------- 1 | import { Transformer } from './Transformer'; 2 | 3 | /** 4 | * Transformer class for the HorizontalBarChart. 5 | * 6 | 7 | */ 8 | export class TransformerHorizontalBarChart extends Transformer { 9 | /** 10 | * Prepares the matrix that contains all offsets. 11 | * 12 | * @param inverted 13 | */ 14 | public prepareMatrixOffset(inverted) { 15 | this.mMatrixOffset.reset(); 16 | 17 | // offset.postTranslate(mOffsetLeft, getHeight() - this.mOffsetBottom); 18 | 19 | if (!inverted) { 20 | this.mMatrixOffset.postTranslate(this.mViewPortHandler.offsetLeft, this.mViewPortHandler.chartHeight - this.mViewPortHandler.offsetBottom); 21 | } else { 22 | this.mMatrixOffset.setTranslate(-(this.mViewPortHandler.chartWidth - this.mViewPortHandler.offsetRight), this.mViewPortHandler.chartHeight - this.mViewPortHandler.offsetBottom); 23 | this.mMatrixOffset.postScale(-1.0, 1.0); 24 | } 25 | 26 | // this.mMatrixOffset.set(offset); 27 | 28 | // this.mMatrixOffset.reset(); 29 | // 30 | // this.mMatrixOffset.postTranslate(mOffsetLeft, getHeight() - 31 | // this.mOffsetBottom); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/colorful.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['rgb(193, 37, 82)', 'rgb(255, 102, 0)', 'rgb(245, 199, 0)', 'rgb(106, 150, 31)', 'rgb(179, 100, 53)']; 2 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/joyful.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['rgb(217, 80, 138)', 'rgb(254, 149, 7)', 'rgb(254, 247, 120)', 'rgb(106, 167, 134)', 'rgb(53, 194, 209)']; 2 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/liberty.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['rgb(207, 248, 246)', 'rgb(148, 212, 212)', 'rgb(136, 180, 187)', 'rgb(118, 174, 175)', 'rgb(42, 109, 130)']; 2 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/material.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['#2ecc71', '#f1c40f', '#e74c3c', '#3498db']; 2 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/pastel.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['rgb(64, 89, 128)', 'rgb(149, 165, 124)', 'rgb(217, 184, 162)', 'rgb(191, 134, 134)', 'rgb(179, 48, 80)']; 2 | -------------------------------------------------------------------------------- /src/ui-chart/utils/colors/vordiplom.ts: -------------------------------------------------------------------------------- 1 | export const colors = ['rgb(192, 255, 140)', 'rgb(255, 247, 140)', 'rgb(255, 208, 140)', 'rgb(140, 234, 255)', 'rgb(255, 140, 157)']; 2 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const sveltePreprocess = require('svelte-preprocess'); 2 | // const svelteNativePreprocessor = require('svelte-native-preprocessor'); 3 | 4 | module.exports = { 5 | compilerOptions: { 6 | namespace: 'foreign' 7 | }, 8 | preprocess: [ 9 | sveltePreprocess({ 10 | typescript: { 11 | compilerOptions: { 12 | target: 'es2020' 13 | } 14 | } 15 | }) 16 | // svelteNativePreprocessor() 17 | ] 18 | }; 19 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tools/tsconfig", 3 | "compilerOptions": { 4 | "paths": { 5 | "@nativescript-community/ui-chart": ["src/ui-chart"], 6 | "@nativescript-community/ui-chart/*": ["src/ui-chart/*"] 7 | } 8 | }, 9 | "references": [ 10 | { 11 | //Need for IDE 12 | "path": "./tsconfig.vue3.json" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /tsconfig.vue3.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "composite": true, 5 | "paths": { 6 | "nativescript-vue": ["./node_modules/nativescript-vue3"] 7 | } 8 | }, 9 | "include": [ 10 | "./demo-snippets/vue3" 11 | ] 12 | } --------------------------------------------------------------------------------