Skip to content

Commit

Permalink
Merge pull request #69 from RhoInc/v1.2.0
Browse files Browse the repository at this point in the history
Query Overview v1.2.0
  • Loading branch information
samussiah authored Jun 14, 2018
2 parents 3c9450c + f161a5a commit 4daa933
Show file tree
Hide file tree
Showing 48 changed files with 2,025 additions and 1,110 deletions.
1,273 changes: 835 additions & 438 deletions build/queryOverview.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "query-overview",
"version": "1.1.3",
"version": "1.2.0",
"description": "Interactive bar chart for exploration of query data from clinical trials",
"main": "./build/queryOverview.js",
"module": "./src/wrapper.js",
Expand Down
11 changes: 1 addition & 10 deletions scripts/configuration-markdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -96,17 +96,8 @@ function setDefault(setting) {
\------------------------------------------------------------------------------------------------*/

var webchartsSettingsFlag = 0,
webchartsSettings = fs.readFileSync('./src/defaultSettings.js', 'utf8')
webchartsSettings = fs.readFileSync('./src/configuration/webchartsSettings.js', 'utf8')
.split('\n')
.filter(line => {
if (line.indexOf('const webchartsSettings') > -1)
webchartsSettingsFlag = 1;

if (webchartsSettingsFlag === 1 && /};/.test(line))
webchartsSettingsFlag = 0;

return webchartsSettingsFlag;
});
webchartsSettings.splice(0,1,'{\r');
webchartsSettings.push('}');

Expand Down
114 changes: 106 additions & 8 deletions scripts/configuration.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
The most straightforward way to customize query-overview is by using a configuration object whose properties describe the behavior and appearance of the chart. Since query-overview is a Webcharts `chart` object, many default Webcharts settings are set in the [defaultSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/defaultSettings.js) as [described below](#Webcharts-Settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings.
The most straightforward way to customize query-overview is by using a configuration object whose properties describe the behavior and appearance of the chart. Since query-overview is a Webcharts `chart` object, many default Webcharts settings are set in the [defaultSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/defaultSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings.

In addition to the standard Webcharts settings several custom settings not available in the base Webcharts library have been added to query-overview to facilitate data mapping and other custom functionality. These custom settings are described in detail below. All defaults can be overwritten by users.

# Renderer-specific settings
The sections below describe each query-overview setting as of version 1.1.3.
The sections below describe each query-overview setting as of version 1.2.0.

## settings.form_col
`string`
Expand Down Expand Up @@ -67,12 +67,55 @@ an array of query statuses that dictates how they are ordered in the legend and



## settings.site_col
## settings.status_colors
`array`

an array of colors that determines the colors for query statuses

**default:**
```
[
"#fb9a99",
"#fdbf6f",
"#1f78b4",
"gray"
]
```



## settings.aging_col
`string`

site variable name
query age variable name

**default:** `"Site Name"`
**default:** `"Query Age Category"`



## settings.aging_order
`array`

an array of query age categories that dictates how they are ordered in the legend and chart

**default:** none



## settings.aging_colors
`array`

an array of colors that determines the colors for query age categories

**default:**
```
[
"#fcae91",
"#fb6a4a",
"#de2d26",
"#a50f15"
]
```



Expand All @@ -99,6 +142,52 @@ Group-by Label



## settings.status_groups
`array`

an array of Stratification variables by which to stratify the stacked bars

**default:** none

### settings.status_groups[].value_col
`string`

Stratification Variable

**default:** none

### settings.status_groups[].label
`string`

Stratification Label

**default:** none

### settings.status_groups[].order
`array`

Stratification Order

**default:** none

### settings.status_groups[].colors
`array`

Stratification Colors

**default:** none



## settings.site_col
`string`

site variable name

**default:** `"Site Name"`



## settings.filters
`array`

Expand Down Expand Up @@ -168,11 +257,20 @@ sort groups on the y-axis alphanumerically; by default groups are sorted by desc

allow the export of data to .csv via a button beneath the detail listing

**default:** `false`
**default:** `true`



## settings.nRowsPerPage
`number`

the number of rows displayed per page.

**default:** `10`

# Webcharts settings
The object below contains each Webcharts setting as of version 1.1.3.
The object below contains each Webcharts setting as of version 1.2.0.

```
{ x: { label: '# of Queries', behavior: 'flex' }, y: { type: 'ordinal', column: null, // set in syncSettings() label: 'Form', sort: 'total-descending' }, marks: [ { type: 'bar', per: [null], // set in syncSettings() split: null, // set in syncSettings() arrange: 'stacked', summarizeX: 'count', tooltip: null // set in syncSettings() } ], color_by: null, // set in syncSettings() color_dom: null, // set in syncSettings() legend: { location: 'top', label: 'Query Status', order: null // set in syncSettings() }, range_band: 15, margin: { right: '50' } // room for count annotation}
{ x: { label: '# of Queries', behavior: 'flex' }, y: { type: 'ordinal', column: null, // set in syncSettings() label: 'Form', sort: 'total-descending' }, marks: [ { type: 'bar', per: [null], // set in syncSettings() split: null, // set in syncSettings() arrange: 'stacked', summarizeX: 'count', tooltip: null // set in syncSettings() } ], color_by: null, // set in syncSettings() color_dom: null, // set in syncSettings() legend: { location: 'top', // label: 'Query Status', label: null, order: null // set in syncSettings() }, range_band: 15, margin: { right: '50' } // room for count annotation};}
```
Expand Down
96 changes: 90 additions & 6 deletions settings-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"title": "settings",
"description": "JSON schema for the configuration of query-overview",
"overview": "The most straightforward way to customize query-overview is by using a configuration object whose properties describe the behavior and appearance of the chart. Since query-overview is a Webcharts `chart` object, many default Webcharts settings are set in the [defaultSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/defaultSettings.js) as [described below](#webcharts-settings). Refer to the [Webcharts documentation](https://github.com/RhoInc/Webcharts/wiki/Chart-Configuration) for more details on these settings.\nIn addition to the standard Webcharts settings several custom settings not available in the base Webcharts library have been added to query-overview to facilitate data mapping and other custom functionality. These custom settings are described in detail below. All defaults can be overwritten by users.",
"version": "1.1.3",
"version": "1.2.0",
"type": "object",
"properties": {
"form_col": {
Expand Down Expand Up @@ -51,11 +51,53 @@
"Cancelled"
]
},
"site_col": {
"title": "Site Variable",
"description": "site variable name",
"status_colors": {
"title": "Query Status Color",
"description": "an array of colors that determines the colors for query statuses",
"type": "array",
"items": {
"title": "Query Status",
"description": "query status value",
"type": "string"
},
"defaultObject": [
"#fb9a99",
"#fdbf6f",
"#1f78b4",
"gray"
]
},
"aging_col": {
"title": "Query Age Variable",
"description": "query age variable name",
"type": "string",
"default": "Site Name"
"default": "Query Age Category"
},
"aging_order": {
"title": "Query Age Category Order",
"description": "an array of query age categories that dictates how they are ordered in the legend and chart",
"type": "array",
"items": {
"title": "Query Age Category",
"description": "query age value",
"type": "string"
}
},
"aging_colors": {
"title": "Query Age Category Color",
"description": "an array of colors that determines the colors for query age categories",
"type": "array",
"items": {
"title": "Query Age Category",
"description": "query age value",
"type": "string"
},
"defaultObject": [
"#fcae91",
"#fb6a4a",
"#de2d26",
"#a50f15"
]
},
"groups": {
"title": "Group-by Variables",
Expand All @@ -74,9 +116,45 @@
"description": "group-by variable label",
"type": "string"
}
}
}
},
"status_groups": {
"title": "Stratification Variables",
"description": "an array of Stratification variables by which to stratify the stacked bars",
"type": "array",
"items": {
"type": "object",
"properties": {
"value_col": {
"title": "Stratification Variable",
"description": "Stratification variable name",
"type": "string"
},
"label": {
"title": "Stratification Label",
"description": "Stratification variable label",
"type": "string"
},
"order": {
"title": "Stratification Order",
"description": "Stratification variable order",
"type": "array"
},
"colors": {
"title": "Stratification Colors",
"description": "Stratification variable colors",
"type": "array"
}
}
}
},
"site_col": {
"title": "Site Variable",
"description": "site variable name",
"type": "string",
"default": "Site Name"
},
"filters": {
"title": "Filter Variables",
"description": "an array of filter variables with which to filter the data",
Expand Down Expand Up @@ -133,7 +211,13 @@
"title": "Allow Listing Export?",
"description": "allow the export of data to .csv via a button beneath the detail listing",
"type": "boolean",
"default": false
"default": true
},
"nRowsPerPage": {
"title": "Number of rows displayed per page.",
"description": "the number of rows displayed per page.",
"type": "number",
"default": 10
}
}
}
4 changes: 1 addition & 3 deletions src/chart/onDataTransform.js
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
export default function onDataTransform() {
const context = this;
}
export default function onDataTransform() {}
4 changes: 1 addition & 3 deletions src/chart/onDestroy.js
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
export default function onDestroy() {
const context = this;
}
export default function onDestroy() {}
48 changes: 5 additions & 43 deletions src/chart/onDraw.js
Original file line number Diff line number Diff line change
@@ -1,45 +1,7 @@
export default function onDraw() {
const context = this;

//Sort summarized data by descending total.
this.current_data.sort(function(a, b) {
return b.total < a.total ? -1 : b.total > a.total ? 1 : b.total >= a.total ? 0 : NaN;
});

//Sort y-domain by descending total.
this.y_dom.sort(function(a, b) {
var order = context.current_data.map(function(d) {
return d.key;
});
return order.indexOf(b) < order.indexOf(a)
? -1
: order.indexOf(b) > order.indexOf(a)
? 1
: order.indexOf(b) >= order.indexOf(a)
? 0
: NaN;
});

//Limit y-domain to key values in summarized data.
this.y_dom = this.y_dom.filter(function(d, i) {
return (
context.current_data
.map(function(d) {
return d.key;
})
.indexOf(d) > -1
);
});
import setYDomain from './onDraw/setYDomain';
import setChartHeight from './onDraw/setChartHeight';

//Limit y-domain to first [chart.config.cutoff] values.
this.y_dom = this.y_dom.filter(function(d, i) {
return i >= context.y_dom.length - context.config.cutoff;
});

this.y_dom = this.config.alphabetize ? this.y_dom.sort(d3.descending) : this.y_dom;

//change chart height to match the current number of bars displayed
this.raw_height =
(+this.config.range_band + this.config.range_band * this.config.padding) *
this.y_dom.length;
export default function onDraw() {
setYDomain.call(this);
setChartHeight.call(this);
}
6 changes: 6 additions & 0 deletions src/chart/onDraw/setChartHeight.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default function setChartHeight() {
//Match chart height to number of bars currently displayed.
this.raw_height =
(+this.config.range_band + this.config.range_band * this.config.padding) *
this.y_dom.length;
}
26 changes: 26 additions & 0 deletions src/chart/onDraw/setYDomain.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
export default function setYDomain() {
//Sort summarized data by descending total.
this.current_data.sort(
(a, b) => (b.total < a.total ? -1 : b.total > a.total ? 1 : b.total >= a.total ? 0 : NaN)
);

//Sort y-domain by descending total.
this.y_dom.sort((a, b) => {
const order = this.current_data.map(d => d.key);
return order.indexOf(b) < order.indexOf(a)
? -1
: order.indexOf(b) > order.indexOf(a)
? 1
: order.indexOf(b) >= order.indexOf(a) ? 0 : NaN;
});

//Limit y-domain to key values in summarized data.
this.y_dom = this.y_dom.filter(d => this.current_data.map(di => di.key).indexOf(d) > -1);

//Sort y-domain alphanumerically or descending total.
this.y_dom = this.config.alphabetize ? this.y_dom.sort(d3.descending) : this.y_dom;

//Limit y-domain to first [chart.config.cutoff] values.
if (this.config.cutoff !== 'All')
this.y_dom = this.y_dom.filter((d, i) => i >= this.y_dom.length - this.config.cutoff);
}
Loading

0 comments on commit 4daa933

Please sign in to comment.