@redsift/charts 7.6.0 → 7.7.0-alpha.0

package/index.js

@@ -1,6 +1,7 @@
 import { scaleOrdinal, select, axisBottom, scaleLinear, sum, pie, arc } from 'd3';
 import React, { forwardRef, useRef, useEffect, useId } from 'react';
 import styled, { css } from 'styled-components';
+import { Text, Number as Number$1 } from '@redsift/design-system';
 import { Tooltip } from '@redsift/popovers';
 
 const ColorTheme = {
@@ -206,6 +207,301 @@ const HorizontalBarChartTooltipVariant = {
   percent: 'percent'
 };
 
+var classnamesExports = {};
+var classnames = {
+  get exports(){ return classnamesExports; },
+  set exports(v){ classnamesExports = v; },
+};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames() {
+			var classes = [];
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (!arg) continue;
+
+				var argType = typeof arg;
+
+				if (argType === 'string' || argType === 'number') {
+					classes.push(arg);
+				} else if (Array.isArray(arg)) {
+					if (arg.length) {
+						var inner = classNames.apply(null, arg);
+						if (inner) {
+							classes.push(inner);
+						}
+					}
+				} else if (argType === 'object') {
+					if (arg.toString === Object.prototype.toString) {
+						for (var key in arg) {
+							if (hasOwn.call(arg, key) && arg[key]) {
+								classes.push(key);
+							}
+						}
+					} else {
+						classes.push(arg.toString());
+					}
+				}
+			}
+
+			return classes.join(' ');
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}());
+} (classnames));
+
+var classNames = classnamesExports;
+
+const baseLayout = css`
+  ${_ref => {
+  let {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    justifySelf,
+    order,
+    gridArea,
+    gridColumn,
+    gridRow,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRowStart,
+    gridRowEnd
+  } = _ref;
+  return css`
+      ${flex ? `flex: ${flex};` : ''}
+      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}
+      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}
+      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}
+      ${alignSelf ? `align-self: ${alignSelf};` : ''}
+      ${justifySelf ? `justify-self: ${justifySelf};` : ''}
+      ${order !== undefined ? `order: ${order};` : ''}
+      ${gridArea ? `grid-area: ${gridArea};` : ''}
+      ${gridColumn ? `grid-column: ${gridColumn};` : ''}
+      ${gridRow ? `grid-row: ${gridRow};` : ''}
+      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}
+      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}
+      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}
+      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}
+    `;
+}}
+`;
+const baseSpacing = css`
+  ${_ref2 => {
+  let {
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop
+  } = _ref2;
+  return css`
+      ${margin ? `margin: ${margin};` : ''}
+      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
+      ${marginLeft ? `margin-left: ${marginLeft};` : ''}
+      ${marginRight ? `margin-right: ${marginRight};` : ''}
+      ${marginTop ? `margin-top: ${marginTop};` : ''}
+    `;
+}}
+`;
+const baseInternalSpacing = css`
+  ${_ref3 => {
+  let {
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref3;
+  return css`
+      ${padding ? `padding: ${padding};` : ''}
+      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
+      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
+      ${paddingRight ? `padding-right: ${paddingRight};` : ''}
+      ${paddingTop ? `padding-top: ${paddingTop};` : ''}
+    `;
+}}
+`;
+const baseSizing = css`
+  ${_ref4 => {
+  let {
+    height,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    width
+  } = _ref4;
+  return css`
+      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${maxHeight ? `max-height: ${maxHeight};` : ''}
+      ${maxWidth ? `max-width: ${maxWidth};` : ''}
+      ${minHeight ? `min-height: ${minHeight};` : ''}
+      ${minWidth ? `min-width: ${minWidth};` : ''}
+      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+    `;
+}}
+`;
+const basePositioning = css`
+  ${_ref5 => {
+  let {
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex
+  } = _ref5;
+  return css`
+      ${position ? `position: ${position};` : ''}
+      ${top ? `top: ${top};` : ''}
+      ${bottom ? `bottom: ${bottom};` : ''}
+      ${left ? `left: ${left};` : ''}
+      ${right ? `right: ${right};` : ''}
+      ${zIndex ? `z-index: ${zIndex};` : ''}
+    `;
+}}
+`;
+const baseFlexbox = css`
+  ${_ref6 => {
+  let {
+    alignContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    gap,
+    justifyContent
+  } = _ref6;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
+      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
+      gap: ${gap};
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+    `;
+}}
+`;
+const baseGrid = css`
+  ${_ref7 => {
+  let {
+    alignContent,
+    alignItems,
+    gap,
+    gridAutoColumns,
+    gridAutoRows,
+    gridTemplateAreas,
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyContent,
+    justifyItems
+  } = _ref7;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${gap ? `gap: ${gap};` : ''}
+      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
+      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
+      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
+      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
+      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+      ${justifyItems ? `justify-items: ${justifyItems};` : ''}
+    `;
+}}
+`;
+const baseStyling = css`
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  color: var(--redsift-color-neutral-black);
+
+  ${baseLayout}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+`;
+css`
+  ${_ref8 => {
+  let {
+    display
+  } = _ref8;
+  return display ? `display: ${display};` : '';
+}}
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  color: var(--redsift-color-neutral-black);
+
+  ${baseInternalSpacing}
+  ${baseFlexbox}
+  ${baseGrid}
+`;
+
+/**
+ * Component style.
+ */
+const StyledFlexbox = styled.div`
+  display: ${_ref => {
+  let {
+    inline
+  } = _ref;
+  return inline ? 'inline-flex' : 'flex';
+}};
+
+  ${baseStyling}
+  ${baseInternalSpacing}
+  ${baseFlexbox}
+`;
+
+const _excluded$5 = ["children", "className"];
+const COMPONENT_NAME$5 = 'Flexbox';
+const CLASSNAME$5 = 'redsift-flex-box';
+const DEFAULT_PROPS$5 = {
+  gap: '16px'
+};
+
+/**
+ * The Flexbox component.
+ */
+const Flexbox = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded$5);
+  return /*#__PURE__*/React.createElement(StyledFlexbox, _extends({}, forwardedProps, {
+    className: classNames(Flexbox.className, className),
+    ref: ref
+  }), children);
+});
+Flexbox.className = CLASSNAME$5;
+Flexbox.defaultProps = DEFAULT_PROPS$5;
+Flexbox.displayName = COMPONENT_NAME$5;
+
 /**
  * Component style.
  */
@@ -236,7 +532,7 @@ const StyledHorizontalBarChart = styled.div`
     }
   }
 `;
-const StyledHorizontalBarChartTitle = styled.div`
+const StyledHorizontalBarChartTitle = styled(Flexbox)`
   font-family: var(--redsift-typography-h4-font-family);
   font-size: var(--redsift-typography-h4-font-size);
   font-weight: var(--redsift-typography-h4-font-weight);
@@ -382,10 +678,24 @@ const HorizontalBarChartBar = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-hidden": true
   }, data.name), !showTooltip && !isEmpty && /*#__PURE__*/React.createElement("title", null, `${data.name}: ${data.value}`));
   if (showTooltip) {
-    const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
     return /*#__PURE__*/React.createElement(Tooltip, {
       placement: "right"
-    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Bar), /*#__PURE__*/React.createElement(Tooltip.Content, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Bar), /*#__PURE__*/React.createElement(Tooltip.Content, null, tooltipLabelOnly ? /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name) : tooltipPercent !== null ? /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name, " -", ' ', /*#__PURE__*/React.createElement(Number$1, {
+      value: tooltipPercent,
+      type: "percent",
+      variant: "caption",
+      maximumFractionDigits: 2
+    })) : /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name, " -", ' ', /*#__PURE__*/React.createElement(Number$1, {
+      value: data.value,
+      variant: "caption",
+      maximumFractionDigits: 2
+    }))));
   }
   return Bar;
 });
@@ -549,6 +859,7 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     className: className
   }), title ? /*#__PURE__*/React.createElement(StyledHorizontalBarChartTitle, {
     className: `${HorizontalBarChart.className}__title`,
+    alignItems: "center",
     id: `id${id}__title`
   }, title) : null, /*#__PURE__*/React.createElement("div", {
     className: `${HorizontalBarChart.className}__container`
@@ -574,7 +885,7 @@ const HorizontalBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       name
     } = _ref2;
-    const percent = (value / total * 100).toFixed(2);
+    const percent = value / total;
     return /*#__PURE__*/React.createElement(HorizontalBarChartBar, {
       chartId: id,
       color: d3colors(name),
@@ -668,7 +979,7 @@ const StyledPieChart = styled.div`
     display: block;
   }
 `;
-const StyledPieChartTitle = styled.div`
+const StyledPieChartTitle = styled(Flexbox)`
   font-family: var(--redsift-typography-h4-font-family);
   font-size: var(--redsift-typography-h4-font-size);
   font-weight: var(--redsift-typography-h4-font-weight);
@@ -823,8 +1134,6 @@ const StyledPieChartLabel = styled.li`
   gap: 8px;
   width: 100%;
   max-width: 262px;
-  font-family: var(--redsift-typography-font-family-raleway);
-  font-weight: var(--redsift-typography-font-weight-regular);
   font-size: var(--redsift-typography-caption-font-size);
 
   > div {
@@ -838,12 +1147,6 @@ const StyledPieChartLabel = styled.li`
   return $color;
 }};
   }
-
-  > b {
-    font-family: var(--redsift-typography-font-family-source-code-pro);
-    font-weight: var(--redsift-typography-font-weight-bold);
-    font-size: var(--redsift-typography-caption-font-size);
-  }
 `;
 const StyledPieChartArc = styled.g`
   ${_ref15 => {
@@ -930,10 +1233,24 @@ const PieChartArc = /*#__PURE__*/forwardRef((props, ref) => {
     id: `id${chartId}__slice-${index}-title`
   }, `${data.name}: ${data.value}`) : null);
   if (showTooltip) {
-    const tooltipValue = tooltipPercent !== null ? `${tooltipPercent}%` : data.value;
     return /*#__PURE__*/React.createElement(Tooltip, {
       placement: "right"
-    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Arc), /*#__PURE__*/React.createElement(Tooltip.Content, null, `${data.name}${tooltipLabelOnly ? '' : ` - ${tooltipValue}`}`));
+    }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, Arc), /*#__PURE__*/React.createElement(Tooltip.Content, null, tooltipLabelOnly ? /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name) : tooltipPercent !== null ? /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name, " -", ' ', /*#__PURE__*/React.createElement(Number$1, {
+      maximumFractionDigits: 2,
+      type: "percent",
+      value: tooltipPercent,
+      variant: "caption"
+    })) : /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, data.name, " -", ' ', /*#__PURE__*/React.createElement(Number$1, {
+      maximumFractionDigits: 2,
+      value: data.value,
+      variant: "caption"
+    }))));
   }
   return Arc;
 });
@@ -1084,6 +1401,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     className: className
   }), title ? /*#__PURE__*/React.createElement(StyledPieChartTitle, {
     className: `${PieChart.className}__title`,
+    alignItems: "center",
     id: `id${id}__title`
   }, title) : null, /*#__PURE__*/React.createElement("div", {
     className: `${PieChart.className}__container`
@@ -1107,7 +1425,7 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, /*#__PURE__*/React.createElement("g", {
     className: "pie-slice-group"
   }, pieData.map((datum, index) => {
-    const percent = (datum.data.value / total * 100).toFixed(2);
+    const percent = datum.data.value / total;
     return /*#__PURE__*/React.createElement(PieChartArc, {
       chartId: id,
       color: d3colors(datum.data.name),
@@ -1141,7 +1459,24 @@ const PieChart = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/React.createElement(StyledPieChartLabel, {
       key: `pie-external-label _${index}`,
       $color: d3colors(name)
-    }, /*#__PURE__*/React.createElement("div", null), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__PURE__*/React.createElement("b", null, value) : labelVariant === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement("b", null, `${(value * 100 / total).toFixed(2)}%`) : null, /*#__PURE__*/React.createElement("span", null, name));
+    }, /*#__PURE__*/React.createElement("div", null), labelVariant === PieChartLabelVariant.externalLabelValue ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number$1, {
+      as: "b",
+      maximumFractionDigits: 2,
+      value: value,
+      variant: "inherit"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, name)) : labelVariant === PieChartLabelVariant.externalLabelPercent ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Number$1, {
+      as: "b",
+      maximumFractionDigits: 2,
+      type: "percent",
+      value: value / total,
+      variant: "inherit"
+    }), /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, name)) : /*#__PURE__*/React.createElement(Text, {
+      variant: "caption"
+    }, name));
   })) : null), caption ? /*#__PURE__*/React.createElement(StyledPieChartCaption, {
     className: `${PieChart.className}__caption`
   }, caption) : null);