DM-7824: merge hiistogram doc and bug fixes, pull request #197 from

tgoldina · web-flow · commit 8baecddd691f · 2016-09-30T14:46:45.000-07:00
DM-7824: Histogram doc and bug fixes
diff --git a/docs/firefly-api-overview.md b/docs/firefly-api-overview.md
@@ -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
 
diff --git a/src/firefly/html/demo/ffapi-2images.html b/src/firefly/html/demo/ffapi-2images.html
@@ -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>
diff --git a/src/firefly/html/demo/ffapi-highlevel-charttest.html b/src/firefly/html/demo/ffapi-highlevel-charttest.html
@@ -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>
 
 
diff --git a/src/firefly/html/demo/ffapi-highlevel-test.html b/src/firefly/html/demo/ffapi-highlevel-test.html
@@ -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>
 
 
diff --git a/src/firefly/js/api/ApiBuild.js b/src/firefly/js/api/ApiBuild.js
@@ -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';
 
@@ -186,6 +187,7 @@ export function buildLowlevelAPI() {
         TablePanel,
         ChartsContainer,
         ChartsTableViewPanel,
+        Histogram,
         PopupMouseReadoutMinimal,
         PopupMouseReadoutFull
     };
diff --git a/src/firefly/js/charts/ui/Histogram.jsx b/src/firefly/js/charts/ui/Histogram.jsx
@@ -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);
@@ -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;
@@ -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;
@@ -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) {
@@ -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];
@@ -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]
                         });
@@ -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;
@@ -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
             },

Original file line number	Diff line number	Diff line change
`@@ -328,4 +328,4 @@ <h3>Firefly - new API demo</h3>`
`328`	`328`	`}`
`329`	`329`	`</script>`
`330`	`330`
`331`		`-<script type="text/javascript" src="http://localhost:8080/firefly/firefly_loader.js"></script>`
	`331`	`+<script type="text/javascript" src="../firefly_loader.js"></script>`
Original file line number	Diff line number	Diff line change
`@@ -501,6 +501,6 @@`
`501`	`501`	`</script>`
`502`	`502`
`503`	`503`
`504`		`-<script type="text/javascript" src="http://localhost:8080/firefly/firefly_loader.js"></script>`
	`504`	`+<script type="text/javascript" src="../firefly_loader.js"></script>`
`505`	`505`
`506`	`506`