Skip to content

Histogram doc and bug fixes #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 30, 2016
Merged

Histogram doc and bug fixes #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions docs/firefly-api-overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,32 @@ Firefly React components can be found in `firefly.ui` module.
| ---------- | ---- | ----------- |
| div | string or Object | a div element or a string id of the div element |

<br>
*Example:*
```js
const props = {
// data is an array of rows,
// first col - nPoints or number of points in the bin, second col - binMin, third col - binMax
// supports variable length bins
data : [
[1,1,10],
[10,10,100],
[100,100,1000],
[1000,1000,10000],
[100,10000,100000],
[10,100000,1000000],
[1,1000000,10000000]
],
width: 400,
height: 200,
logs: 'xy',
desc: 'Both X and Y are using log scale',
binColor: '#336699'
};
// render Histogram component in the div with 'histogramHere' id
firefly.util.renderDOM('histogramHere', firefly.ui.Histogram, props);
```


### Dispatching and watching actions

Expand Down
2 changes: 1 addition & 1 deletion src/firefly/html/demo/ffapi-2images.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -328,4 +328,4 @@ <h3>Firefly - new API demo</h3>
}
</script>

<script type="text/javascript" src="http://localhost:8080/firefly/firefly_loader.js"></script>
<script type="text/javascript" src="../firefly_loader.js"></script>
32 changes: 28 additions & 4 deletions src/firefly/html/demo/ffapi-highlevel-charttest.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,51 @@ <h2>
</h2>
</div>

<div id="chartHere" style="display: inline-block; width: 800px; height: 550px; border: solid 1px;"></div>


<div id="histogramHere" style="width: 800px; height: 550px; border: solid 1px"></div>
<br/><br/>
<div id="chartHere" style="width: 800px; height: 550px; border: solid 1px;"></div>

<script type="text/javascript">
{
onFireflyLoaded= function(firefly) {

// show histogram data no options, no connection to the table)
const props = {
// data is an array of rows,
// first col - nPoints or number of points in the bin, second col - binMin, third col - binMax
// (supports variable length bins
data : [
[1,1,10],
[10,10,100],
[100,100,1000],
[1000,1000,10000],
[100,10000,100000],
[10,100000,1000000],
[1,1000000,10000000]
],
width: 800,
height: 550,
logs: 'xy',
desc: 'Both X and Y are using log scale',
binColor: '#336699'
};
firefly.util.renderDOM('histogramHere', firefly.ui.Histogram, props);

// show scatter chart
firefly.debug= true;
chartParams = {
source: 'http://web.ipac.caltech.edu/staff/roby/demo/WiseDemoTable.tbl',
xCol: 'ra1',
yCol: 'dec1'
};
firefly.showXYPlot('chartHere', chartParams);



firefly.showXYPlot('chartHere', chartParams);
}
}


</script>


Expand Down
2 changes: 1 addition & 1 deletion src/firefly/html/demo/ffapi-highlevel-test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,6 +501,6 @@
</script>


<script type="text/javascript" src="http://localhost:8080/firefly/firefly_loader.js"></script>
<script type="text/javascript" src="../firefly_loader.js"></script>


2 changes: 2 additions & 0 deletions src/firefly/js/api/ApiBuild.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {TablesContainer} from '../tables/ui/TablesContainer.jsx';
import {TablePanel} from '../tables/ui/TablePanel.jsx';
import {ChartsContainer} from '../charts/ui/ChartsContainer.jsx';
import {ChartsTableViewPanel} from '../charts/ui/ChartsTableViewPanel.jsx';
import {Histogram} from '../charts/ui/Histogram.jsx';
import {PopupMouseReadoutMinimal} from '../visualize/ui/PopupMouseReadoutMinimal.jsx';
import {PopupMouseReadoutFull} from '../visualize/ui/PopupMouseReadoutFull.jsx';

Expand Down Expand Up @@ -186,6 +187,7 @@ export function buildLowlevelAPI() {
TablePanel,
ChartsContainer,
ChartsTableViewPanel,
Histogram,
PopupMouseReadoutMinimal,
PopupMouseReadoutFull
};
Expand Down
61 changes: 48 additions & 13 deletions src/firefly/js/charts/ui/Histogram.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,30 @@ function shadeColor(color, percent) {
return `#${(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1)}`;
}

function padRight(num) {
return num+Math.abs(num*Math.pow(10,-9));
}

function padLeft(num) {
return num-Math.abs(num*Math.pow(10,-9));
}


export class Histogram extends React.Component {

/**
* @summary React Component to display histogram.
*
* @param {Object} props
* @param {Array.number[]} props.data - array of numbers [0] - nInBin, [1] - binMin, [2] - binMax
* @param {number} props.width - width of the chart in pixels
* @param {number} props.height - height of the chart in pixels
* @param {string} [props.logs] - can have values 'x', 'y', or 'xy'
* @param {string} [props.binColor='#d1d1d1'] - darker bin color
* @param {string} props.desc - description
* @public
* @memberof firefly.ui
*/
constructor(props) {
super(props);
this.setChartConfig = this.setChartConfig.bind(this);
Expand All @@ -32,7 +53,7 @@ export class Histogram extends React.Component {
const {data, width, height, logs, reversed, desc, binColor} = this.props;
// should rerender only if data or bin color has changed
// otherwise just change the existing chart
if (data != nextProps.data || binColor !== nextProps.binColor) { return true; }
if (data !== nextProps.data || binColor !== nextProps.binColor) { return true; }
const chart = this.refs.chart && this.refs.chart.getChart();
if (chart) {
let doUpdate = false;
Expand Down Expand Up @@ -112,9 +133,12 @@ export class Histogram extends React.Component {
* @return {Boolean} f data points are set, false if no points are present
*/
setChartConfig(config) {

// how many significant digits should we preserve? ~12?
// EPSILON 2^(-52)
const TINY_OFFSET = 100*Number.EPSILON;

const {binColor, data}= this.props;
const {binColor, logs, data}= this.props;

if (!data || data.length < 1) {
return false;
Expand Down Expand Up @@ -145,14 +169,24 @@ export class Histogram extends React.Component {
}

try {

// what should be the minimum y value?
let minY = 0;
if (logs && logs.includes('y') && data.length>0) {
const minYData = data.reduce((minVal, row) => {
return Math.min(minVal, row[0]);
}, data[0][0]);
minY = minYData/10;
}
let lastBinMax = data[0][1];
if (areaPlot) {

// point before the first one
points.push({
name: '',
range: '',
x: lastBinMax - 2*TINY_OFFSET,
y: 0
x: padLeft(lastBinMax),
y: minY
});
}
data.forEach(function (value, index) {
Expand All @@ -172,14 +206,14 @@ export class Histogram extends React.Component {
points.push({
name: gapCenterStr,
range: gapRangeStr,
x: lastBinMax + TINY_OFFSET,
y: 0
x: padRight(lastBinMax),
y: minY
});
points.push({
name: gapCenterStr,
range: gapRangeStr,
x: data[index][1] - TINY_OFFSET,
y: 0
x: padLeft(data[index][1]),
y: minY
});
}
lastBinMax = data[index][2];
Expand All @@ -203,7 +237,7 @@ export class Histogram extends React.Component {
name: centerStr,
range: rangeStr,
// x - binmax
x: (xrange > TINY_OFFSET) ? (data[index][2] - TINY_OFFSET) : (data[index][1] + TINY_OFFSET),
x: (xrange > TINY_OFFSET) ? padLeft(data[index][2]) : padRight(data[index][1]),
// y - number of points in the bin
y: data[index][0]
});
Expand Down Expand Up @@ -234,10 +268,11 @@ export class Histogram extends React.Component {
points.push({
name: '',
range: '',
x: lastBinMax + 2*TINY_OFFSET,
y: 0
x: padRight(lastBinMax),
y: minY
});
}
config.yAxis.min = minY;
}
catch(e) {
error = e;
Expand Down Expand Up @@ -270,8 +305,8 @@ export class Histogram extends React.Component {
renderTo: 'container',
type: chartType,
alignTicks: false,
width: Number(width),
height: Number(height),
width: width? Number(width) : undefined,
height: height? Number(height) : undefined,
borderColor: '#a5a5a5',
borderWidth: 1
},
Expand Down