@pulzr/perses-figure-panel 0.1.0 → 0.2.1

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

@@ -2,7 +2,7 @@ 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, timeInParts } from "./figure.js";
+import { changeOf, changeText, figureOf, fill, sizeChange, timeInParts, valuesOf } from "./figure.js";
 const numbers = {
     fontFeatureSettings: "'tnum' 1",
     fontVariantNumeric: "tabular-nums"
@@ -11,161 +11,200 @@ const numbers = {
     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(28);
+    const $ = _c(20);
     const { queryResults, spec } = t0;
-    let change;
-    let now;
     let t1;
-    let total;
-    if ($[0] !== queryResults || $[1] !== spec.caption || $[2] !== spec.comparedLabel || $[3] !== spec.of?.series) {
-        const { now: t2, before, total: t3 } = figureOf(queryResults, spec.of?.series);
-        now = t2;
-        total = t3;
-        change = changeOf(now, before);
-        t1 = change ? changeText(change, spec.comparedLabel) : spec.caption;
-        $[0] = queryResults;
-        $[1] = spec.caption;
-        $[2] = spec.comparedLabel;
-        $[3] = spec.of?.series;
-        $[4] = change;
-        $[5] = now;
-        $[6] = t1;
-        $[7] = total;
-    } else {
-        change = $[4];
-        now = $[5];
-        t1 = $[6];
-        total = $[7];
-    }
-    const line = t1;
-    let lineColor = "text.secondary";
-    if (change) {
-        const better = spec.lowerIsBetter ? "down" : "up";
-        if (change.direction === "flat") {
-            lineColor = "text.disabled";
+    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 {
-            lineColor = change.direction === better ? "success.main" : "error.main";
+            t2 = $[3];
         }
-    }
-    let t2;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-        t2 = {
-            px: "10px",
-            pt: "2px",
-            pb: "7px",
-            minWidth: 0,
-            overflow: "hidden"
-        };
-        $[8] = t2;
-    } else {
-        t2 = $[8];
-    }
-    const t3 = spec.color ?? "text.primary";
-    let t4;
-    if ($[9] !== t3) {
-        t4 = {
-            ...numbers,
-            fontSize: 22,
-            fontWeight: 300,
-            lineHeight: 1.05,
-            letterSpacing: "-0.02em",
-            mb: "4px",
-            color: t3
-        };
-        $[9] = t3;
-        $[10] = t4;
-    } else {
-        t4 = $[10];
-    }
-    let t5;
-    if ($[11] !== now || $[12] !== spec) {
-        t5 = figure(now, spec);
-        $[11] = now;
-        $[12] = spec;
-        $[13] = t5;
-    } else {
-        t5 = $[13];
-    }
-    let t6;
-    if ($[14] !== now || $[15] !== spec.of || $[16] !== total) {
-        t6 = spec.of && total !== undefined && now !== undefined && /*#__PURE__*/ _jsx(Typography, {
-            component: "span",
-            sx: {
+        const t3 = spec.color ?? "text.primary";
+        let t4;
+        if ($[4] !== t3) {
+            t4 = {
                 ...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}` : ""}`
-        });
-        $[14] = now;
-        $[15] = spec.of;
-        $[16] = total;
-        $[17] = t6;
-    } else {
-        t6 = $[17];
-    }
-    let t7;
-    if ($[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
-        t7 = /*#__PURE__*/ _jsxs(Typography, {
-            component: "div",
-            sx: t4,
-            children: [
-                t5,
-                t6
-            ]
-        });
-        $[18] = t4;
-        $[19] = t5;
-        $[20] = t6;
-        $[21] = t7;
-    } else {
-        t7 = $[21];
-    }
-    let t8;
-    if ($[22] !== line || $[23] !== 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
-        });
-        $[22] = line;
-        $[23] = lineColor;
-        $[24] = t8;
-    } else {
-        t8 = $[24];
-    }
-    let t9;
-    if ($[25] !== t7 || $[26] !== t8) {
-        t9 = /*#__PURE__*/ _jsxs(Box, {
+                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: "2px",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis"
+                    },
+                    children: fill(spec.subtitle, values)
+                }),
                 t7,
-                t8
+                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)
+                })
             ]
         });
-        $[25] = t7;
-        $[26] = t8;
-        $[27] = t9;
+        $[0] = queryResults;
+        $[1] = spec;
+        $[2] = t1;
     } else {
-        t9 = $[27];
+        t1 = $[2];
     }
-    return t9;
+    return t1;
 }
 
 //# sourceMappingURL=PulzrFigurePanelComponent.js.map

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

@@ -1 +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, timeInParts } 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\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 change = changeOf(now, before);\n  const line = change ? changeText(change, spec.comparedLabel) : spec.caption;\n  // A change: good news in the success color, bad in the error color, flat quiet. A caption: secondary.\n  let lineColor = 'text.secondary';\n  if (change) {\n    const better = spec.lowerIsBetter ? 'down' : 'up';\n    if (change.direction === 'flat') lineColor = 'text.disabled';\n    else lineColor = change.direction === better ? 'success.main' : 'error.main';\n  }\n  return (\n    <Box sx={{ px: '10px', pt: '2px', pb: '7px', minWidth: 0, overflow: 'hidden' }}>\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    </Box>\n  );\n}\n"],"names":["Box","Typography","formatValue","changeOf","changeText","figureOf","timeInParts","numbers","fontFeatureSettings","fontVariantNumeric","figure","now","spec","undefined","format","unit"],"mappings":";;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,gBAAgB;AAChD,SAASC,WAAW,QAAQ,yBAAyB;AAGrD,SAASC,QAAQ,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,cAAW;AAGvE,MAAMC,UAAU;IAAEC,qBAAqB;IAAYC,oBAAoB;AAAe;AAEtF,wEAAwE,GACxE,SAASC,OAAOC,GAAG,EAAsBC,IAAI;IAC3C,IAAID,QAAQE,WAAW,OAAO;IAC9B,OAAO,AAACD,KAAKN,WAAW,IAAIA,YAAYK,KAAKC,KAAKE,MAAM,EAAEC,SAAUb,YAAYS,KAAKC,KAAKE,MAAM;AAClG;AAEA,mGAAmG,GACnG,OAAO"}
+{"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: '2px',\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.map

@@ -1 +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,CA+C5D"}
+{"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

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { c as _c } from "react-compiler-runtime";
-import { FormControlLabel, Switch, TextField } from "@mui/material";
+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(40);
+    const $ = _c(63);
     const { value, onChange } = t0;
     let t1;
     if ($[0] !== value.format) {
@@ -129,12 +129,12 @@ export function PulzrFigurePanelSettingsEditor(t0) {
     } else {
         t12 = $[25];
     }
-    const t13 = Boolean(value.lowerIsBetter);
+    const t13 = value.subtitle ?? "";
     let t14;
     if ($[26] !== onChange || $[27] !== value) {
         t14 = (e_2)=>onChange({
                 ...value,
-                lowerIsBetter: e_2.target.checked || undefined
+                subtitle: text(e_2.target.value)
             });
         $[26] = onChange;
         $[27] = value;
@@ -144,12 +144,12 @@ export function PulzrFigurePanelSettingsEditor(t0) {
     }
     let t15;
     if ($[29] !== t13 || $[30] !== t14) {
-        t15 = /*#__PURE__*/ _jsx(FormControlLabel, {
-            control: /*#__PURE__*/ _jsx(Switch, {
-                checked: t13,
-                onChange: t14
-            }),
-            label: "Lower is better"
+        t15 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Subtitle",
+            helperText: "Under the title. {{series}}, {{series|%}}.",
+            value: t13,
+            onChange: t14
         });
         $[29] = t13;
         $[30] = t14;
@@ -157,42 +157,153 @@ export function PulzrFigurePanelSettingsEditor(t0) {
     } else {
         t15 = $[31];
     }
-    let t16;
-    if ($[32] !== t12 || $[33] !== t15 || $[34] !== t6 || $[35] !== t9) {
-        t16 = /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+    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
+                    t15,
+                    t18,
+                    t23,
+                    t26
                 ]
             })
         });
-        $[32] = t12;
-        $[33] = t15;
-        $[34] = t6;
-        $[35] = t9;
-        $[36] = t16;
+        $[52] = t12;
+        $[53] = t15;
+        $[54] = t18;
+        $[55] = t23;
+        $[56] = t26;
+        $[57] = t6;
+        $[58] = t9;
+        $[59] = t27;
     } else {
-        t16 = $[36];
+        t27 = $[59];
     }
-    let t17;
-    if ($[37] !== t16 || $[38] !== t3) {
-        t17 = /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+    let t28;
+    if ($[60] !== t27 || $[61] !== t3) {
+        t28 = /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
             children: [
                 t3,
-                t16
+                t27
             ]
         });
-        $[37] = t16;
-        $[38] = t3;
-        $[39] = t17;
+        $[60] = t27;
+        $[61] = t3;
+        $[62] = t28;
     } else {
-        t17 = $[39];
+        t28 = $[62];
     }
-    return t17;
+    return t28;
 }
 
 //# sourceMappingURL=PulzrFigurePanelSettingsEditor.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/PulzrFigurePanelSettingsEditor.tsx"],"sourcesContent":["import { FormControlLabel, 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          <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","Switch","TextField","FormatControls","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","text","v","trim","undefined"],"mappings":";;AAAA,SAASA,gBAAgB,EAAEC,MAAM,EAAEC,SAAS,QAAQ,gBAAgB;AACpE,SAASC,cAAc,EAAEC,mBAAmB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,yBAAyB;AAMpH,MAAMC,OAAO,CAACC,IAAmCA,EAAEC,IAAI,KAAKD,IAAIE;AAEhE,OAAO"}
+{"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

@@ -13,7 +13,10 @@ export declare function figureOf(results: Array<{
     before?: number;
     total?: number;
 };
-/** A time in parts, as people say it: 45m, 6h 46m, 7h, 2d 3h. Undefined for a unit that is not a time. */
+/**
+ * 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. */
@@ -26,4 +29,16 @@ 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