Skip to content
This repository has been archived by the owner on Sep 7, 2022. It is now read-only.

Commit

Permalink
Merge pull request #67 from sharmalab/dev
Browse files Browse the repository at this point in the history 
0.2.3
  • Loading branch information
@lastlegion
lastlegion authored Jan 30, 2018
2 parents c6457ce + b69b213 commit 12d6afe
Show file tree
Hide file tree
Showing 10 changed files with 149 additions and 37 deletions.
2 changes: 1 addition & 1 deletion modules/interactiveFilters.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ var schemaValidator = new Validator();
var fs = require("fs");
var dataDescription = require("./dataDescription");
//var visualization = require("./visualization");
var crossfilter = require("crossfilter2");
var crossfilter = require("crossfilter");

var interactiveFilters = (function(){

Expand Down
Binary file added public/images/ic_share_black_24dp_1x.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 12 additions & 7 deletions public/javascripts/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,17 @@ var interactiveFilters = {},
visualization = {};
var Dashboard = React.createClass({
//mixins: [Reflux.connect(AppStore,"currData")], // will set up listenTo call and then do this.setState("currData",data)
getUrlParam: function (name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
},
componentDidMount: function(){
var self=this;


var self=this;
console.log("url parameters: ");
console.log(window.location.search);
var filter = self.getUrlParam("filter") || "{}";
console.log(JSON.parse(filter));

self.unsubscribe = AppStore.listen(self.onFilter);

d3.json("config/interactiveFilters", function(err, data) {
Expand All @@ -50,13 +57,12 @@ var Dashboard = React.createClass({
AppActions.refresh(queryFilter); //Initial refresh
filteredData = AppStore.getData();
//Do the initial filtering
d3.json("data/?filter={}&dataSourceName=" + globalDataSourceName, function(d) {
d3.json("data/?filter="+JSON.stringify(filter)+"&dataSourceName=" + globalDataSourceName, function(d) {
filteredData = d;
self.setState({
interactiveFilters: interactiveFilters,
visualization: visualization,
currData: filteredData,

currData: filteredData,
debug: 0
});

Expand All @@ -65,7 +71,6 @@ var Dashboard = React.createClass({

dc.renderAll();
setTimeout(function(){

dc.renderAll(); //fix safari issue
},50);

Expand Down
37 changes: 34 additions & 3 deletions public/javascripts/src/components/FilteringAttribute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ var ChartAddons = require("./ChartAddons.jsx");

var ChartAddons = React.createClass({
getInitialState: function(){

return {elasticY: true, elasticX: true};
},
filter: function(e){
Expand Down Expand Up @@ -187,7 +188,8 @@ var ChartAddons = React.createClass({
var FilteringAttribute = React.createClass({
getInitialState: function() {
this.statistics = {};
return {showChart: true, showStatistics:false, hasStatistics: false};
var initialFilters = this.props.initialFilters;
return {showChart: true, showStatistics:false, hasStatistics: false, initialFilters: initialFilters};
},
componentWillMount: function(){
//Initialize crossfilter dimensions and groups before rendering
Expand Down Expand Up @@ -318,6 +320,7 @@ var FilteringAttribute = React.createClass({
.radius(90)
.renderLabel(true);
c.colors(d3.scale.ordinal().range(["#F47A7E", "#FCDADB", "#F7A2A5", "#9C4E51"]));

c.filterHandler(function(dimension, filters){
if(filters){
dimension.filter(filters);
Expand Down Expand Up @@ -382,6 +385,8 @@ var FilteringAttribute = React.createClass({
//.xUnits(function(){return 500*(1/binFactor)})
.elasticY(true)
//.elasticX(true);
//

c.renderlet(function(chart){
chart.selectAll("g.x text")
.attr("transform", "translate(-10,10) rotate(315)");
Expand Down Expand Up @@ -460,6 +465,9 @@ var FilteringAttribute = React.createClass({
return d.key + " ("+ d.value + ")";
});
c.ordering(function(d){return d.key;});



/*
c.renderlet(function(chart){
var bars = chart.selectAll("rect").each(function(d){barsData.push(d);});
Expand All @@ -474,12 +482,32 @@ var FilteringAttribute = React.createClass({
}

this.setState({chart: c});
setTimeout(function(){
if(self.state.initialFilters.length){
console.log("setting initial filters");
if(self.props.config.visualization.visType == "barChart"){

if(self.state.initialFilters.length > 1){

var filter = dc.filters.RangedFilter(0, 100);
filter = self.state.initialFilters;

//self.filter(filter);

c.filter(filter);

}
} else {
c.filter(self.state.initialFilters);
}
}
},1000)
},
onReset: function(){

//e.preventDefault();
var c = this.state.chart;
console.log("Reset");

c.filterAll();
//dc.renderAll();
},
Expand All @@ -492,7 +520,7 @@ var FilteringAttribute = React.createClass({
isFilterActive: function(){
var dim = this.props.config.attributeName;
var filters = queryFilter;
//console.log("Filters");

for(var i in filters){
//console.log(i);
if(dim === i){
Expand Down Expand Up @@ -525,6 +553,9 @@ var FilteringAttribute = React.createClass({
self.props.onToggleShow();
});
},
getDcChart: function() {
return this.state.chart;
},
render: function(){
var self = this;
var divId = "dc-"+this.props.config.attributeName;
Expand Down
26 changes: 24 additions & 2 deletions public/javascripts/src/components/InteractiveFilters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ var Masonry = React.createClass({
var InteractiveFilters = React.createClass({
getInitialState: function(){
//console.log("Rendering interactive filters");
return {full:false};
return {full:false, initialFilters: {}};
},
fullView: function(){
if(this.state.full){
Expand All @@ -38,6 +38,18 @@ var InteractiveFilters = React.createClass({
toggleShow: function(){
this.setState({toggle: true});
},
getUrlParam: function (name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
},
componentDidMount: function(){
var self = this;
var filter = self.getUrlParam("filter") || "{}";
console.log("filter: ");
console.log(JSON.parse(filter));

self.setState({initialFilters : JSON.parse(filter)});
},
render: function(){
var filteringAttributes;

Expand All @@ -55,12 +67,22 @@ var InteractiveFilters = React.createClass({

if(this.props.config){
filteringAttributes = this.props.config.map(function(filteringAttribute){

var filteringAttributeName = filteringAttribute.attributeName;

var initialFilter = {};
if(self.state.initialFilters[filteringAttributeName]){

initialFilter = self.state.initialFilters[filteringAttributeName];
}
key++;

return (
<FilteringAttribute key={key} onToggleShow={self.toggleShow} config={filteringAttribute} currData={self.props.currData} full={self.state.full} />
<FilteringAttribute key={key} onToggleShow={self.toggleShow} config={filteringAttribute} currData={self.props.currData} full={self.state.full} initialFilters={initialFilter}/>
);
});
}
//console.log(filteringAttributes[0].getDcChart());


if(this.state.full){
Expand Down
52 changes: 44 additions & 8 deletions public/javascripts/src/components/Navbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,17 @@
/* global Theme */
/* global document */
var React = require("react");
var Modal = require('react-bootstrap').Modal;
var DocumentTitle = React.createFactory(require("react-document-title"));
var FormControl = require('react-bootstrap').FormControl;
var Summary = require("./Visualizations/Summary.jsx");

var Button = require('react-bootstrap').Button;
var copy = require('copy-to-clipboard');


var NavBar = React.createClass({
getInitialState: function(){
return {};
return {showSharedUrl: false};
},
componentDidMount: function() {
var self = this;
Expand All @@ -27,10 +30,20 @@ var NavBar = React.createClass({
});

},
handleClose: function(){
this.setState({showSharedUrl: false});
},
handleShare: function(text) {
console.log(text);
copy(text);
console.log("text: "+text);
console.log("copied!");
this.setState({showSharedUrl: true});
},
render: function() {



var self = this;
var projectTitle = this.state.projectTitle || "DataScope";
var dashboardConfig = this.state.dashboardConfig;

Expand All @@ -39,25 +52,48 @@ var NavBar = React.createClass({
var theme = {};
if(dashboardConfig){
theme = dashboardConfig.theme;


}
var url = "save?filter="+JSON.stringify(queryFilter);
var url = "save?filter="+JSON.stringify(queryFilter);
var shareurl = window.location.href.split('?')[0] + "?filter="+JSON.stringify(queryFilter);
//var theme = dashBoardConfig.theme;
return (
<div>
<div className='navbar navbar-inverse navbar-fixed-top' id='header' role='navigation' style={{"background": Theme.headerColor1}} >


<div className='navbar-header'>
<div className="navbar-brand" style={{"background": primaryColor1, "width": "340px"}}>{projectTitle}</div>

</div>
<div id="summary">
<div id="summary">
<Summary />
</div>
<ul className="nav navbar-nav navbar-right navbar-options">
<a className='download' href={url} target='_blank' id='dl'><img src='images/Download1.png' />Cohort</a>
<span className='download' href={'#'} onClick={() => self.handleShare(shareurl)} id='dl'><img title="Share" src='images/ic_share_black_24dp_1x.png' /></span>
<a className='download' href={url} target='_blank' id='dl'><img title="Download cohort" src='images/Download1.png' /></a>
</ul>

</div>
{self.state.showSharedUrl ?
<div id="shareurldiv">
<Modal.Dialog>
<Modal.Header>
<Modal.Title>Sharable URL</Modal.Title>
</Modal.Header>
<Modal.Body>
URL copied to clipboard!
<FormControl value={shareurl} type="text" />

</Modal.Body>
<Modal.Footer>
<Button onClick={self.handleClose}>Close</Button>
</Modal.Footer>
</Modal.Dialog>
</div>
:
<div />

}
</div>
);
}
Expand Down
20 changes: 11 additions & 9 deletions public/javascripts/src/components/Visualizations.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,16 @@ var Visualization = require("./Visualizations/Visualization.jsx");
var React = require("react");
var ReactBootstrap = require("react-bootstrap");

var Summary = require("./Visualizations/Summary.jsx");
//var Summary = require("./Visualizations/Summary.jsx");

var Tabs = ReactBootstrap.Tabs,
Tab = ReactBootstrap.Tab,
Modal = ReactBootstrap.Modal,
Button = ReactBootstrap.Button;
Tab = ReactBootstrap.Tab;
//Modal = ReactBootstrap.Modal,
//Button = ReactBootstrap.Button;





/*
var OptionsBar = React.createClass({
getInitialState: function(){
Expand All @@ -34,9 +33,10 @@ var OptionsBar = React.createClass({
//console.log(self.state.showModal);
//console.log(this.props.currData);
var attributes = [];

for(var i in this.props.currData){
attributes.push(i);
if(this.props.currData.hasOwnProperty(i)){
attributes.push(i);
}
}
var url = "/save?attributes={list:"+(attributes)+"}";
Expand Down Expand Up @@ -72,6 +72,7 @@ var OptionsBar = React.createClass({
);
}
});
*/

var Visualizations = React.createClass({
render: function(){
Expand All @@ -87,8 +88,9 @@ var Visualizations = React.createClass({
count++;
//console.log(count);
//console.log(visualization.tabTitle);
if(!visualization.tabTitle)
if(!visualization.tabTitle){
visualization.tabTitle = visualization.visualizationType;
}
return(
<Tab title={visualization.tabTitle} eventKey={count} key={count} id={visualization.tabTitle}>
<div className="visualizationArea">
Expand Down
Loading

0 comments on commit 12d6afe

Please sign in to comment.