@perses-dev/components 0.0.0-snapshot-time-chart-rewrite-4667058 → 0.0.0-snapshot-panel-extra-content-3-17f9c42

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 { 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\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\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"}
+{"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;\nexport const TOOLTIP_PADDING = 8;\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\nexport type TooltipConfig = {\n  wrapLabels: boolean;\n  hidden?: boolean;\n  enablePinning?: boolean;\n};\n\nexport const DEFAULT_TOOLTIP_CONFIG: TooltipConfig = {\n  wrapLabels: true,\n  enablePinning: true,\n};\n\nexport const PIN_TOOLTIP_HELP_TEXT = 'Click chart to pin';\n\nexport const UNPIN_TOOLTIP_HELP_TEXT = 'Click to unpin';\n"],"names":["useEffect","useState","TOOLTIP_MIN_WIDTH","TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_LABELS_MAX_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_PADDING","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","DEFAULT_TOOLTIP_CONFIG","wrapLabels","enablePinning","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT"],"mappings":"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"}

package/dist/TimeSeriesTooltip/utils.d.ts

@@ -3,11 +3,11 @@ 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'], 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, containerElement?: Element | null): string;
 /**
  * Helper for tooltip positioning styles
  */
-export declare function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null): {
+export declare function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null, maxHeight?: number): {
     minWidth: number;
     maxWidth: number;
     maxHeight: number;

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,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAMX,MAAM,iBAAiB,CAAC;AAEzB;;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;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,GAAG,IAAI;;;;;;;;;;;;;;;;;;;;EAuBjF"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EACL,iBAAiB,EACjB,UAAU,EAOX,MAAM,iBAAiB,CAAC;AAEzB;;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,EACpB,gBAAgB,CAAC,EAAE,OAAO,GAAG,IAAI,UA+ClC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,iBAAiB,GAAG,IAAI,EAAE,SAAS,CAAC,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;EAwBrG"}

package/dist/TimeSeriesTooltip/utils.js

@@ -10,10 +10,10 @@
 // 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, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER, TOOLTIP_BG_COLOR_FALLBACK } from './tooltip-model';
+import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_ADJUST_Y_POS_MULTIPLIER, TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_PADDING } from './tooltip-model';
 /**
  * Determine position of tooltip depending on chart dimensions and the number of focused series
- */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth) {
+ */ export function assembleTransform(mousePos, chartWidth, pinnedPos, tooltipHeight, tooltipWidth, containerElement) {
     if (mousePos === null) {
         return 'translate3d(0, 0)';
     }
@@ -22,15 +22,28 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_ADJUS
     if (pinnedPos !== null) {
         mousePos = pinnedPos;
     }
-    // Tooltip is located in a Portal attached to the body.
+    // By default, 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
-    const x = mousePos.page.x;
+    let x = mousePos.page.x;
     let y = mousePos.page.y + cursorPaddingY;
-    // adjust so tooltip does not get cut off at bottom of chart
+    // If containerElement is defined, tooltip is attached to the containerElement instead.
+    let containerRect;
+    if (containerElement) {
+        // get the container's position relative to viewport
+        containerRect = containerElement.getBoundingClientRect();
+        // calculate the mouse position relative to container
+        x = x - containerRect.left + containerElement.scrollLeft;
+        y = y - containerRect.top + containerElement.scrollTop;
+    }
     if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {
+        // adjust so tooltip does not get cut off at bottom of chart
         // 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;
+        y = y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;
+        // If y is now above of the top of containerElement, set y close to 0 so tooltip does not get cut off
+        if (containerRect && y < containerRect.top) {
+            y = TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip
+        }
     }
     // use tooltip width to determine when to repos from right to left
     const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
@@ -39,13 +52,14 @@ import { TOOLTIP_MAX_WIDTH, TOOLTIP_MAX_HEIGHT, TOOLTIP_MIN_WIDTH, TOOLTIP_ADJUS
 }
 /**
  * Helper for tooltip positioning styles
- */ export function getTooltipStyles(theme, pinnedPos) {
+ */ export function getTooltipStyles(theme, pinnedPos, maxHeight) {
     var ref;
+    const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;
     var ref1;
     return {
         minWidth: TOOLTIP_MIN_WIDTH,
         maxWidth: TOOLTIP_MAX_WIDTH,
-        maxHeight: TOOLTIP_MAX_HEIGHT,
+        maxHeight: adjustedMaxHeight !== null && adjustedMaxHeight !== void 0 ? adjustedMaxHeight : TOOLTIP_MAX_HEIGHT,
         padding: 0,
         position: 'absolute',
         top: 0,

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 { Theme } from '@mui/material';\nimport {\n  CursorCoordinates,\n  CursorData,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_ADJUST_Y_POS_MULTIPLIER,\n  TOOLTIP_BG_COLOR_FALLBACK,\n} 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\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null) {\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    transition: 'all 0.1s ease-out',\n    // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_BG_COLOR_FALLBACK","assembleTransform","mousePos","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","cursorPaddingX","cursorPaddingY","x","page","y","client","window","innerHeight","xPosAdjustThreshold","plotCanvas","getTooltipStyles","theme","minWidth","maxWidth","maxHeight","padding","position","top","left","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY"],"mappings":"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"}
+{"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 { Theme } from '@mui/material';\nimport {\n  CursorCoordinates,\n  CursorData,\n  TOOLTIP_MAX_WIDTH,\n  TOOLTIP_MAX_HEIGHT,\n  TOOLTIP_MIN_WIDTH,\n  TOOLTIP_ADJUST_Y_POS_MULTIPLIER,\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_PADDING,\n} 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  containerElement?: Element | null\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  // By default, 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  let x = mousePos.page.x;\n  let y = mousePos.page.y + cursorPaddingY;\n\n  // If containerElement is defined, tooltip is attached to the containerElement instead.\n  let containerRect;\n  if (containerElement) {\n    // get the container's position relative to viewport\n    containerRect = containerElement.getBoundingClientRect();\n    // calculate the mouse position relative to container\n    x = x - containerRect.left + containerElement.scrollLeft;\n    y = y - containerRect.top + containerElement.scrollTop;\n  }\n\n  if (mousePos.client.y + tooltipHeight + cursorPaddingY > window.innerHeight) {\n    // adjust so tooltip does not get cut off at bottom of chart\n    // multiplier ensures tooltip isn't overly adjusted and gets cut off at the top of the viewport\n    y = y - tooltipHeight * TOOLTIP_ADJUST_Y_POS_MULTIPLIER;\n\n    // If y is now above of the top of containerElement, set y close to 0 so tooltip does not get cut off\n    if (containerRect && y < containerRect.top) {\n      y = TOOLTIP_PADDING / 2; // leaves room for some padding around tooltip\n    }\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\n/**\n * Helper for tooltip positioning styles\n */\nexport function getTooltipStyles(theme: Theme, pinnedPos: CursorCoordinates | null, maxHeight?: number) {\n  const adjustedMaxHeight = maxHeight ? maxHeight - TOOLTIP_PADDING : undefined;\n  return {\n    minWidth: TOOLTIP_MIN_WIDTH,\n    maxWidth: TOOLTIP_MAX_WIDTH,\n    maxHeight: adjustedMaxHeight ?? TOOLTIP_MAX_HEIGHT,\n    padding: 0,\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n    borderRadius: '6px',\n    color: '#fff',\n    fontSize: '11px',\n    visibility: 'visible',\n    opacity: 1,\n    transition: 'all 0.1s ease-out',\n    // Ensure pinned tooltip shows behind edit panel drawer and sticky header\n    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,\n    overflow: 'hidden',\n    '&:hover': {\n      overflowY: 'auto',\n    },\n  };\n}\n"],"names":["TOOLTIP_MAX_WIDTH","TOOLTIP_MAX_HEIGHT","TOOLTIP_MIN_WIDTH","TOOLTIP_ADJUST_Y_POS_MULTIPLIER","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_PADDING","assembleTransform","mousePos","chartWidth","pinnedPos","tooltipHeight","tooltipWidth","containerElement","cursorPaddingX","cursorPaddingY","x","page","y","containerRect","getBoundingClientRect","left","scrollLeft","top","scrollTop","client","window","innerHeight","xPosAdjustThreshold","plotCanvas","getTooltipStyles","theme","maxHeight","adjustedMaxHeight","undefined","minWidth","maxWidth","padding","position","backgroundColor","palette","designSystem","grey","borderRadius","color","fontSize","visibility","opacity","transition","zIndex","tooltip","overflow","overflowY"],"mappings":"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"}

package/dist/UnitSelector/UnitSelector.d.ts

@@ -3,6 +3,7 @@ import { UnitOptions } from '@perses-dev/core';
 export interface UnitSelectorProps {
     value: UnitOptions;
     onChange: (unit: UnitOptions) => void;
+    disabled?: boolean;
 }
-export declare function UnitSelector({ value, onChange }: UnitSelectorProps): JSX.Element;
+export declare function UnitSelector({ value, onChange, disabled }: UnitSelectorProps): JSX.Element;
 //# sourceMappingURL=UnitSelector.d.ts.map

package/dist/UnitSelector/UnitSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAEL,WAAW,EAKZ,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;CACvC;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,iBAAiB,eAqElE"}
+{"version":3,"file":"UnitSelector.d.ts","sourceRoot":"","sources":["../../src/UnitSelector/UnitSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAEL,WAAW,EAKZ,MAAM,kBAAkB,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAgB,EAAE,EAAE,iBAAiB,eAsEpF"}

package/dist/UnitSelector/UnitSelector.js

@@ -56,7 +56,7 @@ const DECIMAL_PLACES_OPTIONS = [
 function getOptionByDecimalPlaces(decimal_places) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
 }
-export function UnitSelector({ value , onChange  }) {
+export function UnitSelector({ value , onChange , disabled =false  }) {
     const hasDecimalPlaces = isUnitWithDecimalPlaces(value);
     const hasAbbreviate = isUnitWithAbbreviate(value);
     const handleKindChange = (_, newValue)=>{
@@ -101,7 +101,8 @@ export function UnitSelector({ value , onChange  }) {
                     options: KIND_OPTIONS,
                     groupBy: (option)=>option.group,
                     onChange: handleKindChange,
-                    disableClearable: true
+                    disableClearable: true,
+                    disabled: disabled
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {

package/dist/UnitSelector/UnitSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/UnitSelector/UnitSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  shouldAbbreviate,\n  UnitOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldAbbreviate","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","disabled","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}
+{"version":3,"sources":["../../src/UnitSelector/UnitSelector.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  shouldAbbreviate,\n  UnitOptions,\n  UNIT_CONFIG,\n  UnitConfig,\n  isUnitWithDecimalPlaces,\n  isUnitWithAbbreviate,\n} from '@perses-dev/core';\nimport { OptionsEditorControl } from '../OptionsEditorLayout';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\n\nexport interface UnitSelectorProps {\n  value: UnitOptions;\n  onChange: (unit: UnitOptions) => void;\n  disabled?: boolean;\n}\n\ntype AutocompleteKindOption = UnitConfig & { id: UnitOptions['kind'] };\n\nconst KIND_OPTIONS: AutocompleteKindOption[] = Object.entries(UNIT_CONFIG)\n  .map(([id, config]) => {\n    return {\n      id: id as UnitOptions['kind'],\n      ...config,\n    };\n  })\n  .filter((config) => !config.disableSelectorOption);\n\nconst DECIMAL_PLACES_OPTIONS = [\n  { id: 'default', label: 'Default', decimal_places: undefined },\n  { id: '0', label: '0', decimal_places: 0 },\n  { id: '1', label: '1', decimal_places: 1 },\n  { id: '2', label: '2', decimal_places: 2 },\n  { id: '3', label: '3', decimal_places: 3 },\n  { id: '4', label: '4', decimal_places: 4 },\n];\n\nfunction getOptionByDecimalPlaces(decimal_places?: number) {\n  return DECIMAL_PLACES_OPTIONS.find((o) => o.decimal_places === decimal_places);\n}\n\nexport function UnitSelector({ value, onChange, disabled = false }: UnitSelectorProps) {\n  const hasDecimalPlaces = isUnitWithDecimalPlaces(value);\n  const hasAbbreviate = isUnitWithAbbreviate(value);\n\n  const handleKindChange = (_: unknown, newValue: AutocompleteKindOption) => {\n    onChange({\n      kind: newValue.id,\n    });\n  };\n\n  const handleDecimalPlacesChange = (_: unknown, { decimal_places }: { decimal_places: number | undefined }) => {\n    if (hasDecimalPlaces) {\n      onChange({\n        ...value,\n        decimal_places: decimal_places,\n      });\n    }\n  };\n\n  const handleAbbreviateChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    if (hasAbbreviate) {\n      onChange({\n        ...value,\n        abbreviate: checked,\n      });\n    }\n  };\n\n  const kindConfig = UNIT_CONFIG[value.kind];\n\n  return (\n    <>\n      <OptionsEditorControl\n        label=\"Abbreviate\"\n        control={\n          <Switch\n            checked={hasAbbreviate ? shouldAbbreviate(value.abbreviate) : false}\n            onChange={handleAbbreviateChange}\n            disabled={!hasAbbreviate}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label=\"Unit\"\n        control={\n          <SettingsAutocomplete\n            value={{ id: value.kind, ...kindConfig }}\n            options={KIND_OPTIONS}\n            groupBy={(option) => option.group}\n            onChange={handleKindChange}\n            disableClearable\n            disabled={disabled}\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Decimals\"\n        control={\n          <SettingsAutocomplete\n            value={getOptionByDecimalPlaces(value.decimal_places)}\n            options={DECIMAL_PLACES_OPTIONS}\n            getOptionLabel={(o) => o.label}\n            onChange={handleDecimalPlacesChange}\n            disabled={!hasDecimalPlaces}\n            disableClearable\n          />\n        }\n      />\n    </>\n  );\n}\n"],"names":["Switch","shouldAbbreviate","UNIT_CONFIG","isUnitWithDecimalPlaces","isUnitWithAbbreviate","OptionsEditorControl","SettingsAutocomplete","KIND_OPTIONS","Object","entries","map","id","config","filter","disableSelectorOption","DECIMAL_PLACES_OPTIONS","label","decimal_places","undefined","getOptionByDecimalPlaces","find","o","UnitSelector","value","onChange","disabled","hasDecimalPlaces","hasAbbreviate","handleKindChange","_","newValue","kind","handleDecimalPlacesChange","handleAbbreviateChange","checked","abbreviate","kindConfig","control","options","groupBy","option","group","disableClearable","getOptionLabel"],"mappings":"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"}

package/dist/cjs/BarChart/BarChart.js

@@ -0,0 +1,129 @@
+// 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, "BarChart", {
+    enumerable: true,
+    get: ()=>BarChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+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 _material = require("@mui/material");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _echart = require("../EChart");
+(0, _core1.use)([
+    _charts.BarChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const BAR_WIN_WIDTH = 14;
+const BAR_GAP = 6;
+function BarChart(props) {
+    const { width , height , data , unit ={
+        kind: 'Decimal'
+    } , mode ='value'  } = props;
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const option = (0, _react.useMemo)(()=>{
+        if (data == null) return chartsTheme.noDataOption;
+        const source = [];
+        data.map((d)=>{
+            source.push([
+                d.label,
+                d.value
+            ]);
+        });
+        return {
+            title: {
+                show: false
+            },
+            dataset: [
+                {
+                    dimensions: [
+                        'label',
+                        'value'
+                    ],
+                    source: source
+                }
+            ],
+            xAxis: {},
+            yAxis: {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            },
+            series: {
+                type: 'bar',
+                label: {
+                    show: true,
+                    position: 'right',
+                    formatter: (params)=>{
+                        if (mode === 'percentage') {
+                            return params.data[1] && (0, _core.formatValue)(params.data[1], {
+                                kind: 'Percent',
+                                decimal_places: unit.decimal_places
+                            });
+                        }
+                        return params.data[1] && (0, _core.formatValue)(params.data[1], unit);
+                    },
+                    barMinWidth: BAR_WIN_WIDTH,
+                    barCategoryGap: BAR_GAP
+                },
+                itemStyle: {
+                    borderRadius: 4,
+                    color: chartsTheme.echartsTheme[0]
+                }
+            },
+            tooltip: {
+                appendToBody: true,
+                confine: true,
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], unit)}`
+            }
+        };
+    }, [
+        data,
+        chartsTheme,
+        width,
+        mode,
+        unit
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            width: width,
+            height: height,
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}

package/dist/cjs/BarChart/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("./BarChart"), 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/Dialog/DiscardChangesConfirmationDialog.js

@@ -0,0 +1,53 @@
+// 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, "DiscardChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>DiscardChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _dialog = require("./Dialog");
+const DiscardChangesConfirmationDialog = (props)=>{
+    const { description , isOpen , onCancel , onDiscardChanges  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog, {
+        open: isOpen,
+        "aria-labelledby": "discard-dialog",
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Header, {
+                children: "Discard Changes"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dialog.Dialog.Content, {
+                children: description
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_dialog.Dialog.Actions, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: onDiscardChanges,
+                        children: "Discard Changes"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "outlined",
+                        color: "secondary",
+                        onClick: onCancel,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/cjs/Dialog/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./Dialog"), exports);
+_exportStar(require("./DiscardChangesConfirmationDialog"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/FontSizeSelector/FontSizeSelector.js

@@ -0,0 +1,130 @@
+// 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, "FontSizeSelector", {
+    enumerable: true,
+    get: ()=>FontSizeSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const FONT_SIZE_OPTIONS = [
+    {
+        id: 'default',
+        label: 'Default',
+        value: undefined
+    },
+    {
+        id: '12',
+        label: '12',
+        value: 12
+    },
+    {
+        id: '14',
+        label: '14',
+        value: 14
+    },
+    {
+        id: '16',
+        label: '16',
+        value: 16
+    },
+    {
+        id: '20',
+        label: '20',
+        value: 20
+    },
+    {
+        id: '24',
+        label: '24',
+        value: 24
+    },
+    {
+        id: '28',
+        label: '28',
+        value: 28
+    },
+    {
+        id: '32',
+        label: '32',
+        value: 32
+    },
+    {
+        id: '36',
+        label: '36',
+        value: 36
+    },
+    {
+        id: '40',
+        label: '40',
+        value: 40
+    },
+    {
+        id: '48',
+        label: '48',
+        value: 48
+    },
+    {
+        id: '56',
+        label: '56',
+        value: 56
+    },
+    {
+        id: '64',
+        label: '64',
+        value: 64
+    },
+    {
+        id: '72',
+        label: '72',
+        value: 72
+    },
+    {
+        id: '96',
+        label: '96',
+        value: 96
+    },
+    {
+        id: '128',
+        label: '128',
+        value: 128
+    },
+    {
+        id: '160',
+        label: '160',
+        value: 160
+    },
+    {
+        id: '192',
+        label: '192',
+        value: 192
+    }
+];
+function FontSizeSelector({ value , onChange  }) {
+    const handleFontSizeChange = (_, { value  })=>{
+        onChange(value);
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+        label: "Font Size",
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
+            value: FONT_SIZE_OPTIONS.find((o)=>o.value === value),
+            options: FONT_SIZE_OPTIONS,
+            getOptionLabel: (o)=>o.label,
+            onChange: handleFontSizeChange,
+            disableClearable: true
+        })
+    });
+}

package/dist/cjs/FontSizeSelector/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("./FontSizeSelector"), 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;
+}