EasyData
EasyData copied to clipboard
Dashboard MVP
Small demo to test the new dashboard widgets.
- All work must be performed in the feature/dashboard branch
- We add a new page to the EasyDataAspNetCoreTest01 project
- The data is hard-coded for the first time. Later we will add a service that takes the data from the server.
- On that new "Dashboard" page, we will add the new dashboard control with two widgets: grid and chart. All hard-coded for now.
Here are the data:
{
"result": "ok",
"resultSet": {
"cols": [
{
"id": "col-aeticx2p6o",
"isAggr": false,
"label": "Category Name",
"description": null,
"type": 1,
"originAttrId": "Category.CategoryName",
"dfmt": "",
"gfct": null,
"style": {
"alignment": 0
}
},
{
"id": "col-5rtic108sg",
"isAggr": true,
"label": "Total",
"description": null,
"type": 8,
"originAttrId": "OrderDetail.UnitPrice",
"dfmt": "",
"gfct": null,
"style": {
"alignment": 0
}
}
],
"rows": [
[
"Beverages",
11811.65
],
[
"Condiments",
4605.300000000001
],
[
"Confections",
7549.29999999999
],
[
"Dairy Products",
9875.800000000001
],
[
"Grains/Cereals",
4164.3
],
[
"Meat/Poultry",
7417.33
],
[
"Produce",
4786.449999999999
],
[
"Seafood",
6290.779999999995
]
]
},
"meta": {
"totalRecords": 8,
"offset": 0
},
"aux": {
"Prop1": "Value1",
"Prop2": 25
}
}
Detailed tasks:
- Add
EasyDashboardView
class similar toEntityDataView
(/easydata.js/packs/crud/src/views/entity_data_view.ts
) - Add
EasyDashboardGridWidget
andEasyDashboardChartWidget
classes that will be initialized inEasyDashboardView
- Pass the hard-coded data to
EasyDashboardView
and render both widgets according to the passed data. To render the widgets, useDomElementBuilder
class viadomel()
function as we did in all our UI controls before (EasyGrid
,TextFilterWidget
, etc).
The next step will be creating the server-side infrastructure that supports datasets definition and fetching. So, here is what we need to do:
- The
DataSources
list inEasyDataManager
class - Each DataSource is an object that can give away data according to request parameters. There will be SqlDataSource (a data source that uses SQL query to get data) and SqlTableDataSource (a data source that is mapped on some DB table)
- So, we will need CRUD operations for Data Sources
- Additionally, we will modify
FetchDataset
so it will be able to work will kinds of data sources