@pulzr/perses-figure-panel 0.2.1 → 0.3.0

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, 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"}
+{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/PulzrFigurePanelComponent.tsx"],"sourcesContent":["import { Box, Typography, useTheme } from '@mui/material';\nimport type { FormatOptions } from '@perses-dev/components';\nimport { EChart, formatValue, useChartsTheme } from '@perses-dev/components';\nimport { LineChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\nimport { color as colors, use as registerECharts } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport {\n  BADGE_ARROWS,\n  changeOf,\n  changeText,\n  figureOf,\n  fill,\n  pairOf,\n  sizeChange,\n  timeInParts,\n  valuesOf,\n  valuesOver,\n} from './figure';\nimport type { PulzrFigurePanelProps } from './pulzr-figure-panel-types';\n\nregisterECharts([LineChart, GridComponent, CanvasRenderer]);\n\nconst numbers = { fontFeatureSettings: \"'tnum' 1\", fontVariantNumeric: 'tabular-nums' } as const;\n\n/** A value as text: a time in parts when asked, else by its format. */\nfunction figure(now: number | undefined, format?: FormatOptions, inParts?: boolean): string {\n  if (now === undefined) return '—';\n  return (inParts && timeInParts(now, format?.unit)) || formatValue(now, format);\n}\n\nconst TONE = { good: 'success.main', bad: 'error.main', flat: 'text.disabled' } as const;\n\n/** The change, small, as a pillar has it beside a figure: `↗ 133%`, good or bad news. Nothing with nothing before. */\nfunction Badge({\n  now,\n  before,\n  lowerIsBetter,\n}: {\n  now?: number;\n  before?: number;\n  lowerIsBetter?: boolean;\n}): ReactElement | null {\n  const change = sizeChange(now, before, lowerIsBetter, BADGE_ARROWS);\n  if (!change) return null;\n  return (\n    <Typography\n      component=\"span\"\n      sx={{ ...numbers, fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap', color: TONE[change.tone] }}\n    >\n      {change.text}\n    </Typography>\n  );\n}\n\n/** An area, its line 1.5 wide, fading from the color down: the series' shape over the period. */\nfunction Sparkline({ values, color }: { values: number[]; color: string }): ReactElement {\n  const chartsTheme = useChartsTheme();\n  const option = useMemo(\n    () => ({\n      animation: false,\n      grid: { top: 2, right: 0, bottom: 0, left: 0 },\n      xAxis: { type: 'category', show: false, boundaryGap: false },\n      yAxis: { type: 'value', show: false },\n      series: [\n        {\n          type: 'line',\n          data: values,\n          smooth: true,\n          smoothMonotone: 'x',\n          symbol: 'none',\n          silent: true,\n          lineStyle: { color, width: 1.5 },\n          // The console's area: a gradient 0.3 to 0, at the 0.6 opacity a Recharts area has.\n          areaStyle: {\n            opacity: 0.6,\n            color: {\n              type: 'linear',\n              x: 0,\n              y: 0,\n              x2: 0,\n              y2: 1,\n              colorStops: [\n                { offset: 0, color: colors.modifyAlpha(color, 0.3) },\n                { offset: 1, color: colors.modifyAlpha(color, 0) },\n              ],\n            },\n          },\n        },\n      ],\n    }),\n    [values, color],\n  );\n  return (\n    <Box sx={{ height: 32, m: '4px -2px 6px' }}>\n      {values.length > 1 && (\n        <EChart option={option} theme={chartsTheme.echartsTheme} sx={{ width: '100%', height: '100%' }} />\n      )}\n    </Box>\n  );\n}\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 === 'badge') {\n    return { line: sizeChange(now, before) ? undefined : spec.caption, lineColor: 'text.secondary' };\n  }\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/**\n * One figure, large and light, and under it its change against the period before (or a caption); as a pillar, bold\n * with its change beside it, a sparkline and a list of figures under it.\n */\nexport function PulzrFigurePanelComponent({ queryResults, spec }: PulzrFigurePanelProps): ReactElement {\n  const theme = useTheme();\n  const others = [...(spec.sparkline ? [spec.sparkline.series] : []), ...(spec.rows ?? []).map((r) => r.series)];\n  const { now, before, total } = figureOf(queryResults, spec.of?.series, others);\n  const values = spec.subtitle || spec.detail ? valuesOf(queryResults) : undefined;\n  const { line, lineColor } = changeLine(now, before, spec);\n  const badge = spec.changeStyle === 'badge';\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          ...(badge\n            ? { fontWeight: 650, lineHeight: 1.1, display: 'flex', alignItems: 'baseline', gap: '8px' }\n            : { fontWeight: 300, lineHeight: 1.05, letterSpacing: '-0.02em' }),\n          mb: '4px',\n          color: spec.color ?? 'text.primary',\n        }}\n      >\n        {figure(now, spec.format, spec.timeInParts)}\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: badge ? 0 : '8px',\n              whiteSpace: 'nowrap',\n            }}\n          >\n            {`${Math.round(now * total)}/${total}${spec.of.label ? ` ${spec.of.label}` : ''}`}\n          </Typography>\n        )}\n        {badge && <Badge now={now} before={before} lowerIsBetter={spec.lowerIsBetter} />}\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      {spec.sparkline && (\n        <Sparkline\n          values={valuesOver(queryResults, spec.sparkline.series)}\n          color={spec.sparkline.color ?? spec.color ?? theme.palette.text.primary}\n        />\n      )}\n      {spec.rows && spec.rows.length > 0 && (\n        <Box component=\"dl\" sx={{ display: 'flex', flexDirection: 'column', gap: '1px', m: 0 }}>\n          {spec.rows.map((row) => {\n            const pair = pairOf(queryResults, row.series);\n            return (\n              <Box\n                key={row.label}\n                sx={{\n                  display: 'flex',\n                  alignItems: 'baseline',\n                  justifyContent: 'space-between',\n                  gap: '10px',\n                  py: '3px',\n                  borderTop: 1,\n                  borderColor: 'divider',\n                  fontSize: 12,\n                }}\n              >\n                <Box component=\"dt\" sx={{ color: 'text.secondary', minWidth: 0 }}>\n                  {row.label}\n                </Box>\n                <Box\n                  component=\"dd\"\n                  sx={{\n                    ...numbers,\n                    display: 'inline-flex',\n                    alignItems: 'baseline',\n                    gap: '6px',\n                    m: 0,\n                    color: 'text.primary',\n                    whiteSpace: 'nowrap',\n                  }}\n                >\n                  {figure(pair.now, row.format, row.timeInParts)}\n                  {row.suffix && pair.now !== undefined && ` ${row.suffix}`}\n                  <Badge now={pair.now} before={pair.before} lowerIsBetter={row.lowerIsBetter} />\n                </Box>\n              </Box>\n            );\n          })}\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","Typography","useTheme","EChart","formatValue","useChartsTheme","LineChart","GridComponent","color","colors","use","registerECharts","CanvasRenderer","BADGE_ARROWS","changeOf","changeText","figureOf","fill","pairOf","sizeChange","timeInParts","valuesOf","valuesOver","numbers","fontFeatureSettings","fontVariantNumeric","figure","now","format","inParts","undefined","unit","TONE","good","bad","flat","changeLine","before","spec","label","comparedLabel","changeStyle","line","caption","lineColor","change","lowerIsBetter","text","tone","direction"],"mappings":";;AAAA,SAASA,GAAG,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AAE1D,SAASC,MAAM,EAAEC,WAAW,EAAEC,cAAc,QAAQ,yBAAyB;AAC7E,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,SAASC,MAAM,EAAEC,OAAOC,eAAe,QAAQ,eAAe;AACvE,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SACEC,YAAY,EACZC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACRC,IAAI,EACJC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,UAAU,QACL,cAAW;AAGlBX,gBAAgB;IAACL;IAAWC;IAAeK;CAAe;AAE1D,MAAMW,UAAU;IAAEC,qBAAqB;IAAYC,oBAAoB;AAAe;AAEtF,qEAAqE,GACrE,SAASC,OAAOC,GAAG,EAAsBC,MAAM,EAAkBC,OAAO;IACtE,IAAIF,QAAQG,WAAW,OAAO;IAC9B,OAAO,AAACD,WAAWT,YAAYO,KAAKC,QAAQG,SAAU3B,YAAYuB,KAAKC;AACzE;AAEA,MAAMI,OAAO;IAAEC,MAAM;IAAgBC,KAAK;IAAcC,MAAM;AAAgB;AAE9E,oHAAoH,GACpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,+FAA+F,GAC/F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA;;;CAGC,GACD,SAASC,WACPT,GAAG,EACHU,MAAM,EACNC,IAAI;IAEJ,MAAMC,QAAQD,KAAKE,aAAa,IAAI;IACpC,IAAIF,KAAKG,WAAW,KAAK,SAAS;QAChC,OAAO;YAAEC,MAAMvB,WAAWQ,KAAKU,UAAUP,YAAYQ,KAAKK,OAAO;YAAEC,WAAW;QAAiB;IACjG;IACA,IAAIN,KAAKG,WAAW,KAAK,QAAQ;QAC/B,MAAMI,SAAS1B,WAAWQ,KAAKU,QAAQC,KAAKQ,aAAa;QACzD,OAAOD,SACH;YAAEH,MAAM,GAAGG,OAAOE,IAAI,CAAC,CAAC,EAAER,OAAO;YAAEK,WAAWZ,IAAKa,CAAAA,OAAOG,IAAI,CAAA,AAAC;QAAC,IAChE;YAAEN,MAAMJ,KAAKK,OAAO;YAAEC,WAAW;QAAiB;IACxD;IACA,MAAMC,SAAS/B,SAASa,KAAKU;IAC7B,IAAI,CAACQ,QAAQ,OAAO;QAAEH,MAAMJ,KAAKK,OAAO;QAAEC,WAAW;IAAiB;IACtE,IAAIC,OAAOI,SAAS,KAAK,QAAQ,OAAO;QAAEP,MAAM3B,WAAW8B,QAAQN;QAAQK,WAAWZ,KAAKG,IAAI;IAAC;IAChG,MAAMF,OAAOY,OAAOI,SAAS,KAAMX,CAAAA,KAAKQ,aAAa,GAAG,SAAS,IAAG;IACpE,OAAO;QAAEJ,MAAM3B,WAAW8B,QAAQN;QAAQK,WAAWX,OAAOD,KAAKC,IAAI,GAAGD,KAAKE,GAAG;IAAC;AACnF;AAEA;;;CAGC,GACD,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,CAuE5D"}
+{"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,CAmG5D"}

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

@@ -4,7 +4,7 @@ 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 $ = _c(79);
     const { value, onChange } = t0;
     let t1;
     if ($[0] !== value.format) {
@@ -190,7 +190,7 @@ export function PulzrFigurePanelSettingsEditor(t0) {
     if ($[38] !== onChange || $[39] !== value) {
         t20 = (e_4)=>onChange({
                 ...value,
-                changeStyle: e_4.target.value === "size" ? "size" : undefined
+                changeStyle: e_4.target.value === "size" || e_4.target.value === "badge" ? e_4.target.value : undefined
             });
         $[38] = onChange;
         $[39] = value;
@@ -200,6 +200,7 @@ export function PulzrFigurePanelSettingsEditor(t0) {
     }
     let t21;
     let t22;
+    let t23;
     if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
         t21 = /*#__PURE__*/ _jsx(MenuItem, {
             value: "signed",
@@ -209,15 +210,21 @@ export function PulzrFigurePanelSettingsEditor(t0) {
             value: "size",
             children: "↑ 0.7%"
         });
+        t23 = /*#__PURE__*/ _jsx(MenuItem, {
+            value: "badge",
+            children: "↗ 0.7% beside the figure"
+        });
         $[41] = t21;
         $[42] = t22;
+        $[43] = t23;
     } else {
         t21 = $[41];
         t22 = $[42];
+        t23 = $[43];
     }
-    let t23;
-    if ($[43] !== t19 || $[44] !== t20) {
-        t23 = /*#__PURE__*/ _jsxs(TextField, {
+    let t24;
+    if ($[44] !== t19 || $[45] !== t20) {
+        t24 = /*#__PURE__*/ _jsxs(TextField, {
             select: true,
             size: "small",
             label: "Change reads",
@@ -225,46 +232,112 @@ export function PulzrFigurePanelSettingsEditor(t0) {
             onChange: t20,
             children: [
                 t21,
-                t22
+                t22,
+                t23
             ]
         });
-        $[43] = t19;
-        $[44] = t20;
-        $[45] = t23;
+        $[44] = t19;
+        $[45] = t20;
+        $[46] = t24;
     } else {
-        t23 = $[45];
+        t24 = $[46];
     }
-    const t24 = Boolean(value.lowerIsBetter);
-    let t25;
-    if ($[46] !== onChange || $[47] !== value) {
-        t25 = (e_5)=>onChange({
+    const t25 = value.sparkline?.series ?? "";
+    let t26;
+    if ($[47] !== onChange || $[48] !== value) {
+        t26 = (e_5)=>onChange({
                 ...value,
-                lowerIsBetter: e_5.target.checked || undefined
+                sparkline: text(e_5.target.value) ? {
+                    ...value.sparkline,
+                    series: e_5.target.value
+                } : undefined
             });
-        $[46] = onChange;
-        $[47] = value;
-        $[48] = t25;
+        $[47] = onChange;
+        $[48] = value;
+        $[49] = t26;
     } else {
-        t25 = $[48];
+        t26 = $[49];
     }
-    let t26;
-    if ($[49] !== t24 || $[50] !== t25) {
-        t26 = /*#__PURE__*/ _jsx(FormControlLabel, {
+    let t27;
+    if ($[50] !== t25 || $[51] !== t26) {
+        t27 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Sparkline series",
+            helperText: "An area under the figure, of this series over time.",
+            value: t25,
+            onChange: t26
+        });
+        $[50] = t25;
+        $[51] = t26;
+        $[52] = t27;
+    } else {
+        t27 = $[52];
+    }
+    const t28 = !value.sparkline;
+    const t29 = value.sparkline?.color ?? "";
+    let t30;
+    if ($[53] !== onChange || $[54] !== value) {
+        t30 = (e_6)=>value.sparkline && onChange({
+                ...value,
+                sparkline: {
+                    ...value.sparkline,
+                    color: text(e_6.target.value)
+                }
+            });
+        $[53] = onChange;
+        $[54] = value;
+        $[55] = t30;
+    } else {
+        t30 = $[55];
+    }
+    let t31;
+    if ($[56] !== t28 || $[57] !== t29 || $[58] !== t30) {
+        t31 = /*#__PURE__*/ _jsx(TextField, {
+            size: "small",
+            label: "Sparkline color",
+            helperText: "Empty: the figure's color.",
+            disabled: t28,
+            value: t29,
+            onChange: t30
+        });
+        $[56] = t28;
+        $[57] = t29;
+        $[58] = t30;
+        $[59] = t31;
+    } else {
+        t31 = $[59];
+    }
+    const t32 = Boolean(value.lowerIsBetter);
+    let t33;
+    if ($[60] !== onChange || $[61] !== value) {
+        t33 = (e_7)=>onChange({
+                ...value,
+                lowerIsBetter: e_7.target.checked || undefined
+            });
+        $[60] = onChange;
+        $[61] = value;
+        $[62] = t33;
+    } else {
+        t33 = $[62];
+    }
+    let t34;
+    if ($[63] !== t32 || $[64] !== t33) {
+        t34 = /*#__PURE__*/ _jsx(FormControlLabel, {
             control: /*#__PURE__*/ _jsx(Switch, {
-                checked: t24,
-                onChange: t25
+                checked: t32,
+                onChange: t33
             }),
             label: "Lower is better"
         });
-        $[49] = t24;
-        $[50] = t25;
-        $[51] = t26;
+        $[63] = t32;
+        $[64] = t33;
+        $[65] = t34;
     } else {
-        t26 = $[51];
+        t34 = $[65];
     }
-    let t27;
-    if ($[52] !== t12 || $[53] !== t15 || $[54] !== t18 || $[55] !== t23 || $[56] !== t26 || $[57] !== t6 || $[58] !== t9) {
-        t27 = /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+    let t35;
+    if ($[66] !== t12 || $[67] !== t15 || $[68] !== t18 || $[69] !== t24 || $[70] !== t27 || $[71] !== t31 || $[72] !== t34 || $[73] !== t6 || $[74] !== t9) {
+        t35 = /*#__PURE__*/ _jsx(OptionsEditorColumn, {
             children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                 title: "Figure",
                 children: [
@@ -273,37 +346,41 @@ export function PulzrFigurePanelSettingsEditor(t0) {
                     t12,
                     t15,
                     t18,
-                    t23,
-                    t26
+                    t24,
+                    t27,
+                    t31,
+                    t34
                 ]
             })
         });
-        $[52] = t12;
-        $[53] = t15;
-        $[54] = t18;
-        $[55] = t23;
-        $[56] = t26;
-        $[57] = t6;
-        $[58] = t9;
-        $[59] = t27;
+        $[66] = t12;
+        $[67] = t15;
+        $[68] = t18;
+        $[69] = t24;
+        $[70] = t27;
+        $[71] = t31;
+        $[72] = t34;
+        $[73] = t6;
+        $[74] = t9;
+        $[75] = t35;
     } else {
-        t27 = $[59];
+        t35 = $[75];
     }
-    let t28;
-    if ($[60] !== t27 || $[61] !== t3) {
-        t28 = /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+    let t36;
+    if ($[76] !== t3 || $[77] !== t35) {
+        t36 = /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
             children: [
                 t3,
-                t27
+                t35
             ]
         });
-        $[60] = t27;
-        $[61] = t3;
-        $[62] = t28;
+        $[76] = t3;
+        $[77] = t35;
+        $[78] = t36;
     } else {
-        t28 = $[62];
+        t36 = $[78];
     }
-    return t28;
+    return t36;
 }
 
 //# 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, 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"}
+{"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) =>\n              onChange({\n                ...value,\n                changeStyle: e.target.value === 'size' || e.target.value === 'badge' ? e.target.value : undefined,\n              })\n            }\n          >\n            <MenuItem value=\"signed\">↑ +0.7%</MenuItem>\n            <MenuItem value=\"size\">↑ 0.7%</MenuItem>\n            <MenuItem value=\"badge\">↗ 0.7% beside the figure</MenuItem>\n          </TextField>\n          <TextField\n            size=\"small\"\n            label=\"Sparkline series\"\n            helperText=\"An area under the figure, of this series over time.\"\n            value={value.sparkline?.series ?? ''}\n            onChange={(e) =>\n              onChange({\n                ...value,\n                sparkline: text(e.target.value) ? { ...value.sparkline, series: e.target.value } : undefined,\n              })\n            }\n          />\n          <TextField\n            size=\"small\"\n            label=\"Sparkline color\"\n            helperText=\"Empty: the figure's color.\"\n            disabled={!value.sparkline}\n            value={value.sparkline?.color ?? ''}\n            onChange={(e) =>\n              value.sparkline && onChange({ ...value, sparkline: { ...value.sparkline, color: text(e.target.value) } })\n            }\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","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

@@ -1,18 +1,32 @@
 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 series compared with the one named: `<name> · previous period`, `<name> · last year`. */
+export declare function twinOf(series: TimeSeries[], name: string): TimeSeries | 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.
+ * 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, leaving out `of` and
+ * the series named in `others` (a sparkline's, the rows'). The period before is the figure's twin by name, or else
+ * the first compared series that is not theirs.
  */
 export declare function figureOf(results: Array<{
     data?: TimeSeriesData;
-}>, of?: string): {
+}>, of?: string, others?: string[]): {
     now?: number;
     before?: number;
     total?: number;
 };
+/** The last value of the series named and of its twin, the period before. */
+export declare function pairOf(results: Array<{
+    data?: TimeSeriesData;
+}>, name: string): {
+    now?: number;
+    before?: number;
+};
+/** Every number over time of the series named, for a sparkline. */
+export declare function valuesOver(results: Array<{
+    data?: TimeSeriesData;
+}>, name: string): 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.
@@ -36,8 +50,13 @@ export declare function valuesOf(results: Array<{
 /** 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): {
+/** A pillar's arrows, for the change as a badge: `↗ 133%`. */
+export declare const BADGE_ARROWS: [string, string];
+/**
+ * The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. `arrows`
+ * are the rise's and the fall's.
+ */
+export declare function sizeChange(now: number | undefined, before: number | undefined, lowerIsBetter?: boolean, arrows?: [string, string]): {
     text: string;
     tone: Tone;
 } | undefined;

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

@@ -1 +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"}
+{"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;AAKD,gGAAgG;AAChG,wBAAgB,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAEjF;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,EACzC,EAAE,CAAC,EAAE,MAAM,EACX,MAAM,GAAE,MAAM,EAAO,GACpB;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAYnD;AAED,6EAA6E;AAC7E,wBAAgB,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAMjH;AAED,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC;IAAE,IAAI,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,EAAE,CAG5F;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,8DAA8D;AAC9D,eAAO,MAAM,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,CAAc,CAAC;AAEzD;;;GAGG;AACH,wBAAgB,UAAU,CACxB,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,MAAM,EAAE,MAAM,GAAG,SAAS,EAC1B,aAAa,UAAQ,EACrB,MAAM,GAAE,CAAC,MAAM,EAAE,MAAM,CAAc,GACpC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,IAAI,CAAA;CAAE,GAAG,SAAS,CAO1C"}

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

@@ -6,20 +6,42 @@
     }
     return undefined;
 }
+const nameOf = (s)=>s.formattedName ?? s.name;
+const compared = (s)=>Boolean(s.labels?.compare);
+/** The series compared with the one named: `<name> · previous period`, `<name> · last year`. */ export function twinOf(series, name) {
+    return series.find((s)=>compared(s) && nameOf(s).startsWith(`${name} · `));
+}
 /**
- * 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 function figureOf(results, of) {
+ * 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, leaving out `of` and
+ * the series named in `others` (a sparkline's, the rows'). The period before is the figure's twin by name, or else
+ * the first compared series that is not theirs.
+ */ export function figureOf(results, of, others = []) {
     const series = results.flatMap((r)=>r.data?.series ?? []);
-    const compared = (s)=>Boolean(s.labels?.compare);
-    const named = (s)=>of !== undefined && (s.formattedName ?? s.name) === of;
+    const taken = of === undefined ? others : [
+        of,
+        ...others
+    ];
+    const figure = series.find((s)=>!compared(s) && !taken.includes(nameOf(s)));
     return {
-        now: lastValue(series.find((s)=>!compared(s) && !named(s))),
-        before: lastValue(series.find((s)=>compared(s) && !(of !== undefined && (s.formattedName ?? s.name).startsWith(of)))),
-        total: of === undefined ? undefined : lastValue(series.find((s)=>!compared(s) && named(s)))
+        now: lastValue(figure),
+        before: lastValue((figure && twinOf(series, nameOf(figure))) ?? series.find((s)=>compared(s) && !taken.some((name)=>nameOf(s).startsWith(name)))),
+        total: of === undefined ? undefined : lastValue(series.find((s)=>!compared(s) && nameOf(s) === of))
     };
 }
+/** The last value of the series named and of its twin, the period before. */ export function pairOf(results, name) {
+    const series = results.flatMap((r)=>r.data?.series ?? []);
+    return {
+        now: lastValue(series.find((s)=>!compared(s) && nameOf(s) === name)),
+        before: lastValue(twinOf(series, name))
+    };
+}
+/** Every number over time of the series named, for a sparkline. */ export function valuesOver(results, name) {
+    const series = results.flatMap((r)=>r.data?.series ?? []).find((s)=>!compared(s) && nameOf(s) === name);
+    return (series?.values ?? []).flatMap(([, v])=>v !== null && Number.isFinite(v) ? [
+            v
+        ] : []);
+}
 const TO_MINUTES = {
     seconds: 1 / 60,
     minutes: 1,
@@ -80,7 +102,17 @@ const ARROW = {
         });
     });
 }
-/** The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. */ export function sizeChange(now, before, lowerIsBetter = false) {
+/** A pillar's arrows, for the change as a badge: `↗ 133%`. */ export const BADGE_ARROWS = [
+    '↗',
+    '↘'
+];
+/**
+ * The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. `arrows`
+ * are the rise's and the fall's.
+ */ export function sizeChange(now, before, lowerIsBetter = false, arrows = [
+    '↑',
+    '↓'
+]) {
     if (now === undefined || before === undefined || before === 0) return undefined;
     const percent = (now - before) / Math.abs(before) * 100;
     if (Math.abs(percent) < 0.05) return {
@@ -90,7 +122,7 @@ const ARROW = {
     const size = Math.abs(percent) >= 100 ? String(Math.round(Math.abs(percent))) : Math.abs(percent).toFixed(1);
     const good = lowerIsBetter ? percent < 0 : percent > 0;
     return {
-        text: `${percent > 0 ? '↑' : '↓'} ${size}%`,
+        text: `${percent > 0 ? arrows[0] : arrows[1]} ${size}%`,
         tone: good ? 'good' : 'bad'
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/figure.ts"],"sourcesContent":["import type { TimeSeries, TimeSeriesData } from '@perses-dev/spec';\n\n/** A series' last value that is a number. */\nexport function lastValue(series: TimeSeries | undefined): number | undefined {\n  const values = series?.values ?? [];\n  for (let i = values.length - 1; i >= 0; i--) {\n    const v = values[i]![1];\n    if (v !== null && Number.isFinite(v)) return v;\n  }\n  return undefined;\n}\n\n/**\n * The figure and the one it is set against. A series labelled `compare` (the\n * period before, as the Pulzr and Parkeze datasources label it) is the one\n * set against; the first other series is the figure.\n */\nexport function figureOf(\n  results: Array<{ data?: TimeSeriesData }>,\n  of?: string,\n): { now?: number; before?: number; total?: number } {\n  const series = results.flatMap((r) => r.data?.series ?? []);\n  const compared = (s: TimeSeries): boolean => Boolean(s.labels?.compare);\n  const named = (s: TimeSeries): boolean => of !== undefined && (s.formattedName ?? s.name) === of;\n  return {\n    now: lastValue(series.find((s) => !compared(s) && !named(s))),\n    before: lastValue(\n      series.find((s) => compared(s) && !(of !== undefined && (s.formattedName ?? s.name).startsWith(of))),\n    ),\n    total: of === undefined ? undefined : lastValue(series.find((s) => !compared(s) && named(s))),\n  };\n}\n\nconst TO_MINUTES: Record<string, number> = { seconds: 1 / 60, minutes: 1, hours: 60 };\n\n/**\n * A time in parts, as people say it: 45m, 6h 46m, 7h, and past two days 2d 3h, the minutes being noise there.\n * Undefined for a unit that is not a time.\n */\nexport function timeInParts(value: number, unit: string | undefined): string | undefined {\n  const per = unit ? TO_MINUTES[unit] : undefined;\n  if (per === undefined) return undefined;\n  const minutes = Math.round(value * per);\n  if (minutes < 60) return `${minutes}m`;\n  if (minutes < 48 * 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m ? `${h}h ${m}m` : `${h}h`;\n  }\n  const d = Math.floor(minutes / (24 * 60));\n  const h = Math.round((minutes % (24 * 60)) / 60);\n  return h ? `${d}d ${h}h` : `${d}d`;\n}\n\nexport type Direction = 'up' | 'down' | 'flat';\n\n/** The change from before to now, in percent, and which way: flat within half a percent. */\nexport function changeOf(\n  now: number | undefined,\n  before: number | undefined,\n): { percent: number; direction: Direction } | undefined {\n  if (now === undefined || before === undefined || before <= 0) return undefined;\n  const percent = ((now - before) / before) * 100;\n  let direction: Direction = 'flat';\n  if (percent > 0.5) direction = 'up';\n  else if (percent < -0.5) direction = 'down';\n  return { percent, direction };\n}\n\nconst ARROW: Record<Direction, string> = { up: '↑', down: '↓', flat: '→' };\n\n/** `↓ -47.3% vs last week`. */\nexport function changeText(\n  change: { percent: number; direction: Direction },\n  comparedLabel = 'vs the period before',\n): string {\n  const sign = change.percent > 0 ? '+' : '';\n  return `${ARROW[change.direction]} ${sign}${change.percent.toFixed(1)}% ${comparedLabel}`;\n}\n\n/** The last value of each series not labelled `compare`, by its formatted name. */\nexport function valuesOf(results: Array<{ data?: TimeSeriesData }>): Map<string, number> {\n  const values = new Map<string, number>();\n  for (const s of results.flatMap((r) => r.data?.series ?? [])) {\n    if (s.labels?.compare) continue;\n    const v = lastValue(s);\n    if (v !== undefined) values.set(s.formattedName ?? s.name, v);\n  }\n  return values;\n}\n\n/** A template's `{{name}}` and `{{name|%}}` filled from the series' values; `—` for one with none. */\nexport function fill(template: string, values: Map<string, number>): string {\n  return template.replace(/\\{\\{\\s*([^}|]+?)\\s*(\\|\\s*%\\s*)?\\}\\}/g, (_, name: string, percent?: string) => {\n    const v = values.get(name);\n    if (v === undefined) return '—';\n    return percent ? `${v.toFixed(1)}%` : v.toLocaleString(undefined, { maximumFractionDigits: 1 });\n  });\n}\n\nexport type Tone = 'good' | 'bad' | 'flat';\n\n/** The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. */\nexport function sizeChange(\n  now: number | undefined,\n  before: number | undefined,\n  lowerIsBetter = false,\n): { text: string; tone: Tone } | undefined {\n  if (now === undefined || before === undefined || before === 0) return undefined;\n  const percent = ((now - before) / Math.abs(before)) * 100;\n  if (Math.abs(percent) < 0.05) return { text: '0%', tone: 'flat' };\n  const size = Math.abs(percent) >= 100 ? String(Math.round(Math.abs(percent))) : Math.abs(percent).toFixed(1);\n  const good = lowerIsBetter ? percent < 0 : percent > 0;\n  return { text: `${percent > 0 ? '↑' : '↓'} ${size}%`, tone: good ? 'good' : 'bad' };\n}\n"],"names":["lastValue","series","values","i","length","v","Number","isFinite","undefined","figureOf","results","of","flatMap","r","data","compared","s","Boolean","labels","compare","named","formattedName","name","now","find","before","startsWith","total","TO_MINUTES","seconds","minutes","hours","timeInParts","value","unit","per","Math","round","h","floor","m","d","changeOf","percent","direction","ARROW","up","down","flat","changeText","change","comparedLabel","sign","toFixed","valuesOf","Map","set","fill","template","replace","_","get","toLocaleString","maximumFractionDigits","sizeChange","lowerIsBetter","abs","text","tone","size","String","good"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/figure.ts"],"sourcesContent":["import type { TimeSeries, TimeSeriesData } from '@perses-dev/spec';\n\n/** A series' last value that is a number. */\nexport function lastValue(series: TimeSeries | undefined): number | undefined {\n  const values = series?.values ?? [];\n  for (let i = values.length - 1; i >= 0; i--) {\n    const v = values[i]![1];\n    if (v !== null && Number.isFinite(v)) return v;\n  }\n  return undefined;\n}\n\nconst nameOf = (s: TimeSeries): string => s.formattedName ?? s.name;\nconst compared = (s: TimeSeries): boolean => Boolean(s.labels?.compare);\n\n/** The series compared with the one named: `<name> · previous period`, `<name> · last year`. */\nexport function twinOf(series: TimeSeries[], name: string): TimeSeries | undefined {\n  return series.find((s) => compared(s) && nameOf(s).startsWith(`${name} · `));\n}\n\n/**\n * The figure and the one it is set against. A series labelled `compare` (the period before, as the Pulzr and\n * Parkeze datasources label it) is the one set against; the first other series is the figure, leaving out `of` and\n * the series named in `others` (a sparkline's, the rows'). The period before is the figure's twin by name, or else\n * the first compared series that is not theirs.\n */\nexport function figureOf(\n  results: Array<{ data?: TimeSeriesData }>,\n  of?: string,\n  others: string[] = [],\n): { now?: number; before?: number; total?: number } {\n  const series = results.flatMap((r) => r.data?.series ?? []);\n  const taken = of === undefined ? others : [of, ...others];\n  const figure = series.find((s) => !compared(s) && !taken.includes(nameOf(s)));\n  return {\n    now: lastValue(figure),\n    before: lastValue(\n      (figure && twinOf(series, nameOf(figure))) ??\n        series.find((s) => compared(s) && !taken.some((name) => nameOf(s).startsWith(name))),\n    ),\n    total: of === undefined ? undefined : lastValue(series.find((s) => !compared(s) && nameOf(s) === of)),\n  };\n}\n\n/** The last value of the series named and of its twin, the period before. */\nexport function pairOf(results: Array<{ data?: TimeSeriesData }>, name: string): { now?: number; before?: number } {\n  const series = results.flatMap((r) => r.data?.series ?? []);\n  return {\n    now: lastValue(series.find((s) => !compared(s) && nameOf(s) === name)),\n    before: lastValue(twinOf(series, name)),\n  };\n}\n\n/** Every number over time of the series named, for a sparkline. */\nexport function valuesOver(results: Array<{ data?: TimeSeriesData }>, name: string): number[] {\n  const series = results.flatMap((r) => r.data?.series ?? []).find((s) => !compared(s) && nameOf(s) === name);\n  return (series?.values ?? []).flatMap(([, v]) => (v !== null && Number.isFinite(v) ? [v] : []));\n}\n\nconst TO_MINUTES: Record<string, number> = { seconds: 1 / 60, minutes: 1, hours: 60 };\n\n/**\n * A time in parts, as people say it: 45m, 6h 46m, 7h, and past two days 2d 3h, the minutes being noise there.\n * Undefined for a unit that is not a time.\n */\nexport function timeInParts(value: number, unit: string | undefined): string | undefined {\n  const per = unit ? TO_MINUTES[unit] : undefined;\n  if (per === undefined) return undefined;\n  const minutes = Math.round(value * per);\n  if (minutes < 60) return `${minutes}m`;\n  if (minutes < 48 * 60) {\n    const h = Math.floor(minutes / 60);\n    const m = minutes % 60;\n    return m ? `${h}h ${m}m` : `${h}h`;\n  }\n  const d = Math.floor(minutes / (24 * 60));\n  const h = Math.round((minutes % (24 * 60)) / 60);\n  return h ? `${d}d ${h}h` : `${d}d`;\n}\n\nexport type Direction = 'up' | 'down' | 'flat';\n\n/** The change from before to now, in percent, and which way: flat within half a percent. */\nexport function changeOf(\n  now: number | undefined,\n  before: number | undefined,\n): { percent: number; direction: Direction } | undefined {\n  if (now === undefined || before === undefined || before <= 0) return undefined;\n  const percent = ((now - before) / before) * 100;\n  let direction: Direction = 'flat';\n  if (percent > 0.5) direction = 'up';\n  else if (percent < -0.5) direction = 'down';\n  return { percent, direction };\n}\n\nconst ARROW: Record<Direction, string> = { up: '↑', down: '↓', flat: '→' };\n\n/** `↓ -47.3% vs last week`. */\nexport function changeText(\n  change: { percent: number; direction: Direction },\n  comparedLabel = 'vs the period before',\n): string {\n  const sign = change.percent > 0 ? '+' : '';\n  return `${ARROW[change.direction]} ${sign}${change.percent.toFixed(1)}% ${comparedLabel}`;\n}\n\n/** The last value of each series not labelled `compare`, by its formatted name. */\nexport function valuesOf(results: Array<{ data?: TimeSeriesData }>): Map<string, number> {\n  const values = new Map<string, number>();\n  for (const s of results.flatMap((r) => r.data?.series ?? [])) {\n    if (s.labels?.compare) continue;\n    const v = lastValue(s);\n    if (v !== undefined) values.set(s.formattedName ?? s.name, v);\n  }\n  return values;\n}\n\n/** A template's `{{name}}` and `{{name|%}}` filled from the series' values; `—` for one with none. */\nexport function fill(template: string, values: Map<string, number>): string {\n  return template.replace(/\\{\\{\\s*([^}|]+?)\\s*(\\|\\s*%\\s*)?\\}\\}/g, (_, name: string, percent?: string) => {\n    const v = values.get(name);\n    if (v === undefined) return '—';\n    return percent ? `${v.toFixed(1)}%` : v.toLocaleString(undefined, { maximumFractionDigits: 1 });\n  });\n}\n\nexport type Tone = 'good' | 'bad' | 'flat';\n\n/** A pillar's arrows, for the change as a badge: `↗ 133%`. */\nexport const BADGE_ARROWS: [string, string] = ['↗', '↘'];\n\n/**\n * The change as its size, good or bad news: `↑ 35.8%`, whole past 100%, `0%` within a twentieth of one. `arrows`\n * are the rise's and the fall's.\n */\nexport function sizeChange(\n  now: number | undefined,\n  before: number | undefined,\n  lowerIsBetter = false,\n  arrows: [string, string] = ['↑', '↓'],\n): { text: string; tone: Tone } | undefined {\n  if (now === undefined || before === undefined || before === 0) return undefined;\n  const percent = ((now - before) / Math.abs(before)) * 100;\n  if (Math.abs(percent) < 0.05) return { text: '0%', tone: 'flat' };\n  const size = Math.abs(percent) >= 100 ? String(Math.round(Math.abs(percent))) : Math.abs(percent).toFixed(1);\n  const good = lowerIsBetter ? percent < 0 : percent > 0;\n  return { text: `${percent > 0 ? arrows[0] : arrows[1]} ${size}%`, tone: good ? 'good' : 'bad' };\n}\n"],"names":["lastValue","series","values","i","length","v","Number","isFinite","undefined","nameOf","s","formattedName","name","compared","Boolean","labels","compare","twinOf","find","startsWith","figureOf","results","of","others","flatMap","r","data","taken","figure","includes","now","before","some","total","pairOf","valuesOver","TO_MINUTES","seconds","minutes","hours","timeInParts","value","unit","per","Math","round","h","floor","m","d","changeOf","percent","direction","ARROW","up","down","flat","changeText","change","comparedLabel","sign","toFixed","valuesOf","Map","set","fill","template","replace","_","get","toLocaleString","maximumFractionDigits","BADGE_ARROWS","sizeChange","lowerIsBetter","arrows","abs","text","tone","size","String","good"],"mappings":"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"}

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

@@ -30,9 +30,29 @@ export interface PulzrFigurePanelOptions {
     detail?: string;
     /**
      * How the change reads. `signed` (the default): `↑ +0.7% vs last week`, flat within half a percent. `size`: `↑ 35.8%
-     * vs last week`, whole past 100%, `0%` within a twentieth of one.
+     * vs last week`, whole past 100%, `0%` within a twentieth of one. `badge`: `↗ 133%`, small beside the figure, sized
+     * as `size`, without the compared label, the figure bold as a pillar's.
      */
-    changeStyle?: 'signed' | 'size';
+    changeStyle?: 'signed' | 'size' | 'badge';
+    /** An area under the figure, of every value over time of the series named. `color` is the figure's unless set. */
+    sparkline?: {
+        series: string;
+        color?: string;
+    };
+    /**
+     * A list of figures under the figure (and its sparkline): each the last value of the series named, and its change
+     * as a badge against that series' twin, `<series> · previous period` or `· last year`.
+     */
+    rows?: PulzrFigureRow[];
+}
+export interface PulzrFigureRow {
+    label: string;
+    series: string;
+    format?: FormatOptions;
+    lowerIsBetter?: boolean;
+    timeInParts?: boolean;
+    /** Words after the value, `/ space / day`. */
+    suffix?: string;
 }
 export type PulzrFigurePanelProps = PanelProps<PulzrFigurePanelOptions, TimeSeriesData>;
 //# sourceMappingURL=pulzr-figure-panel-types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"pulzr-figure-panel-types.d.ts","sourceRoot":"","sources":["../../../../src/panels/pulzr-figure-panel/pulzr-figure-panel-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,EAAE,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qHAAqH;IACrH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CACjC;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC"}
+{"version":3,"file":"pulzr-figure-panel-types.d.ts","sourceRoot":"","sources":["../../../../src/panels/pulzr-figure-panel/pulzr-figure-panel-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACtC,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2GAA2G;IAC3G,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+FAA+F;IAC/F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,sGAAsG;IACtG,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,EAAE,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qHAAqH;IACrH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,WAAW,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC1C,kHAAkH;IAClH,SAAS,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,qBAAqB,GAAG,UAAU,CAAC,uBAAuB,EAAE,cAAc,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/pulzr-figure-panel-types.ts"],"sourcesContent":["import type { FormatOptions } from '@perses-dev/components';\nimport type { PanelProps } from '@perses-dev/plugin-system';\nimport type { TimeSeriesData } from '@perses-dev/spec';\n\nexport interface PulzrFigurePanelOptions {\n  format?: FormatOptions;\n  /** The figure's color, any CSS color. The theme's text color unless set. */\n  color?: string;\n  /** What the period compared is called, after the change: `vs last week`. */\n  comparedLabel?: string;\n  /** Shown in place of the change when there is nothing to compare with: `Average for the selected week`. */\n  caption?: string;\n  /** A fall is good news: a fall is drawn in the success color and a rise in the error color. */\n  lowerIsBetter?: boolean;\n  /** A time in parts, as people say it: 6h 46m, not 6.8h. For a format in seconds, minutes or hours. */\n  timeInParts?: boolean;\n  /**\n   * The figure, a rate, as a count of a total beside it: `1690/2639 Spaces Occupied`. `series` names the\n   * series holding the total (the query asks for both); `label` follows.\n   */\n  of?: { series: string; label?: string };\n  /**\n   * A line under the title, from the query's series: `of {{booked_space_hours}} booked hours, occupied`. `{{name}}` is\n   * the series' value, `{{name|%}}` the value as a percent (16.4%).\n   */\n  subtitle?: string;\n  /** A small box under the figure, from the query's series as `subtitle` is: `{{new}} new · {{renewals}} renewals`. */\n  detail?: string;\n  /**\n   * How the change reads. `signed` (the default): `↑ +0.7% vs last week`, flat within half a percent. `size`: `↑ 35.8%\n   * vs last week`, whole past 100%, `0%` within a twentieth of one.\n   */\n  changeStyle?: 'signed' | 'size';\n}\n\nexport type PulzrFigurePanelProps = PanelProps<PulzrFigurePanelOptions, TimeSeriesData>;\n"],"names":[],"mappings":"AAmCA,WAAwF"}
+{"version":3,"sources":["../../../../src/panels/pulzr-figure-panel/pulzr-figure-panel-types.ts"],"sourcesContent":["import type { FormatOptions } from '@perses-dev/components';\nimport type { PanelProps } from '@perses-dev/plugin-system';\nimport type { TimeSeriesData } from '@perses-dev/spec';\n\nexport interface PulzrFigurePanelOptions {\n  format?: FormatOptions;\n  /** The figure's color, any CSS color. The theme's text color unless set. */\n  color?: string;\n  /** What the period compared is called, after the change: `vs last week`. */\n  comparedLabel?: string;\n  /** Shown in place of the change when there is nothing to compare with: `Average for the selected week`. */\n  caption?: string;\n  /** A fall is good news: a fall is drawn in the success color and a rise in the error color. */\n  lowerIsBetter?: boolean;\n  /** A time in parts, as people say it: 6h 46m, not 6.8h. For a format in seconds, minutes or hours. */\n  timeInParts?: boolean;\n  /**\n   * The figure, a rate, as a count of a total beside it: `1690/2639 Spaces Occupied`. `series` names the\n   * series holding the total (the query asks for both); `label` follows.\n   */\n  of?: { series: string; label?: string };\n  /**\n   * A line under the title, from the query's series: `of {{booked_space_hours}} booked hours, occupied`. `{{name}}` is\n   * the series' value, `{{name|%}}` the value as a percent (16.4%).\n   */\n  subtitle?: string;\n  /** A small box under the figure, from the query's series as `subtitle` is: `{{new}} new · {{renewals}} renewals`. */\n  detail?: string;\n  /**\n   * How the change reads. `signed` (the default): `↑ +0.7% vs last week`, flat within half a percent. `size`: `↑ 35.8%\n   * vs last week`, whole past 100%, `0%` within a twentieth of one. `badge`: `↗ 133%`, small beside the figure, sized\n   * as `size`, without the compared label, the figure bold as a pillar's.\n   */\n  changeStyle?: 'signed' | 'size' | 'badge';\n  /** An area under the figure, of every value over time of the series named. `color` is the figure's unless set. */\n  sparkline?: { series: string; color?: string };\n  /**\n   * A list of figures under the figure (and its sparkline): each the last value of the series named, and its change\n   * as a badge against that series' twin, `<series> · previous period` or `· last year`.\n   */\n  rows?: PulzrFigureRow[];\n}\n\nexport interface PulzrFigureRow {\n  label: string;\n  series: string;\n  format?: FormatOptions;\n  lowerIsBetter?: boolean;\n  timeInParts?: boolean;\n  /** Words after the value, `/ space / day`. */\n  suffix?: string;\n}\n\nexport type PulzrFigurePanelProps = PanelProps<PulzrFigurePanelOptions, TimeSeriesData>;\n"],"names":[],"mappings":"AAqDA,WAAwF"}