@redsift/charts 11.5.0 → 11.6.0-muiv5-alpha.0

package/components/Bar/Bar.js

@@ -0,0 +1,95 @@
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { a as it } from '../../node_modules/@react-spring/web/dist/esm/index.js';
+import { interpolate } from 'd3';
+import { useTheme } from '@redsift/design-system';
+import { BarOrientation, BarDirection } from './types.js';
+import { StyledBar } from './styles.js';
+import { monochrome } from '../../scheme.js';
+import { config } from '../../config.js';
+import { useSpring as J } from '../../node_modules/@react-spring/core/dist/esm/index.js';
+
+const _excluded = ["className", "disableAnimations", "gap", "height", "maxHeight", "orientation", "direction", "previousData", "scale", "scalePosition", "width", "minWidth"];
+const COMPONENT_NAME = 'Bar';
+const CLASSNAME = 'redsift-bar';
+const Bar = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    color = monochrome,
+    data,
+    index = 0,
+    isSelected: propsIsSelected,
+    labelDecorator,
+    onClick,
+    role
+  } = props;
+  const {
+      className,
+      disableAnimations,
+      gap = 5,
+      height = 40,
+      maxHeight = 100,
+      orientation = BarOrientation.horizontal,
+      direction = BarDirection.up,
+      previousData = {
+        data: {
+          key: '',
+          value: 0
+        }
+      },
+      scale,
+      scalePosition,
+      width = 40,
+      minWidth
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme();
+  const getValue = data => (data === null || data === void 0 ? void 0 : data.cumulativeValue) !== undefined ? data.cumulativeValue : data === null || data === void 0 ? void 0 : data.value;
+  const interpolator = interpolate(getValue(previousData.data) || 0, getValue(data.data) || 0);
+  const text = labelDecorator ? labelDecorator(data, {
+    index,
+    isSelected: propsIsSelected,
+    color
+  }) : data.data.key;
+  const isSelectable = role === 'option';
+  const isDeselected = isSelectable && propsIsSelected === false;
+  const isHorizontal = orientation === BarOrientation.horizontal;
+  const goesUp = direction === BarDirection.up;
+  const isOrdinal = typeof scalePosition.domain()[0] === 'string';
+  const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
+    to: async next => {
+      await next({
+        t: 1
+      });
+    },
+    from: {
+      t: 0
+    }
+  }));
+  const computedWidth = minWidth ? Math.max(minWidth, width) : width;
+  return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
+    ref: ref,
+    className: classNames(Bar.className, className),
+    transform: isHorizontal ? `translate(0, ${scalePosition(data.data.key) + gap / 2})` : `translate(${goesUp ? scalePosition(data.data.key) + (isOrdinal ? computedWidth + gap / 2 : computedWidth / 2) : scalePosition(data.data.key) + (isOrdinal ? -computedWidth + gap / 2 : -computedWidth / 2)}, ${maxHeight})${goesUp ? ', rotate(180)' : ''}`,
+    $clickable: Boolean(onClick),
+    $theme: theme
+  }), isHorizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
+    height: height,
+    fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    width: config.immediate || disableAnimations ? scale(data.data.value) : animatedProps.t.to(t => scale(interpolator(t)))
+  }) : /*#__PURE__*/React__default.createElement(it.rect, {
+    height: config.immediate || disableAnimations ? goesUp ? maxHeight - scale(getValue(data.data)) : scale(getValue(data.data)) - maxHeight : animatedProps.t.to(t => Math.max(0, goesUp ? maxHeight - scale(interpolator(t)) : scale(interpolator(t)) - maxHeight)),
+    fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
+    width: computedWidth
+  }), isHorizontal ? /*#__PURE__*/React__default.createElement("text", {
+    x: "10",
+    y: height / 2,
+    dy: "0.35em",
+    "aria-hidden": true
+  }, text) : null);
+});
+Bar.className = CLASSNAME;
+Bar.displayName = COMPONENT_NAME;
+
+export { Bar };
+//# sourceMappingURL=Bar.js.map

package/components/Bar/Bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Bar.js","sources":["../../../src/components/Bar/Bar.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { animated, useSpring } from '@react-spring/web';\nimport { interpolate as d3interpolate } from 'd3';\n\nimport { Comp, useTheme } from '@redsift/design-system';\n\nimport { BarDirection, BarOrientation, BarProps } from './types';\nimport { StyledBar } from './styles';\nimport { monochrome } from '../../scheme';\nimport { config } from '../../config';\nimport { BarDatum } from '@redsift/charts/types';\n\nconst COMPONENT_NAME = 'Bar';\nconst CLASSNAME = 'redsift-bar';\n\nexport const Bar: Comp<BarProps, SVGGElement> = forwardRef((props, ref) => {\n  const { color = monochrome, data, index = 0, isSelected: propsIsSelected, labelDecorator, onClick, role } = props;\n\n  const {\n    className,\n    disableAnimations,\n    gap = 5,\n    height = 40,\n    maxHeight = 100,\n    orientation = BarOrientation.horizontal,\n    direction = BarDirection.up,\n    previousData = {\n      data: {\n        key: '',\n        value: 0,\n      },\n    },\n    scale,\n    scalePosition,\n    width = 40,\n    minWidth,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme();\n\n  const getValue = (data: BarDatum['data']) =>\n    data?.cumulativeValue !== undefined ? data.cumulativeValue : data?.value;\n  const interpolator = d3interpolate(getValue(previousData!.data) || 0, getValue(data.data) || 0);\n\n  const text = labelDecorator\n    ? labelDecorator(data, { index, isSelected: propsIsSelected, color })\n    : (data.data.key as string);\n  const isSelectable = role === 'option';\n  const isDeselected = isSelectable && propsIsSelected === false;\n  const isHorizontal = orientation === BarOrientation.horizontal;\n  const goesUp = direction === BarDirection.up;\n  const isOrdinal = typeof scalePosition.domain()[0] === 'string';\n\n  const animatedProps = useSpring({\n    ...config,\n    to: async (next: (props?: object) => Promise<void>) => {\n      await next({ t: 1 });\n    },\n    from: { t: 0 },\n  });\n\n  const computedWidth: number = minWidth ? Math.max(minWidth, width) : width;\n\n  return (\n    <StyledBar\n      {...forwardedProps}\n      ref={ref}\n      className={classNames(Bar.className, className)}\n      transform={\n        isHorizontal\n          ? `translate(0, ${scalePosition(data.data.key as any)! + gap! / 2})`\n          : `translate(${\n              goesUp\n                ? scalePosition(data.data.key as any)! + (isOrdinal ? computedWidth + gap! / 2 : computedWidth / 2)\n                : scalePosition(data.data.key as any)! + (isOrdinal ? -computedWidth + gap! / 2 : -computedWidth / 2)\n            }, ${maxHeight})${goesUp ? ', rotate(180)' : ''}`\n      }\n      $clickable={Boolean(onClick)}\n      $theme={theme}\n    >\n      {isHorizontal ? (\n        <animated.rect\n          height={height}\n          fill={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n          width={\n            config.immediate || disableAnimations\n              ? scale(data.data.value)\n              : animatedProps.t.to((t) => scale(interpolator(t)))\n          }\n        />\n      ) : (\n        <animated.rect\n          height={\n            config.immediate || disableAnimations\n              ? goesUp\n                ? maxHeight! - scale(getValue(data.data))\n                : scale(getValue(data.data)) - maxHeight!\n              : animatedProps.t.to((t) =>\n                  Math.max(0, goesUp ? maxHeight! - scale(interpolator(t)) : scale(interpolator(t)) - maxHeight!)\n                )\n          }\n          fill={isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color}\n          width={computedWidth}\n        />\n      )}\n      {isHorizontal ? (\n        <text x=\"10\" y={height! / 2} dy=\"0.35em\" aria-hidden={true}>\n          {text}\n        </text>\n      ) : null}\n    </StyledBar>\n  );\n});\nBar.className = CLASSNAME;\nBar.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Bar","forwardRef","props","ref","color","monochrome","data","index","isSelected","propsIsSelected","labelDecorator","onClick","role","className","disableAnimations","gap","height","maxHeight","orientation","BarOrientation","horizontal","direction","BarDirection","up","previousData","key","value","scale","scalePosition","width","minWidth","forwardedProps","_objectWithoutProperties","_excluded","theme","useTheme","getValue","cumulativeValue","undefined","interpolator","d3interpolate","text","isSelectable","isDeselected","isHorizontal","goesUp","isOrdinal","domain","animatedProps","useSpring","_objectSpread","config","to","next","t","from","computedWidth","Math","max","React","createElement","StyledBar","_extends","classNames","transform","$clickable","Boolean","$theme","animated","rect","fill","immediate","x","y","dy","displayName"],"mappings":"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"}

package/components/Bar/styles.d.ts

@@ -0,0 +1,16 @@
+import * as styled_components from 'styled-components';
+import { BarProps } from './types.js';
+import * as _redsift_design_system from '@redsift/design-system';
+import { Theme } from '@redsift/design-system';
+import { DataPointProps } from '../DataPoint/types.js';
+
+/**
+ * Component style.
+ */
+declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data" | "dataset"> & {
+    $clickable: boolean;
+} & Omit<BarProps, "scale" | "scalePosition"> & {
+    $theme: Theme;
+}, never>;
+
+export { StyledBar };

package/components/Bar/styles.js

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components';
+import { Theme } from '@redsift/design-system';
+import { DataPoint } from '../DataPoint/DataPoint.js';
+
+/**
+ * Component style.
+ */
+const StyledBar = styled(DataPoint)`
+  text {
+    ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return css`
+      fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+    `;
+}}
+  }
+
+  ${_ref2 => {
+  let {
+    $clickable
+  } = _ref2;
+  return $clickable ? css`
+          cursor: pointer;
+
+          &:hover,
+          &:focus,
+          &.focused {
+            outline: none;
+            rect {
+              fill-opacity: 0.7;
+            }
+          }
+
+          // &:focus-visible {
+          //   rect {
+          //     stroke: var(--redsift-color-primary-n);
+          //     stroke-width: 4px;
+          //     paint-order: stroke;
+          //   }
+          // }
+
+          @media (prefers-reduced-motion: no-preference) {
+            &:focus-visible,
+            &.focused {
+              outline: 2px solid var(--redsift-color-primary-n);
+              transition: outline-offset 75ms ease-out;
+            }
+
+            &:not(&:active)&:focus-visible,
+            &:not(&:active)&.focused {
+              transition-duration: 0.25s;
+            }
+          }
+
+          &:not(&:active)&:focus-visible,
+          &:not(&:active)&.focused {
+            outline-offset: 0.2rem;
+          }
+        ` : '';
+}}}
+`;
+
+export { StyledBar };
+//# sourceMappingURL=styles.js.map

package/components/Bar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/Bar/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledBarProps } from './types';\nimport { DataPoint } from '../DataPoint';\nimport { Theme } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledBar = styled(DataPoint)<StyledBarProps>`\n  text {\n    ${({ $theme }) => css`\n      fill: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    `}\n  }\n\n  ${({ $clickable }) =>\n    $clickable\n      ? css`\n          cursor: pointer;\n\n          &:hover,\n          &:focus,\n          &.focused {\n            outline: none;\n            rect {\n              fill-opacity: 0.7;\n            }\n          }\n\n          // &:focus-visible {\n          //   rect {\n          //     stroke: var(--redsift-color-primary-n);\n          //     stroke-width: 4px;\n          //     paint-order: stroke;\n          //   }\n          // }\n\n          @media (prefers-reduced-motion: no-preference) {\n            &:focus-visible,\n            &.focused {\n              outline: 2px solid var(--redsift-color-primary-n);\n              transition: outline-offset 75ms ease-out;\n            }\n\n            &:not(&:active)&:focus-visible,\n            &:not(&:active)&.focused {\n              transition-duration: 0.25s;\n            }\n          }\n\n          &:not(&:active)&:focus-visible,\n          &:not(&:active)&.focused {\n            outline-offset: 0.2rem;\n          }\n        `\n      : ''}}\n`;\n"],"names":["StyledBar","styled","DataPoint","_ref","$theme","css","Theme","dark","_ref2","$clickable"],"mappings":";;;;AAKA;AACA;AACA;MACaA,SAAS,GAAGC,MAAM,CAACC,SAAS,CAAkB,CAAA;AAC3D;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AAC1B,wCAA0CD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AAC1F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;EAAA,OACfC,UAAU,GACNJ,GAAI,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;;;;"}

package/components/Bar/types.d.ts

@@ -0,0 +1,46 @@
+import { ScaleLinear, ScaleTime, ScalePoint } from 'd3';
+import { ValueOf, Theme } from '@redsift/design-system';
+import { BarDatum } from '../../types/data.js';
+import { DataPointProps, StyledDataPointProps } from '../DataPoint/types.js';
+
+/**
+ * Component variant.
+ */
+declare const BarOrientation: {
+    horizontal: string;
+    vertical: string;
+};
+type BarOrientation = ValueOf<typeof BarOrientation>;
+declare const BarDirection: {
+    up: string;
+    down: string;
+};
+type BarDirection = ValueOf<typeof BarDirection>;
+/**
+ * Component props.
+ */
+interface BarProps extends DataPointProps<BarDatum> {
+    /** Gap between two siblings. */
+    gap?: number;
+    /** Height of the bar in horizontal orientation. */
+    height?: number;
+    /** Maximum height of the bar. */
+    maxHeight?: number;
+    /** Orientation of the bar. */
+    orientation?: BarOrientation;
+    /** Direction of the bar, works only with vertical orientation. */
+    direction?: BarOrientation;
+    /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */
+    scale: ScaleLinear<number, number, never>;
+    /** A scale defined over a numeric/time/ordinal domain used to determine the position of the bar. */
+    scalePosition: ScaleLinear<number, number, never> | ScaleTime<number, number, never> | ScalePoint<string>;
+    /** Width of the bar in vertical orientation. */
+    width?: number;
+    /** Min width of the bar in vertical orientation. */
+    minWidth?: number;
+}
+type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale' | 'scalePosition'> & {
+    $theme: Theme;
+};
+
+export { BarDirection, BarOrientation, BarProps, StyledBarProps };

package/components/Bar/types.js

@@ -0,0 +1,18 @@
+/**
+ * Component variant.
+ */
+const BarOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+const BarDirection = {
+  up: 'up',
+  down: 'down'
+};
+
+/**
+ * Component props.
+ */
+
+export { BarDirection, BarOrientation };
+//# sourceMappingURL=types.js.map

package/components/Bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/Bar/types.ts"],"sourcesContent":["import { ScaleLinear as d3ScaleLinear, ScaleTime as d3ScaleTime, ScalePoint as d3ScalePoint } from 'd3';\nimport { Theme, ValueOf } from '@redsift/design-system';\nimport { BarDatum } from '../../types';\nimport { DataPointProps, StyledDataPointProps } from '../DataPoint';\n\n/**\n * Component variant.\n */\nexport const BarOrientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n};\nexport type BarOrientation = ValueOf<typeof BarOrientation>;\n\nexport const BarDirection = {\n  up: 'up',\n  down: 'down',\n};\nexport type BarDirection = ValueOf<typeof BarDirection>;\n\n/**\n * Component props.\n */\nexport interface BarProps extends DataPointProps<BarDatum> {\n  /** Gap between two siblings. */\n  gap?: number;\n  /** Height of the bar in horizontal orientation. */\n  height?: number;\n  /** Maximum height of the bar. */\n  maxHeight?: number;\n  /** Orientation of the bar. */\n  orientation?: BarOrientation;\n  /** Direction of the bar, works only with vertical orientation. */\n  direction?: BarOrientation;\n  /** A linear continuous scale defined over a numeric domain used to determine the width or height of the bar (depending on the orientation). */\n  scale: d3ScaleLinear<number, number, never>;\n  /** A scale defined over a numeric/time/ordinal domain used to determine the position of the bar. */\n  scalePosition: d3ScaleLinear<number, number, never> | d3ScaleTime<number, number, never> | d3ScalePoint<string>;\n  /** Width of the bar in vertical orientation. */\n  width?: number;\n  /** Min width of the bar in vertical orientation. */\n  minWidth?: number;\n}\n\nexport type StyledBarProps = StyledDataPointProps &\n  Omit<BarProps, 'scale' | 'scalePosition'> & {\n    $theme: Theme;\n  };\n"],"names":["BarOrientation","horizontal","vertical","BarDirection","up","down"],"mappings":"AAKA;AACA;AACA;AACO,MAAMA,cAAc,GAAG;AAC5BC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAC;AAGM,MAAMC,YAAY,GAAG;AAC1BC,EAAAA,EAAE,EAAE,IAAI;AACRC,EAAAA,IAAI,EAAE,MAAA;AACR,EAAC;;AAGD;AACA;AACA;;;;"}

package/components/BarChart/BarChart.d.ts

@@ -0,0 +1,29 @@
+import { BarChartProps, BarChartSectionProps, BarChartBarsProps, ComputedBarProps } from './types.js';
+import React from 'react';
+import { Comp } from '@redsift/design-system';
+import { AxisProps } from '../Axis/types.js';
+import { BarDatum } from '../../types/data.js';
+import { LegendProps } from '../Legend/types.js';
+import { LegendItemProps } from '../LegendItem/types.js';
+import { ChartContainerProps } from '../ChartContainer/types.js';
+
+declare const BaseBarChart: Comp<BarChartProps, HTMLDivElement>;
+declare const BarChart: Comp<BarChartProps, HTMLDivElement> & {
+    Section: Comp<BarChartSectionProps, SVGGElement>;
+    Bars: Comp<BarChartBarsProps, SVGGElement>;
+    Axis: Comp<AxisProps, SVGGElement>;
+    GroupedTooltip: React.FC<{
+        dateFormatter: (date: Date) => string;
+        categories: string[];
+        categoryDecorator?: ((category: string) => string) | undefined;
+        categoryColor: (category: string) => string;
+        datum: BarDatum;
+        groupedData: ComputedBarProps[] | undefined;
+    }>;
+    Legend: Comp<LegendProps, HTMLUListElement>;
+    LegendItem: Comp<LegendItemProps, HTMLLIElement>;
+    Title: Comp<Pick<ChartContainerProps, "onReset"> & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    Description: Comp<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLDivElement>;
+};
+
+export { BarChart, BaseBarChart };

package/components/BarChart/BarChart.js

@@ -0,0 +1,141 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useId } from '@redsift/design-system';
+import { BarChartLegendVariant } from './types.js';
+import { EmptyBarChart } from './EmptyBarChart.js';
+import { LoadingBarChart } from './LoadingBarChart.js';
+import { RenderedOrdinalBarChart } from './RenderedOrdinalBarChart.js';
+import { RenderedLinearBarChart } from './RenderedLinearBarChart.js';
+import { isValidDate } from '../../utils/index.js';
+import { BarChartSection } from './BarChartSection.js';
+import { BarChartBars, BarChartGroupedTooltip } from './BarChartBars.js';
+import { ColorTheme } from '../../types/theme.js';
+import { ChartContainerTitle, ChartContainerDescription } from '../ChartContainer/ChartContainer.js';
+import { BarOrientation } from '../Bar/types.js';
+import { ChartSize } from '../../types/size.js';
+import { TooltipVariant } from '../../types/legend.js';
+import { Axis } from '../Axis/Axis.js';
+import { Legend } from '../Legend/Legend.js';
+import { LegendItem } from '../LegendItem/LegendItem.js';
+
+const _excluded = ["barRole", "caping", "chartRef", "className", "colorTheme", "data", "dataType", "emptyComponent", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "localeText", "onBarClick", "orientation", "others", "size", "sortingMethod", "theme", "tooltipDecorator", "tooltipVariant", "xAxisPlacement", "yAxisPlacement"];
+const COMPONENT_NAME = 'BarChart';
+const CLASSNAME = 'redsift-barchart';
+const BaseBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      barRole,
+      caping,
+      chartRef,
+      className,
+      colorTheme = ColorTheme.default,
+      data: propsData,
+      dataType: propsDataType,
+      emptyComponent,
+      id: propsId,
+      isBarSelected = () => true,
+      labelDecorator,
+      legendDecorator,
+      legendVariant: propsLegendVariant,
+      localeText = {
+        emptyChartText: 'No Data'
+      },
+      onBarClick,
+      orientation = BarOrientation.horizontal,
+      others = true,
+      size = ChartSize.medium,
+      sortingMethod = 'desc-value',
+      theme,
+      tooltipDecorator,
+      tooltipVariant = TooltipVariant.value,
+      xAxisPlacement = 'bottom',
+      yAxisPlacement = 'left'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  const legendVariant = propsLegendVariant !== null && propsLegendVariant !== void 0 ? propsLegendVariant : BarChartLegendVariant.externalLabel;
+  if (propsData === undefined || propsData === null) {
+    return /*#__PURE__*/React__default.createElement(LoadingBarChart, _extends({
+      id: id
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  if (propsData.length === 0) {
+    return /*#__PURE__*/React__default.createElement(EmptyBarChart, _extends({
+      data: propsData,
+      emptyComponent: emptyComponent,
+      id: id,
+      localeText: localeText,
+      size: size
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  const dataType = propsDataType ? propsDataType : Array.isArray(propsData[0].key) ? 'TwoCategoryData' : propsData[0].key instanceof Date ? 'LinearData' : typeof propsData[0].key === 'number' ? 'LinearData' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'LinearData' : typeof propsData[0].key === 'string' ? 'CategoryData' : 'CategoryData';
+  if (dataType === 'CategoryData') {
+    return /*#__PURE__*/React__default.createElement(RenderedOrdinalBarChart, _extends({
+      barRole: barRole,
+      caping: caping,
+      chartRef: chartRef,
+      className: classNames(BaseBarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      onBarClick: onBarClick,
+      orientation: orientation,
+      others: others,
+      size: size,
+      sortingMethod: sortingMethod,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
+    }, forwardedProps, {
+      ref: ref
+    }));
+  } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {
+    return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
+      barRole: barRole,
+      chartRef: chartRef,
+      className: classNames(BaseBarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      legendDecorator: legendDecorator,
+      legendVariant: legendVariant,
+      onBarClick: onBarClick,
+      size: size,
+      sortingMethod: sortingMethod,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant,
+      xAxisPlacement: xAxisPlacement,
+      yAxisPlacement: yAxisPlacement
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return null;
+});
+BaseBarChart.className = CLASSNAME;
+BaseBarChart.displayName = COMPONENT_NAME;
+const BarChart = Object.assign(BaseBarChart, {
+  Section: BarChartSection,
+  Bars: BarChartBars,
+  Axis: Axis,
+  GroupedTooltip: BarChartGroupedTooltip,
+  Legend: Legend,
+  LegendItem: LegendItem,
+  Title: ChartContainerTitle,
+  Description: ChartContainerDescription
+});
+
+export { BarChart, BaseBarChart };
+//# sourceMappingURL=BarChart.js.map

package/components/BarChart/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sources":["../../../src/components/BarChart/BarChart.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { Comp, useId } from '@redsift/design-system';\n\nimport { ChartSize, ColorTheme, LinearData, TooltipVariant } from '../../types';\nimport { BarChartLegendVariant, BarChartProps } from './types';\nimport { EmptyBarChart } from './EmptyBarChart';\nimport { LoadingBarChart } from './LoadingBarChart';\nimport { RenderedOrdinalBarChart } from './RenderedOrdinalBarChart';\nimport { RenderedLinearBarChart } from './RenderedLinearBarChart';\nimport { BarOrientation } from '../Bar';\nimport { isValidDate } from '../../utils';\nimport { BarChartSection } from './BarChartSection';\nimport { BarChartBars, BarChartGroupedTooltip } from './BarChartBars';\nimport { Axis } from '../Axis';\nimport { Legend } from '../Legend';\nimport { LegendItem } from '../LegendItem';\nimport { ChartContainerDescription, ChartContainerTitle } from '../ChartContainer';\n\nconst COMPONENT_NAME = 'BarChart';\nconst CLASSNAME = 'redsift-barchart';\n\nexport const BaseBarChart: Comp<BarChartProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    barRole,\n    caping,\n    chartRef,\n    className,\n    colorTheme = ColorTheme.default,\n    data: propsData,\n    dataType: propsDataType,\n    emptyComponent,\n    id: propsId,\n    isBarSelected = () => true,\n    labelDecorator,\n    legendDecorator,\n    legendVariant: propsLegendVariant,\n    localeText = { emptyChartText: 'No Data' },\n    onBarClick,\n    orientation = BarOrientation.horizontal,\n    others = true,\n    size = ChartSize.medium,\n    sortingMethod = 'desc-value',\n    theme,\n    tooltipDecorator,\n    tooltipVariant = TooltipVariant.value,\n    xAxisPlacement = 'bottom',\n    yAxisPlacement = 'left',\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  const legendVariant = propsLegendVariant ?? BarChartLegendVariant.externalLabel;\n\n  if (propsData === undefined || propsData === null) {\n    return <LoadingBarChart id={id} {...forwardedProps} ref={ref} />;\n  }\n\n  if (propsData.length === 0) {\n    return (\n      <EmptyBarChart\n        data={propsData}\n        emptyComponent={emptyComponent}\n        id={id}\n        localeText={localeText}\n        size={size}\n        {...forwardedProps}\n        ref={ref}\n      />\n    );\n  }\n\n  const dataType = propsDataType\n    ? propsDataType\n    : Array.isArray(propsData[0].key)\n    ? 'TwoCategoryData'\n    : propsData[0].key instanceof Date\n    ? 'LinearData'\n    : typeof propsData[0].key === 'number'\n    ? 'LinearData'\n    : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key)\n    ? 'LinearData'\n    : typeof propsData[0].key === 'string'\n    ? 'CategoryData'\n    : 'CategoryData';\n\n  if (dataType === 'CategoryData') {\n    return (\n      <RenderedOrdinalBarChart\n        barRole={barRole}\n        caping={caping}\n        chartRef={chartRef}\n        className={classNames(BaseBarChart.className, className)}\n        data={propsData}\n        id={id}\n        isBarSelected={isBarSelected}\n        labelDecorator={labelDecorator}\n        onBarClick={onBarClick}\n        orientation={orientation}\n        others={others}\n        size={size}\n        sortingMethod={sortingMethod}\n        theme={theme}\n        tooltipDecorator={tooltipDecorator}\n        colorTheme={colorTheme}\n        tooltipVariant={tooltipVariant}\n        xAxisPlacement={xAxisPlacement}\n        yAxisPlacement={yAxisPlacement}\n        {...forwardedProps}\n        ref={ref}\n      />\n    );\n  } else if (dataType === 'LinearData' || dataType === 'TwoCategoryData') {\n    return (\n      <RenderedLinearBarChart\n        barRole={barRole}\n        chartRef={chartRef}\n        className={classNames(BaseBarChart.className, className)}\n        data={propsData as LinearData}\n        id={id}\n        isBarSelected={isBarSelected}\n        labelDecorator={labelDecorator}\n        legendDecorator={legendDecorator}\n        legendVariant={legendVariant}\n        onBarClick={onBarClick}\n        size={size}\n        sortingMethod={sortingMethod}\n        theme={theme}\n        tooltipDecorator={tooltipDecorator}\n        colorTheme={colorTheme}\n        tooltipVariant={tooltipVariant}\n        xAxisPlacement={xAxisPlacement}\n        yAxisPlacement={yAxisPlacement}\n        {...forwardedProps}\n        ref={ref}\n      />\n    );\n  }\n\n  return null;\n});\nBaseBarChart.className = CLASSNAME;\nBaseBarChart.displayName = COMPONENT_NAME;\n\nexport const BarChart = Object.assign(BaseBarChart, {\n  Section: BarChartSection,\n  Bars: BarChartBars,\n  Axis: Axis,\n  GroupedTooltip: BarChartGroupedTooltip,\n  Legend: Legend,\n  LegendItem: LegendItem,\n  Title: ChartContainerTitle,\n  Description: ChartContainerDescription,\n});\n"],"names":["COMPONENT_NAME","CLASSNAME","BaseBarChart","forwardRef","props","ref","barRole","caping","chartRef","className","colorTheme","ColorTheme","default","data","propsData","dataType","propsDataType","emptyComponent","id","propsId","isBarSelected","labelDecorator","legendDecorator","legendVariant","propsLegendVariant","localeText","emptyChartText","onBarClick","orientation","BarOrientation","horizontal","others","size","ChartSize","medium","sortingMethod","theme","tooltipDecorator","tooltipVariant","TooltipVariant","value","xAxisPlacement","yAxisPlacement","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","BarChartLegendVariant","externalLabel","undefined","React","createElement","LoadingBarChart","_extends","length","EmptyBarChart","Array","isArray","key","Date","isValidDate","RenderedOrdinalBarChart","classNames","RenderedLinearBarChart","displayName","BarChart","Object","assign","Section","BarChartSection","Bars","BarChartBars","Axis","GroupedTooltip","BarChartGroupedTooltip","Legend","LegendItem","Title","ChartContainerTitle","Description","ChartContainerDescription"],"mappings":"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"}

package/components/BarChart/BarChartBars.js

@@ -0,0 +1,168 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { Flexbox, Text } from '@redsift/design-system';
+import { StyledBarChartBars } from './styles.js';
+import { useBarChartContext } from './context.js';
+import { Bar } from '../Bar/Bar.js';
+import { BarOrientation } from '../Bar/types.js';
+
+const _excluded = ["category"];
+const COMPONENT_NAME = 'BarChartBars';
+const CLASSNAME = 'redsift-bars';
+const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      category = 'default'
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    barProps,
+    barRole,
+    bars,
+    barWidth,
+    cache,
+    categories,
+    colorScale,
+    direction,
+    disableAnimations,
+    format,
+    gap,
+    getBarAnchorProps,
+    hasCategory,
+    id,
+    isBarSelected,
+    labelDecorator,
+    onBarClick,
+    scaleX,
+    scaleY,
+    tooltipVariant,
+    tooltipDecorator,
+    xScaleType
+  } = useBarChartContext();
+  const filteredBarChartBars = bars.filter(bar => bar.category === category && bar.value > 0);
+  const categoryIndex = categories.indexOf(category);
+  const categoryLength = categories.length;
+  return /*#__PURE__*/React__default.createElement(StyledBarChartBars, _extends({
+    key: `${id}-series-${category}`,
+    "aria-hidden": "false",
+    role: "region"
+  }, hasCategory ? {
+    'aria-label': format('series-legend', {
+      category,
+      categoryIndex: categoryIndex + 1,
+      categoryLength,
+      barLength: filteredBarChartBars.length
+    })
+  } : {}, forwardedProps, {
+    ref: ref
+  }), filteredBarChartBars.map((bar, index) => {
+    const to = {
+      data: bar,
+      category
+    };
+    const from = cache.current ? {
+      data: cache.current[index]
+    } : undefined;
+    const groupedBars = bars.filter(b => {
+      return xScaleType === 'Date' || xScaleType === 'dateString' ? b.key.getTime() === bar.key.getTime() : b.key === bar.key;
+    });
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
+      data: to,
+      dataset: bars,
+      groupedData: groupedBars,
+      disableAnimations: disableAnimations,
+      gap: gap,
+      id: `id${id}__bar-${categoryIndex}.${index}`,
+      index: index,
+      isSelected: Boolean(isBarSelected(to)),
+      key: `bar _${categoryIndex}.${index}`,
+      labelDecorator: labelDecorator,
+      maxHeight: scaleY(bar.cumulativeValue - bar.value),
+      anchorProps: getBarAnchorProps ? getBarAnchorProps(to) : undefined,
+      onClick: onBarClick,
+      orientation: BarOrientation.vertical,
+      direction: direction,
+      previousData: from,
+      scale: scaleY,
+      scalePosition: scaleX,
+      tooltipVariant: tooltipVariant,
+      tooltipDecorator: tooltipDecorator
+    }, barProps, {
+      width: barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? barProps.width : barWidth,
+      height: undefined,
+      role: barRole
+    }));
+  }));
+});
+BarChartBars.className = CLASSNAME;
+BarChartBars.displayName = COMPONENT_NAME;
+const BarChartGroupedTooltip = _ref => {
+  let {
+    dateFormatter,
+    categories,
+    categoryDecorator,
+    categoryColor,
+    datum,
+    groupedData
+  } = _ref;
+  return /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    margin: "16px",
+    gap: "0"
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "8px"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "400",
+    fontSize: "14px"
+  }, "Date:"), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "700",
+    fontSize: "14px"
+  }, dateFormatter(datum.data.key))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      height: '1px',
+      backgroundColor: '#858585',
+      margin: '8px 0'
+    }
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "8px"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "400",
+    fontSize: "14px"
+  }, "Total:"), /*#__PURE__*/React__default.createElement(Text, {
+    fontWeight: "600",
+    fontSize: "14px"
+  }, groupedData === null || groupedData === void 0 ? void 0 : groupedData.reduce((acc, d) => acc + d.value, 0))), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    marginTop: "4px",
+    gap: "8px"
+  }, categories.map(category => {
+    var _groupedData$find;
+    const value = groupedData === null || groupedData === void 0 ? void 0 : (_groupedData$find = groupedData.find(d => d.category === category)) === null || _groupedData$find === void 0 ? void 0 : _groupedData$find.value;
+    const color = categoryColor(category);
+    return value ? /*#__PURE__*/React__default.createElement(Flexbox, {
+      key: category,
+      alignItems: "center",
+      gap: "8px"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      style: {
+        width: '16px',
+        height: '16px',
+        backgroundColor: color
+      }
+    }), /*#__PURE__*/React__default.createElement(Text, {
+      fontWeight: "400",
+      fontSize: "14px",
+      lineHeight: "18px"
+    }, categoryDecorator ? categoryDecorator(category) : category), /*#__PURE__*/React__default.createElement(Text, {
+      fontWeight: "600",
+      fontSize: "14px",
+      lineHeight: "18px"
+    }, value)) : null;
+  })));
+};
+
+export { BarChartBars, BarChartGroupedTooltip };
+//# sourceMappingURL=BarChartBars.js.map