@windborne/grapher 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windborne/grapher",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Graphing library",
   "main": "bundle.js",
   "publishConfig": {},

package/readme.md

@@ -98,6 +98,7 @@ The `series` prop requires an array of objects, where each object represents a d
 - **zeroLineWidth**: Width of the zero line, only applies to bar and area rendering (number)
 - **zeroLineColor**: Color of the zero line, only applies to bar and area rendering (string)
 - **pointRadius**: Radius of points, only applies to area rendering (number)
+- **tooltipWidth**: Expected width of the tooltip (number). Will make the tooltip switch sides when this width plus the tooltip left position is greater than the graph width.
 
 #### Series Data Formats
 Grapher supports multiple data formats within a series:

package/src/components/context_menu.js

@@ -41,7 +41,7 @@ export default class ContextMenu extends React.PureComponent {
 
         const style = { left: x, top: y, width: '150px'};
         
-        if (!showing || !value || value.toLocaleString() === 'Invalid Date') {
+        if (!showing || !value || value.toLocaleString() === 'Invalid Date' || isNaN(x) || isNaN(y)) {
             return null;
         }
 
@@ -61,9 +61,9 @@ export default class ContextMenu extends React.PureComponent {
 
 ContextMenu.propTypes = {
     contextMenu: PropTypes.shape({
-        x: PropTypes.number.isRequired,
-        y: PropTypes.number.isRequired,
-        showing: PropTypes.bool.isRequired,
+        x: PropTypes.number,
+        y: PropTypes.number,
+        showing: PropTypes.bool,
         value: PropTypes.oneOfType([
             PropTypes.instanceOf(Date),
             PropTypes.number,

package/src/components/tooltip.js

@@ -25,6 +25,10 @@ function getYLabelContent({ yLabel, y, fullYPrecision}) {
         }
     }
 
+    if (typeof yLabel === 'object') {
+        return formatY(y);
+    }
+
     return yLabel || formatY(y);
 }
 
@@ -112,7 +116,10 @@ export default class Tooltip extends React.PureComponent {
             const { x, y, pixelY, pixelX, series, index, xLabel, yLabel, fullYPrecision } = tooltip;
 
             const axisLabel = (series.name || series.yKey || index).toString();
-            const width = Math.max(axisLabel.length, (xLabel || formatX(x, formatXOptions)).length + 4, getYLabelContent({ yLabel, y, fullYPrecision}).length + 4) * 7.5;
+            let width = Math.max(axisLabel.length, (xLabel || formatX(x, formatXOptions)).length + 4, getYLabelContent({ yLabel, y, fullYPrecision}).length + 4) * 7.5;
+            if (series.tooltipWidth) {
+                width = series.tooltipWidth;
+            }
 
             let fixedPosition = this.props.elementWidth < (width + 2*caretSize + 2*caretPadding);
 
@@ -220,7 +227,7 @@ export default class Tooltip extends React.PureComponent {
                 for (let group of groupedTooltips) {
                     if (Math.abs(group.pixelX - tooltip.pixelX) <= combinationThreshold) {
                         group.tooltips.push(tooltip);
-                        if (tooltip.pixelX < group.pixelX) {
+                        if (tooltip.pixelX > group.pixelX) {
                             group.pixelX = tooltip.pixelX;
                             group.multiplier = tooltip.multiplier;
                         }
@@ -375,7 +382,7 @@ Tooltip.propTypes = {
         pixelY: PropTypes.number,
         color: PropTypes.string,
         xLabel: PropTypes.string,
-        yLabel: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        yLabel: PropTypes.any,
         fullYPrecision: PropTypes.bool
     })),
     axisCount: PropTypes.number.isRequired,

package/src/helpers/custom_prop_types.js

@@ -70,7 +70,8 @@ const SingleSeries = PropTypes.shape({
     gradient: PropTypes.array, // only applies to area
     zeroLineWidth: PropTypes.number, // only applies to bar and area
     zeroLineColor: PropTypes.string,  // only applies to bar and area
-    pointRadius: PropTypes.number // only applies to area
+    pointRadius: PropTypes.number, // only applies to area
+    tooltipWidth: PropTypes.number
 });
 
 const Series = PropTypes.arrayOf(SingleSeries);