@flourish/chart-layout - npm Package Compare versions

Comparing version 3.0.0-prerelease.1 to 3.0.0-prerelease.2

package.json

 {
   "name": "@flourish/chart-layout",
-  "version": "3.0.0-prerelease.1",
+  "version": "3.0.0-prerelease.2",
   "description": "Create axes",
@@ -5,0 +5,0 @@ "main": "chart-layout.js",

README.md

@@ -205,2 +205,5 @@ # Flourish chart layout
 
+### `chart_layout.xHide([value])`
+If `value` is specified then sets whether or not the x axis should be hidden. This means the tick marks, labels, gridlines and axis title will not be drawn and no space will be left for them. The `xScale` and `xTicks` methods will still function as if the axis was visible.
+
 ### `chart_layout.xZeroAxis([value])`
@@ -219,2 +222,5 @@ If `value` is specified and is truthy then the x axis will include 0 if the data is numeric and the axis linear, regardless of the `xData` values. User-set `min` and `max` settings can overcome this restriction.
 
+### `chart_layout.yHide([value])`
+If `value` is specified then sets whether or not the y axis should be hidden. This means the tick marks, labels, gridlines and axis title will not be drawn and no space will be left for them. The `yScale` and `yTicks` methods will still function as if the axis was visible.
+
 ### `chart_layout.yZeroAxis([value])`
@@ -233,3 +239,6 @@ If `value` is specified and is truthy then the primary y axis will include 0 if the data is numeric and the axis linear, regardless of the `yData` values. User-set `min` and `max` settings can overcome this restriction.
 
+### `chart_layout.y2Hide([value])`
+If `value` is specified then sets whether or not the y2 axis should be hidden. This means the tick marks, labels, gridlines and axis title will not be drawn and no space will be left for them. The `y2Scale` and `y2Ticks` methods will still function as if the axis was visible.
+
 ### `chart_layout.y2ZeroAxis([value])`
 If `value` is specified and is truthy then the secondary y axis will include 0 if the data is numeric and the axis linear, regardless of the `y2Data` values. User-set `min` and `max` settings can overcome this restriction.

RELEASE_NOTES.md

@@ -1,3 +0,5 @@
-# 3.0.0 prerelease 1
+# 3.0.0 prerelease 2
 * Add auto axis titles
+* Support y2 gridlines
+* Make axes hidable by the Flourish developer
 * Fix bug with zeroAxis functions and negative minimum
@@ -4,0 +6,0 @@

src/index.js

@@ -15,2 +15,3 @@ import { prepareState } from "./state";
 import { initXScale, initYScale, initY2Scale, initZeroAxis } from "./scales";
+import { initHide } from "./hide";
 import { initUpdate } from "./update";
@@ -67,2 +68,5 @@
 	instance.y2ZeroAxis = initZeroAxis(instance);
+	instance.xHide = initHide(instance);
+	instance.yHide = initHide(instance);
+	instance.y2Hide = initHide(instance);
 
@@ -69,0 +73,0 @@ instance.update = initUpdate(instance, state);

src/margins/index.js

@@ -81,7 +81,7 @@ import { remToPx, getFont } from "../common";
 	var x_axis_space = 0;
-	if (x.axis_position === "top" || x.axis_position === "float-above") {
+	if (!instance.xHide() && ["top", "float-above"].indexOf(x.axis_position) !== -1) {
 		x_axis_space = getXAxisSpace(instance, state);
 	}
 	var y_overflow = remToPx(1);
-	var ticks = instance.yTicks();
+	var ticks = !instance.yHide() ? instance.yTicks() : [];
 	if (ticks.length) {
@@ -99,10 +99,10 @@ var last_tick = ticks[ticks.length - 1];
 	var x_axis_space = 0;
-	if (x.axis_position === "bottom" || x.axis_position === "float-below") {
+	if (!instance.xHide() && ["bottom", "float-below"].indexOf(x.axis_position) !== -1) {
 		x_axis_space = getXAxisSpace(instance, state);
 	}
 	var y_overflow = remToPx(1);
-	var ticks = instance.yTicks();
+	var ticks = !instance.yHide() ? instance.yTicks() : [];
 	if (ticks.length) {
 		var first_tick = ticks[0];
-		// Assume first tick is placed at the top of the axis and add a little breathing room
+		// Assume first tick is placed at the bottom of the axis and add a little breathing room
 		y_overflow = Math.max(y_overflow, 1.2*first_tick.box_height_below);
@@ -117,6 +117,6 @@ }
 	var y = state.y;
-	var ticks = instance.yTicks();
+	var ticks = !instance.yHide() ? instance.yTicks() : [];
 	var tick_space = ticks.length && y.tick_side === "out" ? remToPx(y.tick_length + y.tick_padding) : 0;
-	var tick_label_space = ticks.max_box_width;
-	var title_space = getYTitleHeight(instance, state);
+	var tick_label_space = ticks.max_box_width || 0;
+	var title_space = !instance.yHide() ? getYTitleHeight(instance, state) : 0;
 	var axis_width = tick_space + tick_label_space + title_space;
@@ -126,3 +126,3 @@
 	var x_overflow = remToPx(1);
-	var x_ticks = instance.xTicks();
+	var x_ticks = !instance.xHide() ? instance.xTicks() : [];
 	if (x_ticks.length) {
@@ -141,6 +141,6 @@ var first_x_tick = x_ticks[0];
 	var y2 = state.y2;
-	var y2_ticks = instance.y2Ticks();
+	var y2_ticks = !instance.y2Hide() ? instance.y2Ticks() : [];
 	var tick_space = y2_ticks.length && y2.tick_side === "out" ? remToPx(y2.tick_length + y2.tick_padding) : 0;
-	var tick_label_space = instance.y2Ticks().max_box_width;
-	var title_space = getY2TitleHeight(instance, state);
+	var tick_label_space = instance.y2Ticks().max_box_width || 0;
+	var title_space = !instance.y2Hide() ? getY2TitleHeight(instance, state) : 0;
 	var axis_width = tick_space + tick_label_space + title_space;
@@ -150,3 +150,3 @@
 	var x_overflow = remToPx(1);
-	var x_ticks = instance.xTicks();
+	var x_ticks = !instance.xHide() ? instance.xTicks() : [];
 	if (x_ticks.length) {
@@ -153,0 +153,0 @@ var last_x_tick = x_ticks[x_ticks.length - 1];

src/update/axes/x-axis.js

@@ -44,3 +44,3 @@ import { select } from "d3-selection";
 			var pos = x.axis_position;
-			var show_this_axis = pos === "bottom" || pos === "float-below";
+			var show_this_axis = (!instance.xHide() && ["bottom", "float-below"].indexOf(pos) !== -1);
 			var ticks = show_this_axis ? instance.xTicks() : [];
@@ -47,0 +47,0 @@ var y0 = yScale.range()[0];

src/update/axes/y-axis.js

@@ -16,5 +16,6 @@ import { select } from "d3-selection";
 	return function() {
+		var show_this_axis = y.axis_visible && !instance.yHide();
 		var xScale = safeScale(instance.xScale());
 		var yScale = safeScale(instance.yScale());
-		var ticks = instance.yTicks();
+		var ticks = show_this_axis ? instance.yTicks() : [];
 		var animation_duration = oldXScale ? instance.animationDuration() : 0;
@@ -46,3 +47,3 @@ if (!oldXScale) oldXScale = xScale;
 		var line = line_container.selectAll("line")
-			.data(y.axis_visible && y.line_visible ? [yScale.domain()] : []);
+			.data(show_this_axis && y.line_visible ? [yScale.domain()] : []);
 
@@ -190,3 +191,3 @@ line.exit()
 		var title = title_container.selectAll("text")
-			.data(y.axis_visible && title_text ? [title_text] : []);
+			.data(show_this_axis && title_text ? [title_text] : []);
 
@@ -193,0 +194,0 @@ title.exit().remove();

src/update/axes/y2-axis.js

@@ -16,5 +16,6 @@ import { select } from "d3-selection";
 	return function() {
+		var show_this_axis = y.axis_visible && !instance.y2Hide();
 		var xScale = safeScale(instance.xScale());
 		var yScale = safeScale(instance.y2Scale());
-		var ticks = instance.y2Ticks();
+		var ticks = show_this_axis ? instance.y2Ticks() : [];
 		var animation_duration = oldXScale ? instance.animationDuration() : 0;
@@ -47,3 +48,3 @@ if (!oldXScale) oldXScale = xScale;
 		var line = line_container.selectAll("line")
-			.data(y.axis_visible && y.line_visible ? [yScale.domain()] : []);
+			.data(show_this_axis && y.line_visible ? [yScale.domain()] : []);
 
@@ -191,3 +192,3 @@ line.exit()
 		var title = title_container.selectAll("text")
-			.data(y.axis_visible && title_text ? [title_text] : []);
+			.data(show_this_axis && title_text ? [title_text] : []);
 
@@ -194,0 +195,0 @@ title.exit().remove();

src/update/gridlines/index.js

@@ -21,5 +21,6 @@ import { remToPx, safeScale } from "../../common";
 	var y = state.y;
+	var y2 = state.y2;
 	var vertical = instance.chart.select("g.fl-gridlines-vertical");
 	var horizontal = instance.chart.select("g.fl-gridlines-horizontal");
-	var oldXScale, oldYScale;
+	var oldXScale, oldYScale, oldY2Scale;
 
@@ -29,26 +30,73 @@ return function() {
 		var yScale = safeScale(instance.yScale());
+		var y2Scale = safeScale(instance.y2Scale());
 		oldXScale = oldXScale || xScale;
 		oldYScale = oldYScale || yScale;
+		oldY2Scale = oldY2Scale || y2Scale;
+
 		var animation_duration = oldXScale ? instance.animationDuration() : 0;
+		var x_at_top = ["top", "float-above"].indexOf(x.axis_position) !== -1;
+		var x_ticks = (!instance.xHide() && x.gridlines_visible) ? instance.xTicks() : [];
+		var y_ticks = (!instance.yHide() && y.gridlines_visible) ? instance.yTicks() : [];
+		var y2_ticks = (!instance.y2Hide() && y2.gridlines_visible) ? instance.y2Ticks() : [];
 
-		var v_data = x.gridlines_visible ? instance.xTicks() : [];
-		var h_data = y.gridlines_visible ? instance.yTicks() : [];
-		var old_x_left = oldXScale.range()[0];
-		var old_y_bottom = oldYScale.range()[0];
-		var x_left = xScale.range()[0];
-		var x_right = xScale.range()[1];
-		var y_bottom = yScale.range()[0];
-		var y_top = yScale.range()[1];
+		var v_data = x_ticks.map(function(d) {
+			return {
+				type: d.type,
+				value: d.value,
+				dasharray: getDashArray(x.gridline_style),
+				stroke: x.gridline_color,
+				width: remToPx(x.gridline_width),
+				y_exit: x_at_top ? yScale.range()[1] : yScale.range()[0],
+				x_enter: oldXScale(d.value),
+				y_enter: x_at_top ? oldYScale.range()[1] : oldYScale.range()[0],
+				x: xScale(d.value),
+				y1: yScale.range()[0],
+				y2: yScale.range()[1]
+			};
+		});
 
-		var vertical_lines = vertical.selectAll("line").data(v_data, function(d) { return d.type + "-" + d.value; });
-		var vertical_line_width = remToPx(x.gridline_width);
+		var h_data = y_ticks.map(function(d) {
+			return {
+				axis: "y",
+				type: d.type,
+				value: d.value,
+				dasharray: getDashArray(y.gridline_style),
+				stroke: y.gridline_color,
+				width: remToPx(y.gridline_width),
+				x_exit: xScale.range()[0],
+				x_enter: oldXScale.range()[0],
+				y_enter: oldYScale(d.value),
+				x1: xScale.range()[0],
+				x2: xScale.range()[1],
+				y: yScale(d.value),
+			};
+		})
+		.concat(y2_ticks.map(function(d) {
+			return {
+				axis: "y2",
+				type: d.type,
+				value: d.value,
+				dasharray: getDashArray(y2.gridline_style),
+				stroke: y2.gridline_color,
+				width: remToPx(y2.gridline_width),
+				x_exit: xScale.range()[1],
+				x_enter: oldXScale.range()[1],
+				y_enter: oldY2Scale(d.value),
+				x1: xScale.range()[0],
+				x2: xScale.range()[1],
+				y: y2Scale(d.value),
+			};
+		}));
 
+		var vertical_lines = vertical.selectAll("line")
+			.data(v_data, function(d) { return d.type + "-" + d.value; });
+
 		vertical_lines.exit()
-			.attr("stroke-dasharray", getDashArray(x.gridline_style))
-			.style("stroke", x.gridline_color)
-			.style("stroke-width", vertical_line_width)
+			.attr("stroke-dasharray", function(d) { return d.dasharray; })
+			.style("stroke", function(d) { return d.stroke; })
+			.style("stroke-width", function(d) { return d.width; })
 			.transition()
 			.duration(animation_duration)
-			.attr("y1", y_bottom)
-			.attr("y2", y_bottom)
+			.attr("y1", function(d) { return d.y_exit; })
+			.attr("y2", function(d) { return d.y_exit; })
 			.remove();
@@ -58,29 +106,29 @@
 			.style("shape-rendering", "crispEdges")
-			.attr("x1", function(d) { return oldXScale(d.value); })
-			.attr("x2", function(d) { return oldXScale(d.value); })
-			.attr("y1", old_y_bottom)
-			.attr("y2", old_y_bottom);
+			.attr("x1", function(d) { return d.x_enter; })
+			.attr("x2", function(d) { return d.x_enter; })
+			.attr("y1", function(d) { return d.y_enter; })
+			.attr("y2", function(d) { return d.y_enter; });
 
 		vertical_lines.merge(vertical_lines_enter)
-			.attr("stroke-dasharray", getDashArray(x.gridline_style))
-			.style("stroke", x.gridline_color)
-			.style("stroke-width", vertical_line_width)
+			.attr("stroke-dasharray", function(d) { return d.dasharray; })
+			.style("stroke", function(d) { return d.stroke; })
+			.style("stroke-width", function(d) { return d.width; })
 			.transition()
 			.duration(animation_duration)
-			.attr("x1", function(d) { return xScale(d.value); })
-			.attr("x2", function(d) { return xScale(d.value); })
-			.attr("y1", y_bottom)
-			.attr("y2", y_top);
+			.attr("x1", function(d) { return d.x; })
+			.attr("x2", function(d) { return d.x; })
+			.attr("y1", function(d) { return d.y1; })
+			.attr("y2", function(d) { return d.y2; });
 
-		var horizontal_lines = horizontal.selectAll("line").data(h_data, function(d) { return d.type + "-" + d.value; });
-		var horizontal_line_width = remToPx(y.gridline_width);
+		var horizontal_lines = horizontal.selectAll("line")
+			.data(h_data, function(d) { return d.axis + "-" + d.type + "-" + d.value; });
 
 		horizontal_lines.exit()
-			.attr("stroke-dasharray", getDashArray(y.gridline_style))
-			.style("stroke", y.gridline_color)
-			.style("stroke-width", horizontal_line_width)
+			.attr("stroke-dasharray", function(d) { return d.dasharray; })
+			.style("stroke", function(d) { return d.stroke; })
+			.style("stroke-width", function(d) { return d.width; })
 			.transition()
 			.duration(animation_duration)
-			.attr("x1", x_left)
-			.attr("x2", x_left)
+			.attr("x1", function(d) { return d.x_exit; })
+			.attr("x2", function(d) { return d.x_exit; })
 			.remove();
@@ -90,20 +138,21 @@
 			.style("shape-rendering", "crispEdges")
-			.attr("x1", old_x_left)
-			.attr("x2", old_x_left)
-			.attr("y1", function(d) { return oldYScale(d.value); })
-			.attr("y2", function(d) { return oldYScale(d.value); });
+			.attr("x1", function(d) { return d.x_enter; })
+			.attr("x2", function(d) { return d.x_enter; })
+			.attr("y1", function(d) { return d.y_enter; })
+			.attr("y2", function(d) { return d.y_enter; });
 
 		horizontal_lines.merge(horizontal_lines_enter)
-			.attr("stroke-dasharray", getDashArray(y.gridline_style))
-			.style("stroke", y.gridline_color)
-			.style("stroke-width", horizontal_line_width)
+			.attr("stroke-dasharray", function(d) { return d.dasharray; })
+			.style("stroke", function(d) { return d.stroke; })
+			.style("stroke-width", function(d) { return d.width; })
 			.transition()
 			.duration(animation_duration)
-			.attr("x1", x_left)
-			.attr("x2", x_right)
-			.attr("y1", function(d) { return yScale(d.value); })
-			.attr("y2", function(d) { return yScale(d.value); });
+			.attr("x1", function(d) { return d.x1; })
+			.attr("x2", function(d) { return d.x2; })
+			.attr("y1", function(d) { return d.y; })
+			.attr("y2", function(d) { return d.y; });
 
 		oldXScale = xScale;
 		oldYScale = yScale;
+		oldY2Scale = y2Scale;
 	};
@@ -110,0 +159,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

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

Improved metrics

Total package byte prevSize

347623

increased by1.7%

Number of package files

43

increased by2.38%

Lines of code

8944

increased by1.38%

Number of lines in readme file

242

increased by3.86%

No dependency changes