@perses-dev/components 0.8.1 → 0.9.0

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n}\n\nexport const InfoTooltip = ({ id, title, description, placement, children }: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement}\n      title={<TooltipContent title={title} description={description} />}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.secondary.main,\n    color: theme.palette.grey[900],\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.paper,\n    '&::before': {\n      backgroundColor: theme.palette.secondary.main,\n    },\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","secondary","main","grey","maxWidth","padding","spacing","boxShadow","shadows","background","paper"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.test.js

@@ -1 +1,36 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import userEvent from"@testing-library/user-event";import{screen}from"@testing-library/dom";import{InfoTooltip}from"./InfoTooltip";describe("InfoTooltip",(()=>{const t="Tooltip Title",e="this is a tooltip";it("should render title and description",(async()=>{render(_jsx(InfoTooltip,{title:t,description:e,children:_jsx("div",{children:"tooltipAnchor"})}));const r=screen.getByText("tooltipAnchor");userEvent.hover(r),await screen.findByText(t),screen.findByText(e)}))}));
+// Copyright 2022 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 userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/dom';
+import { InfoTooltip } from './InfoTooltip';
+describe('InfoTooltip', ()=>{
+    const title = 'Tooltip Title';
+    const description = 'this is a tooltip';
+    it('should render title and description', async ()=>{
+        render(/*#__PURE__*/ _jsx(InfoTooltip, {
+            title: title,
+            description: description,
+            children: /*#__PURE__*/ _jsx("div", {
+                children: "tooltipAnchor"
+            })
+        }));
+        const tooltipAnchor = screen.getByText('tooltipAnchor');
+        userEvent.hover(tooltipAnchor);
+        await screen.findByText(title);
+        screen.findByText(description);
+    });
+});
+
+//# sourceMappingURL=InfoTooltip.test.js.map

package/dist/InfoTooltip/InfoTooltip.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/dom';\nimport { InfoTooltip } from './InfoTooltip';\n\ndescribe('InfoTooltip', () => {\n  const title = 'Tooltip Title';\n  const description = 'this is a tooltip';\n  it('should render title and description', async () => {\n    render(\n      <InfoTooltip title={title} description={description}>\n        <div>tooltipAnchor</div>\n      </InfoTooltip>\n    );\n    const tooltipAnchor = screen.getByText('tooltipAnchor');\n    userEvent.hover(tooltipAnchor);\n    await screen.findByText(title);\n    screen.findByText(description);\n  });\n});\n"],"names":["render","userEvent","screen","InfoTooltip","describe","title","description","it","div","tooltipAnchor","getByText","hover","findByText"],"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,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,sBAAsB,CAAC;AAC9C,SAASC,WAAW,QAAQ,eAAe,CAAC;AAE5CC,QAAQ,CAAC,aAAa,EAAE,IAAM;IAC5B,MAAMC,KAAK,GAAG,eAAe,AAAC;IAC9B,MAAMC,WAAW,GAAG,mBAAmB,AAAC;IACxCC,EAAE,CAAC,qCAAqC,EAAE,UAAY;QACpDP,MAAM,eACJ,KAACG,WAAW;YAACE,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;sBACjD,cAAA,KAACE,KAAG;0BAAC,eAAa;cAAM;UACZ,CACf,CAAC;QACF,MAAMC,aAAa,GAAGP,MAAM,CAACQ,SAAS,CAAC,eAAe,CAAC,AAAC;QACxDT,SAAS,CAACU,KAAK,CAACF,aAAa,CAAC,CAAC;QAC/B,MAAMP,MAAM,CAACU,UAAU,CAACP,KAAK,CAAC,CAAC;QAC/BH,MAAM,CAACU,UAAU,CAACN,WAAW,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/InfoTooltip/index.js

@@ -1 +1,15 @@
-export*from"./InfoTooltip";
+// Copyright 2022 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.
+export * from './InfoTooltip';
+
+//# sourceMappingURL=index.js.map

package/dist/InfoTooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InfoTooltip/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 './InfoTooltip';\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,eAAe,CAAC"}

package/dist/LineChart/LineChart.js

@@ -1 +1,198 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box}from"@mui/material";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"../EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"../model/graph";import{formatValue}from"../model/units";import{useChartsTheme}from"../context/ChartsThemeProvider";import{Tooltip}from"../Tooltip/Tooltip";import{enableDataZoom,restoreChart,getDateRange,getFormattedDate}from"./utils";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);export function LineChart({height:e,data:o,unit:t,grid:n,legend:r,visualMap:a,onDataZoom:i,onDoubleClick:s}){const m=useChartsTheme(),p=useRef(),[l,u]=useState(!0),[h,d]=useState(!1),x=useMemo((()=>({datazoom:e=>{var t,n;if(void 0===i&&setTimeout((()=>{d(!1)}),10),void 0===i||void 0===e.batch[0])return;const r=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(n=e.batch[0].endValue)&&void 0!==n?n:o.xAxis.length-1,s=o.xAxis[r],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:r,endIndex:a})}})),[o,i,d]);void 0!==p.current&&enableDataZoom(p.current);const C=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return m.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,s=null!==(e=o.rangeMs)&&void 0!==e?e:getDateRange(o.xAxis);return{series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,max:o.xAxisMax,axisLabel:{formatter:e=>getFormattedDate(e,s)}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:e=>formatValue(e,t)}},animation:!1,tooltip:{show:i,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:n,legend:r,visualMap:a}}),[o,n,r,a]);return _jsxs(Box,{sx:{height:e},onClick:()=>d((e=>!e)),onDoubleClick:e=>{d(!1),void 0===s?void 0!==p.current&&restoreChart(p.current):s(e)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&u(!1)},onMouseUp:()=>{u(!0)},onMouseLeave:()=>{u(!1),d(!1)},onMouseEnter:()=>{u(!0)},children:[!0===l&&_jsx(Tooltip,{chartRef:p,chartData:o,wrapLabels:!0,pinTooltip:h}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:C,theme:m.themeName,onEvents:x,_instance:p})]})}
+// Copyright 2022 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 { useMemo, useRef, useState } from 'react';
+import { useDeepMemo } from '@perses-dev/core';
+import { Box } from '@mui/material';
+import { use } from 'echarts/core';
+import { LineChart as EChartsLineChart } from 'echarts/charts';
+import { GridComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent, LegendComponent, VisualMapComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { EChart } from '../EChart';
+import { PROGRESSIVE_MODE_SERIES_LIMIT } from '../model/graph';
+import { formatValue } from '../model/units';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { enableDataZoom, restoreChart, getDateRange, getFormattedDate } from './utils';
+use([
+    EChartsLineChart,
+    GridComponent,
+    DataZoomComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    LegendComponent,
+    VisualMapComponent,
+    CanvasRenderer
+]);
+export function LineChart({ height , data , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+    const chartsTheme = useChartsTheme();
+    const chartRef = useRef();
+    const [showTooltip, setShowTooltip] = useState(true);
+    const [pinTooltip, setPinTooltip] = useState(false);
+    const handleEvents = useMemo(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setPinTooltip(false);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                var _startValue;
+                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
+                var _endValue;
+                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
+                const xAxisStartValue = data.xAxis[startIndex];
+                const xAxisEndValue = data.xAxis[endIndex];
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue,
+                        startIndex,
+                        endIndex
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        data,
+        onDataZoom,
+        setPinTooltip
+    ]);
+    if (chartRef.current !== undefined) {
+        enableDataZoom(chartRef.current);
+    }
+    const handleOnClick = ()=>setPinTooltip((current)=>!current);
+    const handleOnDoubleClick = (e)=>{
+        setPinTooltip(false);
+        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+        if (onDoubleClick === undefined) {
+            if (chartRef.current !== undefined) {
+                restoreChart(chartRef.current);
+            }
+        } else {
+            onDoubleClick(e);
+        }
+    };
+    const handleOnMouseDown = (e)=>{
+        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+        if (e.target instanceof HTMLCanvasElement) {
+            setShowTooltip(false);
+        }
+    };
+    const handleOnMouseUp = ()=>{
+        setShowTooltip(true);
+    };
+    const handleOnMouseEnter = ()=>{
+        setShowTooltip(true);
+    };
+    const handleOnMouseLeave = ()=>{
+        setShowTooltip(false);
+        setPinTooltip(false);
+    };
+    const option = useDeepMemo(()=>{
+        if (data.timeSeries === undefined) return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_MODE_SERIES_LIMIT;
+        var _rangeMs;
+        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : getDateRange(data.xAxis);
+        const option = {
+            series: data.timeSeries,
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                max: data.xAxisMax,
+                axisLabel: {
+                    formatter: (value)=>{
+                        return getFormattedDate(value, rangeMs);
+                    }
+                }
+            },
+            yAxis: {
+                type: 'value',
+                boundaryGap: [
+                    0,
+                    '10%'
+                ],
+                axisLabel: {
+                    formatter: (value)=>{
+                        return formatValue(value, unit);
+                    }
+                }
+            },
+            animation: false,
+            tooltip: {
+                show: showPointsOnHover,
+                trigger: 'axis',
+                showContent: false,
+                axisPointer: {
+                    type: 'none'
+                }
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid,
+            legend,
+            visualMap
+        };
+        return option;
+    }, [
+        data,
+        grid,
+        legend,
+        visualMap
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            height
+        },
+        onClick: handleOnClick,
+        onDoubleClick: handleOnDoubleClick,
+        onMouseDown: handleOnMouseDown,
+        onMouseUp: handleOnMouseUp,
+        onMouseLeave: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        children: [
+            showTooltip === true && /*#__PURE__*/ _jsx(Tooltip, {
+                chartRef: chartRef,
+                chartData: data,
+                wrapLabels: true,
+                pinTooltip: pinTooltip
+            }),
+            /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.themeName,
+                onEvents: handleEvents,
+                _instance: chartRef
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=LineChart.js.map

package/dist/LineChart/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LineChart/LineChart.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 { MouseEvent, useMemo, useRef, useState } from 'react';\nimport { useDeepMemo } from '@perses-dev/core';\nimport { Box } from '@mui/material';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  LegendComponentOption,\n  VisualMapComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { EChart, OnEventsType } from '../EChart';\nimport { PROGRESSIVE_MODE_SERIES_LIMIT, EChartsDataFormat } from '../model/graph';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { enableDataZoom, restoreChart, getDateRange, getFormattedDate, ZoomEventData } from './utils';\n\nuse([\n  EChartsLineChart,\n  GridComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  LegendComponent,\n  VisualMapComponent,\n  CanvasRenderer,\n]);\n\ninterface LineChartProps {\n  height: number;\n  data: EChartsDataFormat;\n  unit?: UnitOptions;\n  grid?: GridComponentOption;\n  legend?: LegendComponentOption;\n  visualMap?: VisualMapComponentOption[];\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n}\n\nexport function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom, onDoubleClick }: LineChartProps) {\n  const chartsTheme = useChartsTheme();\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [pinTooltip, setPinTooltip] = useState<boolean>(false);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params) => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setPinTooltip(false);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const startIndex = params.batch[0].startValue ?? 0;\n        const endIndex = params.batch[0].endValue ?? data.xAxis.length - 1;\n        const xAxisStartValue = data.xAxis[startIndex];\n        const xAxisEndValue = data.xAxis[endIndex];\n\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n            startIndex,\n            endIndex,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      // TODO: use legendselectchanged event to fix tooltip when legend selected\n    };\n  }, [data, onDataZoom, setPinTooltip]);\n\n  if (chartRef.current !== undefined) {\n    enableDataZoom(chartRef.current);\n  }\n\n  const handleOnClick = () => setPinTooltip((current) => !current);\n\n  const handleOnDoubleClick = (e: MouseEvent) => {\n    setPinTooltip(false);\n    // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n    if (onDoubleClick === undefined) {\n      if (chartRef.current !== undefined) {\n        restoreChart(chartRef.current);\n      }\n    } else {\n      onDoubleClick(e);\n    }\n  };\n\n  const handleOnMouseDown = (e: MouseEvent) => {\n    // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels\n    if (e.target instanceof HTMLCanvasElement) {\n      setShowTooltip(false);\n    }\n  };\n\n  const handleOnMouseUp = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseEnter = () => {\n    setShowTooltip(true);\n  };\n\n  const handleOnMouseLeave = () => {\n    setShowTooltip(false);\n    setPinTooltip(false);\n  };\n\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.timeSeries === undefined) return {};\n    if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;\n\n    const showPointsOnHover = data.timeSeries.length < PROGRESSIVE_MODE_SERIES_LIMIT;\n\n    const rangeMs = data.rangeMs ?? getDateRange(data.xAxis);\n\n    const option: EChartsCoreOption = {\n      series: data.timeSeries,\n      xAxis: {\n        type: 'category',\n        data: data.xAxis,\n        max: data.xAxisMax,\n        axisLabel: {\n          formatter: (value: number) => {\n            return getFormattedDate(value, rangeMs);\n          },\n        },\n      },\n      yAxis: {\n        type: 'value',\n        boundaryGap: [0, '10%'],\n        axisLabel: {\n          formatter: (value: number) => {\n            return formatValue(value, unit);\n          },\n        },\n      },\n      animation: false,\n      tooltip: {\n        show: showPointsOnHover,\n        trigger: 'axis',\n        showContent: false,\n        axisPointer: {\n          type: 'none',\n        },\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n      legend,\n      visualMap,\n    };\n\n    return option;\n  }, [data, grid, legend, visualMap]);\n\n  return (\n    <Box\n      sx={{\n        height,\n      }}\n      onClick={handleOnClick}\n      onDoubleClick={handleOnDoubleClick}\n      onMouseDown={handleOnMouseDown}\n      onMouseUp={handleOnMouseUp}\n      onMouseLeave={handleOnMouseLeave}\n      onMouseEnter={handleOnMouseEnter}\n    >\n      {showTooltip === true && (\n        <Tooltip chartRef={chartRef} chartData={data} wrapLabels={true} pinTooltip={pinTooltip}></Tooltip>\n      )}\n\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.themeName}\n        onEvents={handleEvents}\n        _instance={chartRef}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","useDeepMemo","Box","use","LineChart","EChartsLineChart","GridComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","LegendComponent","VisualMapComponent","CanvasRenderer","EChart","PROGRESSIVE_MODE_SERIES_LIMIT","formatValue","useChartsTheme","Tooltip","enableDataZoom","restoreChart","getDateRange","getFormattedDate","height","data","unit","grid","legend","visualMap","onDataZoom","onDoubleClick","chartsTheme","chartRef","showTooltip","setShowTooltip","pinTooltip","setPinTooltip","handleEvents","datazoom","params","undefined","setTimeout","batch","startIndex","startValue","endIndex","endValue","xAxis","length","xAxisStartValue","xAxisEndValue","zoomEvent","start","end","current","handleOnClick","handleOnDoubleClick","e","handleOnMouseDown","target","HTMLCanvasElement","handleOnMouseUp","handleOnMouseEnter","handleOnMouseLeave","option","timeSeries","noDataOption","showPointsOnHover","rangeMs","series","type","max","xAxisMax","axisLabel","formatter","value","yAxis","boundaryGap","animation","tooltip","show","trigger","showContent","axisPointer","toolbox","feature","dataZoom","icon","yAxisIndex","sx","onClick","onMouseDown","onMouseUp","onMouseLeave","onMouseEnter","chartData","wrapLabels","width","theme","themeName","onEvents","_instance"],"mappings":"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"}

package/dist/LineChart/index.js

@@ -1 +1,15 @@
-export*from"./LineChart";
+// Copyright 2022 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.
+export * from './LineChart';
+
+//# sourceMappingURL=index.js.map

package/dist/LineChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LineChart/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 './LineChart';\nexport type { ZoomEventData } from './utils';\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/LineChart/utils.js

@@ -1 +1,63 @@
-export function enableDataZoom(o){const t=o._model;void 0!==t&&void 0!==t.option.toolbox&&t.option.toolbox.length>0&&"normal"===t.option.toolbox[0].feature.dataZoom.iconStatus.zoom&&o.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0})}export function restoreChart(o){o.dispatchAction({type:"restore"})}export function getDateRange(o){const t=36e5;if(0===o.length)return t;const e=o[o.length-1];return void 0===o[0]||void 0===e?t:e-o[0]}export function getFormattedDate(o,t){const e={hour:"numeric",minute:"numeric",hourCycle:"h23"};return t<=18e5?e.second="numeric":t>=864e5&&(e.month="numeric",e.day="numeric"),new Intl.DateTimeFormat(void 0,e).format(o).replace(/, /g," ")}
+// Copyright 2022 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.
+// enable dataZoom without requring user to click toolbox icon
+export function enableDataZoom(chart) {
+    const chartModel = chart['_model'];
+    if (chartModel === undefined) return;
+    if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
+        // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
+        if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
+            chart.dispatchAction({
+                type: 'takeGlobalCursor',
+                key: 'dataZoomSelect',
+                dataZoomSelectActive: true
+            });
+        }
+    }
+}
+// restore chart to original state before zoom or other actions were dispatched
+// TODO: support incremental unzoom instead of restore to original state
+export function restoreChart(chart) {
+    chart.dispatchAction({
+        type: 'restore'
+    });
+}
+// fallback when xAxis time range not passed as prop
+export function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0) return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
+    return lastDatum - data[0];
+}
+// determines time granularity for axis labels, defaults to hh:mm
+export function getFormattedDate(value, rangeMs) {
+    const dateFormatOptions = {
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23'
+    };
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    } else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
+}
+
+//# sourceMappingURL=utils.js.map

package/dist/LineChart/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/LineChart/utils.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\nimport { ECharts as EChartsInstance } from 'echarts/core';\n\nexport interface ZoomEventData {\n  start: number;\n  end: number;\n  startIndex: number;\n  endIndex: number;\n}\n\n// enable dataZoom without requring user to click toolbox icon\nexport function enableDataZoom(chart: EChartsInstance) {\n  const chartModel = chart['_model'];\n  if (chartModel === undefined) return;\n  if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {\n    // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')\n    if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }\n}\n\n// restore chart to original state before zoom or other actions were dispatched\n// TODO: support incremental unzoom instead of restore to original state\nexport function restoreChart(chart: EChartsInstance) {\n  chart.dispatchAction({\n    type: 'restore', // https://echarts.apache.org/en/api.html#events.restore\n  });\n}\n\n// fallback when xAxis time range not passed as prop\nexport function getDateRange(data: number[]) {\n  const defaultRange = 3600000; // hour in ms\n  if (data.length === 0) return defaultRange;\n  const lastDatum = data[data.length - 1];\n  if (data[0] === undefined || lastDatum === undefined) return defaultRange;\n  return lastDatum - data[0];\n}\n\n// determines time granularity for axis labels, defaults to hh:mm\nexport function getFormattedDate(value: number, rangeMs: number) {\n  const dateFormatOptions: Intl.DateTimeFormatOptions = {\n    hour: 'numeric',\n    minute: 'numeric',\n    hourCycle: 'h23',\n  };\n  const thirtyMinMs = 1800000;\n  const dayMs = 86400000;\n  if (rangeMs <= thirtyMinMs) {\n    dateFormatOptions.second = 'numeric';\n  } else if (rangeMs >= dayMs) {\n    dateFormatOptions.month = 'numeric';\n    dateFormatOptions.day = 'numeric';\n  }\n  const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);\n  // remove comma when month / day present\n  return DATE_FORMAT.format(value).replace(/, /g, ' ');\n}\n"],"names":["enableDataZoom","chart","chartModel","undefined","option","toolbox","length","feature","dataZoom","iconStatus","zoom","dispatchAction","type","key","dataZoomSelectActive","restoreChart","getDateRange","data","defaultRange","lastDatum","getFormattedDate","value","rangeMs","dateFormatOptions","hour","minute","hourCycle","thirtyMinMs","dayMs","second","month","day","DATE_FORMAT","Intl","DateTimeFormat","format","replace"],"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;AAWjC,8DAA8D;AAC9D,OAAO,SAASA,cAAc,CAACC,KAAsB,EAAE;IACrD,MAAMC,UAAU,GAAGD,KAAK,CAAC,QAAQ,CAAC,AAAC;IACnC,IAAIC,UAAU,KAAKC,SAAS,EAAE,OAAO;IACrC,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,KAAKF,SAAS,IAAID,UAAU,CAACE,MAAM,CAACC,OAAO,CAACC,MAAM,GAAG,CAAC,EAAE;QACnF,wGAAwG;QACxG,IAAIJ,UAAU,CAACE,MAAM,CAACC,OAAO,CAAC,CAAC,CAAC,CAACE,OAAO,CAACC,QAAQ,CAACC,UAAU,CAACC,IAAI,KAAK,QAAQ,EAAE;YAC9ET,KAAK,CAACU,cAAc,CAAC;gBACnBC,IAAI,EAAE,kBAAkB;gBACxBC,GAAG,EAAE,gBAAgB;gBACrBC,oBAAoB,EAAE,IAAI;aAC3B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;AACH,CAAC;AAED,+EAA+E;AAC/E,wEAAwE;AACxE,OAAO,SAASC,YAAY,CAACd,KAAsB,EAAE;IACnDA,KAAK,CAACU,cAAc,CAAC;QACnBC,IAAI,EAAE,SAAS;KAChB,CAAC,CAAC;AACL,CAAC;AAED,oDAAoD;AACpD,OAAO,SAASI,YAAY,CAACC,IAAc,EAAE;IAC3C,MAAMC,YAAY,GAAG,OAAO,AAAC,EAAC,aAAa;IAC3C,IAAID,IAAI,CAACX,MAAM,KAAK,CAAC,EAAE,OAAOY,YAAY,CAAC;IAC3C,MAAMC,SAAS,GAAGF,IAAI,CAACA,IAAI,CAACX,MAAM,GAAG,CAAC,CAAC,AAAC;IACxC,IAAIW,IAAI,CAAC,CAAC,CAAC,KAAKd,SAAS,IAAIgB,SAAS,KAAKhB,SAAS,EAAE,OAAOe,YAAY,CAAC;IAC1E,OAAOC,SAAS,GAAGF,IAAI,CAAC,CAAC,CAAC,CAAC;AAC7B,CAAC;AAED,iEAAiE;AACjE,OAAO,SAASG,gBAAgB,CAACC,KAAa,EAAEC,OAAe,EAAE;IAC/D,MAAMC,iBAAiB,GAA+B;QACpDC,IAAI,EAAE,SAAS;QACfC,MAAM,EAAE,SAAS;QACjBC,SAAS,EAAE,KAAK;KACjB,AAAC;IACF,MAAMC,WAAW,GAAG,OAAO,AAAC;IAC5B,MAAMC,KAAK,GAAG,QAAQ,AAAC;IACvB,IAAIN,OAAO,IAAIK,WAAW,EAAE;QAC1BJ,iBAAiB,CAACM,MAAM,GAAG,SAAS,CAAC;IACvC,OAAO,IAAIP,OAAO,IAAIM,KAAK,EAAE;QAC3BL,iBAAiB,CAACO,KAAK,GAAG,SAAS,CAAC;QACpCP,iBAAiB,CAACQ,GAAG,GAAG,SAAS,CAAC;IACpC,CAAC;IACD,MAAMC,WAAW,GAAG,IAAIC,IAAI,CAACC,cAAc,CAAC/B,SAAS,EAAEoB,iBAAiB,CAAC,AAAC;IAC1E,wCAAwC;IACxC,OAAOS,WAAW,CAACG,MAAM,CAACd,KAAK,CAAC,CAACe,OAAO,QAAQ,GAAG,CAAC,CAAC;AACvD,CAAC"}

package/dist/StatChart/StatChart.js

@@ -1 +1,121 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo}from"react";import{Box,Typography}from"@mui/material";import{merge}from"lodash-es";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DatasetComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{useChartsTheme}from"../context/ChartsThemeProvider";import{formatValue}from"../model/units";import{EChart}from"../EChart";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const PANEL_PADDING=32,MIN_VALUE_SIZE=12,MAX_VALUE_SIZE=36;export function StatChart(t){const{width:e,height:o,data:r,unit:a,sparkline:s}=t,i=useChartsTheme(),n=void 0===r.calculatedValue?"No data":formatValue(r.calculatedValue,a),m=useMemo((()=>{if(void 0===r.seriesData)return i.noDataOption;const t=r.seriesData,e=[];if(void 0!==s){const o={type:"line",data:[...t.values],zlevel:1,symbol:"none",animation:!1,silent:!0},r=merge(o,s);e.push(r)}return{title:{show:!1},grid:{show:!1,top:"35%",right:0,bottom:0,left:0,containLabel:!1},xAxis:{type:"time",show:!1,boundaryGap:!1},yAxis:{type:"value",show:!1},tooltip:{show:!1},series:e}}),[r,i,s]),h=e>250&&o>180,p=n.length,l=!0===h?36:Math.min(e,o)/p;return _jsxs(Box,{children:[_jsx(Typography,{variant:"h3",sx:t=>({color:t.palette.text.primary,fontSize:`clamp(12px, ${l}px, 36px)`}),children:n}),void 0!==s&&_jsx(EChart,{sx:{width:e+32,height:o,position:"absolute",bottom:0,left:0},option:m,theme:i.themeName,renderer:"svg"})]})}
+// Copyright 2022 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 React, { useMemo } from 'react';
+import { Box, Typography } from '@mui/material';
+import { merge } from 'lodash-es';
+import { use } from 'echarts/core';
+import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
+import { LineChart as EChartsLineChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useChartsTheme } from '../context/ChartsThemeProvider';
+import { formatValue } from '../model/units';
+import { EChart } from '../EChart';
+use([
+    EChartsGaugeChart,
+    EChartsLineChart,
+    GridComponent,
+    DatasetComponent,
+    TitleComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+const PANEL_PADDING = 32;
+const MIN_VALUE_SIZE = 12;
+const MAX_VALUE_SIZE = 36;
+export function StatChart(props) {
+    const { width , height , data , unit , sparkline  } = props;
+    const chartsTheme = useChartsTheme();
+    const formattedValue = data.calculatedValue === undefined ? 'No data' : formatValue(data.calculatedValue, unit);
+    const option = useMemo(()=>{
+        if (data.seriesData === undefined) return chartsTheme.noDataOption;
+        const series = data.seriesData;
+        const statSeries = [];
+        if (sparkline !== undefined) {
+            const lineSeries = {
+                type: 'line',
+                data: [
+                    ...series.values
+                ],
+                zlevel: 1,
+                symbol: 'none',
+                animation: false,
+                silent: true
+            };
+            const mergedSeries = merge(lineSeries, sparkline);
+            statSeries.push(mergedSeries);
+        }
+        const option = {
+            title: {
+                show: false
+            },
+            grid: {
+                show: false,
+                top: '35%',
+                right: 0,
+                bottom: 0,
+                left: 0,
+                containLabel: false
+            },
+            xAxis: {
+                type: 'time',
+                show: false,
+                boundaryGap: false
+            },
+            yAxis: {
+                type: 'value',
+                show: false
+            },
+            tooltip: {
+                show: false
+            },
+            series: statSeries
+        };
+        return option;
+    }, [
+        data,
+        chartsTheme,
+        sparkline
+    ]);
+    const isLargePanel = width > 250 && height > 180;
+    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
+    const charactersAdjust = formattedValue.length;
+    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    return /*#__PURE__*/ _jsxs(Box, {
+        children: [
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "h3",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary,
+                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`
+                    }),
+                children: formattedValue
+            }),
+            sparkline !== undefined && /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: width + PANEL_PADDING,
+                    height: height,
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0
+                },
+                option: option,
+                theme: chartsTheme.themeName,
+                renderer: "svg"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=StatChart.js.map

package/dist/StatChart/StatChart.js.map

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