EasyData icon indicating copy to clipboard operation
EasyData copied to clipboard

Dashboard MVP

Open korzh opened this issue 2 years ago • 3 comments

Small demo to test the new dashboard widgets.

  1. All work must be performed in the feature/dashboard branch
  2. We add a new page to the EasyDataAspNetCoreTest01 project
  3. The data is hard-coded for the first time. Later we will add a service that takes the data from the server.
  4. On that new "Dashboard" page, we will add the new dashboard control with two widgets: grid and chart. All hard-coded for now.

korzh avatar Sep 10 '22 07:09 korzh

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
  }
}

korzh avatar Sep 10 '22 08:09 korzh

Detailed tasks:

  1. Add EasyDashboardView class similar to EntityDataView (/easydata.js/packs/crud/src/views/entity_data_view.ts)
  2. Add EasyDashboardGridWidget and EasyDashboardChartWidget classes that will be initialized in EasyDashboardView
  3. Pass the hard-coded data to EasyDashboardView and render both widgets according to the passed data. To render the widgets, use DomElementBuilder class via domel() function as we did in all our UI controls before (EasyGrid, TextFilterWidget, etc).

korzh avatar Sep 10 '22 08:09 korzh

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 in EasyDataManager 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

korzh avatar Jan 03 '23 13:01 korzh