generic-dashboard v0.3.17

generic-dashboard

generic build of dashboard customizing ng2-angular-chart

Table of Contents

• Install
• Usage
• Settings
• XML chart structure
• API
• License

Install

npm i generic-dashboard --save

Usage

Import the GenericDashboardModule in your app.module.ts:

import { GenericDashboardModule } from 'generic-dashboard';

@NgModule({
  // ...
  imports: [
    GenericDashboardModule
  ]
  // ...
})

in addition you should add link for the follwing styles and scripts in your application

If you are using Angular CLI you can follow the example below...

angular.json

"styles": [
  "src/styles.scss",
+ "node_modules/bootstrap/dist/css/bootstrap.css"
+ "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css"
],
"scripts": [
+ "node_modules/jquery/dist/jquery.min.js",
+ "node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"
],

index.html

  <link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="stylesheet" href="http://jobmanager.seldatech.com/images/dashboard/fonts/fontawesome-pro-5.0.13/css/fontawesome-all.min.css" >
+ <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
+ <script src="//cdn.ckeditor.com/4.7.1/full-all/ckeditor.js"></script>
</head>

polyfills.ts

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
+ (window as any).global = window;

create xml according to instruction in xml section

In your templates, use the lib-dashboard component like this:

<lib-dashboard [settings]="dashboardSettings"></lib-dashboard>

and in the corresponding .ts dashboard settings:

//partial example
dashboardSettings = {
  chartsPerRow : 3,
  xmlUrl: 'http://jobmanager.seldatech.com/images/XMLs/xml-file.xml',
  loadingImage : "http://jobmanager.seldatech.com/images/dashboard/loading.gif",
  getChartsOfUserUrl: "http://localhost:25823/api/chart/",
  getIndicatorsOfUserUrl: "http://localhost:25823/api/indicator/",
  getChartDataUrl: "http://localhost:25823/api/chart/chartData/",
  getIndicatorDataUrl: "http://localhost:25823/api/chart/chartData/",
  addChartUrl: "http://localhost:25823/api/chart/",
  updateChartUrl: "http://localhost:25823/api/chart/",
  updateChartOrderUrl: "http://localhost:25823/api/chart/updateOrder",
  deleteChartUrl: "http://localhost:25823/api/chart/",
  noDataText: "No data to show",
  pieTooltip: "Pie",
  barsTooltip: "Bars",
  linesTooltip: "Lines",
  areaTooltip: "Area",
  stackedAreaTooltip: "Stacked area",
  stackedArea100Tooltip: "Stacked area 100%",
  zoomInTooltip: "Zoom in",
  zoomOutTooltip: "Zoom out",
  resetTooltip: "Reset",
  leftTooltip: "Left",
  rightTooltip: "Right",
  }

Settings

The following list of settings are supported by the component. Configure the settings to meet your requirement.

XML

In order to define chart structure you should create xml according to this schema

A two-dimensional diagram is consists of the x-axis range and legend definition, according to the given data the chart is able to calculate the v-axis.

In the kpi section you will need to provide a type. kpi type could be one of the following: 1. "chart"- the simple case. 2. "indicator"- indicators are used for one dimensional data,specific value for specific parameter. 3. "custom-html"- provide ckeditor for your custom html 4. "componentName" - allow you to define your own component and let the user supply inputs in case of needed. inputs are defined by properties and nodes.

 <kpi type='WellcomeComponent' typeLabel="wellcome" iconUrl='http://localhost:25823/api/Content/wellcome.png'>
    <property id='wellcometext' name='wellcometext' type='text' length='10'></property>
  </kpi>

• iconUrl is optional ,in case you want to override the default provided icon.

In the properties section you should provide chart properties like name , creation date etc. Note : define of property with id 'name' is required. example:

<property id='name' name='Name' type='text' length='10'></property>

In the node section you should provide nodes which describe the x-axis range and the legend. each node can have values that represent the selection options. you need to provide 'id' and 'name' properties for each value. node type can be one of the following: select, multiselect, autocomplete, date

for example:

<node id='ChartValues' type='select' name='Chart values:' >
             <value id='1' name='Orders: Revenues'></value>
             <value id='2' name='Orders: Number of orders'></value>
             <value id='3' name='Orders: Number of sold items'></value>
			 <value id='4' name='Orders: Number of shipped items'></value>
             <value id='5' name='Orders: Shipping costs'></value>
             <value id='6' name='Returns: Number of returns'></value>
			 <value id='7' name='Returns: $ Value of returns'></value>
             <value id='8' name='Inventory: Number of available items'></value>
             <value id='9' name='Inventory: Number of available unique SKUs'></value>
        </node>

another way to provide the values is by setting url address that returns list of id name pairs. you can set the base url in baseUrl attribute of dashboard section. the urls params can be based on previous node by sending its id.

example of a list based on values retrieves from server

<node id='showBy' name='Show by' type='select' url='showByValue/{ChartValues}' searchurl=''></node>

ChartValues parameter now contains the value of the chosen option in "ChartValues" node.

a node might be depends on one or more other nodes. that means that it will not be displayed untill user choose its dependencies. the dependencies are seperated by a semicolon. use 'showIf' property if node should be visibile only in specific values of depends. initialize 'showIf' with values to be shown separated by semicolon or url with dependency as parameter.

example:

<node id='series' type='select' name='Series:' dependOn='showBy;ChartValues;' url='ShowByValuesDetails/{showBy}'></node>

<node id='showBy' dependOn='ChartValues' name='Show by' type='multiselect' showIf='1,2' url='showByValue/{ChartValues}'></node>

<node id='showBy' dependOn='ChartValues' name='Show by' type='multiselect' showIf='isShowByVisible/{ChartValues}' url='showByValue/{ChartValues}'></node>

node value can contain one or more nodes. this is limited for one level only. example:

<node id='dateRange' type='autocomplete' name='Date range:'>
             <value id='1' name='Last 24 hours'></value>
             <value id='2' name='Last 3 days'></value>
			 <value id='3' name='Last 7 days'></value>
             <value id='4' name='Last 14 days'></value>
			 <value id='5' name='Last 30 days'></value>
             <value id='6' name='Month to date'></value>
			 <value id='7' name='Last 60 days'></value>
			 <value id='8' name='Last 90 days'></value>
             <value id='9' name='Last 6 months'></value>
             <value id='10' name='custom'>
				<node id='startDate' type='date' name='start date:'></node>
				<node id='endDate' type='date' name='end date:'></node>
             </value>
        </node>

view full xml example

API

For function supplied for getChartDataUrl: if data is base on 2 diemnsions only, the second column with sum value should be called sum.

License

MIT