@flourish/chart-layout - npm Package Compare versions

Comparing version 10.0.0 to 10.1.0

.eslintrc.json

 {
-    "plugins": [
-        "@flourish/flourish"
-    ],
-    "extends": "plugin:@flourish/flourish/flourish",
-    "env": { "browser": true }
+    "extends": "../../.eslintrc"
 }

package.json

 {
   "name": "@flourish/chart-layout",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "description": "Create axes",
@@ -18,3 +18,3 @@ "main": "chart-layout.js",
     "@flourish/eslint-plugin-flourish": "^0.7.2",
-    "eslint": "^7.17.0",
+    "eslint": "^8.35.0",
     "lint-staged": "^10.5.3",
@@ -21,0 +21,0 @@ "rollup": "^2.36.1",

RELEASE_NOTES.md

@@ -0,1 +1,4 @@
+# 10.1.0
+* Add support for adding 'inner_margins' to update options
+
 # 10.0.0
@@ -2,0 +5,0 @@ * Change tick label and axis title default color to #4A4A4A [BREAKING]

src/dimensions/index.js

@@ -50,2 +50,12 @@ function initDimensions(instance) {
 
+	dimensions.innerWidth = function() {
+		const { inner_margins } = instance;
+		return Math.max(0, dimensions.plotWidth() - (inner_margins.right + inner_margins.left));
+	};
+
+	dimensions.innerHeight = function() {
+		const { inner_margins } = instance;
+		return Math.max(0, dimensions.plotHeight() - (inner_margins.top + inner_margins.bottom));
+	};
+
 	dimensions.xLeft = function() {
@@ -52,0 +62,0 @@ return instance.margins.left;

src/index.js

@@ -21,3 +21,3 @@ import { prepareState } from "./state";
 import { initXTitle, initYTitle, initY2Title } from "./axis-titles";
-import { initMargins } from "./margins";
+import { initMargins, initInnerMargins } from "./margins";
 import {
@@ -98,2 +98,5 @@ initXScale,
 
+	Object.defineProperty(instance, "inner_width", { get: dimensions.innerWidth });
+	Object.defineProperty(instance, "inner_height", { get: dimensions.innerHeight });
+
 	// Calculated coordinates of the corners of the plot area.
@@ -114,2 +117,3 @@ // Coordinates are relative to the top-left of the chart-layout instance
 	instance.margins = initMargins(instance, state);
+	instance.inner_margins = initInnerMargins(instance, state);
 
@@ -116,0 +120,0 @@ /*

src/margins/index.js

@@ -257,3 +257,29 @@ import { remToPx, getFont } from "../common";
 
+function initInnerMargins() {
+	var top, right, bottom, left;
+	top = right = bottom = left = 0;
 
-export { initMargins };
+	var updateMargins = function(overrides) {
+		overrides = overrides || {};
+
+		top = overrides.top || 0;
+		right = overrides.right || 0;
+		bottom = overrides.bottom || 0;
+		left = overrides.left || 0;
+	};
+
+	var inner_margins = function() {
+		return { top: top, right: right, bottom: bottom, left: left };
+	};
+
+	inner_margins._update = updateMargins;
+
+	Object.defineProperty(inner_margins, "top", { get: function() { return top; } });
+	Object.defineProperty(inner_margins, "right", { get: function() { return right; } });
+	Object.defineProperty(inner_margins, "bottom", { get: function() { return bottom; } });
+	Object.defineProperty(inner_margins, "left", { get: function() { return left; } });
+
+	return inner_margins;
+}
+
+export { initMargins, initInnerMargins };

src/scales/x.js

@@ -47,3 +47,3 @@ import { getPointScale, getLinearScale, getLogScale, getDatetimeScale } from "./scales";
 	const n_min_steps = full_width / min_data_step;
-	const step_width = instance.plot_width / n_min_steps; // in pixels
+	const step_width = instance.inner_width / n_min_steps; // in pixels
 
@@ -86,4 +86,4 @@ return { left: left * step_width, right: right * step_width };
 
-		const x_width = instance.plot_width;
-		const left_margin = instance.margins.left;
+		const x_width = instance.inner_width;
+		const left_margin = instance.margins.left + instance.inner_margins.left;
 		const { left, right } = getXPadding(instance, x, xScale.domain());
@@ -90,0 +90,0 @@ const effective_width = x_width - (left + right);

src/scales/y.js

@@ -47,3 +47,3 @@ import { getPointScale, getLinearScale, getLogScale, getDatetimeScale } from "./scales";
 	const n_min_steps = full_width / min_data_step;
-	const step_width = instance.plot_height / n_min_steps; // in pixels
+	const step_width = instance.inner_height / n_min_steps; // in pixels
 
@@ -87,4 +87,4 @@ return { bottom: bottom * step_width, top: top * step_width };
 
-		const y_height = instance.plot_height;
-		const top_margin = instance.margins.top;
+		const y_height = instance.inner_height;
+		const top_margin = instance.margins.top + instance.inner_margins.top;
 		const { bottom, top } = getYPadding(instance, y, yScale.domain());
@@ -91,0 +91,0 @@ const effective_height = y_height - (bottom + top);

src/scales/y2.js

@@ -47,3 +47,3 @@ import { getPointScale, getLinearScale, getLogScale, getDatetimeScale } from "./scales";
 	const n_min_steps = full_width / min_data_step;
-	const step_width = instance.plot_width / n_min_steps; // in pixels
+	const step_width = instance.inner_width / n_min_steps; // in pixels
 
@@ -87,4 +87,4 @@ return { bottom: bottom * step_width, top: top * step_width };
 
-		const y2_height = instance.plot_height;
-		const top_margin = instance.margins.top;
+		const y2_height = instance.inner_height;
+		const top_margin = instance.margins.top + instance.inner_margins.top;
 		const { bottom, top } = getY2Padding(instance, y2, yScale.domain());
@@ -91,0 +91,0 @@ const effective_height = y2_height - (bottom + top);

src/update/index.js

@@ -25,2 +25,3 @@ import { updateRemToPx } from "../common";
 	var updateMargins = function(margins) { instance.margins._update(margins); };
+	var updateInnerMargins = function(margins) { instance.inner_margins._update(margins); };
 	var updateClip = initClipUpdating(instance, state);
@@ -43,2 +44,3 @@ var updateBackground = initBackgroundUpdating(instance, state);
 		updateMargins(opts.margins);
+		updateInnerMargins(opts.inner_margins);
 		// Stop here if we don't actually want to render anything
@@ -45,0 +47,0 @@ if (opts.skip_rendering) return instance;

No alert changes

Improved metrics

Total package byte prevSize

443598

increased by0.74%

Lines of code

10675

increased by0.58%

No dependency changes