@redsift/charts 11.4.0-muiv5-alpha.0 → 11.4.0-muiv5-alpha.2

package/index.d.ts

@@ -844,13 +844,16 @@ interface BarChartState extends ChartAxesProps, Required<Pick<RenderedLinearBarC
     sectionHeight?: number;
     xScaleType?: XScaleType;
 }
-interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {
+interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role' | 'color'> {
     /** Starting point in percentage of the chart height. */
     from?: number;
     /** Ending point in percentage of the chart height. */
     to?: number;
-    /** Background color */
-    color?: string;
+    /** Color. */
+    color?: 'red' | 'green' | {
+        textColor: string;
+        backgroundColor?: string;
+    };
     /** Section title */
     title?: string;
     /** Title position relative to section */
@@ -861,7 +864,7 @@ interface BarChartSectionProps extends Omit<ComponentProps<'g'>, 'onClick' | 'ro
 }
 interface StyledBarChartSectionProps {
     $theme: Theme;
-    $color: BarChartSectionProps['color'];
+    $textColor: string;
 }
 interface BarChartBarsProps extends Omit<ComponentProps<'g'>, 'onClick' | 'role'> {
     category?: string;
@@ -875,6 +878,7 @@ declare const BarChart: Comp<BarChartProps, HTMLDivElement> & {
     Axis: Comp<AxisProps, SVGGElement>;
     GroupedTooltip: React$1.FC<{
         dateFormatter: (date: Date) => string;
+        categories: string[];
         categoryDecorator: (category: string) => string;
         categoryColor: (category: string) => string;
         datum: BarDatum;

package/index.js

@@ -1,5 +1,5 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleUtc, scalePoint, utcParse, scaleLog, 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, isComponent } from '@redsift/design-system';
+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, isComponent, RedsiftColorGreenD1, RedsiftColorRedD1, RedsiftColorNeutralBlack } from '@redsift/design-system';
 import * as React from 'react';
 import React__default, { useRef, useEffect, useMemo, useState, useLayoutEffect, forwardRef, useCallback, useContext, createContext } from 'react';
 import classNames from 'classnames';
@@ -1480,11 +1480,10 @@ const StyledBarChartSection = styled.g`
   text.colored {
     ${_ref => {
   let {
-    $theme,
-    $color
+    $textColor
   } = _ref;
   return css`
-      fill: ${$color === 'green' ? '#029B57' : $color === 'red' ? '#CB0E0E' : `var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'})`};
+      fill: ${$textColor};
     `;
 }}
   }
@@ -1959,7 +1958,7 @@ const BarChartBars = /*#__PURE__*/forwardRef((props, ref) => {
     tooltipDecorator,
     xScaleType
   } = useBarChartContext();
-  const filteredBarChartBars = bars.filter(bar => bar.category === category);
+  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({
@@ -2020,6 +2019,7 @@ BarChartBars.displayName = COMPONENT_NAME$9;
 const BarChartGroupedTooltip = _ref => {
   let {
     dateFormatter,
+    categories,
     categoryDecorator,
     categoryColor,
     datum,
@@ -2058,7 +2058,7 @@ const BarChartGroupedTooltip = _ref => {
     flexDirection: "column",
     marginTop: "4px",
     gap: "8px"
-  }, ['pass', 'fail', 'quarantined', 'rejected'].map(category => {
+  }, 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);
@@ -2844,6 +2844,28 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
       direction
     } = props,
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
+  const {
+    textColor,
+    backgroundColor
+  } = useMemo(() => {
+    if (color === 'green') {
+      return {
+        textColor: RedsiftColorGreenD1,
+        backgroundColor: '#F7FBF9'
+      };
+    } else if (color === 'red') {
+      return {
+        textColor: RedsiftColorRedD1,
+        backgroundColor: '#FFF7F7'
+      };
+    } else if (color === undefined) {
+      return {
+        textColor: RedsiftColorNeutralBlack,
+        backgroundColor: undefined
+      };
+    }
+    return color;
+  }, [color]);
   const theme = useTheme();
   const context = useBarChartContext();
   const {
@@ -2915,13 +2937,13 @@ const BarChartSection = /*#__PURE__*/forwardRef((props, ref) => {
     transform: `translate(${margins.left},${(margins.top || 0) + sectionY})`,
     ref: ref,
     $theme: theme,
-    $color: color
-  }), color ? /*#__PURE__*/React__default.createElement("rect", {
+    $textColor: textColor
+  }), backgroundColor ? /*#__PURE__*/React__default.createElement("rect", {
     x: 0,
     y: 0,
     width: chartWidth,
     height: sectionHeight,
-    fill: color === 'green' ? '#F7FBF9' : color === 'red' ? '#FFF7F7' : 'transparent'
+    fill: backgroundColor
   }) : null, title && /*#__PURE__*/React__default.createElement("text", {
     className: "title colored",
     x: titleX,