@redsift/charts 11.4.0-muiv5-alpha.1 → 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;

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};
     `;
 }}
   }
@@ -2845,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 {
@@ -2916,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,