@perses-dev/components 0.0.0-snapshot-embed-import-errors-8906900 → 0.0.0-snapshot-datasource-browser-test-28cbb71

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAGtD,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,eAqExD"}

package/dist/{Tooltip → TimeSeriesTooltip}/TooltipContent.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/TimeSeriesTooltip/TooltipContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const date = new Date(timeString);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeString","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"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,OAAO,QAAQ,OAAO,CAAC;AAChC,SAASC,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAChE,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAE1D,SAASC,UAAU,QAAQ,cAAc,CAAC;AAO1C,OAAO,SAASC,cAAc,CAACC,KAA0B,EAAE;IACzD,MAAM,EAAEC,aAAa,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC5C,MAAM,EAAEG,sBAAsB,CAAA,EAAE,GAAGN,WAAW,EAAE,AAAC;IAEjD,MAAMO,UAAU,GAAGH,aAAa,IAAIA,aAAa,CAAC,CAAC,CAAC,IAAIA,aAAa,CAAC,CAAC,CAAC,CAACI,IAAI,GAAGJ,aAAa,CAAC,CAAC,CAAC,CAACI,IAAI,GAAG,IAAI,AAAC;IAE7G,MAAMC,sBAAsB,GAAG,CAACC,UAAkB,GAAK;QACrD,MAAMF,IAAI,GAAG,IAAIG,IAAI,CAACD,UAAU,CAAC,AAAC;QAClC,MAAME,aAAa,GAAGN,sBAAsB,CAACE,IAAI,EAAE,iBAAiB,CAAC,AAAC;QACtE,MAAMK,aAAa,GAAGP,sBAAsB,CAACE,IAAI,EAAE,UAAU,CAAC,AAAC;QAE/D,qBACE;;8BACE,KAACT,UAAU;oBACTe,OAAO,EAAC,SAAS;oBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,MAAM,CAACC,KAAK;yBAClC,CAAA,AAAC;8BAEDR,aAAa;kBACH;8BACb,KAACb,UAAU;oBAACe,OAAO,EAAC,SAAS;8BAC3B,cAAA,KAACO,QAAM;kCAAER,aAAa;sBAAU;kBACrB;;UACZ,CACH;IACJ,CAAC,AAAC;IAEF,MAAMS,mBAAmB,GAAG3B,OAAO,CAAC,IAAM;QACxC,IAAIS,aAAa,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;QACxC,OAAOA,aAAa,CAACmB,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC,GAAMD,CAAC,CAACE,CAAC,GAAGD,CAAC,CAACC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,AAAC,CAAC,CAAC;IAC5D,CAAC,EAAE;QAACtB,aAAa;KAAC,CAAC,AAAC;IAEpB,IAAIkB,mBAAmB,KAAK,IAAI,IAAIf,UAAU,KAAK,IAAI,EAAE;QACvD,qBACE,MAACT,KAAK;YAAC6B,EAAE,EAAE,CAAC;YAAEC,EAAE,EAAE,GAAG;YAAEC,OAAO,EAAE,GAAG;;8BACjC,KAAC9B,UAAU;oBAACe,OAAO,EAAC,SAAS;8BAAEL,sBAAsB,CAACF,UAAU,CAAC;kBAAc;8BAC/E,KAACV,OAAO;oBACNkB,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;4BACdc,WAAW,EAAEd,KAAK,CAACE,OAAO,CAACa,IAAI,CAAC,KAAK,CAAC;yBACvC,CAAA,AAAC;kBACF;8BACF,KAACnC,GAAG;oBACFmB,EAAE,EAAE;wBACFiB,OAAO,EAAE,OAAO;qBACjB;8BAEAV,mBAAmB,CAACW,GAAG,CAAC,CAAC,EAAEC,QAAQ,CAAA,EAAEC,SAAS,CAAA,EAAEC,UAAU,CAAA,EAAEV,CAAC,CAAA,EAAEW,UAAU,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAK;wBAC5F,IAAIJ,QAAQ,KAAK,IAAI,IAAIC,SAAS,KAAK,IAAI,EAAE,OAAO,IAAI,CAAC;wBACzD,MAAMI,GAAG,GAAGJ,SAAS,CAACK,QAAQ,EAAE,GAAGN,QAAQ,CAACM,QAAQ,EAAE,AAAC;wBAEvD,qBACE,KAACvC,UAAU;4BAETmC,UAAU,EAAEA,UAAU;4BACtBV,CAAC,EAAEA,CAAC;4BACJW,UAAU,EAAEA,UAAU;4BACtBC,WAAW,EAAEA,WAAW;4BACxBG,WAAW,EAAEnB,mBAAmB,CAACoB,MAAM;4BACvCrC,UAAU,EAAEA,UAAU;2BANjBkC,GAAG,CAOR,CACF;oBACJ,CAAC,CAAC;kBACE;;UACA,CACR;IACJ,OAAO;QACL,qBAAO,mBAAK,CAAC;IACf,CAAC;AACH,CAAC"}

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

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

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

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

package/dist/TimeSeriesTooltip/TooltipContent.test.js

@@ -0,0 +1,78 @@
+// 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 { TooltipContent } from './TooltipContent';
+describe('TooltipContent', ()=>{
+    const renderComponent = (props)=>{
+        render(/*#__PURE__*/ _jsx(TooltipContent, {
+            ...props
+        }));
+    };
+    it('render tooltip content with a single series name', ()=>{
+        const tooltipContent = {
+            focusedSeries: [
+                {
+                    seriesIdx: 0,
+                    datumIdx: 84,
+                    seriesName: 'Test node demo.do.prometheus.io:9100',
+                    date: 'Dec 23, 2022, 1:53:00 PM',
+                    x: 1671821580000,
+                    y: 0.1,
+                    formattedY: '0.1',
+                    markerColor: 'hsla(19838016,50%,50%,0.8)'
+                }
+            ],
+            wrapLabels: true
+        };
+        renderComponent(tooltipContent);
+        expect(screen.getByText('Test node demo.do.prometheus.io:9100')).toBeInTheDocument();
+        expect(screen.getByText('Dec 23, 2022 -')).toBeInTheDocument();
+        expect(screen.getByText('13:53:00')).toBeInTheDocument();
+        expect(screen.getByText('0.1')).toBeInTheDocument();
+    });
+    it('render tooltip content with multiple series data', ()=>{
+        const tooltipContent = {
+            focusedSeries: [
+                {
+                    seriesIdx: 2,
+                    datumIdx: 48,
+                    seriesName: 'node_memory_MemFree_bytes{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
+                    date: 'Dec 23, 2022, 1:44:00 PM',
+                    x: 1671821040000,
+                    y: 84635648,
+                    formattedY: '84.64M',
+                    markerColor: 'hsla(1887856572,50%,50%,0.8)'
+                },
+                {
+                    seriesIdx: 1,
+                    datumIdx: 48,
+                    seriesName: 'node_memory_Buffers_bytes{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
+                    date: 'Dec 23, 2022, 1:44:00 PM',
+                    x: 1671821040000,
+                    y: 33771520,
+                    formattedY: '33.77M',
+                    markerColor: 'hsla(158479636,50%,50%,0.8)'
+                }
+            ],
+            wrapLabels: true
+        };
+        renderComponent(tooltipContent);
+        expect(screen.getByText('84.64M')).toBeInTheDocument();
+        expect(screen.getByText('33.77M')).toBeInTheDocument();
+        expect(screen.getAllByText('env="demo", instance="demo.do.prometheus.io:9100", job="node"')).toHaveLength(2);
+    });
+});
+
+//# sourceMappingURL=TooltipContent.test.js.map