@feedzai/brushable-histogram - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

CHANGELOG.md

 # Brushable Histogram
 
+## Unreleased
+- Move `react` in `package.json` from `dependency` to `peerDependency`.
+- Promote the histogram bar tooltip DOM node to be a child of document.body.
+
 ## 1.2.1 (2019/04/9)
@@ -4,0 +8,0 @@ - Allow the user to define a custom `brushDomain` via `props`.

jest.config.js

 module.exports = {
     verbose: false,
-
     collectCoverage: true,
-
     moduleDirectories: [
@@ -10,22 +8,15 @@ "node_modules",
     ],
-
     roots: [
         "<rootDir>/src"
     ],
-
     collectCoverageFrom: [
         "src/**/*.js"
     ],
-
     coverageDirectory: "<rootDir>/coverage",
-
     transformIgnorePatterns: [
         "/node_modules/"
     ],
-
     setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
-
     snapshotSerializers: ["enzyme-to-json/serializer"],
-
-    coverageReporters: ["html", "lcov"]
+    coverageReporters: ["html", "lcov", "clover"]
 };

lib/constants.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.PADDING = exports.MIN_TOTAL_HEIGHT = exports.DENSITY_CHART_HEIGHT_PX = exports.MIN_ZOOM_VALUE = exports.BAR_TOOLTIP_ARROW_HEIGHT = exports.BARS_TICK_RATIO = exports.BUTTON_PADDING = exports.Y_AXIS_PADDING = exports.X_AXIS_PADDING = exports.X_AXIS_HEIGHT = void 0;
+exports.HISTOGRAM_BAR_TOOLTIP_HEIGHT = exports.HISTOGRAM_BAR_TOOLTIP_WIDTH = exports.PADDING = exports.MIN_TOTAL_HEIGHT = exports.DENSITY_CHART_HEIGHT_PX = exports.MIN_ZOOM_VALUE = exports.BARS_TICK_RATIO = exports.BUTTON_PADDING = exports.Y_AXIS_PADDING = exports.X_AXIS_PADDING = exports.X_AXIS_HEIGHT = void 0;
 
@@ -28,7 +28,4 @@ /**
 exports.BUTTON_PADDING = BUTTON_PADDING;
-const BARS_TICK_RATIO = 3; // Magical value so that the tooltip is positioned correctly vertically
-
+const BARS_TICK_RATIO = 3;
 exports.BARS_TICK_RATIO = BARS_TICK_RATIO;
-const BAR_TOOLTIP_ARROW_HEIGHT = -10;
-exports.BAR_TOOLTIP_ARROW_HEIGHT = BAR_TOOLTIP_ARROW_HEIGHT;
 const MIN_ZOOM_VALUE = 1; // The density chart has a fixed height
@@ -43,3 +40,8 @@
 exports.MIN_TOTAL_HEIGHT = MIN_TOTAL_HEIGHT;
-const PADDING = 10;
-exports.PADDING = PADDING;
+const PADDING = 10; // Histogram bar tooltip size constants
+
+exports.PADDING = PADDING;
+const HISTOGRAM_BAR_TOOLTIP_WIDTH = 100;
+exports.HISTOGRAM_BAR_TOOLTIP_WIDTH = HISTOGRAM_BAR_TOOLTIP_WIDTH;
+const HISTOGRAM_BAR_TOOLTIP_HEIGHT = 40;
+exports.HISTOGRAM_BAR_TOOLTIP_HEIGHT = HISTOGRAM_BAR_TOOLTIP_HEIGHT;

lib/Histogram/Histogram.js

@@ -44,2 +44,4 @@ "use strict";
 
+var _BarTooltip = _interopRequireDefault(require("./BarTooltip"));
+
 /**
@@ -106,7 +108,7 @@ * Histogram
     (0, _defineProperty2.default)(this, "_onMouseEnterHistogramBar", evt => {
-      const index = +evt.currentTarget.getAttribute("dataindex"); // The `+` converts "1" to 1
       // In order to access into the information in the `SyntheticEvent` inside of the setState callback it inspect
       // necessary store the currentTarget value in a constant. https://reactjs.org/docs/events.html#event-pooling
+      const currentTarget = evt.currentTarget;
+      const index = +currentTarget.getAttribute("dataindex"); // The `+` converts "1" to 1
 
-      const currentTarget = evt.currentTarget;
       this.setState(state => {
@@ -328,16 +330,9 @@ const bar = state.timeHistogramBars[index];
   _renderBarTooltip(currentBar) {
-    if (typeof this.props.tooltipBarCustomization !== "function") {
-      return null;
-    }
-
-    const tooltipStyle = {
-      position: "fixed",
-      left: `${this.state.selectedBarPosition.left + this.state.selectedBarPosition.width / 2}px`,
-      top: `${this.state.selectedBarPosition.top - _constants.BAR_TOOLTIP_ARROW_HEIGHT}px`
-    };
-    const tooltipElement = this.props.tooltipBarCustomization(currentBar);
-    return _react.default.createElement("div", {
-      className: "fdz-css-graph-histogram-bars--tooltip",
-      style: tooltipStyle
-    }, tooltipElement);
+    const tooltipBarCustomization = this.props.tooltipBarCustomization;
+    const selectedBarPosition = this.state.selectedBarPosition;
+    return _react.default.createElement(_BarTooltip.default, {
+      tooltipBarCustomization: tooltipBarCustomization,
+      selectedBarPosition: selectedBarPosition,
+      currentBar: currentBar
+    });
   }
@@ -344,0 +339,0 @@ /**

package.json

 {
   "name": "@feedzai/brushable-histogram",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "A time histogram with a time brush that renders a summary of the events",
   "main": "lib/index.js",
-  "dependencies": {
-    "d3-array": "1.2.1",
-    "d3-axis": "1.0.8",
-    "d3-brush": "1.0.4",
-    "d3-scale": "2.0.0",
-    "d3-selection": "1.3.0",
-    "d3-time": "1.0.8",
-    "d3-time-format": "2.1.1",
-    "d3-zoom": "1.7.1",
-    "react": "16.6.1",
-    "react-sizeme": "2.5.2"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/feedzai/brushable-histogram.git"
   },
@@ -22,3 +14,4 @@ "scripts": {
     "lint": "eslint src/{,**/}*.js",
-    "build": "NODE_ENV=production babel src --verbose --out-dir lib && node-sass src/Histogram/Histogram.scss lib/css/brushable-histogram.css && npm run build-storybook",
+    "build": "npm run build-bundle && npm run build-storybook",
+    "build-bundle": "NODE_ENV=production babel src --verbose --out-dir lib && node-sass src/Histogram/Histogram.scss lib/css/brushable-histogram.css",
     "storybook": "start-storybook -p 6006",
@@ -38,2 +31,13 @@ "build-storybook": "rm -rf docs && build-storybook -o docs",
   ],
+  "dependencies": {
+    "d3-array": "1.2.1",
+    "d3-axis": "1.0.8",
+    "d3-brush": "1.0.4",
+    "d3-scale": "2.0.0",
+    "d3-selection": "1.3.0",
+    "d3-time": "1.0.8",
+    "d3-time-format": "2.1.1",
+    "d3-zoom": "1.7.1",
+    "react-sizeme": "2.5.2"
+  },
   "devDependencies": {
@@ -54,5 +58,5 @@ "@babel/cli": "^7.1.5",
     "coveralls": "^3.0.2",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.3.4",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-to-json": "^3.4.4",
     "eslint": "^5.9.0",
@@ -65,6 +69,11 @@ "eslint-plugin-jest": "^22.0.1",
     "node-sass": "^4.10.0",
+    "react": "16.6.1",
     "react-dom": "16.6.1",
     "sass-loader": "^7.1.0"
   },
+  "peerDependencies": {
+    "react": "16.x",
+    "react-dom": "16.x"
+  },
   "licence": "APACHE-2.0"
 }

README.md

@@ -12,3 +12,3 @@ # Brushable Histogram
 
-Brushable histogram works as an uncontrolled component.
+Brushable histogram is a React component and works as an uncontrolled component.
 
@@ -23,4 +23,50 @@ Kudos to [Beatriz Malveiro](https://github.com/biamalveiro) for the ideia and first proptotype and to [Victor Fernandes](https://github.com/victorfern91) for improvements to that first version.
 
-Note that by default no style is included. If you want you can use the `src/Histogram/Histogram.scss` as a starting point.
+Note that by default no style is included. If you want you can use the css at `@feedzai/brushable-histogram/lib/css/brushable-histogram.css` to get the same style as in the examples.
 
+## Usage example
+
+```js
+import React, { PureComponent, Fragment } from "react";
+import Histogram from "@feedzai/brushable-histogram";
+import "@feedzai/brushable-histogram/lib/css/brushable-histogram.css";
+
+const xAccessor = (datapoint) => datapoint.timestamp;
+const yAccessor = (datapoint) => datapoint.total;
+
+function histogramTooltipBar(bar) {
+    return (
+        <Fragment>
+            <div className="fdz-css-graph-histogram-bars--tooltip-value">
+                {Math.floor(bar.yValue)} Events
+            </div>
+        </Fragment>
+    );
+}
+
+export default class HistogramExample extends PureComponent {
+    render() {
+        return (
+            <Histogram
+                data={[
+                    {
+                      "timestamp": 1170070000000,
+                      "total": 100
+                    },
+                    {
+                      "timestamp": 1270070000000,
+                      "total": 23
+                    }
+                  ]}
+                xAccessor={xAccessor}
+                yAccessor={yAccessor}
+                tooltipBarCustomization={histogramTooltipBar}
+            />
+        );
+    }
+}
+```
+
+For more advanced use cases please checkout the examples in the `stories` folder.
+
+
 ## Props
@@ -27,0 +73,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

152

increased by43.4%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

192660

decreased by-61.2%

Dependency count

11

increased by10%

Dev dependency count

27

increased by3.85%

Number of package files

41

decreased by-24.07%

Lines of code

2467

decreased by-24.05%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact@16.6.1

• - Removedreact@16.6.1(transitive)

• - Removedscheduler@0.11.3(transitive)