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.

Setting	Type	Description	Default Value
chartsPerRow	Number	Number of charts per row	3
xmlUrl	String	Url for chart structure xml	http://jobmanager.seldatech.com/images/XMLs/xml-file.xml
loadingImage	String	Url for loading image	http://jobmanager.seldatech.com/images/dashboard/loading.gif
getChartsOfUserUrl	String	Url to get charts of user - should be get method	''
getIndicatorsOfUserUrl	String	Url to get indicators of user - should be get method	''
getChartDataUrl	String	Url to get data of specific chart - recieves chart id - should be get method	''
getIndicatorDataUrl	String	Url to get data of specific indicator - recieves indicator id - should be get method	''
addChartUrl	String	Url for add chart or indicator - should be post method	''
updateChartUrl	String	Url for update chart or indicator - should be put methodn	''
deleteChartUrl	String	Url for delete chart or indicator - should be delete method	''
addChartText	String	Text for add chart button	Add chart
noDataText	String	Text to display when no data to show	No data to show
pieTooltip	String	Pie chart icon tooltip	Pie
barsTooltip	String	Bars chart icon tooltip	Bars
linesTooltip	String	Lines chart icon tooltip	Lines
areaTooltip	String	Area chart icon tooltip	Area
stackedAreaTooltip	String	Stacked area chart icon tooltip	Stacked area
stackedArea100Tooltip	String	Stacked area 100% chart icon tooltip	Stacked area 100%
zoomInTooltip	String	Zoom in tooltip	Zoom in
zoomOutTooltip	String	Zoom out tooltip	Zoom out
resetTooltip	String	Reset tooltip	Reset
leftTooltip	String	Left tooltip	Left
rightTooltip	String	Right tooltip	Right
expandTooltip	String	Expand tooltip	Expand
collapseTooltip	String	Collapse tooltip	Collapse
editTooltip	String	Edit tooltip	Edit
deleteTooltip	String	Delete tooltip	Delete
kpiSettingsTitle	String	Chart settings dialog title	KPI Settings
defaultChartText	String	label for chart type select	Default chart:
saveText	String	Save button text	Save
cancelText	String	Cancel button text	Cancel
selectText	String	Text to be show in the dropdown, when no items are selected	Select Items
selectAllText	String	Text to display as the label of select all option	Select All
unSelectAllText	String	Text to display as the label of unSelect option	UnSelect All
componentType	any	Array of reference to custom components	not set

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