@perses-dev/components 0.30.0 → 0.32.0

package/dist/TimeSeriesTooltip/tooltip-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAEhE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE;QACJ,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,MAAM,EAAE;QACN,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,UAAU,EAAE;QACV,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,OAAO,EAAE;QACP,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAoCtD,CAAC"}
+{"version":3,"file":"tooltip-model.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,iBAAiB,MAAM,CAAC;AACrC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,wBAAwB,QAA0B,CAAC;AAChE,eAAO,MAAM,+BAA+B,OAAO,CAAC;AAEpD,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,eAAO,MAAM,yBAAyB,qCAAqC,CAAC;AAC5E,eAAO,MAAM,6BAA6B,iDAAiD,CAAC;AAE5F,eAAO,MAAM,yBAAyB,YAAY,CAAC;AAEnD,eAAO,MAAM,mBAAmB,qBAQ9B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;CAa7B,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;CAG5B,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,EAAE,UAAU,CAAC;IACvB,OAAO,CAAC,EAAE;QACR,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,CAAC,CAAC,EAAE,MAAM,CAAC;KACZ,CAAC;IACF,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,aAAa,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACxC,MAAM,EAAE,UAAU,CAAC;CACpB;AAED,aAAK,iBAAiB,GAAG;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,oBAAY,eAAe,GAAG,UAAU,GAAG,iBAAiB,CAAC;AAE7D,eAAO,MAAM,gBAAgB,QAAO,UAAU,CAAC,QAAQ,CAoCtD,CAAC"}

package/dist/TimeSeriesTooltip/tooltip-model.js

@@ -11,10 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useEffect, useState } from 'react';
+export const TOOLTIP_MIN_WIDTH = 375;
 export const TOOLTIP_MAX_WIDTH = 650;
-export const TOOLTIP_MAX_HEIGHT = 400;
+export const TOOLTIP_MAX_HEIGHT = 650;
 export const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
-export const TOOLTIP_MAX_ITEMS = 50;
+export const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;
+export const FALLBACK_CHART_WIDTH = 750;
+export const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';
+export const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';
+export const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';
 export const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
     year: 'numeric',
     month: 'short',

package/dist/TimeSeriesTooltip/tooltip-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\nimport { FocusedSeriesArray } from './focused-series';\n\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 400;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\n\nexport const TOOLTIP_MAX_ITEMS = 50;\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface CursorCoordinates {\n  page: {\n    x: number;\n    y: number;\n  };\n  client: {\n    x: number;\n    y: number;\n  };\n  plotCanvas: {\n    x: number;\n    y: number;\n  };\n  zrender: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: FocusedSeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n"],"names":["useEffect","useState","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_MAX_ITEMS","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAG5C,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,kBAAkB,GAAG,GAAG,CAAC;AACtC,OAAO,MAAMC,wBAAwB,GAAGF,iBAAiB,GAAG,GAAG,CAAC;AAEhE,OAAO,MAAMG,iBAAiB,GAAG,EAAE,CAAC;AAEpC,OAAO,MAAMC,mBAAmB,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IACpEC,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAG;IAC/BC,MAAM,EAAE;QACNC,UAAU,EAAE;YACVC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDC,OAAO,EAAE;YACPF,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDE,MAAM,EAAE,IAAI;KACb;IACDC,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAG;IAC9BC,MAAM,EAAET,iBAAiB;IACzBU,aAAa,EAAE,IAAI;CACpB,CAAC;AA0CF,OAAO,MAAMC,gBAAgB,GAAG,IAA4B;IAC1D,MAAM,CAACV,MAAM,EAAEW,SAAS,CAAC,GAAG5B,QAAQ,CAAuB,IAAI,CAAC,AAAC;IAEjED,SAAS,CAAC,IAAM;QACd,MAAM8B,YAAY,GAAG,CAACC,CAAkB,GAAK;YAC3C,OAAOF,SAAS,CAAC;gBACfG,IAAI,EAAE;oBACJZ,CAAC,EAAEW,CAAC,CAACE,KAAK;oBACVZ,CAAC,EAAEU,CAAC,CAACG,KAAK;iBACX;gBACDC,MAAM,EAAE;oBACNf,CAAC,EAAEW,CAAC,CAACK,OAAO;oBACZf,CAAC,EAAEU,CAAC,CAACM,OAAO;iBACb;gBACDlB,UAAU,EAAE;oBACVC,CAAC,EAAEW,CAAC,CAACO,OAAO;oBACZjB,CAAC,EAAEU,CAAC,CAACQ,OAAO;iBACb;gBACDjB,OAAO,EAAE;oBACP,4DAA4D;oBAC5D,iHAAiH;oBACjHF,CAAC,EAAEW,CAAC,CAACS,GAAG;oBACRnB,CAAC,EAAEU,CAAC,CAACU,GAAG;iBACT;gBACD,0HAA0H;gBAC1HlB,MAAM,EAAEQ,CAAC,CAACR,MAAM;aACjB,CAAC,CAAC;QACL,CAAC,AAAC;QACFmB,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEb,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAM;YACXY,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEd,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOZ,MAAM,CAAC;AAChB,CAAC,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/tooltip-model.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useState } from 'react';\nimport { NearbySeriesArray } from './nearby-series';\n\nexport const TOOLTIP_MIN_WIDTH = 375;\nexport const TOOLTIP_MAX_WIDTH = 650;\nexport const TOOLTIP_MAX_HEIGHT = 650;\nexport const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;\nexport const TOOLTIP_ADJUST_Y_POS_MULTIPLIER = 0.75;\n\nexport const FALLBACK_CHART_WIDTH = 750;\n\nexport const NEARBY_SERIES_DESCRIPTION = 'nearby series showing in tooltip';\nexport const EMPHASIZED_SERIES_DESCRIPTION = 'emphasized series showing as bold in tooltip';\n\nexport const TOOLTIP_BG_COLOR_FALLBACK = '#2E313E';\n\nexport const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {\n  year: 'numeric',\n  month: 'short',\n  day: 'numeric',\n  hour: 'numeric',\n  minute: 'numeric',\n  second: 'numeric',\n  hour12: true,\n});\n\nexport const defaultCursorData = {\n  coords: {\n    plotCanvas: {\n      x: 0,\n      y: 0,\n    },\n    zrender: {\n      x: 0,\n      y: 0,\n    },\n    target: null,\n  },\n  chartWidth: 0,\n};\n\nexport const emptyTooltipData = {\n  cursor: defaultCursorData,\n  focusedSeries: null,\n};\n\nexport interface Coordinate {\n  x: number;\n  y: number;\n}\n\nexport interface CursorCoordinates {\n  page: Coordinate;\n  client: Coordinate;\n  plotCanvas: Coordinate;\n  zrender?: {\n    x?: number;\n    y?: number;\n  };\n  target: EventTarget | null;\n}\n\nexport interface CursorData {\n  coords: CursorCoordinates | null;\n  chartWidth?: number;\n}\n\nexport interface TooltipData {\n  focusedSeries: NearbySeriesArray | null;\n  cursor: CursorData;\n}\n\ntype ZREventProperties = {\n  zrX?: number;\n  zrY?: number;\n  zrDelta?: number;\n  zrEventControl?: 'no_globalout' | 'only_globalout';\n  zrByTouch?: boolean;\n};\n\nexport type ZRRawMouseEvent = MouseEvent & ZREventProperties;\n\nexport const useMousePosition = (): CursorData['coords'] => {\n  const [coords, setCoords] = useState<CursorData['coords']>(null);\n\n  useEffect(() => {\n    const setFromEvent = (e: ZRRawMouseEvent) => {\n      return setCoords({\n        page: {\n          x: e.pageX,\n          y: e.pageY,\n        },\n        client: {\n          x: e.clientX,\n          y: e.clientY,\n        },\n        plotCanvas: {\n          x: e.offsetX,\n          y: e.offsetY,\n        },\n        zrender: {\n          // echarts canvas coordinates added automatically by zrender\n          // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas\n          x: e.zrX,\n          y: e.zrY,\n        },\n        // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)\n        target: e.target,\n      });\n    };\n    window.addEventListener('mousemove', setFromEvent);\n\n    return () => {\n      window.removeEventListener('mousemove', setFromEvent);\n    };\n  }, []);\n\n  return coords;\n};\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","FALLBACK_CHART_WIDTH","NEARBY_SERIES_DESCRIPTION","EMPHASIZED_SERIES_DESCRIPTION","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_DATE_FORMAT","Intl","DateTimeFormat","undefined","year","month","day","hour","minute","second","hour12","defaultCursorData","coords","plotCanvas","x","y","zrender","target","chartWidth","emptyTooltipData","cursor","focusedSeries","useMousePosition","setCoords","setFromEvent","e","page","pageX","pageY","client","clientX","clientY","offsetX","offsetY","zrX","zrY","window","addEventListener","removeEventListener"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAG5C,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,iBAAiB,GAAG,GAAG,CAAC;AACrC,OAAO,MAAMC,kBAAkB,GAAG,GAAG,CAAC;AACtC,OAAO,MAAMC,wBAAwB,GAAGF,iBAAiB,GAAG,GAAG,CAAC;AAChE,OAAO,MAAMG,+BAA+B,GAAG,IAAI,CAAC;AAEpD,OAAO,MAAMC,oBAAoB,GAAG,GAAG,CAAC;AAExC,OAAO,MAAMC,yBAAyB,GAAG,kCAAkC,CAAC;AAC5E,OAAO,MAAMC,6BAA6B,GAAG,8CAA8C,CAAC;AAE5F,OAAO,MAAMC,yBAAyB,GAAG,SAAS,CAAC;AAEnD,OAAO,MAAMC,mBAAmB,GAAG,IAAIC,IAAI,CAACC,cAAc,CAACC,SAAS,EAAE;IACpEC,IAAI,EAAE,SAAS;IACfC,KAAK,EAAE,OAAO;IACdC,GAAG,EAAE,SAAS;IACdC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,SAAS;IACjBC,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,OAAO,MAAMC,iBAAiB,GAAG;IAC/BC,MAAM,EAAE;QACNC,UAAU,EAAE;YACVC,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDC,OAAO,EAAE;YACPF,CAAC,EAAE,CAAC;YACJC,CAAC,EAAE,CAAC;SACL;QACDE,MAAM,EAAE,IAAI;KACb;IACDC,UAAU,EAAE,CAAC;CACd,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAG;IAC9BC,MAAM,EAAET,iBAAiB;IACzBU,aAAa,EAAE,IAAI;CACpB,CAAC;AAsCF,OAAO,MAAMC,gBAAgB,GAAG,IAA4B;IAC1D,MAAM,CAACV,MAAM,EAAEW,SAAS,CAAC,GAAGjC,QAAQ,CAAuB,IAAI,CAAC,AAAC;IAEjED,SAAS,CAAC,IAAM;QACd,MAAMmC,YAAY,GAAG,CAACC,CAAkB,GAAK;YAC3C,OAAOF,SAAS,CAAC;gBACfG,IAAI,EAAE;oBACJZ,CAAC,EAAEW,CAAC,CAACE,KAAK;oBACVZ,CAAC,EAAEU,CAAC,CAACG,KAAK;iBACX;gBACDC,MAAM,EAAE;oBACNf,CAAC,EAAEW,CAAC,CAACK,OAAO;oBACZf,CAAC,EAAEU,CAAC,CAACM,OAAO;iBACb;gBACDlB,UAAU,EAAE;oBACVC,CAAC,EAAEW,CAAC,CAACO,OAAO;oBACZjB,CAAC,EAAEU,CAAC,CAACQ,OAAO;iBACb;gBACDjB,OAAO,EAAE;oBACP,4DAA4D;oBAC5D,iHAAiH;oBACjHF,CAAC,EAAEW,CAAC,CAACS,GAAG;oBACRnB,CAAC,EAAEU,CAAC,CAACU,GAAG;iBACT;gBACD,0HAA0H;gBAC1HlB,MAAM,EAAEQ,CAAC,CAACR,MAAM;aACjB,CAAC,CAAC;QACL,CAAC,AAAC;QACFmB,MAAM,CAACC,gBAAgB,CAAC,WAAW,EAAEb,YAAY,CAAC,CAAC;QAEnD,OAAO,IAAM;YACXY,MAAM,CAACE,mBAAmB,CAAC,WAAW,EAAEd,YAAY,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAOZ,MAAM,CAAC;AAChB,CAAC,CAAC"}

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -2,5 +2,5 @@ import { CursorCoordinates, CursorData } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
  */
-export declare function assembleTransform(mousePos: CursorData['coords'], seriesNum: number, chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number): string;
+export declare function assembleTransform(mousePos: CursorData['coords'], chartWidth: number, pinnedPos: CursorCoordinates | null, tooltipHeight: number, tooltipWidth: number): string;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,UA+BrB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAsD,MAAM,iBAAiB,CAAC;AAEpH;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,iBAAiB,GAAG,IAAI,EACnC,aAAa,EAAE,MAAM,EACrB,YAAY,EAAE,MAAM,UAgCrB"}

package/dist/TimeSeriesTooltip/utils.js

@@ -10,18 +10,18 @@
 // 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 { TOOLTIP_MAX_WIDTH } from './tooltip-model';
+import { TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
- */ export function assembleTransform(mousePos, seriesNum, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
+ */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
+    const cursorPaddingX = 32;
+    const cursorPaddingY = 16;
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
-    const cursorPaddingX = 32;
-    const cursorPaddingY = 16;
     // Tooltip is located in a Portal attached to the body.
     // Using page coordinates instead of viewport ensures the tooltip is
     // absolutely positioned correctly as the user scrolls
@@ -29,7 +29,8 @@ import { TOOLTIP_MAX_WIDTH } from './tooltip-model';
     let y = mousePos.page.y + cursorPaddingY;
     // adjust so tooltip does not get cut off at bottom of chart
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
-        y = mousePos.page.y - tooltipHeight;
+        // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport
+        y = mousePos.page.y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
     }
     // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;

package/dist/TimeSeriesTooltip/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CursorCoordinates, CursorData, TOOLTIP_MAX_WIDTH } from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  seriesNum: number,\n  chartWidth: number,\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number\n) {\n  if (mousePos === null) {\n    return 'translate3d(0, 0)';\n  }\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  // Tooltip is located in a Portal attached to the body.\n  // Using page coordinates instead of viewport ensures the tooltip is\n  // absolutely positioned correctly as the user scrolls\n  const x = mousePos.page.x;\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // adjust so tooltip does not get cut off at bottom of chart\n  if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {\n    y = mousePos.page.y - tooltipHeight;\n  }\n\n  // use tooltip width to determine when to repos from right to left\n  const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;\n\n  // reposition so tooltip is never too close to right side of chart or left side of browser window\n  return mousePos.plotCanvas.x > xPosAdjustThreshold && x > TOOLTIP_MAX_WIDTH\n    ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`\n    : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;\n}\n"],"names":["TOOLTIP_MAX_WIDTH","assembleTransform","mousePos","seriesNum","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","cursorPaddingX","cursorPaddingY","x","page","y","client","window","innerHeight","xPosAdjustThreshold","plotCanvas"],"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,SAAwCA,iBAAiB,QAAQ,iBAAiB,CAAC;AAEnF;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,QAA8B,EAC9BC,SAAiB,EACjBC,UAAkB,EAClBC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpB;IACA,IAAIL,QAAQ,KAAK,IAAI,EAAE;QACrB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,IAAIG,SAAS,KAAK,IAAI,EAAE;QACtBH,QAAQ,GAAGG,SAAS,CAAC;IACvB,CAAC;IAED,MAAMG,cAAc,GAAG,EAAE,AAAC;IAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;IAE1B,uDAAuD;IACvD,oEAAoE;IACpE,sDAAsD;IACtD,MAAMC,CAAC,GAAGR,QAAQ,CAACS,IAAI,CAACD,CAAC,AAAC;IAC1B,IAAIE,CAAC,GAAGV,QAAQ,CAACS,IAAI,CAACC,CAAC,GAAGH,cAAc,AAAC;IAEzC,4DAA4D;IAC5D,IAAIP,QAAQ,CAACW,MAAM,CAACD,CAAC,GAAGN,aAAa,GAAGG,cAAc,GAAGK,MAAM,CAACC,WAAW,EAAE;QAC3EH,CAAC,GAAGV,QAAQ,CAACS,IAAI,CAACC,CAAC,GAAGN,aAAa,CAAC;IACtC,CAAC;IAED,kEAAkE;IAClE,MAAMU,mBAAmB,GAAGZ,UAAU,GAAGG,YAAY,GAAG,GAAG,AAAC;IAE5D,iGAAiG;IACjG,OAAOL,QAAQ,CAACe,UAAU,CAACP,CAAC,GAAGM,mBAAmB,IAAIN,CAAC,GAAGV,iBAAiB,GACvE,CAAC,YAAY,EAAEU,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,wBAAwB,CAAC,GACnE,CAAC,YAAY,EAAEF,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,CAAC"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/utils.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CursorCoordinates, CursorData, TOOLTIP_MAX_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER } from './tooltip-model';\n\n/**\n * Determine position of tooltip depending on chart dimensions and the number of focused series\n */\nexport function assembleTransform(\n  mousePos: CursorData['coords'],\n  chartWidth: number,\n  pinnedPos: CursorCoordinates | null,\n  tooltipHeight: number,\n  tooltipWidth: number\n) {\n  if (mousePos === null) {\n    return 'translate3d(0, 0)';\n  }\n\n  const cursorPaddingX = 32;\n  const cursorPaddingY = 16;\n\n  if (pinnedPos !== null) {\n    mousePos = pinnedPos;\n  }\n\n  // Tooltip is located in a Portal attached to the body.\n  // Using page coordinates instead of viewport ensures the tooltip is\n  // absolutely positioned correctly as the user scrolls\n  const x = mousePos.page.x;\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // adjust so tooltip does not get cut off at bottom of chart\n  if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {\n    // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport\n    y = mousePos.page.y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;\n  }\n\n  // use tooltip width to determine when to repos from right to left\n  const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;\n\n  // reposition so tooltip is never too close to right side of chart or left side of browser window\n  return mousePos.plotCanvas.x > xPosAdjustThreshold && x > TOOLTIP_MAX_WIDTH\n    ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`\n    : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","assembleTransform","mousePos","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","cursorPaddingX","cursorPaddingY","x","page","y","client","window","innerHeight","xPosAdjustThreshold","plotCanvas"],"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,SAAwCA,iBAAiB,EAAEC,+BAA+B,QAAQ,iBAAiB,CAAC;AAEpH;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAC/BC,QAA8B,EAC9BC,UAAkB,EAClBC,SAAmC,EACnCC,aAAqB,EACrBC,YAAoB,EACpB;IACA,IAAIJ,QAAQ,KAAK,IAAI,EAAE;QACrB,OAAO,mBAAmB,CAAC;IAC7B,CAAC;IAED,MAAMK,cAAc,GAAG,EAAE,AAAC;IAC1B,MAAMC,cAAc,GAAG,EAAE,AAAC;IAE1B,IAAIJ,SAAS,KAAK,IAAI,EAAE;QACtBF,QAAQ,GAAGE,SAAS,CAAC;IACvB,CAAC;IAED,uDAAuD;IACvD,oEAAoE;IACpE,sDAAsD;IACtD,MAAMK,CAAC,GAAGP,QAAQ,CAACQ,IAAI,CAACD,CAAC,AAAC;IAC1B,IAAIE,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGH,cAAc,AAAC;IAEzC,4DAA4D;IAC5D,IAAIN,QAAQ,CAACU,MAAM,CAACD,CAAC,GAAGN,aAAa,GAAGG,cAAc,GAAGK,MAAM,CAACC,WAAW,EAAE;QAC3E,+FAA+F;QAC/FH,CAAC,GAAGT,QAAQ,CAACQ,IAAI,CAACC,CAAC,GAAGN,aAAa,GAAGL,+BAA+B,CAAC;IACxE,CAAC;IAED,kEAAkE;IAClE,MAAMe,mBAAmB,GAAGZ,UAAU,GAAGG,YAAY,GAAG,GAAG,AAAC;IAE5D,iGAAiG;IACjG,OAAOJ,QAAQ,CAACc,UAAU,CAACP,CAAC,GAAGM,mBAAmB,IAAIN,CAAC,GAAGV,iBAAiB,GACvE,CAAC,YAAY,EAAEU,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,wBAAwB,CAAC,GACnE,CAAC,YAAY,EAAEF,CAAC,GAAGF,cAAc,CAAC,IAAI,EAAEI,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,CAAC"}

package/dist/cjs/ContentWithLegend/ContentWithLegend.js

@@ -0,0 +1,70 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ContentWithLegend", {
+    enumerable: true,
+    get: ()=>ContentWithLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _legend = require("../Legend");
+const _contentWithLegendModel = require("./model/content-with-legend-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function ContentWithLegend({ children , legendProps , width , height , spacing =0 , minChildrenWidth =100 , minChildrenHeight =100  }) {
+    const theme = (0, _material.useTheme)();
+    const { content , legend , margin  } = (0, _contentWithLegendModel.getContentWithLegendLayout)({
+        width,
+        height,
+        legendOptions: legendProps === null || legendProps === void 0 ? void 0 : legendProps.options,
+        minChildrenHeight,
+        minChildrenWidth,
+        spacing,
+        theme
+    });
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            width,
+            height,
+            position: 'relative',
+            overflow: 'hidden'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    width: content.width,
+                    height: content.height,
+                    marginRight: `${margin.right}px`,
+                    marginBottom: `${margin.bottom}px`,
+                    overflow: 'hidden'
+                },
+                children: typeof children === 'function' ? children({
+                    width: content.width,
+                    height: content.height
+                }) : children
+            }),
+            legendProps && legend.show && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legend.Legend, {
+                ...legendProps,
+                height: legend.height,
+                width: legend.width
+            })
+        ]
+    });
+}

package/dist/cjs/ContentWithLegend/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./ContentWithLegend"), 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;
+}

package/dist/cjs/ContentWithLegend/model/content-with-legend-model.js

@@ -0,0 +1,100 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TABLE_LEGEND_SIZE: ()=>TABLE_LEGEND_SIZE,
+    getContentWithLegendLayout: ()=>getContentWithLegendLayout
+});
+const _table = require("../../Table");
+const _legend = require("../../model/legend");
+const TABLE_LEGEND_SIZE = {
+    // 5 rows plus header. Value to be multiplied by row height in pixels.
+    Bottom: 6,
+    // Pixel value
+    Right: 250
+};
+const PANEL_HEIGHT_LG_BREAKPOINT = 300;
+const LEGEND_HEIGHT_SM = 40;
+const LEGEND_HEIGHT_LG = 100;
+function getContentWithLegendLayout({ width , height , legendOptions , minChildrenHeight , minChildrenWidth , spacing , theme  }) {
+    const hasLegend = !!legendOptions;
+    const noLegendLayout = {
+        legend: {
+            show: false,
+            width: 0,
+            height: 0
+        },
+        content: {
+            width,
+            height
+        },
+        margin: {
+            right: 0,
+            bottom: 0
+        }
+    };
+    if (!hasLegend) {
+        return noLegendLayout;
+    }
+    const { position  } = legendOptions;
+    const mode = (0, _legend.getLegendMode)(legendOptions.mode);
+    let legendWidth;
+    let legendHeight;
+    if (mode === 'List') {
+        // TODO: normalize list to share similar height options as the table
+        // when we add more size options.
+        legendWidth = position === 'Right' ? 200 : width;
+        // TODO: account for number of legend items returned when adjusting legend spacing
+        legendHeight = LEGEND_HEIGHT_SM;
+        if (position === 'Right') {
+            legendHeight = height;
+        } else if (height >= PANEL_HEIGHT_LG_BREAKPOINT) {
+            legendHeight = LEGEND_HEIGHT_LG;
+        }
+    } else {
+        // Table mode
+        const tableLayout = (0, _table.getTableCellLayout)(theme, 'compact');
+        legendWidth = position === 'Right' ? TABLE_LEGEND_SIZE['Right'] : width;
+        legendHeight = position === 'Bottom' ? TABLE_LEGEND_SIZE['Bottom'] * tableLayout.height : height;
+    }
+    const contentWidth = position === 'Right' ? width - legendWidth - spacing : width;
+    const contentHeight = position === 'Bottom' ? height - legendHeight - spacing : height;
+    if (position === 'Right' && contentWidth < minChildrenWidth || position === 'Bottom' && contentHeight < minChildrenHeight) {
+        // Legend does not fit. Just show the content.
+        return noLegendLayout;
+    }
+    return {
+        legend: {
+            width: legendWidth,
+            height: legendHeight,
+            show: true
+        },
+        content: {
+            width: contentWidth,
+            height: contentHeight
+        },
+        margin: {
+            right: position === 'Right' ? spacing : 0,
+            bottom: position === 'Bottom' ? spacing : 0
+        }
+    };
+}

package/dist/cjs/EChart/EChart.js

@@ -142,11 +142,19 @@ const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , them
     }, [
         onEvents
     ]);
+    // TODO: re-evaluate how this is triggered. It's technically working right
+    // now because the sx prop is an object that gets re-created, but that also
+    // means it runs unnecessarily some of the time and theoretically might
+    // not run in some other cases. Maybe it should use a resize observer?
     (0, _react.useEffect)(()=>{
+        // TODO: fix this debouncing. This likely isn't working as intended because
+        // the debounced function is re-created every time this useEffect is called.
         const updateSize = (0, _lodashEs.debounce)(()=>{
             if (!chartElement.current) return;
             chartElement.current.resize();
-        }, 200);
+        }, 200, {
+            leading: true
+        });
         updateSize();
     }, [
         sx

package/dist/cjs/Legend/CompactLegend.js

@@ -20,8 +20,9 @@ Object.defineProperty(exports, "CompactLegend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-function CompactLegend({ height , items  }) {
+function CompactLegend({ height , items , selectedItems , onLegendItemClick  }) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         component: "ul",
         sx: {
@@ -38,6 +39,8 @@ function CompactLegend({ height , items  }) {
         },
         children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     width: 'auto',
                     float: 'left',

package/dist/cjs/Legend/Legend.js

@@ -20,15 +20,81 @@ Object.defineProperty(exports, "Legend", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _immer = require("immer");
+const _model = require("../model");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
+const _tableLegend = require("./TableLegend");
 // When the number of items to display is above this number, it is likely to
 // cause performance issues in the browser. The legend will be displayed in a
 // format (list) that allows for virtualization to minimize the performance impact.
 // Set this number based on testing, but it may need to be tuned a bit on the
 // future as people test this out on different machines.
 const NEED_VIRTUALIZATION_LIMIT = 500;
-function Legend({ width , height , options , data , listProps  }) {
+function Legend({ width , height , options , data , selectedItems , onSelectedItemsChange  }) {
+    const onLegendItemClick = (e, seriesId)=>{
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        const newSelected = (0, _immer.produce)(selectedItems, (draft)=>{
+            if (draft === 'ALL') {
+                return {
+                    [seriesId]: true
+                };
+            }
+            const isSelected = !!draft[seriesId];
+            // Clicks with modifier key can select multiple items.
+            if (isModifiedClick) {
+                if (isSelected) {
+                    // Modified click on already selected item. Remove that item.
+                    delete draft[seriesId];
+                } else {
+                    // Modified click on not-selected item. Add it.
+                    draft[seriesId] = true;
+                }
+                return draft;
+            }
+            if (isSelected) {
+                // Clicked item was already selected. Unselect it and return to
+                // ALL state.
+                return 'ALL';
+            }
+            // Select clicked item.
+            return {
+                [seriesId]: true
+            };
+        });
+        onSelectedItemsChange(newSelected);
+    };
+    const mode = (0, _model.getLegendMode)(options.mode);
+    // The bottom legend is displayed as a list when the number of items is too
+    // large and requires virtualization. Otherwise, it is rendered more compactly.
+    // We do not need this check for the right-side legend because it is always
+    // a virtualized list.
+    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    const commonLegendProps = {
+        height,
+        items: data,
+        selectedItems,
+        onLegendItemClick
+    };
+    let legendContent;
+    if (mode === 'Table') {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableLegend.TableLegend, {
+            ...commonLegendProps,
+            onSelectedItemsChange: onSelectedItemsChange,
+            width: width
+        });
+    } else if (options.position === 'Right' || needsVirtualization) {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+            ...commonLegendProps,
+            width: width,
+            onLegendItemClick: onLegendItemClick
+        });
+    } else {
+        legendContent = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+            ...commonLegendProps,
+            onLegendItemClick: onLegendItemClick
+        });
+    }
     if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
@@ -38,19 +104,10 @@ function Legend({ width , height , options , data , listProps  }) {
                 top: 0,
                 right: 0
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-                items: data,
-                width: width,
-                height: height,
-                ...listProps
-            })
+            children: legendContent
         });
     }
-    // The bottom legend is displayed as a list when the number of items is too
-    // large and requires virtualization. Otherwise, it is rendered more compactly.
-    // We do not need this check for the right-side legend because it is always
-    // a virtualized list.
-    const needsVirtualization = data.length >= NEED_VIRTUALIZATION_LIMIT;
+    // Position bottom
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
         sx: {
             width: width,
@@ -58,14 +115,6 @@ function Legend({ width , height , options , data , listProps  }) {
             position: 'absolute',
             bottom: 0
         },
-        children: needsVirtualization ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
-            items: data,
-            width: width,
-            height: height,
-            ...listProps
-        }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-            items: data,
-            height: height
-        })
+        children: legendContent
     });
 }

package/dist/cjs/Legend/ListLegend.js

@@ -19,119 +19,33 @@ Object.defineProperty(exports, "ListLegend", {
     get: ()=>ListLegend
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reactWindow = require("react-window");
-const _react = require("react");
+const _reactVirtuoso = require("react-virtuoso");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
-function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = (0, _react.useRef)(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = (0, _react.useRef)({});
-    const theme = (0, _material.useTheme)();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const LIST_PADDING = parseInt(theme.spacing(1), 10);
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = (0, _react.useRef)(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = (0, _react.useCallback)(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        (0, _react.useEffect)(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
-                    width: width - LIST_PADDING,
+                    width: width,
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ (0, _react.forwardRef)(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
-            },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            }, item.id);
+        },
+        role: "list"
     });
 }