@watermarkinsights/ripple 5.12.0-9 → 5.12.0

package/dist/collection/global/functions.spec.js

@@ -0,0 +1,126 @@
+import { csvToArray, getAcceptedMimeTypesList, intl, snakeCaseToCamelCase, getNewIndexToFocus, transposeMatrix, wrapAround, skipByInterval, getSmallestSkipInterval, calcPercentageInRange, } from "./functions";
+describe("Global functions", () => {
+    it("converts the list of extensions into a list of MIME types", () => {
+        expect(getAcceptedMimeTypesList(["pdf", "doc", "txt"])).toMatchObject([
+            "application/pdf",
+            "application/msword",
+            "text/plain",
+        ]);
+    });
+    it("translates", () => {
+        expect(intl.formatMessage({ id: "date.Monday", defaultMessage: "Monday" })).toEqual("Monday"); // falls back to English when language attribute is not set
+    });
+    it("changes string from snake_case to camelCase", async () => {
+        expect(snakeCaseToCamelCase("snake_case")).toBe("snakeCase");
+        expect(snakeCaseToCamelCase("even_more_words")).toBe("evenMoreWords");
+        expect(snakeCaseToCamelCase("camelCase")).toBe("camelCase");
+        expect(snakeCaseToCamelCase("A regular sentence")).toBe("A regular sentence");
+        expect(snakeCaseToCamelCase("singleword")).toBe("singleword");
+    });
+    it("parses comma separated values properly", async () => {
+        expect(csvToArray("one, two, three")).toStrictEqual(["one", "two", "three"]);
+        expect(csvToArray("four,five, six")).toStrictEqual(["four", "five", "six"]);
+        expect(csvToArray("seven eight,nine ten eleven")).toStrictEqual(["seven eight", "nine ten eleven"]);
+    });
+    it("gets new index to focus correctly", async () => {
+        let index = 1;
+        let direction = "ArrowDown";
+        let listLength = 5;
+        // moves forward
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index + 1);
+        // wraps backwards
+        index = 4;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(0);
+        // moves backwards
+        direction = "ArrowUp";
+        index = 2;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index - 1);
+        // wraps forward
+        index = 0;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(listLength - 1);
+    });
+    it("transposes matrices correctly", () => {
+        expect(transposeMatrix([
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+        ]);
+        expect(transposeMatrix([
+            [0, 1, 2, 3],
+            [4, 5, 6, 7],
+            [8, 9, 10, 11],
+        ])).toStrictEqual([
+            [0, 4, 8],
+            [1, 5, 9],
+            [2, 6, 10],
+            [3, 7, 11],
+        ]);
+        expect(transposeMatrix([
+            ["0", "1", "2"],
+            ["3", "4", "5"],
+            ["6", "7", "8"],
+        ])).toStrictEqual([
+            ["0", "3", "6"],
+            ["1", "4", "7"],
+            ["2", "5", "8"],
+        ]);
+        expect(transposeMatrix([
+            [0, "1", 2],
+            [3, 4, [5]],
+            [{ key: "value" }, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, { key: "value" }],
+            ["1", 4, 7],
+            [2, [5], 8],
+        ]);
+    });
+    it("wraps around indices correctly", () => {
+        // forward steps
+        expect(wrapAround(0, 1, 8)).toBe(1);
+        expect(wrapAround(2, 3, 8)).toBe(5);
+        expect(wrapAround(7, 1, 8)).toBe(8);
+        // forward to 0
+        expect(wrapAround(8, 1, 8)).toBe(0);
+        expect(wrapAround(2, 7, 8)).toBe(0);
+        // forward beyond 0
+        expect(wrapAround(8, 4, 8)).toBe(3);
+        expect(wrapAround(2, 10, 8)).toBe(3);
+        // backward steps
+        expect(wrapAround(8, -1, 8)).toBe(7);
+        expect(wrapAround(5, -3, 8)).toBe(2);
+        expect(wrapAround(1, -1, 8)).toBe(0);
+        // backward to end
+        expect(wrapAround(0, -1, 8)).toBe(8);
+        expect(wrapAround(7, -8, 8)).toBe(8);
+        // backward beyond end
+        expect(wrapAround(0, -7, 8)).toBe(2);
+        expect(wrapAround(2, -7, 8)).toBe(4);
+        // multiple wraps
+        expect(wrapAround(0, 10, 2)).toBe(1);
+        expect(wrapAround(0, -10, 2)).toBe(2);
+    });
+    it("skips by interval correctly", () => {
+        const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+        expect(skipByInterval(list, 0)).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+        expect(skipByInterval(list, 1)).toStrictEqual([0, 2, 4, 6, 8]);
+        expect(skipByInterval(list, 2)).toStrictEqual([0, 3, 6, 9]);
+        expect(skipByInterval(list, 3)).toStrictEqual([0, 4, 8]);
+        expect(skipByInterval(list, 4)).toStrictEqual([0, 5]);
+        expect(skipByInterval(list, 5)).toStrictEqual([0, 6]);
+        expect(skipByInterval(list, 20)).toStrictEqual([0]);
+        expect(getSmallestSkipInterval(list, 6)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 5)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 3)).toStrictEqual({ skipInterval: 3, skippedList: [0, 4, 8] });
+        expect(getSmallestSkipInterval(list, 1)).toStrictEqual({ skipInterval: 9, skippedList: [0] });
+    });
+    it("calcs percentage in range properly", () => {
+        expect(calcPercentageInRange(13, 0, 100)).toBe(13);
+        expect(calcPercentageInRange(-75, -100, 0)).toBe(25);
+        expect(calcPercentageInRange(50, 25, 75)).toBe(50);
+        expect(calcPercentageInRange(150, 100, 300)).toBe(25);
+    });
+});

package/dist/collection/global/intl.js

@@ -19,6 +19,11 @@ export const globalMessages = {
         defaultMessage: "Hide",
         description: "For a button, to hide something",
     }),
+    locked: intl.formatMessage({
+        id: "global.locked",
+        defaultMessage: "locked",
+        description: "For an interactive element, indicating its state cannot be changed",
+    }),
     newWindow: intl.formatMessage({
         id: "global.newWindowLink",
         defaultMessage: "Opens in a new window.",
@@ -159,6 +164,11 @@ export const lineChartMessages = {
         defaultMessage: "No Data",
         description: "Message displayed when a data point has missing data",
     }),
+    highlightQualifier: intl.formatMessage({
+        id: "linechart.highlightQualifier",
+        defaultMessage: "highlighted",
+        description: "Descriptor for highlighted areas of a chart",
+    }),
     // -------------------------------------------------------------------------- //
     //                             Functions                                      //
     // -------------------------------------------------------------------------- //
@@ -169,4 +179,96 @@ export const lineChartMessages = {
     }, {
         time: prevXValue,
     }),
+    getToggleButtonLabel: (itemCount) => intl.formatMessage({
+        id: "linechart.toggleButtonLabel",
+        defaultMessage: "Toggle line visibility, list with {itemCount} items",
+    }, {
+        itemCount: itemCount,
+    }),
+    getToggleButtonState: (isPressed) => intl.formatMessage({
+        id: "linechart.toggleButtonState",
+        defaultMessage: "toggle {isPressed, select, true {pressed} other {}}",
+        description: "Descriptor and state for a toggle button UI element",
+    }, {
+        isPressed: isPressed,
+    }),
+    getLineFocusAnnouncement: (label, lineNumber, lineTotal, lineLength) => intl.formatMessage({
+        id: "linechart.getLineFocusAnnouncement",
+        defaultMessage: `{label}, line {lineNumber} of {lineTotal} with {lineLength} data points`,
+    }, {
+        label: label,
+        lineNumber: lineNumber,
+        lineTotal: lineTotal,
+        lineLength: lineLength,
+    }),
+};
+export const selectMessages = {
+    multiPlaceholder: intl.formatMessage({
+        id: "select.multiPlaceholder",
+        defaultMessage: "Make a selection",
+    }),
+    singlePlaceholder: intl.formatMessage({
+        id: "select.singlePlaceholder",
+        defaultMessage: "Select an Option",
+    }),
+    multiClearSelection: intl.formatMessage({
+        id: "select.multiClearSelection",
+        defaultMessage: "Clear all Selections",
+        description: "Clear as in remove. Use imperative",
+    }),
+    singleClearSelection: intl.formatMessage({
+        id: "select.singleClearSelection",
+        defaultMessage: "Clear Selection",
+        description: "Clear as in remove. Use imperative",
+    }),
+    selectionCleared: intl.formatMessage({
+        id: "select.selectionCleared",
+        defaultMessage: "Selection cleared",
+    }),
+    searchPlaceholder: intl.formatMessage({
+        id: "select.searchPlaceholder",
+        defaultMessage: "Search",
+        description: "Appears in a search field UI element",
+    }),
+    allSelected: intl.formatMessage({
+        id: "select.allSelected",
+        defaultMessage: "All selected",
+        description: "Indicates all possible options have been selected",
+    }),
+    selectAllMessage: intl.formatMessage({
+        id: "select.selectAll",
+        defaultMessage: "Select All",
+    }),
+    deselectAllMessage: intl.formatMessage({
+        id: "select.deselectAll",
+        defaultMessage: "Deselect All",
+    }),
+    allOptionsSelectedMessage: intl.formatMessage({
+        id: "select.allOptionsSelected",
+        defaultMessage: "All options selected",
+    }),
+    allOptionsDeselectedMessage: intl.formatMessage({
+        id: "select.allOptionsDeselected",
+        defaultMessage: "All options deselected",
+    }),
+    noSearchResults: intl.formatMessage({
+        id: "select.noSearchResults",
+        defaultMessage: "No results found. Please try your search again.",
+    }),
+    optgroupSingleSelectionCount: () => intl.formatMessage({
+        id: "select.optgroupSingleSelectionCount",
+        defaultMessage: "Item Selected",
+        description: "Item refers to an option in a list",
+    }),
+    // -------------------------------------------------------------------------- //
+    //                             Functions                                      //
+    // -------------------------------------------------------------------------- //
+    getOptgroupMultipleSelectionCount: (selectionCount) => intl.formatMessage({
+        id: "select.optgroupMultipleSelectionCount",
+        defaultMessage: "{numberSelected} selected",
+    }, { numberSelected: selectionCount }),
+    getSearchResultsFound: (numResults) => intl.formatMessage({
+        id: "select.searchResultsFound",
+        defaultMessage: "{numberResults, plural, one {1 option found} other {# options found}}",
+    }, { numberResults: numResults }),
 };

package/dist/collection/lang/lang.spec.js

@@ -0,0 +1,20 @@
+"use strict";
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+const pig = require("./pig.json");
+describe("translations", () => {
+    it("has translated strings for every key", () => {
+        let missingFR = [];
+        let missingES = [];
+        let missingPIG = [];
+        for (let i = 0; i < Object.keys(en).length; i++) {
+            !Object.keys(fr).includes(Object.keys(en)[i]) && missingFR.push(Object.keys(en)[i]);
+            !Object.keys(es).includes(Object.keys(en)[i]) && missingES.push(Object.keys(en)[i]);
+            !Object.keys(pig).includes(Object.keys(en)[i]) && missingPIG.push(Object.keys(en)[i]);
+        }
+        expect(missingFR.length).toBe(0);
+        expect(missingES.length).toBe(0);
+        expect(missingPIG.length).toBe(0);
+    });
+});

package/dist/collection/lang/piglatin.js

@@ -83,11 +83,19 @@ function pigLatinize(word) {
   return specialKBefore + word + specialKAfter;
 }
 
+function pigifyIgnoringTags(word) {
+  const tagPattern = /<\/?[^>]+>/g;
+
+  const strippedText = word.replace(tagPattern, "");
+  const pigifiedText = pigLatinize(strippedText);
+  return word.replace(strippedText, pigifiedText);
+}
+
 function translateSentence(string) {
   let words = string.split(" ");
   return words
     .reduce((acc, word) => {
-      return acc + " " + pigLatinize(word);
+      return acc + " " + pigifyIgnoringTags(word);
     }, "")
     .substring(1); // rm leading space
 }

package/dist/esm/{chartFunctions-1478f4db.js → chartFunctions-9099c7e9.js}

@@ -1,5 +1,5 @@
-import { h } from './index-130e07bb.js';
-import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-f53b3537.js';
+import { h } from './index-558b5a82.js';
+import { i as intl, c as checkForActiveElInShadow, e as safeMultiplyFloat, f as getPosition } from './functions-00e1916b.js';
 
 const colors = {
     salmon: "#ff5f4e",
@@ -69,7 +69,7 @@ const allChartsDetails = {
     bar5: {
         size: 400,
         colors: [
-            colors.gray, // this is only used if prop notStartedColor is set
+            colors.gray,
             colors.lavender,
             colors.midnight,
             "#0089e4",
@@ -395,9 +395,9 @@ function getPathData(amount, offset, chartType) {
     const half = this.chartDetails.size / 2;
     const innerRadius = this.chartDetails.thickness;
     const outerRadius = 1;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     const outerSeparatorOffset = 1.5;
-    const innerSeparatorOffset = isHybridDoughnut ? 2.25 : 3;
+    const innerSeparatorOffset = isProgressIndicator ? 2.25 : 3;
     if (activeAngle === 360) {
         // fix to avoid bad svg shape when the path goes all around (100%)
         endAngle -= 0.01;
@@ -464,18 +464,28 @@ function applyMinimumAngle(minimumAngle, slicesDetails, total) {
 }
 function renderDoughnut(chartType) {
     const outerSize = this.chartDetails.size + this.chartDetails.padding;
-    const isHybridDoughnut = chartType === "doughnut";
+    const isProgressIndicator = chartType === "doughnut";
     // no sorting in progress indicators
-    let slicesDetails = isHybridDoughnut ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
+    let slicesDetails = isProgressIndicator ? this.slicesDetails : sortSlicesDetails(this.slicesDetails, this.total);
     slicesDetails = applyMinimumAngle(7, slicesDetails, this.total);
-    let perc = amountToPercent(slicesDetails[0].amount, this.total, true);
-    perc = perc === 0 ? "<1%" : perc + "%";
+    // perc is only for progress indicator
+    const amount = slicesDetails[0].amount;
+    let perc = amountToPercent(amount, this.total, true);
+    if (perc === 0 && amount > 0) {
+        perc = "<1%";
+    }
+    else if (perc === 100 && amount < this.total) {
+        perc = ">99%";
+    }
+    else {
+        perc = perc + "%";
+    }
     return (h("div", { class: "chart-wrapper doughnut-wrapper" },
         h("svg", { width: outerSize + "px", height: outerSize + "px", id: `graphic-${this.uid}`, class: "doughnut-svg" },
             renderFilter(),
             slicesDetails.map((s) => renderPath.call(this, s, chartType)),
             renderFocusOutline.call(this),
-            isHybridDoughnut ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
+            isProgressIndicator ? (h("text", { class: "value", x: "50%", y: "50%", "font-size": "1.5rem", "font-weight": "500", "text-anchor": "middle", "dominant-baseline": "middle" }, perc)) : (h("g", { transform: `translate(${this.chartDetails.padding / 2}, ${this.chartDetails.padding / 2})`, "text-anchor": "middle", "dominant-baseline": "middle" }, slicesDetails.map((s) => s.amount > 0 && !s.inSmallCluster ? renderDoughnutText.call(this, s) : ""))))));
 }
 function highlightSegmentInfo(infoEls, s) {
     infoEls.forEach((el) => {
@@ -506,7 +516,17 @@ function renderFocusOutline() {
 function renderDoughnutText(s) {
     const arcMiddle = amountToDegree(s.offset + s.visualAmount / 2, this.total);
     let { x, y } = polarToCartesian(this.chartDetails.size / 2, 1.4, arcMiddle - 90);
-    return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, `${s.perc > 0 ? s.perc : "<1"}%`));
+    let val;
+    if (s.perc === 0 && s.amount > 0) {
+        val = "<1%";
+    }
+    else if (s.perc === 100 && s.amount < this.total) {
+        val = ">99%";
+    }
+    else {
+        val = s.perc + "%";
+    }
+    return (h("text", { class: "value", x: x + "px", y: y + "px", "data-segmentindex": s.index }, val));
 }
 function renderStackedBar(chartType) {
     const isHybridBar = chartType === "bar";