#######################################################################################
This Datadicer repository has been retired as of 6/11/2021. Datadicer was a relational data visualization library for internal use; this codebase was released as No Support Open Source Software.
#######################################################################################
-
Clone the repo
https://github.com/ncbi/datadicer
-
Install dependencies
npm install bower install
-
Serve for live editing:
grunt serve
-
Build
grunt
To learn more about the grunt
command, see the documentation on the
Grunt CLI. To see a list of all available
tasks for this project:
grunt --help
Add to your angular application
-
The latest and greatest
bower install https://github.com/ncbi/datadicer#bower
-
inject angular module "ngramApp"
angular.module('TestApp', ["ngramApp"])
colModel:[{
name: 'aid', // name of the field
label: 'AID', // display name of the field
tips: 'tips', // if you would like to configure a tip for this
// header, please set "tips" property',
width: 60, // width of the column
align: 'right', // text align
sortable: false
}]
groupHeaders: [{
useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'name',
numberOfColumns: 2,
titleText: 'L0-info',
tip: "another tip"},
{ startColumnName: 'amount',
numberOfColumns: 6,
titleText: 'L0-Numbers'}
]
},
{ useColSpanStyle: true,
groupHeaders: [
{ startColumnName: 'name',
numberOfColumns: 1,
titleText: 'L1-name'},
{ startColumnName: 'amount',
numberOfColumns: 3,
titleText: 'L1-Others'}
]
}]
tips: 'Scientific name <BR> Please search me by using the filed name : <font color="red">scientific_name</font>',
In the grid configuration, add the following :
sortname: 'strain',
sortorder: 'asc',
advOpts: {
open: false, //OPEN BY DEFAULT?
downloadBtn: {
hidden: false, //HIDE THE DOWNLOAD BUTTON?
css: 'btn-default pull-right', //OVERRIDE DOWNLOAD BUTTON CSS?
tips:'CSV Download (10k limit)', //default
tipsPlacement:'left', //default
onClick: function () { //OVERRIDE DEFAULT DOWNLOAD ACTION
return _backendDriver.download();
}
}
}
toppager:true, //default is no top paging bar
<filter-as-tab filter="filters.taxgroup_name"
limit="3"
on-filter-change="performSearchDebounced()"></filter-as-tab>
multiselect: true,
multiPageSelection: true,
event publisher:
$scope.$emit('gridtable.allRowsOnPageBeingSelected', $scope.selarrrow, rowids, status);
$scope.$emit('gridtable.oneRowBeingSelected', $scope.selarrrow, rowid, status);
event subscriber:
scope.$on('gridtable.reload', data)
scope.$on('gridtable.resetAllSelection')
scope.$on('gridtable.selectRow', data)
scope.$on('gridtable.reset')
facetFields: [{
label: 'Source',
name: 'isolation_source',
allowZeros: false,
limitByNumber: 6 //default 10 <------------------this line
}]
subGridExpanded:true
subGridRowExpandedConfigCallback:function(sid, rid, rdata/*row data*/)
//return a gridConfig
Configurations only applicable to subgrid
title: 'Title: Detail information',
accessibleTitle: 'I have got enough information about this record, thank you',
accessibleTitleScreenReaderOnly: false,
minHeight: 100
simply add/remove the following in app bootstrap function
'angulartics',
'angulartics.google.analytics'
As well as GA's code ( no need to explicitly send pageview here please )
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
mtype:'POST'
console.info(DataDicer().version)
$scope.$on('gridtable.columnUpdated', function (e, grid) {
console.info(grid.getAllColumns());
console.info(grid.getDisplayColumns());
});
pagerConfig: {cloneToTop: true},
no_hits_message:'no hits!',