@redsift/charts 10.8.2 → 10.9.0

package/index.d.ts

@@ -319,6 +319,10 @@ declare const useColor: ({ data, colorTheme, category, theme }: UseColorProps) =
 type SortingMethod = 'none' | 'asc-key' | 'desc-key' | 'asc-value' | 'desc-value' | string[] | ((a: CategoryDatum, b: CategoryDatum) => 1 | -1);
 declare const getSortingMethod: (sortingMethod: SortingMethod) => (a: CategoryDatum, b: CategoryDatum) => 1 | -1;
 declare const isValidDate: (value: string) => boolean;
+declare const mergeLegends: (arr1: Statistics, arr2: Statistics) => {
+    key: any;
+    value: any;
+}[];
 
 interface UseFormatCategoricalDataProps {
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
@@ -662,6 +666,8 @@ interface LocaleText$3 {
 }
 type BarChartDimensions = ChartDimensions & {
     fontSize: number;
+    minWidth?: number;
+    maxWidth?: number;
 };
 type XScaleType = 'number' | 'Date' | 'dateString' | undefined;
 /**
@@ -732,6 +738,16 @@ interface BarChartProps extends ChartContainerProps, ChartAxesProps {
     theme?: Theme;
     /** X-scale type override to skip x-scale type inferrence. */
     xScaleType?: XScaleType;
+    /**
+     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
+     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset)
+     */
+    xAxisStartDateOffset?: number;
+    /**
+     * In case of a datetime x-axis, if the xAxisTickValues prop is passed with a d3.js method having an offset function (for instance `timeDay`), the following prop will be used as argument.
+     * For reference, the line of code using it is: xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset)
+     */
+    xAxisEndDateOffset?: number;
 }
 type StyledBarChartProps = BarChartProps & {};
 
@@ -1119,4 +1135,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $theme: Theme;
 }, never>;
 
-export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnchorProps, AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartLegendVariant, BarChartProps, BarDatum, BarOrientation, BarProps, CategoricalOrLinearDim, CategoryData, CategoryDatum, CategoryDim, ChartAxesProps, ChartContainer, ChartContainerProps, ChartDimensions, ChartSize, ChartTheme, ColorTheme, Coordinates, CoordinatesCategoryData, CoordinatesCategoryDatum, CoordinatesCategoryDim, CustomColorTheme, DataPoint, DataPointProps, Datum, Dot, DotDatum, DotProps, DotVariant, EmptyDatum, JSONArray, JSONObject, JSONValue, LabelVariant, Legend, LegendItemDatum, LegendProps, LegendVariant, Line, LineChart, LineChartDimensions, LineChartLegendVariant, LineChartProps, LinePointDatum, LineProps, LinearData, LinearDatum, LinearDim, MarginProps, NumericValue, PieChart, PieChartDimensions, PieChartLegendVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLegendVariant, ScatterPlotProps, ScatterPlotVariant, SortingMethod, Statistic, Statistics, StringValue, StyledArc, StyledArcProps, StyledArcs, StyledArcsProps, StyledAxis, StyledAxisProps, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledBarChartProps, StyledBarProps, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerProps, StyledChartContainerTitle, StyledDataPoint, StyledDataPointProps, StyledDot, StyledDotProps, StyledLegend, StyledLegendProps, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledLineChartProps, StyledLineProps, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledPieChartProps, StyledScatterPlot, StyledScatterPlotEmptyText, StyledScatterPlotProps, SuccessDangerColorTheme, TicksSpec, TooltipVariant, TwoCategoryData, TwoCategoryDatum, TwoCategoryDim, UseBrushProps, UseColorProps, UseFormatCategoricalDataProps, UseZoomProps, XScaleType, empty, getColorScale, getSortingMethod, isValidDate, mergeLegends, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };

package/index.js

@@ -226,6 +226,19 @@ const isValidDate = value => {
   const date = new Date(value);
   return !isNaN(date.getTime()) && date.toISOString().startsWith(value);
 };
+const mergeLegends = (arr1, arr2) => {
+  const map = new Map();
+  [...arr1, ...arr2].forEach(item => {
+    map.set(item.key, item.value);
+  });
+  return Array.from(map, _ref => {
+    let [key, value] = _ref;
+    return {
+      key,
+      value
+    };
+  });
+};
 
 const useFormatCategoricalData = _ref => {
   let {
@@ -1978,7 +1991,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", "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", "dateParser"],
   _excluded2$3 = ["extraLegendItems"];
 const getKey = datum => Array.isArray(datum.key) ? datum.key[0] : datum.key;
 const filterData = (hasCategory, data, filterFn) => {
@@ -1995,6 +2008,7 @@ const reduceData = (hasCategory, data, reduceFn, initialValue) => {
 };
 const isSameKey = (key, previousKey, xScaleType) => xScaleType === 'Date' || xScaleType === 'dateString' ? key.getTime() === previousKey.getTime() : key === previousKey;
 const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
+  var _chartDimensions$maxW, _chartDimensions$minW;
   const {
       barProps,
       className,
@@ -2024,6 +2038,8 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       xAxisMinValue,
       xAxisMaxValue,
       xAxisTickRemodelling,
+      xAxisStartDateOffset = -1,
+      xAxisEndDateOffset = 1,
       yAxisVariant: propsYAxisVariant,
       yAxisPlacement,
       yAxisTickFormat,
@@ -2051,7 +2067,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const xAxisVariant = propsXAxisVariant ? propsXAxisVariant : AxisVariant.tickValue;
   const yAxisVariant = propsYAxisVariant ? propsYAxisVariant : AxisVariant.default;
   const chartDimensions = sizeToDimension$3(size);
-  const width = chartDimensions.width;
+  const width = Math.max(Math.min(chartDimensions.width, (_chartDimensions$maxW = chartDimensions.maxWidth) !== null && _chartDimensions$maxW !== void 0 ? _chartDimensions$maxW : Infinity), (_chartDimensions$minW = chartDimensions.minWidth) !== null && _chartDimensions$minW !== void 0 ? _chartDimensions$minW : -Infinity);
   const height = chartDimensions.height;
   const margins = _objectSpread2({
     top: xAxisVariant === AxisVariant.default || xAxisVariant === AxisVariant.tickValue ? 24 : 8,
@@ -2079,9 +2095,9 @@ 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 === '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]), 1) : new Date(domain[1]);
-      return scaleTime().domain([startDate, endDate]).range([0, chartWidth]).nice();
+      const startDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[0]), xAxisStartDateOffset) : new Date(domain[0]);
+      const endDate = xAxisTickValues && typeof xAxisTickValues === 'function' && typeof xAxisTickValues.offset === 'function' ? xAxisTickValues.offset(new Date(domain[1]), xAxisEndDateOffset) : new Date(domain[1]);
+      return barProps !== null && barProps !== void 0 && barProps.width && typeof barProps.width === 'number' ? scaleTime().domain([startDate, endDate]).range([barProps.width / 2 + 10, chartWidth - (barProps.width / 2 + 5)]) : scaleTime().domain([startDate, endDate]).range([barWidth, chartWidth - barWidth]).nice();
     } else {
       var _ref5, _ref6;
       const domain = xAxisTickValues && Array.isArray(xAxisTickValues) ? xAxisTickValues : data.map(d => getKey(d));
@@ -2342,7 +2358,7 @@ const RenderedLinearBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== BarChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: (extraLegendItems ? [...statsByCategory, ...extraLegendItems] : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === BarChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === BarChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === BarChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
@@ -3169,7 +3185,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
     tickRemodelling: yAxisTickRemodelling,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== LineChartLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: (extraLegendItems ? [...statsByCategory, ...extraLegendItems] : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, statsByCategory).sort(getSortingMethod(sortingMethod)) : statsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === LineChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === LineChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === LineChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
@@ -3741,7 +3757,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
     tooltipVariant: tooltipVariant,
     transform: `translate(${width / 2} ${isHalf ? height : height / 2})`
   }))), legendVariant !== PieChartLegendVariant.none && legendVariant !== PieChartLegendVariant.internal ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: (extraLegendItems ? [...data, ...extraLegendItems] : data).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, data).sort(getSortingMethod(sortingMethod)) : data).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === PieChartLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === PieChartLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === PieChartLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
@@ -4385,7 +4401,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     tickFormat: yAxisTickFormat,
     variant: yAxisVariant
   }) : null))), hasCategory && legendVariant !== ScatterPlotLegendVariant.none ? /*#__PURE__*/React__default.createElement(Legend, _extends({
-    data: (extraLegendItems ? [...countsByCategory, ...extraLegendItems] : countsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
+    data: (extraLegendItems ? mergeLegends(extraLegendItems, countsByCategory).sort(getSortingMethod(sortingMethod)) : countsByCategory).map(d => _objectSpread2(_objectSpread2({}, d), {}, {
       color: colorScale === null || colorScale === void 0 ? void 0 : colorScale(d.key)
     })),
     variant: legendVariant === ScatterPlotLegendVariant.externalLabelValue ? LegendVariant.value : legendVariant === ScatterPlotLegendVariant.externalLabelPercent ? LegendVariant.percent : legendVariant === ScatterPlotLegendVariant.externalLabel ? LegendVariant.label : LegendVariant.custom,
@@ -4484,5 +4500,5 @@ const ScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
 ScatterPlot.className = CLASSNAME;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarChartLegendVariant, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, isValidDate, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarChartLegendVariant, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, LegendVariant, Line, LineChart, LineChartLegendVariant, PieChart, PieChartLegendVariant, PieChartVariant, ScatterPlot, ScatterPlotLegendVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, getSortingMethod, isValidDate, mergeLegends, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map