@perses-dev/components 0.21.1 → 0.23.0

package/dist/StatChart/StatChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -31,7 +31,6 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-const PANEL_PADDING = 32;
 const MIN_VALUE_SIZE = 12;
 const MAX_VALUE_SIZE = 36;
 export function StatChart(props) {
@@ -92,27 +91,37 @@ export function StatChart(props) {
     // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
     const charactersAdjust = formattedValue.length;
     const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    const containerPadding = `${chartsTheme.container.padding.default}px`;
     return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            height: '100%',
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column'
+        },
         children: [
             /*#__PURE__*/ _jsx(Typography, {
                 variant: "h3",
                 sx: (theme)=>({
                         color: theme.palette.text.primary,
-                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`
+                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
+                        padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
-            sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
+            sparkline !== undefined && /*#__PURE__*/ _jsx(Box, {
                 sx: {
-                    width: width + PANEL_PADDING,
-                    height: height,
-                    position: 'absolute',
-                    bottom: 0,
-                    left: 0
+                    flex: 1
                 },
-                option: option,
-                theme: chartsTheme.echartsTheme,
-                renderer: "svg"
+                children: /*#__PURE__*/ _jsx(EChart, {
+                    sx: {
+                        width: '100%',
+                        height: '100%'
+                    },
+                    option: option,
+                    theme: chartsTheme.echartsTheme,
+                    renderer: "svg"
+                })
             })
         ]
     });

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([\n  EChartsGaugeChart,\n  EChartsLineChart,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nconst PANEL_PADDING = 32;\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n  name?: string;\n}\n\ninterface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n\n    const statSeries: Array<GaugeSeriesOption | LineSeriesOption> = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries: LineSeriesOption = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  return (\n    <Box>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: width + PANEL_PADDING, // allows sparkline to extend to edge of panel\n            height: height,\n            position: 'absolute',\n            bottom: 0,\n            left: 0,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n"],"names":["React","useMemo","Box","Typography","merge","use","GaugeChart","EChartsGaugeChart","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PANEL_PADDING","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","variant","sx","theme","color","palette","text","primary","fontSize","position","echartsTheme","renderer"],"mappings":"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"}
+{"version":3,"sources":["../../src/StatChart/StatChart.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo } from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { merge } from 'lodash-es';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { LineChart as EChartsLineChart, LineSeriesOption } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\n\nuse([\n  EChartsGaugeChart,\n  EChartsLineChart,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nconst MIN_VALUE_SIZE = 12;\nconst MAX_VALUE_SIZE = 36;\n\nexport interface StatChartData {\n  calculatedValue?: number;\n  seriesData?: GraphSeries;\n  name?: string;\n}\n\ninterface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  unit: UnitOptions;\n  sparkline?: LineSeriesOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, unit, sparkline } = props;\n  const chartsTheme = useChartsTheme();\n\n  const formattedValue = data.calculatedValue === undefined ? '' : formatValue(data.calculatedValue, unit);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n\n    const statSeries: Array<GaugeSeriesOption | LineSeriesOption> = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries: LineSeriesOption = {\n        type: 'line',\n        data: [...series.values],\n        zlevel: 1,\n        symbol: 'none',\n        animation: false,\n        silent: true,\n      };\n      const mergedSeries = merge(lineSeries, sparkline);\n      statSeries.push(mergedSeries);\n    }\n\n    const option = {\n      title: {\n        show: false,\n      },\n      grid: {\n        show: false,\n        top: '35%', // adds space above sparkline\n        right: 0,\n        bottom: 0,\n        left: 0,\n        containLabel: false,\n      },\n      xAxis: {\n        type: 'time',\n        show: false,\n        boundaryGap: false,\n      },\n      yAxis: {\n        type: 'value',\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const isLargePanel = width > 250 && height > 180;\n  // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute\n  const charactersAdjust = formattedValue.length;\n  const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;\n\n  const containerPadding = `${chartsTheme.container.padding.default}px`;\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>\n      <Typography\n        variant=\"h3\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n          fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,\n          padding: `${containerPadding} ${containerPadding} 0 ${containerPadding}`,\n        })}\n      >\n        {formattedValue}\n      </Typography>\n      {sparkline !== undefined && (\n        <Box sx={{ flex: 1 }}>\n          <EChart\n            sx={{\n              width: '100%',\n              height: '100%',\n            }}\n            option={option}\n            theme={chartsTheme.echartsTheme}\n            renderer=\"svg\"\n          />\n        </Box>\n      )}\n    </Box>\n  );\n}\n"],"names":["React","useMemo","Box","Typography","merge","use","GaugeChart","EChartsGaugeChart","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","MIN_VALUE_SIZE","MAX_VALUE_SIZE","StatChart","props","width","height","data","unit","sparkline","chartsTheme","formattedValue","calculatedValue","undefined","option","seriesData","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","tooltip","isLargePanel","charactersAdjust","length","valueSize","Math","min","containerPadding","container","padding","default","sx","display","flexDirection","variant","theme","color","palette","text","primary","fontSize","flex","echartsTheme","renderer"],"mappings":"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"}

package/dist/StatChart/StatChart.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/StatChart/StatChart.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const renderChart = (unit: UnitOptions) => {\n    const contentDimensions = {\n      width: 200,\n      height: 200,\n    };\n    render(\n      <ChartsThemeProvider chartsTheme={testChartsTheme}>\n        <StatChart width={contentDimensions.width} height={contentDimensions.height} data={mockStatData} unit={unit} />\n      </ChartsThemeProvider>\n    );\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  it('render default options (no sparkline)', () => {\n    const unit: UnitOptions = {\n      kind: 'Decimal',\n      decimal_places: 2,\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73')).toBeInTheDocument();\n  });\n\n  it('show value with bytes unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Bytes',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 bytes')).toBeInTheDocument();\n  });\n\n  it('show value with seconds time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Seconds',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 seconds')).toBeInTheDocument();\n  });\n\n  it('show value with months time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Months',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 months')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","renderChart","unit","contentDimensions","width","height","chartsTheme","data","mockStatData","calculatedValue","name","seriesData","values","it","kind","decimal_places","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,WAAW,GAAG,CAACC,IAAiB,GAAK;QACzC,MAAMC,iBAAiB,GAAG;YACxBC,KAAK,EAAE,GAAG;YACVC,MAAM,EAAE,GAAG;SACZ,AAAC;QACFV,MAAM,eACJ,KAACE,mBAAmB;YAACS,WAAW,EAAER,eAAe;sBAC/C,cAAA,KAACC,SAAS;gBAACK,KAAK,EAAED,iBAAiB,CAACC,KAAK;gBAAEC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;gBAAEE,IAAI,EAAEC,YAAY;gBAAEN,IAAI,EAAEA,IAAI;cAAI;UAC3F,CACvB,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;YACfC,cAAc,EAAE,CAAC;SAClB,AAAC;QACFd,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,OAAO;SACd,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,YAAY,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,8CAA8C,EAAE,IAAM;QACvD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;SAChB,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,cAAc,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,6CAA6C,EAAE,IAAM;QACtD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,QAAQ;SACf,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/StatChart/StatChart.test.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport { ChartsThemeProvider } from '../context/ChartsThemeProvider';\nimport { UnitOptions } from '../model';\nimport { testChartsTheme } from '../test-utils';\nimport { StatChart, StatChartData } from './StatChart';\n\ndescribe('StatChart', () => {\n  const renderChart = (unit: UnitOptions) => {\n    const contentDimensions = {\n      width: 200,\n      height: 200,\n    };\n    render(\n      <ChartsThemeProvider chartsTheme={testChartsTheme}>\n        <StatChart width={contentDimensions.width} height={contentDimensions.height} data={mockStatData} unit={unit} />\n      </ChartsThemeProvider>\n    );\n  };\n\n  const mockStatData: StatChartData = {\n    calculatedValue: 7.72931659687181,\n    name: 'Example Stat Chart',\n    seriesData: {\n      name: '(((count(count(node_cpu_seconds_total{job=\"example\"}) by (cpu))',\n      values: [\n        [1654006170000, 7.736401673473903],\n        [1654006185000, 7.733891213538757],\n        [1654006200000, 7.731101813010433],\n        [1654006215000, 7.722454672079215],\n        [1654006230000, 7.722733612256738],\n      ],\n    },\n  };\n\n  it('render default options (no sparkline)', () => {\n    const unit: UnitOptions = {\n      kind: 'Decimal',\n      decimal_places: 2,\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73')).toBeInTheDocument();\n  });\n\n  it('show value with bytes unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Bytes',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 bytes')).toBeInTheDocument();\n  });\n\n  it('show value with seconds time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Seconds',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 seconds')).toBeInTheDocument();\n  });\n\n  it('show value with months time unit formatting', () => {\n    const unit: UnitOptions = {\n      kind: 'Months',\n    };\n    renderChart(unit);\n    expect(screen.getByText('7.73 months')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","ChartsThemeProvider","testChartsTheme","StatChart","describe","renderChart","unit","contentDimensions","width","height","chartsTheme","data","mockStatData","calculatedValue","name","seriesData","values","it","kind","decimal_places","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,SAASC,mBAAmB,QAAQ,gCAAgC,CAAC;AAErE,SAASC,eAAe,QAAQ,eAAe,CAAC;AAChD,SAASC,SAAS,QAAuB,aAAa,CAAC;AAEvDC,QAAQ,CAAC,WAAW,EAAE,IAAM;IAC1B,MAAMC,WAAW,GAAG,CAACC,IAAiB,GAAK;QACzC,MAAMC,iBAAiB,GAAG;YACxBC,KAAK,EAAE,GAAG;YACVC,MAAM,EAAE,GAAG;SACZ,AAAC;QACFV,MAAM,eACJ,KAACE,mBAAmB;YAACS,WAAW,EAAER,eAAe;sBAC/C,cAAA,KAACC,SAAS;gBAACK,KAAK,EAAED,iBAAiB,CAACC,KAAK;gBAAEC,MAAM,EAAEF,iBAAiB,CAACE,MAAM;gBAAEE,IAAI,EAAEC,YAAY;gBAAEN,IAAI,EAAEA,IAAI;cAAI;UAC3F,CACvB,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMM,YAAY,GAAkB;QAClCC,eAAe,EAAE,gBAAgB;QACjCC,IAAI,EAAE,oBAAoB;QAC1BC,UAAU,EAAE;YACVD,IAAI,EAAE,iEAAiE;YACvEE,MAAM,EAAE;gBACN;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;gBAClC;AAAC,iCAAa;AAAE,qCAAiB;iBAAC;aACnC;SACF;KACF,AAAC;IAEFC,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;YACfC,cAAc,EAAE,CAAC;SAClB,AAAC;QACFd,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,MAAM,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACvD,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,uCAAuC,EAAE,IAAM;QAChD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,OAAO;SACd,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,YAAY,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,8CAA8C,EAAE,IAAM;QACvD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,SAAS;SAChB,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,cAAc,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEHL,EAAE,CAAC,6CAA6C,EAAE,IAAM;QACtD,MAAMX,IAAI,GAAgB;YACxBY,IAAI,EAAE,QAAQ;SACf,AAAC;QACFb,WAAW,CAACC,IAAI,CAAC,CAAC;QAClBc,MAAM,CAACpB,MAAM,CAACqB,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/StatChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/StatChart/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/index.ts"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './StatChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}
+{"version":3,"sources":["../../src/StatChart/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './StatChart';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,aAAa,CAAC"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesInfo.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface SeriesInfoProps {
+export interface SeriesInfoProps {
     seriesName: string;
     y: number;
     formattedY: string;
@@ -8,5 +8,4 @@ interface SeriesInfoProps {
     wrapLabels?: boolean;
 }
 export declare function SeriesInfo(props: SeriesInfoProps): JSX.Element;
-export {};
 //# sourceMappingURL=SeriesInfo.d.ts.map

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAkBA,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAuEhD"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -0,0 +1,89 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import { SeriesMarker } from './SeriesMarker';
+import { SeriesLabelsStack } from './SeriesLabelsStack';
+import { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';
+export function SeriesInfo(props) {
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    // metric __name__ comes before opening curly brace, ignore if not populated
+    // ex with metric name: node_load15{env="demo",job="node"}
+    // ex without metric name: {env="demo",job="node"}
+    const splitName = seriesName.split('{');
+    var ref;
+    const seriesLabels = (ref = splitName[1]) !== null && ref !== void 0 ? ref : seriesName;
+    // remove curly braces that wrap labels
+    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
+    // determine whether to show labels on separate lines
+    const splitLabels = formattedSeriesLabels.split(',');
+    if (totalSeries === 1 && splitLabels.length > 1) {
+        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
+        return /*#__PURE__*/ _jsx(SeriesLabelsStack, {
+            formattedY: formattedY,
+            metricName: metricName,
+            metricLabels: splitLabels,
+            markerColor: markerColor
+        });
+    }
+    // add space after commas when more than one focused series
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            display: 'table-row',
+            paddingTop: 0.5
+        },
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.5
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        component: "span",
+                        sx: (theme)=>({
+                                display: 'inline-block',
+                                width: 'calc(100% - 20px)',
+                                minWidth: 150,
+                                maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
+                                overflow: 'hidden',
+                                color: theme.palette.common.white,
+                                textOverflow: 'ellipsis',
+                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
+                            }),
+                        children: inlineSeriesLabels
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'table-cell',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top',
+                    fontWeight: '700'
+                },
+                children: formattedY
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SeriesInfo.js.map

package/dist/TimeSeriesTooltip/SeriesInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { TOOLTIP_LABELS_MAX_WIDTH } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps) {\n  const { seriesName, formattedY, markerColor, totalSeries, wrapLabels } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas when more than one focused series\n  const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n        >\n          {inlineSeriesLabels}\n        </Box>\n      </Box>\n      <Box\n        sx={{\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: '700',\n        }}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesMarker","SeriesLabelsStack","TOOLTIP_LABELS_MAX_WIDTH","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","inlineSeriesLabels","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","textOverflow","whiteSpace","paddingLeft","textAlign","verticalAlign","fontWeight"],"mappings":"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"}

package/dist/TimeSeriesTooltip/SeriesInfo.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SeriesInfo.test.d.ts.map

package/dist/TimeSeriesTooltip/SeriesInfo.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesInfo.test.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.test.tsx"],"names":[],"mappings":""}

package/dist/TimeSeriesTooltip/SeriesInfo.test.js

@@ -0,0 +1,52 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { screen } from '@testing-library/dom';
+import { SeriesInfo } from './SeriesInfo';
+describe('SeriesInfo', ()=>{
+    const renderComponent = (props)=>{
+        render(/*#__PURE__*/ _jsx(SeriesInfo, {
+            ...props
+        }));
+    };
+    it('render metric __name__ beside formattedY value', ()=>{
+        const seriesInfo = {
+            seriesName: 'node_load1{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
+            y: 0.28,
+            formattedY: '28.0%',
+            markerColor: 'hsla(1016196180,50%,50%,0.8)',
+            totalSeries: 1,
+            wrapLabels: true
+        };
+        renderComponent(seriesInfo);
+        expect(screen.getByText('node_load1:')).toBeInTheDocument();
+        expect(screen.getByText('28.0%')).toBeInTheDocument();
+        expect(screen.getByText('demo.do.prometheus.io:9100')).toBeInTheDocument(); // TODO: remove quotes
+    });
+    it('render preformatted series name beside formattedY value', ()=>{
+        const seriesInfo = {
+            seriesName: 'Node memory total',
+            y: 552341504,
+            formattedY: '526.75 MB',
+            markerColor: 'hsla(-1756459732,50%,50%,0.8)',
+            totalSeries: 2,
+            wrapLabels: true
+        };
+        renderComponent(seriesInfo);
+        expect(screen.getByText('Node memory total')).toBeInTheDocument();
+        expect(screen.getByText('526.75 MB')).toBeInTheDocument();
+    });
+});
+
+//# sourceMappingURL=SeriesInfo.test.js.map

package/dist/TimeSeriesTooltip/SeriesInfo.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.test.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render } from '@testing-library/react';\nimport { screen } from '@testing-library/dom';\nimport { SeriesInfo, SeriesInfoProps } from './SeriesInfo';\n\ndescribe('SeriesInfo', () => {\n  const renderComponent = (props: SeriesInfoProps) => {\n    render(<SeriesInfo {...props} />);\n  };\n\n  it('render metric __name__ beside formattedY value', () => {\n    const seriesInfo: SeriesInfoProps = {\n      seriesName: 'node_load1{env=\"demo\",instance=\"demo.do.prometheus.io:9100\",job=\"node\"}',\n      y: 0.28,\n      formattedY: '28.0%',\n      markerColor: 'hsla(1016196180,50%,50%,0.8)',\n      totalSeries: 1,\n      wrapLabels: true,\n    };\n    renderComponent(seriesInfo);\n    expect(screen.getByText('node_load1:')).toBeInTheDocument();\n    expect(screen.getByText('28.0%')).toBeInTheDocument();\n    expect(screen.getByText('demo.do.prometheus.io:9100')).toBeInTheDocument(); // TODO: remove quotes\n  });\n\n  it('render preformatted series name beside formattedY value', () => {\n    const seriesInfo: SeriesInfoProps = {\n      seriesName: 'Node memory total',\n      y: 552341504,\n      formattedY: '526.75 MB',\n      markerColor: 'hsla(-1756459732,50%,50%,0.8)',\n      totalSeries: 2,\n      wrapLabels: true,\n    };\n    renderComponent(seriesInfo);\n    expect(screen.getByText('Node memory total')).toBeInTheDocument();\n    expect(screen.getByText('526.75 MB')).toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","SeriesInfo","describe","renderComponent","props","it","seriesInfo","seriesName","y","formattedY","markerColor","totalSeries","wrapLabels","expect","getByText","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,MAAM,QAAQ,sBAAsB,CAAC;AAC9C,SAASC,UAAU,QAAyB,cAAc,CAAC;AAE3DC,QAAQ,CAAC,YAAY,EAAE,IAAM;IAC3B,MAAMC,eAAe,GAAG,CAACC,KAAsB,GAAK;QAClDL,MAAM,eAAC,KAACE,UAAU;YAAE,GAAGG,KAAK;UAAI,CAAC,CAAC;IACpC,CAAC,AAAC;IAEFC,EAAE,CAAC,gDAAgD,EAAE,IAAM;QACzD,MAAMC,UAAU,GAAoB;YAClCC,UAAU,EAAE,yEAAyE;YACrFC,CAAC,EAAE,IAAI;YACPC,UAAU,EAAE,OAAO;YACnBC,WAAW,EAAE,8BAA8B;YAC3CC,WAAW,EAAE,CAAC;YACdC,UAAU,EAAE,IAAI;SACjB,AAAC;QACFT,eAAe,CAACG,UAAU,CAAC,CAAC;QAC5BO,MAAM,CAACb,MAAM,CAACc,SAAS,CAAC,aAAa,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QAC5DF,MAAM,CAACb,MAAM,CAACc,SAAS,CAAC,OAAO,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QACtDF,MAAM,CAACb,MAAM,CAACc,SAAS,CAAC,4BAA4B,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC,CAAC,sBAAsB;IACpG,CAAC,CAAC,CAAC;IAEHV,EAAE,CAAC,yDAAyD,EAAE,IAAM;QAClE,MAAMC,UAAU,GAAoB;YAClCC,UAAU,EAAE,mBAAmB;YAC/BC,CAAC,EAAE,SAAS;YACZC,UAAU,EAAE,WAAW;YACvBC,WAAW,EAAE,+BAA+B;YAC5CC,WAAW,EAAE,CAAC;YACdC,UAAU,EAAE,IAAI;SACjB,AAAC;QACFT,eAAe,CAACG,UAAU,CAAC,CAAC;QAC5BO,MAAM,CAACb,MAAM,CAACc,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QAClEF,MAAM,CAACb,MAAM,CAACc,SAAS,CAAC,WAAW,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface SeriesLabelsStackProps {
+    formattedY: string;
+    metricName: string;
+    metricLabels: string[];
+    markerColor: string;
+}
+export declare function SeriesLabelsStack(props: SeriesLabelsStackProps): JSX.Element;
+//# sourceMappingURL=SeriesLabelsStack.d.ts.map

package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesLabelsStack.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAiE9D"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -0,0 +1,99 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Divider, Stack, Typography } from '@mui/material';
+import { SeriesMarker } from './SeriesMarker';
+export function SeriesLabelsStack(props) {
+    const { formattedY , markerColor , metricName , metricLabels  } = props;
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: (theme)=>({
+                        display: 'flex',
+                        height: '16px',
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'left',
+                        color: theme.palette.common.white,
+                        fontSize: '11px'
+                    }),
+                children: [
+                    /*#__PURE__*/ _jsx(SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.25
+                        }
+                    }),
+                    /*#__PURE__*/ _jsxs(Box, {
+                        component: "span",
+                        children: [
+                            metricName,
+                            /*#__PURE__*/ _jsx(Box, {
+                                component: "span",
+                                sx: (theme)=>({
+                                        color: theme.palette.common.white,
+                                        fontWeight: 700,
+                                        paddingLeft: '2px'
+                                    }),
+                                children: formattedY
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Divider, {
+                sx: (theme)=>({
+                        borderColor: theme.palette.grey['500']
+                    })
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: (theme)=>({
+                        color: theme.palette.common.white
+                    }),
+                children: metricLabels.map((label)=>{
+                    // show labels on separate lines when many labels and only one focused series
+                    if (label) {
+                        const [name, value] = label.split('=');
+                        const formattedName = value !== undefined ? `${name}: ` : name;
+                        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            sx: {
+                                display: 'flex',
+                                gap: '4px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    sx: {
+                                        fontSize: '11px'
+                                    },
+                                    children: formattedName
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    sx: (theme)=>({
+                                            color: theme.palette.common.white,
+                                            fontWeight: 700,
+                                            fontSize: '11px'
+                                        }),
+                                    children: formattedValue
+                                })
+                            ]
+                        }, label);
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SeriesLabelsStack.js.map

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { SeriesMarker } from './SeriesMarker';\n\nexport interface SeriesLabelsStackProps {\n  formattedY: string;\n  metricName: string;\n  metricLabels: string[];\n  markerColor: string;\n}\n\nexport function SeriesLabelsStack(props: SeriesLabelsStackProps) {\n  const { formattedY, markerColor, metricName, metricLabels } = props;\n  return (\n    <Stack spacing={0.5}>\n      <Box\n        sx={(theme) => ({\n          display: 'flex',\n          height: '16px',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'left',\n          color: theme.palette.common.white,\n          fontSize: '11px',\n        })}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.25 }} />\n        <Box component=\"span\">\n          {metricName}\n          <Box\n            component=\"span\"\n            sx={(theme) => ({\n              color: theme.palette.common.white,\n              fontWeight: 700,\n              paddingLeft: '2px',\n            })}\n          >\n            {formattedY}\n          </Box>\n        </Box>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={(theme) => ({\n          color: theme.palette.common.white,\n        })}\n      >\n        {metricLabels.map((label) => {\n          // show labels on separate lines when many labels and only one focused series\n          if (label) {\n            const [name, value] = label.split('=');\n            const formattedName = value !== undefined ? `${name}: ` : name;\n            const formattedValue = value !== undefined ? value.replace(/(^\"|\"$)/g, '') : value;\n            return (\n              <Box key={label} sx={{ display: 'flex', gap: '4px' }}>\n                <Typography sx={{ fontSize: '11px' }}>{formattedName}</Typography>\n                <Typography\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                    fontWeight: 700,\n                    fontSize: '11px',\n                  })}\n                >\n                  {formattedValue}\n                </Typography>\n              </Box>\n            );\n          }\n        })}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker","SeriesLabelsStack","props","formattedY","markerColor","metricName","metricLabels","spacing","sx","theme","display","height","flexDirection","alignItems","justifyContent","color","palette","common","white","fontSize","marginTop","component","fontWeight","paddingLeft","borderColor","grey","map","label","name","value","split","formattedName","undefined","formattedValue","replace","gap"],"mappings":"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"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesMarker.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-interface SeriesMarkerProps {
+import { BoxProps } from '@mui/material';
+interface SeriesMarkerProps extends BoxProps<'div'> {
     markerColor: string;
 }
 export declare function SeriesMarker(props: SeriesMarkerProps): JSX.Element;

package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeriesMarker.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAG9C,UAAU,iBAAkB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,eAkBpD"}

package/dist/{Tooltip → TimeSeriesTooltip}/SeriesMarker.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,18 +12,18 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { combineSx } from '../utils';
 export function SeriesMarker(props) {
-    const { markerColor  } = props;
+    const { markerColor , sx  } = props;
     return /*#__PURE__*/ _jsx(Box, {
-        sx: {
+        sx: combineSx({
             display: 'inline-block',
-            width: '12px',
+            width: '11px',
+            height: '11px',
             borderRadius: '2px',
-            height: '12px',
-            marginTop: 0.25,
             marginRight: 1,
             verticalAlign: 'top'
-        },
+        }, sx),
         style: {
             backgroundColor: markerColor
         }

package/dist/TimeSeriesTooltip/SeriesMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps) {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx","SeriesMarker","props","markerColor","sx","display","width","height","borderRadius","marginRight","verticalAlign","style","backgroundColor"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,SAAS,QAAQ,UAAU,CAAC;AAMrC,OAAO,SAASC,YAAY,CAACC,KAAwB,EAAE;IACrD,MAAM,EAAEC,WAAW,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGF,KAAK,AAAC;IAClC,qBACE,KAACH,GAAG;QACFK,EAAE,EAAEJ,SAAS,CACX;YACEK,OAAO,EAAE,cAAc;YACvBC,KAAK,EAAE,MAAM;YACbC,MAAM,EAAE,MAAM;YACdC,YAAY,EAAE,KAAK;YACnBC,WAAW,EAAE,CAAC;YACdC,aAAa,EAAE,KAAK;SACrB,EACDN,EAAE,CACH;QACDO,KAAK,EAAE;YAAEC,eAAe,EAAET,WAAW;SAAE;MAClC,CACP;AACJ,CAAC"}

package/dist/{Tooltip/Tooltip.d.ts → TimeSeriesTooltip/TimeSeriesTooltip.d.ts}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { EChartsDataFormat, UnitOptions } from '../model';
-interface TooltipProps {
+interface TimeSeriesTooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
     chartData: EChartsDataFormat;
     pinTooltip: boolean;
     wrapLabels?: boolean;
     unit?: UnitOptions;
 }
-declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
-export { Tooltip };
-//# sourceMappingURL=Tooltip.d.ts.map
+export declare const TimeSeriesTooltip: React.NamedExoticComponent<TimeSeriesTooltipProps>;
+export {};
+//# sourceMappingURL=TimeSeriesTooltip.d.ts.map

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM1D,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oDA2D5B,CAAC"}

package/dist/{Tooltip/Tooltip.js → TimeSeriesTooltip/TimeSeriesTooltip.js}

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,7 +17,7 @@ import { getFocusedSeriesData } from './focused-series';
 import { TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';
 import { TooltipContent } from './TooltipContent';
 import { assembleTransform } from './utils';
-const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+export const TimeSeriesTooltip = /*#__PURE__*/ React.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
     const [pinnedPos, setPinnedPos] = useState(null);
     const mousePos = useMousePosition();
     if (mousePos === null || mousePos.target === null) return null;
@@ -67,6 +67,5 @@ const Tooltip = /*#__PURE__*/ React.memo(function Tooltip({ chartRef , chartData
         })
     });
 });
-export { Tooltip };
 
-//# sourceMappingURL=Tooltip.js.map
+//# sourceMappingURL=TimeSeriesTooltip.js.map

package/dist/TimeSeriesTooltip/TimeSeriesTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeSeriesTooltip.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useState } from 'react';\nimport { Box, Portal } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { EChartsDataFormat, UnitOptions } from '../model';\nimport { getFocusedSeriesData } from './focused-series';\nimport { CursorCoordinates, TOOLTIP_MAX_HEIGHT, TOOLTIP_MAX_WIDTH, useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { assembleTransform } from './utils';\n\ninterface TimeSeriesTooltipProps {\n  chartRef: React.MutableRefObject<EChartsInstance | undefined>;\n  chartData: EChartsDataFormat;\n  pinTooltip: boolean;\n  wrapLabels?: boolean;\n  unit?: UnitOptions;\n}\n\nexport const TimeSeriesTooltip = React.memo(function TimeSeriesTooltip({\n  chartRef,\n  chartData,\n  wrapLabels,\n  pinTooltip,\n  unit,\n}: TimeSeriesTooltipProps) {\n  const [pinnedPos, setPinnedPos] = useState<CursorCoordinates | null>(null);\n  const mousePos = useMousePosition();\n\n  if (mousePos === null || mousePos.target === null) return null;\n\n  // ensure user is hovering over a chart before checking for nearby series\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n  const focusedSeries = getFocusedSeriesData(mousePos, chartData, pinnedPos, chart, unit);\n  const chartWidth = chart?.getWidth() ?? 750;\n  const chartHeight = chart?.getHeight() ?? 230;\n  const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);\n\n  if (focusedSeries.length === 0) {\n    return null;\n  }\n\n  if (pinTooltip === true && pinnedPos === null) {\n    setPinnedPos(mousePos);\n  }\n\n  return (\n    <Portal>\n      <Box\n        sx={(theme) => ({\n          maxWidth: TOOLTIP_MAX_WIDTH,\n          maxHeight: TOOLTIP_MAX_HEIGHT,\n          position: 'absolute',\n          top: 0,\n          left: 0,\n          backgroundColor: '#2E313E', // TODO: use colors from theme, separate styles for dark mode\n          borderRadius: '6px',\n          color: '#fff',\n          fontSize: '11px',\n          visibility: 'visible',\n          opacity: 1,\n          transition: 'all 0.1s ease-out',\n          zIndex: theme.zIndex.tooltip,\n          overflow: 'hidden',\n          '&:hover': {\n            overflowY: 'auto',\n          },\n        })}\n        style={{\n          transform: cursorTransform,\n        }}\n      >\n        <TooltipContent focusedSeries={focusedSeries} wrapLabels={wrapLabels} />\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["React","useState","Box","Portal","getFocusedSeriesData","TOOLTIP_MAX_HEIGHT","TOOLTIP_MAX_WIDTH","useMousePosition","TooltipContent","assembleTransform","TimeSeriesTooltip","memo","chartRef","chartData","wrapLabels","pinTooltip","unit","pinnedPos","setPinnedPos","mousePos","target","tagName","chart","current","focusedSeries","chartWidth","getWidth","chartHeight","getHeight","cursorTransform","length","sx","theme","maxWidth","maxHeight","position","top","left","backgroundColor","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY","style","transform"],"mappings":"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"}

package/dist/{Tooltip → TimeSeriesTooltip}/TooltipContent.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { FocusedSeriesArray } from './focused-series';
-interface TooltipContentProps {
+export interface TooltipContentProps {
     focusedSeries: FocusedSeriesArray | null;
     wrapLabels?: boolean;
 }
 export declare function TooltipContent(props: TooltipContentProps): JSX.Element;
-export {};
 //# sourceMappingURL=TooltipContent.d.ts.map