@redsift/charts 10.1.0-muiv5-alpha.4 → 10.1.0

package/index.d.ts

@@ -1,4 +1,4 @@
-import { BrushBehavior, ScaleLinear as ScaleLinear$1, ScaleOrdinal, Arc as Arc$1, ScaleTime as ScaleTime$2, ScalePoint as ScalePoint$2, Line as Line$1 } from 'd3';
+import { BrushBehavior, ScaleLinear as ScaleLinear$1, CountableTimeInterval, ScaleOrdinal, Arc as Arc$1, ScaleTime as ScaleTime$2, ScalePoint as ScalePoint$2, Line as Line$1 } from 'd3';
 import * as _redsift_design_system from '@redsift/design-system';
 import { ValueOf, Theme, Comp, ContainerProps } from '@redsift/design-system';
 import { PieArcDatum } from 'd3-shape';
@@ -263,7 +263,7 @@ interface ScaleTypeToScale<Input, Output> {
 type Scale<Input, Output> = ScaleTypeToScale<Input, Output>[keyof ScaleTypeToScale<Input, Output>];
 type AnyScale = Scale<any, any>;
 type ScaleWithBandwidth = ScaleBand<any> | ScalePoint<any>;
-type TicksSpec = number | string | ScaleValue[];
+type TicksSpec = number | string | ScaleValue[] | CountableTimeInterval;
 
 type ChartDimensions = {
     width: number;

package/index.js

@@ -1,5 +1,5 @@
 import { brush, select, scaleOrdinal, zoom, interpolateRound, interpolate, scaleLinear, sum, scaleBand, extent, scaleTime, scalePoint, line, arc, pie, min, descending, scaleSqrt, max } from 'd3';
-import { RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDark, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationGreyDefault, 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, ThemeProvider, Heading, Button } 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, 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';
 import classNames from 'classnames';
@@ -54,7 +54,7 @@ const useBrush = _ref => {
 const monochrome = RedsiftColorPresentationBlueDefault;
 const empty = RedsiftColorPresentationGreyDark;
 const scheme = {
-  default: [RedsiftColorPresentationGreenDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationOrangeDefault, RedsiftColorPresentationBlueDefault, RedsiftColorPresentationGreyDefault],
+  default: [RedsiftColorPresentationBlueDefault, RedsiftColorPresentationAquaDefault, RedsiftColorPresentationPinkDefault, RedsiftColorPresentationGreyDefault, RedsiftColorPresentationYellowDefault, RedsiftColorPresentationPurpleDefault, RedsiftColorPresentationGreenDefault, RedsiftColorPresentationBrownDefault, RedsiftColorPresentationRedDefault, RedsiftColorPresentationOrangeDefault],
   dark: [RedsiftColorPresentationGreenDark, RedsiftColorPresentationPinkDark, RedsiftColorPresentationAquaDark, RedsiftColorPresentationBrownDark, RedsiftColorPresentationRedDark, RedsiftColorPresentationYellowDark, RedsiftColorPresentationPurpleDark, RedsiftColorPresentationOrangeDark, RedsiftColorPresentationBlueDark, RedsiftColorPresentationGreyDark],
   darker: [RedsiftColorPresentationGreenDarker, RedsiftColorPresentationPinkDarker, RedsiftColorPresentationAquaDarker, RedsiftColorPresentationBrownDarker, RedsiftColorPresentationRedDarker, RedsiftColorPresentationYellowDarker, RedsiftColorPresentationPurpleDarker, RedsiftColorPresentationOrangeDarker, RedsiftColorPresentationBlueDarker, RedsiftColorPresentationGreyDarker],
   darkerer: [RedsiftColorPresentationGreenDarkerer, RedsiftColorPresentationPinkDarkerer, RedsiftColorPresentationAquaDarkerer, RedsiftColorPresentationBrownDarkerer, RedsiftColorPresentationRedDarkerer, RedsiftColorPresentationYellowDarkerer, RedsiftColorPresentationPurpleDarkerer, RedsiftColorPresentationOrangeDarkerer, RedsiftColorPresentationBlueDarkerer, RedsiftColorPresentationGreyDarkerer],
@@ -221,7 +221,7 @@ const getSortingMethod = sortingMethod => {
       return sortingMethod.indexOf(a.key) === sortingMethod.indexOf(b.key) ? a.key > b.key ? 1 : -1 : sortingMethod.indexOf(a.key) < sortingMethod.indexOf(b.key) ? -1 : 1;
     };
   }
-  return () => -1;
+  return () => 1;
 };
 const isValidDate = value => {
   const date = new Date(value);
@@ -714,7 +714,7 @@ const getScaleTicks = (scale, spec) => {
       return scale.ticks(spec);
     }
     if (typeof spec === 'function') {
-      return scale.ticks(spec);
+      return scale.ticks();
     }
   }
 
@@ -1833,6 +1833,18 @@ Legend.displayName = COMPONENT_NAME$6;
 
 const _excluded$f = ["barProps", "className", "data", "id", "isBarSelected", "labelDecorator", "legendDecorator", "legendVariant", "legendProps", "margins", "onBarClick", "size", "sortingMethod", "barRole", "colorTheme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickPadding", "xAxisTickRotation", "xAxisTickSize", "xAxisTickValues", "xAxisMinValue", "xAxisMaxValue", "xAxisTickRemodelling", "yAxisVariant", "yAxisPlacement", "yAxisTickFormat", "yAxisTickPadding", "yAxisTickRotation", "yAxisTickSize", "yAxisTickValues", "yAxisMinValue", "yAxisMaxValue", "yAxisTickRemodelling", "dateParser"];
 const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
+const filterData = (hasCategory, data, filterFn) => {
+  if (hasCategory) {
+    return data.filter(filterFn);
+  }
+  return data.filter(filterFn);
+};
+const reduceData = (hasCategory, data, reduceFn, initialValue) => {
+  if (hasCategory) {
+    return data.reduce(reduceFn, initialValue);
+  }
+  return data.reduce(reduceFn, initialValue);
+};
 const isSameKey = (key, previousKey, xScaleType) => xScaleType === 'Date' || xScaleType === 'dateString' ? key.getTime() === previousKey.getTime() : key === previousKey;
 const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -1877,8 +1889,9 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     forwardedProps = _objectWithoutProperties(props, _excluded$f);
   const cache = useRef();
   const theme = useTheme();
+  const hasCategory = propsData[0] && Array.isArray(propsData[0].key) && propsData[0].key.length >= 2 && propsData[0].key[1] !== null && propsData[0].key[1] !== undefined;
   const xScaleType = getKey(propsData[0]) instanceof Date ? 'Date' : typeof getKey(propsData[0]) === 'number' ? 'number' : typeof getKey(propsData[0]) === 'string' && isValidDate(getKey(propsData[0])) ? 'dateString' : undefined;
-  const data = xScaleType === 'number' ? propsData.filter(datum => typeof getKey(datum) === 'number' && !Number.isNaN(getKey(datum))) : xScaleType === 'dateString' ? propsData.filter(datum => isValidDate(getKey(datum))) : xScaleType === 'Date' ? propsData.filter(datum => getKey(datum) instanceof Date) : propsData;
+  const data = xScaleType === 'number' ? filterData(hasCategory, propsData, datum => typeof getKey(datum) === 'number' && !Number.isNaN(getKey(datum))) : xScaleType === 'dateString' ? filterData(hasCategory, propsData, datum => isValidDate(getKey(datum))) : xScaleType === 'Date' ? filterData(hasCategory, propsData, datum => getKey(datum) instanceof Date) : propsData;
   useEffect(() => {
     cache.current = data;
   });
@@ -1896,7 +1909,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }, propsMargins);
   const chartHeight = height - margins.top - margins.bottom;
   const chartWidth = width - margins.left - margins.right;
-  const numberOfRows = data.filter(datum => datum.value).length;
+  const numberOfRows = filterData(hasCategory, data, datum => datum.value).length;
   const gap = 5;
   let barWidth = chartWidth / (numberOfRows * 2) - gap;
   const scaleX = (() => {
@@ -1914,8 +1927,8 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       const domain = xScaleType === 'dateString' ? extent(data, d => Date.parse(getKey(d))) : extent(data, d => getKey(d).valueOf());
       domain[0] = (_ref3 = xAxisMinValue) !== null && _ref3 !== void 0 ? _ref3 : domain[0];
       domain[1] = (_ref4 = xAxisMaxValue) !== null && _ref4 !== void 0 ? _ref4 : domain[1];
-      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]);
+      const startDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), -1) : new Date(domain[0]);
+      const endDate = xAxisTickValues && typeof xAxisTickValues === 'function' && 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 {
       var _ref5, _ref6;
@@ -1926,7 +1939,6 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     }
   })();
   const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
-  const hasCategory = data[0] && Array.isArray(data[0].key) && data[0].key.length >= 2 && data[0].key[1] !== null && data[0].key[1] !== undefined;
   const statsByCategory = statsBy$1(data, sortingMethod);
   const colorScale = useColor({
     data: statsByCategory,
@@ -1934,7 +1946,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     category: d => d.key,
     theme
   });
-  const bars = data.sort((a, b) => {
+  const bars = reduceData(hasCategory, filterData(hasCategory, data.sort((a, b) => {
     const currentKeyA = hasCategory ? a.key[0] : a.key;
     const currentKeyB = hasCategory ? b.key[0] : b.key;
     if (xScaleType === 'number') {
@@ -1955,7 +1967,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
     }
     return hasCategory ? a.key[1] < b.key[1] ? 1 : -1 : 0;
-  }).filter(d => d.value !== null).reduce((previousValue, currentValue, currentIndex) => {
+  }), d => d.value !== null), (previousValue, currentValue, currentIndex) => {
     var _key$;
     const currentKeyD = hasCategory ? currentValue.key[0] : currentValue.key;
     const formattedKeyD = xScaleType === 'dateString' ? dateParser ? dateParser(currentKeyD) : new Date(Date.parse(currentKeyD)) : currentKeyD;
@@ -1982,7 +1994,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   })();
   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(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues ? typeof xAxisTickValues === 'number' ? xAxisTickValues : xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
+    barWidth = Math.min(barWidth, chartWidth / ((scaleX.domain()[1] - scaleX.domain()[0]) / minimalGap), chartWidth / (xAxisTickValues && typeof xAxisTickValues !== 'string' ? typeof xAxisTickValues === 'number' ? xAxisTickValues : Array.isArray(xAxisTickValues) ? xAxisTickValues.length : xAxisTickValues.range(scaleX.domain()[0], scaleX.domain()[1]).length : 1));
   }
   return /*#__PURE__*/React__default.createElement(StyledBarChart, _extends({}, forwardedProps, {
     id: id,