@flourish/chart-layout - npm Package Compare versions

Comparing version 2.1.0-prerelease.2 to 2.1.0

package.json

 {
   "name": "@flourish/chart-layout",
-  "version": "2.1.0-prerelease.2",
+  "version": "2.1.0",
   "description": "Create axes",
@@ -37,2 +37,3 @@ "main": "chart-layout.js",
     "d3-selection": "^1.4.0",
+    "d3-time-format": "^2.2.3",
     "d3-transition": "^1.2.0"
@@ -39,0 +40,0 @@ },

README.md

@@ -182,2 +182,5 @@ # Flourish chart layout
 
+### `chart_layout.xDatetimeParse([func])`
+If `func` is specified, sets the parsing function to be applied when the Flourish user inputs dates in string format in the settings for the x axis. Currently this means the min and max for the date range.
+
 ### `chart_layout.xFormat([func])`
@@ -189,12 +192,18 @@ If `func` is specified, sets the formatting function to be applied to the tick formats on the x axis. The `func` function is called for every tick on the axis on `update` with the ticks own value as the only argument. The value returned is then used as the printed tick label. If `chart_layout.xFormat` is never called with a `func` or `func` is falsy (but not undefined) the default formatting function, `function(value) { return "" + value; }`, is used.
 
+### `chart_layout.yDatetimeParse([func])`
+If `func` is specified, sets the parsing function to be applied when the Flourish user inputs dates in string format in the settings for the y axis. Currently this means the min and max for the date range.
+
 ### `chart_layout.yFormat([func])`
 If `func` is specified, sets the formatting function to be applied to the tick formats on the primary y axis. The `func` function is called for every tick on the axis on `update` with the ticks own value as the only argument. The value returned is then used as the printed tick label. If `chart_layout.yFormat` is never called with a `func` or `func` is falsy (but not undefined) the default formatting function, `function(value) { return "" + value; }`, is used.
 
+### `chart_layout.yZeroAxis([value])`
+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.y2DatetimeParse([func])`
+If `func` is specified, sets the parsing function to be applied when the Flourish user inputs dates in string format in the settings for the y2 axis. Currently this means the min and max for the date range.
+
 ### `chart_layout.y2Format([func])`
 If `func` is specified, sets the formatting function to be applied to the tick formats on the secondary y axis. The `func` function is called for every tick on the axis on `update` with the ticks own value as the only argument. The value returned is then used as the printed tick label. If `chart_layout.y2Format` is never called with a `func` or `func` is falsy (but not undefined) the default formatting function, `function(value) { return "" + value; }`, is used.
 
-### `chart_layout.yZeroAxis([value])`
-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.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,2 +0,3 @@
-# 2.1.0 (prerelease)
+# 2.1.0
+* Support datetime scales
 * Add label space settings and tick-label cropping
@@ -3,0 +4,0 @@ * Rotated labels on y-axes

src/data/index.js

@@ -1,5 +0,6 @@
-import { createNumericArray, createStringArray } from "@flourish/enhanced-arrays";
+import { createNumericArray, createStringArray, createDatetimeArray } from "@flourish/enhanced-arrays";
 
 var ERROR_MESSAGE = "Input data must be an array or Flourish array";
 
+
 function getFrozenData(input_data, accessor) {
@@ -10,6 +11,7 @@ if (!input_data) throw new TypeError(ERROR_MESSAGE);
 	var acc = accessor || function(x) { return x; };
-	if (!input_data.length || typeof acc(input_data[0]) === "number") {
-		return createNumericArray(input_data, accessor);
-	}
-	return createStringArray(input_data, accessor);
+	var type = input_data.length ? typeof acc(input_data[0]) : "number";
+	if (type === "number") return createNumericArray(input_data, accessor);
+	else if (type === "string") return createStringArray(input_data, accessor);
+	else if (type === "object") return createDatetimeArray(input_data, accessor);
+	throw new TypeError("Unsupported variable type");
 }
@@ -16,0 +18,0 @@

src/index.js

@@ -8,2 +8,3 @@ import { prepareState } from "./state";
 import { initFormat } from "./format";
+import { initDatetimeParse } from "./parse";
 import { initDimensions, initOffsetLeft, initOffsetTop } from "./dimensions";
@@ -50,2 +51,5 @@ import { initData } from "./data";
 	instance.y2Format = initFormat(instance);
+	instance.xDatetimeParse = initDatetimeParse(instance);
+	instance.yDatetimeParse = initDatetimeParse(instance);
+	instance.y2DatetimeParse = initDatetimeParse(instance);
 	instance.xTicks = initXTicks(instance, state);
@@ -52,0 +56,0 @@ instance.yTicks = initYTicks(instance, state);

src/scales/index.js

@@ -1,2 +0,2 @@
-import { scaleLinear, scaleLog, scalePoint } from "d3-scale";
+import { scaleLinear, scaleLog, scalePoint, scaleTime } from "d3-scale";
 
@@ -75,2 +75,18 @@
 
+function getDatetimeScale(data, min, max, format) {
+	var extent = data.extent();
+	var scale = scaleTime().domain(extent).nice();
+	if (format) scale.tickFormat(null, format);
+	var domain = scale.domain();
+
+	if (min === max) min = max = null;
+	if (min) domain[0] = format(min);
+	if (max) domain[1] = format(max);
+	scale.domain(domain);
+	scale.type = "datetime";
+
+	return scale;
+}
+
+
 function initZeroAxis(instance) {
@@ -92,2 +108,5 @@ var zero_axis = false;
 		if (x_data.string_array) xScale = getPointScale(x_data);
+		else if (x_data.datetime_array) {
+			xScale = getDatetimeScale(x_data, state.x.datetime_min, state.x.datetime_max, instance.xDatetimeParse());
+		}
 		else if (state.x.numeric_scale_type === "log") {
@@ -117,2 +136,5 @@ xScale = getLogScale(x_data, state.x.log_min, state.x.log_max);
 		if (y_data.string_array) yScale = getPointScale(y_data);
+		else if (y_data.datetime_array) {
+			yScale = getDatetimeScale(y_data, y.datetime_min, y.datetime_max, instance.yDatetimeParse());
+		}
 		else if (y.numeric_scale_type === "log") {
@@ -142,2 +164,5 @@ yScale = getLogScale(y_data, y.log_min, y.log_max);
 		if (y_data.string_array) yScale = getPointScale(y_data);
+		else if (y_data.datetime_array) {
+			yScale = getDatetimeScale(y_data, y.datetime_min, y.datetime_max, instance.y2DatetimeParse());
+		}
 		else if (y.numeric_scale_type === "log") {
@@ -144,0 +169,0 @@ yScale = getLogScale(y_data, y.log_min, y.log_max);

src/state/x.js

@@ -10,2 +10,4 @@ var X_DEFAULTS = Object.freeze({
 	log_max: null,
+	datetime_min: "",
+	datetime_max: "",
 
@@ -12,0 +14,0 @@ line_visible: true,

src/ticks/index.js

@@ -12,2 +12,13 @@ import { select } from "d3-selection";
 
+function dropRepeatedLabels(tick_array, format) {
+	var last_value;
+	return tick_array.filter(function(value) {
+		var fv = format(value);
+		if (fv === last_value) return;
+		last_value = fv;
+		return true;
+	});
+}
+
+
 function getFitTextFunction(params) {
@@ -89,2 +100,5 @@ var max_space = params.max_space !== undefined ? params.max_space : 100;
 
+		// filter out dates that will give repeated tick labels
+		if (typeof tick_array[0] === "object") dropRepeatedLabels(tick_array, format);
+
 		var max_space = remToPx(x.tick_label_space);
@@ -198,2 +212,5 @@ if (x.tick_label_space_mode === "auto") max_space = instance.xTicks.autoLabelSpace().px;
 
+		// filter out dates that will give repeated tick labels
+		if (typeof tick_array[0] === "object") dropRepeatedLabels(tick_array, format);
+
 		var max_space = remToPx(y.tick_label_space);
@@ -200,0 +217,0 @@ if (y.tick_label_space_mode === "auto") max_space = instance[ticks_name].autoLabelSpace().px;

src/update/index.js

@@ -20,4 +20,4 @@ import { updateRemToPx } from "../common";
 		var ticks;
-		if (instance.xData().numeric_array) ticks = scale.ticks(state.x.tick_number);
-		else ticks = scale.domain();
+		if (instance.xData().string_array) ticks = scale.domain();
+		else ticks = scale.ticks(state.x.tick_number);
 		instance.xTicks._update(ticks);
@@ -30,4 +30,4 @@ };
 			var scale = instance.yScale({ "domain_only": true });
-			if (instance.yData().numeric_array) ticks = scale.ticks(state.y.tick_number);
-			else ticks = scale.domain();
+			if (instance.yData().string_array) ticks = ticks = scale.domain();
+			else ticks = scale.ticks(state.y.tick_number);
 		}
@@ -34,0 +34,0 @@ instance.yTicks._update(ticks);

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

337662

increased by3.6%

Number of package files

41

increased by2.5%

Lines of code

8736

increased by3.03%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

207

increased by4.55%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedd3-time-format@^2.2.3