NativeScript Task Pie
A NativeScript module for drawing Microsoft Planner like progress charts.
License
Platforms
- Android
- iOS (currently in progress!)
Installation
Run
tns plugin add nativescript-taskpie
inside your app project to install the module.
Demo
The demo app can be found here.
Documentation
Have a look at the index.ts file to get an overview of all types, methods and properties.
Otherwise...
Usage
Add this CSS to your app.css
, e.g.
It is possible that you have to customize some properties:
The following XML shows the structure of a TaskPie
view:
<!-- pieGrid() --> <!-- pieImage() --> <!-- pieTextArea() --> <!-- pieTextField() --> <!-- pieSubTextField() --> <!-- descriptionField() --> <!-- categoryGrid() --> <!-- [0] "Not started" --> <!-- [1] "Late" --> <!-- [2] "In progress" --> <!-- [3] "Completed" -->
Dependency properties
Name | Description | CSS class |
---|---|---|
categories | The custom category list. | nsTaskPie-categories |
categoryStyle | CSS style for category area. | nsTaskPie-categories |
countChanged | Event that is raised when a count value of a task category changed. | --- |
counts | The list of the category's count values. | --- |
description | The description (text under the pie). | nsTaskPie-description |
descriptionStyle | CSS style of the description. | nsTaskPie-description |
pieGridStyle | CSS style of the grid tat contains the pie and its texts. | nsTaskPie-pieArea |
pieSize | The size the pie is drawed with. The higher the better is the quality, but needs more memory. Default: 300 |
nsTaskPie-pie |
pieStyle | CSS style of the pie image. | nsTaskPie-pie |
pieSubText | The sub text of the pie. | nsTaskPie-subText |
pieSubTextStyle | CSS style of the pie's sub text. | nsTaskPie-subText |
pieText | The pie text. | nsTaskPie-text |
pieTextAreaStyle | CSS style of the area that contains the pie texts. | nsTaskPie-textArea |
pieTextStyle | CSS style of the pie's text. | nsTaskPie-text |
Categories
By default you have the following categories:
Name | Color | Type (TaskCategoryType) |
---|---|---|
Not started |
ffc90e |
NotStarted |
Late |
d54130 |
NotStarted |
In progress |
4cabe1 |
InProgress |
Completed |
88be39 |
Completed |
Add own
You can use the addCategory()
method to add categories.
;
You also can use the categories
(dependency) property to set an own list of items.
pie.categories = ;
Each item has the following structure:
The recommed way is to use the addCategory()
method. These method creates ITaskCategory
objects that raise change events for its properties, so this has better support for data binding.
Data binding
The following example is similar to the demp app.
XML
ViewModel
;;