@nivo/heatmap - npm Package Compare versions

Comparing version 0.50.0 to 0.51.0

cjs/nivo-heatmap.js

@@ -9,2 +9,3 @@ 'use strict';
 var core = require('@nivo/core');
+var axes = require('@nivo/axes');
 var min = _interopDefault(require('lodash/min'));
@@ -26,3 +27,2 @@ var max = _interopDefault(require('lodash/max'));
 var HeatMapPropTypes = {
-    // data
     data: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -40,3 +40,2 @@ indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
-    // cells
     cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired,
@@ -48,11 +47,10 @@ cellOpacity: PropTypes.number.isRequired,
 
-    // axes & grid
-    axisTop: PropTypes.object,
-    axisRight: PropTypes.object,
-    axisBottom: PropTypes.object,
-    axisLeft: PropTypes.object,
+    axisTop: axes.axisPropType,
+    axisRight: axes.axisPropType,
+    axisBottom: axes.axisPropType,
+    axisLeft: axes.axisPropType,
+
     enableGridX: PropTypes.bool.isRequired,
     enableGridY: PropTypes.bool.isRequired,
 
-    // labels
     enableLabels: PropTypes.bool.isRequired,
@@ -62,3 +60,2 @@ labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
-    // theming
     colors: core.quantizeColorScalePropType.isRequired,
@@ -68,3 +65,2 @@ colorScale: PropTypes.func.isRequired, // computed
 
-    // interactivity
     isInteractive: PropTypes.bool,
@@ -78,3 +74,2 @@ onClick: PropTypes.func.isRequired,
 
-    // canvas specific
     pixelRatio: PropTypes.number.isRequired
@@ -373,2 +368,3 @@ };
         borderColor = _ref.borderColor,
+        enableLabel = _ref.enableLabel,
         textColor = _ref.textColor,
@@ -402,3 +398,3 @@ onHover = _ref.onHover,
         }),
-        React__default.createElement(
+        enableLabel && React__default.createElement(
             'text',
@@ -429,2 +425,3 @@ {
     borderColor: PropTypes.string.isRequired,
+    enableLabel: PropTypes.bool.isRequired,
     textColor: PropTypes.string.isRequired,
@@ -452,2 +449,3 @@ onHover: PropTypes.func.isRequired,
         borderColor = _ref.borderColor,
+        enableLabel = _ref.enableLabel,
         textColor = _ref.textColor,
@@ -478,3 +476,3 @@ onHover = _ref.onHover,
         }),
-        React__default.createElement(
+        enableLabel && React__default.createElement(
             'text',
@@ -505,2 +503,3 @@ {
     borderColor: PropTypes.string.isRequired,
+    enableLabel: PropTypes.bool.isRequired,
     textColor: PropTypes.string.isRequired,
@@ -604,2 +603,3 @@ onHover: PropTypes.func.isRequired,
             enableGridY = _props.enableGridY,
+            enableLabels = _props.enableLabels,
             getLabelTextColor = _props.getLabelTextColor,
@@ -660,3 +660,3 @@ theme = _props.theme,
                     }, motionProps)),
-                    React__default.createElement(core.Axes, _extends({
+                    React__default.createElement(axes.Axes, _extends({
                         xScale: xScale,
@@ -685,2 +685,3 @@ yScale: yScale,
                             borderColor: getCellBorderColor(node),
+                            enableLabel: enableLabels,
                             textColor: getLabelTextColor(node),
@@ -738,2 +739,3 @@ onHover: partial(onHover, node),
                                         })),
+                                        enableLabel: enableLabels,
                                         textColor: getLabelTextColor(_extends({}, node, {
@@ -767,21 +769,23 @@ color: color
  *
- * @param {Object} ctx
- * @param {number} x
- * @param {number} y
- * @param {number} width
- * @param {number} height
- * @param {string) color
- * @param {number} opacity
- * @param {string} labelTextColor
- * @param {number} value
+ * @param {Object}  ctx
+ * @param {boolean} enableLabels
+ * @param {number}  x
+ * @param {number}  y
+ * @param {number}  width
+ * @param {number}  height
+ * @param {string)  color
+ * @param {number}  opacity
+ * @param {string}  labelTextColor
+ * @param {number}  value
  */
-var renderRect = function renderRect(ctx, _ref) {
-    var x = _ref.x,
-        y = _ref.y,
-        width = _ref.width,
-        height = _ref.height,
-        color = _ref.color,
-        opacity = _ref.opacity,
-        labelTextColor = _ref.labelTextColor,
-        value = _ref.value;
+var renderRect = function renderRect(ctx, _ref, _ref2) {
+    var enableLabels = _ref.enableLabels;
+    var x = _ref2.x,
+        y = _ref2.y,
+        width = _ref2.width,
+        height = _ref2.height,
+        color = _ref2.color,
+        opacity = _ref2.opacity,
+        labelTextColor = _ref2.labelTextColor,
+        value = _ref2.value;
 
@@ -794,4 +798,6 @@ ctx.save();
 
-    ctx.fillStyle = labelTextColor;
-    ctx.fillText(value, x, y);
+    if (enableLabels === true) {
+        ctx.fillStyle = labelTextColor;
+        ctx.fillText(value, x, y);
+    }
 
@@ -804,21 +810,23 @@ ctx.restore();
  *
- * @param {Object} ctx
- * @param {number} x
- * @param {number} y
- * @param {number} width
- * @param {number} height
- * @param {string) color
- * @param {number} opacity
- * @param {string} labelTextColor
- * @param {number} value
+ * @param {Object}  ctx
+ * @param {boolean} enableLabels
+ * @param {number}  x
+ * @param {number}  y
+ * @param {number}  width
+ * @param {number}  height
+ * @param {string)  color
+ * @param {number}  opacity
+ * @param {string}  labelTextColor
+ * @param {number}  value
  */
-var renderCircle = function renderCircle(ctx, _ref2) {
-    var x = _ref2.x,
-        y = _ref2.y,
-        width = _ref2.width,
-        height = _ref2.height,
-        color = _ref2.color,
-        opacity = _ref2.opacity,
-        labelTextColor = _ref2.labelTextColor,
-        value = _ref2.value;
+var renderCircle = function renderCircle(ctx, _ref3, _ref4) {
+    var enableLabels = _ref3.enableLabels;
+    var x = _ref4.x,
+        y = _ref4.y,
+        width = _ref4.width,
+        height = _ref4.height,
+        color = _ref4.color,
+        opacity = _ref4.opacity,
+        labelTextColor = _ref4.labelTextColor,
+        value = _ref4.value;
 
@@ -835,4 +843,6 @@ ctx.save();
 
-    ctx.fillStyle = labelTextColor;
-    ctx.fillText(value, x, y);
+    if (enableLabels === true) {
+        ctx.fillStyle = labelTextColor;
+        ctx.fillText(value, x, y);
+    }
 
@@ -920,3 +930,8 @@ ctx.restore();
             yScale = props.yScale,
+            axisTop = props.axisTop,
+            axisRight = props.axisRight,
+            axisBottom = props.axisBottom,
+            axisLeft = props.axisLeft,
             cellShape = props.cellShape,
+            enableLabels = props.enableLabels,
             theme = props.theme;
@@ -932,5 +947,5 @@
         if (cellShape === 'rect') {
-            renderNode = partial(renderRect, this.ctx);
+            renderNode = partial(renderRect, this.ctx, { enableLabels: enableLabels });
         } else {
-            renderNode = partial(renderCircle, this.ctx);
+            renderNode = partial(renderCircle, this.ctx, { enableLabels: enableLabels });
         }
@@ -944,3 +959,3 @@
 
-        core.renderAxesToCanvas(this.ctx, {
+        axes.renderAxesToCanvas(this.ctx, {
             xScale: xScale,
@@ -950,6 +965,6 @@ yScale: yScale,
             height: height - offsetY * 2,
-            top: props.axisTop,
-            right: props.axisRight,
-            bottom: props.axisBottom,
-            left: props.axisLeft,
+            top: axisTop,
+            right: axisRight,
+            bottom: axisBottom,
+            left: axisLeft,
             theme: theme
@@ -956,0 +971,0 @@ });

index.d.ts

 import * as React from 'react'
 import { Dimensions, Box, MotionProps, ColorProps, GetColor, Theme } from '@nivo/core'
+import { Axis } from '@nivo/axes'
 
@@ -13,3 +14,3 @@ declare module '@nivo/heatmap' {
 
-    export type IndexByFunc = (datum: HeatMapDatum) => string | number
+    export type IndexByFunc = (datum: HeatMapDatum) => string | number
 
@@ -26,36 +27,34 @@ export type ValueFormatter = (value: number) => string | number
 
-    export type HeatMapCommonProps = ColorProps<HeatMapDatum> & Partial<{
-        forceSquare: boolean
-        sizeVariation: number
-        margin: Box
-        padding: number
+    export type HeatMapCommonProps = ColorProps<HeatMapDatum> &
+        Partial<{
+            forceSquare: boolean
+            sizeVariation: number
+            margin: Box
+            padding: number
 
-        // cells
-        cellShape: 'rect' | 'circle' | React.StatelessComponent<any>
-        cellOpacity: number
-        cellBorderWidth: number
-        cellBorderColor: string | GetColor<HeatMapDatumWithColor>
+            cellShape: 'rect' | 'circle' | React.StatelessComponent<any>
+            cellOpacity: number
+            cellBorderWidth: number
+            cellBorderColor: string | GetColor<HeatMapDatumWithColor>
 
-        // axes & grid
-        axisTop: Axis
-        axisRight: Axis
-        axisBottom: Axis
-        axisLeft: Axis
-        enableGridX: boolean
-        enableGridY: boolean
+            axisTop: Axis
+            axisRight: Axis
+            axisBottom: Axis
+            axisLeft: Axis
 
-        // labels
-        enableLabels: boolean
-        labelTextColor: string | GetColor<HeatMapDatumWithColor>
+            enableGridX: boolean
+            enableGridY: boolean
 
-        // interactivity
-        isInteractive: boolean
-        hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'
-        cellHoverOpacity: number
-        cellHoverOthersOpacity: number
-        tooltipFormat: string | ValueFormatter
+            enableLabels: boolean
+            labelTextColor: string | GetColor<HeatMapDatumWithColor>
 
-        theme: Theme
-    }>
+            isInteractive: boolean
+            hoverTarget: 'cell' | 'row' | 'column' | 'rowColumn'
+            cellHoverOpacity: number
+            cellHoverOthersOpacity: number
+            tooltipFormat: string | ValueFormatter
 
+            theme: Theme
+        }>
+
     export interface NodeData {
@@ -73,16 +72,6 @@ key: string
 
-    export type Axis = Partial<{
-        orient: string
-        legend: string
-        tickSize: number
-        tickPadding: number
-        tickRotation: number
-        legendOffset: number
-        legendPosition: string
-    }>
-
-    export type HeatMapSvgProps = HeatMapData
-        & HeatMapCommonProps
-        & MotionProps
-        & Partial<{
+    export type HeatMapSvgProps = HeatMapData &
+        HeatMapCommonProps &
+        MotionProps &
+        Partial<{
             onClick: (datum: NodeData, event: React.MouseEvent<SVGGElement>) => void
@@ -94,5 +83,5 @@ }>
 
-    export type HeatMapCanvasProps = HeatMapData
-        & HeatMapCommonProps
-        & Partial<{
+    export type HeatMapCanvasProps = HeatMapData &
+        HeatMapCommonProps &
+        Partial<{
             onClick: (datum: NodeData, event: React.MouseEvent<HTMLCanvasElement>) => void
@@ -99,0 +88,0 @@ pixelRatio: number

package.json

 {
   "name": "@nivo/heatmap",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "license": "MIT",
@@ -26,3 +26,4 @@ "author": {
   "dependencies": {
-    "@nivo/core": "0.50.0",
+    "@nivo/axes": "0.51.0",
+    "@nivo/core": "0.51.0",
     "d3-scale": "^2.1.2",
@@ -40,3 +41,3 @@ "lodash": "^4.17.4",
   },
-  "gitHead": "934117e4d2873a2a5684aa8e713d5b0e788cc67a"
+  "gitHead": "a17dfedf502a75b969e205620231a5c1fb6a1d67"
 }

umd/nivo-heatmap.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/core'), require('lodash/min'), require('lodash/max'), require('lodash/isEqual'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/withState'), require('recompose/pure'), require('d3-scale'), require('react'), require('lodash/partial'), require('react-motion'), require('recompose/setDisplayName')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/core', 'lodash/min', 'lodash/max', 'lodash/isEqual', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/withState', 'recompose/pure', 'd3-scale', 'react', 'lodash/partial', 'react-motion', 'recompose/setDisplayName'], factory) :
-    (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global['lodash/min'],global['lodash/max'],global['lodash/isEqual'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposeWithState,global.RecomposePure,global.d3,global.React,global['lodash/partial'],global.ReactMotion,global.RecomposeSetDisplayName));
-}(this, (function (exports,PropTypes,core,min,max,isEqual,compose,defaultProps,withPropsOnChange,withState,pure,d3Scale,React,partial,reactMotion,setDisplayName) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('prop-types'), require('@nivo/core'), require('@nivo/axes'), require('lodash/min'), require('lodash/max'), require('lodash/isEqual'), require('recompose/compose'), require('recompose/defaultProps'), require('recompose/withPropsOnChange'), require('recompose/withState'), require('recompose/pure'), require('d3-scale'), require('react'), require('lodash/partial'), require('react-motion'), require('recompose/setDisplayName')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'prop-types', '@nivo/core', '@nivo/axes', 'lodash/min', 'lodash/max', 'lodash/isEqual', 'recompose/compose', 'recompose/defaultProps', 'recompose/withPropsOnChange', 'recompose/withState', 'recompose/pure', 'd3-scale', 'react', 'lodash/partial', 'react-motion', 'recompose/setDisplayName'], factory) :
+    (factory((global.nivo = global.nivo || {}),global.PropTypes,global.nivo,global.nivo,global['lodash/min'],global['lodash/max'],global['lodash/isEqual'],global.RecomposeCompose,global.RecomposeDefaultProps,global.RecomposeWithPropsOnChange,global.RecomposeWithState,global.RecomposePure,global.d3,global.React,global['lodash/partial'],global.ReactMotion,global.RecomposeSetDisplayName));
+}(this, (function (exports,PropTypes,core,axes,min,max,isEqual,compose,defaultProps,withPropsOnChange,withState,pure,d3Scale,React,partial,reactMotion,setDisplayName) { 'use strict';
 
@@ -21,3 +21,2 @@ PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
     var HeatMapPropTypes = {
-        // data
         data: PropTypes.arrayOf(PropTypes.object).isRequired,
@@ -35,3 +34,2 @@ indexBy: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
-        // cells
         cellShape: PropTypes.oneOfType([PropTypes.oneOf(['rect', 'circle']), PropTypes.func]).isRequired,
@@ -43,11 +41,10 @@ cellOpacity: PropTypes.number.isRequired,
 
-        // axes & grid
-        axisTop: PropTypes.object,
-        axisRight: PropTypes.object,
-        axisBottom: PropTypes.object,
-        axisLeft: PropTypes.object,
+        axisTop: axes.axisPropType,
+        axisRight: axes.axisPropType,
+        axisBottom: axes.axisPropType,
+        axisLeft: axes.axisPropType,
+
         enableGridX: PropTypes.bool.isRequired,
         enableGridY: PropTypes.bool.isRequired,
 
-        // labels
         enableLabels: PropTypes.bool.isRequired,
@@ -57,3 +54,2 @@ labelTextColor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
 
-        // theming
         colors: core.quantizeColorScalePropType.isRequired,
@@ -63,3 +59,2 @@ colorScale: PropTypes.func.isRequired, // computed
 
-        // interactivity
         isInteractive: PropTypes.bool,
@@ -73,3 +68,2 @@ onClick: PropTypes.func.isRequired,
 
-        // canvas specific
         pixelRatio: PropTypes.number.isRequired
@@ -368,2 +362,3 @@ };
             borderColor = _ref.borderColor,
+            enableLabel = _ref.enableLabel,
             textColor = _ref.textColor,
@@ -397,3 +392,3 @@ onHover = _ref.onHover,
             }),
-            React__default.createElement(
+            enableLabel && React__default.createElement(
                 'text',
@@ -424,2 +419,3 @@ {
         borderColor: PropTypes.string.isRequired,
+        enableLabel: PropTypes.bool.isRequired,
         textColor: PropTypes.string.isRequired,
@@ -447,2 +443,3 @@ onHover: PropTypes.func.isRequired,
             borderColor = _ref.borderColor,
+            enableLabel = _ref.enableLabel,
             textColor = _ref.textColor,
@@ -473,3 +470,3 @@ onHover = _ref.onHover,
             }),
-            React__default.createElement(
+            enableLabel && React__default.createElement(
                 'text',
@@ -500,2 +497,3 @@ {
         borderColor: PropTypes.string.isRequired,
+        enableLabel: PropTypes.bool.isRequired,
         textColor: PropTypes.string.isRequired,
@@ -599,2 +597,3 @@ onHover: PropTypes.func.isRequired,
                 enableGridY = _props.enableGridY,
+                enableLabels = _props.enableLabels,
                 getLabelTextColor = _props.getLabelTextColor,
@@ -655,3 +654,3 @@ theme = _props.theme,
                         }, motionProps)),
-                        React__default.createElement(core.Axes, _extends({
+                        React__default.createElement(axes.Axes, _extends({
                             xScale: xScale,
@@ -680,2 +679,3 @@ yScale: yScale,
                                 borderColor: getCellBorderColor(node),
+                                enableLabel: enableLabels,
                                 textColor: getLabelTextColor(node),
@@ -733,2 +733,3 @@ onHover: partial(onHover, node),
                                             })),
+                                            enableLabel: enableLabels,
                                             textColor: getLabelTextColor(_extends({}, node, {
@@ -762,21 +763,23 @@ color: color
      *
-     * @param {Object} ctx
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
-     * @param {string) color
-     * @param {number} opacity
-     * @param {string} labelTextColor
-     * @param {number} value
+     * @param {Object}  ctx
+     * @param {boolean} enableLabels
+     * @param {number}  x
+     * @param {number}  y
+     * @param {number}  width
+     * @param {number}  height
+     * @param {string)  color
+     * @param {number}  opacity
+     * @param {string}  labelTextColor
+     * @param {number}  value
      */
-    var renderRect = function renderRect(ctx, _ref) {
-        var x = _ref.x,
-            y = _ref.y,
-            width = _ref.width,
-            height = _ref.height,
-            color = _ref.color,
-            opacity = _ref.opacity,
-            labelTextColor = _ref.labelTextColor,
-            value = _ref.value;
+    var renderRect = function renderRect(ctx, _ref, _ref2) {
+        var enableLabels = _ref.enableLabels;
+        var x = _ref2.x,
+            y = _ref2.y,
+            width = _ref2.width,
+            height = _ref2.height,
+            color = _ref2.color,
+            opacity = _ref2.opacity,
+            labelTextColor = _ref2.labelTextColor,
+            value = _ref2.value;
 
@@ -789,4 +792,6 @@ ctx.save();
 
-        ctx.fillStyle = labelTextColor;
-        ctx.fillText(value, x, y);
+        if (enableLabels === true) {
+            ctx.fillStyle = labelTextColor;
+            ctx.fillText(value, x, y);
+        }
 
@@ -799,21 +804,23 @@ ctx.restore();
      *
-     * @param {Object} ctx
-     * @param {number} x
-     * @param {number} y
-     * @param {number} width
-     * @param {number} height
-     * @param {string) color
-     * @param {number} opacity
-     * @param {string} labelTextColor
-     * @param {number} value
+     * @param {Object}  ctx
+     * @param {boolean} enableLabels
+     * @param {number}  x
+     * @param {number}  y
+     * @param {number}  width
+     * @param {number}  height
+     * @param {string)  color
+     * @param {number}  opacity
+     * @param {string}  labelTextColor
+     * @param {number}  value
      */
-    var renderCircle = function renderCircle(ctx, _ref2) {
-        var x = _ref2.x,
-            y = _ref2.y,
-            width = _ref2.width,
-            height = _ref2.height,
-            color = _ref2.color,
-            opacity = _ref2.opacity,
-            labelTextColor = _ref2.labelTextColor,
-            value = _ref2.value;
+    var renderCircle = function renderCircle(ctx, _ref3, _ref4) {
+        var enableLabels = _ref3.enableLabels;
+        var x = _ref4.x,
+            y = _ref4.y,
+            width = _ref4.width,
+            height = _ref4.height,
+            color = _ref4.color,
+            opacity = _ref4.opacity,
+            labelTextColor = _ref4.labelTextColor,
+            value = _ref4.value;
 
@@ -830,4 +837,6 @@ ctx.save();
 
-        ctx.fillStyle = labelTextColor;
-        ctx.fillText(value, x, y);
+        if (enableLabels === true) {
+            ctx.fillStyle = labelTextColor;
+            ctx.fillText(value, x, y);
+        }
 
@@ -915,3 +924,8 @@ ctx.restore();
                 yScale = props.yScale,
+                axisTop = props.axisTop,
+                axisRight = props.axisRight,
+                axisBottom = props.axisBottom,
+                axisLeft = props.axisLeft,
                 cellShape = props.cellShape,
+                enableLabels = props.enableLabels,
                 theme = props.theme;
@@ -927,5 +941,5 @@
             if (cellShape === 'rect') {
-                renderNode = partial(renderRect, this.ctx);
+                renderNode = partial(renderRect, this.ctx, { enableLabels: enableLabels });
             } else {
-                renderNode = partial(renderCircle, this.ctx);
+                renderNode = partial(renderCircle, this.ctx, { enableLabels: enableLabels });
             }
@@ -939,3 +953,3 @@
 
-            core.renderAxesToCanvas(this.ctx, {
+            axes.renderAxesToCanvas(this.ctx, {
                 xScale: xScale,
@@ -945,6 +959,6 @@ yScale: yScale,
                 height: height - offsetY * 2,
-                top: props.axisTop,
-                right: props.axisRight,
-                bottom: props.axisBottom,
-                left: props.axisLeft,
+                top: axisTop,
+                right: axisRight,
+                bottom: axisBottom,
+                left: axisLeft,
                 theme: theme
@@ -951,0 +965,0 @@ });

No alert changes

Improved metrics

Total package byte prevSize

82753

increased by1.93%

Lines of code

1877

increased by0.86%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@nivo/axes@0.51.0

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

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

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

• Updated@nivo/core@0.51.0