@yuneta/gobj-ui 7.26.39 → 7.26.41

package/src/yui_tabulator_i18n.test.js

@@ -15,6 +15,7 @@ import {
     yui_tabulator_name_filters,
     yui_tabulator_name_row_selects,
     yui_tabulator_name_editor,
+    yui_tabulator_relocalize,
 } from "./yui_tabulator_i18n.js";
 
 /*  An element double: attributes, and the one child a selector finds.  */
@@ -125,3 +126,41 @@ describe("yui_tabulator_name_editor", () => {
         expect(def.editorParams({})).toEqual({a: 1});
     });
 });
+
+describe("yui_tabulator_relocalize", () => {
+    /*  A table double: what the localize module is given, and the
+     *  locale it is set to.  */
+    function table()
+    {
+        const installed = {};
+        const tb = {
+            options: {},
+            installed,
+            locale: null,
+            modules: {localize: {installLang: (name, strings) => {
+                installed[name] = strings;
+            }}},
+            setLocale: (name) => {
+                tb.locale = name;
+            },
+            getColumns: () => [],
+            element: element(null),
+        };
+        return tb;
+    }
+
+    it("hands the column titles to the locale, where Tabulator binds them", () => {
+        const tb = table();
+        yui_tabulator_relocalize(tb, t, {device_id: "Id dispositivo", value: "Valor"});
+        expect(tb.locale).toBeTruthy();
+        expect(tb.installed[tb.locale].columns).toEqual(
+            {device_id: "Id dispositivo", value: "Valor"});
+        expect(tb.installed[tb.locale].pagination).toBeTruthy();
+    });
+
+    it("without titles, the locale carries none, as before", () => {
+        const tb = table();
+        yui_tabulator_relocalize(tb, t);
+        expect(tb.installed[tb.locale].columns).toBe(undefined);
+    });
+});

package/src/yui_text.js

@@ -36,9 +36,19 @@ export function text_node(value)
  *  Tabulator puts a STRING title in with innerHTML, so a title taken
  *  from a schema (`header`, which the schema editor writes) is markup
  *  unless the column carries a formatter that returns a Node.
+ *
+ *  And it APPENDS that Node to the title's holder, which it never
+ *  empties -- while it runs the formatter again on every setLocale()
+ *  (yui_tabulator_relocalize()). Until 7.26.40 each change of language
+ *  added one more copy of every title ("Id dispositivoId dispositivo").
+ *  The holder (the mock cell's element) is emptied first.
  ************************************************************/
 export function text_title_formatter(cell)
 {
+    const $holder = (typeof cell.getElement === "function")? cell.getElement() : null;
+    if($holder) {
+        $holder.textContent = "";
+    }
     return text_node(cell.getValue());
 }
 

package/src/yui_text.test.js

@@ -48,6 +48,19 @@ describe("text_node()", () => {
         expect($title.textContent).toBe(EVIL);
     });
 
+    test("a title formatted again (every setLocale) is not appended to the old one", () => {
+        /*  What Tabulator does: it appends the Node into the title's
+         *  holder, and on a change of locale runs the formatter again
+         *  on the same holder.  */
+        const $holder = document.createElement("div");
+        const cell = (title) => ({getValue: () => title, getElement: () => $holder});
+        $holder.appendChild(text_title_formatter(cell("Id dispositivo")));
+        $holder.appendChild(text_title_formatter(cell("Device id")));
+        $holder.appendChild(text_title_formatter(cell("Id dispositivo")));
+        expect($holder.textContent).toBe("Id dispositivo");
+        expect($holder.childNodes.length).toBe(1);
+    });
+
     test("the accordion nav shows a section named by a backend as text", async () => {
         const i18next = (await import("i18next")).default;
         await i18next.init({lng: "en", resources: {}});

package/src/yui_uplot_ink.js

@@ -0,0 +1,94 @@
+/***********************************************************************
+ *          yui_uplot_ink.js
+ *
+ *      The ink of a uPlot chart, on both schemes, and its palette.
+ *
+ *      uPlot is built for a white page: its axis labels are `#000`
+ *      and its grid `rgba(0,0,0,0.07)`, which on the dark scheme are
+ *      1.16:1 and 1.04 -- an axis nobody can read and a grid that is
+ *      not there. The inks here are handed to uPlot as FUNCTIONS: it
+ *      calls them when it draws, so the value can never be stale --
+ *      what goes stale is the canvas, and a change of the theme has to
+ *      ask for a redraw (yui_watch_theme() turns it into an event).
+ *
+ *      uPlot ALWAYS draws a Y axis: its setDefaults() makes axes[1]
+ *      whether it was given or not, with its own black. So the axes are
+ *      padded to two before they are inked. C_YUI_UPLOT's default is
+ *      `[{}]`, the X axis alone, and until 7.26.40 every chart of the
+ *      library had a Y axis whose values could not be read in the dark.
+ *
+ *      C_YUI_UPLOT uses it, and so can an app that builds a uPlot of its
+ *      own:
+ *
+ *          import {yui_uplot_axes} from "@yuneta/gobj-ui/src/yui_uplot_ink.js";
+ *
+ *          const chart = new uPlot({
+ *              width: 600, height: 300,
+ *              series: [{}, {label: "temperature"}],
+ *              axes: yui_uplot_axes([{}]),     // X and Y, with the ink of the theme
+ *          }, data, $el);
+ *
+ *      The palette is six colours that clear 3:1 on BOTH grounds
+ *      (worst 3.39 on white, 3.71 on near-black), ordered so the first
+ *      two are the pair that survives colour blindness -- blue and
+ *      orange, never red and green as the opening pair.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+import {yui_is_dark} from "./yui_theme.js";
+
+/************************************************************
+ *  The ink of the labels of an axis.
+ ************************************************************/
+function yui_uplot_axis_ink()
+{
+    return yui_is_dark()? "#c7cdd8" : "#2e333d";
+}
+
+/************************************************************
+ *  The ink of the grid and of the ticks.
+ ************************************************************/
+function yui_uplot_grid_ink()
+{
+    return yui_is_dark()? "rgba(199,205,216,0.16)" : "rgba(46,51,61,0.12)";
+}
+
+const YUI_UPLOT_PALETTE = [
+    {stroke: "#2f6fd0", fill: "rgba(47,111,208,0.10)"},     /*  4.88 / 3.71  */
+    {stroke: "#b8620a", fill: "rgba(184,98,10,0.10)"},      /*  4.38 / 4.13  */
+    {stroke: "#2f8f4e", fill: "rgba(47,143,78,0.10)"},      /*  4.07 / 4.45  */
+    {stroke: "#8b5cf6", fill: "rgba(139,92,246,0.10)"},     /*  4.23 / 4.28  */
+    {stroke: "#0e9aa7", fill: "rgba(14,154,167,0.10)"},     /*  3.39 / 5.35  */
+    {stroke: "#d1344b", fill: "rgba(209,52,75,0.10)"},      /*  4.88 / 3.71  */
+];
+
+/************************************************************
+ *  The axes the host asked for -- at least the X and the Y,
+ *  the two uPlot always draws -- with the ink it did not ask
+ *  about. A stroke, a grid or a ticks the host gave is kept.
+ *  Answers new objects: the host's are not touched.
+ ************************************************************/
+function yui_uplot_axes(axes)
+{
+    let list = Array.isArray(axes)? axes.slice() : [axes || {}];
+    while(list.length < 2) {
+        list.push({});
+    }
+    return list.map((ax) => {
+        let a = Object.assign({}, ax || {});
+        if(a.stroke === undefined) {
+            a.stroke = yui_uplot_axis_ink;
+        }
+        a.grid = Object.assign({stroke: yui_uplot_grid_ink}, a.grid || {});
+        a.ticks = Object.assign({stroke: yui_uplot_grid_ink}, a.ticks || {});
+        return a;
+    });
+}
+
+export {
+    yui_uplot_axes,
+    yui_uplot_axis_ink,
+    yui_uplot_grid_ink,
+    YUI_UPLOT_PALETTE,
+};