@redsift/charts 11.0.2 → 11.1.0

package/index.d.ts

@@ -521,6 +521,8 @@ interface BarProps extends DataPointProps<BarDatum> {
     scalePosition: ScaleLinear$1<number, number, never> | ScaleTime$2<number, number, never> | ScalePoint$2<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;
@@ -677,7 +679,9 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     /** @deprecated: Use xAxisTickRotation instead. Whether the x axis labels are rotated or not. */
     areXLabelsRotated?: boolean;
     /** Native HTML props to forward to each bar. */
-    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale'>;
+    barProps?: Omit<ComponentProps<'g'>, 'onClick' | 'orientation' | 'ref' | 'scale'> & {
+        minWidth?: number;
+    };
     /** Bar role. If an onClick is provided, the bars will have the role `button`. For a navigation link, please use `getBarAnchorProps` instead. */
     barRole?: BarProps['role'];
     /** Number of categories to use, the rest being put into a new category called "Others". */
@@ -748,6 +752,8 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
      * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)
      */
     xAxisEndDateOffset?: number;
+    /** If set, the Y axis will use a logarithmic scale using this base. Set this value to 10 to use a default logarithmic scale. */
+    yScaleLogBase?: number;
 }
 type StyledBarChartProps = BarChartProps & {};
 

package/index.js

@@ -1,4 +1,4 @@
-import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleUtc, scalePoint, utcParse, scaleTime, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
+import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleUtc, scalePoint, scaleLog, utcParse, scaleTime, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
 import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker, RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer, RedsiftColorPresentationGreenLight, RedsiftColorPresentationPinkLight, RedsiftColorPresentationAquaLight, RedsiftColorPresentationBrownLight, RedsiftColorPresentationRedLight, RedsiftColorPresentationYellowLight, RedsiftColorPresentationPurpleLight, RedsiftColorPresentationOrangeLight, RedsiftColorPresentationBlueLight, RedsiftColorPresentationGreyLight, RedsiftColorPresentationGreenLighter, RedsiftColorPresentationPinkLighter, RedsiftColorPresentationAquaLighter, RedsiftColorPresentationBrownLighter, RedsiftColorPresentationRedLighter, RedsiftColorPresentationYellowLighter, RedsiftColorPresentationPurpleLighter, RedsiftColorPresentationOrangeLighter, RedsiftColorPresentationBlueLighter, RedsiftColorPresentationGreyLighter, RedsiftColorPresentationGreenLighterer, RedsiftColorPresentationPinkLighterer, RedsiftColorPresentationAquaLighterer, RedsiftColorPresentationBrownLighterer, RedsiftColorPresentationRedLighterer, RedsiftColorPresentationYellowLighterer, RedsiftColorPresentationPurpleLighterer, RedsiftColorPresentationOrangeLighterer, RedsiftColorPresentationBlueLighterer, RedsiftColorPresentationGreyLighterer, Theme, useId, useTheme, Text, Number as Number$1, baseStyling, baseContainer, focusRing, Flexbox, warnIfNoAccessibleLabelFound, useMessageFormatter, ThemeProvider, Heading, Button } from '@redsift/design-system';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext } from 'react';
@@ -449,7 +449,8 @@ const DataPoint = /*#__PURE__*/forwardRef((props, ref) => {
   if (showTooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
       placement: "right",
-      theme: theme
+      theme: theme,
+      delay: 50
     }, /*#__PURE__*/React__default.createElement(Tooltip.Trigger, null, href !== undefined ? /*#__PURE__*/React__default.createElement(as || 'a', _objectSpread2({
       href
     }, anchorProps), DataPointComponent) : DataPointComponent), /*#__PURE__*/React__default.createElement(Tooltip.Content, null, isTooltipCustom ? tooltipDecorator(data, {
@@ -1059,7 +1060,7 @@ const StyledBar = styled(DataPoint)`
 }}}
 `;
 
-const _excluded$m = ["className", "disableAnimations", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "scalePosition", "width"];
+const _excluded$m = ["className", "disableAnimations", "gap", "height", "maxHeight", "orientation", "previousData", "scale", "scalePosition", "width", "minWidth"];
 const COMPONENT_NAME$9 = 'Bar';
 const CLASSNAME$9 = 'redsift-bar';
 const Bar = /*#__PURE__*/forwardRef((props, ref) => {
@@ -1087,7 +1088,8 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       },
       scale,
       scalePosition,
-      width = 40
+      width = 40,
+      minWidth
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$m);
   const theme = useTheme();
@@ -1112,10 +1114,11 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
       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(${scalePosition(data.data.key) + (isOrdinal ? width + gap / 2 : width / 2)}, ${maxHeight}), rotate(180)`,
+    transform: isHorizontal ? `translate(0, ${scalePosition(data.data.key) + gap / 2})` : `translate(${scalePosition(data.data.key) + (isOrdinal ? computedWidth + gap / 2 : computedWidth / 2)}, ${maxHeight}), rotate(180)`,
     $clickable: Boolean(onClick),
     $theme: theme
   }), isHorizontal ? /*#__PURE__*/React__default.createElement(it.rect, {
@@ -1125,7 +1128,7 @@ const Bar = /*#__PURE__*/forwardRef((props, ref) => {
   }) : /*#__PURE__*/React__default.createElement(it.rect, {
     height: config.immediate || disableAnimations ? maxHeight - scale(getValue(data.data)) : animatedProps.t.to(t => Math.max(0, maxHeight - scale(interpolator(t)))),
     fill: isDeselected ? 'var(--redsift-color-neutral-light-grey)' : color,
-    width: width
+    width: computedWidth
   }), isHorizontal ? /*#__PURE__*/React__default.createElement("text", {
     x: "10",
     y: height / 2,
@@ -1991,7 +1994,7 @@ const Legend = /*#__PURE__*/forwardRef((props, ref) => {
 Legend.className = CLASSNAME$6;
 Legend.displayName = COMPONENT_NAME$6;
 
-const _excluded$f = ["barProps", "className", "data", "disableAnimations", "id", "getBarAnchorProps", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "xAxisStartDateOffset", "xAxisEndDateOffset", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "dateParser"],
+const _excluded$f = ["barProps", "className", "data", "disableAnimations", "id", "getBarAnchorProps", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "xAxisStartDateOffset", "xAxisEndDateOffset", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "xScaleType", "yScaleLogBase", "dateParser"],
   _excluded2$3 = ["extraLegendItems"];
 const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
 const filterData = (hasCategory, data, filterFn) => {
@@ -2051,6 +2054,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       yAxisMaxValue,
       yAxisTickRemodelling,
       xScaleType: propsXScaleType,
+      yScaleLogBase,
       dateParser
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
@@ -2151,7 +2155,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       previousValue[currentIndex].cumulativeValue = previousValue[currentIndex].cumulativeValue + previousValue[currentIndex - 1].cumulativeValue;
     }
     return previousValue;
-  }, []);
+  }, []).filter(bar => yScaleLogBase === undefined || bar.cumulativeValue !== 0);
   const scaleY = (() => {
     var _ref7, _ref8;
     const domain = extent(bars, d => d.cumulativeValue);
@@ -2160,7 +2164,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     if (domain[1] === 0 && domain[0] === 0) {
       domain[1] = 1;
     }
-    return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
+    return (yScaleLogBase ? scaleLog().clamp(true).base(yScaleLogBase) : scaleLinear()).domain(domain).range([chartHeight, 0]).nice();
   })();
   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;