@flourish/chart-layout - npm Package Compare versions

Comparing version 10.1.0 to 10.2.0

package.json

 {
   "name": "@flourish/chart-layout",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "description": "Create axes",
@@ -19,3 +19,2 @@ "main": "chart-layout.js",
     "eslint": "^8.35.0",
-    "lint-staged": "^10.5.3",
     "rollup": "^2.36.1",
@@ -22,0 +21,0 @@ "rollup-plugin-node-resolve": "^5.2.0",

README.md

@@ -125,2 +125,33 @@ # Flourish chart layout
 
+In some cases it's useful to add an inner margin to the chart layout. This is applied between the axes and the plot area, therefore keeping both axes fixed to the positions set by `margins`. If an `inner_margins` object is supplied and any of its `top`, `right`, `bottom` or `left` properties are not `undefined` then the corresponding margin will be fixed to that value. They default to `0`.
+
+``` js
+// Set the inner_margins to 10 pixels on every side of the chart
+// Margins will default to their calculated values
+chart_layout.update({
+  inner_margins: {
+    top: 10,
+    left: 10,
+    right: 10,
+    bottom: 10
+  }
+});
+
+// Set the margin to 32 pixels and the inner_margin to 10 pixels on every side of the chart
+chart_layout.update({
+  margins: {
+    top: 32,
+    left: 32,
+    right: 32,
+    bottom: 32
+  },
+  inner_margins: {
+    top: 10,
+    left: 10,
+    right: 10,
+    bottom: 10
+  }
+});
+```
+
 ## The `Data` methods of `chart_layout`
@@ -127,0 +158,0 @@

RELEASE_NOTES.md

@@ -0,3 +1,6 @@
+# 10.2.0
+* Add support for custom ticks on categorical axes
+
 # 10.1.0
-* Add support for adding 'inner_margins' to update options
+* Add `inner_margins` as an update option
 
@@ -4,0 +7,0 @@ # 10.0.0

src/update/ticks/index.js

@@ -16,3 +16,2 @@ import { isDate, isValidDate, textareaToArray } from "../../common";
 
-
 function getTickValues(instance, state, axis = "x") {
@@ -24,5 +23,11 @@ const axis_state = state[axis];
 	const ticks_hidden = axis === "x" ? axis_state.axis_position === "off" : !axis_state.axis_visible;
-
 	if (ticks_hidden) ticks = [];
-	else if (data.string_array) ticks = scale.domain();
+	else if (data.string_array) {
+		let domain = scale.domain();
+		if (axis_state.tick_mode !== "custom") ticks = domain;
+		else {
+			const custom_ticks = axis_state.tick_custom.replace("{{FIRST}}", domain[0]).replace("{{LAST}}", domain[domain.length - 1]);
+			ticks = textareaToArray(custom_ticks).filter(d => scale.domain().indexOf(d) > -1);
+		}
+	}
 	else if (axis_state.tick_mode === "number") ticks = scale.ticks(axis_state.tick_number);
@@ -32,6 +37,9 @@ else {
 		const is_datetime = data.datetime_array;
+		const domain = scale.domain();
 		if (axis_state.tick_mode === "custom") {
 			const parser_name = axis + (is_datetime ? "Datetime" : "Number") + "Parse";
 			const parser = instance[parser_name]();
-			tick_list = textareaToArray(axis_state.tick_custom).map(d => parser(d));
+			const formatter = is_datetime ? instance[axis + "Format"]() : function(d) { return d; };
+			const custom_ticks = axis_state.tick_custom.replace("{{FIRST}}", formatter(domain[0])).replace("{{LAST}}", formatter(domain[domain.length - 1]));
+			tick_list = textareaToArray(custom_ticks).map(d => parser(d));
 		}
@@ -43,3 +51,2 @@ else {
 		tick_list = removeDuplicates(tick_list);
-		const domain = scale.domain();
 		const min = Math.min(...domain);
@@ -46,0 +53,0 @@ const max = Math.max(...domain);

No alert changes

Improved metrics

Total package byte prevSize

466441

increased by5.15%

Dev dependency count

5

decreased by-16.67%

Lines of code

11302

increased by5.87%

Number of lines in readme file

394

increased by8.54%

No dependency changes