@flourish/facets - npm Package Compare versions

Comparing version 1.0.0-prerelease.3 to 1.0.0-prerelease.4

package.json

 {
   "name": "@flourish/facets",
-  "version": "1.0.0-prerelease.3",
+  "version": "1.0.0-prerelease.4",
   "description": "Create grids of things",
@@ -5,0 +5,0 @@ "main": "facets.js",

src/index.js

@@ -26,2 +26,4 @@ import { select } from "d3-selection";
 	title_bg_color: "#eeeeee",
+
+	animation: "auto"
 }
@@ -43,2 +45,3 @@
 	this._facet_aspect = null;
+	this._facet_width = null;
 	this._is_ragged = null;
@@ -94,3 +97,2 @@ this._max = 100; // TODO. Should this be user-settable
 
-var prev_num_facets;
 Facets.prototype.update = function(callback) {
@@ -108,4 +110,3 @@ var instance = this,
 	var gutter_w = remToPx(state.gutter_w),
-	    gutter_h = remToPx(state.gutter_h),
-	    title_h = show_titles ? remToPx(state.title_size + state.title_padding_top + state.title_padding_bottom) : 0;
+	    gutter_h = remToPx(state.gutter_h);
 
@@ -135,3 +136,6 @@ var cols, rows;
 
-	var facet_h = 100; // Fallback in case height and aspect are both null
+	instance._facet_width = facet_w;
+
+	var title_h = show_titles ? getFontSize(state.title_size + state.title_padding_top + state.title_padding_bottom) : 0,
+	    facet_h = 100; // Fallback in case height and aspect are both null
 	if (total_height != null) facet_h = Math.max(0, (total_height - (gutter_h * (rows - 1)))/rows);
@@ -143,3 +147,8 @@ else if (facet_aspect != null) {
 
-	var facets = select(this._container).selectAll(".fl-facet").data(data, function(d, i) { return data.length > 1 ? d : i; });
+	var facets = select(this._container).selectAll(".fl-facet").data(data,
+			function(d, i) {
+				if (state.animation == "name") return d;
+				if (state.animation == "reuse") return i;
+				return data.length == 1 ? i : d; // Auto mode. Reuse axis if only one, otherwise bind to name
+		});
 
@@ -151,9 +160,8 @@ // ENTER SELECTION //
 			// enter the axes in the first grid position to give some animation
-			if (prev_num_facets == 1) return positionFacet(0);
 			 return positionFacet(i);
 		});
 
-	var title_bg_padding_px = state.title_bg == "none" ? 0 : remToPx(state.title_bg_padding),
-	    title_size_px = remToPx(state.title_size),
-	    facet_title_dy_px = remToPx(state.title_size * 0.8 + state.title_padding_top);
+	var title_bg_padding_px = state.title_bg == "none" ? 0 : getFontSize(state.title_bg_padding),
+	    title_size_px = getFontSize(state.title_size),
+	    facet_title_dy_px = getFontSize(state.title_size * 0.8 + state.title_padding_top);
 		// 0.8 is about right with most fonts to vertically centre-align the
@@ -226,4 +234,3 @@ // ascenders and descenders inside the background
 	facets_exit.each(updateFacetOuter)
-		.transition().duration(duration)
-		.attr("transform", function(d, i) { return positionFacet(num_facets - 1); })
+		.transition().duration(duration/2)
 		.attr("opacity", 0)
@@ -321,8 +328,11 @@ .remove();
 			current_font_size = parseFloat(this.getAttribute("font-size")),
-			target_font_size = remToPx(state.title_size);
+			target_font_size = getFontSize(state.title_size);
 		this.parentNode.__title_width = current_text_width * target_font_size/current_font_size;
 	}
 
+	function getFontSize(size) {
+		return size * facet_w/25;
+	}
+
 	this._facets = facets_update.select(".fl-facet-primary").nodes().map(function(d) { return d.__facet_inner__ });
-	prev_num_facets = num_facets;
 
@@ -337,2 +347,7 @@ return this;
 
+Facets.prototype.facetWidth = function() {
+	return this._facet_width;
+}
+
+
 Facets.prototype.getFacet = function(name) {
@@ -361,3 +376,2 @@ var i = this._data.indexOf(name);
 
-export { remToPx };
 export default initFacets;

No alert changes

Improved metrics

Total package byte prevSize

101102

increased by0.9%

Lines of code

2819

increased by0.61%

No dependency changes