Skip to content

Commit

Permalink
Merge pull request #157 from RhoInc/dev-v2.1.3
Browse files Browse the repository at this point in the history 
Query Overview v2.1.3
  • Loading branch information
@pburnsdata
pburnsdata authored Jul 30, 2019
2 parents 635ab0e + 0dce4ff commit 29608f9
Show file tree
Hide file tree
Showing 14 changed files with 151 additions and 119 deletions.
53 changes: 15 additions & 38 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "query-overview",
"version": "2.1.2",
"version": "2.1.3",
"description": "Interactive bar chart for exploration of query data from clinical trials",
"module": "./src/index.js",
"main": "./queryOverview.js",
Expand Down
110 changes: 71 additions & 39 deletions queryOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -695,8 +695,10 @@
'.qo-component--controls .wc-controls {' +
' margin-bottom: 0;' +
' display: flex;' +
' width: 90%;' +
' width: 100%;' +
' justify-content: space-around;' +
' border-bottom: 1px solid #aaa;' +
' margin-bottom: 5px;' +
'}',
'.qo-control-grouping {' + ' display: inline-block;' + '}',
'.qo-button {' + ' float: left;' + ' display: block;' + '}',
Expand All @@ -716,22 +718,20 @@
Other controls
\---------------------------------------------------------------------------------****/
'.qo-control-grouping--other-controls {' +
' float: left;' +
' display: flex;' +
' flex-wrap: wrap;' +
' justify-content: space-evenly;' +
' float: right;' +
' width: 25%;' +
'}',
'.qo-control-grouping--other-controls .control-group {' +
' width: 100%;' +
' margin-bottom: 15px;' +
' margin-bottom: 5px;' +
'}',
'.qo-control-grouping--other-controls .control-group:nth-child(n+3) {' +
' border-top: 1px solid #aaa;' +
'}',
'.qo-control-grouping--other-controls .control-group .wc-control-label {' +
' text-align: center;' +
' font-size: 110%;' +
' width: 100%;' +
'}', //dropdowns
'.qo-dropdown {' + '}',
'.qo-dropdown .wc-control-label {' + '}',
Expand Down Expand Up @@ -779,8 +779,11 @@
'.qo-component--chart {' +
' width: 100%;' +
' margin: 0 auto;' +
' margin-bottom: 5px;' +
' padding-bottom: 5px;' +
' float: left;' +
' position: relative;' +
' border-bottom: 1px solid #aaa;' +
'}',
'.qo-button--reset-chart {' +
' position: absolute;' +
Expand All @@ -799,6 +802,7 @@
' padding: 3px 0;' +
'}',
'.qo-component--chart .wc-chart {' + ' z-index: 1;' + '}',
'.qo-component--chart .legend {' + ' width: auto;' + '}',
'.qo-component--chart .legend-title {' + ' cursor: help;' + '}',
'.qo-component--chart .legend-item {' +
' cursor: pointer;' +
Expand All @@ -807,10 +811,6 @@
' padding-left: 8px;' +
' margin-right: 5px !important;' +
'}',
'.qo-component--chart .y.axis .tick text {' +
' font-family: "Lucida Console", "Courier New", "Monospace";' +
' font-size: 14px;' +
'}',
'.qo-footnote {' +
' width: 100%;' +
' text-align: center;' +
Expand Down Expand Up @@ -852,49 +852,37 @@
}

function defineListingSettings() {
var _this = this;

this.listing.config.cols = this.config.details
? this.config.details.map(function(d) {
return d.value_col;
})
: Object.keys(this.raw_data[0]).filter(function(key) {
return key !== 'Form: Field';
});
return ['Form: Field', _this.config.recency_category_col].indexOf(key) < 0;
}); // remove derived variables (recency_category_col is captured in variable queryrecency, derived in ./defineNewVariables)

this.listing.config.headers = this.config.details
? this.config.details.map(function(d) {
return d.label;
})
: Object.keys(this.raw_data[0]).filter(function(key) {
return key !== 'Form: Field';
return ['Form: Field', _this.config.recency_category_col].indexOf(key) < 0;
});
}

function defineNewVariables() {
var _this = this;

var queryAgeCol = this.config.status_groups.find(function(status_group) {
return status_group.label === 'Query Age';
}).value_col;
var queryRecencyCol = this.config.filters.find(function(filter) {
return filter.label === 'Query Recency';
}).value_col;
var queryAgeCol = this.config.status_groups.find(function(status_group) {
return status_group.label === 'Query Age';
}).value_col;
this.raw_data.forEach(function(d) {
//Concatenate form and field to avoid duplicates across forms.
d['Form: Field'] = d[_this.config.form_col] + ': ' + d[_this.config.field_col]; //Define query age.

if (_this.config.age_statuses.indexOf(d[_this.config.status_col]) < 0)
d[queryAgeCol] = d[_this.config.status_col];
else {
var age = +d[_this.config.age_col];

_this.config.ageRanges.forEach(function(ageRange, i) {
if (i === 0 && ageRange[0] <= age && age <= ageRange[1])
d[queryAgeCol] = _this.config.ageRangeCategories[i];
else if (i === _this.config.ageRanges.length - 1 && ageRange[0] < age)
d[queryAgeCol] = _this.config.ageRangeCategories[i];
else if (ageRange[0] < age && age <= ageRange[1])
d[queryAgeCol] = _this.config.ageRangeCategories[i];
});
} //Define query recency.
d['Form: Field'] = d[_this.config.form_col] + ': ' + d[_this.config.field_col]; //Define query recency.

if (d.hasOwnProperty(_this.config.recency_category_col)) {
d[queryRecencyCol] = d[_this.config.recency_category_col] || 'N/A';
Expand All @@ -912,6 +900,21 @@
else if (recencyRange[0] < recency && recency <= recencyRange[1])
d[queryRecencyCol] = _this.config.recencyRangeCategories[i];
});
} //Define query age.

if (_this.config.age_statuses.indexOf(d[_this.config.status_col]) < 0)
d[queryAgeCol] = d[_this.config.status_col];
else {
var age = +d[_this.config.age_col];

_this.config.ageRanges.forEach(function(ageRange, i) {
if (i === 0 && ageRange[0] <= age && age <= ageRange[1])
d[queryAgeCol] = _this.config.ageRangeCategories[i];
else if (i === _this.config.ageRanges.length - 1 && ageRange[0] < age)
d[queryAgeCol] = _this.config.ageRangeCategories[i];
else if (ageRange[0] < age && age <= ageRange[1])
d[queryAgeCol] = _this.config.ageRangeCategories[i];
});
}
});
}
Expand Down Expand Up @@ -1636,7 +1639,7 @@
})
) *
this.config.fontSize *
0.5 +
0.6 +
this.config.fontSize * 1.5 * 1.5 +
6; //Set the left margin to the minimum of one quarter of the container width and the maximum number of characters in the y-axis tick labels (minimum: 100 pixels).

Expand Down Expand Up @@ -1725,13 +1728,22 @@
this.svg.selectAll('.y.axis .tick').remove();
}

function updateXAxisLabel$1() {
// Make sure that the Y axis Label is tucked safely beneath reset chart button
this.svg
.select('.y.axis')
.select('.axis-title')
.attr('transform', 'translate(5,0)rotate(-90)');
}

function onDraw() {
setLeftMargin.call(this);
setXDomain.call(this);
setYDomain.call(this);
setChartHeight.call(this);
updateXAxisLabel.call(this);
resetYAxisTickLabels.call(this);
updateXAxisLabel$1.call(this);
}

function legendFilter() {
Expand Down Expand Up @@ -2379,12 +2391,6 @@
description:
'Number of days between query open date and data extraction date, regardless of query status.'
},
{
variable: this.chart.initialSettings.recency_category_col,
label: 'Query Recency',
description:
'Number of days by category between query open date and data extraction date, regardless of query status. Categories include last 7, 14, and 30 days.'
},
{
variable: 'queryrecency',
label: 'Query Recency',
Expand Down Expand Up @@ -2646,7 +2652,33 @@
}

function onDraw$1() {
var _this = this;

//console.log(this.table.selectAll('thead tr th'));
//console.log(this.table.selectAll('tbody tr:first-child td'));
var variables = Object.keys(this.data.raw[0]) //.sort(d3.ascending)
.map(function(variable, i) {
return {
variable: variable,
column: _this.config.cols.find(function(col) {
return col === variable;
}),
columnIndex: _this.config.cols.findIndex(function(col) {
return col === variable;
}),
header:
_this.config.headers[
_this.config.cols.findIndex(function(col) {
return col === variable;
})
],
headerIndex: _this.config.headers.findIndex(function(col) {
return col === variable;
})
};
}); //console.table(variables.sort((a,b) => a.index - b.index));
//Add tooltips to column headers.

addHeaderTooltips.call(this); //Update default Webcharts column sorting.

updateColumnSorting.call(this); //Truncate cells with length greater than `settings.truncation_cutoff`.
Expand Down
4 changes: 2 additions & 2 deletions scripts/configuration-wiki.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ The most straightforward way to customize query-overview is by using a configura
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 2.1.2.
The sections below describe each query-overview setting as of version 2.1.3.

## settings.site_col
`string`
Expand Down Expand Up @@ -447,7 +447,7 @@ cell text past this cutoff will be truncated and the full text will be captured
**default:** `100`

# Webcharts settings
The objects below contain Webcharts settings for each display as of version 2.1.2 of the Query Overview.
The objects below contain Webcharts settings for each display as of version 2.1.3 of the Query Overview.

## Chart
```
Expand Down
2 changes: 1 addition & 1 deletion settings-schema.json
View file
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 [chartSettings.js file](https://github.com/RhoInc/query-overview/blob/master/src/configuration/chartSettings.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": "2.1.2",
"version": "2.1.3",
"type": "object",
"data-guidelines": "The Query Overview accepts [JSON](https://en.wikipedia.org/wiki/JSON) data of the format returned by [`d3.csv()`](https://github.com/d3/d3-3.x-api-reference/blob/master/CSV.md). The renderer visualizes clinical query data with **one row per query** plus the required variables specified below.",
"data-structure": "one record per query",
Expand Down
2 changes: 2 additions & 0 deletions src/chart/onDraw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import setYDomain from './onDraw/setYDomain';
import setChartHeight from './onDraw/setChartHeight';
import updateXAxisLabel from './onDraw/updateXAxisLabel';
import resetYAxisTickLabels from './onDraw/resetYAxisTickLabels';
import updateYAxisLabel from './onDraw/updateYAxisLabel';

export default function onDraw() {
setLeftMargin.call(this);
Expand All @@ -12,4 +13,5 @@ export default function onDraw() {
setChartHeight.call(this);
updateXAxisLabel.call(this);
resetYAxisTickLabels.call(this);
updateYAxisLabel.call(this);
}
2 changes: 1 addition & 1 deletion src/chart/onDraw/setLeftMargin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function setLeftMargin() {

//Find maximum number of characters in the y-axis tick labels (minimum: 7 characters).
this.config.maxYAxisTickLabelLength =
Math.max(7, max(this.y_dom, d => d.length)) * this.config.fontSize * 0.5 +
Math.max(7, max(this.y_dom, d => d.length)) * this.config.fontSize * 0.6 +
this.config.fontSize * 1.5 * 1.5 +
6;

Expand Down
7 changes: 7 additions & 0 deletions src/chart/onDraw/updateYAxisLabel.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export default function updateXAxisLabel() {
// Make sure that the Y axis Label is tucked safely beneath reset chart button
this.svg
.select('.y.axis')
.select('.axis-title')
.attr('transform', 'translate(5,0)rotate(-90)');
}
Loading

0 comments on commit 29608f9

Please sign in to comment.