@flourish/controls - npm Package Compare versions

Comparing version 6.0.1 to 6.1.0

cypress/integration/test.spec.js

@@ -205,2 +205,96 @@ /* eslint-disable no-undef */
 	});
+
+	it("Should format contents of dropdown when output_format_id is passed", () => {
+		cy.visit("cypress/fixtures/index.html");
+		cy.window().then(({ document, controls }) => {
+			var dropdown_controls = controls.createControls({
+				control_type: "dropdown",
+			});
+
+			dropdown_controls
+				.options([12345.67, 76543.21])
+				.format("number$point_comma")
+				.update();
+			dropdown_controls.appendTo(document.querySelector("#wrapper header"));
+
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("12.345,67");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("76.543,21");
+		});
+	});
+
+	it("Should format contents of dropdown when formatter function is passed", () => {
+		cy.visit("cypress/fixtures/index.html");
+		cy.window().then(({ document, controls }) => {
+			var dropdown_controls = controls.createControls({
+				control_type: "dropdown",
+			});
+
+			dropdown_controls
+				.options([1, 2])
+				.format(x => `£${x}`)
+				.update();
+			dropdown_controls.appendTo(document.querySelector("#wrapper header"));
+
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("£1");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("£2");
+		});
+	});
+
+	it("Should exclude values from formatting when passed to format function", () => {
+		cy.visit("cypress/fixtures/index.html");
+		cy.window().then(({ document, controls }) => {
+			var dropdown_controls = controls.createControls({
+				control_type: "dropdown",
+			});
+
+			dropdown_controls
+				.options(["All", 12345.67, 76543.21])
+				.format("number$point_comma", ["All"])
+				.update();
+			dropdown_controls.appendTo(document.querySelector("#wrapper header"));
+
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("All");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("12.345,67");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("76.543,21");
+		});
+	});
+
+	it("Should should fallback to default formatter if invalid output format id is set with .format()", () => {
+		cy.visit("cypress/fixtures/index.html");
+		cy.window().then(({ document, controls }) => {
+			var dropdown_controls = controls.createControls({
+				control_type: "dropdown",
+			});
+
+			dropdown_controls
+				.options([1, 2, { toString: () => "STRINGIFIED!" }])
+				.format("INVALID FORMAT ID")
+				.update();
+			dropdown_controls.appendTo(document.querySelector("#wrapper header"));
+
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("1");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("2");
+			cy.get(
+				".fl-controls-container .fl-control-dropdown select option"
+			).contains("STRINGIFIED!");
+		});
+	});
 });

package.json

 {
   "name": "@flourish/controls",
-  "version": "6.0.1",
+  "version": "6.1.0",
   "description": "Switchable dropdown/buttons/slider control",
@@ -24,2 +24,3 @@ "main": "controls.js",
   "dependencies": {
+    "@flourish/formatters": "0.0.1",
     "@flourish/js2css": "^1.0.0",
@@ -30,3 +31,2 @@ "@flourish/pocket-knife": "^0.8.0",
     "d3-selection": "^1.0.0",
-    "d3-time-format": "^2.3.0",
     "rollup": "^2.56.2",
@@ -33,0 +33,0 @@ "terser": "^5.7.1"

README.md

@@ -84,5 +84,5 @@ # Flourish controls
 
-### `format(formatterFunction)`
+### `format(formatterFunction, exclude)`
 
-Specify an output formatter to format the contents of the control. This takes a function from the `@flourish/formatters` module.
+Specify an output formatter to format the contents of the control. This takes a function from the `@flourish/formatters` module or an `output_format_id` from the `@flourish/interpreter` module. Optionally pass an array of values to exclude from formatting.
 
@@ -89,0 +89,0 @@ ### `getNode()`

RELEASE_NOTES.md

@@ -0,1 +1,4 @@
+# 6.1.0
+* Add `output_format_id` string support to .format() function
+
 # 6.0.1
@@ -2,0 +5,0 @@ * Fix bug where dropdown value was not set in update function

src/index.js

 import { select } from "d3-selection";
+import { getFormatter } from "@flourish/formatters";
 import { sortArray } from "./lib/sort";
@@ -10,2 +11,3 @@ import { injectCSS } from "./lib/css";
 
+
 var DEFAULTS = Object.freeze({
@@ -58,2 +60,3 @@ control_type: "dropdown",
 	var formatter = defaultFormatter;
+	var exclude_from_formatting = [];
 	var visible = true;
@@ -170,6 +173,18 @@ var options = [];
 
-	control_obj.format = function (value) {
+	control_obj.format = function (value, exclude) {
 		if (value === undefined) return formatter;
 		if (value === null) formatter = defaultFormatter;
-		else formatter = value;
+		if (typeof value === "string") {
+			try {
+				formatter = getFormatter(value);
+			}
+			catch (err) {
+				formatter = defaultFormatter;
+				console.warn(err.message);
+			}
+		}
+		else {
+			formatter = value;
+		}
+		if (exclude && Array.isArray(exclude)) exclude_from_formatting = exclude;
 		return control_obj;
@@ -187,3 +202,3 @@ };
 		getRemToPx();
-		sorted_options = sortArray(options, state.sort, parser, formatter);
+		sorted_options = sortArray(options, state.sort, parser, formatter, exclude_from_formatting);
 		updateControls(sorted_options);
@@ -190,0 +205,0 @@ return control_obj;

src/lib/sort.js

@@ -5,5 +5,9 @@ function ascending(a, b) {
 
-function sortArray(uarr, sort, parser, formatter) {
+function sortArray(uarr, sort, parser, formatter, exclude_from_formatting) {
 	var sarr = uarr.map(function(d, i) {
 		var parsed_value = parser(d);
+		var display_value;
+		if (d === null) display_value = "";
+		if (exclude_from_formatting.includes(d)) display_value = d;
+		else display_value = formatter(d);
 		return	{
@@ -13,3 +17,3 @@ value: d,
 			parsed: parsed_value,
-			display: formatter(d)
+			display: display_value
 		};
@@ -16,0 +20,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

255332

increased by23.34%

Lines of code

6679

increased by23.75%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@flourish/formatters@0.0.1

• + Added@flourish/formatters@0.0.1(transitive)

• + Added@flourish/interpreter@6.0.4(transitive)

• - Removedd3-time-format@^2.3.0