@pulzr/perses-figure-panel 0.0.0-stage → 0.2.0

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelComponent.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import { Box, Typography } from "@mui/material";
+import { formatValue } from "@perses-dev/components";
+import { changeOf, changeText, figureOf, fill, sizeChange, timeInParts, valuesOf } from "./figure.js";
+const numbers = {
+    fontFeatureSettings: "'tnum' 1",
+    fontVariantNumeric: "tabular-nums"
+};
+/** The figure as text: a time in parts when asked, else by its format. */ function figure(now, spec) {
+    if (now === undefined) return "—";
+    return spec.timeInParts && timeInParts(now, spec.format?.unit) || formatValue(now, spec.format);
+}
+const TONE = {
+    good: "success.main",
+    bad: "error.main",
+    flat: "text.disabled"
+};
+/**
+ * The line under the figure: its change in the style asked, good news in the success color, bad in the error
+ * color, flat quiet; or the caption, secondary, with nothing to compare with.
+ */ function changeLine(now, before, spec) {
+    const label = spec.comparedLabel ?? "vs the period before";
+    if (spec.changeStyle === "size") {
+        const change = sizeChange(now, before, spec.lowerIsBetter);
+        return change ? {
+            line: `${change.text} ${label}`,
+            lineColor: TONE[change.tone]
+        } : {
+            line: spec.caption,
+            lineColor: "text.secondary"
+        };
+    }
+    const change = changeOf(now, before);
+    if (!change) return {
+        line: spec.caption,
+        lineColor: "text.secondary"
+    };
+    if (change.direction === "flat") return {
+        line: changeText(change, label),
+        lineColor: TONE.flat
+    };
+    const good = change.direction === (spec.lowerIsBetter ? "down" : "up");
+    return {
+        line: changeText(change, label),
+        lineColor: good ? TONE.good : TONE.bad
+    };
+}
+/** One figure, large and light, and under it its change against the period before (or a caption). */ export function PulzrFigurePanelComponent(t0) {
+    const $ = _c(20);
+    const { queryResults, spec } = t0;
+    let t1;
+    if ($[0] !== queryResults || $[1] !== spec) {
+        const { now, before, total } = figureOf(queryResults, spec.of?.series);
+        const values = spec.subtitle || spec.detail ? valuesOf(queryResults) : undefined;
+        const { line, lineColor } = changeLine(now, before, spec);
+        let t2;
+        if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+            t2 = {
+                px: "10px",
+                pt: "2px",
+                pb: "7px",
+                minWidth: 0,
+                overflow: "hidden"
+            };
+            $[3] = t2;
+        } else {
+            t2 = $[3];
+        }
+        const t3 = spec.color ?? "text.primary";
+        let t4;
+        if ($[4] !== t3) {
+            t4 = {
+                ...numbers,
+                fontSize: 22,
+                fontWeight: 300,
+                lineHeight: 1.05,
+                letterSpacing: "-0.02em",
+                mb: "4px",
+                color: t3
+            };
+            $[4] = t3;
+            $[5] = t4;
+        } else {
+            t4 = $[5];
+        }
+        let t5;
+        if ($[6] !== now || $[7] !== spec) {
+            t5 = figure(now, spec);
+            $[6] = now;
+            $[7] = spec;
+            $[8] = t5;
+        } else {
+            t5 = $[8];
+        }
+        let t6;
+        if ($[9] !== now || $[10] !== spec.of || $[11] !== total) {
+            t6 = spec.of && total !== undefined && now !== undefined && /*#__PURE__*/ _jsx(Typography, {
+                component: "span",
+                sx: {
+                    ...numbers,
+                    fontSize: 13,
+                    fontWeight: 400,
+                    letterSpacing: "0.02em",
+                    color: "text.secondary",
+                    ml: "8px",
+                    whiteSpace: "nowrap"
+                },
+                children: `${Math.round(now * total)}/${total}${spec.of.label ? ` ${spec.of.label}` : ""}`
+            });
+            $[9] = now;
+            $[10] = spec.of;
+            $[11] = total;
+            $[12] = t6;
+        } else {
+            t6 = $[12];
+        }
+        let t7;
+        if ($[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
+            t7 = /*#__PURE__*/ _jsxs(Typography, {
+                component: "div",
+                sx: t4,
+                children: [
+                    t5,
+                    t6
+                ]
+            });
+            $[13] = t4;
+            $[14] = t5;
+            $[15] = t6;
+            $[16] = t7;
+        } else {
+            t7 = $[16];
+        }
+        let t8;
+        if ($[17] !== line || $[18] !== lineColor) {
+            t8 = line && /*#__PURE__*/ _jsx(Typography, {
+                component: "div",
+                sx: {
+                    ...numbers,
+                    fontSize: 10,
+                    fontWeight: 500,
+                    lineHeight: 1.4,
+                    letterSpacing: "0.02em",
+                    textTransform: "uppercase",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    color: lineColor
+                },
+                children: line
+            });
+            $[17] = line;
+            $[18] = lineColor;
+            $[19] = t8;
+        } else {
+            t8 = $[19];
+        }
+        t1 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t2,
+            children: [
+                spec.subtitle && values && /*#__PURE__*/ _jsx(Typography, {
+                    component: "div",
+                    sx: {
+                        fontSize: 9,
+                        letterSpacing: "0.04em",
+                        textTransform: "uppercase",
+                        color: "text.secondary",
+                        mt: "-4px",
+                        mb: "6px",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                    },
+                    children: fill(spec.subtitle, values)
+                }),
+                t7,
+                t8,
+                spec.detail && values && /*#__PURE__*/ _jsx(Typography, {
+                    component: "div",
+                    sx: {
+                        ...numbers,
+                        display: "inline-block",
+                        fontSize: 9,
+                        fontWeight: 500,
+                        lineHeight: 1.4,
+                        letterSpacing: "0.04em",
+                        textTransform: "uppercase",
+                        color: "text.secondary",
+                        mt: "5px",
+                        px: "6px",
+                        py: "2px",
+                        bgcolor: "action.hover",
+                        border: 1,
+                        borderColor: "divider"
+                    },
+                    children: fill(spec.detail, values)
+                })
+            ]
+        });
+        $[0] = queryResults;
+        $[1] = spec;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    return t1;
+}
+
+//# sourceMappingURL=PulzrFigurePanelComponent.js.map

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/PulzrFigurePanelComponent.tsx"],"sourcesContent":["import { Box, Typography } from '@mui/material';\nimport { formatValue } from '@perses-dev/components';\nimport type { ReactElement } from 'react';\n\nimport { changeOf, changeText, figureOf, fill, sizeChange, timeInParts, valuesOf } from './figure';\nimport type { PulzrFigurePanelProps } from './pulzr-figure-panel-types';\n\nconst numbers = { fontFeatureSettings: \"'tnum' 1\", fontVariantNumeric: 'tabular-nums' } as const;\n\n/** The figure as text: a time in parts when asked, else by its format. */\nfunction figure(now: number | undefined, spec: PulzrFigurePanelProps['spec']): string {\n  if (now === undefined) return '—';\n  return (spec.timeInParts && timeInParts(now, spec.format?.unit)) || formatValue(now, spec.format);\n}\n\nconst TONE = { good: 'success.main', bad: 'error.main', flat: 'text.disabled' } as const;\n\n/**\n * The line under the figure: its change in the style asked, good news in the success color, bad in the error\n * color, flat quiet; or the caption, secondary, with nothing to compare with.\n */\nfunction changeLine(\n  now: number | undefined,\n  before: number | undefined,\n  spec: PulzrFigurePanelProps['spec'],\n): { line?: string; lineColor: string } {\n  const label = spec.comparedLabel ?? 'vs the period before';\n  if (spec.changeStyle === 'size') {\n    const change = sizeChange(now, before, spec.lowerIsBetter);\n    return change\n      ? { line: `${change.text} ${label}`, lineColor: TONE[change.tone] }\n      : { line: spec.caption, lineColor: 'text.secondary' };\n  }\n  const change = changeOf(now, before);\n  if (!change) return { line: spec.caption, lineColor: 'text.secondary' };\n  if (change.direction === 'flat') return { line: changeText(change, label), lineColor: TONE.flat };\n  const good = change.direction === (spec.lowerIsBetter ? 'down' : 'up');\n  return { line: changeText(change, label), lineColor: good ? TONE.good : TONE.bad };\n}\n\n/** One figure, large and light, and under it its change against the period before (or a caption). */\nexport function PulzrFigurePanelComponent({ queryResults, spec }: PulzrFigurePanelProps): ReactElement {\n  const { now, before, total } = figureOf(queryResults, spec.of?.series);\n  const values = spec.subtitle || spec.detail ? valuesOf(queryResults) : undefined;\n  const { line, lineColor } = changeLine(now, before, spec);\n  return (\n    <Box sx={{ px: '10px', pt: '2px', pb: '7px', minWidth: 0, overflow: 'hidden' }}>\n      {spec.subtitle && values && (\n        <Typography\n          component=\"div\"\n          sx={{\n            fontSize: 9,\n            letterSpacing: '0.04em',\n            textTransform: 'uppercase',\n            color: 'text.secondary',\n            mt: '-4px',\n            mb: '6px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {fill(spec.subtitle, values)}\n        </Typography>\n      )}\n      <Typography\n        component=\"div\"\n        sx={{\n          ...numbers,\n          fontSize: 22,\n          fontWeight: 300,\n          lineHeight: 1.05,\n          letterSpacing: '-0.02em',\n          mb: '4px',\n          color: spec.color ?? 'text.primary',\n        }}\n      >\n        {figure(now, spec)}\n        {spec.of && total !== undefined && now !== undefined && (\n          <Typography\n            component=\"span\"\n            sx={{\n              ...numbers,\n              fontSize: 13,\n              fontWeight: 400,\n              letterSpacing: '0.02em',\n              color: 'text.secondary',\n              ml: '8px',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {`${Math.round(now * total)}/${total}${spec.of.label ? ` ${spec.of.label}` : ''}`}\n          </Typography>\n        )}\n      </Typography>\n      {line && (\n        <Typography\n          component=\"div\"\n          sx={{\n            ...numbers,\n            fontSize: 10,\n            fontWeight: 500,\n            lineHeight: 1.4,\n            letterSpacing: '0.02em',\n            textTransform: 'uppercase',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n            color: lineColor,\n          }}\n        >\n          {line}\n        </Typography>\n      )}\n      {spec.detail && values && (\n        <Typography\n          component=\"div\"\n          sx={{\n            ...numbers,\n            display: 'inline-block',\n            fontSize: 9,\n            fontWeight: 500,\n            lineHeight: 1.4,\n            letterSpacing: '0.04em',\n            textTransform: 'uppercase',\n            color: 'text.secondary',\n            mt: '5px',\n            px: '6px',\n            py: '2px',\n            bgcolor: 'action.hover',\n            border: 1,\n            borderColor: 'divider',\n          }}\n        >\n          {fill(spec.detail, values)}\n        </Typography>\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","Typography","formatValue","changeOf","changeText","figureOf","fill","sizeChange","timeInParts","valuesOf","numbers","fontFeatureSettings","fontVariantNumeric","figure","now","spec","undefined","format","unit","TONE","good","bad","flat","changeLine","before","label","comparedLabel","changeStyle","change","lowerIsBetter","line","text","lineColor","tone","caption","direction"],"mappings":";;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AAGrD,SAASC,QAAQ,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,UAAU,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,cAAW;AAGnG,MAAMC,UAAU;IAAEC,qBAAqB;IAAYC,oBAAoB;AAAe;AAEtF,wEAAwE,GACxE,SAASC,OAAOC,GAAG,EAAsBC,IAAI;IAC3C,IAAID,QAAQE,WAAW,OAAO;IAC9B,OAAO,AAACD,KAAKP,WAAW,IAAIA,YAAYM,KAAKC,KAAKE,MAAM,EAAEC,SAAUhB,YAAYY,KAAKC,KAAKE,MAAM;AAClG;AAEA,MAAME,OAAO;IAAEC,MAAM;IAAgBC,KAAK;IAAcC,MAAM;AAAgB;AAE9E;;;CAGC,GACD,SAASC,WACPT,GAAG,EACHU,MAAM,EACNT,IAAI;IAEJ,MAAMU,QAAQV,KAAKW,aAAa,IAAI;IACpC,IAAIX,KAAKY,WAAW,KAAK,QAAQ;QAC/B,MAAMC,SAASrB,WAAWO,KAAKU,QAAQT,KAAKc,aAAa;QACzD,OAAOD,SACH;YAAEE,MAAM,GAAGF,OAAOG,IAAI,CAAC,CAAC,EAAEN,OAAO;YAAEO,WAAWb,IAAKS,CAAAA,OAAOK,IAAI,CAAA,AAAC;QAAC,IAChE;YAAEH,MAAMf,KAAKmB,OAAO;YAAEF,WAAW;QAAiB;IACxD;IACA,MAAMJ,SAASzB,SAASW,KAAKU;IAC7B,IAAI,CAACI,QAAQ,OAAO;QAAEE,MAAMf,KAAKmB,OAAO;QAAEF,WAAW;IAAiB;IACtE,IAAIJ,OAAOO,SAAS,KAAK,QAAQ,OAAO;QAAEL,MAAM1B,WAAWwB,QAAQH;QAAQO,WAAWb,KAAKG,IAAI;IAAC;IAChG,MAAMF,OAAOQ,OAAOO,SAAS,KAAMpB,CAAAA,KAAKc,aAAa,GAAG,SAAS,IAAG;IACpE,OAAO;QAAEC,MAAM1B,WAAWwB,QAAQH;QAAQO,WAAWZ,OAAOD,KAAKC,IAAI,GAAGD,KAAKE,GAAG;IAAC;AACnF;AAEA,mGAAmG,GACnG,OAAO"}

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.d.ts

@@ -0,0 +1,5 @@
+import type { OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { ReactElement } from 'react';
+import type { PulzrFigurePanelOptions } from './pulzr-figure-panel-types';
+export declare function PulzrFigurePanelSettingsEditor({ value, onChange, }: OptionsEditorProps<PulzrFigurePanelOptions>): ReactElement;
+//# sourceMappingURL=PulzrFigurePanelSettingsEditor.d.ts.map

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PulzrFigurePanelSettingsEditor.d.ts","sourceRoot":"","sources":["../../../../src/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAI1E,wBAAgB,8BAA8B,CAAC,EAC7C,KAAK,EACL,QAAQ,GACT,EAAE,kBAAkB,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAuE5D"}

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.js

@@ -0,0 +1,309 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import { FormControlLabel, MenuItem, Switch, TextField } from "@mui/material";
+import { FormatControls, OptionsEditorColumn, OptionsEditorGrid, OptionsEditorGroup } from "@perses-dev/components";
+const text = (v)=>v.trim() ? v : undefined;
+export function PulzrFigurePanelSettingsEditor(t0) {
+    const $ = _c(63);
+    const { value, onChange } = t0;
+    let t1;
+    if ($[0] !== value.format) {
+        t1 = value.format ?? {
+            unit: "decimal"
+        };
+        $[0] = value.format;
+        $[1] = t1;
+    } else {
+        t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== onChange || $[3] !== value) {
+        t2 = (format)=>onChange({
+                ...value,
+                format
+            });
+        $[2] = onChange;
+        $[3] = value;
+        $[4] = t2;
+    } else {
+        t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== t1 || $[6] !== t2) {
+        t3 = /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+            children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                title: "Format",
+                children: /*#__PURE__*/ _jsx(FormatControls, {
+                    value: t1,
+                    onChange: t2
+                })
+            })
+        });
+        $[5] = t1;
+        $[6] = t2;
+        $[7] = t3;
+    } else {
+        t3 = $[7];
+    }
+    const t4 = value.color ?? "";
+    let t5;
+    if ($[8] !== onChange || $[9] !== value) {
+        t5 = (e)=>onChange({
+                ...value,
+                color: text(e.target.value)
+            });
+        $[8] = onChange;
+        $[9] = value;
+        $[10] = t5;
+    } else {
+        t5 = $[10];
+    }
+    let t6;
+    if ($[11] !== t4 || $[12] !== t5) {
+        t6 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Color",
+            helperText: "Any CSS color. Empty: the text color.",
+            value: t4,
+            onChange: t5
+        });
+        $[11] = t4;
+        $[12] = t5;
+        $[13] = t6;
+    } else {
+        t6 = $[13];
+    }
+    const t7 = value.comparedLabel ?? "";
+    let t8;
+    if ($[14] !== onChange || $[15] !== value) {
+        t8 = (e_0)=>onChange({
+                ...value,
+                comparedLabel: text(e_0.target.value)
+            });
+        $[14] = onChange;
+        $[15] = value;
+        $[16] = t8;
+    } else {
+        t8 = $[16];
+    }
+    let t9;
+    if ($[17] !== t7 || $[18] !== t8) {
+        t9 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Compared label",
+            helperText: "After the change: vs last week.",
+            value: t7,
+            onChange: t8
+        });
+        $[17] = t7;
+        $[18] = t8;
+        $[19] = t9;
+    } else {
+        t9 = $[19];
+    }
+    const t10 = value.caption ?? "";
+    let t11;
+    if ($[20] !== onChange || $[21] !== value) {
+        t11 = (e_1)=>onChange({
+                ...value,
+                caption: text(e_1.target.value)
+            });
+        $[20] = onChange;
+        $[21] = value;
+        $[22] = t11;
+    } else {
+        t11 = $[22];
+    }
+    let t12;
+    if ($[23] !== t10 || $[24] !== t11) {
+        t12 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Caption",
+            helperText: "When there is nothing to compare with.",
+            value: t10,
+            onChange: t11
+        });
+        $[23] = t10;
+        $[24] = t11;
+        $[25] = t12;
+    } else {
+        t12 = $[25];
+    }
+    const t13 = value.subtitle ?? "";
+    let t14;
+    if ($[26] !== onChange || $[27] !== value) {
+        t14 = (e_2)=>onChange({
+                ...value,
+                subtitle: text(e_2.target.value)
+            });
+        $[26] = onChange;
+        $[27] = value;
+        $[28] = t14;
+    } else {
+        t14 = $[28];
+    }
+    let t15;
+    if ($[29] !== t13 || $[30] !== t14) {
+        t15 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Subtitle",
+            helperText: "Under the title. {{series}}, {{series|%}}.",
+            value: t13,
+            onChange: t14
+        });
+        $[29] = t13;
+        $[30] = t14;
+        $[31] = t15;
+    } else {
+        t15 = $[31];
+    }
+    const t16 = value.detail ?? "";
+    let t17;
+    if ($[32] !== onChange || $[33] !== value) {
+        t17 = (e_3)=>onChange({
+                ...value,
+                detail: text(e_3.target.value)
+            });
+        $[32] = onChange;
+        $[33] = value;
+        $[34] = t17;
+    } else {
+        t17 = $[34];
+    }
+    let t18;
+    if ($[35] !== t16 || $[36] !== t17) {
+        t18 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Detail",
+            helperText: "A box under the figure, as the subtitle.",
+            value: t16,
+            onChange: t17
+        });
+        $[35] = t16;
+        $[36] = t17;
+        $[37] = t18;
+    } else {
+        t18 = $[37];
+    }
+    const t19 = value.changeStyle ?? "signed";
+    let t20;
+    if ($[38] !== onChange || $[39] !== value) {
+        t20 = (e_4)=>onChange({
+                ...value,
+                changeStyle: e_4.target.value === "size" ? "size" : undefined
+            });
+        $[38] = onChange;
+        $[39] = value;
+        $[40] = t20;
+    } else {
+        t20 = $[40];
+    }
+    let t21;
+    let t22;
+    if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+        t21 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "signed",
+            children: "↑ +0.7%"
+        });
+        t22 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "size",
+            children: "↑ 0.7%"
+        });
+        $[41] = t21;
+        $[42] = t22;
+    } else {
+        t21 = $[41];
+        t22 = $[42];
+    }
+    let t23;
+    if ($[43] !== t19 || $[44] !== t20) {
+        t23 = /*#__PURE__*/ _jsxs(TextField, {
+            select: true,
+            size: "small",
+            label: "Change reads",
+            value: t19,
+            onChange: t20,
+            children: [
+                t21,
+                t22
+            ]
+        });
+        $[43] = t19;
+        $[44] = t20;
+        $[45] = t23;
+    } else {
+        t23 = $[45];
+    }
+    const t24 = Boolean(value.lowerIsBetter);
+    let t25;
+    if ($[46] !== onChange || $[47] !== value) {
+        t25 = (e_5)=>onChange({
+                ...value,
+                lowerIsBetter: e_5.target.checked || undefined
+            });
+        $[46] = onChange;
+        $[47] = value;
+        $[48] = t25;
+    } else {
+        t25 = $[48];
+    }
+    let t26;
+    if ($[49] !== t24 || $[50] !== t25) {
+        t26 = /*#__PURE__*/ _jsx(FormControlLabel, {
+            control: /*#__PURE__*/ _jsx(Switch, {
+                checked: t24,
+                onChange: t25
+            }),
+            label: "Lower is better"
+        });
+        $[49] = t24;
+        $[50] = t25;
+        $[51] = t26;
+    } else {
+        t26 = $[51];
+    }
+    let t27;
+    if ($[52] !== t12 || $[53] !== t15 || $[54] !== t18 || $[55] !== t23 || $[56] !== t26 || $[57] !== t6 || $[58] !== t9) {
+        t27 = /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+            children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                title: "Figure",
+                children: [
+                    t6,
+                    t9,
+                    t12,
+                    t15,
+                    t18,
+                    t23,
+                    t26
+                ]
+            })
+        });
+        $[52] = t12;
+        $[53] = t15;
+        $[54] = t18;
+        $[55] = t23;
+        $[56] = t26;
+        $[57] = t6;
+        $[58] = t9;
+        $[59] = t27;
+    } else {
+        t27 = $[59];
+    }
+    let t28;
+    if ($[60] !== t27 || $[61] !== t3) {
+        t28 = /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+            children: [
+                t3,
+                t27
+            ]
+        });
+        $[60] = t27;
+        $[61] = t3;
+        $[62] = t28;
+    } else {
+        t28 = $[62];
+    }
+    return t28;
+}
+
+//# sourceMappingURL=PulzrFigurePanelSettingsEditor.js.map

package/lib/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.tsx"],"sourcesContent":["import { FormControlLabel, MenuItem, Switch, TextField } from '@mui/material';\nimport { FormatControls, OptionsEditorColumn, OptionsEditorGrid, OptionsEditorGroup } from '@perses-dev/components';\nimport type { OptionsEditorProps } from '@perses-dev/plugin-system';\nimport type { ReactElement } from 'react';\n\nimport type { PulzrFigurePanelOptions } from './pulzr-figure-panel-types';\n\nconst text = (v: string): string | undefined => (v.trim() ? v : undefined);\n\nexport function PulzrFigurePanelSettingsEditor({\n  value,\n  onChange,\n}: OptionsEditorProps<PulzrFigurePanelOptions>): ReactElement {\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Format\">\n          <FormatControls\n            value={value.format ?? { unit: 'decimal' }}\n            onChange={(format) => onChange({ ...value, format })}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Figure\">\n          <TextField\n            size=\"small\"\n            label=\"Color\"\n            helperText=\"Any CSS color. Empty: the text color.\"\n            value={value.color ?? ''}\n            onChange={(e) => onChange({ ...value, color: text(e.target.value) })}\n          />\n          <TextField\n            size=\"small\"\n            label=\"Compared label\"\n            helperText=\"After the change: vs last week.\"\n            value={value.comparedLabel ?? ''}\n            onChange={(e) => onChange({ ...value, comparedLabel: text(e.target.value) })}\n          />\n          <TextField\n            size=\"small\"\n            label=\"Caption\"\n            helperText=\"When there is nothing to compare with.\"\n            value={value.caption ?? ''}\n            onChange={(e) => onChange({ ...value, caption: text(e.target.value) })}\n          />\n          <TextField\n            size=\"small\"\n            label=\"Subtitle\"\n            helperText=\"Under the title. {{series}}, {{series|%}}.\"\n            value={value.subtitle ?? ''}\n            onChange={(e) => onChange({ ...value, subtitle: text(e.target.value) })}\n          />\n          <TextField\n            size=\"small\"\n            label=\"Detail\"\n            helperText=\"A box under the figure, as the subtitle.\"\n            value={value.detail ?? ''}\n            onChange={(e) => onChange({ ...value, detail: text(e.target.value) })}\n          />\n          <TextField\n            select\n            size=\"small\"\n            label=\"Change reads\"\n            value={value.changeStyle ?? 'signed'}\n            onChange={(e) => onChange({ ...value, changeStyle: e.target.value === 'size' ? 'size' : undefined })}\n          >\n            <MenuItem value=\"signed\">↑ +0.7%</MenuItem>\n            <MenuItem value=\"size\">↑ 0.7%</MenuItem>\n          </TextField>\n          <FormControlLabel\n            control={\n              <Switch\n                checked={Boolean(value.lowerIsBetter)}\n                onChange={(e) => onChange({ ...value, lowerIsBetter: e.target.checked || undefined })}\n              />\n            }\n            label=\"Lower is better\"\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["FormControlLabel","MenuItem","Switch","TextField","FormatControls","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","text","v","trim","undefined"],"mappings":";;AAAA,SAASA,gBAAgB,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AAC9E,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,yBAAyB;AAMpH,MAAMC,OAAO,CAACC,IAAmCA,EAAEC,IAAI,KAAKD,IAAIE;AAEhE,OAAO"}

package/lib/panels/pulzr-figure-panel/figure.d.ts

@@ -0,0 +1,44 @@
+import type { TimeSeries, TimeSeriesData } from '@perses-dev/spec';
+/** A series' last value that is a number. */
+export declare function lastValue(series: TimeSeries | undefined): number | undefined;
+/**
+ * The figure and the one it is set against. A series labelled `compare` (the
+ * period before, as the Pulzr and Parkeze datasources label it) is the one
+ * set against; the first other series is the figure.
+ */
+export declare function figureOf(results: Array<{
+    data?: TimeSeriesData;
+}>, of?: string): {
+    now?: number;
+    before?: number;
+    total?: number;
+};
+/**
+ * A time in parts, as people say it: 45m, 6h 46m, 7h, and past two days 2d 3h, the minutes being noise there.
+ * Undefined for a unit that is not a time.
+ */
+export declare function timeInParts(value: number, unit: string | undefined): string | undefined;
+export type Direction = 'up' | 'down' | 'flat';
+/** The change from before to now, in percent, and which way: flat within half a percent. */
+export declare function changeOf(now: number | undefined, before: number | undefined): {
+    percent: number;
+    direction: Direction;
+} | undefined;
+/** `↓ -47.3% vs last week`. */
+export declare function changeText(change: {
+    percent: number;
+    direction: Direction;
+}, comparedLabel?: string): string;
+/** The last value of each series not labelled `compare`, by its formatted name. */
+export declare function valuesOf(results: Array<{
+    data?: TimeSeriesData;
+}>): Map<string, number>;
+/** A template's `{{name}}` and `{{name|%}}` filled from the series' values; `—` for one with none. */
+export declare function fill(template: string, values: Map<string, number>): string;
+export type Tone = 'good' | 'bad' | 'flat';
+/** The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. */
+export declare function sizeChange(now: number | undefined, before: number | undefined, lowerIsBetter?: boolean): {
+    text: string;
+    tone: Tone;
+} | undefined;
+//# sourceMappingURL=figure.d.ts.map

package/lib/panels/pulzr-figure-panel/figure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"figure.d.ts","sourceRoot":"","sources":["../../../../src/panels/pulzr-figure-panel/figure.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEnE,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAO5E;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,EACzC,EAAE,CAAC,EAAE,MAAM,GACV;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAWnD;AAID;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAavF;AAED,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE/C,4FAA4F;AAC5F,wBAAgB,QAAQ,CACtB,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,MAAM,EAAE,MAAM,GAAG,SAAS,GACzB;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,GAAG,SAAS,CAOvD;AAID,+BAA+B;AAC/B,wBAAgB,UAAU,CACxB,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,SAAS,CAAA;CAAE,EACjD,aAAa,SAAyB,GACrC,MAAM,CAGR;AAED,mFAAmF;AACnF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAQvF;AAED,sGAAsG;AACtG,wBAAgB,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAM1E;AAED,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3C,4GAA4G;AAC5G,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,aAAa,UAAQ,GACpB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,CAO1C"}