react-simple-heatmap - npm Package Compare versions

Comparing version 1.1.6 to 2.0.0

dist/index.es.js

@@ -31,3 +31,3 @@ import React, { Fragment, Component } from 'react';
 
-var css = ".Legend_heatmapLegend__2jo9v{\n\tborder: 1px solid #ebedf0;\n\twidth: 6%;\n\tmargin-left: 4%;\n}\n\n.Legend_legendTicks__3kAun{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 0;\n}\n\n.Legend_legendTick__2dW0x{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.Legend_tickWrapper__2DF_o{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n}\n\n.Legend_smallLine__2E2XS{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n";
+var css = ".Legend_heatmapLegend__2jo9v{\n\tborder: 1px solid #000;\n\twidth: 6%;\n\tmargin-left: 4%;\n}\n\n.Legend_legendTicks__3kAun{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 1px;\n}\n\n.Legend_legendTick__2dW0x{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.Legend_tickWrapper__2DF_o{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n}\n\n.Legend_smallLine__2E2XS{\n\twidth: 6px;\n\tborder-bottom: 1px solid #000;\n}\n";
 var styles = { "heatmapLegend": "Legend_heatmapLegend__2jo9v", "legendTicks": "Legend_legendTicks__3kAun", "legendTick": "Legend_legendTick__2dW0x", "tickWrapper": "Legend_tickWrapper__2DF_o", "smallLine": "Legend_smallLine__2E2XS" };
@@ -37,5 +37,11 @@ styleInject(css);
 var Legend = function Legend(props) {
-	var borderColor = props.borderColor;
+	var borderColor = props.borderColor,
+	    bordered = props.bordered,
+	    legendStyle = props.legendStyle,
+	    borderRadius = props.borderRadius;
+	// override the border color for now
 
-
+	borderColor = bordered === false ? "#0000" : "borderColor";
+	var border = bordered === false ? "none" : "1px solid";
+	// console.log(bordered);
 	return React.createElement(
@@ -45,3 +51,8 @@ Fragment,
 		React.createElement("div", {
-			style: { background: "linear-gradient( " + props.legendColor + " , #fff)", borderColor: borderColor },
+			style: {
+				background: "linear-gradient( " + props.legendColors[0] + " , " + props.legendColors[1] + ")",
+				borderColor: borderColor,
+				border: border,
+				borderRadius: borderRadius
+			},
 			className: styles.heatmapLegend }),
@@ -64,2 +75,3 @@ React.createElement(
 						{
+							style: legendStyle,
 							className: styles.legendTick },
@@ -74,3 +86,3 @@ label
 
-var css$1 = ".Xlabels_xLabels__WGPqz{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 37px) 0 40px;\n}\n\n.Xlabels_xTickWrapper__2ihUJ{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.Xlabels_xTick__VLObZ{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\t/* width: 10px; */\n\ttext-align: center;\n}\n\n.Xlabels_xSmallLine__1-Cee{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.Xlabels_xLines__Byn1D{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 37px) 0 40px;\n}\n";
+var css$1 = ".Xlabels_xLabels__WGPqz{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 33px) 0 34px;\n}\n\n.Xlabels_xTickWrapper__2ihUJ{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.Xlabels_xTick__VLObZ{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\ttext-align: center;\n\twidth: 30px;\n}\n\n.Xlabels_xSmallLine__1-Cee{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.Xlabels_xLines__Byn1D{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 3px calc(9.5% + 37px) 0 40px;\n}\n";
 var styles$1 = { "xLabels": "Xlabels_xLabels__WGPqz", "xTickWrapper": "Xlabels_xTickWrapper__2ihUJ", "xTick": "Xlabels_xTick__VLObZ", "xSmallLine": "Xlabels_xSmallLine__1-Cee", "xLines": "Xlabels_xLines__Byn1D" };
@@ -81,5 +93,10 @@ styleInject(css$1);
 	var borderColor = props.borderColor,
-	    xLabels = props.xLabels;
+	    xLabels = props.xLabels,
+	    xStepLabel = props.xStepLabel,
+	    showTicks = props.showTicks,
+	    xLabelsStyle = props.xLabelsStyle;
 
+	// Check if the ticks is rendered
 
+	var isShowingTick = showTicks === "x" || showTicks === true;
 	return React.createElement(
@@ -92,11 +109,18 @@ Fragment,
 			xLabels.map(function (x, i) {
-				return React.createElement(
-					"div",
-					{
+				if (xStepLabel && i % xStepLabel || !isShowingTick) {
+					return React.createElement("div", {
 						key: i,
-						className: styles$1.xTickWrapper },
-					React.createElement("div", {
-						style: { borderColor: borderColor },
-						className: styles$1.xSmallLine })
-				);
+						style: { borderColor: "#0000" },
+						className: styles$1.xSmallLine });
+				} else {
+					return React.createElement(
+						"div",
+						{
+							key: i,
+							className: styles$1.xTickWrapper },
+						React.createElement("div", {
+							style: { borderColor: borderColor },
+							className: styles$1.xSmallLine })
+					);
+				}
 			})
@@ -108,2 +132,6 @@ ),
 			xLabels.map(function (x, i) {
+				if (xStepLabel && i % xStepLabel) {
+					return React.createElement("div", { key: i });
+				}
+
 				return React.createElement(
@@ -118,2 +146,3 @@ "div",
 							key: i,
+							style: xLabelsStyle,
 							className: styles$1.xTick },
@@ -128,3 +157,3 @@ x
 
-var css$2 = ".Ylabels_tickWrapper__1tDtU{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n\tjustify-content: flex-end;\n}\n\n.Ylabels_smallLine__3TyT9{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.Ylabels_yLabels__19gKd{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-around;\n\talign-items: flex-end;\n\tmargin: 0px 0 -2px;\n}\n\n.Ylabels_yTick__1A7gX{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n";
+var css$2 = ".Ylabels_tickWrapper__1tDtU{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n\tjustify-content: flex-end;\n}\n\n.Ylabels_smallLine__3TyT9{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.Ylabels_yLabels__19gKd{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-around;\n\talign-items: flex-end;\n  margin: 1px 1px -3px;\n}\n\n.Ylabels_yTick__1A7gX{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n";
 var styles$2 = { "tickWrapper": "Ylabels_tickWrapper__1tDtU", "smallLine": "Ylabels_smallLine__3TyT9", "yLabels": "Ylabels_yLabels__19gKd", "yTick": "Ylabels_yTick__1A7gX" };
@@ -135,4 +164,12 @@ styleInject(css$2);
 	var borderColor = props.borderColor,
-	    yLabels = props.yLabels;
+	    yLabels = props.yLabels,
+	    yStepLabel = props.yStepLabel,
+	    showTicks = props.showTicks,
+	    yLabelsStyle = props.yLabelsStyle;
+	// Create a variable that will pass labels
+	// showTicks = true;
+	// remove the bordercolor if the user dont want ticks
 
+	var isShowingTick = showTicks === "y" || showTicks === true;
+	borderColor = isShowingTick ? borderColor : "#0000";
 
@@ -146,2 +183,5 @@ return React.createElement(
 			yLabels.map(function (y, i) {
+				if (yStepLabel && i % yStepLabel) {
+					return React.createElement("div", { key: i });
+				}
 				return React.createElement(
@@ -155,2 +195,3 @@ "div",
 						{
+							style: yLabelsStyle,
 							className: styles$2.yTick },
@@ -168,4 +209,4 @@ y
 
-var css$3 = ".styles_heatMap__2Wh43{\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: flex;\n}\n\n.styles_square__2WCBo {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-size: .8rem;\n}\n\n.styles_heatMapRow__3iUbH{\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_rowWrapper__1oFn5{\n\theight: 100%;\n  width: 100%;\n}\n\n.styles_mainWrapper__3BA3r{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatmapAndYlabels__gAdre{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatMapAndXlabels__2RCv3{\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n}\n";
-var styles$3 = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3" };
+var css$3 = ".styles_heatMap__2Wh43{\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\toverflow: hidden;\n}\n\n.styles_square__2WCBo {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-size: .8rem;\n}\n\n.styles_heatMapRow__3iUbH{\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_rowWrapper__1oFn5{\n\theight: 100%;\n  width: 100%;\n}\n\n.styles_mainWrapper__3BA3r{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatmapAndYlabels__gAdre{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatMapAndXlabels__2RCv3{\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_titleAndHeatmap__3E420{\n\theight: 100%;\n}\n";
+var styles$3 = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3", "titleAndHeatmap": "styles_titleAndHeatmap__3E420" };
 styleInject(css$3);
@@ -252,5 +293,6 @@
 			max: undefined
-		}, _this.handleClick = function (data) {
+		}, _this.handleClick = function (data, x, y) {
+			// If there is a onClick event, add it to every square
 			if (_this.props.onClick) {
-				_this.props.onClick(data);
+				_this.props.onClick(data, x, y);
 			}
@@ -290,3 +332,6 @@ }, _temp), possibleConstructorReturn(_this, _ret);
 			    data = _props.data,
-			    bgColor = _props.bgColor;
+			    bgColors = _props.bgColors,
+			    xLabels = _props.xLabels,
+			    yLabels = _props.yLabels,
+			    labelsFontSize = _props.labelsFontSize;
 
@@ -300,4 +345,9 @@ // const numX = data.length;
 
-			var backgroundColor = bgColor ? bgColor : "rgb(24, 144, 255)";
-			var legendColor = backgroundColor;
+			// Set the default color if not provided
+			bgColors = bgColors ? bgColors : ["rgb(24, 144, 255)", "rgb(255, 255, 255)"];
+
+			// Add a bgColor (white) if only one color is provided
+			bgColors = bgColors.length > 1 ? bgColors : [bgColors[0], "rgb(255, 255, 255)"];
+
+			var backgroundColor = bgColors ? bgColors[0] : "rgb(24, 144, 255)";
 			backgroundColor = backgroundColor.split(")")[0].split("rgb")[1] + ", ";
@@ -314,8 +364,3 @@ backgroundColor = "rgba" + backgroundColor;
 
-			// const legendLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const yLabels = [0,1,2,3,4,5,6,7,8,9];
-			// const xLabels = [0,1,2,3,4,5,6,7,8,9];
-			// const xLabels = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-			var yLabels = false;
-			var xLabels = false;
+			var borderColor = "#314659";
 
@@ -337,4 +382,2 @@ // Create the legend
 
-			var borderColor = "#314659";
-
 			// Check if the heatmap need a border
@@ -345,49 +388,69 @@ var borderStyle = this.props.bordered === false ? "none" : "1px solid";
 				'div',
-				{ className: styles$3.mainWrapper },
+				{ className: styles$3.titleAndHeatmap },
 				React.createElement(
 					'div',
-					{ className: styles$3.heatMapAndXlabels },
+					{ className: styles$3.mainWrapper },
 					React.createElement(
 						'div',
-						{ className: styles$3.heatmapAndYlabels },
-						yLabels && React.createElement(Ylabels, {
-							borderColor: borderColor,
-							yLabels: yLabels }),
+						{ className: styles$3.heatMapAndXlabels },
 						React.createElement(
 							'div',
-							{
-								style: { border: borderStyle, borderColor: borderColor },
-								className: styles$3.heatMap },
-							data.map(function (row, i) {
-								return React.createElement(
-									'div',
-									{
-										key: i,
-										className: styles$3.heatMapRow },
-									row.map(function (square, j) {
-										var opacity = (square - min) * mult;
-										var bgColor = backgroundColor + opacity + ")";
-										return React.createElement(
-											'div',
-											{
-												key: i + "" + j,
-												className: styles$3.square,
-												onClick: function onClick() {
-													return _this2.handleClick(square);
-												},
-												style: _extends({}, squareStyle, { backgroundColor: bgColor }) },
-											_this2.props.showData && square
-										);
-									})
-								);
-							})
+							{ className: styles$3.heatmapAndYlabels },
+							yLabels && React.createElement(Ylabels, {
+								borderColor: borderColor,
+								yLabels: yLabels,
+								yStepLabel: this.props.yStepLabel,
+								showTicks: this.props.showTicks,
+								yLabelsStyle: this.props.yLabelsStyle }),
+							React.createElement(
+								'div',
+								{
+									style: {
+										border: borderStyle,
+										borderColor: borderColor,
+										backgroundColor: bgColors[1],
+										borderRadius: this.props.borderRadius
+									},
+									className: styles$3.heatMap },
+								data.map(function (row, i) {
+									return React.createElement(
+										'div',
+										{
+											key: i,
+											className: styles$3.heatMapRow },
+										row.map(function (square, j) {
+											var opacity = (square - min) * mult;
+											var bgColors = backgroundColor + opacity + ")";
+											var x = i;
+											var y = row.length - 1 - j;
+											return React.createElement(
+												'div',
+												{
+													key: i + "" + j,
+													className: styles$3.square,
+													onClick: function onClick() {
+														return _this2.handleClick(square, x, y);
+													},
+													style: _extends({}, squareStyle, { backgroundColor: bgColors }) },
+												_this2.props.showData && square
+											);
+										})
+									);
+								})
+							),
+							this.props.showLegend && min !== undefined && min !== "NaN" && React.createElement(Legend, {
+								legendLabels: legendLabels,
+								legendColors: bgColors,
+								borderColor: borderColor,
+								bordered: this.props.bordered,
+								legendStyle: this.props.legendStyle,
+								borderRadius: this.props.borderRadius })
 						),
-						this.props.showLegend && min !== undefined && min !== "NaN" && React.createElement(Legend, {
-							legendLabels: legendLabels,
-							legendColor: legendColor,
-							borderColor: borderColor })
-					),
-					xLabels && React.createElement(Xlabels, {
-						borderColor: borderColor,
-						xLabels: xLabels })
+						xLabels && React.createElement(Xlabels, {
+							borderColor: borderColor,
+							xLabels: xLabels,
+							xStepLabel: this.props.xStepLabel,
+							showTicks: this.props.showTicks,
+							xLabelsStyle: this.props.xLabelsStyle })
+					)
 				)
@@ -402,6 +465,13 @@ );
 	data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number).isRequired).isRequired,
-	bgColor: PropTypes.string,
+	bgColors: PropTypes.arrayOf(PropTypes.string),
 	showData: PropTypes.bool,
 	showLabels: PropTypes.bool,
-	showLegend: PropTypes.bool
+	showLegend: PropTypes.bool,
+	xStepLabel: PropTypes.number,
+	yStepLabel: PropTypes.number,
+	showTicks: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+	xLabelsStyle: PropTypes.object,
+	yLabelsStyle: PropTypes.object,
+	legendStyle: PropTypes.object,
+	borderRadius: PropTypes.string
 };
@@ -408,0 +478,0 @@

dist/index.js

@@ -36,3 +36,3 @@ 'use strict';
 
-var css = ".Legend_heatmapLegend__2jo9v{\n\tborder: 1px solid #ebedf0;\n\twidth: 6%;\n\tmargin-left: 4%;\n}\n\n.Legend_legendTicks__3kAun{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 0;\n}\n\n.Legend_legendTick__2dW0x{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.Legend_tickWrapper__2DF_o{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n}\n\n.Legend_smallLine__2E2XS{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n";
+var css = ".Legend_heatmapLegend__2jo9v{\n\tborder: 1px solid #000;\n\twidth: 6%;\n\tmargin-left: 4%;\n}\n\n.Legend_legendTicks__3kAun{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 1px;\n}\n\n.Legend_legendTick__2dW0x{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.Legend_tickWrapper__2DF_o{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n}\n\n.Legend_smallLine__2E2XS{\n\twidth: 6px;\n\tborder-bottom: 1px solid #000;\n}\n";
 var styles = { "heatmapLegend": "Legend_heatmapLegend__2jo9v", "legendTicks": "Legend_legendTicks__3kAun", "legendTick": "Legend_legendTick__2dW0x", "tickWrapper": "Legend_tickWrapper__2DF_o", "smallLine": "Legend_smallLine__2E2XS" };
@@ -42,5 +42,11 @@ styleInject(css);
 var Legend = function Legend(props) {
-	var borderColor = props.borderColor;
+	var borderColor = props.borderColor,
+	    bordered = props.bordered,
+	    legendStyle = props.legendStyle,
+	    borderRadius = props.borderRadius;
+	// override the border color for now
 
-
+	borderColor = bordered === false ? "#0000" : "borderColor";
+	var border = bordered === false ? "none" : "1px solid";
+	// console.log(bordered);
 	return React__default.createElement(
@@ -50,3 +56,8 @@ React.Fragment,
 		React__default.createElement("div", {
-			style: { background: "linear-gradient( " + props.legendColor + " , #fff)", borderColor: borderColor },
+			style: {
+				background: "linear-gradient( " + props.legendColors[0] + " , " + props.legendColors[1] + ")",
+				borderColor: borderColor,
+				border: border,
+				borderRadius: borderRadius
+			},
 			className: styles.heatmapLegend }),
@@ -69,2 +80,3 @@ React__default.createElement(
 						{
+							style: legendStyle,
 							className: styles.legendTick },
@@ -79,3 +91,3 @@ label
 
-var css$1 = ".Xlabels_xLabels__WGPqz{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 37px) 0 40px;\n}\n\n.Xlabels_xTickWrapper__2ihUJ{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.Xlabels_xTick__VLObZ{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\t/* width: 10px; */\n\ttext-align: center;\n}\n\n.Xlabels_xSmallLine__1-Cee{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.Xlabels_xLines__Byn1D{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 37px) 0 40px;\n}\n";
+var css$1 = ".Xlabels_xLabels__WGPqz{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 2px calc(9.5% + 33px) 0 34px;\n}\n\n.Xlabels_xTickWrapper__2ihUJ{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.Xlabels_xTick__VLObZ{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\ttext-align: center;\n\twidth: 30px;\n}\n\n.Xlabels_xSmallLine__1-Cee{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.Xlabels_xLines__Byn1D{\n\tdisplay: flex;\n\tjustify-content: space-around;\n\t/* align-items: center; */\n\tmargin: 3px calc(9.5% + 37px) 0 40px;\n}\n";
 var styles$1 = { "xLabels": "Xlabels_xLabels__WGPqz", "xTickWrapper": "Xlabels_xTickWrapper__2ihUJ", "xTick": "Xlabels_xTick__VLObZ", "xSmallLine": "Xlabels_xSmallLine__1-Cee", "xLines": "Xlabels_xLines__Byn1D" };
@@ -86,5 +98,10 @@ styleInject(css$1);
 	var borderColor = props.borderColor,
-	    xLabels = props.xLabels;
+	    xLabels = props.xLabels,
+	    xStepLabel = props.xStepLabel,
+	    showTicks = props.showTicks,
+	    xLabelsStyle = props.xLabelsStyle;
 
+	// Check if the ticks is rendered
 
+	var isShowingTick = showTicks === "x" || showTicks === true;
 	return React__default.createElement(
@@ -97,11 +114,18 @@ React.Fragment,
 			xLabels.map(function (x, i) {
-				return React__default.createElement(
-					"div",
-					{
+				if (xStepLabel && i % xStepLabel || !isShowingTick) {
+					return React__default.createElement("div", {
 						key: i,
-						className: styles$1.xTickWrapper },
-					React__default.createElement("div", {
-						style: { borderColor: borderColor },
-						className: styles$1.xSmallLine })
-				);
+						style: { borderColor: "#0000" },
+						className: styles$1.xSmallLine });
+				} else {
+					return React__default.createElement(
+						"div",
+						{
+							key: i,
+							className: styles$1.xTickWrapper },
+						React__default.createElement("div", {
+							style: { borderColor: borderColor },
+							className: styles$1.xSmallLine })
+					);
+				}
 			})
@@ -113,2 +137,6 @@ ),
 			xLabels.map(function (x, i) {
+				if (xStepLabel && i % xStepLabel) {
+					return React__default.createElement("div", { key: i });
+				}
+
 				return React__default.createElement(
@@ -123,2 +151,3 @@ "div",
 							key: i,
+							style: xLabelsStyle,
 							className: styles$1.xTick },
@@ -133,3 +162,3 @@ x
 
-var css$2 = ".Ylabels_tickWrapper__1tDtU{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n\tjustify-content: flex-end;\n}\n\n.Ylabels_smallLine__3TyT9{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.Ylabels_yLabels__19gKd{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-around;\n\talign-items: flex-end;\n\tmargin: 0px 0 -2px;\n}\n\n.Ylabels_yTick__1A7gX{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n";
+var css$2 = ".Ylabels_tickWrapper__1tDtU{\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 40px;\n\tjustify-content: flex-end;\n}\n\n.Ylabels_smallLine__3TyT9{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.Ylabels_yLabels__19gKd{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-around;\n\talign-items: flex-end;\n  margin: 1px 1px -3px;\n}\n\n.Ylabels_yTick__1A7gX{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n";
 var styles$2 = { "tickWrapper": "Ylabels_tickWrapper__1tDtU", "smallLine": "Ylabels_smallLine__3TyT9", "yLabels": "Ylabels_yLabels__19gKd", "yTick": "Ylabels_yTick__1A7gX" };
@@ -140,4 +169,12 @@ styleInject(css$2);
 	var borderColor = props.borderColor,
-	    yLabels = props.yLabels;
+	    yLabels = props.yLabels,
+	    yStepLabel = props.yStepLabel,
+	    showTicks = props.showTicks,
+	    yLabelsStyle = props.yLabelsStyle;
+	// Create a variable that will pass labels
+	// showTicks = true;
+	// remove the bordercolor if the user dont want ticks
 
+	var isShowingTick = showTicks === "y" || showTicks === true;
+	borderColor = isShowingTick ? borderColor : "#0000";
 
@@ -151,2 +188,5 @@ return React__default.createElement(
 			yLabels.map(function (y, i) {
+				if (yStepLabel && i % yStepLabel) {
+					return React__default.createElement("div", { key: i });
+				}
 				return React__default.createElement(
@@ -160,2 +200,3 @@ "div",
 						{
+							style: yLabelsStyle,
 							className: styles$2.yTick },
@@ -173,4 +214,4 @@ y
 
-var css$3 = ".styles_heatMap__2Wh43{\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: #fff;\n\tdisplay: flex;\n}\n\n.styles_square__2WCBo {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-size: .8rem;\n}\n\n.styles_heatMapRow__3iUbH{\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_rowWrapper__1oFn5{\n\theight: 100%;\n  width: 100%;\n}\n\n.styles_mainWrapper__3BA3r{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatmapAndYlabels__gAdre{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatMapAndXlabels__2RCv3{\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n}\n";
-var styles$3 = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3" };
+var css$3 = ".styles_heatMap__2Wh43{\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\toverflow: hidden;\n}\n\n.styles_square__2WCBo {\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-size: .8rem;\n}\n\n.styles_heatMapRow__3iUbH{\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_rowWrapper__1oFn5{\n\theight: 100%;\n  width: 100%;\n}\n\n.styles_mainWrapper__3BA3r{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatmapAndYlabels__gAdre{\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_heatMapAndXlabels__2RCv3{\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 100%;\n}\n\n.styles_titleAndHeatmap__3E420{\n\theight: 100%;\n}\n";
+var styles$3 = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3", "titleAndHeatmap": "styles_titleAndHeatmap__3E420" };
 styleInject(css$3);
@@ -257,5 +298,6 @@
 			max: undefined
-		}, _this.handleClick = function (data) {
+		}, _this.handleClick = function (data, x, y) {
+			// If there is a onClick event, add it to every square
 			if (_this.props.onClick) {
-				_this.props.onClick(data);
+				_this.props.onClick(data, x, y);
 			}
@@ -295,3 +337,6 @@ }, _temp), possibleConstructorReturn(_this, _ret);
 			    data = _props.data,
-			    bgColor = _props.bgColor;
+			    bgColors = _props.bgColors,
+			    xLabels = _props.xLabels,
+			    yLabels = _props.yLabels,
+			    labelsFontSize = _props.labelsFontSize;
 
@@ -305,4 +350,9 @@ // const numX = data.length;
 
-			var backgroundColor = bgColor ? bgColor : "rgb(24, 144, 255)";
-			var legendColor = backgroundColor;
+			// Set the default color if not provided
+			bgColors = bgColors ? bgColors : ["rgb(24, 144, 255)", "rgb(255, 255, 255)"];
+
+			// Add a bgColor (white) if only one color is provided
+			bgColors = bgColors.length > 1 ? bgColors : [bgColors[0], "rgb(255, 255, 255)"];
+
+			var backgroundColor = bgColors ? bgColors[0] : "rgb(24, 144, 255)";
 			backgroundColor = backgroundColor.split(")")[0].split("rgb")[1] + ", ";
@@ -319,8 +369,3 @@ backgroundColor = "rgba" + backgroundColor;
 
-			// const legendLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const yLabels = [0,1,2,3,4,5,6,7,8,9];
-			// const xLabels = [0,1,2,3,4,5,6,7,8,9];
-			// const xLabels = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
-			var yLabels = false;
-			var xLabels = false;
+			var borderColor = "#314659";
 
@@ -342,4 +387,2 @@ // Create the legend
 
-			var borderColor = "#314659";
-
 			// Check if the heatmap need a border
@@ -350,49 +393,69 @@ var borderStyle = this.props.bordered === false ? "none" : "1px solid";
 				'div',
-				{ className: styles$3.mainWrapper },
+				{ className: styles$3.titleAndHeatmap },
 				React__default.createElement(
 					'div',
-					{ className: styles$3.heatMapAndXlabels },
+					{ className: styles$3.mainWrapper },
 					React__default.createElement(
 						'div',
-						{ className: styles$3.heatmapAndYlabels },
-						yLabels && React__default.createElement(Ylabels, {
-							borderColor: borderColor,
-							yLabels: yLabels }),
+						{ className: styles$3.heatMapAndXlabels },
 						React__default.createElement(
 							'div',
-							{
-								style: { border: borderStyle, borderColor: borderColor },
-								className: styles$3.heatMap },
-							data.map(function (row, i) {
-								return React__default.createElement(
-									'div',
-									{
-										key: i,
-										className: styles$3.heatMapRow },
-									row.map(function (square, j) {
-										var opacity = (square - min) * mult;
-										var bgColor = backgroundColor + opacity + ")";
-										return React__default.createElement(
-											'div',
-											{
-												key: i + "" + j,
-												className: styles$3.square,
-												onClick: function onClick() {
-													return _this2.handleClick(square);
-												},
-												style: _extends({}, squareStyle, { backgroundColor: bgColor }) },
-											_this2.props.showData && square
-										);
-									})
-								);
-							})
+							{ className: styles$3.heatmapAndYlabels },
+							yLabels && React__default.createElement(Ylabels, {
+								borderColor: borderColor,
+								yLabels: yLabels,
+								yStepLabel: this.props.yStepLabel,
+								showTicks: this.props.showTicks,
+								yLabelsStyle: this.props.yLabelsStyle }),
+							React__default.createElement(
+								'div',
+								{
+									style: {
+										border: borderStyle,
+										borderColor: borderColor,
+										backgroundColor: bgColors[1],
+										borderRadius: this.props.borderRadius
+									},
+									className: styles$3.heatMap },
+								data.map(function (row, i) {
+									return React__default.createElement(
+										'div',
+										{
+											key: i,
+											className: styles$3.heatMapRow },
+										row.map(function (square, j) {
+											var opacity = (square - min) * mult;
+											var bgColors = backgroundColor + opacity + ")";
+											var x = i;
+											var y = row.length - 1 - j;
+											return React__default.createElement(
+												'div',
+												{
+													key: i + "" + j,
+													className: styles$3.square,
+													onClick: function onClick() {
+														return _this2.handleClick(square, x, y);
+													},
+													style: _extends({}, squareStyle, { backgroundColor: bgColors }) },
+												_this2.props.showData && square
+											);
+										})
+									);
+								})
+							),
+							this.props.showLegend && min !== undefined && min !== "NaN" && React__default.createElement(Legend, {
+								legendLabels: legendLabels,
+								legendColors: bgColors,
+								borderColor: borderColor,
+								bordered: this.props.bordered,
+								legendStyle: this.props.legendStyle,
+								borderRadius: this.props.borderRadius })
 						),
-						this.props.showLegend && min !== undefined && min !== "NaN" && React__default.createElement(Legend, {
-							legendLabels: legendLabels,
-							legendColor: legendColor,
-							borderColor: borderColor })
-					),
-					xLabels && React__default.createElement(Xlabels, {
-						borderColor: borderColor,
-						xLabels: xLabels })
+						xLabels && React__default.createElement(Xlabels, {
+							borderColor: borderColor,
+							xLabels: xLabels,
+							xStepLabel: this.props.xStepLabel,
+							showTicks: this.props.showTicks,
+							xLabelsStyle: this.props.xLabelsStyle })
+					)
 				)
@@ -407,6 +470,13 @@ );
 	data: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number).isRequired).isRequired,
-	bgColor: PropTypes.string,
+	bgColors: PropTypes.arrayOf(PropTypes.string),
 	showData: PropTypes.bool,
 	showLabels: PropTypes.bool,
-	showLegend: PropTypes.bool
+	showLegend: PropTypes.bool,
+	xStepLabel: PropTypes.number,
+	yStepLabel: PropTypes.number,
+	showTicks: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+	xLabelsStyle: PropTypes.object,
+	yLabelsStyle: PropTypes.object,
+	legendStyle: PropTypes.object,
+	borderRadius: PropTypes.string
 };
@@ -413,0 +483,0 @@

package.json

 {
   "name": "react-simple-heatmap",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "description": "A simple React component to create responsive heatmap.",
@@ -5,0 +5,0 @@ "author": "JulienRioux",

README.md

 # react-simple-heatmap
 
-> A simple React component to create responsive heatmap. The heatmap take the height and width of it's parent element.
+> A simple React component to create responsive heatmap. To be rendered, this heatmap only need a dataset (2D Array) and a parent element which have a width and height. There is more customization available.
 
@@ -11,31 +11,25 @@ [![NPM](https://img.shields.io/npm/v/react-simple-heatmap.svg)](https://www.npmjs.com/package/react-simple-heatmap) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 ```bash
-npm install react-simple-heatmap
+yarn add react-simple-heatmap
 ```
 or
 ```bash
-yarn add react-simple-heatmap
+npm install react-simple-heatmap
 ```
 
+![Alt text](./img/screenshotReactHeatmap.jpg)
 
+
 ## Demo
-[Here is a simple preview.](https://react-simple-heatmap.firebaseapp.com/)
+[Here is a preview.](https://react-simple-heatmap.firebaseapp.com/)
 
 
-## Properties
-| Name | Type |  description | example | default | isRequired |
-|--|--|--|--|--|--|
-| data | 2D Array of numbers | 2D Matrix of numbres | [[10,12,33], [2,45,31], [16, 32, 29]] | undefined |  true |
-| bgColor | String | Main color using RGB format | "rgb(255, 17, 17)" | "rgb(24, 144, 255)" | false |
-| showData | Bollean | Display data inside each cells.  | true | false | false |
-| showLegend | Bollean | Display the heatmap legend.  | true | false | false |
-| onClick | Function | Adding an handler to cell click | (data) => console.log(data) | undefined | false |
-| bordered | Bollean | Display a border on the heatmap.  | false | true | false |
+## Obligatory Fields
+| Name | Type |  description | example | default |
+|--|--|--|--|--|
+| data | 2D Array of numbers | 2D Matrix of numbres | [[10,12,33], [2,45,31], [16, 32, 29]] | undefined |
 
 
-
-## Usage
-
+#### Basic Example:
 ```jsx
 import React, { Component } from "react"
-
 import Heatmap from "react-simple-heatmap"
@@ -46,3 +40,6 @@
   render() {
-
+    // 2D array of numbers
+    const data = [[10, 12, 33],
+                  [21, 45, 31],
+                  [16, 32, 29]];
     return (
@@ -52,3 +49,3 @@ <div
         <Heatmap
-          data={ data }  // 2D array of numbers
+          data={ data }
         />
@@ -62,5 +59,25 @@ </div>
 
+## Customization fields
+| Name | Type |  description | example | default |
+|--|--|---|--|--|
+| bgColors | Array of 2 colors | Main color using `RGB` format | `["rgb(255, 11, 11)", "rgb(255, 255, 0)"]` | `["rgb(24, 144, 255)", "rgb(255, 255, 255)"]` |
+| xLabels | Array | Display the X-axis labels | `["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]` | `undefined` |
+| yLabels | Array | Display the Y-axis labels | `[1,2,3,4,5,6,7,8,9,10]` | `undefined` |
+| showLegend | Bollean | Display the heatmap legend.  | `true` | `false` |
+| onClick | Function | Adding an handler to cell click | ```(data, x, y) => alert(`Data: ${ data }, X: ${ x }, Y: ${ y }\`)``` | `undefined` |
+| showData | Bollean | Display data inside each cells.  | `true` | `false` |
+| bordered | Bollean | Display a border on the heatmap.  | `false` | `true` |
+| xStepLabel | Number | Show the label if his index in the xLabels array modulo xStepLabel equals 0 | `2` | `undefined` |
+| yStepLabel | Number | Show the label if his index in the yLabels array modulo yStepLabel equals 0 | `2` | `undefined` |
+| showTicks | Boolean or String | Show the ticks lines of the label. Use `true` to show X-axis and Y-axis ticks, `"y"` to show only Y-axis ticks and `"x"` to show only X-axis ticks.  | `"y"` | `false` |
+| xLabelsStyle | Object | Style your X-axis labels. | `{ fontWeight: "bold" }` | {} |
+| yLabelsStyle | Object | Style your Y-axis labels. | `{ fontWeight: "bold" }` | {} |
+| legendStyle | Object | Style your Legeng labels. | `{ fontWeight: "bold" }` | {} |
+| borderRadius | String | Add border radius to the heatmap and legend | `"4px"` | `0` |
 
-## Example
 
+
+
+#### Customization example
+
 ```jsx
@@ -95,3 +112,3 @@ import React, { Component } from 'react'
             onClick={ (data) => console.log(data) }
-					/>
+		  />
         </div>
@@ -105,9 +122,5 @@ </div>
 
-## Screenshot
 
-![Alt text](./img/screenshotReactHeatmap.png)
-
-
 ## License
 
-MIT © [JulienRioux](https://github.com/JulienRioux)
+MIT © [Julien Rioux](https://github.com/JulienRioux)

No alert changes

Improved metrics

Total package byte prevSize

74624

increased by28.66%

Lines of code

831

increased by19.91%

Number of lines in readme file

121

increased by12.04%

No dependency changes