react-simple-heatmap - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

dist/index.es.js

@@ -1,2 +0,2 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
@@ -31,6 +31,130 @@
 
-var css = ".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_heatmapLegend__3uCvs{\n\tborder: 1px solid #ebedf0;\n\twidth: 6%;\n\tmargin-left: 1.5rem;\n}\n\n.styles_legendTicks__2SY-O{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 0;\n}\n\n.styles_legendTick___Ajpl{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.styles_tickWrapper___qx-Y{\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.styles_smallLine__2YJnC{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.styles_yLabels__9Vh0V{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\talign-items: flex-end;\n\tmargin: -6px 0 -8px;\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_xLabels__Z2GjZ{\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t/* align-items: center; */\n\tmargin: 2px 79px 0 25px;\n}\n\n.styles_xTickWrapper__CdDR_{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.styles_xTick__2LLa0{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\twidth: 10px;\n\ttext-align: center;\n}\n\n.styles_xSmallLine__3oT5s{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.styles_xLines__1Grnq{\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t/* align-items: center; */\n\tmargin: 2px 84px 0 29px;\n}\n";
-var styles = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapLegend": "styles_heatmapLegend__3uCvs", "legendTicks": "styles_legendTicks__2SY-O", "legendTick": "styles_legendTick___Ajpl", "tickWrapper": "styles_tickWrapper___qx-Y", "smallLine": "styles_smallLine__2YJnC", "yLabels": "styles_yLabels__9Vh0V", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3", "xLabels": "styles_xLabels__Z2GjZ", "xTickWrapper": "styles_xTickWrapper__CdDR_", "xTick": "styles_xTick__2LLa0", "xSmallLine": "styles_xSmallLine__3oT5s", "xLines": "styles_xLines__1Grnq" };
+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 styles = { "heatmapLegend": "Legend_heatmapLegend__2jo9v", "legendTicks": "Legend_legendTicks__3kAun", "legendTick": "Legend_legendTick__2dW0x", "tickWrapper": "Legend_tickWrapper__2DF_o", "smallLine": "Legend_smallLine__2E2XS" };
 styleInject(css);
 
+var Legend = function Legend(props) {
+	var borderColor = props.borderColor;
+
+
+	return React.createElement(
+		Fragment,
+		null,
+		React.createElement("div", {
+			style: { background: "linear-gradient( " + props.legendColor + " , #fff)", borderColor: borderColor },
+			className: styles.heatmapLegend }),
+		React.createElement(
+			"div",
+			{
+				className: styles.legendTicks },
+			props.legendLabels.map(function (label, i) {
+				return React.createElement(
+					"div",
+					{
+						key: i,
+						className: styles.tickWrapper },
+					React.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles.smallLine }),
+					React.createElement(
+						"div",
+						{
+							className: styles.legendTick },
+						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 styles$1 = { "xLabels": "Xlabels_xLabels__WGPqz", "xTickWrapper": "Xlabels_xTickWrapper__2ihUJ", "xTick": "Xlabels_xTick__VLObZ", "xSmallLine": "Xlabels_xSmallLine__1-Cee", "xLines": "Xlabels_xLines__Byn1D" };
+styleInject(css$1);
+
+var Xlabels = function Xlabels(props) {
+	var borderColor = props.borderColor,
+	    xLabels = props.xLabels;
+
+
+	return React.createElement(
+		Fragment,
+		null,
+		React.createElement(
+			"div",
+			{ className: styles$1.xLines },
+			xLabels.map(function (x, i) {
+				return React.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$1.xTickWrapper },
+					React.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles$1.xSmallLine })
+				);
+			})
+		),
+		React.createElement(
+			"div",
+			{ className: styles$1.xLabels },
+			xLabels.map(function (x, i) {
+				return React.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$1.xTickWrapper },
+					React.createElement(
+						"div",
+						{
+							key: i,
+							className: styles$1.xTick },
+						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 styles$2 = { "tickWrapper": "Ylabels_tickWrapper__1tDtU", "smallLine": "Ylabels_smallLine__3TyT9", "yLabels": "Ylabels_yLabels__19gKd", "yTick": "Ylabels_yTick__1A7gX" };
+styleInject(css$2);
+
+var Ylabels = function Ylabels(props) {
+	var borderColor = props.borderColor,
+	    yLabels = props.yLabels;
+
+
+	return React.createElement(
+		"div",
+		{ className: styles$2.yLabels },
+		React.createElement(
+			Fragment,
+			null,
+			yLabels.map(function (y, i) {
+				return React.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$2.tickWrapper },
+					React.createElement(
+						"div",
+						{
+							className: styles$2.yTick },
+						y
+					),
+					React.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles$2.smallLine })
+				);
+			})
+		)
+	);
+};
+
+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" };
+styleInject(css$3);
+
 var classCallCheck = function (instance, Constructor) {
@@ -154,8 +278,8 @@ if (!(instance instanceof Constructor)) {
 
+			// const numX = data.length;
 
-			var numX = data.length;
-			// const numY = data[0].length;
+			var numY = data[0].length;
 
 			// It dont work because of the formula is wrong... (length of 20 !== 20%);
-			var height = 1 / (numX / 100) + "%";
+			var height = 1 / (numY / 100) + "%";
 
@@ -176,4 +300,5 @@ var backgroundColor = bgColor ? bgColor : "rgb(24, 144, 255)";
 			// const legendLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const yLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const xLabels = [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;
@@ -204,30 +329,12 @@ var xLabels = false;
 				'div',
-				{ className: styles.mainWrapper },
+				{ className: styles$3.mainWrapper },
 				React.createElement(
 					'div',
-					{ className: styles.heatMapAndXlabels },
+					{ className: styles$3.heatMapAndXlabels },
 					React.createElement(
 						'div',
-						{ className: styles.heatmapAndYlabels },
-						yLabels && React.createElement(
-							'div',
-							{ className: styles.yLabels },
-							yLabels.map(function (y, i) {
-								return React.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.tickWrapper },
-									React.createElement(
-										'div',
-										{
-											className: styles.legendTick },
-										y
-									),
-									React.createElement('div', {
-										style: { borderColor: borderColor },
-										className: styles.smallLine })
-								);
-							})
-						),
+						{ className: styles$3.heatmapAndYlabels },
+						yLabels && React.createElement(Ylabels, {
+							borderColor: borderColor,
+							yLabels: yLabels }),
 						React.createElement(
@@ -237,3 +344,3 @@ 'div',
 								style: { border: borderStyle, borderColor: borderColor },
-								className: styles.heatMap },
+								className: styles$3.heatMap },
 							data.map(function (row, i) {
@@ -244,3 +351,3 @@ return React.createElement(
 										key: i,
-										className: styles.heatMapRow },
+										className: styles$3.heatMapRow },
 									row.map(function (square, j) {
@@ -253,3 +360,3 @@ var opacity = (square - min) * mult;
 												key: i + "" + j,
-												className: styles.square,
+												className: styles$3.square,
 												onClick: function onClick() {
@@ -265,70 +372,10 @@ return _this2.handleClick(square);
 						),
-						this.props.showLegend && min !== undefined && min !== "NaN" && React.createElement(
-							Fragment,
-							null,
-							React.createElement('div', {
-								style: { background: 'linear-gradient( ' + legendColor + ' , #fff)', borderColor: borderColor },
-								className: styles.heatmapLegend }),
-							React.createElement(
-								'div',
-								{
-									className: styles.legendTicks },
-								legendLabels.map(function (label, i) {
-									return React.createElement(
-										'div',
-										{
-											key: i,
-											className: styles.tickWrapper },
-										React.createElement('div', {
-											style: { borderColor: borderColor },
-											className: styles.smallLine }),
-										React.createElement(
-											'div',
-											{
-												className: styles.legendTick },
-											label
-										)
-									);
-								})
-							)
-						)
+						this.props.showLegend && min !== undefined && min !== "NaN" && React.createElement(Legend, {
+							legendLabels: legendLabels,
+							legendColor: legendColor,
+							borderColor: borderColor })
 					),
-					xLabels && React.createElement(
-						Fragment,
-						null,
-						React.createElement(
-							'div',
-							{ className: styles.xLines },
-							xLabels.map(function (x, i) {
-								return React.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.xTickWrapper },
-									React.createElement('div', {
-										style: { borderColor: borderColor },
-										className: styles.xSmallLine })
-								);
-							})
-						),
-						React.createElement(
-							'div',
-							{ className: styles.xLabels },
-							xLabels.map(function (x, i) {
-								return React.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.xTickWrapper },
-									React.createElement(
-										'div',
-										{
-											key: i,
-											className: styles.xTick },
-										x
-									)
-								);
-							})
-						)
-					)
+					xLabels && React.createElement(Xlabels, {
+						borderColor: borderColor,
+						xLabels: xLabels })
 				)
@@ -335,0 +382,0 @@ );

dist/index.js

@@ -36,6 +36,130 @@ 'use strict';
 
-var css = ".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_heatmapLegend__3uCvs{\n\tborder: 1px solid #ebedf0;\n\twidth: 6%;\n\tmargin-left: 1.5rem;\n}\n\n.styles_legendTicks__2SY-O{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\tmargin: -5.5px 0;\n}\n\n.styles_legendTick___Ajpl{\n\tfont-size: 10px;\n\tpadding: 0 5px;\n}\n\n.styles_tickWrapper___qx-Y{\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.styles_smallLine__2YJnC{\n\twidth: 6px;\n\tborder-bottom: 1px solid #ebedf0;\n}\n\n.styles_yLabels__9Vh0V{\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tjustify-content: space-between;\n\talign-items: flex-end;\n\tmargin: -6px 0 -8px;\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_xLabels__Z2GjZ{\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t/* align-items: center; */\n\tmargin: 2px 79px 0 25px;\n}\n\n.styles_xTickWrapper__CdDR_{\n\talign-items: center;\n  display: flex;\n  justify-content: center;\n  flex-direction: column;\n}\n\n.styles_xTick__2LLa0{\n\tfont-size: 10px;\n\tpadding: 5 0px;\n\twidth: 10px;\n\ttext-align: center;\n}\n\n.styles_xSmallLine__3oT5s{\n\theight: 6px;\n\tborder-right: 1px solid #ebedf0;\n}\n\n.styles_xLines__1Grnq{\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t/* align-items: center; */\n\tmargin: 2px 84px 0 29px;\n}\n";
-var styles = { "heatMap": "styles_heatMap__2Wh43", "square": "styles_square__2WCBo", "heatMapRow": "styles_heatMapRow__3iUbH", "rowWrapper": "styles_rowWrapper__1oFn5", "mainWrapper": "styles_mainWrapper__3BA3r", "heatmapLegend": "styles_heatmapLegend__3uCvs", "legendTicks": "styles_legendTicks__2SY-O", "legendTick": "styles_legendTick___Ajpl", "tickWrapper": "styles_tickWrapper___qx-Y", "smallLine": "styles_smallLine__2YJnC", "yLabels": "styles_yLabels__9Vh0V", "heatmapAndYlabels": "styles_heatmapAndYlabels__gAdre", "heatMapAndXlabels": "styles_heatMapAndXlabels__2RCv3", "xLabels": "styles_xLabels__Z2GjZ", "xTickWrapper": "styles_xTickWrapper__CdDR_", "xTick": "styles_xTick__2LLa0", "xSmallLine": "styles_xSmallLine__3oT5s", "xLines": "styles_xLines__1Grnq" };
+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 styles = { "heatmapLegend": "Legend_heatmapLegend__2jo9v", "legendTicks": "Legend_legendTicks__3kAun", "legendTick": "Legend_legendTick__2dW0x", "tickWrapper": "Legend_tickWrapper__2DF_o", "smallLine": "Legend_smallLine__2E2XS" };
 styleInject(css);
 
+var Legend = function Legend(props) {
+	var borderColor = props.borderColor;
+
+
+	return React__default.createElement(
+		React.Fragment,
+		null,
+		React__default.createElement("div", {
+			style: { background: "linear-gradient( " + props.legendColor + " , #fff)", borderColor: borderColor },
+			className: styles.heatmapLegend }),
+		React__default.createElement(
+			"div",
+			{
+				className: styles.legendTicks },
+			props.legendLabels.map(function (label, i) {
+				return React__default.createElement(
+					"div",
+					{
+						key: i,
+						className: styles.tickWrapper },
+					React__default.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles.smallLine }),
+					React__default.createElement(
+						"div",
+						{
+							className: styles.legendTick },
+						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 styles$1 = { "xLabels": "Xlabels_xLabels__WGPqz", "xTickWrapper": "Xlabels_xTickWrapper__2ihUJ", "xTick": "Xlabels_xTick__VLObZ", "xSmallLine": "Xlabels_xSmallLine__1-Cee", "xLines": "Xlabels_xLines__Byn1D" };
+styleInject(css$1);
+
+var Xlabels = function Xlabels(props) {
+	var borderColor = props.borderColor,
+	    xLabels = props.xLabels;
+
+
+	return React__default.createElement(
+		React.Fragment,
+		null,
+		React__default.createElement(
+			"div",
+			{ className: styles$1.xLines },
+			xLabels.map(function (x, i) {
+				return React__default.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$1.xTickWrapper },
+					React__default.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles$1.xSmallLine })
+				);
+			})
+		),
+		React__default.createElement(
+			"div",
+			{ className: styles$1.xLabels },
+			xLabels.map(function (x, i) {
+				return React__default.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$1.xTickWrapper },
+					React__default.createElement(
+						"div",
+						{
+							key: i,
+							className: styles$1.xTick },
+						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 styles$2 = { "tickWrapper": "Ylabels_tickWrapper__1tDtU", "smallLine": "Ylabels_smallLine__3TyT9", "yLabels": "Ylabels_yLabels__19gKd", "yTick": "Ylabels_yTick__1A7gX" };
+styleInject(css$2);
+
+var Ylabels = function Ylabels(props) {
+	var borderColor = props.borderColor,
+	    yLabels = props.yLabels;
+
+
+	return React__default.createElement(
+		"div",
+		{ className: styles$2.yLabels },
+		React__default.createElement(
+			React.Fragment,
+			null,
+			yLabels.map(function (y, i) {
+				return React__default.createElement(
+					"div",
+					{
+						key: i,
+						className: styles$2.tickWrapper },
+					React__default.createElement(
+						"div",
+						{
+							className: styles$2.yTick },
+						y
+					),
+					React__default.createElement("div", {
+						style: { borderColor: borderColor },
+						className: styles$2.smallLine })
+				);
+			})
+		)
+	);
+};
+
+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" };
+styleInject(css$3);
+
 var classCallCheck = function (instance, Constructor) {
@@ -159,8 +283,8 @@ if (!(instance instanceof Constructor)) {
 
+			// const numX = data.length;
 
-			var numX = data.length;
-			// const numY = data[0].length;
+			var numY = data[0].length;
 
 			// It dont work because of the formula is wrong... (length of 20 !== 20%);
-			var height = 1 / (numX / 100) + "%";
+			var height = 1 / (numY / 100) + "%";
 
@@ -181,4 +305,5 @@ var backgroundColor = bgColor ? bgColor : "rgb(24, 144, 255)";
 			// const legendLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const yLabels = [0, 0.2, 0.4, 0.6, 0.8, 1];
-			// const xLabels = [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;
@@ -209,30 +334,12 @@ var xLabels = false;
 				'div',
-				{ className: styles.mainWrapper },
+				{ className: styles$3.mainWrapper },
 				React__default.createElement(
 					'div',
-					{ className: styles.heatMapAndXlabels },
+					{ className: styles$3.heatMapAndXlabels },
 					React__default.createElement(
 						'div',
-						{ className: styles.heatmapAndYlabels },
-						yLabels && React__default.createElement(
-							'div',
-							{ className: styles.yLabels },
-							yLabels.map(function (y, i) {
-								return React__default.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.tickWrapper },
-									React__default.createElement(
-										'div',
-										{
-											className: styles.legendTick },
-										y
-									),
-									React__default.createElement('div', {
-										style: { borderColor: borderColor },
-										className: styles.smallLine })
-								);
-							})
-						),
+						{ className: styles$3.heatmapAndYlabels },
+						yLabels && React__default.createElement(Ylabels, {
+							borderColor: borderColor,
+							yLabels: yLabels }),
 						React__default.createElement(
@@ -242,3 +349,3 @@ 'div',
 								style: { border: borderStyle, borderColor: borderColor },
-								className: styles.heatMap },
+								className: styles$3.heatMap },
 							data.map(function (row, i) {
@@ -249,3 +356,3 @@ return React__default.createElement(
 										key: i,
-										className: styles.heatMapRow },
+										className: styles$3.heatMapRow },
 									row.map(function (square, j) {
@@ -258,3 +365,3 @@ var opacity = (square - min) * mult;
 												key: i + "" + j,
-												className: styles.square,
+												className: styles$3.square,
 												onClick: function onClick() {
@@ -270,70 +377,10 @@ return _this2.handleClick(square);
 						),
-						this.props.showLegend && min !== undefined && min !== "NaN" && React__default.createElement(
-							React.Fragment,
-							null,
-							React__default.createElement('div', {
-								style: { background: 'linear-gradient( ' + legendColor + ' , #fff)', borderColor: borderColor },
-								className: styles.heatmapLegend }),
-							React__default.createElement(
-								'div',
-								{
-									className: styles.legendTicks },
-								legendLabels.map(function (label, i) {
-									return React__default.createElement(
-										'div',
-										{
-											key: i,
-											className: styles.tickWrapper },
-										React__default.createElement('div', {
-											style: { borderColor: borderColor },
-											className: styles.smallLine }),
-										React__default.createElement(
-											'div',
-											{
-												className: styles.legendTick },
-											label
-										)
-									);
-								})
-							)
-						)
+						this.props.showLegend && min !== undefined && min !== "NaN" && React__default.createElement(Legend, {
+							legendLabels: legendLabels,
+							legendColor: legendColor,
+							borderColor: borderColor })
 					),
-					xLabels && React__default.createElement(
-						React.Fragment,
-						null,
-						React__default.createElement(
-							'div',
-							{ className: styles.xLines },
-							xLabels.map(function (x, i) {
-								return React__default.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.xTickWrapper },
-									React__default.createElement('div', {
-										style: { borderColor: borderColor },
-										className: styles.xSmallLine })
-								);
-							})
-						),
-						React__default.createElement(
-							'div',
-							{ className: styles.xLabels },
-							xLabels.map(function (x, i) {
-								return React__default.createElement(
-									'div',
-									{
-										key: i,
-										className: styles.xTickWrapper },
-									React__default.createElement(
-										'div',
-										{
-											key: i,
-											className: styles.xTick },
-										x
-									)
-								);
-							})
-						)
-					)
+					xLabels && React__default.createElement(Xlabels, {
+						borderColor: borderColor,
+						xLabels: xLabels })
 				)
@@ -340,0 +387,0 @@ );

package.json

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

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57999

8.6%

Lines of code

693

10.53%

Number of low supply chain risk alerts

1

-66.67%

No dependency changes