@dynatrace/strato-components 3.6.0 → 3.7.1

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.js

@@ -1,4 +1,3 @@
-import { getDefaultAction } from "../../../../core/components/series-action/hooks/useDefaultAction.js";
 import { safeGet } from "../../../../core/utils/safe-get.js";
 import { buildAreaSeriesActionItem } from "../../../utils/build-series-action-item.js";
 import {
@@ -9,9 +8,7 @@ const buildClosestPointTooltipHeaderProps = ({
   series,
   seriesToMetadata,
   seriesWithDatapoints,
-  datapointMetadataMap,
-  truncationMode,
-  idFactory = () => crypto.randomUUID()
+  datapointMetadataMap
 }) => {
   const metadata = safeGet(seriesToMetadata, series);
   const enrichedDatapoint = {
@@ -21,10 +18,6 @@ const buildClosestPointTooltipHeaderProps = ({
   };
   const { name = "", color = { Default: "blue" } } = metadata;
   const shape = "shape" in metadata ? metadata.shape : void 0;
-  const content = {
-    id: idFactory(),
-    name
-  };
   let actions = void 0;
   if (isAreaTooltipContext(enrichedDatapoint)) {
     const { actions: seriesActions } = enrichedDatapoint.metadata;
@@ -49,8 +42,6 @@ const buildClosestPointTooltipHeaderProps = ({
     color: color.Default,
     name,
     actions,
-    defaultActions: getDefaultAction(content),
-    truncationMode,
     shape
   };
 };

package/esm/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/ClosestPointTooltip/closestPointTooltipHeaderUtils.ts"],
-  "sourcesContent": ["import { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AreaSeriesToMetadata,\n  AreaSeriesWithDatapoints,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { buildAreaSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\nimport type { XYChartTooltipHeaderProps } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';\n\nexport interface BuildClosestPointTooltipHeaderPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  seriesWithDatapoints: AreaSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  truncationMode?: XYChartTooltipHeaderProps['truncationMode'];\n  idFactory?: () => string;\n}\n\nexport const buildClosestPointTooltipHeaderProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  truncationMode,\n  idFactory = () => crypto.randomUUID(),\n}: BuildClosestPointTooltipHeaderPropsArgs<\n  T,\n  K\n>): XYChartTooltipHeaderProps => {\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata,\n  };\n\n  const { name = '', color = { Default: 'blue' } } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  const content = {\n    id: idFactory(),\n    name: name,\n  };\n\n  let actions: (() => SeriesActionsTemplate) | undefined = undefined;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = seriesActions\n      ? () => {\n          const actionItem = buildAreaSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as AreaSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return seriesActions(actionItem);\n        }\n      : undefined;\n  } else {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = () =>\n      (\n        seriesActions as (\n          datapoint: K & { name: string },\n        ) => SeriesActionsTemplate\n      )?.({\n        ...datapoint,\n        name,\n      });\n  }\n\n  return {\n    color: color.Default,\n    name,\n    actions,\n    defaultActions: getDefaultAction(content),\n    truncationMode,\n    shape,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,wBAAwB;AAEjC,SAAS,eAAe;AAMxB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAKK;AAgBA,MAAM,sCAAsC,CAGjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM,OAAO,WAAW;AACtC,MAGiC;AAC/B,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,OAAO,EAAE,IAAI;AAEnD,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,QAAM,UAAU;AAAA,IACd,IAAI,UAAU;AAAA,IACd;AAAA,EACF;AAEA,MAAI,UAAqD;AAEzD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,gBACN,MAAM;AACJ,YAAM,aAAa,0BAA0B;AAAA,QAC3C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,cAAc,UAAU;AAAA,IACjC,IACA;AAAA,EACN,OAAO;AACL,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,MAEN,gBAGE;AAAA,MACF,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA,gBAAgB,iBAAiB,OAAO;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type {\n  AreaSeriesToMetadata,\n  AreaSeriesWithDatapoints,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport { buildAreaSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport {\n  isAreaTooltipContext,\n  type ClosestDatapoint,\n  type ClosestSeries,\n  type ClosestSeriesToMetadata,\n  type TooltipContextClosestPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildClosestPointTooltipHeaderPropsArgs<\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: ClosestSeriesToMetadata<T>;\n  seriesWithDatapoints: AreaSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n}\n\nexport const buildClosestPointTooltipHeaderProps = <\n  T extends ClosestSeries,\n  K extends ClosestDatapoint<T>,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n}: BuildClosestPointTooltipHeaderPropsArgs<T, K>) => {\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextClosestPoints = {\n    series,\n    datapoint,\n    metadata,\n  };\n\n  const { name = '', color = { Default: 'blue' } } = metadata;\n\n  const shape = 'shape' in metadata ? metadata.shape : undefined;\n\n  let actions: (() => SeriesActionsTemplate) | undefined = undefined;\n\n  if (isAreaTooltipContext(enrichedDatapoint)) {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = seriesActions\n      ? () => {\n          const actionItem = buildAreaSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as AreaSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return seriesActions(actionItem);\n        }\n      : undefined;\n  } else {\n    const { actions: seriesActions } = enrichedDatapoint.metadata;\n    actions = () =>\n      (\n        seriesActions as (\n          datapoint: K & { name: string },\n        ) => SeriesActionsTemplate\n      )?.({\n        ...datapoint,\n        name,\n      });\n  }\n\n  return {\n    color: color.Default,\n    name,\n    actions,\n    shape,\n  };\n};\n"],
+  "mappings": "AACA,SAAS,eAAe;AAMxB,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,OAKK;AAaA,MAAM,sCAAsC,CAGjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,OAAO,IAAI,QAAQ,EAAE,SAAS,OAAO,EAAE,IAAI;AAEnD,QAAM,QAAQ,WAAW,WAAW,SAAS,QAAQ;AAErD,MAAI,UAAqD;AAEzD,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,gBACN,MAAM;AACJ,YAAM,aAAa,0BAA0B;AAAA,QAC3C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,cAAc,UAAU;AAAA,IACjC,IACA;AAAA,EACN,OAAO;AACL,UAAM,EAAE,SAAS,cAAc,IAAI,kBAAkB;AACrD,cAAU,MAEN,gBAGE;AAAA,MACF,GAAG;AAAA,MACH;AAAA,IACF,CAAC;AAAA,EACL;AAEA,SAAO;AAAA,IACL,OAAO,MAAM;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js

@@ -35,6 +35,9 @@ function getHoveredPointTooltipBodyContent(intl, v0, v1, formatter, toPercentage
     )}`;
     const formattedEnd = args.v1 === void 0 ? formattedStart : `${format(args.v1)}${percentageSuffix(args.v1)}`;
     text = args.v1 === void 0 ? formattedStart : `${formattedStart} ${separator} ${formattedEnd}`;
+    if (args.v1 !== void 0) {
+      duration = format(Math.abs(args.v1 - args.v0));
+    }
     return { duration, text };
   }
   if (isTimeTooltip(args) && formatter) {

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.ts"],
-  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport { XYCHART_MESSAGES } from '../../../../messages/messages.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
-  "mappings": "AAEA,SAAS,wBAAwB;AAMjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,KAAK,cAAc,iBAAiB,aAAa;AAEnE,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport { formatResolution } from '../../../../../core/components/tooltip/utils/resolution-formatter.js';\nimport type {\n  FormatterWithPrecision,\n  StringFormatter,\n  TimeFrameFormatter,\n} from '../../../../../core/types/formatter.js';\nimport { XYCHART_MESSAGES } from '../../../../messages/messages.js';\nimport type { XYAccessorDataTypes } from '../../../../types/xy-chart.js';\nimport {\n  isCategoricalTooltip,\n  isNumericalToolTip,\n  isTimeTooltip,\n} from '../../../../utils/type-guards.js';\n\n/**\n * Pure function that formats tooltip body content.\n * This can be called from non-React contexts (like utility functions).\n *\n * `formatter` is discriminated by the value type: a `StringFormatter` for\n * categorical axes, a `FormatterWithPrecision` for numerical axes, and a\n * `TimeFrameFormatter` for time axes.\n */\nexport function getHoveredPointTooltipBodyContent(\n  intl: IntlShape,\n  v0?: XYAccessorDataTypes | undefined,\n  v1?: XYAccessorDataTypes | undefined,\n  formatter?: FormatterWithPrecision | TimeFrameFormatter | StringFormatter,\n  toPercentage?: (value: number) => number,\n) {\n  const separator = intl.formatMessage(XYCHART_MESSAGES.separatorDash);\n\n  let duration: string | undefined;\n  let text = '';\n\n  const primaryValue = v0 ?? v1;\n  const secondaryValue = v0 !== undefined && v1 !== undefined ? v1 : undefined;\n\n  if (primaryValue === undefined) {\n    return { duration, text };\n  }\n\n  const args = {\n    formatter,\n    v0: primaryValue,\n    v1: secondaryValue,\n  };\n\n  if (isCategoricalTooltip(args)) {\n    const format = formatter as StringFormatter | undefined;\n    const formatValue = (v: string) => (format ? format(v) : v);\n    const startText = formatValue(String(args.v0));\n    const endText =\n      args.v1 === undefined ? startText : formatValue(String(args.v1));\n\n    text =\n      args.v1 === undefined\n        ? startText\n        : `${startText} ${separator} ${endText}`;\n\n    return { duration, text };\n  }\n\n  if (isNumericalToolTip(args) && formatter) {\n    const format = formatter as FormatterWithPrecision;\n    const percentageSuffix = (v: number) =>\n      toPercentage ? ` (${toPercentage(v)}%)` : '';\n    const formattedStart = `${format(args.v0 as number)}${percentageSuffix(\n      args.v0,\n    )}`;\n    const formattedEnd =\n      args.v1 === undefined\n        ? formattedStart\n        : `${format(args.v1 as number)}${percentageSuffix(args.v1)}`;\n\n    text =\n      args.v1 === undefined\n        ? formattedStart\n        : `${formattedStart} ${separator} ${formattedEnd}`;\n\n    if (args.v1 !== undefined) {\n      duration = format(Math.abs((args.v1 as number) - (args.v0 as number)));\n    }\n\n    return { duration, text };\n  }\n\n  if (isTimeTooltip(args) && formatter) {\n    const format = formatter as TimeFrameFormatter;\n\n    if (args.v0 instanceof Date) {\n      text = format(args.v0, args.v1 instanceof Date ? args.v1 : undefined);\n\n      if (args.v1 instanceof Date) {\n        duration = formatResolution(args.v0, args.v1);\n      }\n    }\n  }\n\n  return { duration, text };\n}\n"],
+  "mappings": "AAEA,SAAS,wBAAwB;AAMjC,SAAS,wBAAwB;AAEjC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAUA,SAAS,kCACd,MACA,IACA,IACA,WACA,cACA;AACA,QAAM,YAAY,KAAK,cAAc,iBAAiB,aAAa;AAEnE,MAAI;AACJ,MAAI,OAAO;AAEX,QAAM,eAAe,MAAM;AAC3B,QAAM,iBAAiB,OAAO,UAAa,OAAO,SAAY,KAAK;AAEnE,MAAI,iBAAiB,QAAW;AAC9B,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,QAAM,OAAO;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAEA,MAAI,qBAAqB,IAAI,GAAG;AAC9B,UAAM,SAAS;AACf,UAAM,cAAc,CAAC,MAAe,SAAS,OAAO,CAAC,IAAI;AACzD,UAAM,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAC7C,UAAM,UACJ,KAAK,OAAO,SAAY,YAAY,YAAY,OAAO,KAAK,EAAE,CAAC;AAEjE,WACE,KAAK,OAAO,SACR,YACA,GAAG,SAAS,IAAI,SAAS,IAAI,OAAO;AAE1C,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,mBAAmB,IAAI,KAAK,WAAW;AACzC,UAAM,SAAS;AACf,UAAM,mBAAmB,CAAC,MACxB,eAAe,KAAK,aAAa,CAAC,CAAC,OAAO;AAC5C,UAAM,iBAAiB,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG;AAAA,MACpD,KAAK;AAAA,IACP,CAAC;AACD,UAAM,eACJ,KAAK,OAAO,SACR,iBACA,GAAG,OAAO,KAAK,EAAY,CAAC,GAAG,iBAAiB,KAAK,EAAE,CAAC;AAE9D,WACE,KAAK,OAAO,SACR,iBACA,GAAG,cAAc,IAAI,SAAS,IAAI,YAAY;AAEpD,QAAI,KAAK,OAAO,QAAW;AACzB,iBAAW,OAAO,KAAK,IAAK,KAAK,KAAiB,KAAK,EAAa,CAAC;AAAA,IACvE;AAEA,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAEA,MAAI,cAAc,IAAI,KAAK,WAAW;AACpC,UAAM,SAAS;AAEf,QAAI,KAAK,cAAc,MAAM;AAC3B,aAAO,OAAO,KAAK,IAAI,KAAK,cAAc,OAAO,KAAK,KAAK,MAAS;AAEpE,UAAI,KAAK,cAAc,MAAM;AAC3B,mBAAW,iBAAiB,KAAK,IAAI,KAAK,EAAE;AAAA,MAC9C;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,UAAU,KAAK;AAC1B;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.js

@@ -1,4 +1,3 @@
-import { getDefaultAction } from "../../../../core/components/series-action/hooks/useDefaultAction.js";
 import { getFormatter } from "../../../../core/utils/get-formatter.js";
 import { safeGet } from "../../../../core/utils/safe-get.js";
 import { buildBarSeriesActionItem } from "../../../utils/build-series-action-item.js";
@@ -13,11 +12,9 @@ const buildHoveredPointTooltipHeaderProps = ({
   seriesToMetadata,
   seriesWithDatapoints,
   datapointMetadataMap,
-  colorScaleMap,
-  truncationMode,
-  idFactory = () => crypto.randomUUID()
+  colorScaleMap
 }) => {
-  let content;
+  let name = "";
   let valueToDisplay = "";
   let colorToDisplay = "";
   let actions;
@@ -32,11 +29,7 @@ const buildHoveredPointTooltipHeaderProps = ({
     const datapointMetadata = safeGet(datapointMetadataMap, datapoint);
     const rawValue = enrichedDatapoint.datapoint.value;
     const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } = enrichedDatapoint.metadata;
-    const tooltipName = valueAccessorLabel ?? valueAccessor ?? "";
-    content = {
-      id: idFactory(),
-      name: tooltipName
-    };
+    name = valueAccessorLabel ?? valueAccessor ?? "";
     valueToDisplay = typeof rawValue === "number" ? getFormatter(valueFormatter)(rawValue, valueUnit) : rawValue?.toString() ?? "";
     colorToDisplay = rawValue !== void 0 ? getColorFromScaleAndData(
       colorScale,
@@ -46,11 +39,8 @@ const buildHoveredPointTooltipHeaderProps = ({
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => metadataActions(enrichedDatapoint.datapoint) : void 0;
   } else if (isBarTooltipContext(enrichedDatapoint)) {
-    const { color, name } = metadata;
-    content = {
-      id: idFactory(),
-      name: name ?? ""
-    };
+    const { color, name: barName } = metadata;
+    name = barName ?? "";
     colorToDisplay = color?.Default ?? "";
     const metadataActions = enrichedDatapoint.metadata.actions;
     actions = metadataActions ? () => {
@@ -63,19 +53,12 @@ const buildHoveredPointTooltipHeaderProps = ({
       });
       return metadataActions(actionItem);
     } : void 0;
-  } else {
-    content = {
-      id: idFactory(),
-      name: ""
-    };
   }
   return {
     color: colorToDisplay,
-    name: content.name,
+    name,
     value: valueToDisplay,
-    actions,
-    defaultActions: getDefaultAction(content),
-    truncationMode
+    actions
   };
 };
 export {

package/esm/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/HoveredPointTooltip/hoveredPointTooltipHeaderUtils.ts"],
-  "sourcesContent": ["import { getDefaultAction } from '../../../../core/components/series-action/hooks/useDefaultAction.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { getFormatter } from '../../../../core/utils/get-formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport type {\n  BarMetadata,\n  BarSeriesToMetadata,\n  BarSeriesWithDatapoints,\n  RectDatapointInternal,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../../types/xy-chart.js';\nimport { buildBarSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport { getColorFromScaleAndData } from '../../../utils/coloring/get-color-from-scale-and-data.js';\nimport {\n  type HoveredDatapoint,\n  type HoveredSeries,\n  isBarTooltipContext,\n  isRectTooltipContext,\n  type HoveredSeriesToMetadata,\n  type TooltipContextHoveredPoints,\n} from '../../../utils/type-guards.js';\nimport type { XYChartTooltipHeaderProps } from '../XYChartTooltipHeader/XYChartTooltipHeader.js';\n\nexport interface BuildHoveredPointTooltipHeaderPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  seriesWithDatapoints: BarSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  colorScaleMap: SeriesIdToColorScale;\n  truncationMode?: XYChartTooltipHeaderProps['truncationMode'];\n  idFactory?: () => string;\n}\n\ntype TooltipContent = {\n  id: string;\n  name: string;\n};\n\nexport const buildHoveredPointTooltipHeaderProps = <\n  T extends HoveredSeries,\n  K extends T extends BarSeriesWithDatapoints\n    ? BarDatapoint\n    : RectDatapointInternal,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  colorScaleMap,\n  truncationMode,\n  idFactory = () => crypto.randomUUID(),\n}: BuildHoveredPointTooltipHeaderPropsArgs<\n  T,\n  K\n>): XYChartTooltipHeaderProps => {\n  let content: TooltipContent;\n  let valueToDisplay = '';\n  let colorToDisplay = '';\n  let actions: (() => SeriesActionsTemplate) | undefined;\n\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextHoveredPoints = {\n    series,\n    datapoint,\n    metadata: metadata,\n  };\n\n  if (isRectTooltipContext(enrichedDatapoint)) {\n    const colorScale = safeGet(colorScaleMap, series.id);\n    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n    const rawValue = enrichedDatapoint.datapoint.value;\n    const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } =\n      enrichedDatapoint.metadata;\n\n    const tooltipName = valueAccessorLabel ?? valueAccessor ?? '';\n    content = {\n      id: idFactory(),\n      name: tooltipName,\n    };\n\n    valueToDisplay =\n      typeof rawValue === 'number'\n        ? getFormatter(valueFormatter)(rawValue, valueUnit)\n        : rawValue?.toString() ?? '';\n\n    colorToDisplay =\n      rawValue !== undefined\n        ? getColorFromScaleAndData(\n            colorScale,\n            enrichedDatapoint.datapoint.value,\n            datapointMetadata.colorOverride,\n          ) ?? ''\n        : '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n\n    actions = metadataActions\n      ? () => metadataActions(enrichedDatapoint.datapoint)\n      : undefined;\n  } else if (isBarTooltipContext(enrichedDatapoint)) {\n    const { color, name } = metadata as BarMetadata;\n\n    content = {\n      id: idFactory(),\n      name: name ?? '',\n    };\n\n    colorToDisplay = color?.Default ?? '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n    actions = metadataActions\n      ? () => {\n          const actionItem = buildBarSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as BarSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return metadataActions(actionItem);\n        }\n      : undefined;\n  } else {\n    content = {\n      id: idFactory(),\n      name: '',\n    };\n  }\n\n  return {\n    color: colorToDisplay,\n    name: content.name,\n    value: valueToDisplay,\n    actions,\n    defaultActions: getDefaultAction(content),\n    truncationMode,\n  };\n};\n"],
-  "mappings": "AAAA,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAUxB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;AAsBA,MAAM,sCAAsC,CAKjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM,OAAO,WAAW;AACtC,MAGiC;AAC/B,MAAI;AACJ,MAAI,iBAAiB;AACrB,MAAI,iBAAiB;AACrB,MAAI;AAEJ,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,aAAa,QAAQ,eAAe,OAAO,EAAE;AACnD,UAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AACjE,UAAM,WAAW,kBAAkB,UAAU;AAC7C,UAAM,EAAE,oBAAoB,eAAe,gBAAgB,UAAU,IACnE,kBAAkB;AAEpB,UAAM,cAAc,sBAAsB,iBAAiB;AAC3D,cAAU;AAAA,MACR,IAAI,UAAU;AAAA,MACd,MAAM;AAAA,IACR;AAEA,qBACE,OAAO,aAAa,WAChB,aAAa,cAAc,EAAE,UAAU,SAAS,IAChD,UAAU,SAAS,KAAK;AAE9B,qBACE,aAAa,SACT;AAAA,MACE;AAAA,MACA,kBAAkB,UAAU;AAAA,MAC5B,kBAAkB;AAAA,IACpB,KAAK,KACL;AAEN,UAAM,kBAAkB,kBAAkB,SAAS;AAEnD,cAAU,kBACN,MAAM,gBAAgB,kBAAkB,SAAS,IACjD;AAAA,EACN,WAAW,oBAAoB,iBAAiB,GAAG;AACjD,UAAM,EAAE,OAAO,KAAK,IAAI;AAExB,cAAU;AAAA,MACR,IAAI,UAAU;AAAA,MACd,MAAM,QAAQ;AAAA,IAChB;AAEA,qBAAiB,OAAO,WAAW;AAEnC,UAAM,kBAAkB,kBAAkB,SAAS;AACnD,cAAU,kBACN,MAAM;AACJ,YAAM,aAAa,yBAAyB;AAAA,QAC1C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,gBAAgB,UAAU;AAAA,IACnC,IACA;AAAA,EACN,OAAO;AACL,cAAU;AAAA,MACR,IAAI,UAAU;AAAA,MACd,MAAM;AAAA,IACR;AAAA,EACF;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP,MAAM,QAAQ;AAAA,IACd,OAAO;AAAA,IACP;AAAA,IACA,gBAAgB,iBAAiB,OAAO;AAAA,IACxC;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { getFormatter } from '../../../../core/utils/get-formatter.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport type {\n  BarMetadata,\n  BarSeriesToMetadata,\n  BarSeriesWithDatapoints,\n  RectDatapointInternal,\n  MapDatapoints,\n} from '../../../types/xy-chart-internals.js';\nimport type { BarDatapoint } from '../../../types/xy-chart.js';\nimport { buildBarSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport { getColorFromScaleAndData } from '../../../utils/coloring/get-color-from-scale-and-data.js';\nimport {\n  type HoveredDatapoint,\n  type HoveredSeries,\n  isBarTooltipContext,\n  isRectTooltipContext,\n  type HoveredSeriesToMetadata,\n  type TooltipContextHoveredPoints,\n} from '../../../utils/type-guards.js';\n\nexport interface BuildHoveredPointTooltipHeaderPropsArgs<\n  T extends HoveredSeries,\n  K extends HoveredDatapoint<T>,\n> {\n  datapoint: K;\n  series: T;\n  seriesToMetadata: HoveredSeriesToMetadata<T>;\n  seriesWithDatapoints: BarSeriesWithDatapoints[];\n  datapointMetadataMap: MapDatapoints;\n  colorScaleMap: SeriesIdToColorScale;\n}\n\nexport const buildHoveredPointTooltipHeaderProps = <\n  T extends HoveredSeries,\n  K extends T extends BarSeriesWithDatapoints\n    ? BarDatapoint\n    : RectDatapointInternal,\n>({\n  datapoint,\n  series,\n  seriesToMetadata,\n  seriesWithDatapoints,\n  datapointMetadataMap,\n  colorScaleMap,\n}: BuildHoveredPointTooltipHeaderPropsArgs<T, K>) => {\n  let name = '';\n  let valueToDisplay = '';\n  let colorToDisplay = '';\n  let actions: (() => SeriesActionsTemplate) | undefined;\n\n  const metadata = safeGet(seriesToMetadata, series);\n\n  const enrichedDatapoint: TooltipContextHoveredPoints = {\n    series,\n    datapoint,\n    metadata: metadata,\n  };\n\n  if (isRectTooltipContext(enrichedDatapoint)) {\n    const colorScale = safeGet(colorScaleMap, series.id);\n    const datapointMetadata = safeGet(datapointMetadataMap, datapoint);\n    const rawValue = enrichedDatapoint.datapoint.value;\n    const { valueAccessorLabel, valueAccessor, valueFormatter, valueUnit } =\n      enrichedDatapoint.metadata;\n\n    name = valueAccessorLabel ?? valueAccessor ?? '';\n\n    valueToDisplay =\n      typeof rawValue === 'number'\n        ? getFormatter(valueFormatter)(rawValue, valueUnit)\n        : rawValue?.toString() ?? '';\n\n    colorToDisplay =\n      rawValue !== undefined\n        ? getColorFromScaleAndData(\n            colorScale,\n            enrichedDatapoint.datapoint.value,\n            datapointMetadata.colorOverride,\n          ) ?? ''\n        : '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n\n    actions = metadataActions\n      ? () => metadataActions(enrichedDatapoint.datapoint)\n      : undefined;\n  } else if (isBarTooltipContext(enrichedDatapoint)) {\n    const { color, name: barName } = metadata as BarMetadata;\n\n    name = barName ?? '';\n    colorToDisplay = color?.Default ?? '';\n\n    const metadataActions = enrichedDatapoint.metadata.actions;\n    actions = metadataActions\n      ? () => {\n          const actionItem = buildBarSeriesActionItem({\n            datapoint: enrichedDatapoint.datapoint,\n            allSeries: seriesWithDatapoints,\n            seriesToMetadata:\n              seriesToMetadata as unknown as BarSeriesToMetadata,\n            datapointMetadataMap,\n            currentSeries: enrichedDatapoint.series,\n          });\n          return metadataActions(actionItem);\n        }\n      : undefined;\n  }\n\n  return {\n    color: colorToDisplay,\n    name,\n    value: valueToDisplay,\n    actions,\n  };\n};\n"],
+  "mappings": "AACA,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AAUxB,SAAS,gCAAgC;AACzC,SAAS,gCAAgC;AACzC;AAAA,EAGE;AAAA,EACA;AAAA,OAGK;AAcA,MAAM,sCAAsC,CAKjD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqD;AACnD,MAAI,OAAO;AACX,MAAI,iBAAiB;AACrB,MAAI,iBAAiB;AACrB,MAAI;AAEJ,QAAM,WAAW,QAAQ,kBAAkB,MAAM;AAEjD,QAAM,oBAAiD;AAAA,IACrD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,MAAI,qBAAqB,iBAAiB,GAAG;AAC3C,UAAM,aAAa,QAAQ,eAAe,OAAO,EAAE;AACnD,UAAM,oBAAoB,QAAQ,sBAAsB,SAAS;AACjE,UAAM,WAAW,kBAAkB,UAAU;AAC7C,UAAM,EAAE,oBAAoB,eAAe,gBAAgB,UAAU,IACnE,kBAAkB;AAEpB,WAAO,sBAAsB,iBAAiB;AAE9C,qBACE,OAAO,aAAa,WAChB,aAAa,cAAc,EAAE,UAAU,SAAS,IAChD,UAAU,SAAS,KAAK;AAE9B,qBACE,aAAa,SACT;AAAA,MACE;AAAA,MACA,kBAAkB,UAAU;AAAA,MAC5B,kBAAkB;AAAA,IACpB,KAAK,KACL;AAEN,UAAM,kBAAkB,kBAAkB,SAAS;AAEnD,cAAU,kBACN,MAAM,gBAAgB,kBAAkB,SAAS,IACjD;AAAA,EACN,WAAW,oBAAoB,iBAAiB,GAAG;AACjD,UAAM,EAAE,OAAO,MAAM,QAAQ,IAAI;AAEjC,WAAO,WAAW;AAClB,qBAAiB,OAAO,WAAW;AAEnC,UAAM,kBAAkB,kBAAkB,SAAS;AACnD,cAAU,kBACN,MAAM;AACJ,YAAM,aAAa,yBAAyB;AAAA,QAC1C,WAAW,kBAAkB;AAAA,QAC7B,WAAW;AAAA,QACX;AAAA,QAEA;AAAA,QACA,eAAe,kBAAkB;AAAA,MACnC,CAAC;AACD,aAAO,gBAAgB,UAAU;AAAA,IACnC,IACA;AAAA,EACN;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,IACP;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useIntl } from "react-intl";
+import {
+  buildSharedTooltipHeader,
+  buildSharedTooltipRow
+} from "./sharedXYChartTooltipUtils.js";
+import { OverlayTooltip } from "../../../../core/components/overlay-tooltip/OverlayTooltip.js";
+import { useAxesFormatter } from "../../../hooks/useAxesFormatter.js";
+import { useBarData } from "../../../hooks/useBarData.js";
+import { useFormatCategory } from "../../../hooks/useFormatCategory.js";
+import { useXYChartColorScales } from "../../../hooks/useXYChartColorScales.js";
+import { useXYChartData } from "../../../hooks/useXYChartData.js";
+import { useXYChartTruncationMode } from "../../../hooks/useXYChartTruncationMode.js";
+function SharedXYChartTooltip({
+  preferred,
+  datapoints
+}) {
+  const { seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap } = useXYChartData();
+  const axisIdToFormatter = useAxesFormatter();
+  const intl = useIntl();
+  const colorScaleMap = useXYChartColorScales();
+  const { truncationMode } = useXYChartTruncationMode();
+  const formatCategory = useFormatCategory();
+  const { filteredSeriesWithDatapoints } = useBarData();
+  const ctx = {
+    seriesToMetadata,
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    formatCategory,
+    intl,
+    colorScaleMap,
+    allBarSeries: filteredSeriesWithDatapoints
+  };
+  const { xAxisValue, xAxisDuration, label } = buildSharedTooltipHeader(
+    preferred,
+    ctx
+  );
+  const ctxRef = useRef(ctx);
+  ctxRef.current = ctx;
+  const prevDatapointsRef = useRef([]);
+  const seriesItemsRef = useRef([]);
+  if (datapoints.length !== prevDatapointsRef.current.length || datapoints.some((d, i) => d !== prevDatapointsRef.current[i])) {
+    prevDatapointsRef.current = datapoints;
+    seriesItemsRef.current = datapoints.map((result) => {
+      const row = buildSharedTooltipRow(
+        result,
+        ctxRef.current
+      );
+      return {
+        name: row.name,
+        value: row.yAxisDuration ? `${row.yAxisValue} (${row.yAxisDuration})` : row.yAxisValue,
+        color: row.color,
+        actions: row.actions
+      };
+    });
+  }
+  return /* @__PURE__ */ jsxs(OverlayTooltip, { truncation: truncationMode, children: [
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Header,
+      {
+        header1: xAxisValue,
+        duration1: xAxisDuration,
+        label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      OverlayTooltip.Series,
+      {
+        data: seriesItemsRef.current,
+        variant: "shared",
+        activeItem: -1,
+        seriesItemTemplate: (item) => /* @__PURE__ */ jsx(OverlayTooltip.SeriesItem, { ...item })
+      }
+    )
+  ] });
+}
+export {
+  SharedXYChartTooltip
+};
+//# sourceMappingURL=SharedXYChartTooltip.js.map

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/SharedXYChartTooltip/SharedXYChartTooltip.tsx"],
+  "sourcesContent": ["import { useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  buildSharedTooltipHeader,\n  buildSharedTooltipRow,\n} from './sharedXYChartTooltipUtils.js';\nimport { OverlayTooltip } from '../../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport type { SeriesItemProps } from '../../../../core/components/overlay-tooltip/types/series.js';\nimport type { SeriesQueryResult } from '../../../context/XYChartOverlayPerformance.context.js';\nimport { useAxesFormatter } from '../../../hooks/useAxesFormatter.js';\nimport { useBarData } from '../../../hooks/useBarData.js';\nimport { useFormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { useXYChartColorScales } from '../../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../../hooks/useXYChartData.js';\nimport { useXYChartTruncationMode } from '../../../hooks/useXYChartTruncationMode.js';\nimport type { TooltipContent } from '../../../types/state.js';\n\nexport function SharedXYChartTooltip({\n  preferred,\n  datapoints,\n}: Readonly<{\n  preferred: TooltipContent;\n  datapoints: SeriesQueryResult[];\n}>) {\n  const { seriesToMetadata, axisIdToScaleDomain, datapointMetadataMap } =\n    useXYChartData();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { truncationMode } = useXYChartTruncationMode();\n  const formatCategory = useFormatCategory();\n  const { filteredSeriesWithDatapoints } = useBarData();\n\n  const ctx = {\n    seriesToMetadata,\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    formatCategory,\n    intl,\n    colorScaleMap,\n    allBarSeries: filteredSeriesWithDatapoints,\n  };\n\n  const { xAxisValue, xAxisDuration, label } = buildSharedTooltipHeader(\n    preferred,\n    ctx,\n  );\n\n  const ctxRef = useRef(ctx);\n  ctxRef.current = ctx;\n\n  const prevDatapointsRef = useRef<SeriesQueryResult[]>([]);\n  const seriesItemsRef = useRef<SeriesItemProps[]>([]);\n\n  if (\n    datapoints.length !== prevDatapointsRef.current.length ||\n    datapoints.some((d, i) => d !== prevDatapointsRef.current[i])\n  ) {\n    prevDatapointsRef.current = datapoints;\n    seriesItemsRef.current = datapoints.map((result) => {\n      const row = buildSharedTooltipRow(\n        result as TooltipContent,\n        ctxRef.current,\n      );\n      return {\n        name: row.name,\n        value: row.yAxisDuration\n          ? `${row.yAxisValue} (${row.yAxisDuration})`\n          : row.yAxisValue,\n        color: row.color,\n        actions: row.actions,\n      };\n    });\n  }\n\n  return (\n    <OverlayTooltip truncation={truncationMode}>\n      <OverlayTooltip.Header\n        header1={xAxisValue}\n        duration1={xAxisDuration}\n        label={label}\n      />\n      <OverlayTooltip.Series\n        data={seriesItemsRef.current}\n        variant=\"shared\"\n        activeItem={-1}\n        seriesItemTemplate={(item) => <OverlayTooltip.SeriesItem {...item} />}\n      />\n    </OverlayTooltip>\n  );\n}\n"],
+  "mappings": "AA8EI,SACE,KADF;AA9EJ,SAAS,cAAc;AACvB,SAAS,eAAe;AAExB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAG/B,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,yBAAyB;AAClC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,gCAAgC;AAGlC,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AACF,GAGI;AACF,QAAM,EAAE,kBAAkB,qBAAqB,qBAAqB,IAClE,eAAe;AACjB,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,eAAe,IAAI,yBAAyB;AACpD,QAAM,iBAAiB,kBAAkB;AACzC,QAAM,EAAE,6BAA6B,IAAI,WAAW;AAEpD,QAAM,MAAM;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB;AAEA,QAAM,EAAE,YAAY,eAAe,MAAM,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACF;AAEA,QAAM,SAAS,OAAO,GAAG;AACzB,SAAO,UAAU;AAEjB,QAAM,oBAAoB,OAA4B,CAAC,CAAC;AACxD,QAAM,iBAAiB,OAA0B,CAAC,CAAC;AAEnD,MACE,WAAW,WAAW,kBAAkB,QAAQ,UAChD,WAAW,KAAK,CAAC,GAAG,MAAM,MAAM,kBAAkB,QAAQ,CAAC,CAAC,GAC5D;AACA,sBAAkB,UAAU;AAC5B,mBAAe,UAAU,WAAW,IAAI,CAAC,WAAW;AAClD,YAAM,MAAM;AAAA,QACV;AAAA,QACA,OAAO;AAAA,MACT;AACA,aAAO;AAAA,QACL,MAAM,IAAI;AAAA,QACV,OAAO,IAAI,gBACP,GAAG,IAAI,UAAU,KAAK,IAAI,aAAa,MACvC,IAAI;AAAA,QACR,OAAO,IAAI;AAAA,QACX,SAAS,IAAI;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,SACE,qBAAC,kBAAe,YAAY,gBAC1B;AAAA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC,eAAe;AAAA,MAAf;AAAA,QACC,MAAM,eAAe;AAAA,QACrB,SAAQ;AAAA,QACR,YAAY;AAAA,QACZ,oBAAoB,CAAC,SAAS,oBAAC,eAAe,YAAf,EAA2B,GAAG,MAAM;AAAA;AAAA,IACrE;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.js

@@ -0,0 +1,110 @@
+import { safeGet } from "../../../../core/utils/safe-get.js";
+import { isCategorical } from "../../../types/guards.js";
+import {
+  BAR_VARIANT,
+  RECT_VARIANT
+} from "../../../types/xy-chart-internals.js";
+import { buildBarSeriesActionItem } from "../../../utils/build-series-action-item.js";
+import { getRelativeAccessor } from "../../../utils/value-representation.js";
+import { buildClosestPointTooltipBodyProps } from "../ClosestPointTooltip/closestPointTooltipBodyUtils.js";
+import { getHoveredPointTooltipBodyContent } from "../HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js";
+import { buildHoveredPointTooltipBodyProps } from "../HoveredPointTooltip/hoveredPointTooltipBodyUtils.js";
+import { getColor } from "../utils/get-color.js";
+import { getTooltipFormatter } from "../utils/get-tooltip-formatter.js";
+function buildTooltipBody(content, ctx) {
+  const isHoveredShape = content.type === RECT_VARIANT || content.type === BAR_VARIANT;
+  if (isHoveredShape) {
+    return buildHoveredPointTooltipBodyProps({
+      datapoint: content.datapoint,
+      series: content.series,
+      seriesToMetadata: ctx.seriesToMetadata,
+      axisIdToFormatter: ctx.axisIdToFormatter,
+      axisIdToScaleDomain: ctx.axisIdToScaleDomain,
+      datapointMetadataMap: ctx.datapointMetadataMap,
+      formatCategory: ctx.formatCategory,
+      intl: ctx.intl
+    });
+  }
+  return buildClosestPointTooltipBodyProps({
+    datapoint: content.datapoint,
+    series: content.series,
+    seriesToMetadata: ctx.seriesToMetadata,
+    axisIdToFormatter: ctx.axisIdToFormatter,
+    axisIdToScaleDomain: ctx.axisIdToScaleDomain,
+    datapointMetadataMap: ctx.datapointMetadataMap,
+    intl: ctx.intl
+  });
+}
+function buildSharedTooltipHeader(preferred, ctx) {
+  const { xAxisValue, xAxisDuration } = buildTooltipBody(preferred, ctx);
+  return {
+    xAxisValue,
+    xAxisDuration,
+    label: preferred.datapoint.x0 instanceof Date ? "" : void 0
+  };
+}
+function buildRowYAxisValue(result, metadata, ctx) {
+  const {
+    axisIdToFormatter,
+    axisIdToScaleDomain,
+    datapointMetadataMap,
+    formatCategory,
+    intl
+  } = ctx;
+  const { yAxis } = metadata;
+  const yResolvedFormatter = isCategorical(yAxis.type) ? (value) => formatCategory(yAxis, value) ?? value : getTooltipFormatter(yAxis, axisIdToFormatter, intl);
+  const datapointMetadata = datapointMetadataMap.get(result.datapoint);
+  const binDomain = datapointMetadata?.binDomain;
+  const isRelative = typeof binDomain === "number" && binDomain;
+  const yRelativeDomain = isRelative && datapointMetadata?.baseline === "x" ? { min: binDomain * -1, max: binDomain } : safeGet(axisIdToScaleDomain, yAxis.id);
+  const { y0, y1 } = result.datapoint;
+  const { text: yAxisValue, duration: yAxisDuration } = getHoveredPointTooltipBodyContent(
+    intl,
+    y0,
+    y1,
+    yResolvedFormatter,
+    getRelativeAccessor(yAxis, yRelativeDomain)
+  );
+  return { yAxisValue, yAxisDuration };
+}
+function buildSharedTooltipRow(result, ctx) {
+  const {
+    seriesToMetadata,
+    datapointMetadataMap,
+    colorScaleMap,
+    allBarSeries
+  } = ctx;
+  const metadata = safeGet(seriesToMetadata, result.series);
+  const colorOverride = result.type === RECT_VARIANT ? safeGet(datapointMetadataMap, result.datapoint).colorOverride : void 0;
+  const color = getColor(
+    result.series,
+    result.datapoint,
+    metadata,
+    colorScaleMap,
+    colorOverride
+  ) ?? "";
+  const { yAxisValue, yAxisDuration } = result.type === BAR_VARIANT || result.type === RECT_VARIANT ? buildRowYAxisValue(result, metadata, ctx) : buildTooltipBody(result, ctx);
+  let actions;
+  if (result.type === BAR_VARIANT) {
+    const metadataActions = metadata.actions;
+    if (metadataActions) {
+      const { datapoint, series } = result;
+      actions = () => {
+        const actionItem = buildBarSeriesActionItem({
+          datapoint,
+          allSeries: allBarSeries,
+          seriesToMetadata,
+          datapointMetadataMap,
+          currentSeries: series
+        });
+        return metadataActions(actionItem);
+      };
+    }
+  }
+  return { name: metadata.name, color, yAxisValue, yAxisDuration, actions };
+}
+export {
+  buildSharedTooltipHeader,
+  buildSharedTooltipRow
+};
+//# sourceMappingURL=sharedXYChartTooltipUtils.js.map

package/esm/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/SharedXYChartTooltip/sharedXYChartTooltipUtils.ts"],
+  "sourcesContent": ["import type { IntlShape } from 'react-intl';\n\nimport type { MinMax } from '../../../../core/types/min-max.js';\nimport type { SeriesActionsTemplate } from '../../../../core/types/series-actions-template.js';\nimport { safeGet } from '../../../../core/utils/safe-get.js';\nimport type { SeriesIdToColorScale } from '../../../context/XYChartColorScales.context.js';\nimport type { FormatCategory } from '../../../hooks/useFormatCategory.js';\nimport { isCategorical } from '../../../types/guards.js';\nimport type { TooltipContent } from '../../../types/state.js';\nimport {\n  BAR_VARIANT,\n  RECT_VARIANT,\n  type AxisIdToFormatter,\n  type AxisIdToScaleDomain,\n  type BarMetadata,\n  type BarSeriesToMetadata,\n  type BarSeriesWithDatapoints,\n  type BaseMetadata,\n  type DotMetadata,\n  type LineMetadata,\n  type MapDatapoints,\n  type RectMetadata,\n  type RectSeriesToMetadata,\n  type SeriesToMetadata,\n} from '../../../types/xy-chart-internals.js';\nimport { buildBarSeriesActionItem } from '../../../utils/build-series-action-item.js';\nimport { getRelativeAccessor } from '../../../utils/value-representation.js';\nimport { buildClosestPointTooltipBodyProps } from '../ClosestPointTooltip/closestPointTooltipBodyUtils.js';\nimport { getHoveredPointTooltipBodyContent } from '../HoveredPointTooltip/hooks/getHoveredPointTooltipBodyContent.js';\nimport { buildHoveredPointTooltipBodyProps } from '../HoveredPointTooltip/hoveredPointTooltipBodyUtils.js';\nimport { getColor } from '../utils/get-color.js';\nimport { getTooltipFormatter } from '../utils/get-tooltip-formatter.js';\nimport type { XYChartTooltipBodyProps } from '../XYChartTooltipBody/XYChartTooltipBody.js';\n\ntype SharedTooltipContext = {\n  seriesToMetadata: SeriesToMetadata;\n  axisIdToFormatter: AxisIdToFormatter;\n  axisIdToScaleDomain: AxisIdToScaleDomain;\n  datapointMetadataMap: MapDatapoints;\n  formatCategory: FormatCategory;\n  intl: IntlShape;\n  allBarSeries: BarSeriesWithDatapoints[];\n};\n\nexport type SharedTooltipRow = {\n  name: string;\n  color: string;\n  yAxisValue: string;\n  yAxisDuration: string | undefined;\n  actions?: () => SeriesActionsTemplate;\n};\n\nexport type SharedTooltipHeader = {\n  xAxisValue: string;\n  xAxisDuration: string | undefined;\n  label: string | undefined;\n};\n\n/**\n * Bar/Rect have explicit hovered geometry, so they format via the\n * hovered-point helper. Dot/Line/Area pick the closest sample under\n * the cursor and format via the closest-point helper. Both helpers\n * return the same `XYChartTooltipBodyProps` shape.\n */\nfunction buildTooltipBody(\n  content: TooltipContent,\n  ctx: SharedTooltipContext,\n): XYChartTooltipBodyProps {\n  const isHoveredShape =\n    content.type === RECT_VARIANT || content.type === BAR_VARIANT;\n\n  if (isHoveredShape) {\n    return buildHoveredPointTooltipBodyProps({\n      datapoint: content.datapoint,\n      series: content.series,\n      seriesToMetadata: ctx.seriesToMetadata as unknown as RectSeriesToMetadata,\n      axisIdToFormatter: ctx.axisIdToFormatter,\n      axisIdToScaleDomain: ctx.axisIdToScaleDomain,\n      datapointMetadataMap: ctx.datapointMetadataMap,\n      formatCategory: ctx.formatCategory,\n      intl: ctx.intl,\n    });\n  }\n\n  return buildClosestPointTooltipBodyProps({\n    datapoint: content.datapoint,\n    series: content.series,\n    seriesToMetadata: ctx.seriesToMetadata as never,\n    axisIdToFormatter: ctx.axisIdToFormatter,\n    axisIdToScaleDomain: ctx.axisIdToScaleDomain,\n    datapointMetadataMap: ctx.datapointMetadataMap,\n    intl: ctx.intl,\n  });\n}\n\nexport function buildSharedTooltipHeader(\n  preferred: TooltipContent,\n  ctx: SharedTooltipContext,\n): SharedTooltipHeader {\n  const { xAxisValue, xAxisDuration } = buildTooltipBody(preferred, ctx);\n  return {\n    xAxisValue,\n    xAxisDuration,\n    label: preferred.datapoint.x0 instanceof Date ? '' : undefined,\n  };\n}\n\n// Computes only the y-axis formatted value for a BAR/RECT row, reusing the\n// already-retrieved metadata to avoid a second seriesToMetadata lookup and\n// skipping x-axis formatting that is unused in shared tooltip rows.\nfunction buildRowYAxisValue(\n  result: Extract<\n    TooltipContent,\n    { type: typeof BAR_VARIANT | typeof RECT_VARIANT }\n  >,\n  metadata: BaseMetadata,\n  ctx: SharedTooltipContext,\n): { yAxisValue: string; yAxisDuration: string | undefined } {\n  const {\n    axisIdToFormatter,\n    axisIdToScaleDomain,\n    datapointMetadataMap,\n    formatCategory,\n    intl,\n  } = ctx;\n  const { yAxis } = metadata;\n\n  const yResolvedFormatter = isCategorical(yAxis.type)\n    ? (value: string) => formatCategory(yAxis, value) ?? value\n    : getTooltipFormatter(yAxis, axisIdToFormatter, intl);\n\n  const datapointMetadata = datapointMetadataMap.get(result.datapoint);\n  const binDomain = datapointMetadata?.binDomain;\n  const isRelative = typeof binDomain === 'number' && binDomain;\n\n  // Mirrors the `xDomain` variable in buildHoveredPointTooltipBodyProps \u2014\n  // confusingly named there, it is the domain fed into the y-axis relative accessor.\n  const yRelativeDomain: MinMax =\n    isRelative && datapointMetadata?.baseline === 'x'\n      ? { min: binDomain * -1, max: binDomain }\n      : (safeGet(axisIdToScaleDomain, yAxis.id) as MinMax);\n\n  const { y0, y1 } = result.datapoint;\n  const { text: yAxisValue, duration: yAxisDuration } =\n    getHoveredPointTooltipBodyContent(\n      intl,\n      y0,\n      y1,\n      yResolvedFormatter,\n      getRelativeAccessor(yAxis, yRelativeDomain),\n    );\n\n  return { yAxisValue, yAxisDuration };\n}\n\nexport function buildSharedTooltipRow(\n  result: TooltipContent,\n  ctx: SharedTooltipContext & { colorScaleMap: SeriesIdToColorScale },\n): SharedTooltipRow {\n  const {\n    seriesToMetadata,\n    datapointMetadataMap,\n    colorScaleMap,\n    allBarSeries,\n  } = ctx;\n  const metadata = safeGet(seriesToMetadata, result.series);\n  const colorOverride =\n    result.type === RECT_VARIANT\n      ? safeGet(datapointMetadataMap, result.datapoint).colorOverride\n      : undefined;\n\n  // `getColor` returns the rect color from the color scale when applicable\n  // and otherwise falls back to `metadata.color.Default`. The cast is safe\n  // at runtime: `AreaMetadata` is structurally compatible.\n  const color =\n    getColor(\n      result.series,\n      result.datapoint,\n      metadata as RectMetadata | BarMetadata | DotMetadata | LineMetadata,\n      colorScaleMap,\n      colorOverride,\n    ) ?? '';\n\n  // BAR/RECT: use the already-retrieved metadata and skip x-axis formatting,\n  // which is unused in rows. Other shapes fall back to buildTooltipBody\n  // (unreachable in the shared tooltip variant but kept for safety).\n  const { yAxisValue, yAxisDuration } =\n    result.type === BAR_VARIANT || result.type === RECT_VARIANT\n      ? buildRowYAxisValue(result, metadata, ctx)\n      : buildTooltipBody(result, ctx);\n\n  let actions: (() => SeriesActionsTemplate) | undefined;\n  if (result.type === BAR_VARIANT) {\n    const metadataActions = (metadata as BarMetadata).actions;\n    if (metadataActions) {\n      const { datapoint, series } = result;\n      actions = () => {\n        const actionItem = buildBarSeriesActionItem({\n          datapoint,\n          allSeries: allBarSeries,\n          seriesToMetadata: seriesToMetadata as unknown as BarSeriesToMetadata,\n          datapointMetadataMap,\n          currentSeries: series,\n        });\n        return metadataActions(actionItem);\n      };\n    }\n  }\n\n  return { name: metadata.name, color, yAxisValue, yAxisDuration, actions };\n}\n"],
+  "mappings": "AAIA,SAAS,eAAe;AAGxB,SAAS,qBAAqB;AAE9B;AAAA,EACE;AAAA,EACA;AAAA,OAaK;AACP,SAAS,gCAAgC;AACzC,SAAS,2BAA2B;AACpC,SAAS,yCAAyC;AAClD,SAAS,yCAAyC;AAClD,SAAS,yCAAyC;AAClD,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AAiCpC,SAAS,iBACP,SACA,KACyB;AACzB,QAAM,iBACJ,QAAQ,SAAS,gBAAgB,QAAQ,SAAS;AAEpD,MAAI,gBAAgB;AAClB,WAAO,kCAAkC;AAAA,MACvC,WAAW,QAAQ;AAAA,MACnB,QAAQ,QAAQ;AAAA,MAChB,kBAAkB,IAAI;AAAA,MACtB,mBAAmB,IAAI;AAAA,MACvB,qBAAqB,IAAI;AAAA,MACzB,sBAAsB,IAAI;AAAA,MAC1B,gBAAgB,IAAI;AAAA,MACpB,MAAM,IAAI;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,SAAO,kCAAkC;AAAA,IACvC,WAAW,QAAQ;AAAA,IACnB,QAAQ,QAAQ;AAAA,IAChB,kBAAkB,IAAI;AAAA,IACtB,mBAAmB,IAAI;AAAA,IACvB,qBAAqB,IAAI;AAAA,IACzB,sBAAsB,IAAI;AAAA,IAC1B,MAAM,IAAI;AAAA,EACZ,CAAC;AACH;AAEO,SAAS,yBACd,WACA,KACqB;AACrB,QAAM,EAAE,YAAY,cAAc,IAAI,iBAAiB,WAAW,GAAG;AACrE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO,UAAU,UAAU,cAAc,OAAO,KAAK;AAAA,EACvD;AACF;AAKA,SAAS,mBACP,QAIA,UACA,KAC2D;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,EAAE,MAAM,IAAI;AAElB,QAAM,qBAAqB,cAAc,MAAM,IAAI,IAC/C,CAAC,UAAkB,eAAe,OAAO,KAAK,KAAK,QACnD,oBAAoB,OAAO,mBAAmB,IAAI;AAEtD,QAAM,oBAAoB,qBAAqB,IAAI,OAAO,SAAS;AACnE,QAAM,YAAY,mBAAmB;AACrC,QAAM,aAAa,OAAO,cAAc,YAAY;AAIpD,QAAM,kBACJ,cAAc,mBAAmB,aAAa,MAC1C,EAAE,KAAK,YAAY,IAAI,KAAK,UAAU,IACrC,QAAQ,qBAAqB,MAAM,EAAE;AAE5C,QAAM,EAAE,IAAI,GAAG,IAAI,OAAO;AAC1B,QAAM,EAAE,MAAM,YAAY,UAAU,cAAc,IAChD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,OAAO,eAAe;AAAA,EAC5C;AAEF,SAAO,EAAE,YAAY,cAAc;AACrC;AAEO,SAAS,sBACd,QACA,KACkB;AAClB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,WAAW,QAAQ,kBAAkB,OAAO,MAAM;AACxD,QAAM,gBACJ,OAAO,SAAS,eACZ,QAAQ,sBAAsB,OAAO,SAAS,EAAE,gBAChD;AAKN,QAAM,QACJ;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,KAAK;AAKP,QAAM,EAAE,YAAY,cAAc,IAChC,OAAO,SAAS,eAAe,OAAO,SAAS,eAC3C,mBAAmB,QAAQ,UAAU,GAAG,IACxC,iBAAiB,QAAQ,GAAG;AAElC,MAAI;AACJ,MAAI,OAAO,SAAS,aAAa;AAC/B,UAAM,kBAAmB,SAAyB;AAClD,QAAI,iBAAiB;AACnB,YAAM,EAAE,WAAW,OAAO,IAAI;AAC9B,gBAAU,MAAM;AACd,cAAM,aAAa,yBAAyB;AAAA,UAC1C;AAAA,UACA,WAAW;AAAA,UACX;AAAA,UACA;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AACD,eAAO,gBAAgB,UAAU;AAAA,MACnC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAE,MAAM,SAAS,MAAM,OAAO,YAAY,eAAe,QAAQ;AAC1E;",
+  "names": []
+}

package/esm/charts/xy-chart/components/tooltip/XYChartOverlayTooltip.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { SharedXYChartTooltip } from "./SharedXYChartTooltip/SharedXYChartTooltip.js";
 import { XYChartTooltipContent } from "./XYChartTooltipContent.js";
 import {
   useSelector,
@@ -13,7 +14,11 @@ const XYChartOverlayTooltip = () => {
   if (isTooltipDataEmpty(data)) {
     return null;
   }
-  return /* @__PURE__ */ jsx(XYChartTooltipContent, { content: data.metadata });
+  const { preferred, datapoints } = data.metadata;
+  if (datapoints.length > 1) {
+    return /* @__PURE__ */ jsx(SharedXYChartTooltip, { preferred, datapoints });
+  }
+  return /* @__PURE__ */ jsx(XYChartTooltipContent, { content: preferred });
 };
 XYChartOverlayTooltip["displayName"] = "XYChartOverlayTooltip";
 export {

package/esm/charts/xy-chart/components/tooltip/XYChartOverlayTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/tooltip/XYChartOverlayTooltip.tsx"],
-  "sourcesContent": ["import { XYChartTooltipContent } from './XYChartTooltipContent.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { TooltipContent } from '../../types/state.js';\n\nexport const XYChartOverlayTooltip = () => {\n  useSelector(\n    ({ pinned, relativeX, relativeY }) => `${pinned}-${relativeX}-${relativeY}`,\n  );\n  const { data } = useTooltipSnapshot();\n\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  return <XYChartTooltipContent content={data.metadata as TooltipContent} />;\n};\n\nXYChartOverlayTooltip['displayName'] = 'XYChartOverlayTooltip';\n"],
-  "mappings": "AAkBS;AAlBT,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAG5B,MAAM,wBAAwB,MAAM;AACzC;AAAA,IACE,CAAC,EAAE,QAAQ,WAAW,UAAU,MAAM,GAAG,MAAM,IAAI,SAAS,IAAI,SAAS;AAAA,EAC3E;AACA,QAAM,EAAE,KAAK,IAAI,mBAAmB;AAEpC,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,SAAO,oBAAC,yBAAsB,SAAS,KAAK,UAA4B;AAC1E;AAEA,sBAAsB,aAAa,IAAI;",
+  "sourcesContent": ["import { SharedXYChartTooltip } from './SharedXYChartTooltip/SharedXYChartTooltip.js';\nimport { XYChartTooltipContent } from './XYChartTooltipContent.js';\nimport {\n  useSelector,\n  useTooltipSnapshot,\n} from '../../../core/components/overlay-tooltip/selectors.js';\nimport { isTooltipDataEmpty } from '../../../core/components/overlay-tooltip/utils.js';\nimport type { XYChartTooltipMetadata } from '../../types/state.js';\n\nexport const XYChartOverlayTooltip = () => {\n  useSelector(\n    ({ pinned, relativeX, relativeY }) => `${pinned}-${relativeX}-${relativeY}`,\n  );\n  const { data } = useTooltipSnapshot();\n\n  if (isTooltipDataEmpty(data)) {\n    return null;\n  }\n\n  const { preferred, datapoints } = data.metadata as XYChartTooltipMetadata;\n\n  if (datapoints.length > 1) {\n    return (\n      <SharedXYChartTooltip preferred={preferred} datapoints={datapoints} />\n    );\n  }\n\n  return <XYChartTooltipContent content={preferred} />;\n};\n\nXYChartOverlayTooltip['displayName'] = 'XYChartOverlayTooltip';\n"],
+  "mappings": "AAuBM;AAvBN,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAG5B,MAAM,wBAAwB,MAAM;AACzC;AAAA,IACE,CAAC,EAAE,QAAQ,WAAW,UAAU,MAAM,GAAG,MAAM,IAAI,SAAS,IAAI,SAAS;AAAA,EAC3E;AACA,QAAM,EAAE,KAAK,IAAI,mBAAmB;AAEpC,MAAI,mBAAmB,IAAI,GAAG;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,EAAE,WAAW,WAAW,IAAI,KAAK;AAEvC,MAAI,WAAW,SAAS,GAAG;AACzB,WACE,oBAAC,wBAAqB,WAAsB,YAAwB;AAAA,EAExE;AAEA,SAAO,oBAAC,yBAAsB,SAAS,WAAW;AACpD;AAEA,sBAAsB,aAAa,IAAI;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipContent.js

@@ -10,8 +10,8 @@ import { OverlayTooltip } from "../../../core/components/overlay-tooltip/Overlay
 import { safeGet } from "../../../core/utils/safe-get.js";
 import { useAxesFormatter } from "../../hooks/useAxesFormatter.js";
 import { useXYChartColorScales } from "../../hooks/useXYChartColorScales.js";
-import { useXYChartCustomTooltip } from "../../hooks/useXYChartCustomTooltip.js";
 import { useXYChartData } from "../../hooks/useXYChartData.js";
+import { useXYChartTooltip } from "../../hooks/useXYChartTooltip.js";
 import {
   AREA_VARIANT,
   BAR_VARIANT,
@@ -22,7 +22,7 @@ import {
 const XYChartTooltipContent = ({
   content
 }) => {
-  const customTooltip = useXYChartCustomTooltip();
+  const customTooltip = useXYChartTooltip();
   const axisIdToFormatter = useAxesFormatter();
   const intl = useIntl();
   const colorScaleMap = useXYChartColorScales();

package/esm/charts/xy-chart/components/tooltip/XYChartTooltipContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/xy-chart/components/tooltip/XYChartTooltipContent.tsx"],
-  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartCustomTooltip } from '../../hooks/useXYChartCustomTooltip.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartCustomTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n\n  if (customTooltip?.hidden) {\n    return null;\n  }\n\n  if (customTooltip?.template) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.template?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return (\n        <OverlayTooltip legacyTemplate={customTooltipContent}></OverlayTooltip>\n      );\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
-  "mappings": "AAyDQ;AAzDR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,wBAAwB;AAC9C,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAEhD,MAAI,eAAe,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aACE,oBAAC,kBAAe,gBAAgB,sBAAsB;AAAA,IAE1D;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { useIntl } from 'react-intl';\n\nimport { AreaSeriesTooltip } from './AreaSeriesTooltip.js';\nimport { BarSeriesTooltip } from './BarSeriesTooltip.js';\nimport { DotSeriesTooltip } from './DotSeriesTooltip.js';\nimport { LineSeriesTooltip } from './LineSeriesTooltip.js';\nimport { RectSeriesTooltip } from './RectSeriesTooltip.js';\nimport { getCustomTooltipPayload } from './utils/get-custom-tooltip-payload.js';\nimport { OverlayTooltip } from '../../../core/components/overlay-tooltip/OverlayTooltip.js';\nimport { safeGet } from '../../../core/utils/safe-get.js';\nimport { useAxesFormatter } from '../../hooks/useAxesFormatter.js';\nimport { useXYChartColorScales } from '../../hooks/useXYChartColorScales.js';\nimport { useXYChartData } from '../../hooks/useXYChartData.js';\nimport { useXYChartTooltip } from '../../hooks/useXYChartTooltip.js';\nimport type { TooltipContent } from '../../types/state.js';\nimport {\n  AREA_VARIANT,\n  BAR_VARIANT,\n  DOT_VARIANT,\n  LINE_VARIANT,\n  RECT_VARIANT,\n} from '../../types/xy-chart-internals.js';\n\nexport const XYChartTooltipContent = ({\n  content,\n}: {\n  content: TooltipContent;\n}) => {\n  const customTooltip = useXYChartTooltip();\n  const axisIdToFormatter = useAxesFormatter();\n  const intl = useIntl();\n  const colorScaleMap = useXYChartColorScales();\n  const { seriesToMetadata } = useXYChartData();\n  const { datapointMetadataMap } = useXYChartData();\n\n  if (customTooltip?.hidden) {\n    return null;\n  }\n\n  if (customTooltip?.template) {\n    const customTooltipPayload = getCustomTooltipPayload(\n      content,\n      safeGet(seriesToMetadata, content.series),\n      axisIdToFormatter,\n      intl,\n      colorScaleMap,\n      safeGet(datapointMetadataMap, content.datapoint).colorOverride,\n    );\n\n    const customTooltipContent = customTooltip.template?.(customTooltipPayload);\n\n    if (customTooltipContent === null) {\n      return null;\n    }\n\n    if (customTooltipContent) {\n      return (\n        <OverlayTooltip legacyTemplate={customTooltipContent}></OverlayTooltip>\n      );\n    }\n  }\n\n  switch (content.type) {\n    case RECT_VARIANT:\n      return (\n        <RectSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case BAR_VARIANT:\n      return (\n        <BarSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case DOT_VARIANT:\n      return (\n        <DotSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case LINE_VARIANT:\n      return (\n        <LineSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n    case AREA_VARIANT:\n      return (\n        <AreaSeriesTooltip\n          datapoint={content.datapoint}\n          series={content.series}\n        />\n      );\n\n    default:\n      return null;\n  }\n};\n"],
+  "mappings": "AAyDQ;AAzDR,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAClC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,+BAA+B;AACxC,SAAS,sBAAsB;AAC/B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,6BAA6B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,yBAAyB;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEM;AACJ,QAAM,gBAAgB,kBAAkB;AACxC,QAAM,oBAAoB,iBAAiB;AAC3C,QAAM,OAAO,QAAQ;AACrB,QAAM,gBAAgB,sBAAsB;AAC5C,QAAM,EAAE,iBAAiB,IAAI,eAAe;AAC5C,QAAM,EAAE,qBAAqB,IAAI,eAAe;AAEhD,MAAI,eAAe,QAAQ;AACzB,WAAO;AAAA,EACT;AAEA,MAAI,eAAe,UAAU;AAC3B,UAAM,uBAAuB;AAAA,MAC3B;AAAA,MACA,QAAQ,kBAAkB,QAAQ,MAAM;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,sBAAsB,QAAQ,SAAS,EAAE;AAAA,IACnD;AAEA,UAAM,uBAAuB,cAAc,WAAW,oBAAoB;AAE1E,QAAI,yBAAyB,MAAM;AACjC,aAAO;AAAA,IACT;AAEA,QAAI,sBAAsB;AACxB,aACE,oBAAC,kBAAe,gBAAgB,sBAAsB;AAAA,IAE1D;AAAA,EACF;AAEA,UAAQ,QAAQ,MAAM;AAAA,IACpB,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAEJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,QAAQ,QAAQ;AAAA;AAAA,MAClB;AAAA,IAGJ;AACE,aAAO;AAAA,EACX;AACF;",
   "names": []
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.css

@@ -1,23 +1,23 @@
-._1u58xor0-3-6-0 {
+._1u58xor0-3-7-1 {
   display: flex;
   flex-wrap: wrap;
   overflow-wrap: anywhere;
   margin-left: var(--dt-spacings-size-4, 4px);
   margin-right: var(--dt-spacings-size-4, 4px);
 }
-._1u58xor1-3-6-0 {
+._1u58xor1-3-7-1 {
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1u58xor1-3-6-0::after {
+._1u58xor1-3-7-1::after {
   content: " ";
   white-space: pre;
 }
-._1u58xor2-3-6-0 {
+._1u58xor2-3-7-1 {
   flex: 0 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }
-._1u58xor3-3-6-0 {
+._1u58xor3-3-7-1 {
   flex: 1 1 auto;
   font-weight: var(--dt-typography-text-small-default-weight, 400);
 }

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js

@@ -1,8 +1,8 @@
 import "./tooltip-styles.css";
-var axisName = "_1u58xor1-3-6-0";
-var axisValue = "_1u58xor2-3-6-0";
-var duration = "_1u58xor3-3-6-0";
-var wrapper = "_1u58xor0-3-6-0";
+var axisName = "_1u58xor1-3-7-1";
+var axisValue = "_1u58xor2-3-7-1";
+var duration = "_1u58xor3-3-7-1";
+var wrapper = "_1u58xor0-3-7-1";
 export {
   axisName,
   axisValue,

package/esm/charts/xy-chart/components/tooltip/utils/tooltip-styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/xy-chart/components/tooltip/utils/tooltip-styles.css.ts"],
-  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-6-0';\nexport var axisValue = '_1u58xor2-3-6-0';\nexport var duration = '_1u58xor3-3-6-0';\nexport var wrapper = '_1u58xor0-3-6-0';"],
+  "sourcesContent": ["import './tooltip-styles.css';\nexport var axisName = '_1u58xor1-3-7-1';\nexport var axisValue = '_1u58xor2-3-7-1';\nexport var duration = '_1u58xor3-3-7-1';\nexport var wrapper = '_1u58xor0-3-7-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/xy-chart/constants/defaults.js

@@ -53,11 +53,13 @@ const ANNOTATIONS_PADDING_BOTTOM = 6;
 const DISPLAY_UNITS_LIMIT = 3;
 const DEFAULT_POINTS_DISPLAY = "auto";
 const RECT_STROKE_WIDTH = 1;
+const BAR_STROKE_WIDTH = 5;
 const XY_CHART_BOTTOM_AXIS_LABEL = "Bottom axis";
 const XY_CHART_TOP_AXIS_LABEL = "Top axis";
 const DISPLAY_NAME = "XYChart";
 export {
   ANNOTATIONS_PADDING_BOTTOM,
+  BAR_STROKE_WIDTH,
   DEFAULT_AXIS_CONFIG,
   DEFAULT_CHART_HEIGHT,
   DEFAULT_COLOR_PALETTE,