@nivo/axes - npm Package Compare versions

Comparing version 0.50.0 to 0.51.0

cjs/nivo-axes.js

@@ -9,2 +9,5 @@ 'use strict';
 var isArray = _interopDefault(require('lodash/isArray'));
+var isFunction = _interopDefault(require('lodash/isFunction'));
+var d3TimeFormat = require('d3-time-format');
+var d3Format = require('d3-format');
 var core = require('@nivo/core');
@@ -14,5 +17,2 @@ var React = require('react');
 var PropTypes = _interopDefault(require('prop-types'));
-var isFunction = _interopDefault(require('lodash/isFunction'));
-var d3Format = require('d3-format');
-var d3TimeFormat = require('d3-time-format');
 var compose = _interopDefault(require('recompose/compose'));
@@ -166,2 +166,15 @@ var withPropsOnChange = _interopDefault(require('recompose/withPropsOnChange'));
 
+var getFormatter = function getFormatter(format, scale) {
+    if (!format || isFunction(format)) return format;
+
+    if (scale.type === 'time') {
+        var f = d3TimeFormat.timeFormat(format);
+        return function (d) {
+            return f(new Date(d));
+        };
+    }
+
+    return d3Format.format(format);
+};
+
 var AxisTick = function (_PureComponent) {
@@ -300,3 +313,3 @@ inherits(AxisTick, _PureComponent);
             tickRotation = _props.tickRotation,
-            tickValueFormat = _props.tickValueFormat,
+            format = _props.format,
             renderTick = _props.renderTick,
@@ -377,3 +390,3 @@ legend = _props.legend,
                         tickIndex: tickIndex,
-                        format: tickValueFormat,
+                        format: format,
                         rotate: tickRotation,
@@ -435,3 +448,3 @@ textBaseline: textBaseline,
                                         tickIndex: tickIndex,
-                                        format: tickValueFormat,
+                                        format: format,
                                         textBaseline: textBaseline,
@@ -501,13 +514,5 @@ textAnchor: textAlign,
         scale = _ref3.scale;
-
-    if (!format || isFunction(format)) {
-        return { format: format };
-    } else if (scale.type === 'time') {
-        var f = d3TimeFormat.timeFormat(format);
-        return { format: function format(d) {
-                return f(new Date(d));
-            } };
-    } else {
-        return { format: d3Format.format(format) };
-    }
+    return {
+        format: getFormatter(format, scale)
+    };
 }), pure);
@@ -523,3 +528,3 @@
     tickRotation: PropTypes.number,
-    tickFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
     renderTick: PropTypes.func,
@@ -627,3 +632,3 @@ legend: PropTypes.node,
         tickRotation = _ref$tickRotation === undefined ? 0 : _ref$tickRotation,
-        tickValueFormat = _ref.tickValueFormat,
+        format = _ref.format,
         theme = _ref.theme;
@@ -669,3 +674,3 @@
 
-        var value = tickValueFormat !== undefined ? tickValueFormat(tick.value) : tick.value;
+        var value = format !== undefined ? format(tick.value) : tick.value;
 
@@ -683,6 +688,45 @@ ctx.save();
 
+var positions$1 = ['top', 'right', 'bottom', 'left'];
+
+var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) {
+    var xScale = _ref2.xScale,
+        yScale = _ref2.yScale,
+        width = _ref2.width,
+        height = _ref2.height,
+        top = _ref2.top,
+        right = _ref2.right,
+        bottom = _ref2.bottom,
+        left = _ref2.left,
+        theme = _ref2.theme;
+
+    var axes = { top: top, right: right, bottom: bottom, left: left };
+
+    positions$1.forEach(function (position) {
+        var axis = axes[position];
+
+        if (!axis) return null;
+
+        var isXAxis = position === 'top' || position === 'bottom';
+        var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
+        var scale = isXAxis ? xScale : yScale;
+        var format = getFormatter(axis.format, scale);
+
+        renderAxisToCanvas(ctx, _extends({}, axis, {
+            axis: isXAxis ? 'x' : 'y',
+            x: position === 'right' ? width : 0,
+            y: position === 'bottom' ? height : 0,
+            scale: scale,
+            format: format,
+            length: isXAxis ? width : height,
+            ticksPosition: ticksPosition,
+            theme: theme
+        }));
+    });
+};
+
 exports.Axes = Axes;
 exports.Axis = Axis$1;
 exports.renderAxisToCanvas = renderAxisToCanvas;
+exports.renderAxesToCanvas = renderAxesToCanvas;
 exports.axisPropTypes = axisPropTypes;
 exports.axisPropType = axisPropType;

package.json

 {
   "name": "@nivo/axes",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "license": "MIT",
@@ -19,2 +19,3 @@ "author": {
     "index.js",
+    "index.d.ts",
     "cjs/",
@@ -24,3 +25,3 @@ "umd/"
   "dependencies": {
-    "@nivo/core": "0.50.0",
+    "@nivo/core": "0.51.0",
     "d3-format": "^1.3.2",
@@ -39,3 +40,3 @@ "d3-time-format": "^2.1.3",
   },
-  "gitHead": "934117e4d2873a2a5684aa8e713d5b0e788cc67a"
+  "gitHead": "a17dfedf502a75b969e205620231a5c1fb6a1d67"
 }

umd/nivo-axes.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/isNumber'), require('lodash/isArray'), require('@nivo/core'), require('react'), require('prop-types'), require('lodash/isFunction'), require('d3-format'), require('d3-time-format'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('recompose/setDisplayName'), require('react-motion')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash/isNumber', 'lodash/isArray', '@nivo/core', 'react', 'prop-types', 'lodash/isFunction', 'd3-format', 'd3-time-format', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'recompose/setDisplayName', 'react-motion'], factory) :
-  (factory((global.nivo = global.nivo || {}),global['lodash/isNumber'],global['lodash/isArray'],global.nivo,global.React,global.PropTypes,global['lodash/isFunction'],global.d3,global.d3,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.RecomposeSetDisplayName,global.ReactMotion));
-}(this, (function (exports,isNumber,isArray,core,React,PropTypes,isFunction,d3Format,d3TimeFormat,compose,withPropsOnChange,pure,setDisplayName,reactMotion) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash/isNumber'), require('lodash/isArray'), require('lodash/isFunction'), require('d3-time-format'), require('d3-format'), require('@nivo/core'), require('react'), require('prop-types'), require('recompose/compose'), require('recompose/withPropsOnChange'), require('recompose/pure'), require('recompose/setDisplayName'), require('react-motion')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'lodash/isNumber', 'lodash/isArray', 'lodash/isFunction', 'd3-time-format', 'd3-format', '@nivo/core', 'react', 'prop-types', 'recompose/compose', 'recompose/withPropsOnChange', 'recompose/pure', 'recompose/setDisplayName', 'react-motion'], factory) :
+  (factory((global.nivo = global.nivo || {}),global['lodash/isNumber'],global['lodash/isArray'],global['lodash/isFunction'],global.d3,global.d3,global.nivo,global.React,global.PropTypes,global.RecomposeCompose,global.RecomposeWithPropsOnChange,global.RecomposePure,global.RecomposeSetDisplayName,global.ReactMotion));
+}(this, (function (exports,isNumber,isArray,isFunction,d3TimeFormat,d3Format,core,React,PropTypes,compose,withPropsOnChange,pure,setDisplayName,reactMotion) { 'use strict';
 
   isNumber = isNumber && isNumber.hasOwnProperty('default') ? isNumber['default'] : isNumber;
   isArray = isArray && isArray.hasOwnProperty('default') ? isArray['default'] : isArray;
+  isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction;
   var React__default = 'default' in React ? React['default'] : React;
   PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
-  isFunction = isFunction && isFunction.hasOwnProperty('default') ? isFunction['default'] : isFunction;
   compose = compose && compose.hasOwnProperty('default') ? compose['default'] : compose;
@@ -159,2 +159,15 @@ withPropsOnChange = withPropsOnChange && withPropsOnChange.hasOwnProperty('default') ? withPropsOnChange['default'] : withPropsOnChange;
 
+  var getFormatter = function getFormatter(format, scale) {
+      if (!format || isFunction(format)) return format;
+
+      if (scale.type === 'time') {
+          var f = d3TimeFormat.timeFormat(format);
+          return function (d) {
+              return f(new Date(d));
+          };
+      }
+
+      return d3Format.format(format);
+  };
+
   var AxisTick = function (_PureComponent) {
@@ -293,3 +306,3 @@ inherits(AxisTick, _PureComponent);
               tickRotation = _props.tickRotation,
-              tickValueFormat = _props.tickValueFormat,
+              format = _props.format,
               renderTick = _props.renderTick,
@@ -370,3 +383,3 @@ legend = _props.legend,
                           tickIndex: tickIndex,
-                          format: tickValueFormat,
+                          format: format,
                           rotate: tickRotation,
@@ -428,3 +441,3 @@ textBaseline: textBaseline,
                                           tickIndex: tickIndex,
-                                          format: tickValueFormat,
+                                          format: format,
                                           textBaseline: textBaseline,
@@ -494,13 +507,5 @@ textAnchor: textAlign,
           scale = _ref3.scale;
-
-      if (!format || isFunction(format)) {
-          return { format: format };
-      } else if (scale.type === 'time') {
-          var f = d3TimeFormat.timeFormat(format);
-          return { format: function format(d) {
-                  return f(new Date(d));
-              } };
-      } else {
-          return { format: d3Format.format(format) };
-      }
+      return {
+          format: getFormatter(format, scale)
+      };
   }), pure);
@@ -516,3 +521,3 @@
       tickRotation: PropTypes.number,
-      tickFormat: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+      format: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
       renderTick: PropTypes.func,
@@ -620,3 +625,3 @@ legend: PropTypes.node,
           tickRotation = _ref$tickRotation === undefined ? 0 : _ref$tickRotation,
-          tickValueFormat = _ref.tickValueFormat,
+          format = _ref.format,
           theme = _ref.theme;
@@ -662,3 +667,3 @@
 
-          var value = tickValueFormat !== undefined ? tickValueFormat(tick.value) : tick.value;
+          var value = format !== undefined ? format(tick.value) : tick.value;
 
@@ -676,5 +681,44 @@ ctx.save();
 
+  var positions$1 = ['top', 'right', 'bottom', 'left'];
+
+  var renderAxesToCanvas = function renderAxesToCanvas(ctx, _ref2) {
+      var xScale = _ref2.xScale,
+          yScale = _ref2.yScale,
+          width = _ref2.width,
+          height = _ref2.height,
+          top = _ref2.top,
+          right = _ref2.right,
+          bottom = _ref2.bottom,
+          left = _ref2.left,
+          theme = _ref2.theme;
+
+      var axes = { top: top, right: right, bottom: bottom, left: left };
+
+      positions$1.forEach(function (position) {
+          var axis = axes[position];
+
+          if (!axis) return null;
+
+          var isXAxis = position === 'top' || position === 'bottom';
+          var ticksPosition = position === 'top' || position === 'left' ? 'before' : 'after';
+          var scale = isXAxis ? xScale : yScale;
+          var format = getFormatter(axis.format, scale);
+
+          renderAxisToCanvas(ctx, _extends({}, axis, {
+              axis: isXAxis ? 'x' : 'y',
+              x: position === 'right' ? width : 0,
+              y: position === 'bottom' ? height : 0,
+              scale: scale,
+              format: format,
+              length: isXAxis ? width : height,
+              ticksPosition: ticksPosition,
+              theme: theme
+          }));
+      });
+  };
+
   exports.Axes = Axes;
   exports.Axis = Axis$1;
   exports.renderAxisToCanvas = renderAxisToCanvas;
+  exports.renderAxesToCanvas = renderAxesToCanvas;
   exports.axisPropTypes = axisPropTypes;
@@ -681,0 +725,0 @@ exports.axisPropType = axisPropType;

No alert changes

Improved metrics

Total package byte prevSize

54555

increased by5.93%

Number of package files

7

increased by16.67%

Lines of code

1275

increased by7.05%

Dependency changes

• + Added@nivo/core@0.51.0(transitive)

• - Removed@nivo/core@0.50.0(transitive)

• Updated@nivo/core@0.51.0