@dynatrace/strato-components 3.0.1 → 3.1.0

package/esm/buttons/notify-button/NotifyButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  useMemo,\n  type PropsWithChildren,\n  type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { Content } from './components/Content.js';\nimport { NotifyButtonTrigger } from './components/Trigger.js';\nimport { NotifyButtonContext } from './contexts/NotifyButtonContext.js';\nimport * as styles from './NotifyButton.sty.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { AriaDisabledProps, AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { DOMProps } from '../../core/types/dom.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content as NotificationSettingsContent } from '../../notifications/notification-settings/components/Content.js';\nimport { NotificationPermissionInfo } from '../../notifications/notification-settings/components/PermissionInfo.js';\nimport { NotificationToggleButton } from '../../notifications/notification-settings/components/ToggleButton.js';\nimport {\n  NotificationProvider,\n  type NotificationSettingsConfig,\n} from '../../notifications/notification-settings/NotificationSettings.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\nconst COMPONENT_NAME = 'NotifyButton';\n\n//#region Typings\n\n/**\n * Accepted properties for the NotifyButton\n * @public\n */\nexport type NotifyButtonProps = DOMProps &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  PropsWithChildren &\n  AriaLabelingProps &\n  AriaDisabledProps &\n  NotificationSettingsConfig & {\n    /**\n     * Configures the size of the trigger.\n     * @defaultValue 'default\n     */\n    size?: 'default' | 'condensed';\n    /**\n     * Configures the variant of the trigger.\n     * @defaultValue 'default\n     */\n    variant?: 'default' | 'emphasized';\n    /**\n     * Whether the NotifyButton is read-only.\n     * @defaultValue false\n     */\n    readOnly?: boolean;\n    /**\n     * Whether the NotifyButton is disabled.\n     * @defaultValue false\n     */\n    disabled?: boolean;\n    /**\n     * Whether the label text is shown on the trigger.\n     * @defaultValue false\n     */\n    showLabel?: boolean;\n  };\n\n//#endregion\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getContentSlot(children: ReactNode) {\n  let content: ReactNode;\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Content:\n          content = child;\n          break;\n        default: {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Only Content is a valid child of the NotifyButton.');\n          }\n          break;\n        }\n      }\n    } else if (child) {\n      if (isDev()) {\n        // eslint-disable-next-line no-console\n        console.warn('The used child is not supported by the NotifyButton.');\n      }\n    }\n  });\n\n  return content;\n}\n\n/**\n * NotifyButton component\n */\nconst RootNotifyButton = forwardRef<HTMLButtonElement, NotifyButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      disabled,\n      size = 'default',\n      variant = 'default',\n      type,\n      config,\n      readOnly,\n      showLabel = false,\n      ...remainingProps\n    }: NotifyButtonProps = props;\n\n    const overlayAriaLabelledBy = useId();\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayProps,\n      overlayState,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-start',\n      placementFallbacks: [\n        'bottom-start',\n        'bottom-end',\n        'top-start',\n        'top-end',\n      ],\n      offset: 4,\n      disabled: disabled || readOnly,\n      'aria-labelledby': overlayAriaLabelledBy,\n    });\n    const rootRef = useMergeRefs([ref, triggerRef, targetRef]);\n    const contentSlot = useMemo(() => getContentSlot(children), [children]);\n\n    const notifyButtonContextValue = useMemo(\n      () => ({\n        closeOverlay: overlayState.close,\n        overlayAriaLabelledBy,\n      }),\n      [overlayAriaLabelledBy, overlayState.close],\n    );\n\n    return (\n      <NotifyButtonContext.Provider value={notifyButtonContextValue}>\n        <NotificationProvider type={type} config={config}>\n          <NotifyButtonTrigger\n            ref={rootRef}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            className={consumerClassName}\n            style={consumerStyle}\n            disabled={disabled}\n            size={size}\n            variant={variant}\n            showLabel={showLabel}\n            triggerProps={overlayTriggerProps}\n            aria-disabled={readOnly}\n            {...remainingProps}\n            data-dt-component={COMPONENT_NAME}\n          />\n          <Overlay\n            ref={overlayRef}\n            isOpen={overlayState.isOpen}\n            className={styles.overlay}\n            overlayProps={overlayProps}\n          >\n            <Flex flexDirection=\"column\" gap={12}>\n              {contentSlot ?? <NotificationSettingsContent />}\n              <Flex alignItems=\"center\">\n                <NotificationToggleButton />\n                <NotificationPermissionInfo />\n              </Flex>\n            </Flex>\n          </Overlay>\n        </NotificationProvider>\n      </NotifyButtonContext.Provider>\n    );\n  },\n);\n\n(\n  RootNotifyButton as typeof RootNotifyButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `NotifyButton` allows users to turn notifications about updates of resources on or off. Common use cases include notifications about updates of saved filters, workflows, or entities. Users will be notified via e-mail.\n * @public\n */\nexport const NotifyButton = Object.assign(RootNotifyButton, {\n  Content,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Children, forwardRef, useMemo, type ReactNode } from 'react';\nimport { isElement } from 'react-is';\n\nimport { Content } from './components/Content.js';\nimport { NotifyButtonTrigger } from './components/Trigger.js';\nimport { NotifyButtonContext } from './contexts/NotifyButtonContext.js';\nimport type { NotifyButtonProps } from './notify-button-types.js';\nimport * as styles from './NotifyButton.sty.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { Content as NotificationSettingsContent } from '../../notifications/notification-settings/components/Content.js';\nimport { NotificationPermissionInfo } from '../../notifications/notification-settings/components/PermissionInfo.js';\nimport { NotificationToggleButton } from '../../notifications/notification-settings/components/ToggleButton.js';\nimport { NotificationProvider } from '../../notifications/notification-settings/NotificationSettings.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\n\nconst COMPONENT_NAME = 'NotifyButton';\n\n/** Iterates over child nodes to extract the content component slot. */\nfunction getContentSlot(children: ReactNode) {\n  let content: ReactNode;\n\n  Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case Content:\n          content = child;\n          break;\n        default: {\n          if (isDev()) {\n            // eslint-disable-next-line no-console\n            console.warn('Only Content is a valid child of the NotifyButton.');\n          }\n          break;\n        }\n      }\n    } else if (child) {\n      if (isDev()) {\n        // eslint-disable-next-line no-console\n        console.warn('The used child is not supported by the NotifyButton.');\n      }\n    }\n  });\n\n  return content;\n}\n\n/**\n * NotifyButton component\n */\nconst RootNotifyButton = forwardRef<HTMLButtonElement, NotifyButtonProps>(\n  (props, ref) => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      className: consumerClassName,\n      style: consumerStyle,\n      disabled,\n      size = 'default',\n      variant = 'default',\n      type,\n      config,\n      readOnly,\n      showLabel = false,\n      ...remainingProps\n    }: NotifyButtonProps = props;\n\n    const overlayAriaLabelledBy = useId();\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayProps,\n      overlayState,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-start',\n      placementFallbacks: [\n        'bottom-start',\n        'bottom-end',\n        'top-start',\n        'top-end',\n      ],\n      offset: 4,\n      disabled: disabled || readOnly,\n      'aria-labelledby': overlayAriaLabelledBy,\n    });\n    const rootRef = useMergeRefs([ref, triggerRef, targetRef]);\n    const contentSlot = useMemo(() => getContentSlot(children), [children]);\n\n    const notifyButtonContextValue = useMemo(\n      () => ({\n        closeOverlay: overlayState.close,\n        overlayAriaLabelledBy,\n      }),\n      [overlayAriaLabelledBy, overlayState.close],\n    );\n\n    return (\n      <NotifyButtonContext.Provider value={notifyButtonContextValue}>\n        <NotificationProvider type={type} config={config}>\n          <NotifyButtonTrigger\n            ref={rootRef}\n            data-testid={dataTestId}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            className={consumerClassName}\n            style={consumerStyle}\n            disabled={disabled}\n            size={size}\n            variant={variant}\n            showLabel={showLabel}\n            triggerProps={overlayTriggerProps}\n            aria-disabled={readOnly}\n            {...remainingProps}\n            data-dt-component={COMPONENT_NAME}\n          />\n          <Overlay\n            ref={overlayRef}\n            isOpen={overlayState.isOpen}\n            className={styles.overlay}\n            overlayProps={overlayProps}\n          >\n            <Flex flexDirection=\"column\" gap={12}>\n              {contentSlot ?? <NotificationSettingsContent />}\n              <Flex alignItems=\"center\">\n                <NotificationToggleButton />\n                <NotificationPermissionInfo />\n              </Flex>\n            </Flex>\n          </Overlay>\n        </NotificationProvider>\n      </NotifyButtonContext.Provider>\n    );\n  },\n);\n\n(\n  RootNotifyButton as typeof RootNotifyButton & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n * The `NotifyButton` allows users to turn notifications about updates of resources on or off. Common use cases include notifications about updates of saved filters, workflows, or entities. Users will be notified via e-mail.\n * @public\n */\nexport const NotifyButton = Object.assign(RootNotifyButton, {\n  Content,\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/buttons/notify-button/NotifyButton.sty.js

@@ -1,6 +1,6 @@
 import "./NotifyButton.css";
-var overlay = "_1j9pkom0-3-0-1";
-var toast = "_1j9pkom1-3-0-1";
+var overlay = "_1j9pkom0-3-1-0";
+var toast = "_1j9pkom1-3-1-0";
 export {
   overlay,
   toast

package/esm/buttons/notify-button/NotifyButton.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/buttons/notify-button/NotifyButton.css.ts"],
-  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-0-1';\nexport var toast = '_1j9pkom1-3-0-1';"],
+  "sourcesContent": ["import './NotifyButton.css';\nexport var overlay = '_1j9pkom0-3-1-0';\nexport var toast = '_1j9pkom1-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;AACd,IAAI,QAAQ;",
   "names": []
 }

package/esm/buttons/notify-button/components/Trigger.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/buttons/notify-button/components/Trigger.tsx"],
-  "sourcesContent": ["import { forwardRef, useContext } from 'react';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport {\n  NotificationIcon,\n  NotificationActiveIcon,\n} from '@dynatrace/strato-icons';\n\nimport { NotificationSettingsContext } from '../../../notifications/notification-settings/contexts/NotificationSettingsContext.js';\nimport type { TriggerProps } from '../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Button } from '../../button/Button.js';\nimport { notifyButtonTranslations } from '../notify-button-messages.js';\nimport type { NotifyButtonProps } from '../NotifyButton.js';\n\n/**\n * @internal\n */\nexport const NotifyButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  Omit<NotifyButtonProps, 'type' | 'config'> & {\n    triggerProps: TriggerProps;\n  }\n>((props, ref) => {\n  const intl = useIntl();\n\n  const { loading, hasNotFoundError, enabled } = useContext(\n    NotificationSettingsContext,\n  );\n\n  const {\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    disabled,\n    size,\n    variant,\n    showLabel,\n    triggerProps,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Button\n      ref={ref}\n      aria-label={intl.formatMessage(notifyButtonTranslations.toggleOverlay)}\n      loading={loading}\n      size={size}\n      variant={variant}\n      disabled={hasNotFoundError || disabled}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      {...remainingProps}\n      {...triggerProps}\n    >\n      <Button.Prefix>\n        {enabled ? <NotificationActiveIcon /> : <NotificationIcon />}\n      </Button.Prefix>\n      {showLabel && (\n        <FormattedMessage {...notifyButtonTranslations.notifications} />\n      )}\n    </Button>\n  );\n});\n"],
+  "sourcesContent": ["import { forwardRef, useContext } from 'react';\nimport { useIntl, FormattedMessage } from 'react-intl';\n\nimport {\n  NotificationIcon,\n  NotificationActiveIcon,\n} from '@dynatrace/strato-icons';\n\nimport { NotificationSettingsContext } from '../../../notifications/notification-settings/contexts/NotificationSettingsContext.js';\nimport type { TriggerProps } from '../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Button } from '../../button/Button.js';\nimport { notifyButtonTranslations } from '../notify-button-messages.js';\nimport type { NotifyButtonProps } from '../notify-button-types.js';\n\n/**\n * @internal\n */\nexport const NotifyButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  Omit<NotifyButtonProps, 'type' | 'config'> & {\n    triggerProps: TriggerProps;\n  }\n>((props, ref) => {\n  const intl = useIntl();\n\n  const { loading, hasNotFoundError, enabled } = useContext(\n    NotificationSettingsContext,\n  );\n\n  const {\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    className: consumerClassName,\n    style: consumerStyle,\n    disabled,\n    size,\n    variant,\n    showLabel,\n    triggerProps,\n    ...remainingProps\n  } = props;\n\n  return (\n    <Button\n      ref={ref}\n      aria-label={intl.formatMessage(notifyButtonTranslations.toggleOverlay)}\n      loading={loading}\n      size={size}\n      variant={variant}\n      disabled={hasNotFoundError || disabled}\n      className={consumerClassName}\n      style={consumerStyle}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      {...remainingProps}\n      {...triggerProps}\n    >\n      <Button.Prefix>\n        {enabled ? <NotificationActiveIcon /> : <NotificationIcon />}\n      </Button.Prefix>\n      {showLabel && (\n        <FormattedMessage {...notifyButtonTranslations.notifications} />\n      )}\n    </Button>\n  );\n});\n"],
   "mappings": "AA4CI,SAgBe,KAhBf;AA5CJ,SAAS,YAAY,kBAAkB;AACvC,SAAS,SAAS,wBAAwB;AAE1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mCAAmC;AAE5C,SAAS,cAAc;AACvB,SAAS,gCAAgC;AAMlC,MAAM,sBAAsB,WAKjC,CAAC,OAAO,QAAQ;AAChB,QAAM,OAAO,QAAQ;AAErB,QAAM,EAAE,SAAS,kBAAkB,QAAQ,IAAI;AAAA,IAC7C;AAAA,EACF;AAEA,QAAM;AAAA,IACJ,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY,KAAK,cAAc,yBAAyB,aAAa;AAAA,MACrE;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,oBAAoB;AAAA,MAC9B,WAAW;AAAA,MACX,OAAO;AAAA,MACP,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA,4BAAC,OAAO,QAAP,EACE,oBAAU,oBAAC,0BAAuB,IAAK,oBAAC,oBAAiB,GAC5D;AAAA,QACC,aACC,oBAAC,oBAAkB,GAAG,yBAAyB,eAAe;AAAA;AAAA;AAAA,EAElE;AAEJ,CAAC;",
   "names": []
 }

package/esm/buttons/notify-button/notify-button-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=notify-button-types.js.map

package/esm/charts/annotations-chart/AnnotationsChart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/annotations-chart/AnnotationsChart.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { AnnotationsDisplay } from './components/AnnotationsDisplay.js';\nimport { AnnotationsAxis } from './components/axis/AnnotationsAxis.js';\nimport { ANNOTATIONS_CHART_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsChartConfig } from './hooks/useAnnotationsChartConfig.js';\nimport { AnnotationsChartConfigProvider } from './providers/annotations-chart-config.provider.js';\nimport { Marker } from './slots/Marker.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Track } from './slots/Track.js';\nimport { XAxis } from './slots/XAxis.js';\nimport type { AnnotationsChartProps } from './types/annotations-chart-props.js';\nimport { AnnotationsChartRef } from './types/annotations-chart-ref.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildScale } from './utils/scales.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { AnnotationsScrollWrapper } from '../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_LABELS_OFFSET,\n  TRACK_HEIGHT,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../core/components/annotations/constants.js';\nimport { isNumericalData } from '../core/components/annotations/utils/is-numerical-marker.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { DataDtrumContext } from '../core/context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst AXIS_HEIGHT = 25;\nconst X_AXIS_LABEL_HEIGHT = 10;\nconst COMPONENT_NAME = 'AnnotationsChart';\n\nconst calculateXAxisHeight = (isHidden: boolean, label?: string) =>\n  isHidden ? 0 : label ? AXIS_HEIGHT + X_AXIS_LABEL_HEIGHT : AXIS_HEIGHT;\n\nexport const _AnnotationsChart = forwardRef<\n  AnnotationsChartRef,\n  PropsWithChildren<AnnotationsChartProps>\n>((props, forwardedRef) => {\n  const {\n    annotationsActions,\n    children,\n    loading = false,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    width: propsWidth,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const { aggregatedMarkers, tracks, xAxisProps, tooltipProps } =\n    iterateSlots(children);\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const hasNumericalData =\n    aggregatedMarkers.length > 0 && isNumericalData(aggregatedMarkers);\n\n  const config = useAnnotationsChartConfig(\n    props,\n    xAxisProps,\n    tooltipProps,\n    hasNumericalData,\n  );\n\n  const { showLabels, xAxisConfig, tooltipConfig, textOverflow, truncateMode } =\n    config;\n\n  const shouldShowLabels = tracks.some(({ label }) => label) && showLabels;\n\n  const labelsOffset = shouldShowLabels\n    ? DEFAULT_LABELS_OFFSET + config.labelWidth\n    : 0;\n\n  const scale = buildScale(\n    aggregatedMarkers,\n    containerDimension.width - labelsOffset,\n    xAxisConfig,\n  );\n\n  const shownTracks = tracks.filter(({ hidden }) => !hidden);\n\n  const tracksHeight =\n    shownTracks.length * TRACK_HEIGHT + TRACK_SEPARATOR_STROKE_WIDTH;\n\n  const axisHeight = calculateXAxisHeight(\n    xAxisConfig.hidden,\n    config.xAxisConfig.label,\n  );\n  const coercedHeight = coerceSizeValue(config.height);\n  const coercedWidth = coerceSizeValue(propsWidth);\n\n  const height = coercedHeight ?? tracksHeight + axisHeight;\n  const width = coercedWidth ?? '100%';\n\n  const scrollWrapperHeight = Math.min(\n    tracksHeight,\n    Math.max(0, containerDimension.height - axisHeight),\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<AnnotationsChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n    sizeObserverRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.AnnotationsChart,\n        ...config,\n      });\n    },\n  }));\n\n  return (\n    <ChartStateHandler\n      empty={isEmpty(tracks)}\n      height=\"100%\"\n      emptyState={emptyState}\n      errorState={errorState}\n      isLoading={loading}\n      className={clsx(defaultChartSize, consumerClassName)}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      style={consumerStyle}\n    >\n      <div\n        style={{ height, width }}\n        ref={rootRef}\n        aria-label={ANNOTATIONS_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <AnnotationsChartConfigProvider config={config}>\n          <DataDtrumContext.Provider value={{ dataDtrumAllow, dataDtrumMask }}>\n            <AnnotationsScrollWrapper\n              height={scrollWrapperHeight}\n              width={containerDimension.width}\n            >\n              <AnnotationsDisplay\n                tracks={tracks}\n                scale={scale}\n                annotationsActions={annotationsActions}\n                showLabels={shouldShowLabels}\n                labelsOffset={labelsOffset}\n                width={containerDimension.width}\n                tooltipConfig={tooltipConfig}\n                textOverflow={textOverflow}\n                truncateMode={truncateMode}\n                {...behaviorTrackingProps}\n              />\n            </AnnotationsScrollWrapper>\n          </DataDtrumContext.Provider>\n          <AnnotationsAxis\n            height={axisHeight}\n            scale={scale}\n            width={containerDimension.width}\n            labelsOffset={labelsOffset}\n          />\n        </AnnotationsChartConfigProvider>\n      </div>\n    </ChartStateHandler>\n  );\n});\n\n/**\n * The `AnnotationsChart` is a visualization tool designed to highlight significant events or data points\n * on a timeline or other graph types. It allows the user to annotate specific moments with labels or markers,\n * providing additional context or insights directly within the chart. This chart can be used standalone\n * or integrated with other chart types, such `HistogramChart` or  `TimeseriesChart`, to enrich the data presentation\n * by drawing attention to each event.\n * @public\n */\nexport const AnnotationsChart = Object.assign(_AnnotationsChart, {\n  Track,\n  Marker,\n  XAxis,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport { isEmpty } from 'lodash-es';\nimport {\n  forwardRef,\n  type PropsWithChildren,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { AnnotationsDisplay } from './components/AnnotationsDisplay.js';\nimport { AnnotationsAxis } from './components/axis/AnnotationsAxis.js';\nimport { ANNOTATIONS_CHART_ARIA_LABEL } from './constants.js';\nimport { useAnnotationsChartConfig } from './hooks/useAnnotationsChartConfig.js';\nimport { AnnotationsChartConfigProvider } from './providers/annotations-chart-config.provider.js';\nimport { Marker } from './slots/Marker.js';\nimport { Tooltip } from './slots/Tooltip.js';\nimport { Track } from './slots/Track.js';\nimport { XAxis } from './slots/XAxis.js';\nimport type { AnnotationsChartProps } from './types/annotations-chart-props.js';\nimport { AnnotationsChartRef } from './types/annotations-chart-ref.js';\nimport { iterateSlots } from './utils/iterate-slots.js';\nimport { buildScale } from './utils/scales.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { defaultChartSize } from '../../core/styles/defaultChartValues.sty.js';\nimport { AnnotationsScrollWrapper } from '../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js';\nimport {\n  DEFAULT_LABELS_OFFSET,\n  TRACK_HEIGHT,\n  TRACK_SEPARATOR_STROKE_WIDTH,\n} from '../core/components/annotations/constants.js';\nimport { isNumericalData } from '../core/components/annotations/utils/is-numerical-marker.js';\nimport { ChartStateHandler } from '../core/components/chart-states/ChartStateHandler.js';\nimport { getChartStatesTemplates } from '../core/components/chart-states/utils/get-chart-states-template.js';\nimport { DataDtrumContext } from '../core/context/DataDtrumContext.js';\nimport { useObserveContainerSize } from '../core/hooks/useObserveContainerSize.js';\nimport { EmptyStateSlot } from '../core/slots/chart-states/EmptyStateSlot.js';\nimport { ErrorStateSlot } from '../core/slots/chart-states/ErrorStateSlot.js';\nimport { ChartType } from '../core/types/chart-types.js';\nimport { coerceSizeValue } from '../core/utils/coerceSizeValue.js';\n\nconst AXIS_HEIGHT = 25;\nconst X_AXIS_LABEL_HEIGHT = 10;\nconst COMPONENT_NAME = 'AnnotationsChart';\n\nconst calculateXAxisHeight = (isHidden: boolean, label?: string) =>\n  isHidden ? 0 : label ? AXIS_HEIGHT + X_AXIS_LABEL_HEIGHT : AXIS_HEIGHT;\n\nexport const _AnnotationsChart = forwardRef<\n  AnnotationsChartRef,\n  PropsWithChildren<AnnotationsChartProps>\n>((props, forwardedRef) => {\n  const {\n    annotationsActions,\n    children,\n    loading = false,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-testid': dataTestId,\n    style: consumerStyle,\n    className: consumerClassName,\n    width: propsWidth,\n  } = props;\n\n  const [behaviorTrackingProps] = useBehavioralTrackingProps(props);\n\n  const [containerDimension, sizeObserverRef] = useObserveContainerSize();\n\n  const { aggregatedMarkers, tracks, xAxisProps, tooltipProps } =\n    iterateSlots(children);\n  const { emptyState, errorState } = getChartStatesTemplates(children);\n\n  const hasNumericalData =\n    aggregatedMarkers.length > 0 && isNumericalData(aggregatedMarkers);\n\n  const config = useAnnotationsChartConfig(\n    props,\n    xAxisProps,\n    tooltipProps,\n    hasNumericalData,\n  );\n\n  const { showLabels, xAxisConfig, tooltipConfig, textOverflow, truncateMode } =\n    config;\n\n  const shouldShowLabels = tracks.some(({ label }) => label) && showLabels;\n\n  const labelsOffset = shouldShowLabels\n    ? DEFAULT_LABELS_OFFSET + config.labelWidth\n    : 0;\n\n  const scale = buildScale(\n    aggregatedMarkers,\n    containerDimension.width - labelsOffset,\n    xAxisConfig,\n  );\n\n  const shownTracks = tracks.filter(({ hidden }) => !hidden);\n\n  const tracksHeight =\n    shownTracks.length * TRACK_HEIGHT + TRACK_SEPARATOR_STROKE_WIDTH;\n\n  const axisHeight = calculateXAxisHeight(\n    xAxisConfig.hidden,\n    config.xAxisConfig.label,\n  );\n  const coercedHeight = coerceSizeValue(config.height);\n  const coercedWidth = coerceSizeValue(propsWidth);\n\n  const height = coercedHeight ?? tracksHeight + axisHeight;\n  const width = coercedWidth ?? '100%';\n\n  const scrollWrapperHeight = Math.min(\n    tracksHeight,\n    Math.max(0, containerDimension.height - axisHeight),\n  );\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const rootRef = useMergeRefs<AnnotationsChartRef | HTMLDivElement>([\n    forwardedRef,\n    containerRef,\n    sizeObserverRef,\n  ]);\n\n  useImperativeHandle(forwardedRef, () => ({\n    element: containerRef.current,\n    getConfig: () => {\n      return JSON.stringify({\n        type: ChartType.AnnotationsChart,\n        ...config,\n      });\n    },\n  }));\n\n  return (\n    <ChartStateHandler\n      empty={isEmpty(tracks)}\n      height=\"100%\"\n      emptyState={emptyState}\n      errorState={errorState}\n      isLoading={loading}\n      className={clsx(defaultChartSize, consumerClassName)}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-testid={dataTestId}\n      data-dt-component={COMPONENT_NAME}\n      style={consumerStyle}\n    >\n      <div\n        style={{ height, width }}\n        ref={rootRef}\n        aria-label={ANNOTATIONS_CHART_ARIA_LABEL}\n        role=\"img\"\n      >\n        <AnnotationsChartConfigProvider config={config}>\n          <DataDtrumContext.Provider value={{ dataDtrumAllow, dataDtrumMask }}>\n            <AnnotationsScrollWrapper\n              height={scrollWrapperHeight}\n              width={containerDimension.width}\n            >\n              <AnnotationsDisplay\n                tracks={tracks}\n                scale={scale}\n                annotationsActions={annotationsActions}\n                showLabels={shouldShowLabels}\n                labelsOffset={labelsOffset}\n                width={containerDimension.width}\n                tooltipConfig={tooltipConfig}\n                textOverflow={textOverflow}\n                truncateMode={truncateMode}\n                {...behaviorTrackingProps}\n              />\n            </AnnotationsScrollWrapper>\n          </DataDtrumContext.Provider>\n          <AnnotationsAxis\n            height={axisHeight}\n            scale={scale}\n            width={containerDimension.width}\n            labelsOffset={labelsOffset}\n          />\n        </AnnotationsChartConfigProvider>\n      </div>\n    </ChartStateHandler>\n  );\n});\n\n/**\n * The `AnnotationsChart` is a visualization tool designed to highlight significant events or data points\n * on a timeline or other graph types. It allows you to annotate specific moments with labels or markers,\n * providing additional context or insights directly within the chart. This chart can be used standalone\n * or integrated with other chart types, such `HistogramChart` or  `TimeseriesChart`, to enrich the data presentation\n * by drawing attention to each event.\n * @public\n */\nexport const AnnotationsChart = Object.assign(_AnnotationsChart, {\n  Track,\n  Marker,\n  XAxis,\n  Tooltip,\n  EmptyState: EmptyStateSlot,\n  ErrorState: ErrorStateSlot,\n});\n"],
   "mappings": "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",
   "names": []
 }

package/esm/charts/categorical-bar/CategoricalBarChartLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/categorical-bar/CategoricalBarChartLayout.tsx"],
-  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\n\nimport { CategoricalBarChart } from './CategoricalBarChart.js';\nimport { CategoricalBarChartLegend } from './components/legend/CategoricalBarChartLegend.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { CategoricalBarChartLegendConfiguration } from './types/categorical-bar-chart.js';\nimport { isStacked, isGrouped } from './utils/layout.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../core/components/chart-layout/types/chart-layout.js';\n\ninterface CategoricalBarChartLayoutProps extends StylingProps, MaskingProps {\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  legend: CategoricalBarChartLegendConfiguration;\n  isEmpty: boolean;\n  loading: boolean;\n  height?: string;\n  width?: number;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  /**\n   * Component identifier for behavioral tracking\n   * @internal\n   */\n  'data-dt-component'?: string;\n}\n\nexport const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CategoricalBarChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    height,\n    width,\n    legend,\n    isEmpty,\n    loading,\n    errorState,\n    emptyState,\n    className,\n    style,\n    chartLayoutRef,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n  } = props;\n  const { uniqueDimensions } = useCategoricalBarChartData();\n  const { groupMode } = useCategoricalBarChartBaseConfig();\n\n  const canShowLegend =\n    isGrouped(groupMode) ||\n    (isStacked(groupMode) && uniqueDimensions.length > 1);\n  const {\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const showLegend = canShowLegend && !legend.hidden;\n\n  return (\n    <ChartLayout\n      ref={chartLayoutRef}\n      chartHeight={height}\n      chartWidth={width}\n      isEmpty={isEmpty}\n      emptyState={emptyState}\n      errorState={errorState}\n      showLoader={loading}\n      className={className}\n      style={style}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <CategoricalBarChart ref={forwardedRef} />\n      </ChartLayout.Graph>\n      {showLegend && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <CategoricalBarChartLegend />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n\n(\n  CategoricalBarChartLayout as typeof CategoricalBarChartLayout & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartLayout';\n"],
-  "mappings": "AAoEI,SAeI,KAfJ;AApEJ,SAAS,kBAA4D;AAGrE,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,wCAAwC;AACjD,SAAS,kCAAkC;AAE3C,SAAS,WAAW,iBAAiB;AAGrC,SAAS,mBAAmB;AAmBrB,MAAM,4BAA4C,2BAGvD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EACvB,IAAI;AACJ,QAAM,EAAE,iBAAiB,IAAI,2BAA2B;AACxD,QAAM,EAAE,UAAU,IAAI,iCAAiC;AAEvD,QAAM,gBACJ,UAAU,SAAS,KAClB,UAAU,SAAS,KAAK,iBAAiB,SAAS;AACrD,QAAM;AAAA,IACJ,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,gBAAgB;AAEpC,QAAM,aAAa,iBAAiB,CAAC,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,uBAAoB,KAAK,cAAc,GAC1C;AAAA,QACC,cACC;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,6BAA0B;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,0BAGA,cAAc;",
+  "sourcesContent": ["import { forwardRef, type JSX, type ReactNode, type RefObject } from 'react';\n\nimport { CategoricalBarChart } from './CategoricalBarChart.js';\nimport { CategoricalBarChartLegend } from './components/legend/CategoricalBarChartLegend.js';\nimport { useCategoricalBarChartBaseConfig } from './hooks/useCategoricalBarChartBaseConfig.js';\nimport { useCategoricalBarChartData } from './hooks/useCategoricalBarChartData.js';\nimport { CategoricalBarChartLegendConfiguration } from './types/categorical-bar-chart.js';\nimport { isStacked, isGrouped } from './utils/layout.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { ChartLayout } from '../core/components/chart-layout/ChartLayout.js';\nimport type { ChartLayoutRef } from '../core/components/chart-layout/types/chart-layout.js';\n\ninterface CategoricalBarChartLayoutProps extends StylingProps, MaskingProps {\n  emptyState?: ReactNode;\n  errorState: ReactNode | ((errorMessage: string) => JSX.Element) | undefined;\n  legend: CategoricalBarChartLegendConfiguration;\n  isEmpty: boolean;\n  loading: boolean;\n  height?: string;\n  width?: number | string;\n  chartLayoutRef: RefObject<ChartLayoutRef | null>;\n  /**\n   * Component identifier for behavioral tracking\n   * @internal\n   */\n  'data-dt-component'?: string;\n}\n\nexport const CategoricalBarChartLayout = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  CategoricalBarChartLayoutProps\n>((props, forwardedRef) => {\n  const {\n    height,\n    width,\n    legend,\n    isEmpty,\n    loading,\n    errorState,\n    emptyState,\n    className,\n    style,\n    chartLayoutRef,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'data-dt-component': dataDtComponent,\n  } = props;\n  const { uniqueDimensions } = useCategoricalBarChartData();\n  const { groupMode } = useCategoricalBarChartBaseConfig();\n\n  const canShowLegend =\n    isGrouped(groupMode) ||\n    (isStacked(groupMode) && uniqueDimensions.length > 1);\n  const {\n    position: legendPosition,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    ratio,\n    initialRatio,\n    onRatioChange,\n  } = legend;\n\n  const legendRatio = initialRatio ?? ratio;\n\n  const showLegend = canShowLegend && !legend.hidden;\n\n  return (\n    <ChartLayout\n      ref={chartLayoutRef}\n      chartHeight={height}\n      chartWidth={width}\n      isEmpty={isEmpty}\n      emptyState={emptyState}\n      errorState={errorState}\n      showLoader={loading}\n      className={className}\n      style={style}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      data-dt-component={dataDtComponent}\n    >\n      <ChartLayout.Graph>\n        <CategoricalBarChart ref={forwardedRef} />\n      </ChartLayout.Graph>\n      {showLegend && (\n        <ChartLayout.Legend\n          position={legendPosition}\n          initialRatio={legendRatio}\n          onResize={onRatioChange}\n        >\n          <CategoricalBarChartLegend />\n        </ChartLayout.Legend>\n      )}\n    </ChartLayout>\n  );\n});\n\n(\n  CategoricalBarChartLayout as typeof CategoricalBarChartLayout & {\n    displayName: string;\n  }\n).displayName = 'CategoricalBarChartLayout';\n"],
+  "mappings": "AAmEI,SAeI,KAfJ;AAnEJ,SAAS,kBAA4D;AAErE,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,wCAAwC;AACjD,SAAS,kCAAkC;AAE3C,SAAS,WAAW,iBAAiB;AAGrC,SAAS,mBAAmB;AAmBrB,MAAM,4BAA4C,2BAGvD,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,EACvB,IAAI;AACJ,QAAM,EAAE,iBAAiB,IAAI,2BAA2B;AACxD,QAAM,EAAE,UAAU,IAAI,iCAAiC;AAEvD,QAAM,gBACJ,UAAU,SAAS,KAClB,UAAU,SAAS,KAAK,iBAAiB,SAAS;AACrD,QAAM;AAAA,IACJ,UAAU;AAAA;AAAA,IAEV;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,cAAc,gBAAgB;AAEpC,QAAM,aAAa,iBAAiB,CAAC,OAAO;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAa;AAAA,MACb,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,qBAAmB;AAAA,MAEnB;AAAA,4BAAC,YAAY,OAAZ,EACC,8BAAC,uBAAoB,KAAK,cAAc,GAC1C;AAAA,QACC,cACC;AAAA,UAAC,YAAY;AAAA,UAAZ;AAAA,YACC,UAAU;AAAA,YACV,cAAc;AAAA,YACd,UAAU;AAAA,YAEV,8BAAC,6BAA0B;AAAA;AAAA,QAC7B;AAAA;AAAA;AAAA,EAEJ;AAEJ,CAAC;AAGC,0BAGA,cAAc;",
   "names": []
 }

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css

@@ -1,9 +1,9 @@
-._1wi8enr0-3-0-1 {
+._1wi8enr0-3-1-0 {
   cursor: crosshair;
   overflow: visible;
   z-index: 1;
 }
-._1wi8enr1-3-0-1 {
+._1wi8enr1-3-1-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js

@@ -1,7 +1,7 @@
 import "../../../../core/components/chart-grid/ChartGrid.css";
 import "./CategoricalBarChartInspectOverlay.css";
-var crosshairLayout = "_1wi8enr0-3-0-1 _13lzg4k0-3-0-1";
-var dataPointLayout = "_1wi8enr1-3-0-1 _13lzg4k0-3-0-1";
+var crosshairLayout = "_1wi8enr0-3-1-0 _13lzg4k0-3-1-0";
+var dataPointLayout = "_1wi8enr1-3-1-0 _13lzg4k0-3-1-0";
 export {
   crosshairLayout,
   dataPointLayout

package/esm/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/charts/categorical-bar/components/interactions/overlays/CategoricalBarChartInspectOverlay.css.ts"],
-  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-0-1 _13lzg4k0-3-0-1';\nexport var dataPointLayout = '_1wi8enr1-3-0-1 _13lzg4k0-3-0-1';"],
+  "sourcesContent": ["import '../../../../core/components/chart-grid/ChartGrid.css';\nimport './CategoricalBarChartInspectOverlay.css';\nexport var crosshairLayout = '_1wi8enr0-3-1-0 _13lzg4k0-3-1-0';\nexport var dataPointLayout = '_1wi8enr1-3-1-0 _13lzg4k0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/categorical-bar/types/categorical-bar-chart.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/categorical-bar/types/categorical-bar-chart.ts"],
-  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps extends StylingProps, MaskingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container.\n   */\n  width?: number;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
+  "sourcesContent": ["import type { ScaleLinear, ScaleSymLog } from 'd3-scale';\n\nimport type {\n  ConvertibleUnit,\n  FormatOptions,\n  Unit,\n} from '@dynatrace-sdk/units';\n\nimport type { IntentProps } from '../../../core/slots/Intent/Intent.js';\nimport { MaskingProps } from '../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../core/types/styling-props.js';\nimport type { TruncationMode } from '../../../typography/text-ellipsis/TextEllipsis.js';\nimport type {\n  ColorPalette,\n  ColorPaletteMode,\n  CustomColorPalette,\n} from '../../core/types/color-palette.js';\nimport { ColorRuleProps } from '../../core/types/color-rule.js';\nimport type { Formatter } from '../../core/types/formatter.js';\nimport type { LegendPosition, LegendProps } from '../../core/types/legend.js';\nimport type {\n  AxisScaleType,\n  ValueRepresentation,\n} from '../../core/types/scales.js';\nimport type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';\nimport {\n  ChartToolbarConfig,\n  InternalChartToolbarConfigured,\n} from '../../core/types/toolbar.js';\nimport type { WithId } from '../../core/types/with-id.js';\nimport type { CategoricalBarChartThresholdIndicatorProps } from '../slots/ThresholdIndicator.js';\n\n//region Common\n/**\n * Defines whether the item is displayed horizontally or vertically.\n * @public\n */\nexport const layoutOptions = ['horizontal', 'vertical'] as const;\n/**\n * @public\n */\nexport type Layout = (typeof layoutOptions)[number];\n\n/**\n * Strategy used for grouping the bars in a bar chart.\n * @public\n */\nexport const groupModeOptions = ['grouped', 'stacked'] as const;\n/**\n * @public\n */\nexport type GroupMode = (typeof groupModeOptions)[number];\n\n/**\n * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n * @public\n */\nexport const categoricalChartTooltipVariantOptions = [\n  'single',\n  'grouped',\n] as const;\n/**\n * @public\n */\nexport type CategoricalChartTooltipVariant =\n  (typeof categoricalChartTooltipVariantOptions)[number];\n\n//endregion\n\n//region Slots\n/**\n * @internal\n */\nexport interface CategoricalBarChartSlots {\n  legend: {\n    position?: LegendPosition;\n    hidden?: boolean;\n  };\n  tooltip: {\n    variant?: CategoricalChartTooltipVariant;\n  };\n  valueAxis: {\n    label?: string;\n    min?: number;\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  categoryAxis: {\n    tickLabelLayout?: Layout;\n    label?: string;\n  };\n  thresholds: CategoricalBarChartThresholdIndicatorProps[];\n  toolbar: Partial<CategoricalBarChartToolbarInternalConfigured>;\n  colorRules: ColorRuleProps[];\n  intents: InternalCategoricalBarChartConfig['intents'];\n}\n\n//endregion\n\n//region Configuration\n/**\n * @public\n */\nexport interface CategoricalBarChartConfiguration {\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   * @defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a categories.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Tooltip config for the chart\n   */\n  tooltip?: {\n    /**\n     * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the categories within a category.\n     */\n    variant?: CategoricalChartTooltipVariant;\n  };\n  /**\n   * Config for the axis holding the category\n   */\n  categoryAxis?: {\n    /**\n     * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n     * @defaultValue 'horizontal'\n     */\n    tickLabelLayout?: Layout;\n    // Optional axis label\n    label?: string;\n  };\n  /**\n   * Config for the axis holding the category values\n   */\n  valueAxis?: {\n    // Optional axis label\n    label?: string;\n    // Min value to be represented on a value axis\n    min?: number;\n    // Max value to be represented on a value axis\n    max?: number;\n    /**\n     * Handler that is called for every tick value to be formatted.\n     */\n    formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n    /** The scale of the value axis. */\n    scale?: AxisScaleType;\n  };\n  // Config for the chart legend config.\n  legend?: {\n    /**\n     * Defines the position where to show the chart legend.\n     * @defaultValue \"auto\"\n     */\n    position?: LegendPosition;\n    /**\n     * Whether the legend is hidden or shown\n     * @defaultValue \"false\" - the legend is shown\n     */\n    hidden?: boolean;\n  };\n  /**\n   * Truncation mode to use (start, middle, end)\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"multi-colored\" - each bar gets a color in the palette sequentially\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /**\n   * ThresholdIndicator configuration for the categorical bar chart value axis.\n   */\n  thresholdIndicators?: CategoricalBarChartThresholdConfiguration[];\n  /**\n   * Config for the chart toolbar\n   */\n  toolbar?: CategoricalBarChartToolbarConfiguration;\n  /**\n   * Color rules to apply to the bars\n   */\n  colorRules?: ColorRuleProps[];\n}\n\n/**\n * Config type holding all the required config used in the categorical bar chart. Considers that the defaults have already been applied.\n * @public\n */\nexport type RequiredCategoricalBarChartConfiguration =\n  Required<CategoricalBarChartConfiguration> & {\n    tooltip: CategoricalBarChartTooltipConfiguration;\n    legend: CategoricalBarChartLegendConfiguration;\n    categoryAxis: CategoricalBarChartCategoryAxisConfiguration;\n    thresholdIndicators: InternalCategoricalBarChartThresholdConfiguration[];\n    toolbar?: CategoricalBarChartToolbarConfiguration;\n  };\n\n/**\n * @internal\n */\nexport type InternalCategoricalBarChartConfig = Omit<\n  RequiredCategoricalBarChartConfiguration,\n  'toolbar'\n> & {\n  intents: IntentProps[];\n  toolbar: CategoricalBarChartToolbarInternalConfigured &\n    Required<\n      Pick<\n        CategoricalBarChartToolbarInternalConfigured,\n        'placement' | 'hidden' | 'downloadData'\n      >\n    >;\n};\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipConfiguration {\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendConfiguration = LegendProps;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisConfiguration {\n  label?: string;\n  min?: number;\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartToolbarConfiguration = ChartToolbarConfig & {\n  hidden?: boolean;\n};\n\n/**\n * @internal\n */\nexport interface CategoricalBarChartToolbarInternalConfigured\n  extends InternalChartToolbarConfigured {\n  hidden?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisConfiguration {\n  label?: string;\n  tickLabelLayout: Layout;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartThresholdConfiguration =\n  CategoricalBarChartThresholdIndicatorProps;\n\n/**\n * @public\n */\nexport type InternalCategoricalBarChartThresholdConfiguration =\n  WithId<CategoricalBarChartThresholdConfiguration>;\n//endregion\n\n//region Props\n// TODO: ADES-5109 we need to support Unit in the categoricalBarChart\n/**\n * @public\n * @deprecated CategoricalUnit is deprecated, use string | Unit instead.\n */\nexport type CategoricalUnit = string;\n\n/**\n * @public\n */\nexport interface CategoricalBarChartData extends Record<string, unknown> {\n  category: string;\n  value: number | Record<string, number>;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  unit?: CategoricalUnit | string | Unit;\n  /* @deprecated - use color rules instead. This key will be removed in a future release */\n  color?: string;\n}\n\n/**\n * Ref of the Categorical bar chart\n * @public\n */\nexport interface CategoricalBarChartRef {\n  /** Chart div element */\n  element: HTMLDivElement | null;\n  /** Returns the current serialized config of the categorical bar chart .*/\n  getConfig: () => string;\n  /** Downloads map raw data .*/\n  downloadData: () => void;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartProps extends StylingProps, MaskingProps {\n  /**\n   * Data object for the categorical bar chart\n   */\n  data: CategoricalBarChartData[];\n  /**\n   * Chart height. When a number is specified, is considered as pixels, otherwise a valid height string is expected.\n   * @defaultValue 300px\n   */\n  height?: number | string;\n  /**\n   * Chart width. When a number is specified, it's treated as pixels,\n   * otherwise a valid width string is expected.\n   * @defaultValue 100%\n   */\n  width?: number | string;\n  /**\n   * Whether the bars are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'vertical'\n   */\n  layout?: Layout;\n  /**\n   * Strategy used for grouping the bars within a category. \"stacked\" will mount one on top of each other, and \"grouped\" will place one next to the other\n   *@defaultValue 'stacked'\n   */\n  groupMode?: GroupMode;\n  /**\n   * Color palette to be used for the bar category.\n   * @defaultValue \"categorical\"\n   */\n  colorPalette?: ColorPalette | CustomColorPalette;\n  /**\n   * The way values are represented. \"absolute\" will display the value as it is, and \"relative\" displays a percentage value considering the other dimensions values within a category.\n   * @defaultValue \"absolute\"\n   */\n  valueRepresentation?: ValueRepresentation;\n  /**\n   * Category actions to be shown in the legend and tooltip actions\n   */\n  seriesActions?: (series: Record<string, unknown>) => SeriesActionsTemplate;\n  /**\n   * Truncation mode to use (start, middle, end)\n   * Applied to all the parts that truncate text.\n   * @defaultValue 'middle'\n   */\n  truncationMode?: TruncationMode;\n  /**\n   * Mode in which bars are colored when single dimension data is shown\n   * @defaultValue \"single-color\" - each bar gets the same color\n   */\n  colorPaletteMode?: ColorPaletteMode;\n  /** Show the loading indicator when truthy.\n   * @defaultValue false\n   */\n  loading?: boolean;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartTooltipProps {\n  /**\n   * Tooltip variant. 'single' displays only the closest category, and 'grouped' all the category within a category.\n   */\n  variant: CategoricalChartTooltipVariant;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartCategoryAxisProps {\n  /**\n   * Whether the tick labels are displayed in a 'vertical' or 'horizontal' layout.\n   * @defaultValue 'horizontal'\n   */\n  tickLabelLayout?: Layout;\n  // Optional axis label\n  label?: string;\n  /** Max size in pixels for the category axis. Size depends on the position this axis is assigned to \u2013 left axis will use width, bottom axis will use height.\n   *  If there's no enough space for this maxSize, category axis will only take the available space for it.\n   */\n  maxSize?: number;\n}\n\n/**\n * @public\n */\nexport interface CategoricalBarChartValueAxisProps {\n  // Optional axis label\n  label?: string;\n  // Min value to be represented on a value axis\n  min?: number;\n  // Max value to be represented on a value axis\n  max?: number;\n  /**\n   * Handler that is called for every tick value to be formatted.\n   */\n  formatter?: Formatter | FormatOptions<Unit, ConvertibleUnit>;\n  /** The scale of the value axis. */\n  scale?: AxisScaleType;\n}\n\n/**\n * @public\n */\nexport type CategoricalBarChartLegendProps = LegendProps;\n\n/**\n * @internal\n */\nexport type CategoricalValueScales =\n  | ScaleLinear<number, number>\n  | ScaleSymLog<number, number>;\n"],
   "mappings": "AAqCO,MAAM,gBAAgB,CAAC,cAAc,UAAU;AAU/C,MAAM,mBAAmB,CAAC,WAAW,SAAS;AAU9C,MAAM,wCAAwC;AAAA,EACnD;AAAA,EACA;AACF;",
   "names": []
 }

package/esm/charts/core/color-rule/strategies.js

@@ -1,6 +1,7 @@
 import { get, isNil } from "lodash-es";
 import { always0, getColorFromRule, getSubject, incBy1 } from "./utils.js";
 import { getAccessor } from "../utils/getAccessor.js";
+import { getValidColor } from "../utils/getValidColor.js";
 import { RANGE_MATCHERS, VALUE_MATCHERS } from "../utils/validators.js";
 const strategies = {
   histogram: () => {
@@ -37,7 +38,7 @@ const strategies = {
         if (rule.colorPalette) {
           return rule.colorPalette;
         }
-        return { Default: rule.color };
+        return { Default: getValidColor(rule.color ?? "") };
       }
     };
   },

package/esm/charts/core/color-rule/strategies.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/color-rule/strategies.ts"],
-  "sourcesContent": ["import { get, isNil } from 'lodash-es';\n\nimport type { Strategies } from './types.js';\nimport { always0, getColorFromRule, getSubject, incBy1 } from './utils.js';\nimport type { ColorPalette } from '../types/color-palette.js';\nimport { ColorRuleProps } from '../types/color-rule.js';\nimport { getAccessor } from '../utils/getAccessor.js';\nimport { RANGE_MATCHERS, VALUE_MATCHERS } from '../utils/validators.js';\n\nexport const strategies: Strategies = {\n  histogram: () => {\n    return {\n      defaultValueAccessor: 'name',\n      forbiddenAccessors: /^name$/,\n      getName: (series: { name: string }) => series.name,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  timeseries: () => {\n    return {\n      defaultValueAccessor: 'name',\n      forbiddenAccessors: /^name$/,\n      getName: (series: { name: string | string[] }) =>\n        Array.isArray(series.name) ? series.name[0] : series.name,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  categoricalBar: () => {\n    return {\n      defaultValueAccessor: 'category',\n      forbiddenAccessors: /^category$/,\n      getName: (series: { category: string }) => series.category,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule: (rule) => {\n        if (rule.colorPalette) {\n          return rule.colorPalette as ColorPalette;\n        }\n        return { Default: rule.color };\n      },\n    };\n  },\n  meterBar: () => {\n    const getValueWithAccessor = (\n      currentSeries: { [key: string]: unknown },\n      valueAccessor: string,\n    ) => {\n      const accessor = getAccessor(valueAccessor);\n\n      if (!accessor) {\n        return null;\n      }\n\n      const value = get(currentSeries, accessor);\n      return !isNil(value) ? value : null;\n    };\n\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^value$/,\n      getName: (series: { value: Record<string, unknown> | number }) =>\n        JSON.stringify(series.value),\n      getSubject: function (\n        rule: ColorRuleProps,\n        currentSeries: {\n          value: Record<string, unknown> | number;\n          [key: string]: unknown;\n        },\n      ) {\n        const valueAccessor =\n          rule.valueAccessor ||\n          (currentSeries['_chartValueAccessor'] as string);\n\n        if (valueAccessor) {\n          return getValueWithAccessor(currentSeries, valueAccessor);\n        }\n\n        return currentSeries.value;\n      },\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  pieOrDonut: () => {\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^(value|relativeValue)$/,\n      getName: (series: { category: string }) => series.category,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  honeycomb: () => {\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^value$/,\n      getName: () => 'honeycomb',\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n  categoricalLegend: () => {\n    return {\n      defaultValueAccessor: 'valueOf',\n      forbiddenAccessors: /(?:)/,\n      getName: () => 'categoricalLegend',\n      getSubject: (_rule, item) => item,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n  numericalLegend: () => {\n    return {\n      defaultValueAccessor: 'from',\n      forbiddenAccessors: /(?:)/,\n      getName: () => 'numericalLegend',\n      getSubject: (_: ColorRuleProps, item: { from: number; to: number }) =>\n        item,\n      matchers: RANGE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n};\n"],
-  "mappings": "AAAA,SAAS,KAAK,aAAa;AAG3B,SAAS,SAAS,kBAAkB,YAAY,cAAc;AAG9D,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB,sBAAsB;AAExC,MAAM,aAAyB;AAAA,EACpC,WAAW,MAAM;AACf,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,CAAC,WAA6B,OAAO;AAAA,MAC9C;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY,MAAM;AAChB,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,CAAC,WACR,MAAM,QAAQ,OAAO,IAAI,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO;AAAA,MACvD;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,CAAC,WAAiC,OAAO;AAAA,MAClD;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB,kBAAkB,CAAC,SAAS;AAC1B,YAAI,KAAK,cAAc;AACrB,iBAAO,KAAK;AAAA,QACd;AACA,eAAO,EAAE,SAAS,KAAK,MAAM;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU,MAAM;AACd,UAAM,uBAAuB,CAC3B,eACA,kBACG;AACH,YAAM,WAAW,YAAY,aAAa;AAE1C,UAAI,CAAC,UAAU;AACb,eAAO;AAAA,MACT;AAEA,YAAM,QAAQ,IAAI,eAAe,QAAQ;AACzC,aAAO,CAAC,MAAM,KAAK,IAAI,QAAQ;AAAA,IACjC;AAEA,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,CAAC,WACR,KAAK,UAAU,OAAO,KAAK;AAAA,MAC7B,YAAY,SACV,MACA,eAIA;AACA,cAAM,gBACJ,KAAK,iBACJ,cAAc,qBAAqB;AAEtC,YAAI,eAAe;AACjB,iBAAO,qBAAqB,eAAe,aAAa;AAAA,QAC1D;AAEA,eAAO,cAAc;AAAA,MACvB;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY,MAAM;AAChB,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,CAAC,WAAiC,OAAO;AAAA,MAClD;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,WAAW,MAAM;AACf,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,MAAM;AAAA,MACf;AAAA,MACA,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,mBAAmB,MAAM;AACvB,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,MAAM;AAAA,MACf,YAAY,CAAC,OAAO,SAAS;AAAA,MAC7B,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EACA,iBAAiB,MAAM;AACrB,WAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,oBAAoB;AAAA,MACpB,SAAS,MAAM;AAAA,MACf,YAAY,CAAC,GAAmB,SAC9B;AAAA,MACF,UAAU;AAAA,MACV,mBAAmB;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AACF;",
+  "sourcesContent": ["import { get, isNil } from 'lodash-es';\n\nimport type { Strategies } from './types.js';\nimport { always0, getColorFromRule, getSubject, incBy1 } from './utils.js';\nimport type { ColorPalette } from '../types/color-palette.js';\nimport { ColorRuleProps } from '../types/color-rule.js';\nimport { getAccessor } from '../utils/getAccessor.js';\nimport { getValidColor } from '../utils/getValidColor.js';\nimport { RANGE_MATCHERS, VALUE_MATCHERS } from '../utils/validators.js';\n\nexport const strategies: Strategies = {\n  histogram: () => {\n    return {\n      defaultValueAccessor: 'name',\n      forbiddenAccessors: /^name$/,\n      getName: (series: { name: string }) => series.name,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  timeseries: () => {\n    return {\n      defaultValueAccessor: 'name',\n      forbiddenAccessors: /^name$/,\n      getName: (series: { name: string | string[] }) =>\n        Array.isArray(series.name) ? series.name[0] : series.name,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  categoricalBar: () => {\n    return {\n      defaultValueAccessor: 'category',\n      forbiddenAccessors: /^category$/,\n      getName: (series: { category: string }) => series.category,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule: (rule) => {\n        if (rule.colorPalette) {\n          return rule.colorPalette as ColorPalette;\n        }\n        return { Default: getValidColor(rule.color ?? '') };\n      },\n    };\n  },\n  meterBar: () => {\n    const getValueWithAccessor = (\n      currentSeries: { [key: string]: unknown },\n      valueAccessor: string,\n    ) => {\n      const accessor = getAccessor(valueAccessor);\n\n      if (!accessor) {\n        return null;\n      }\n\n      const value = get(currentSeries, accessor);\n      return !isNil(value) ? value : null;\n    };\n\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^value$/,\n      getName: (series: { value: Record<string, unknown> | number }) =>\n        JSON.stringify(series.value),\n      getSubject: function (\n        rule: ColorRuleProps,\n        currentSeries: {\n          value: Record<string, unknown> | number;\n          [key: string]: unknown;\n        },\n      ) {\n        const valueAccessor =\n          rule.valueAccessor ||\n          (currentSeries['_chartValueAccessor'] as string);\n\n        if (valueAccessor) {\n          return getValueWithAccessor(currentSeries, valueAccessor);\n        }\n\n        return currentSeries.value;\n      },\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  pieOrDonut: () => {\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^(value|relativeValue)$/,\n      getName: (series: { category: string }) => series.category,\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: incBy1,\n      getColorFromRule,\n    };\n  },\n  honeycomb: () => {\n    return {\n      defaultValueAccessor: 'value',\n      forbiddenAccessors: /^value$/,\n      getName: () => 'honeycomb',\n      getSubject,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n  categoricalLegend: () => {\n    return {\n      defaultValueAccessor: 'valueOf',\n      forbiddenAccessors: /(?:)/,\n      getName: () => 'categoricalLegend',\n      getSubject: (_rule, item) => item,\n      matchers: VALUE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n  numericalLegend: () => {\n    return {\n      defaultValueAccessor: 'from',\n      forbiddenAccessors: /(?:)/,\n      getName: () => 'numericalLegend',\n      getSubject: (_: ColorRuleProps, item: { from: number; to: number }) =>\n        item,\n      matchers: RANGE_MATCHERS,\n      colorPaletteIndex: always0,\n      getColorFromRule,\n    };\n  },\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/color-rule/utils.js

@@ -1,6 +1,7 @@
 import { get, isNil } from "lodash-es";
 import { getColorPalette } from "../utils/get-color-palette.js";
 import { getAccessor } from "../utils/getAccessor.js";
+import { getValidColor } from "../utils/getValidColor.js";
 function getSubject(rule, currentSeries) {
   const valueAccessor = rule.valueAccessor;
   if (!valueAccessor || this.forbiddenAccessors.test(valueAccessor)) {
@@ -19,7 +20,7 @@ function getColorFromRule(rule, name, colorPaletteIndex) {
   if (rule.colorPalette) {
     return getColorPalette(name, colorPaletteIndex, rule.colorPalette);
   }
-  return { Default: rule.color };
+  return { Default: getValidColor(rule.color ?? "") };
 }
 function* always0() {
   while (true) {

package/esm/charts/core/color-rule/utils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/color-rule/utils.ts"],
-  "sourcesContent": ["import { get, isNil } from 'lodash-es';\n\nimport type { ColorRuleArgs, Strategies } from './types.js';\nimport type { ColorRuleProps } from '../types/color-rule.js';\nimport { getColorPalette } from '../utils/get-color-palette.js';\nimport { getAccessor } from '../utils/getAccessor.js';\n\nexport function getSubject<\n  T extends ColorRuleArgs[K]['series'][number],\n  K extends keyof ColorRuleArgs,\n>(this: ReturnType<Strategies[K]>, rule: ColorRuleProps, currentSeries: T) {\n  const valueAccessor = rule.valueAccessor;\n  if (!valueAccessor || this.forbiddenAccessors.test(valueAccessor)) {\n    return currentSeries[this.defaultValueAccessor];\n  }\n  const accessor = getAccessor(valueAccessor);\n\n  if (accessor) {\n    const value = get(currentSeries, accessor);\n    if (!isNil(value)) {\n      return value;\n    }\n  }\n  return null;\n}\n\nexport function getColorFromRule(\n  rule: ColorRuleProps,\n  name: string,\n  colorPaletteIndex: number,\n) {\n  if (rule.colorPalette) {\n    return getColorPalette(name, colorPaletteIndex, rule.colorPalette);\n  }\n\n  return { Default: rule.color };\n}\n\nexport function* always0() {\n  while (true) {\n    yield 0;\n  }\n}\n\nexport function* incBy1() {\n  let i = -1;\n  while (true) {\n    i += 1;\n    yield i;\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,KAAK,aAAa;AAI3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,SAAS,WAGmB,MAAsB,eAAkB;AACzE,QAAM,gBAAgB,KAAK;AAC3B,MAAI,CAAC,iBAAiB,KAAK,mBAAmB,KAAK,aAAa,GAAG;AACjE,WAAO,cAAc,KAAK,oBAAoB;AAAA,EAChD;AACA,QAAM,WAAW,YAAY,aAAa;AAE1C,MAAI,UAAU;AACZ,UAAM,QAAQ,IAAI,eAAe,QAAQ;AACzC,QAAI,CAAC,MAAM,KAAK,GAAG;AACjB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,iBACd,MACA,MACA,mBACA;AACA,MAAI,KAAK,cAAc;AACrB,WAAO,gBAAgB,MAAM,mBAAmB,KAAK,YAAY;AAAA,EACnE;AAEA,SAAO,EAAE,SAAS,KAAK,MAAM;AAC/B;AAEO,UAAU,UAAU;AACzB,SAAO,MAAM;AACX,UAAM;AAAA,EACR;AACF;AAEO,UAAU,SAAS;AACxB,MAAI,IAAI;AACR,SAAO,MAAM;AACX,SAAK;AACL,UAAM;AAAA,EACR;AACF;",
+  "sourcesContent": ["import { get, isNil } from 'lodash-es';\n\nimport type { ColorRuleArgs, Strategies } from './types.js';\nimport type { ColorRuleProps } from '../types/color-rule.js';\nimport { getColorPalette } from '../utils/get-color-palette.js';\nimport { getAccessor } from '../utils/getAccessor.js';\nimport { getValidColor } from '../utils/getValidColor.js';\n\nexport function getSubject<\n  T extends ColorRuleArgs[K]['series'][number],\n  K extends keyof ColorRuleArgs,\n>(this: ReturnType<Strategies[K]>, rule: ColorRuleProps, currentSeries: T) {\n  const valueAccessor = rule.valueAccessor;\n  if (!valueAccessor || this.forbiddenAccessors.test(valueAccessor)) {\n    return currentSeries[this.defaultValueAccessor];\n  }\n  const accessor = getAccessor(valueAccessor);\n\n  if (accessor) {\n    const value = get(currentSeries, accessor);\n    if (!isNil(value)) {\n      return value;\n    }\n  }\n  return null;\n}\n\nexport function getColorFromRule(\n  rule: ColorRuleProps,\n  name: string,\n  colorPaletteIndex: number,\n) {\n  if (rule.colorPalette) {\n    return getColorPalette(name, colorPaletteIndex, rule.colorPalette);\n  }\n\n  return { Default: getValidColor(rule.color ?? '') };\n}\n\nexport function* always0() {\n  while (true) {\n    yield 0;\n  }\n}\n\nexport function* incBy1() {\n  let i = -1;\n  while (true) {\n    i += 1;\n    yield i;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,KAAK,aAAa;AAI3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAEvB,SAAS,WAGmB,MAAsB,eAAkB;AACzE,QAAM,gBAAgB,KAAK;AAC3B,MAAI,CAAC,iBAAiB,KAAK,mBAAmB,KAAK,aAAa,GAAG;AACjE,WAAO,cAAc,KAAK,oBAAoB;AAAA,EAChD;AACA,QAAM,WAAW,YAAY,aAAa;AAE1C,MAAI,UAAU;AACZ,UAAM,QAAQ,IAAI,eAAe,QAAQ;AACzC,QAAI,CAAC,MAAM,KAAK,GAAG;AACjB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,iBACd,MACA,MACA,mBACA;AACA,MAAI,KAAK,cAAc;AACrB,WAAO,gBAAgB,MAAM,mBAAmB,KAAK,YAAY;AAAA,EACnE;AAEA,SAAO,EAAE,SAAS,cAAc,KAAK,SAAS,EAAE,EAAE;AACpD;AAEO,UAAU,UAAU;AACzB,SAAO,MAAM;AACX,UAAM;AAAA,EACR;AACF;AAEO,UAAU,SAAS;AACxB,MAAI,IAAI;AACR,SAAO,MAAM;AACX,SAAK;AACL,UAAM;AAAA,EACR;AACF;",
   "names": []
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.css

@@ -1,3 +1,3 @@
-._145zb630-3-0-1 {
+._145zb630-3-1-0 {
   position: relative;
 }

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsAtom.css";
-var wrapper = "_145zb630-3-0-1";
+var wrapper = "_145zb630-3-1-0";
 export {
   wrapper
 };

package/esm/charts/core/components/annotations/AnnotationsAtom.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/charts/core/components/annotations/AnnotationsAtom.css.ts"],
-  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-0-1';"],
+  "sourcesContent": ["import './AnnotationsAtom.css';\nexport var wrapper = '_145zb630-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css

@@ -1,4 +1,4 @@
-._1yc349j0-3-0-1 {
+._1yc349j0-3-1-0 {
   position: absolute;
   top: 0;
   left: 0;

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsCanvasLayout.css";
-var canvasContainer = "_1yc349j0-3-0-1";
+var canvasContainer = "_1yc349j0-3-1-0";
 export {
   canvasContainer
 };

package/esm/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/canvas/AnnotationsCanvasLayout.css.ts"],
-  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-0-1';"],
+  "sourcesContent": ["import './AnnotationsCanvasLayout.css';\nexport var canvasContainer = '_1yc349j0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,kBAAkB;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.js

@@ -19,63 +19,68 @@ const loadImage = (svgString) => {
     };
   });
 };
+const serializeColoredSvg = (svgNode, color) => {
+  svgNode.setAttribute("width", "16");
+  svgNode.setAttribute("height", "16");
+  svgNode.style.color = color;
+  return new XMLSerializer().serializeToString(svgNode);
+};
+const resolveFromCacheOrLoad = async (serializedSvg, cache) => {
+  const cached = cache.get(serializedSvg);
+  if (cached) {
+    return cached;
+  }
+  const image = await loadImage(serializedSvg);
+  cache.set(serializedSvg, image);
+  return image;
+};
 const useBuildIconsDataUri = (icons) => {
-  const [configByIconsAcc, setConfigByIconsAcc] = useState(
+  const [iconImages, setIconImages] = useState(
     /* @__PURE__ */ new Map()
   );
   const fakeDomContainerRef = useRef(document.createElement("div"));
   const rootRef = useRef(null);
-  const nodeInnerHTML = useRef("");
-  const updateIconsConfig = useCallback(
+  const svgImageCacheRef = useRef(/* @__PURE__ */ new Map());
+  const buildIconImages = useCallback(
     async (svgElements) => {
-      const newConfigByIconsAcc = new Map(configByIconsAcc);
+      const nextIconImages = /* @__PURE__ */ new Map();
       for (let i = 0; i < icons.length; i++) {
-        const icon = icons[i][0];
-        const iconColor = icons[i][1];
+        const [icon, color] = icons[i];
         if (isElement(icon)) {
-          if (!newConfigByIconsAcc.has(icon)) {
-            const svgNode = svgElements[i];
-            if (svgNode) {
-              svgNode.setAttribute("width", "16");
-              svgNode.setAttribute("height", "16");
-              svgNode.style.color = iconColor;
-              const imageString = new XMLSerializer().serializeToString(
-                svgNode
-              );
-              const imageElement = await loadImage(imageString);
-              newConfigByIconsAcc.set(icon, imageElement);
-            } else {
-              break;
-            }
+          const svgNode = svgElements[i];
+          if (!svgNode) {
+            break;
           }
+          const serialized = serializeColoredSvg(svgNode, color);
+          nextIconImages.set(
+            icon,
+            await resolveFromCacheOrLoad(serialized, svgImageCacheRef.current)
+          );
         }
       }
-      setConfigByIconsAcc(newConfigByIconsAcc);
+      setIconImages(nextIconImages);
     },
-    [configByIconsAcc, icons]
+    [icons]
   );
   useEffect(() => {
     if (!rootRef.current) {
       rootRef.current = createRoot(fakeDomContainerRef.current);
     }
-    const reactNodeRefContainer = createElement(
-      "div",
-      {
-        ref: async (node) => {
-          if (node !== null) {
-            const { innerHTML } = node;
-            if (nodeInnerHTML.current !== innerHTML) {
-              nodeInnerHTML.current = innerHTML;
-              await updateIconsConfig(node.getElementsByTagName("svg"));
+    rootRef.current.render(
+      createElement(
+        "div",
+        {
+          ref: (node) => {
+            if (node !== null) {
+              void buildIconImages(node.getElementsByTagName("svg"));
             }
           }
-        }
-      },
-      icons
+        },
+        icons
+      )
     );
-    rootRef.current.render(reactNodeRefContainer);
-  }, [icons, updateIconsConfig]);
-  return configByIconsAcc;
+  }, [icons, buildIconImages]);
+  return iconImages;
 };
 export {
   useBuildIconsDataUri

package/esm/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../../src/charts/core/components/annotations/components/canvas/hooks/use-build-icons-data-uri.ts"],
-  "sourcesContent": ["import {\n  createElement,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { isElement } from 'react-is';\n\nconst getDataUri = (stringElement: string) => {\n  return ['data:image/svg+xml;utf-8', stringElement].join(',');\n};\n\nconst loadImage = (svgString: string): Promise<HTMLImageElement> => {\n  const img = new Image();\n  img.src = getDataUri(svgString);\n\n  return new Promise((resolve) => {\n    img.onload = () => {\n      resolve(img);\n    };\n  });\n};\n\nexport const useBuildIconsDataUri = (icons: Array<[ReactElement, string]>) => {\n  const [configByIconsAcc, setConfigByIconsAcc] = useState(\n    new Map<ReactElement, HTMLImageElement>(),\n  );\n  const fakeDomContainerRef = useRef(document.createElement('div'));\n  const rootRef = useRef<Root | null>(null);\n  const nodeInnerHTML = useRef('');\n\n  const updateIconsConfig = useCallback(\n    async (svgElements: HTMLCollectionOf<SVGElement>) => {\n      const newConfigByIconsAcc = new Map(configByIconsAcc);\n\n      for (let i = 0; i < icons.length; i++) {\n        const icon = icons[i][0];\n        const iconColor = icons[i][1];\n\n        if (isElement(icon)) {\n          if (!newConfigByIconsAcc.has(icon)) {\n            const svgNode = svgElements[i];\n\n            if (svgNode) {\n              svgNode.setAttribute('width', '16');\n              svgNode.setAttribute('height', '16');\n              svgNode.style.color = iconColor;\n\n              const imageString = new XMLSerializer().serializeToString(\n                svgNode,\n              );\n              const imageElement = await loadImage(imageString);\n\n              newConfigByIconsAcc.set(icon, imageElement);\n            } else {\n              break;\n            }\n          }\n        }\n      }\n\n      setConfigByIconsAcc(newConfigByIconsAcc);\n    },\n    [configByIconsAcc, icons],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      rootRef.current = createRoot(fakeDomContainerRef.current);\n    }\n\n    const reactNodeRefContainer = createElement(\n      'div',\n      {\n        ref: async (node) => {\n          if (node !== null) {\n            const { innerHTML } = node;\n\n            if (nodeInnerHTML.current !== innerHTML) {\n              nodeInnerHTML.current = innerHTML;\n\n              await updateIconsConfig(node.getElementsByTagName('svg'));\n            }\n          }\n        },\n      },\n      icons,\n    );\n\n    rootRef.current.render(reactNodeRefContainer);\n  }, [icons, updateIconsConfig]);\n\n  return configByIconsAcc;\n};\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAA6B;AACtC,SAAS,iBAAiB;AAE1B,MAAM,aAAa,CAAC,kBAA0B;AAC5C,SAAO,CAAC,4BAA4B,aAAa,EAAE,KAAK,GAAG;AAC7D;AAEA,MAAM,YAAY,CAAC,cAAiD;AAClE,QAAM,MAAM,IAAI,MAAM;AACtB,MAAI,MAAM,WAAW,SAAS;AAE9B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,SAAS,MAAM;AACjB,cAAQ,GAAG;AAAA,IACb;AAAA,EACF,CAAC;AACH;AAEO,MAAM,uBAAuB,CAAC,UAAyC;AAC5E,QAAM,CAAC,kBAAkB,mBAAmB,IAAI;AAAA,IAC9C,oBAAI,IAAoC;AAAA,EAC1C;AACA,QAAM,sBAAsB,OAAO,SAAS,cAAc,KAAK,CAAC;AAChE,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,gBAAgB,OAAO,EAAE;AAE/B,QAAM,oBAAoB;AAAA,IACxB,OAAO,gBAA8C;AACnD,YAAM,sBAAsB,IAAI,IAAI,gBAAgB;AAEpD,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,OAAO,MAAM,CAAC,EAAE,CAAC;AACvB,cAAM,YAAY,MAAM,CAAC,EAAE,CAAC;AAE5B,YAAI,UAAU,IAAI,GAAG;AACnB,cAAI,CAAC,oBAAoB,IAAI,IAAI,GAAG;AAClC,kBAAM,UAAU,YAAY,CAAC;AAE7B,gBAAI,SAAS;AACX,sBAAQ,aAAa,SAAS,IAAI;AAClC,sBAAQ,aAAa,UAAU,IAAI;AACnC,sBAAQ,MAAM,QAAQ;AAEtB,oBAAM,cAAc,IAAI,cAAc,EAAE;AAAA,gBACtC;AAAA,cACF;AACA,oBAAM,eAAe,MAAM,UAAU,WAAW;AAEhD,kCAAoB,IAAI,MAAM,YAAY;AAAA,YAC5C,OAAO;AACL;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAEA,0BAAoB,mBAAmB;AAAA,IACzC;AAAA,IACA,CAAC,kBAAkB,KAAK;AAAA,EAC1B;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB,cAAQ,UAAU,WAAW,oBAAoB,OAAO;AAAA,IAC1D;AAEA,UAAM,wBAAwB;AAAA,MAC5B;AAAA,MACA;AAAA,QACE,KAAK,OAAO,SAAS;AACnB,cAAI,SAAS,MAAM;AACjB,kBAAM,EAAE,UAAU,IAAI;AAEtB,gBAAI,cAAc,YAAY,WAAW;AACvC,4BAAc,UAAU;AAExB,oBAAM,kBAAkB,KAAK,qBAAqB,KAAK,CAAC;AAAA,YAC1D;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,IACF;AAEA,YAAQ,QAAQ,OAAO,qBAAqB;AAAA,EAC9C,GAAG,CAAC,OAAO,iBAAiB,CAAC;AAE7B,SAAO;AACT;",
+  "sourcesContent": ["import {\n  createElement,\n  type ReactElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { isElement } from 'react-is';\n\nconst getDataUri = (stringElement: string) => {\n  return ['data:image/svg+xml;utf-8', stringElement].join(',');\n};\n\nconst loadImage = (svgString: string): Promise<HTMLImageElement> => {\n  const img = new Image();\n  img.src = getDataUri(svgString);\n\n  return new Promise((resolve) => {\n    img.onload = () => {\n      resolve(img);\n    };\n  });\n};\n\nconst serializeColoredSvg = (svgNode: SVGElement, color: string): string => {\n  svgNode.setAttribute('width', '16');\n  svgNode.setAttribute('height', '16');\n  svgNode.style.color = color;\n  return new XMLSerializer().serializeToString(svgNode);\n};\n\nconst resolveFromCacheOrLoad = async (\n  serializedSvg: string,\n  cache: Map<string, HTMLImageElement>,\n): Promise<HTMLImageElement> => {\n  const cached = cache.get(serializedSvg);\n  if (cached) {\n    return cached;\n  }\n  const image = await loadImage(serializedSvg);\n  cache.set(serializedSvg, image);\n  return image;\n};\n\nexport const useBuildIconsDataUri = (icons: Array<[ReactElement, string]>) => {\n  const [iconImages, setIconImages] = useState(\n    new Map<ReactElement, HTMLImageElement>(),\n  );\n  const fakeDomContainerRef = useRef(document.createElement('div'));\n  const rootRef = useRef<Root | null>(null);\n  const svgImageCacheRef = useRef(new Map<string, HTMLImageElement>());\n\n  const buildIconImages = useCallback(\n    async (svgElements: HTMLCollectionOf<SVGElement>) => {\n      const nextIconImages = new Map<ReactElement, HTMLImageElement>();\n\n      for (let i = 0; i < icons.length; i++) {\n        const [icon, color] = icons[i];\n\n        if (isElement(icon)) {\n          const svgNode = svgElements[i];\n          if (!svgNode) {\n            break;\n          }\n\n          const serialized = serializeColoredSvg(svgNode, color);\n          nextIconImages.set(\n            icon,\n            await resolveFromCacheOrLoad(serialized, svgImageCacheRef.current),\n          );\n        }\n      }\n\n      setIconImages(nextIconImages);\n    },\n    [icons],\n  );\n\n  useEffect(() => {\n    if (!rootRef.current) {\n      rootRef.current = createRoot(fakeDomContainerRef.current);\n    }\n\n    rootRef.current.render(\n      createElement(\n        'div',\n        {\n          ref: (node: HTMLDivElement | null) => {\n            if (node !== null) {\n              void buildIconImages(node.getElementsByTagName('svg'));\n            }\n          },\n        },\n        icons,\n      ),\n    );\n  }, [icons, buildIconImages]);\n\n  return iconImages;\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAA6B;AACtC,SAAS,iBAAiB;AAE1B,MAAM,aAAa,CAAC,kBAA0B;AAC5C,SAAO,CAAC,4BAA4B,aAAa,EAAE,KAAK,GAAG;AAC7D;AAEA,MAAM,YAAY,CAAC,cAAiD;AAClE,QAAM,MAAM,IAAI,MAAM;AACtB,MAAI,MAAM,WAAW,SAAS;AAE9B,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,QAAI,SAAS,MAAM;AACjB,cAAQ,GAAG;AAAA,IACb;AAAA,EACF,CAAC;AACH;AAEA,MAAM,sBAAsB,CAAC,SAAqB,UAA0B;AAC1E,UAAQ,aAAa,SAAS,IAAI;AAClC,UAAQ,aAAa,UAAU,IAAI;AACnC,UAAQ,MAAM,QAAQ;AACtB,SAAO,IAAI,cAAc,EAAE,kBAAkB,OAAO;AACtD;AAEA,MAAM,yBAAyB,OAC7B,eACA,UAC8B;AAC9B,QAAM,SAAS,MAAM,IAAI,aAAa;AACtC,MAAI,QAAQ;AACV,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,MAAM,UAAU,aAAa;AAC3C,QAAM,IAAI,eAAe,KAAK;AAC9B,SAAO;AACT;AAEO,MAAM,uBAAuB,CAAC,UAAyC;AAC5E,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC,oBAAI,IAAoC;AAAA,EAC1C;AACA,QAAM,sBAAsB,OAAO,SAAS,cAAc,KAAK,CAAC;AAChE,QAAM,UAAU,OAAoB,IAAI;AACxC,QAAM,mBAAmB,OAAO,oBAAI,IAA8B,CAAC;AAEnE,QAAM,kBAAkB;AAAA,IACtB,OAAO,gBAA8C;AACnD,YAAM,iBAAiB,oBAAI,IAAoC;AAE/D,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,CAAC,MAAM,KAAK,IAAI,MAAM,CAAC;AAE7B,YAAI,UAAU,IAAI,GAAG;AACnB,gBAAM,UAAU,YAAY,CAAC;AAC7B,cAAI,CAAC,SAAS;AACZ;AAAA,UACF;AAEA,gBAAM,aAAa,oBAAoB,SAAS,KAAK;AACrD,yBAAe;AAAA,YACb;AAAA,YACA,MAAM,uBAAuB,YAAY,iBAAiB,OAAO;AAAA,UACnE;AAAA,QACF;AAAA,MACF;AAEA,oBAAc,cAAc;AAAA,IAC9B;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,YAAU,MAAM;AACd,QAAI,CAAC,QAAQ,SAAS;AACpB,cAAQ,UAAU,WAAW,oBAAoB,OAAO;AAAA,IAC1D;AAEA,YAAQ,QAAQ;AAAA,MACd;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAK,CAAC,SAAgC;AACpC,gBAAI,SAAS,MAAM;AACjB,mBAAK,gBAAgB,KAAK,qBAAqB,KAAK,CAAC;AAAA,YACvD;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,eAAe,CAAC;AAE3B,SAAO;AACT;",
   "names": []
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css

@@ -1,4 +1,4 @@
-._107efci0-3-0-1 {
+._107efci0-3-1-0 {
   position: absolute;
   top: 0;
 }

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js

@@ -1,5 +1,5 @@
 import "./AnnotationsOverlays.css";
-var annotationsOverlay = "_107efci0-3-0-1";
+var annotationsOverlay = "_107efci0-3-1-0";
 export {
   annotationsOverlay
 };

package/esm/charts/core/components/annotations/components/overlays/AnnotationsOverlays.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../../src/charts/core/components/annotations/components/overlays/AnnotationsOverlays.css.ts"],
-  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-0-1';"],
+  "sourcesContent": ["import './AnnotationsOverlays.css';\nexport var annotationsOverlay = '_107efci0-3-1-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }