@redsift/charts 10.0.0 → 10.1.0-alpha.0

package/index.d.ts

@@ -130,19 +130,24 @@ type EmptyDatum<T> = {
     percent?: number;
 };
 type CategoryDim = string;
-type TwoCategoryDim = [number | string | Date, string | undefined | null];
-type CoordinatesCategoryDim = [number, number, string | undefined | null];
+type LinearDim = number | Date | string;
+type CategoricalOrLinearDim = CategoryDim | LinearDim;
+type TwoCategoryDim = [CategoricalOrLinearDim, CategoryDim | undefined | null];
+type CoordinatesCategoryDim = [number, number, CategoryDim | undefined | null];
 type CategoryDatum = Datum<CategoryDim>;
+type LinearDatum = Datum<LinearDim>;
 type TwoCategoryDatum = EmptyDatum<TwoCategoryDim>;
 type CoordinatesCategoryDatum = Datum<CoordinatesCategoryDim>;
 type CategoryData = CategoryDatum[];
+type LinearData = LinearDatum[];
 type TwoCategoryData = TwoCategoryDatum[];
 type CoordinatesCategoryData = CoordinatesCategoryDatum[];
 type ArcDatum = PieArcDatum<CategoryDatum>;
 type BarDatum = {
-    data: CategoryDatum;
+    data: CategoryDatum | LinearDatum | Datum<TwoCategoryDim>;
     height?: number;
     width?: number;
+    category?: string | null;
 };
 type DotDatum = {
     data: EmptyDatum<CoordinatesCategoryDim | TwoCategoryDim>;
@@ -297,6 +302,7 @@ declare const useColor: ({ data, colorTheme, category, theme }: UseColorProps) =
 
 type SortingMethod = 'none' | 'asc-key' | 'desc-key' | 'asc-value' | 'desc-value' | string[] | ((a: CategoryDatum, b: CategoryDatum) => 1 | -1);
 declare const getSortingMethod: (sortingMethod: SortingMethod) => (a: CategoryDatum, b: CategoryDatum) => 1 | -1;
+declare const isValidDate: (value: string) => boolean;
 
 interface UseFormatCategoricalDataProps {
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
@@ -484,10 +490,12 @@ interface BarProps extends DataPointProps<BarDatum> {
     orientation?: 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$1<number, number, never>;
+    /** A scale defined over a numeric/time/ordinal domain used to determine the position of the bar. */
+    scalePosition: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
     /** Width of the bar in vertical orientation. */
     width?: number;
 }
-type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale'> & {
+type StyledBarProps = StyledDataPointProps & Omit<BarProps, 'scale' | 'scalePosition'> & {
     $theme: Theme;
 };
 
@@ -498,7 +506,7 @@ declare const Bar: Comp<BarProps, SVGGElement>;
  */
 declare const StyledBar: styled_components.StyledComponent<_redsift_design_system.Comp<DataPointProps<any>, SVGGElement>, any, Omit<DataPointProps<any>, "data"> & {
     $clickable: boolean;
-} & Omit<BarProps, "scale"> & {
+} & Omit<BarProps, "scale" | "scalePosition"> & {
     $theme: Theme;
 }, never>;
 
@@ -557,7 +565,7 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
-    data?: CategoryData;
+    data?: CategoryData | LinearData | TwoCategoryData;
     /** Component to use if the chart is empty (replacing the default one). */
     emptyComponent?: ReactNode;
     /** Method to determine whether a slice is selected or not. */
@@ -623,7 +631,7 @@ type DotVariant = ValueOf<typeof DotVariant>;
  * Component props.
  */
 interface DotProps extends DataPointProps<DotDatum> {
-    /** A linear continuous scale defined over a numeric domain used to determine the x position based on the coordinates. */
+    /** A scale defined over a numeric/time/ordinal domain used to determine the x position based on the coordinates. */
     scaleX: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<string>;
     /** A linear continuous scale defined over a numeric domain used to determine the y position based on the coordinates. */
     scaleY: ScaleLinear$1<number, number, never>;
@@ -1025,4 +1033,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $theme: Theme;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };

package/index.js

@@ -223,6 +223,10 @@ const getSortingMethod = sortingMethod => {
   }
   return () => -1;
 };
+const isValidDate = value => {
+  const date = new Date(value);
+  return date instanceof Date && !isNaN(date) && !isNaN(Date.parse(value));
+};
 
 const useFormatCategoricalData = _ref => {
   let {
@@ -359,7 +363,7 @@ var k=/^--/;function I(t,e){return e==null||typeof e=="boolean"||e===""?"":typeo
  */
 const StyledDataPoint = styled(it.g)``;
 
-const _excluded$p = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
+const _excluded$q = ["children", "className", "data", "id", "index", "isSelected", "labelDecorator", "onClick", "role", "tooltipDecorator", "tooltipVariant", "theme"];
 const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       children,
@@ -375,7 +379,7 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
       tooltipVariant,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$p);
+    forwardedProps = _objectWithoutProperties(props, _excluded$q);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
@@ -493,7 +497,7 @@ const config = (() => ({
   immediate: false
 }))();
 
-const _excluded$o = ["className", "createArc", "hasStroke", "previousData"];
+const _excluded$p = ["className", "createArc", "hasStroke", "previousData"];
 const COMPONENT_NAME$c = 'Arc';
 const CLASSNAME$c = 'redsift-arc';
 const DEFAULT_PROPS$c = {
@@ -525,7 +529,7 @@ const Arc = /*#__PURE__*/forwardRef((props, ref) => {
       hasStroke,
       previousData
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$o);
+    forwardedProps = _objectWithoutProperties(props, _excluded$p);
   const theme = useTheme();
   const interpolator = interpolate(previousData, data);
   const isSelectable = role === 'option';
@@ -560,7 +564,7 @@ Arc.displayName = COMPONENT_NAME$c;
  */
 const StyledArcs = styled.g``;
 
-const _excluded$n = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
+const _excluded$o = ["arcs", "className", "color", "hasLabels", "hasStroke", "id", "labelDecorator", "onClick", "role", "sliceProps", "tooltipVariant"];
 const COMPONENT_NAME$b = 'Arcs';
 const CLASSNAME$b = 'redsift-arcs';
 const DEFAULT_PROPS$b = {};
@@ -578,7 +582,7 @@ const Arcs = /*#__PURE__*/forwardRef((props, ref) => {
       sliceProps,
       tooltipVariant
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$n);
+    forwardedProps = _objectWithoutProperties(props, _excluded$o);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
@@ -804,7 +808,7 @@ const computeTicks = _ref => {
   };
 };
 
-const _excluded$m = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "variant", "x", "y"];
+const _excluded$n = ["className", "length", "legend", "legendOffset", "legendPosition", "position", "scale", "tickPadding", "tickRotation", "tickSize", "tickValues", "tickFormat", "variant", "x", "y"];
 const COMPONENT_NAME$a = 'Axis';
 const CLASSNAME$a = 'redsift-axis';
 const DEFAULT_PROPS$a = {
@@ -837,7 +841,7 @@ const Axis = /*#__PURE__*/forwardRef((props, ref) => {
       x,
       y
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$m);
+    forwardedProps = _objectWithoutProperties(props, _excluded$n);
   const theme = useTheme();
   const axis = getAxisType(position);
   const axisRef = ref || useRef();
@@ -1044,7 +1048,7 @@ const StyledBar = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$l = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "width"];
+const _excluded$m = ["className", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "scalePosition", "width"];
 const COMPONENT_NAME$9 = 'Bar';
 const CLASSNAME$9 = 'redsift-bar';
 const DEFAULT_PROPS$9 = {
@@ -1081,9 +1085,10 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       previousData,
       scale,
+      scalePosition,
       width
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$l);
+    forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const theme = useTheme();
   const interpolator = interpolate(((_data = previousData.data) === null || _data === void 0 ? void 0 : _data.value) || 0, data.data.value);
   const text = labelDecorator ? labelDecorator(data, {
@@ -1094,6 +1099,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   const isSelectable = role === 'option';
   const isDeselected = isSelectable && propsIsSelected === false;
   const isHorizontal = orientation === BarOrientation.horizontal;
+  const isOrdinal = typeof scalePosition.domain()[0] === 'string';
   const animatedProps = J(_objectSpread2(_objectSpread2({}, config), {}, {
     to: async next => {
       await next({
@@ -1107,7 +1113,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   return /*#__PURE__*/React__default.createElement(StyledBar, _extends({}, forwardedProps, {
     ref: ref,
     className: classNames(Bar.className, className),
-    transform: isHorizontal ? `translate(0, ${gap * (index + 1) + height * index})` : `translate(${gap * (index + 1) + width * index + width}, ${maxHeight}), rotate(180)`,
+    transform: isHorizontal ? `translate(0, ${scalePosition(data.data.key) + gap / 2})` : `translate(${scalePosition(data.data.key) + (isOrdinal ? width + gap / 2 : width / 2)}, ${maxHeight}), rotate(180)`,
     $clickable: Boolean(onClick),
     $theme: theme
   }), isHorizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
@@ -1188,7 +1194,7 @@ const StyledChartContainerCaption = styled.p`
   margin: 8px;
 `;
 
-const _excluded$k = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme"];
+const _excluded$l = ["aria-label", "aria-labelledby", "description", "chartProps", "chartRef", "children", "className", "id", "title", "onReset", "theme"];
 const COMPONENT_NAME$8 = 'ChartContainer';
 const CLASSNAME$8 = 'redsift-chart-container';
 const DEFAULT_PROPS$8 = {};
@@ -1206,7 +1212,7 @@ const ChartContainer = /*#__PURE__*/forwardRef((props, ref) => {
       onReset,
       theme: propsTheme
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$k);
+    forwardedProps = _objectWithoutProperties(props, _excluded$l);
   const [_id] = useId();
   const id = propsId !== null && propsId !== void 0 ? propsId : _id;
   const theme = useTheme(propsTheme);
@@ -1327,8 +1333,45 @@ const sizeToDimension$3 = size => {
       };
   }
 };
+const statsBy$1 = (arr, sortingMethod) => {
+  const isKeyArray = Array.isArray(arr[0].key);
+  const counts = arr.reduce((prev, curr) => {
+    if (!curr.value) {
+      return prev;
+    }
+    const currentKey = isKeyArray ? curr.key[1] : 'default';
+    if (!prev[currentKey]) {
+      prev[currentKey] = {
+        value: curr.value,
+        min: curr.value,
+        max: curr.value,
+        values: [curr.value]
+      };
+    } else {
+      prev[currentKey] = {
+        value: prev[currentKey].value + curr.value,
+        min: Math.min(prev[currentKey].min, curr.value),
+        max: Math.max(prev[currentKey].max, curr.value),
+        values: [...prev[currentKey].values, curr.value]
+      };
+    }
+    return prev;
+  }, {});
+  return Object.keys(counts).map(key => ({
+    key: key,
+    value: counts[key].value,
+    min: counts[key].min,
+    max: counts[key].max,
+    values: counts[key].values,
+    first: counts[key].values[0],
+    last: counts[key].values[counts[key].values.length - 1],
+    trending: {
+      overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
+    }
+  })).sort(getSortingMethod(sortingMethod));
+};
 
-const _excluded$j = ["className", "emptyComponent", "size", "localeText"];
+const _excluded$k = ["className", "emptyComponent", "size", "localeText"];
 const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -1336,7 +1379,7 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       localeText
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$j);
+    forwardedProps = _objectWithoutProperties(props, _excluded$k);
   const theme = useTheme();
   const chartDimensions = sizeToDimension$3(size);
   const width = chartDimensions.width;
@@ -1375,20 +1418,20 @@ const EmptyBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$i = ["className"];
+const _excluded$j = ["className"];
 const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$i);
+    forwardedProps = _objectWithoutProperties(props, _excluded$j);
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     className: className,
     ref: ref
   }), "Loading...");
 });
 
-const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
-const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+const _excluded$i = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues"];
+const RenderedOrdinalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
       barProps,
@@ -1422,7 +1465,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisTickSize,
       yAxisTickValues
     } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+    forwardedProps = _objectWithoutProperties(props, _excluded$i);
   const cache = useRef();
   const theme = useTheme();
   const {
@@ -1455,8 +1498,8 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const chartWidth = width - margins.left - margins.right;
   const numberOfRows = data.filter(datum => datum.value).length;
   const gap = 5;
-  const barHeight = (chartHeight - (numberOfRows + 1) * gap) / numberOfRows;
-  const barWidth = (chartWidth - (numberOfRows + 1) * gap) / numberOfRows;
+  const barHeight = chartHeight / numberOfRows - gap;
+  const barWidth = chartWidth / numberOfRows - gap;
   const total = sum(data, d => d.value);
   const scale = useMemo(() => scaleLinear().domain([0, Math.max(...data.map(_ref => {
     let {
@@ -1522,7 +1565,9 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickSize: yAxisTickSize,
     tickFormat: yAxisTickFormat,
     variant: yAxisVariant
-  }) : null, data.filter(datum => datum.value).map((datum, index) => {
+  }) : null), /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, data.filter(datum => datum.value).map((datum, index) => {
     const percent = datum.value / total;
     const to = {
       data: _objectSpread2(_objectSpread2({}, datum), {}, {
@@ -1548,12 +1593,223 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       previousData: from,
       role: barRole,
       scale: scale,
+      scalePosition: scaleCategory,
       tooltipVariant: tooltipVariant,
       width: isHorizontal ? undefined : barWidth
     }));
   }))));
 });
 
+const _excluded$h = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "dateParser"];
+const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      barProps,
+      className,
+      data: propsData,
+      id,
+      isBarSelected,
+      labelDecorator,
+      margins: propsMargins,
+      onBarClick,
+      size,
+      sortingMethod,
+      barRole,
+      colorTheme,
+      tooltipVariant,
+      xAxisVariant: propsXAxisVariant,
+      xAxisPlacement,
+      xAxisTickFormat: propsXAxisTickFormat,
+      xAxisTickPadding,
+      xAxisTickRotation,
+      xAxisTickSize,
+      xAxisTickValues,
+      yAxisVariant: propsYAxisVariant,
+      yAxisPlacement,
+      yAxisTickFormat,
+      yAxisTickPadding,
+      yAxisTickRotation,
+      yAxisTickSize,
+      yAxisTickValues,
+      dateParser
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$h);
+  const cache = useRef();
+  const theme = useTheme();
+  const xScaleType = propsData[0].key instanceof Date ? 'Date' : typeof propsData[0].key === 'number' ? 'number' : typeof propsData[0].key === 'string' && isValidDate(propsData[0].key) ? 'dateString' : undefined;
+  const data = xScaleType === 'number' ? propsData.filter(datum => typeof datum.key === 'number' && !Number.isNaN(datum.key)) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(datum.key)) : xScaleType === 'Date' ? propsData.filter(datum => datum.key instanceof Date) : propsData;
+  useEffect(() => {
+    cache.current = data;
+  });
+  const svgRef = useRef();
+  const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : AxisVariant.tickValue;
+  const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : AxisVariant.default;
+  const chartDimensions = sizeToDimension$3(size);
+  const width = chartDimensions.width;
+  const height = chartDimensions.height;
+  const margins = _objectSpread2({
+    top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
+    left: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    right: yAxisVariant === AxisVariant.default || yAxisVariant === AxisVariant.tickValue ? 48 : 8,
+    bottom: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8
+  }, propsMargins);
+  const chartHeight = height - margins.top - margins.bottom;
+  const chartWidth = width - margins.left - margins.right;
+  const numberOfRows = data.filter(datum => datum.value).length;
+  const gap = 5;
+  let barWidth = chartWidth / (numberOfRows * 2) - gap;
+  const scaleX = (() => {
+    if (xScaleType === 'number') {
+      const domain = extent(data, d => d.key);
+      const gap = domain[1] - domain[0];
+      domain[0] -= gap * 0.1;
+      domain[1] += gap * 0.1;
+      return scaleLinear().domain(domain).range([0, chartWidth]).nice();
+    } else if (xScaleType === 'dateString' || xScaleType === 'Date') {
+      const domain = xScaleType === 'dateString' ? extent(data, d => Date.parse(d.key)) : extent(data, d => d.key.valueOf());
+      const startDate = xAxisTickValues && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), -1) : new Date(domain[0]);
+      const endDate = xAxisTickValues && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), 0) : new Date(domain[1]);
+      return scaleTime().domain([startDate, endDate]).range([0, chartWidth]).nice();
+    } else {
+      return scalePoint().domain(xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => d.key)).range([0, chartWidth]);
+    }
+  })();
+  const scaleY = (() => {
+    const domain = extent(data, d => d.value);
+    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+  })();
+  const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
+  const statsByCategory = statsBy$1(data, sortingMethod);
+  const colorScale = useColor({
+    data: statsByCategory,
+    colorTheme: colorTheme,
+    category: d => d.key,
+    theme
+  });
+  const bars = data.sort((a, b) => {
+    const currentKeyA = a.key;
+    const currentKeyB = b.key;
+    if (xScaleType === 'number') {
+      if (currentKeyA < currentKeyB) return -1;
+      if (currentKeyA > currentKeyB) return 1;
+      return 0;
+    } else if (xScaleType === 'dateString') {
+      if (Date.parse(currentKeyA) < Date.parse(currentKeyB)) return -1;
+      if (Date.parse(currentKeyA) > Date.parse(currentKeyB)) return 1;
+      return 0;
+    } else if (xScaleType === 'Date') {
+      if (currentKeyA.valueOf() < currentKeyB.valueOf()) return -1;
+      if (currentKeyA.valueOf() > currentKeyB.valueOf()) return 1;
+      return 0;
+    } else if (xScaleType === 'string' && xAxisTickValues && Array.isArray(xAxisTickValues)) {
+      if (xAxisTickValues.indexOf(currentKeyA) < xAxisTickValues.indexOf(currentKeyB)) return -1;
+      if (xAxisTickValues.indexOf(currentKeyA) > xAxisTickValues.indexOf(currentKeyB)) return 1;
+      return 0;
+    }
+    return 0;
+  }).filter(d => d.value !== null).map(d => {
+    const currentKeyD = d.key;
+    return {
+      category: 'default',
+      key: xScaleType === 'dateString' ? dateParser ? dateParser(currentKeyD) : new Date(Date.parse(currentKeyD)) : currentKeyD,
+      value: d.value
+    };
+  });
+  if (xScaleType) {
+    const minimalGap = Math.min(...bars.map((bar, i) => i > 0 ? Math.abs(bar.key - bars[i - 1].key) : undefined).filter(k => k)) * 0.9;
+    barWidth = Math.min(chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), barWidth);
+  }
+  return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
+    id: id,
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "8"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    ref: svgRef,
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default.createElement("g", {
+    transform: `translate(${margins.left},${margins.top})`
+  }, bars.map((bar, index) => {
+    const to = {
+      data: _objectSpread2({}, bar)
+    };
+    const from = cache.current ? {
+      data: cache.current[index]
+    } : undefined;
+    return /*#__PURE__*/React__default.createElement(Bar, _extends({}, barProps, {
+      color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(to.data.category),
+      data: to,
+      gap: gap,
+      height: undefined,
+      id: `id${id}__bar-${index}`,
+      index: index,
+      isSelected: Boolean(isBarSelected(to)),
+      key: `bar _${index}`,
+      labelDecorator: labelDecorator,
+      maxHeight: chartHeight,
+      onClick: onBarClick,
+      orientation: BarOrientation.vertical,
+      previousData: from,
+      role: barRole,
+      scale: scaleY,
+      scalePosition: scaleX,
+      tooltipVariant: tooltipVariant,
+      width: barWidth
+    }));
+  }), ['bottom', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "bottom",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: chartHeight,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    variant: xAxisVariant
+  }) : null, ['top', 'both'].includes(xAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "top",
+    length: chartWidth,
+    scale: scaleX,
+    x: 0,
+    y: 0,
+    tickValues: xAxisTickValues !== null && xAxisTickValues !== void 0 ? xAxisTickValues : 8,
+    tickPadding: xAxisTickPadding,
+    tickRotation: xAxisTickRotation,
+    tickSize: xAxisTickSize,
+    tickFormat: xAxisTickFormat,
+    variant: xAxisVariant
+  }) : null, ['left', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "left",
+    length: chartHeight,
+    scale: scaleY,
+    x: 0,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    variant: yAxisVariant
+  }) : null, ['right', 'both'].includes(yAxisPlacement) ? /*#__PURE__*/React__default.createElement(Axis, {
+    position: "right",
+    length: chartHeight,
+    scale: scaleY,
+    x: chartWidth,
+    y: chartHeight,
+    tickValues: yAxisTickValues !== null && yAxisTickValues !== void 0 ? yAxisTickValues : 8,
+    tickPadding: yAxisTickPadding,
+    tickRotation: yAxisTickRotation,
+    tickSize: yAxisTickSize,
+    tickFormat: yAxisTickFormat,
+    variant: yAxisVariant
+  }) : null))));
+});
+
 const _excluded$g = ["caping", "chartRef", "className", "data", "emptyComponent", "id", "isBarSelected", "labelDecorator", "localeText", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipDecorator", "colorTheme", "tooltipVariant"];
 const COMPONENT_NAME$7 = 'BarChart';
 const CLASSNAME$7 = 'redsift-barchart';
@@ -1613,26 +1869,48 @@ const BarChart = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref
     }));
   }
-  return /*#__PURE__*/React__default.createElement(RenderedBarChart, _extends({
-    barRole: barRole,
-    caping: caping,
-    chartRef: chartRef,
-    className: classNames(BarChart.className, className),
-    data: propsData,
-    id: id,
-    isBarSelected: isBarSelected,
-    labelDecorator: labelDecorator,
-    onBarClick: onBarClick,
-    orientation: orientation,
-    others: others,
-    size: size,
-    theme: theme,
-    tooltipDecorator: tooltipDecorator,
-    colorTheme: colorTheme,
-    tooltipVariant: tooltipVariant
-  }, forwardedProps, {
-    ref: ref
-  }));
+  const dataType = 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(BarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      onBarClick: onBarClick,
+      orientation: orientation,
+      others: others,
+      size: size,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant
+    }, forwardedProps, {
+      ref: ref
+    }));
+  } else if (dataType === 'LinearData') {
+    return /*#__PURE__*/React__default.createElement(RenderedLinearBarChart, _extends({
+      barRole: barRole,
+      chartRef: chartRef,
+      className: classNames(BarChart.className, className),
+      data: propsData,
+      id: id,
+      isBarSelected: isBarSelected,
+      labelDecorator: labelDecorator,
+      onBarClick: onBarClick,
+      size: size,
+      theme: theme,
+      tooltipDecorator: tooltipDecorator,
+      colorTheme: colorTheme,
+      tooltipVariant: tooltipVariant
+    }, forwardedProps, {
+      ref: ref
+    }));
+  }
+  return null;
 });
 BarChart.className = CLASSNAME$7;
 BarChart.defaultProps = DEFAULT_PROPS$7;
@@ -2188,10 +2466,6 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
 });
 
 const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onDotClick", "size", "sortingMethod", "colorTheme", "tooltipDecorator", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "dateParser"];
-const isValidDate = value => {
-  const date = new Date(value);
-  return date instanceof Date && !isNaN(date) && !isNaN(Date.parse(value));
-};
 const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       className,
@@ -3585,5 +3859,5 @@ ScatterPlot.className = CLASSNAME;
 ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map