@perses-dev/components 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/SortSelector/SortSelectorButtons.js

@@ -0,0 +1,42 @@
+// Copyright 2024 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 { Button, ButtonGroup } from '@mui/material';
+export function SortSelectorButtons({ onChange, value, ...props }) {
+    const handleSortChange = (sort)=>{
+        onChange(sort);
+    };
+    return /*#__PURE__*/ _jsxs(ButtonGroup, {
+        "aria-label": "Sort",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange(undefined),
+                variant: value === undefined ? 'contained' : 'outlined',
+                children: "None"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('asc'),
+                variant: value === 'asc' ? 'contained' : 'outlined',
+                children: "Asc"
+            }),
+            /*#__PURE__*/ _jsx(Button, {
+                onClick: ()=>handleSortChange('desc'),
+                variant: value === 'desc' ? 'contained' : 'outlined',
+                children: "Desc"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=SortSelectorButtons.js.map

package/dist/SortSelector/SortSelectorButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/SortSelector/SortSelectorButtons.tsx"],"sourcesContent":["// Copyright 2024 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 { Button, ButtonGroup, ButtonGroupProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { SortOption } from './SortSelector';\n\nexport interface SortSelectorButtonsProps extends Omit<ButtonGroupProps, 'onChange'> {\n  value?: SortOption;\n  onChange: (sort?: SortOption) => void;\n}\n\nexport function SortSelectorButtons({ onChange, value, ...props }: SortSelectorButtonsProps): ReactElement {\n  const handleSortChange = (sort?: SortOption): void => {\n    onChange(sort);\n  };\n\n  return (\n    <ButtonGroup aria-label=\"Sort\" {...props}>\n      <Button onClick={() => handleSortChange(undefined)} variant={value === undefined ? 'contained' : 'outlined'}>\n        None\n      </Button>\n      <Button onClick={() => handleSortChange('asc')} variant={value === 'asc' ? 'contained' : 'outlined'}>\n        Asc\n      </Button>\n      <Button onClick={() => handleSortChange('desc')} variant={value === 'desc' ? 'contained' : 'outlined'}>\n        Desc\n      </Button>\n    </ButtonGroup>\n  );\n}\n"],"names":["Button","ButtonGroup","SortSelectorButtons","onChange","value","props","handleSortChange","sort","aria-label","onClick","undefined","variant"],"mappings":"AAAA,oCAAoC;AACpC,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,wEAAwE;AACxE,qEAAqE;AACrE,6EAA6E;AAC7E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,EAAEC,WAAW,QAA0B,gBAAgB;AAStE,OAAO,SAASC,oBAAoB,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGC,OAAiC;IACzF,MAAMC,mBAAmB,CAACC;QACxBJ,SAASI;IACX;IAEA,qBACE,MAACN;QAAYO,cAAW;QAAQ,GAAGH,KAAK;;0BACtC,KAACL;gBAAOS,SAAS,IAAMH,iBAAiBI;gBAAYC,SAASP,UAAUM,YAAY,cAAc;0BAAY;;0BAG7G,KAACV;gBAAOS,SAAS,IAAMH,iBAAiB;gBAAQK,SAASP,UAAU,QAAQ,cAAc;0BAAY;;0BAGrG,KAACJ;gBAAOS,SAAS,IAAMH,iBAAiB;gBAASK,SAASP,UAAU,SAAS,cAAc;0BAAY;;;;AAK7G"}

package/dist/SortSelector/index.d.ts

@@ -1,2 +1,3 @@
 export * from './SortSelector';
+export * from './SortSelectorButtons';
 //# sourceMappingURL=index.d.ts.map

package/dist/SortSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SortSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SortSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC"}

package/dist/SortSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -11,5 +11,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 export * from './SortSelector';
+export * from './SortSelectorButtons';
 
 //# sourceMappingURL=index.js.map

package/dist/SortSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/SortSelector/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 './SortSelector';\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,iBAAiB"}
+{"version":3,"sources":["../../src/SortSelector/index.ts"],"sourcesContent":["// Copyright 2024 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 './SortSelector';\nexport * from './SortSelectorButtons';\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,iBAAiB;AAC/B,cAAc,wBAAwB"}

package/dist/StatChart/StatChart.d.ts

@@ -1,20 +1,21 @@
+import { FC } from 'react';
 import { FormatOptions } from '@perses-dev/core';
 import { LineSeriesOption } from 'echarts/charts';
-import { GraphSeries } from '../model/graph';
+import { GraphSeries } from '../model';
 import { FontSizeOption } from '../FontSizeSelector';
 export interface StatChartData {
-    calculatedValue?: number | null;
+    color: string;
+    calculatedValue?: string | number | null;
     seriesData?: GraphSeries;
 }
 export interface StatChartProps {
     width: number;
     height: number;
     data: StatChartData;
-    format: FormatOptions;
-    color?: string;
+    format?: FormatOptions;
     sparkline?: LineSeriesOption;
     showSeriesName?: boolean;
     valueFontSize?: FontSizeOption;
 }
-export declare function StatChart(props: StatChartProps): import("react/jsx-runtime").JSX.Element;
+export declare const StatChart: FC<StatChartProps>;
 //# sourceMappingURL=StatChart.d.ts.map

package/dist/StatChart/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAe,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAI9D,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAUrD,MAAM,WAAW,aAAa;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAoI9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../../src/StatChart/StatChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,EAAE,EAAW,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjF,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAWrD,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,WAAW,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,cAAc,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAiIxC,CAAC"}

package/dist/StatChart/StatChart.js

@@ -12,16 +12,16 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { formatValue } from '@perses-dev/core';
 import { Box, Typography, styled } from '@mui/material';
 import merge from 'lodash/merge';
 import { use } from 'echarts/core';
 import { LineChart as EChartsLineChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
-import { useChartsTheme } from '../context/ChartsProvider';
+import { useChartsTheme } from '../context';
 import { EChart } from '../EChart';
 import { useOptimalFontSize } from './calculateFontSize';
+import { formatStatChartValue } from './utils/formatStatChartValue';
 use([
     EChartsLineChart,
     GridComponent,
@@ -34,21 +34,15 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
-export function StatChart(props) {
-    var _data_seriesData, _data_seriesData1;
-    const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;
+export const StatChart = (props)=>{
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
     const chartsTheme = useChartsTheme();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = formatValue(data.calculatedValue, format);
-    }
+    const color = data.color;
+    const formattedValue = formatStatChartValue(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = useOptimalFontSize({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -147,7 +141,7 @@ export function StatChart(props) {
             showSeriesName && /*#__PURE__*/ _jsx(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ _jsx(Value, {
                 variant: "h3",
@@ -167,7 +161,7 @@ export function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = styled(Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
 })(({ theme, padding, fontSize })=>({
@@ -181,7 +175,7 @@ const SeriesName = styled(Typography, {
 const Value = styled(Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
 })(({ theme, color, padding, fontSize, sparkline })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/StatChart/StatChart.js.map

@@ -1 +1 @@
-{"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 { useMemo } from 'react';\nimport { formatValue, FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\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/ChartsProvider';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model/graph';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  calculatedValue?: number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  format: FormatOptions;\n  color?: string;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n}\n\nexport function StatChart(props: StatChartProps) {\n  const { width, height, data, format, color, sparkline, showSeriesName, valueFontSize } = props;\n  const chartsTheme = useChartsTheme();\n\n  let formattedValue = '';\n  if (data.calculatedValue === null) {\n    formattedValue = 'null';\n  } else if (typeof data.calculatedValue === 'number') {\n    formattedValue = formatValue(data.calculatedValue, format);\n  }\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    // override the font size if user selects it in the settings\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\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        min: (value: { min: number; max: number }) => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with percent-decimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n}\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","formatValue","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","data","width","height","format","color","sparkline","showSeriesName","valueFontSize","chartsTheme","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"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 { FC, useMemo } from 'react';\nimport { FormatOptions } from '@perses-dev/core';\nimport { Box, Typography, styled } from '@mui/material';\nimport merge from 'lodash/merge';\nimport { use, EChartsCoreOption } from 'echarts/core';\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';\nimport { EChart } from '../EChart';\nimport { GraphSeries } from '../model';\nimport { FontSizeOption } from '../FontSizeSelector';\nimport { useOptimalFontSize } from './calculateFontSize';\nimport { formatStatChartValue } from './utils/formatStatChartValue';\n\nuse([EChartsLineChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst LINE_HEIGHT = 1.2;\nconst SERIES_NAME_MAX_FONT_SIZE = 30;\nconst SERIES_NAME_FONT_WEIGHT = 400;\nconst VALUE_FONT_WEIGHT = 700;\n\nexport interface StatChartData {\n  color: string;\n  calculatedValue?: string | number | null;\n  seriesData?: GraphSeries;\n}\n\nexport interface StatChartProps {\n  width: number;\n  height: number;\n  data: StatChartData;\n  format?: FormatOptions;\n  sparkline?: LineSeriesOption;\n  showSeriesName?: boolean;\n  valueFontSize?: FontSizeOption;\n}\n\nexport const StatChart: FC<StatChartProps> = (props) => {\n  const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;\n  const chartsTheme = useChartsTheme();\n  const color = data.color;\n\n  const formattedValue = formatStatChartValue(data.calculatedValue, format);\n\n  const containerPadding = chartsTheme.container.padding.default;\n\n  // calculate series name font size and height\n  let seriesNameFontSize = useOptimalFontSize({\n    text: data?.seriesData?.name ?? '',\n    fontWeight: SERIES_NAME_FONT_WEIGHT,\n    width,\n    height: height * 0.125, // assume series name will take 12.5% of available height\n    lineHeight: LINE_HEIGHT,\n    maxSize: SERIES_NAME_MAX_FONT_SIZE,\n  });\n\n  const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;\n\n  // calculate value font size and height\n  const availableWidth = width - containerPadding * 2;\n  const availableHeight = height - seriesNameHeight;\n  const optimalValueFontSize = useOptimalFontSize({\n    text: formattedValue,\n    // override the font size if user selects it in the settings\n    fontSizeOverride: valueFontSize,\n    fontWeight: VALUE_FONT_WEIGHT,\n    // without sparkline, use only 50% of the available width so it looks better for multiseries\n    width: sparkline ? availableWidth : availableWidth * 0.5,\n    // with sparkline, use only 25% of available height to leave room for chart\n    // without sparkline, value should take up 90% of available space\n    height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,\n    lineHeight: LINE_HEIGHT,\n  });\n  const valueFontHeight = optimalValueFontSize * LINE_HEIGHT;\n\n  // make sure the series name font size is slightly smaller than value font size\n  seriesNameFontSize = Math.min(optimalValueFontSize * 0.7, seriesNameFontSize);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data.seriesData === undefined) return chartsTheme.noDataOption;\n\n    const series = data.seriesData;\n    const statSeries: LineSeriesOption[] = [];\n\n    if (sparkline !== undefined) {\n      const lineSeries = {\n        type: 'line',\n        name: series.name,\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        min: (value: { min: number; max: number }): number => {\n          if (value.min >= 0 && value.min <= 1) {\n            // helps with percent-decimal units, or datasets that return 0 or 1 booleans\n            return 0;\n          }\n          return value.min;\n        },\n      },\n      tooltip: {\n        show: false,\n      },\n      series: statSeries,\n    };\n\n    return option;\n  }, [data, chartsTheme, sparkline]);\n\n  const textAlignment = sparkline ? 'auto' : 'center';\n  const textStyles = {\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: textAlignment,\n    alignItems: textAlignment,\n  };\n\n  return (\n    <Box sx={{ height: '100%', width: '100%', ...textStyles }}>\n      {showSeriesName && (\n        <SeriesName padding={containerPadding} fontSize={seriesNameFontSize}>\n          {data.seriesData?.name}\n        </SeriesName>\n      )}\n      <Value variant=\"h3\" color={color} fontSize={optimalValueFontSize} padding={containerPadding}>\n        {formattedValue}\n      </Value>\n      {sparkline !== undefined && (\n        <EChart\n          sx={{\n            width: '100%',\n            height: height - seriesNameHeight - valueFontHeight,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n          renderer=\"svg\"\n        />\n      )}\n    </Box>\n  );\n};\n\nconst SeriesName = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'padding' && prop !== 'fontSize',\n})<{ padding?: number; fontSize?: number; textAlignment?: string }>(({ theme, padding, fontSize }) => ({\n  color: theme.palette.text.secondary,\n  padding: `${padding}px`,\n  fontSize: `${fontSize}px`,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n}));\n\nconst Value = styled(Typography, {\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline',\n})<{ color?: string; padding?: number; fontSize?: number; sparkline?: boolean }>(\n  ({ theme, color, padding, fontSize, sparkline }) => ({\n    color: color ?? theme.palette.text.primary,\n    fontSize: `${fontSize}px`,\n    padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,\n    whiteSpace: 'nowrap',\n    lineHeight: LINE_HEIGHT,\n  })\n);\n"],"names":["useMemo","Box","Typography","styled","merge","use","LineChart","EChartsLineChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","EChart","useOptimalFontSize","formatStatChartValue","LINE_HEIGHT","SERIES_NAME_MAX_FONT_SIZE","SERIES_NAME_FONT_WEIGHT","VALUE_FONT_WEIGHT","StatChart","props","width","height","data","sparkline","showSeriesName","format","valueFontSize","chartsTheme","color","formattedValue","calculatedValue","containerPadding","container","padding","default","seriesNameFontSize","text","seriesData","name","fontWeight","lineHeight","maxSize","seriesNameHeight","availableWidth","availableHeight","optimalValueFontSize","fontSizeOverride","valueFontHeight","Math","min","option","undefined","noDataOption","series","statSeries","lineSeries","type","values","zlevel","symbol","animation","silent","mergedSeries","push","title","show","grid","top","right","bottom","left","containLabel","xAxis","boundaryGap","yAxis","value","tooltip","textAlignment","textStyles","display","flexDirection","justifyContent","alignItems","sx","SeriesName","fontSize","Value","variant","theme","echartsTheme","renderer","shouldForwardProp","prop","palette","secondary","overflow","textOverflow","whiteSpace","primary"],"mappings":"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"}

package/dist/StatChart/calculateFontSize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,UA0BnB"}
+{"version":3,"file":"calculateFontSize.d.ts","sourceRoot":"","sources":["../../src/StatChart/calculateFontSize.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC;CACnC;AAcD;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,UAAU,EACV,KAAK,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,gBAAgB,GACjB,EAAE,iBAAiB,GAAG,MAAM,CA0B5B"}

package/dist/StatChart/calculateFontSize.js

@@ -31,10 +31,8 @@ function getGlobalCanvasContext() {
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/StatChart/calculateFontSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatChart/calculateFontSize.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\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n  fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext() {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n  text,\n  fontWeight,\n  width,\n  height,\n  lineHeight,\n  maxSize,\n  fontSizeOverride,\n}: CalculateFontSize) {\n  const ctx = getGlobalCanvasContext();\n  const { echartsTheme } = useChartsTheme();\n\n  // if user has selected a font size in the settings, use it instead of calculating the optimal size\n  if (fontSizeOverride !== undefined) {\n    return Number(fontSizeOverride);\n  }\n\n  const textStyle = echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize) ?? 12;\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","fontSizeOverride","ctx","echartsTheme","undefined","Number","textStyle","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"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,SAASA,cAAc,QAAQ,4BAA4B;AAa3D,IAAIC;AAEJ,SAASC;IACP,IAAI,CAACD,eAAe;QAClBA,gBAAgBE,SAASC,aAAa,CAAC,UAAUC,UAAU,CAAC;QAC5D,IAAIJ,kBAAkB,MAAM;YAC1B,MAAM,IAAIK,MAAM;QAClB;IACF;IACA,OAAOL;AACT;AAEA;;CAEC,GACD,OAAO,SAASM,mBAAmB,EACjCC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EACE;IAClB,MAAMC,MAAMb;IACZ,MAAM,EAAEc,YAAY,EAAE,GAAGhB;IAEzB,mGAAmG;IACnG,IAAIc,qBAAqBG,WAAW;QAClC,OAAOC,OAAOJ;IAChB;IAEA,MAAMK,YAAYH,aAAaG,SAAS;QACvBD;IAAjB,MAAME,WAAWF,CAAAA,UAAAA,OAAOC,sBAAAA,gCAAAA,UAAWC,QAAQ,eAA1BF,qBAAAA,UAA+B;QAC7BC;IAAnB,MAAME,aAAaF,CAAAA,wBAAAA,sBAAAA,gCAAAA,UAAWE,UAAU,cAArBF,mCAAAA,wBAAyB;IAE5C,qCAAqC;IACrC,MAAMG,YAAY,CAAC,EAAEb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,WAAW,CAAC;IAC7DN,IAAIQ,IAAI,GAAGD;IACX,0DAA0D;IAC1D,MAAME,cAA2BT,IAAIU,WAAW,CAACjB;IAEjD,uFAAuF;IACvF,MAAMkB,uBAAuB,AAAChB,QAAQc,YAAYd,KAAK,GAAIU;IAC3D,MAAMO,wBAAwBhB,SAASC;IAEvC,+BAA+B;IAC/B,MAAMgB,gBAAgBC,KAAKC,GAAG,CAACH,uBAAuBD;IACtD,OAAOb,UAAUgB,KAAKC,GAAG,CAACF,eAAef,WAAWe;AACtD"}
+{"version":3,"sources":["../../src/StatChart/calculateFontSize.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\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { FontSizeOption } from '../FontSizeSelector';\n\ninterface CalculateFontSize {\n  text: string;\n  fontWeight: number;\n  width: number;\n  height: number;\n  lineHeight: number;\n  maxSize?: number;\n  fontSizeOverride?: FontSizeOption;\n}\n\nlet canvasContext: CanvasRenderingContext2D | null;\n\nfunction getGlobalCanvasContext(): CanvasRenderingContext2D {\n  if (!canvasContext) {\n    canvasContext = document.createElement('canvas').getContext('2d');\n    if (canvasContext === null) {\n      throw new Error('Canvas context is null.');\n    }\n  }\n  return canvasContext;\n}\n\n/**\n * Find the optimal font size given available space\n */\nexport function useOptimalFontSize({\n  text,\n  fontWeight,\n  width,\n  height,\n  lineHeight,\n  maxSize,\n  fontSizeOverride,\n}: CalculateFontSize): number {\n  const ctx = getGlobalCanvasContext();\n  const { echartsTheme } = useChartsTheme();\n\n  // if user has selected a font size in the settings, use it instead of calculating the optimal size\n  if (fontSizeOverride !== undefined) {\n    return Number(fontSizeOverride);\n  }\n\n  const textStyle = echartsTheme.textStyle;\n  const fontSize = Number(textStyle?.fontSize) ?? 12;\n  const fontFamily = textStyle?.fontFamily ?? 'Lato';\n\n  // set the font on the canvas context\n  const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;\n  ctx.font = fontStyle;\n  // measure the width of the text with the given font style\n  const textMetrics: TextMetrics = ctx.measureText(text);\n\n  // check how much bigger we can make the font while staying within the width and height\n  const fontSizeBasedOnWidth = (width / textMetrics.width) * fontSize;\n  const fontSizeBasedOnHeight = height / lineHeight;\n\n  // return the smaller font size\n  const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);\n  return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;\n}\n"],"names":["useChartsTheme","canvasContext","getGlobalCanvasContext","document","createElement","getContext","Error","useOptimalFontSize","text","fontWeight","width","height","lineHeight","maxSize","fontSizeOverride","ctx","echartsTheme","undefined","Number","textStyle","fontSize","fontFamily","fontStyle","font","textMetrics","measureText","fontSizeBasedOnWidth","fontSizeBasedOnHeight","finalFontSize","Math","min"],"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,SAASA,cAAc,QAAQ,4BAA4B;AAa3D,IAAIC;AAEJ,SAASC;IACP,IAAI,CAACD,eAAe;QAClBA,gBAAgBE,SAASC,aAAa,CAAC,UAAUC,UAAU,CAAC;QAC5D,IAAIJ,kBAAkB,MAAM;YAC1B,MAAM,IAAIK,MAAM;QAClB;IACF;IACA,OAAOL;AACT;AAEA;;CAEC,GACD,OAAO,SAASM,mBAAmB,EACjCC,IAAI,EACJC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,EACPC,gBAAgB,EACE;IAClB,MAAMC,MAAMb;IACZ,MAAM,EAAEc,YAAY,EAAE,GAAGhB;IAEzB,mGAAmG;IACnG,IAAIc,qBAAqBG,WAAW;QAClC,OAAOC,OAAOJ;IAChB;IAEA,MAAMK,YAAYH,aAAaG,SAAS;IACxC,MAAMC,WAAWF,OAAOC,WAAWC,aAAa;IAChD,MAAMC,aAAaF,WAAWE,cAAc;IAE5C,qCAAqC;IACrC,MAAMC,YAAY,CAAC,EAAEb,WAAW,CAAC,EAAEW,SAAS,GAAG,EAAEC,WAAW,CAAC;IAC7DN,IAAIQ,IAAI,GAAGD;IACX,0DAA0D;IAC1D,MAAME,cAA2BT,IAAIU,WAAW,CAACjB;IAEjD,uFAAuF;IACvF,MAAMkB,uBAAuB,AAAChB,QAAQc,YAAYd,KAAK,GAAIU;IAC3D,MAAMO,wBAAwBhB,SAASC;IAEvC,+BAA+B;IAC/B,MAAMgB,gBAAgBC,KAAKC,GAAG,CAACH,uBAAuBD;IACtD,OAAOb,UAAUgB,KAAKC,GAAG,CAACF,eAAef,WAAWe;AACtD"}

package/dist/StatChart/utils/formatStatChartValue.d.ts

@@ -0,0 +1,3 @@
+import { FormatOptions } from '@perses-dev/core';
+export declare const formatStatChartValue: (value?: string | number | null, format?: FormatOptions) => string;
+//# sourceMappingURL=formatStatChartValue.d.ts.map

package/dist/StatChart/utils/formatStatChartValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatStatChartValue.d.ts","sourceRoot":"","sources":["../../../src/StatChart/utils/formatStatChartValue.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,MAAM,kBAAkB,CAAC;AAE9D,eAAO,MAAM,oBAAoB,WAAY,MAAM,GAAG,MAAM,GAAG,IAAI,WAAW,aAAa,KAAG,MAU7F,CAAC"}

package/dist/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,26 @@
+// Copyright 2024 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 { formatValue } from '@perses-dev/core';
+export const formatStatChartValue = (value, format)=>{
+    if (value === null) {
+        return 'null';
+    } else if (typeof value === 'number') {
+        return formatValue(value, format);
+    } else if (value === undefined) {
+        return '';
+    } else {
+        return value;
+    }
+};
+
+//# sourceMappingURL=formatStatChartValue.js.map

package/dist/StatChart/utils/formatStatChartValue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/StatChart/utils/formatStatChartValue.ts"],"sourcesContent":["// Copyright 2024 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 { FormatOptions, formatValue } from '@perses-dev/core';\n\nexport const formatStatChartValue = (value?: string | number | null, format?: FormatOptions): string => {\n  if (value === null) {\n    return 'null';\n  } else if (typeof value === 'number') {\n    return formatValue(value, format);\n  } else if (value === undefined) {\n    return '';\n  } else {\n    return value;\n  }\n};\n"],"names":["formatValue","formatStatChartValue","value","format","undefined"],"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,SAAwBA,WAAW,QAAQ,mBAAmB;AAE9D,OAAO,MAAMC,uBAAuB,CAACC,OAAgCC;IACnE,IAAID,UAAU,MAAM;QAClB,OAAO;IACT,OAAO,IAAI,OAAOA,UAAU,UAAU;QACpC,OAAOF,YAAYE,OAAOC;IAC5B,OAAO,IAAID,UAAUE,WAAW;QAC9B,OAAO;IACT,OAAO;QACL,OAAOF;IACT;AACF,EAAE"}

package/dist/StatusHistoryChart/StatusHistoryChart.d.ts

@@ -0,0 +1,27 @@
+import { LegendComponentOption } from 'echarts/components';
+import { TimeScale } from '@perses-dev/core';
+import { FC } from 'react';
+export type StatusHistoryData = [number, number, number | undefined];
+export interface StatusHistoryDataItem {
+    value: StatusHistoryData;
+    label?: string;
+    itemStyle?: {
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+    };
+}
+export interface StatusHistoryChartProps {
+    height: number;
+    data: StatusHistoryDataItem[];
+    xAxisCategories: number[];
+    yAxisCategories: string[];
+    legend?: LegendComponentOption;
+    timeScale?: TimeScale;
+    colors?: Array<{
+        value: number | string;
+        color: string;
+    }>;
+}
+export declare const StatusHistoryChart: FC<StatusHistoryChartProps>;
+//# sourceMappingURL=StatusHistoryChart.d.ts.map

package/dist/StatusHistoryChart/StatusHistoryChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusHistoryChart.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"names":[],"mappings":"AAeA,OAAO,EAML,qBAAqB,EACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAiB3B,MAAM,MAAM,iBAAiB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAErE,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,qBAAqB,EAAE,CAAC;IAC9B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CAC3D;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CA+F1D,CAAC"}

package/dist/StatusHistoryChart/StatusHistoryChart.js

@@ -0,0 +1,132 @@
+// Copyright 2024 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 { Box, useTheme } from '@mui/material';
+import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useChartsTheme } from '../context/ChartsProvider';
+import { useTimeZone } from '../context/TimeZoneProvider';
+import { EChart } from '../EChart';
+import { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';
+import { generateTooltipHTML } from './StatusHistoryTooltip';
+use([
+    EChartsHeatmapChart,
+    VisualMapComponent,
+    GridComponent,
+    DatasetComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+export const StatusHistoryChart = (props)=>{
+    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
+    const { timeZone } = useTimeZone();
+    const chartsTheme = useChartsTheme();
+    const theme = useTheme();
+    const option = {
+        tooltip: {
+            appendToBody: true,
+            formatter: (params)=>{
+                return generateTooltipHTML({
+                    data: params.data.value,
+                    label: params.data.label,
+                    marker: params.marker,
+                    xAxisCategories,
+                    yAxisCategories,
+                    theme
+                });
+            }
+        },
+        grid: {
+            top: '5%',
+            bottom: '5%'
+        },
+        xAxis: {
+            type: 'category',
+            data: xAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false
+            },
+            axisLabel: {
+                hideOverlap: true,
+                formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone)
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: yAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false,
+                interval: 0
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                interval: 0
+            }
+        },
+        visualMap: {
+            show: false,
+            type: 'piecewise',
+            pieces: colors
+        },
+        series: [
+            {
+                name: 'Status history',
+                type: 'heatmap',
+                coordinateSystem: 'cartesian2d',
+                data: data,
+                label: {
+                    show: false
+                },
+                itemStyle: {
+                    borderWidth: 1,
+                    borderType: 'solid',
+                    borderColor: '#ffffff'
+                },
+                emphasis: {
+                    itemStyle: {
+                        opacity: 0.5
+                    }
+                }
+            }
+        ]
+    };
+    return /*#__PURE__*/ _jsx(Box, {
+        style: {
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ _jsx(EChart, {
+            sx: {
+                width: '100%',
+                height: height
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+};
+
+//# sourceMappingURL=StatusHistoryChart.js.map

package/dist/StatusHistoryChart/StatusHistoryChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryChart.tsx"],"sourcesContent":["// Copyright 2024 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, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { EChartsCoreOption } from 'echarts';\nimport { FC } from 'react';\nimport { useChartsTheme } from '../context/ChartsProvider';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { EChart } from '../EChart';\nimport { getFormattedStatusHistoryAxisLabel } from './get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n  EChartsHeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryDataItem {\n  value: StatusHistoryData;\n  label?: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface StatusHistoryChartProps {\n  height: number;\n  data: StatusHistoryDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  legend?: LegendComponentOption;\n  timeScale?: TimeScale;\n  colors?: Array<{ value: number | string; color: string }>;\n}\n\nexport const StatusHistoryChart: FC<StatusHistoryChartProps> = (props) => {\n  const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;\n  const { timeZone } = useTimeZone();\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n\n  const option: EChartsCoreOption = {\n    tooltip: {\n      appendToBody: true,\n      formatter: (params: { data: StatusHistoryDataItem; marker: string }) => {\n        return generateTooltipHTML({\n          data: params.data.value,\n          label: params.data.label,\n          marker: params.marker,\n          xAxisCategories,\n          yAxisCategories,\n          theme,\n        });\n      },\n    },\n    grid: {\n      top: '5%',\n      bottom: '5%',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n      },\n      axisLabel: {\n        hideOverlap: true,\n        formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n      },\n    },\n    yAxis: {\n      type: 'category',\n      data: yAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n        interval: 0,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap: {\n      show: false,\n      type: 'piecewise',\n      pieces: colors,\n    },\n    series: [\n      {\n        name: 'Status history',\n        type: 'heatmap',\n        coordinateSystem: 'cartesian2d',\n        data: data,\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderWidth: 1,\n          borderType: 'solid',\n          borderColor: '#ffffff',\n        },\n        emphasis: {\n          itemStyle: {\n            opacity: 0.5,\n          },\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box style={{ height: height }} sx={{ overflow: 'auto' }}>\n      <EChart\n        sx={{\n          width: '100%',\n          height: height,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n};\n"],"names":["Box","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","useChartsTheme","useTimeZone","EChart","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChart","props","height","data","xAxisCategories","yAxisCategories","timeScale","colors","timeZone","chartsTheme","theme","option","tooltip","appendToBody","formatter","params","value","label","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","pieces","series","name","coordinateSystem","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","width","echartsTheme"],"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,SAASA,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,QAEb,qBAAqB;AAC5B,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,SAASC,MAAM,QAAQ,YAAY;AACnC,SAASC,kCAAkC,QAAQ,6BAA6B;AAChF,SAASC,mBAAmB,QAAQ,yBAAyB;AAE7DN,IAAI;IACFN;IACAK;IACAJ;IACAC;IACAC;IACAC;IACAG;CACD;AAwBD,OAAO,MAAMM,qBAAkD,CAACC;IAC9D,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGN;IAC9E,MAAM,EAAEO,QAAQ,EAAE,GAAGZ;IACrB,MAAMa,cAAcd;IACpB,MAAMe,QAAQzB;IAEd,MAAM0B,SAA4B;QAChCC,SAAS;YACPC,cAAc;YACdC,WAAW,CAACC;gBACV,OAAOhB,oBAAoB;oBACzBI,MAAMY,OAAOZ,IAAI,CAACa,KAAK;oBACvBC,OAAOF,OAAOZ,IAAI,CAACc,KAAK;oBACxBC,QAAQH,OAAOG,MAAM;oBACrBd;oBACAC;oBACAK;gBACF;YACF;QACF;QACAS,MAAM;YACJC,KAAK;YACLC,QAAQ;QACV;QACAC,OAAO;YACLC,MAAM;YACNpB,MAAMC;YACNoB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;YACR;YACAE,WAAW;gBACTC,aAAa;gBACbd,WAAWhB,mCAAmCQ,WAAWuB,WAAW,GAAGrB;YACzE;QACF;QACAsB,OAAO;YACLP,MAAM;YACNpB,MAAME;YACNmB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;gBACNM,UAAU;YACZ;YACAC,WAAW;gBACTP,MAAM;YACR;YACAE,WAAW;gBACTI,UAAU;YACZ;QACF;QACAE,WAAW;YACTR,MAAM;YACNF,MAAM;YACNW,QAAQ3B;QACV;QACA4B,QAAQ;YACN;gBACEC,MAAM;gBACNb,MAAM;gBACNc,kBAAkB;gBAClBlC,MAAMA;gBACNc,OAAO;oBACLQ,MAAM;gBACR;gBACAa,WAAW;oBACTC,aAAa;oBACbC,YAAY;oBACZC,aAAa;gBACf;gBACAC,UAAU;oBACRJ,WAAW;wBACTK,SAAS;oBACX;gBACF;YACF;SACD;IACH;IAEA,qBACE,KAAC3D;QAAI4D,OAAO;YAAE1C,QAAQA;QAAO;QAAG2C,IAAI;YAAEC,UAAU;QAAO;kBACrD,cAAA,KAACjD;YACCgD,IAAI;gBACFE,OAAO;gBACP7C,QAAQA;YACV;YACAS,QAAQA;YACRD,OAAOD,YAAYuC,YAAY;;;AAIvC,EAAE"}

package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts

@@ -0,0 +1,13 @@
+import { Theme } from '@mui/material';
+import { StatusHistoryData } from './StatusHistoryChart';
+interface CustomTooltipProps {
+    data: StatusHistoryData;
+    label?: string;
+    marker: string;
+    xAxisCategories: number[];
+    yAxisCategories: string[];
+    theme: Theme;
+}
+export declare function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme, }: CustomTooltipProps): string;
+export {};
+//# sourceMappingURL=StatusHistoryTooltip.d.ts.map

package/dist/StatusHistoryChart/StatusHistoryTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusHistoryTooltip.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"names":[],"mappings":"AAaA,OAAO,EAAO,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,UAAU,kBAAkB;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,EAAE,KAAK,CAAC;CACd;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,KAAK,EACL,MAAM,EACN,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,kBAAkB,GAAG,MAAM,CAmC7B"}

package/dist/StatusHistoryChart/StatusHistoryTooltip.js

@@ -0,0 +1,47 @@
+// Copyright 2024 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 { css } from '@mui/material';
+import { getDateAndTime } from '../utils';
+export function generateTooltipHTML({ data, label, marker, xAxisCategories, yAxisCategories, theme }) {
+    const [x, y] = data;
+    const xAxisLabel = xAxisCategories[x];
+    const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);
+    const tooltipHeader = css`
+    border-bottom: 1px solid ${theme.palette.grey[500]};
+    padding-bottom: 8px;
+  `;
+    const tooltipContentStyles = css`
+    display: flex;
+    justify-content: space-between;
+    padding-top: 8px;
+  `;
+    const labelStyles = css`
+    margin-right: 16px;
+  `;
+    return `
+    <div>
+      <div style="${tooltipHeader.styles}">${formattedDate} ${formattedTime}</div>
+      <div style="${tooltipContentStyles.styles}">
+        <div style="${labelStyles.styles}">
+          ${marker}
+          <strong>${yAxisCategories[y]}</strong>
+        </div>
+        <div>
+          ${label}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+//# sourceMappingURL=StatusHistoryTooltip.js.map

package/dist/StatusHistoryChart/StatusHistoryTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/StatusHistoryChart/StatusHistoryTooltip.ts"],"sourcesContent":["// Copyright 2024 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 { css, Theme } from '@mui/material';\nimport { getDateAndTime } from '../utils';\nimport { StatusHistoryData } from './StatusHistoryChart';\n\ninterface CustomTooltipProps {\n  data: StatusHistoryData;\n  label?: string;\n  marker: string;\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  theme: Theme;\n}\n\nexport function generateTooltipHTML({\n  data,\n  label,\n  marker,\n  xAxisCategories,\n  yAxisCategories,\n  theme,\n}: CustomTooltipProps): string {\n  const [x, y] = data;\n  const xAxisLabel = xAxisCategories[x];\n\n  const { formattedDate, formattedTime } = getDateAndTime(xAxisLabel);\n\n  const tooltipHeader = css`\n    border-bottom: 1px solid ${theme.palette.grey[500]};\n    padding-bottom: 8px;\n  `;\n\n  const tooltipContentStyles = css`\n    display: flex;\n    justify-content: space-between;\n    padding-top: 8px;\n  `;\n\n  const labelStyles = css`\n    margin-right: 16px;\n  `;\n\n  return `\n    <div>\n      <div style=\"${tooltipHeader.styles}\">${formattedDate} ${formattedTime}</div>\n      <div style=\"${tooltipContentStyles.styles}\">\n        <div style=\"${labelStyles.styles}\">\n          ${marker}\n          <strong>${yAxisCategories[y]}</strong>\n        </div>\n        <div>\n          ${label}\n        </div>\n      </div>\n    </div>\n  `;\n}\n"],"names":["css","getDateAndTime","generateTooltipHTML","data","label","marker","xAxisCategories","yAxisCategories","theme","x","y","xAxisLabel","formattedDate","formattedTime","tooltipHeader","palette","grey","tooltipContentStyles","labelStyles","styles"],"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,SAASA,GAAG,QAAe,gBAAgB;AAC3C,SAASC,cAAc,QAAQ,WAAW;AAY1C,OAAO,SAASC,oBAAoB,EAClCC,IAAI,EACJC,KAAK,EACLC,MAAM,EACNC,eAAe,EACfC,eAAe,EACfC,KAAK,EACc;IACnB,MAAM,CAACC,GAAGC,EAAE,GAAGP;IACf,MAAMQ,aAAaL,eAAe,CAACG,EAAE;IAErC,MAAM,EAAEG,aAAa,EAAEC,aAAa,EAAE,GAAGZ,eAAeU;IAExD,MAAMG,gBAAgBd,GAAG,CAAC;6BACC,EAAEQ,MAAMO,OAAO,CAACC,IAAI,CAAC,IAAI,CAAC;;EAErD,CAAC;IAED,MAAMC,uBAAuBjB,GAAG,CAAC;;;;EAIjC,CAAC;IAED,MAAMkB,cAAclB,GAAG,CAAC;;EAExB,CAAC;IAED,OAAO,CAAC;;kBAEQ,EAAEc,cAAcK,MAAM,CAAC,EAAE,EAAEP,cAAc,CAAC,EAAEC,cAAc;kBAC1D,EAAEI,qBAAqBE,MAAM,CAAC;oBAC5B,EAAED,YAAYC,MAAM,CAAC;UAC/B,EAAEd,OAAO;kBACD,EAAEE,eAAe,CAACG,EAAE,CAAC;;;UAG7B,EAAEN,MAAM;;;;EAIhB,CAAC;AACH"}

package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts

@@ -0,0 +1,2 @@
+export declare function getFormattedStatusHistoryAxisLabel(rangeMs: number, timezone: string): (value: number) => string;
+//# sourceMappingURL=get-formatted-axis-label.d.ts.map

package/dist/StatusHistoryChart/get-formatted-axis-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-formatted-axis-label.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryChart/get-formatted-axis-label.ts"],"names":[],"mappings":"AAgBA,wBAAgB,kCAAkC,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAC1D,MAAM,KAAG,MAAM,CA6BxC"}