@pulzr/perses-figure-panel 0.2.0 → 0.3.0

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

@@ -1,26 +1,258 @@
 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";
+import { Box, Typography, useTheme } from "@mui/material";
+import { EChart, formatValue, useChartsTheme } from "@perses-dev/components";
+import { LineChart } from "echarts/charts";
+import { GridComponent } from "echarts/components";
+import { color as colors, use as registerECharts } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { BADGE_ARROWS, changeOf, changeText, figureOf, fill, pairOf, sizeChange, timeInParts, valuesOf, valuesOver } from "./figure.js";
+registerECharts([
+    LineChart,
+    GridComponent,
+    CanvasRenderer
+]);
 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) {
+/** A value as text: a time in parts when asked, else by its format. */ function figure(now, format, inParts) {
     if (now === undefined) return "—";
-    return spec.timeInParts && timeInParts(now, spec.format?.unit) || formatValue(now, spec.format);
+    return inParts && timeInParts(now, format?.unit) || formatValue(now, format);
 }
 const TONE = {
     good: "success.main",
     bad: "error.main",
     flat: "text.disabled"
 };
+/** The change, small, as a pillar has it beside a figure: `↗ 133%`, good or bad news. Nothing with nothing before. */ function Badge(t0) {
+    const $ = _c(9);
+    const { now, before, lowerIsBetter } = t0;
+    let t1;
+    if ($[0] !== before || $[1] !== lowerIsBetter || $[2] !== now) {
+        t1 = sizeChange(now, before, lowerIsBetter, BADGE_ARROWS);
+        $[0] = before;
+        $[1] = lowerIsBetter;
+        $[2] = now;
+        $[3] = t1;
+    } else {
+        t1 = $[3];
+    }
+    const change = t1;
+    if (!change) {
+        return null;
+    }
+    const t2 = TONE[change.tone];
+    let t3;
+    if ($[4] !== t2) {
+        t3 = {
+            ...numbers,
+            fontSize: 11,
+            fontWeight: 600,
+            whiteSpace: "nowrap",
+            color: t2
+        };
+        $[4] = t2;
+        $[5] = t3;
+    } else {
+        t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== change.text || $[7] !== t3) {
+        t4 = /*#__PURE__*/ _jsx(Typography, {
+            component: "span",
+            sx: t3,
+            children: change.text
+        });
+        $[6] = change.text;
+        $[7] = t3;
+        $[8] = t4;
+    } else {
+        t4 = $[8];
+    }
+    return t4;
+}
+/** An area, its line 1.5 wide, fading from the color down: the series' shape over the period. */ function Sparkline(t0) {
+    const $ = _c(27);
+    const { values, color } = t0;
+    const chartsTheme = useChartsTheme();
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t1 = {
+            top: 2,
+            right: 0,
+            bottom: 0,
+            left: 0
+        };
+        t2 = {
+            type: "category",
+            show: false,
+            boundaryGap: false
+        };
+        t3 = {
+            type: "value",
+            show: false
+        };
+        $[0] = t1;
+        $[1] = t2;
+        $[2] = t3;
+    } else {
+        t1 = $[0];
+        t2 = $[1];
+        t3 = $[2];
+    }
+    let t4;
+    if ($[3] !== color) {
+        t4 = {
+            color,
+            width: 1.5
+        };
+        $[3] = color;
+        $[4] = t4;
+    } else {
+        t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== color) {
+        t5 = colors.modifyAlpha(color, 0.3);
+        $[5] = color;
+        $[6] = t5;
+    } else {
+        t5 = $[6];
+    }
+    let t6;
+    if ($[7] !== t5) {
+        t6 = {
+            offset: 0,
+            color: t5
+        };
+        $[7] = t5;
+        $[8] = t6;
+    } else {
+        t6 = $[8];
+    }
+    let t7;
+    if ($[9] !== color) {
+        t7 = colors.modifyAlpha(color, 0);
+        $[9] = color;
+        $[10] = t7;
+    } else {
+        t7 = $[10];
+    }
+    let t8;
+    if ($[11] !== t7) {
+        t8 = {
+            offset: 1,
+            color: t7
+        };
+        $[11] = t7;
+        $[12] = t8;
+    } else {
+        t8 = $[12];
+    }
+    let t9;
+    if ($[13] !== t6 || $[14] !== t8) {
+        t9 = {
+            opacity: 0.6,
+            color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                    t6,
+                    t8
+                ]
+            }
+        };
+        $[13] = t6;
+        $[14] = t8;
+        $[15] = t9;
+    } else {
+        t9 = $[15];
+    }
+    let t10;
+    if ($[16] !== t4 || $[17] !== t9 || $[18] !== values) {
+        t10 = {
+            animation: false,
+            grid: t1,
+            xAxis: t2,
+            yAxis: t3,
+            series: [
+                {
+                    type: "line",
+                    data: values,
+                    smooth: true,
+                    smoothMonotone: "x",
+                    symbol: "none",
+                    silent: true,
+                    lineStyle: t4,
+                    areaStyle: t9
+                }
+            ]
+        };
+        $[16] = t4;
+        $[17] = t9;
+        $[18] = values;
+        $[19] = t10;
+    } else {
+        t10 = $[19];
+    }
+    const option = t10;
+    let t11;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+        t11 = {
+            height: 32,
+            m: "4px -2px 6px"
+        };
+        $[20] = t11;
+    } else {
+        t11 = $[20];
+    }
+    let t12;
+    if ($[21] !== chartsTheme || $[22] !== option || $[23] !== values.length) {
+        t12 = values.length > 1 && /*#__PURE__*/ _jsx(EChart, {
+            option: option,
+            theme: chartsTheme.echartsTheme,
+            sx: {
+                width: "100%",
+                height: "100%"
+            }
+        });
+        $[21] = chartsTheme;
+        $[22] = option;
+        $[23] = values.length;
+        $[24] = t12;
+    } else {
+        t12 = $[24];
+    }
+    let t13;
+    if ($[25] !== t12) {
+        t13 = /*#__PURE__*/ _jsx(Box, {
+            sx: t11,
+            children: t12
+        });
+        $[25] = t12;
+        $[26] = t13;
+    } else {
+        t13 = $[26];
+    }
+    return t13;
+}
 /**
  * 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 === "badge") {
+        return {
+            line: sizeChange(now, before) ? undefined : spec.caption,
+            lineColor: "text.secondary"
+        };
+    }
     if (spec.changeStyle === "size") {
         const change = sizeChange(now, before, spec.lowerIsBetter);
         return change ? {
@@ -46,56 +278,113 @@ const TONE = {
         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);
+/**
+ * One figure, large and light, and under it its change against the period before (or a caption); as a pillar, bold
+ * with its change beside it, a sparkline and a list of figures under it.
+ */ export function PulzrFigurePanelComponent(t0) {
+    const $ = _c(55);
     const { queryResults, spec } = t0;
+    const theme = useTheme();
+    let T0;
     let t1;
+    let t2;
+    let t3;
+    let t4;
+    let t5;
     if ($[0] !== queryResults || $[1] !== spec) {
-        const { now, before, total } = figureOf(queryResults, spec.of?.series);
+        let t6;
+        if ($[8] !== spec.rows) {
+            t6 = spec.rows ?? [];
+            $[8] = spec.rows;
+            $[9] = t6;
+        } else {
+            t6 = $[9];
+        }
+        const others = [
+            ...spec.sparkline ? [
+                spec.sparkline.series
+            ] : [],
+            ...t6.map(_temp)
+        ];
+        const { now, before, total } = figureOf(queryResults, spec.of?.series, others);
         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 = {
+        const badge = spec.changeStyle === "badge";
+        T0 = Box;
+        if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+            t1 = {
                 px: "10px",
                 pt: "2px",
                 pb: "7px",
                 minWidth: 0,
                 overflow: "hidden"
             };
-            $[3] = t2;
+            $[10] = t1;
         } else {
-            t2 = $[3];
+            t1 = $[10];
         }
-        const t3 = spec.color ?? "text.primary";
-        let t4;
-        if ($[4] !== t3) {
-            t4 = {
-                ...numbers,
-                fontSize: 22,
+        t2 = 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)
+        });
+        let t7;
+        if ($[11] !== badge) {
+            t7 = badge ? {
+                fontWeight: 650,
+                lineHeight: 1.1,
+                display: "flex",
+                alignItems: "baseline",
+                gap: "8px"
+            } : {
                 fontWeight: 300,
                 lineHeight: 1.05,
-                letterSpacing: "-0.02em",
+                letterSpacing: "-0.02em"
+            };
+            $[11] = badge;
+            $[12] = t7;
+        } else {
+            t7 = $[12];
+        }
+        const t8 = spec.color ?? "text.primary";
+        let t9;
+        if ($[13] !== t7 || $[14] !== t8) {
+            t9 = {
+                ...numbers,
+                fontSize: 22,
+                ...t7,
                 mb: "4px",
-                color: t3
+                color: t8
             };
-            $[4] = t3;
-            $[5] = t4;
+            $[13] = t7;
+            $[14] = t8;
+            $[15] = t9;
         } else {
-            t4 = $[5];
+            t9 = $[15];
         }
-        let t5;
-        if ($[6] !== now || $[7] !== spec) {
-            t5 = figure(now, spec);
-            $[6] = now;
-            $[7] = spec;
-            $[8] = t5;
+        let t10;
+        if ($[16] !== now || $[17] !== spec.format || $[18] !== spec.timeInParts) {
+            t10 = figure(now, spec.format, spec.timeInParts);
+            $[16] = now;
+            $[17] = spec.format;
+            $[18] = spec.timeInParts;
+            $[19] = t10;
         } else {
-            t5 = $[8];
+            t10 = $[19];
         }
-        let t6;
-        if ($[9] !== now || $[10] !== spec.of || $[11] !== total) {
-            t6 = spec.of && total !== undefined && now !== undefined && /*#__PURE__*/ _jsx(Typography, {
+        let t11;
+        if ($[20] !== badge || $[21] !== now || $[22] !== spec.of || $[23] !== total) {
+            t11 = spec.of && total !== undefined && now !== undefined && /*#__PURE__*/ _jsx(Typography, {
                 component: "span",
                 sx: {
                     ...numbers,
@@ -103,38 +392,54 @@ const TONE = {
                     fontWeight: 400,
                     letterSpacing: "0.02em",
                     color: "text.secondary",
-                    ml: "8px",
+                    ml: badge ? 0 : "8px",
                     whiteSpace: "nowrap"
                 },
                 children: `${Math.round(now * total)}/${total}${spec.of.label ? ` ${spec.of.label}` : ""}`
             });
-            $[9] = now;
-            $[10] = spec.of;
-            $[11] = total;
-            $[12] = t6;
+            $[20] = badge;
+            $[21] = now;
+            $[22] = spec.of;
+            $[23] = total;
+            $[24] = t11;
         } else {
-            t6 = $[12];
+            t11 = $[24];
         }
-        let t7;
-        if ($[13] !== t4 || $[14] !== t5 || $[15] !== t6) {
-            t7 = /*#__PURE__*/ _jsxs(Typography, {
+        let t12;
+        if ($[25] !== badge || $[26] !== before || $[27] !== now || $[28] !== spec.lowerIsBetter) {
+            t12 = badge && /*#__PURE__*/ _jsx(Badge, {
+                now: now,
+                before: before,
+                lowerIsBetter: spec.lowerIsBetter
+            });
+            $[25] = badge;
+            $[26] = before;
+            $[27] = now;
+            $[28] = spec.lowerIsBetter;
+            $[29] = t12;
+        } else {
+            t12 = $[29];
+        }
+        if ($[30] !== t10 || $[31] !== t11 || $[32] !== t12 || $[33] !== t9) {
+            t3 = /*#__PURE__*/ _jsxs(Typography, {
                 component: "div",
-                sx: t4,
+                sx: t9,
                 children: [
-                    t5,
-                    t6
+                    t10,
+                    t11,
+                    t12
                 ]
             });
-            $[13] = t4;
-            $[14] = t5;
-            $[15] = t6;
-            $[16] = t7;
+            $[30] = t10;
+            $[31] = t11;
+            $[32] = t12;
+            $[33] = t9;
+            $[34] = t3;
         } else {
-            t7 = $[16];
+            t3 = $[34];
         }
-        let t8;
-        if ($[17] !== line || $[18] !== lineColor) {
-            t8 = line && /*#__PURE__*/ _jsx(Typography, {
+        if ($[35] !== line || $[36] !== lineColor) {
+            t4 = line && /*#__PURE__*/ _jsx(Typography, {
                 component: "div",
                 sx: {
                     ...numbers,
@@ -150,61 +455,154 @@ const TONE = {
                 },
                 children: line
             });
-            $[17] = line;
-            $[18] = lineColor;
-            $[19] = t8;
+            $[35] = line;
+            $[36] = lineColor;
+            $[37] = t4;
         } else {
-            t8 = $[19];
+            t4 = $[37];
         }
-        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",
+        t5 = 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] = T0;
+        $[3] = t1;
+        $[4] = t2;
+        $[5] = t3;
+        $[6] = t4;
+        $[7] = t5;
+    } else {
+        T0 = $[2];
+        t1 = $[3];
+        t2 = $[4];
+        t3 = $[5];
+        t4 = $[6];
+        t5 = $[7];
+    }
+    let t6;
+    if ($[38] !== queryResults || $[39] !== spec.color || $[40] !== spec.sparkline || $[41] !== theme) {
+        t6 = spec.sparkline && /*#__PURE__*/ _jsx(Sparkline, {
+            values: valuesOver(queryResults, spec.sparkline.series),
+            color: spec.sparkline.color ?? spec.color ?? theme.palette.text.primary
+        });
+        $[38] = queryResults;
+        $[39] = spec.color;
+        $[40] = spec.sparkline;
+        $[41] = theme;
+        $[42] = t6;
+    } else {
+        t6 = $[42];
+    }
+    let t7;
+    if ($[43] !== queryResults || $[44] !== spec.rows) {
+        t7 = spec.rows && spec.rows.length > 0 && /*#__PURE__*/ _jsx(Box, {
+            component: "dl",
+            sx: {
+                display: "flex",
+                flexDirection: "column",
+                gap: "1px",
+                m: 0
+            },
+            children: spec.rows.map((row)=>{
+                const pair = pairOf(queryResults, row.series);
+                return /*#__PURE__*/ _jsxs(Box, {
                     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"
+                        display: "flex",
+                        alignItems: "baseline",
+                        justifyContent: "space-between",
+                        gap: "10px",
+                        py: "3px",
+                        borderTop: 1,
+                        borderColor: "divider",
+                        fontSize: 12
                     },
-                    children: fill(spec.detail, values)
-                })
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            component: "dt",
+                            sx: {
+                                color: "text.secondary",
+                                minWidth: 0
+                            },
+                            children: row.label
+                        }),
+                        /*#__PURE__*/ _jsxs(Box, {
+                            component: "dd",
+                            sx: {
+                                ...numbers,
+                                display: "inline-flex",
+                                alignItems: "baseline",
+                                gap: "6px",
+                                m: 0,
+                                color: "text.primary",
+                                whiteSpace: "nowrap"
+                            },
+                            children: [
+                                figure(pair.now, row.format, row.timeInParts),
+                                row.suffix && pair.now !== undefined && ` ${row.suffix}`,
+                                /*#__PURE__*/ _jsx(Badge, {
+                                    now: pair.now,
+                                    before: pair.before,
+                                    lowerIsBetter: row.lowerIsBetter
+                                })
+                            ]
+                        })
+                    ]
+                }, row.label);
+            })
+        });
+        $[43] = queryResults;
+        $[44] = spec.rows;
+        $[45] = t7;
+    } else {
+        t7 = $[45];
+    }
+    let t8;
+    if ($[46] !== T0 || $[47] !== t1 || $[48] !== t2 || $[49] !== t3 || $[50] !== t4 || $[51] !== t5 || $[52] !== t6 || $[53] !== t7) {
+        t8 = /*#__PURE__*/ _jsxs(T0, {
+            sx: t1,
+            children: [
+                t2,
+                t3,
+                t4,
+                t5,
+                t6,
+                t7
             ]
         });
-        $[0] = queryResults;
-        $[1] = spec;
-        $[2] = t1;
+        $[46] = T0;
+        $[47] = t1;
+        $[48] = t2;
+        $[49] = t3;
+        $[50] = t4;
+        $[51] = t5;
+        $[52] = t6;
+        $[53] = t7;
+        $[54] = t8;
     } else {
-        t1 = $[2];
+        t8 = $[54];
     }
-    return t1;
+    return t8;
+}
+function _temp(r) {
+    return r.series;
 }
 
 //# sourceMappingURL=PulzrFigurePanelComponent.js.map