@perses-dev/components 0.20.0 → 0.21.1

package/dist/Tooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Tooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\ninterface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const [month, year, time] = timeString.split(',');\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {month}, {year} –\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{time}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","seriesTime","date","formatTimeSeriesHeader","timeString","month","year","time","split","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"mappings":"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"}
+{"version":3,"sources":["../../src/Tooltip/TooltipContent.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 { useMemo } from 'react';\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { FocusedSeriesArray } from './focused-series';\nimport { SeriesInfo } from './SeriesInfo';\n\ninterface TooltipContentProps {\n  focusedSeries: FocusedSeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps) {\n  const { focusedSeries, wrapLabels } = props;\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;\n\n  const formatTimeSeriesHeader = (timeString: string) => {\n    const date = new Date(timeString);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n\n    return (\n      <>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </>\n    );\n  };\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (focusedSeries === null) return null;\n    return focusedSeries.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [focusedSeries]);\n\n  if (sortedFocusedSeries !== null && seriesTime !== null) {\n    return (\n      <Stack py={1} px={1.5} spacing={0.5}>\n        <Typography variant=\"caption\">{formatTimeSeriesHeader(seriesTime)}</Typography>\n        <Divider\n          sx={(theme) => ({\n            borderColor: theme.palette.grey['500'],\n          })}\n        />\n        <Box\n          sx={{\n            display: 'table',\n          }}\n        >\n          {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor }) => {\n            if (datumIdx === null || seriesIdx === null) return null;\n            const key = seriesIdx.toString() + datumIdx.toString();\n\n            return (\n              <SeriesInfo\n                key={key}\n                seriesName={seriesName}\n                y={y}\n                formattedY={formattedY}\n                markerColor={markerColor}\n                totalSeries={sortedFocusedSeries.length}\n                wrapLabels={wrapLabels}\n              />\n            );\n          })}\n        </Box>\n      </Stack>\n    );\n  } else {\n    return <></>;\n  }\n}\n"],"names":["useMemo","Box","Divider","Stack","Typography","useTimeZone","SeriesInfo","TooltipContent","props","focusedSeries","wrapLabels","formatWithUserTimeZone","seriesTime","date","formatTimeSeriesHeader","timeString","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","sortedFocusedSeries","sort","a","b","y","py","px","spacing","borderColor","grey","display","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","key","toString","totalSeries","length"],"mappings":"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"}

package/dist/UnitSelector/UnitSelector.test.js

@@ -59,8 +59,7 @@ describe('UnitSelector', ()=>{
             kind: 'Bytes'
         }, onChange);
         const unitSelector = getUnitSelector();
-        // Note that this tab order can change depending on the type because the
-        // abbreviate comes first and is disabled in some cases.
+        userEvent.tab();
         userEvent.tab();
         expect(unitSelector).toHaveFocus();
         userEvent.clear(unitSelector);
@@ -182,11 +181,11 @@ describe('UnitSelector', ()=>{
             });
             expect(getDecimalSelector()).toBeEnabled();
         });
-        it('does not allow the user to set abbreviate', ()=>{
+        it('allows the user to set abbreviate', ()=>{
             renderUnitSelector({
                 kind: 'Bytes'
             });
-            expect(getAbbreviateSwitch()).toBeDisabled();
+            expect(getAbbreviateSwitch()).toBeEnabled();
         });
     });
     it('should not show an option for disabled units', ()=>{

package/dist/UnitSelector/UnitSelector.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UnitOptions } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\ndescribe('UnitSelector', () => {\n  const renderUnitSelector = (value: UnitOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <UnitSelector value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getUnitSelector = () => {\n    return screen.getByRole('combobox', { name: 'Units' });\n  };\n\n  const getDecimalSelector = () => {\n    return screen.getByRole('combobox', { name: 'Decimal' });\n  };\n\n  const getAbbreviateSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Abbreviate' });\n  };\n\n  it('can change the unit kind by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Minutes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.click(unitSelector);\n    const decimalOption = screen.getByRole('option', {\n      name: 'Decimal',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n    });\n  });\n\n  it('can change the unit kind using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Bytes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    // Note that this tab order can change depending on the type because the\n    // abbreviate comes first and is disabled in some cases.\n    userEvent.tab();\n    expect(unitSelector).toHaveFocus();\n\n    userEvent.clear(unitSelector);\n    userEvent.keyboard('years');\n    screen.getByRole('option', {\n      name: 'Years',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Years',\n    });\n  });\n\n  it('can change the decimal places by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0, abbreviate: true }, onChange);\n\n    userEvent.click(getDecimalSelector());\n    const decimalOption = screen.getByRole('option', {\n      name: '1',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 1,\n      abbreviate: true,\n    });\n  });\n\n  it('can change the decimal places using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Percent' }, onChange);\n\n    const decimalSelector = getDecimalSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(decimalSelector).toHaveFocus();\n\n    userEvent.clear(decimalSelector);\n    userEvent.keyboard('3');\n    screen.getByRole('option', {\n      name: '3',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Percent',\n      decimal_places: 3,\n    });\n  });\n\n  it('can change abbreviate by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 3, abbreviate: true }, onChange);\n\n    userEvent.click(getAbbreviateSwitch());\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 3,\n      abbreviate: false,\n    });\n  });\n\n  it('can change abbreviate using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0 }, onChange);\n\n    userEvent.tab();\n    userEvent.keyboard('{space}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 0,\n      abbreviate: true,\n    });\n  });\n\n  describe('with a time unit selected', () => {\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Minutes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a percent unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Percent' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'PercentDecimal' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a decimal unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  describe('with a bytes unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  it('should not show an option for disabled units', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal' }, onChange);\n\n    userEvent.click(getUnitSelector());\n    const percentShorthandOption = screen.queryByRole('option', {\n      name: '%',\n    });\n    expect(percentShorthandOption).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","userEvent","UnitSelector","describe","renderUnitSelector","value","onChange","jest","fn","div","getUnitSelector","getByRole","name","getDecimalSelector","getAbbreviateSwitch","it","kind","unitSelector","click","decimalOption","expect","toHaveBeenCalledWith","tab","toHaveFocus","clear","keyboard","decimal_places","abbreviate","decimalSelector","toBeDisabled","toBeEnabled","percentShorthandOption","queryByRole","not","toBeInTheDocument"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { UnitOptions } from '../model';\nimport { UnitSelector } from './UnitSelector';\n\ndescribe('UnitSelector', () => {\n  const renderUnitSelector = (value: UnitOptions, onChange = jest.fn()) => {\n    render(\n      <div>\n        <UnitSelector value={value} onChange={onChange} />\n      </div>\n    );\n  };\n\n  const getUnitSelector = () => {\n    return screen.getByRole('combobox', { name: 'Units' });\n  };\n\n  const getDecimalSelector = () => {\n    return screen.getByRole('combobox', { name: 'Decimal' });\n  };\n\n  const getAbbreviateSwitch = () => {\n    return screen.getByRole('checkbox', { name: 'Abbreviate' });\n  };\n\n  it('can change the unit kind by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Minutes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.click(unitSelector);\n    const decimalOption = screen.getByRole('option', {\n      name: 'Decimal',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n    });\n  });\n\n  it('can change the unit kind using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Bytes' }, onChange);\n\n    const unitSelector = getUnitSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(unitSelector).toHaveFocus();\n\n    userEvent.clear(unitSelector);\n    userEvent.keyboard('years');\n    screen.getByRole('option', {\n      name: 'Years',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Years',\n    });\n  });\n\n  it('can change the decimal places by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0, abbreviate: true }, onChange);\n\n    userEvent.click(getDecimalSelector());\n    const decimalOption = screen.getByRole('option', {\n      name: '1',\n    });\n    userEvent.click(decimalOption);\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 1,\n      abbreviate: true,\n    });\n  });\n\n  it('can change the decimal places using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Percent' }, onChange);\n\n    const decimalSelector = getDecimalSelector();\n    userEvent.tab();\n    userEvent.tab();\n    expect(decimalSelector).toHaveFocus();\n\n    userEvent.clear(decimalSelector);\n    userEvent.keyboard('3');\n    screen.getByRole('option', {\n      name: '3',\n    });\n\n    userEvent.keyboard('{arrowup}{enter}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Percent',\n      decimal_places: 3,\n    });\n  });\n\n  it('can change abbreviate by clicking', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 3, abbreviate: true }, onChange);\n\n    userEvent.click(getAbbreviateSwitch());\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 3,\n      abbreviate: false,\n    });\n  });\n\n  it('can change abbreviate using a keyboard', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal', decimal_places: 0 }, onChange);\n\n    userEvent.tab();\n    userEvent.keyboard('{space}');\n\n    expect(onChange).toHaveBeenCalledWith({\n      kind: 'Decimal',\n      decimal_places: 0,\n      abbreviate: true,\n    });\n  });\n\n  describe('with a time unit selected', () => {\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Minutes' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a percent unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Percent' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('does not allow the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'PercentDecimal' });\n      expect(getAbbreviateSwitch()).toBeDisabled();\n    });\n  });\n\n  describe('with a decimal unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Decimal' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  describe('with a bytes unit selected', () => {\n    it('allows the user to modify the decimal places', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getDecimalSelector()).toBeEnabled();\n    });\n\n    it('allows the user to set abbreviate', () => {\n      renderUnitSelector({ kind: 'Bytes' });\n      expect(getAbbreviateSwitch()).toBeEnabled();\n    });\n  });\n\n  it('should not show an option for disabled units', () => {\n    const onChange = jest.fn();\n    renderUnitSelector({ kind: 'Decimal' }, onChange);\n\n    userEvent.click(getUnitSelector());\n    const percentShorthandOption = screen.queryByRole('option', {\n      name: '%',\n    });\n    expect(percentShorthandOption).not.toBeInTheDocument();\n  });\n});\n"],"names":["render","screen","userEvent","UnitSelector","describe","renderUnitSelector","value","onChange","jest","fn","div","getUnitSelector","getByRole","name","getDecimalSelector","getAbbreviateSwitch","it","kind","unitSelector","click","decimalOption","expect","toHaveBeenCalledWith","tab","toHaveFocus","clear","keyboard","decimal_places","abbreviate","decimalSelector","toBeDisabled","toBeEnabled","percentShorthandOption","queryByRole","not","toBeInTheDocument"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,MAAM,EAAEC,MAAM,QAAQ,wBAAwB,CAAC;AACxD,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AAEpD,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAE9CC,QAAQ,CAAC,cAAc,EAAE,IAAM;IAC7B,MAAMC,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,GAAK;QACvET,MAAM,eACJ,KAACU,KAAG;sBACF,cAAA,KAACP,YAAY;gBAACG,KAAK,EAAEA,KAAK;gBAAEC,QAAQ,EAAEA,QAAQ;cAAI;UAC9C,CACP,CAAC;IACJ,CAAC,AAAC;IAEF,MAAMI,eAAe,GAAG,IAAM;QAC5B,OAAOV,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,OAAO;SAAE,CAAC,CAAC;IACzD,CAAC,AAAC;IAEF,MAAMC,kBAAkB,GAAG,IAAM;QAC/B,OAAOb,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,SAAS;SAAE,CAAC,CAAC;IAC3D,CAAC,AAAC;IAEF,MAAME,mBAAmB,GAAG,IAAM;QAChC,OAAOd,MAAM,CAACW,SAAS,CAAC,UAAU,EAAE;YAAEC,IAAI,EAAE,YAAY;SAAE,CAAC,CAAC;IAC9D,CAAC,AAAC;IAEFG,EAAE,CAAC,sCAAsC,EAAE,IAAM;QAC/C,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;SAAE,EAAEV,QAAQ,CAAC,CAAC;QAElD,MAAMW,YAAY,GAAGP,eAAe,EAAE,AAAC;QACvCT,SAAS,CAACiB,KAAK,CAACD,YAAY,CAAC,CAAC;QAC9B,MAAME,aAAa,GAAGnB,MAAM,CAACW,SAAS,CAAC,QAAQ,EAAE;YAC/CC,IAAI,EAAE,SAAS;SAChB,CAAC,AAAC;QACHX,SAAS,CAACiB,KAAK,CAACC,aAAa,CAAC,CAAC;QAE/BC,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,SAAS;SAChB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHD,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpD,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,OAAO;SAAE,EAAEV,QAAQ,CAAC,CAAC;QAEhD,MAAMW,YAAY,GAAGP,eAAe,EAAE,AAAC;QACvCT,SAAS,CAACqB,GAAG,EAAE,CAAC;QAChBrB,SAAS,CAACqB,GAAG,EAAE,CAAC;QAChBF,MAAM,CAACH,YAAY,CAAC,CAACM,WAAW,EAAE,CAAC;QAEnCtB,SAAS,CAACuB,KAAK,CAACP,YAAY,CAAC,CAAC;QAC9BhB,SAAS,CAACwB,QAAQ,CAAC,OAAO,CAAC,CAAC;QAC5BzB,MAAM,CAACW,SAAS,CAAC,QAAQ,EAAE;YACzBC,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;QAEHX,SAAS,CAACwB,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QAEvCL,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,OAAO;SACd,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHD,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpD,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;YAAEU,cAAc,EAAE,CAAC;YAAEC,UAAU,EAAE,IAAI;SAAE,EAAErB,QAAQ,CAAC,CAAC;QAEvFL,SAAS,CAACiB,KAAK,CAACL,kBAAkB,EAAE,CAAC,CAAC;QACtC,MAAMM,aAAa,GAAGnB,MAAM,CAACW,SAAS,CAAC,QAAQ,EAAE;YAC/CC,IAAI,EAAE,GAAG;SACV,CAAC,AAAC;QACHX,SAAS,CAACiB,KAAK,CAACC,aAAa,CAAC,CAAC;QAE/BC,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,SAAS;YACfU,cAAc,EAAE,CAAC;YACjBC,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHZ,EAAE,CAAC,gDAAgD,EAAE,IAAM;QACzD,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;SAAE,EAAEV,QAAQ,CAAC,CAAC;QAElD,MAAMsB,eAAe,GAAGf,kBAAkB,EAAE,AAAC;QAC7CZ,SAAS,CAACqB,GAAG,EAAE,CAAC;QAChBrB,SAAS,CAACqB,GAAG,EAAE,CAAC;QAChBF,MAAM,CAACQ,eAAe,CAAC,CAACL,WAAW,EAAE,CAAC;QAEtCtB,SAAS,CAACuB,KAAK,CAACI,eAAe,CAAC,CAAC;QACjC3B,SAAS,CAACwB,QAAQ,CAAC,GAAG,CAAC,CAAC;QACxBzB,MAAM,CAACW,SAAS,CAAC,QAAQ,EAAE;YACzBC,IAAI,EAAE,GAAG;SACV,CAAC,CAAC;QAEHX,SAAS,CAACwB,QAAQ,CAAC,kBAAkB,CAAC,CAAC;QAEvCL,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,SAAS;YACfU,cAAc,EAAE,CAAC;SAClB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHX,EAAE,CAAC,mCAAmC,EAAE,IAAM;QAC5C,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;YAAEU,cAAc,EAAE,CAAC;YAAEC,UAAU,EAAE,IAAI;SAAE,EAAErB,QAAQ,CAAC,CAAC;QAEvFL,SAAS,CAACiB,KAAK,CAACJ,mBAAmB,EAAE,CAAC,CAAC;QAEvCM,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,SAAS;YACfU,cAAc,EAAE,CAAC;YACjBC,UAAU,EAAE,KAAK;SAClB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHZ,EAAE,CAAC,wCAAwC,EAAE,IAAM;QACjD,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;YAAEU,cAAc,EAAE,CAAC;SAAE,EAAEpB,QAAQ,CAAC,CAAC;QAErEL,SAAS,CAACqB,GAAG,EAAE,CAAC;QAChBrB,SAAS,CAACwB,QAAQ,CAAC,SAAS,CAAC,CAAC;QAE9BL,MAAM,CAACd,QAAQ,CAAC,CAACe,oBAAoB,CAAC;YACpCL,IAAI,EAAE,SAAS;YACfU,cAAc,EAAE,CAAC;YACjBC,UAAU,EAAE,IAAI;SACjB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHxB,QAAQ,CAAC,2BAA2B,EAAE,IAAM;QAC1CY,EAAE,CAAC,2CAA2C,EAAE,IAAM;YACpDX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,SAAS;aAAE,CAAC,CAAC;YACxCI,MAAM,CAACN,mBAAmB,EAAE,CAAC,CAACe,YAAY,EAAE,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH1B,QAAQ,CAAC,8BAA8B,EAAE,IAAM;QAC7CY,EAAE,CAAC,8CAA8C,EAAE,IAAM;YACvDX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,SAAS;aAAE,CAAC,CAAC;YACxCI,MAAM,CAACP,kBAAkB,EAAE,CAAC,CAACiB,WAAW,EAAE,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEHf,EAAE,CAAC,2CAA2C,EAAE,IAAM;YACpDX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,gBAAgB;aAAE,CAAC,CAAC;YAC/CI,MAAM,CAACN,mBAAmB,EAAE,CAAC,CAACe,YAAY,EAAE,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH1B,QAAQ,CAAC,8BAA8B,EAAE,IAAM;QAC7CY,EAAE,CAAC,8CAA8C,EAAE,IAAM;YACvDX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,SAAS;aAAE,CAAC,CAAC;YACxCI,MAAM,CAACP,kBAAkB,EAAE,CAAC,CAACiB,WAAW,EAAE,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEHf,EAAE,CAAC,mCAAmC,EAAE,IAAM;YAC5CX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,SAAS;aAAE,CAAC,CAAC;YACxCI,MAAM,CAACN,mBAAmB,EAAE,CAAC,CAACgB,WAAW,EAAE,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH3B,QAAQ,CAAC,4BAA4B,EAAE,IAAM;QAC3CY,EAAE,CAAC,8CAA8C,EAAE,IAAM;YACvDX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,OAAO;aAAE,CAAC,CAAC;YACtCI,MAAM,CAACP,kBAAkB,EAAE,CAAC,CAACiB,WAAW,EAAE,CAAC;QAC7C,CAAC,CAAC,CAAC;QAEHf,EAAE,CAAC,mCAAmC,EAAE,IAAM;YAC5CX,kBAAkB,CAAC;gBAAEY,IAAI,EAAE,OAAO;aAAE,CAAC,CAAC;YACtCI,MAAM,CAACN,mBAAmB,EAAE,CAAC,CAACgB,WAAW,EAAE,CAAC;QAC9C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEHf,EAAE,CAAC,8CAA8C,EAAE,IAAM;QACvD,MAAMT,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BJ,kBAAkB,CAAC;YAAEY,IAAI,EAAE,SAAS;SAAE,EAAEV,QAAQ,CAAC,CAAC;QAElDL,SAAS,CAACiB,KAAK,CAACR,eAAe,EAAE,CAAC,CAAC;QACnC,MAAMqB,sBAAsB,GAAG/B,MAAM,CAACgC,WAAW,CAAC,QAAQ,EAAE;YAC1DpB,IAAI,EAAE,GAAG;SACV,CAAC,AAAC;QACHQ,MAAM,CAACW,sBAAsB,CAAC,CAACE,GAAG,CAACC,iBAAiB,EAAE,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -23,12 +23,13 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xDatePickers = require("@mui/x-date-pickers");
 const _adapterDateFns = require("@mui/x-date-pickers/AdapterDateFns");
-const _dateFns = require("date-fns");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
+    const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
     // validate start and end time, propagate changes
     const updateDateRange = (input, isStartDate)=>{
         const newDate = new Date(input);
@@ -163,7 +164,7 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                                 // TODO: add helperText, fix validation after we decide on form state solution
                                 updateDateRange(event.target.value, true);
                             },
-                            value: (0, _dateFns.format)(timeRange.start, DATE_TIME_FORMAT),
+                            value: formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT),
                             label: "Start Time",
                             placeholder: "mm/dd/yyyy hh:mm",
                             // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
@@ -173,7 +174,7 @@ const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             onChange: (event)=>{
                                 updateDateRange(event.target.value, false);
                             },
-                            value: (0, _dateFns.format)(timeRange.end, DATE_TIME_FORMAT),
+                            value: formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT),
                             label: "End Time",
                             placeholder: "mm/dd/yyyy hh:mm",
                             type: "tel"

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -25,7 +25,7 @@ const _core = require("@perses-dev/core");
 const _absoluteTimePicker = require("./AbsoluteTimePicker");
 const _timeRangeSelector = require("./TimeRangeSelector");
 function DateTimeRangePicker(props) {
-    const { value , onChange , timeOptions  } = props;
+    const { value , onChange , timeOptions , height  } = props;
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
     const anchorEl = (0, _react.useRef)();
     const convertedTimeRange = (0, _react.useMemo)(()=>{
@@ -36,6 +36,7 @@ function DateTimeRangePicker(props) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         spacing: 1,
+        height: height,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Popover, {
                 anchorEl: anchorEl.current,
@@ -63,6 +64,7 @@ function DateTimeRangePicker(props) {
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeSelector.TimeRangeSelector, {
                         timeOptions: timeOptions,
                         value: value,
+                        height: height,
                         onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -22,6 +22,7 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _calendar = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Calendar"));
 const _core = require("@perses-dev/core");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -30,8 +31,9 @@ function _interopRequireDefault(obj) {
 }
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 function TimeRangeSelector(props) {
-    const { value , timeOptions , onSelectChange , onCustomClick  } = props;
-    const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT) : value.pastDuration;
+    const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
+    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const formattedValue = !(0, _core.isRelativeTimeRange)(value) ? (0, _utils.formatAbsoluteRange)(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
         value: formattedValue,
         onChange: onSelectChange,
@@ -39,7 +41,11 @@ function TimeRangeSelector(props) {
         sx: {
             '.MuiSelect-icon': {
                 marginTop: '1px'
-            }
+            },
+            '.MuiSelect-select': height ? {
+                lineHeight: height,
+                paddingY: 0
+            } : {}
         },
         children: [
             timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {

package/dist/cjs/DateTimeRangePicker/utils.js

@@ -25,6 +25,7 @@ _export(exports, {
     formatAbsoluteRange: ()=>formatAbsoluteRange
 });
 const _dateFns = require("date-fns");
+const _utils = require("../utils");
 function validateDateRange(startDate, endDate) {
     // TODO: display error as helperText
     if (!(0, _dateFns.isValid)(startDate) || !(0, _dateFns.isValid)(endDate)) {
@@ -37,8 +38,8 @@ function validateDateRange(startDate, endDate) {
     }
     return true;
 }
-function formatAbsoluteRange(timeRange, dateFormat) {
-    const formattedStart = (0, _dateFns.format)(timeRange.start, dateFormat);
-    const formattedEnd = (0, _dateFns.format)(timeRange.end, dateFormat);
+function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
+    const formattedStart = (0, _utils.formatWithTimeZone)(timeRange.start, dateFormat, timeZone);
+    const formattedEnd = (0, _utils.formatWithTimeZone)(timeRange.end, dateFormat, timeZone);
     return `${formattedStart} - ${formattedEnd}`;
 }

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -14,32 +14,45 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "GaugeChart", {
-    enumerable: true,
-    get: ()=>GaugeChart
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GaugeChart: ()=>GaugeChart,
+    getResponsiveValueSize: ()=>getResponsiveValueSize
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
-const _core = require("echarts/core");
+const _core = require("@perses-dev/core");
+const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _units = require("../model/units");
 const _echart = require("../EChart");
-(0, _core.use)([
+(0, _core1.use)([
     _charts.GaugeChart,
     _components.GridComponent,
     _components.TitleComponent,
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
+const PROGRESS_WIDTH = 16;
+// adjusts when to show pointer icon
+const GAUGE_SMALL_BREAKPOINT = 170;
 function GaugeChart(props) {
     const { width , height , data , unit , axisLine , max  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
-    const option = (0, _react.useMemo)(()=>{
-        if (data === null || data === undefined) return chartsTheme.noDataOption;
-        const calculatedValue = data;
+    // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
+    const option = (0, _core.useDeepMemo)(()=>{
+        var ref;
+        if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;
+        // adjusts fontSize depending on number of characters
+        const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
+        var ref1;
         return {
             title: {
                 show: false
@@ -62,7 +75,7 @@ function GaugeChart(props) {
                     silent: true,
                     progress: {
                         show: true,
-                        width: 22,
+                        width: PROGRESS_WIDTH,
                         itemStyle: {
                             color: 'auto'
                         }
@@ -78,7 +91,7 @@ function GaugeChart(props) {
                                     '#e1e5e9'
                                 ]
                             ],
-                            width: 22
+                            width: PROGRESS_WIDTH
                         }
                     },
                     axisTick: {
@@ -86,7 +99,7 @@ function GaugeChart(props) {
                         distance: 0
                     },
                     splitLine: {
-                        show: true
+                        show: false
                     },
                     axisLabel: {
                         show: false,
@@ -105,7 +118,7 @@ function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value
                         }
                     ]
                 },
@@ -121,7 +134,15 @@ function GaugeChart(props) {
                     min: 0,
                     max,
                     pointer: {
-                        show: false,
+                        show: true,
+                        // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade
+                        icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',
+                        length: 10,
+                        width: 5,
+                        offsetCenter: [
+                            0,
+                            '-49%'
+                        ],
                         itemStyle: {
                             color: 'auto'
                         }
@@ -145,6 +166,7 @@ function GaugeChart(props) {
                             '-9%'
                         ],
                         color: 'inherit',
+                        fontSize: valueSizeClamp,
                         formatter: (value)=>{
                             return (0, _units.formatValue)(value, {
                                 kind: unit.kind,
@@ -154,7 +176,21 @@ function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value,
+                            name: data.label,
+                            // TODO: new UX for series names, create separate React component or reuse ListLegendItem
+                            // https://echarts.apache.org/en/option.html#series-gauge.data.title
+                            title: {
+                                show: true,
+                                color: (ref1 = (ref = chartsTheme.echartsTheme.textStyle) === null || ref === void 0 ? void 0 : ref.color) !== null && ref1 !== void 0 ? ref1 : 'inherit',
+                                offsetCenter: [
+                                    0,
+                                    '55%'
+                                ],
+                                overflow: 'truncate',
+                                fontSize: 12,
+                                width: width * 0.8
+                            }
                         }
                     ]
                 }
@@ -162,6 +198,8 @@ function GaugeChart(props) {
         };
     }, [
         data,
+        width,
+        height,
         chartsTheme,
         unit,
         axisLine,
@@ -176,3 +214,16 @@ function GaugeChart(props) {
         theme: chartsTheme.echartsTheme
     });
 }
+function getResponsiveValueSize(value, unit, width, height) {
+    const MIN_SIZE = 3;
+    const MAX_SIZE = 24;
+    const SIZE_MULTIPLIER = 0.7;
+    const formattedValue = (0, _units.formatValue)(value, {
+        kind: unit.kind,
+        decimal_places: 0
+    });
+    var _length;
+    const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
+    const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
+    return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
+}

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -39,15 +39,17 @@ var TooltipPlacement;
     TooltipPlacement["Right"] = 'right';
     TooltipPlacement["Bottom"] = 'bottom';
 })(TooltipPlacement || (TooltipPlacement = {}));
-const InfoTooltip = ({ id , title , description , placement , children  })=>{
+const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement,
+        placement: placement !== null && placement !== void 0 ? placement : TooltipPlacement.Top,
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
             title: title,
             description: description
         }),
+        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
+        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
             children: children
         })

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -0,0 +1,88 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LegendOptionsEditor", {
+    enumerable: true,
+    get: ()=>LegendOptionsEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _model = require("../model");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const LEGEND_POSITIONS = [
+    'bottom',
+    'right'
+];
+const LEGEND_POSITIONS_CONFIG = {
+    bottom: {
+        label: 'Bottom'
+    },
+    right: {
+        label: 'Right'
+    }
+};
+const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+function LegendOptionsEditor({ value , onChange  }) {
+    const handleLegendShowChange = (_, checked)=>{
+        // legend is hidden when legend obj is undefined
+        const legendValue = checked === true ? {
+            position: _model.DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    var ref;
+    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : _model.DEFAULT_LEGEND.position];
+    var ref1;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        ...legendConfig,
+                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : _model.DEFAULT_LEGEND.position
+                    },
+                    options: POSITION_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -0,0 +1,48 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _legendOptionsEditor = require("./LegendOptionsEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('LegendOptionsEditor', ()=>{
+    const renderLegendOptionsEditor = (value, onChange = jest.fn())=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendOptionsEditor.LegendOptionsEditor, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getLegendShowSwitch = ()=>{
+        return _react.screen.getByRole('checkbox', {
+            name: 'Show'
+        });
+    };
+    it('can change legend visibility by clicking', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor(undefined, onChange);
+        _userEvent.default.click(getLegendShowSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'bottom'
+        });
+    });
+});

package/dist/cjs/LegendOptionsEditor/index.js

@@ -0,0 +1,28 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./LegendOptionsEditor"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}