@redsift/charts 9.4.0 → 9.4.1-muiv5

package/index.d.ts

@@ -1,8 +1,8 @@
 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 * as _redsift_design_system from '@redsift/design-system';
 import { ValueOf, Comp, ContainerProps } from '@redsift/design-system';
-import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
 import { PieArcDatum } from 'd3-shape';
+import { MutableRefObject, ComponentProps, ReactElement, RefObject, ReactNode } from 'react';
 import * as d3_scale from 'd3-scale';
 import { ScaleLinear as ScaleLinear$2, ScaleLogarithmic, ScaleSymLog, ScalePoint as ScalePoint$1, ScaleBand as ScaleBand$1, ScaleTime as ScaleTime$1 } from 'd3-scale';
 import * as styled_components from 'styled-components';
@@ -191,17 +191,22 @@ interface UseColorProps {
 }
 declare const useColor: ({ data, theme, category }: UseColorProps) => ScaleOrdinal<string, string, never>;
 
+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;
+
 interface UseFormatCategoricalDataProps {
     /** Dataset to use to generate the chart, should be a list of objects containing a key and a value. */
     data: CategoryData;
     /** Theme. */
     theme: ChartTheme;
+    /** Define how to sort categories. */
+    sortingMethod: SortingMethod;
     /** Number of categories to use, the rest being put into a new category called "Others". */
     caping?: number;
     /** Whether a category should be displayed for categories that has been removed by the caping option. Optionaly, this prop can be used to change the label of this category. */
     others?: boolean | string;
 }
-declare const useFormatCategoricalData: ({ data, caping, others, theme, }: UseFormatCategoricalDataProps) => {
+declare const useFormatCategoricalData: ({ data, caping, sortingMethod, others, theme, }: UseFormatCategoricalDataProps) => {
     data: CategoryData;
     colorScale: d3_scale.ScaleOrdinal<string, string, never>;
 };
@@ -492,6 +497,8 @@ interface BarChartProps extends ChartContainerProps {
     others?: boolean | string;
     /** BarChart size. */
     size?: ChartSize | BarChartDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
     /** Bar role. Used to indicate that bars are to be considered buttons or links. If an onClick is provided, the bars will have the role `button` unless specifically set to `link` with this prop. */
     barRole?: BarProps['role'];
     /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status.  */
@@ -654,6 +661,8 @@ interface LineChartProps extends ChartContainerProps {
     onDotClick?: (datum: DotDatum) => void;
     /** LineChart size. */
     size?: ChartSize | LineChartDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
     /** Reference to the SVG tag. */
     svgRef?: MutableRefObject<SVGSVGElement>;
     /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
@@ -753,6 +762,8 @@ interface PieChartProps extends ChartContainerProps {
     sliceProps?: Omit<ComponentProps<'g'>, 'onClick' | 'ref' | 'width'>;
     /** Slice role. Used to indicate that slices are to be considered buttons or links. If an onClick is provided, the slices will have the role `button` unless specifically set to `link` with this prop. */
     sliceRole?: ArcProps['role'];
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
     /** Secondary text to be displayed in the middle of the chart, between the main text and subtext. Recommended to be used with donut variants only. */
     middleText?: string | ReactElement | ((data: PieArcDatum<CategoryDatum>[], total: number) => string | ReactElement);
     /** Secondary text to be displayed in the middle of the chart, above the main text. Recommended to be used with `donut` variants only. */
@@ -845,6 +856,8 @@ interface ScatterPlotProps extends ChartContainerProps {
     onDotClick?: (datum: DotDatum) => void;
     /** ScatterPlot size. */
     size?: ChartSize | ScatterPlotDimensions;
+    /** Define how to sort categories. */
+    sortingMethod?: SortingMethod;
     /** Reference to the SVG tag. */
     svgRef?: MutableRefObject<SVGSVGElement>;
     /** Color palette to use. You can choose among the list of available color palette or also choose to use the success/warning/danger theme for which you have to specify which key corresponds to which status. */
@@ -875,4 +888,4 @@ declare const StyledScatterPlotEmptyText: styled_components.StyledComponent<"div
     $textSize: number;
 }, never>;
 
-export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, 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, Line, LineChart, LineChartDimensions, LineChartLabelVariant, LineChartProps, LinePointDatum, LineProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, ScatterPlotProps, ScatterPlotVariant, 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, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { AnyScale, Arc, ArcDatum, ArcProps, Arcs, ArcsProps, Axis, AxisPosition, AxisProps, AxisVariant, Bar, BarChart, BarChartDimensions, BarChartProps, BarDatum, BarOrientation, BarProps, CategoryData, CategoryDatum, CategoryDim, 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, Line, LineChart, LineChartDimensions, LineChartLabelVariant, LineChartProps, LinePointDatum, LineProps, NumericValue, PieChart, PieChartDimensions, PieChartLabelVariant, PieChartProps, PieChartVariant, Scale, ScaleBand, ScaleLinear, ScaleLog, ScalePoint, ScaleSymlog, ScaleTime, ScaleTypeToScale, ScaleValue, ScaleWithBandwidth, ScatterPlot, ScatterPlotDimensions, ScatterPlotLabelVariant, 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, empty, getColorScale, getSortingMethod, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };

package/index.js

@@ -187,10 +187,36 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
+const getSortingMethod = sortingMethod => {
+  if (sortingMethod === 'asc-key') {
+    return (a, b) => a.key === b.key ? a.value > b.value ? -1 : 1 : a.key < b.key ? -1 : 1;
+  } else if (sortingMethod === 'desc-key') {
+    return (a, b) => a.key === b.key ? a.value > b.value ? 1 : -1 : a.key < b.key ? 1 : -1;
+  } else if (sortingMethod === 'asc-value') {
+    return (a, b) => a.value === b.value ? a.key > b.key ? -1 : 1 : a.value < b.value ? -1 : 1;
+  } else if (sortingMethod === 'desc-value') {
+    return (a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1;
+  } else if (typeof sortingMethod === 'function') {
+    return sortingMethod;
+  } else if (Array.isArray(sortingMethod)) {
+    return (a, b) => {
+      if (sortingMethod.indexOf(a.key) === -1) {
+        return 1;
+      }
+      if (sortingMethod.indexOf(b.key) === -1) {
+        return -1;
+      }
+      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;
+};
+
 const useFormatCategoricalData = _ref => {
   let {
     data,
     caping,
+    sortingMethod,
     others,
     theme
   } = _ref;
@@ -199,7 +225,7 @@ const useFormatCategoricalData = _ref => {
     if (data === undefined || data === null) {
       return undefined;
     }
-    computedData = [...data].sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
+    computedData = [...data].sort(getSortingMethod(sortingMethod));
     if (caping) {
       if (typeof others === 'boolean' && !others) {
         computedData = computedData.slice(0, caping);
@@ -1277,7 +1303,7 @@ const LoadingBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   }), "Loading...");
 });
 
-const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "barRole", "theme", "tooltipVariant"];
+const _excluded$h = ["areXLabelsRotated", "barProps", "caping", "className", "data", "id", "isBarSelected", "labelDecorator", "onBarClick", "orientation", "others", "size", "sortingMethod", "barRole", "theme", "tooltipVariant"];
 const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       areXLabelsRotated,
@@ -1292,6 +1318,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
       orientation,
       others,
       size,
+      sortingMethod,
       barRole,
       theme,
       tooltipVariant
@@ -1304,6 +1331,7 @@ const RenderedBarChart = /*#__PURE__*/forwardRef((props, ref) => {
   } = useFormatCategoricalData({
     data: propsData,
     theme: theme,
+    sortingMethod: sortingMethod,
     caping,
     others
   });
@@ -1408,6 +1436,7 @@ const DEFAULT_PROPS$7 = {
   orientation: BarOrientation.horizontal,
   others: true,
   size: ChartSize.medium,
+  sortingMethod: 'desc-value',
   theme: ColorTheme.default,
   tooltipVariant: TooltipVariant.value,
   localeText: {
@@ -1914,7 +1943,7 @@ const sizeToDimension$2 = size => {
       };
   }
 };
-const statsBy = arr => {
+const statsBy = (arr, sortingMethod) => {
   const counts = arr.reduce((prev, curr) => {
     if (!curr.value) {
       return prev;
@@ -1947,7 +1976,7 @@ const statsBy = arr => {
     trending: {
       overall: (counts[key].values[counts[key].values.length - 1] - counts[key].values[0]) * 100 / counts[key].values[0]
     }
-  })).sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
+  })).sort(getSortingMethod(sortingMethod));
 };
 
 const _excluded$a = ["className", "data", "emptyComponent", "localeText", "size"];
@@ -1996,7 +2025,7 @@ const EmptyLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })))));
 });
 
-const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onDotClick", "size", "theme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "dateParser"];
+const _excluded$9 = ["className", "data", "dotRole", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onDotClick", "size", "sortingMethod", "theme", "tooltipVariant", "xAxisVariant", "xAxisPlacement", "xAxisTickFormat", "xAxisTickValues", "yAxisVariant", "yAxisPlacement", "dateParser"];
 const isValidDate = value => {
   const date = new Date(value);
   return date instanceof Date && !isNaN(date) && !isNaN(Date.parse(value));
@@ -2013,6 +2042,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
       legendProps,
       onDotClick,
       size,
+      sortingMethod,
       theme,
       tooltipVariant,
       xAxisVariant,
@@ -2062,7 +2092,7 @@ const RenderedLineChart = /*#__PURE__*/forwardRef((props, ref) => {
   })();
   const xAxisTickFormat = propsXAxisTickFormat !== null && propsXAxisTickFormat !== void 0 ? propsXAxisTickFormat : xScaleType === 'Date' || xScaleType === 'dateString' ? scaleX.tickFormat() : undefined;
   const hasCategory = data[0] && data[0].key.length >= 2 && data[0].key[1] !== null && data[0].key[1] !== undefined;
-  const statsByCategory = statsBy(data);
+  const statsByCategory = statsBy(data, sortingMethod);
   const colorScale = useColor({
     data: statsByCategory,
     theme: theme,
@@ -2203,6 +2233,7 @@ const DEFAULT_PROPS$2 = {
     emptyChartText: 'No Data'
   },
   size: ChartSize.medium,
+  sortingMethod: 'desc-value',
   theme: ColorTheme.dark,
   tooltipVariant: TooltipVariant.none,
   xAxisVariant: AxisVariant.default,
@@ -2540,7 +2571,7 @@ const EmptyPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   }))));
 });
 
-const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "subtext", "text", "theme", "tooltipVariant", "variant"];
+const _excluded$5 = ["caping", "className", "data", "id", "isHalf", "isSliceSelected", "labelDecorator", "labelVariant", "legendProps", "middleText", "onSliceClick", "others", "size", "sliceProps", "sliceRole", "sortingMethod", "subtext", "text", "theme", "tooltipVariant", "variant"];
 const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       caping,
@@ -2558,6 +2589,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
       size,
       sliceProps,
       sliceRole,
+      sortingMethod,
       subtext: propsSubtext,
       text: propsText,
       theme,
@@ -2574,6 +2606,7 @@ const RenderedPieChart = /*#__PURE__*/forwardRef((props, ref) => {
   } = useFormatCategoricalData({
     data: propsData,
     theme: theme,
+    sortingMethod: sortingMethod,
     caping,
     others
   });
@@ -2690,6 +2723,7 @@ const DEFAULT_PROPS$1 = {
   labelVariant: PieChartLabelVariant.none,
   others: true,
   size: ChartSize.medium,
+  sortingMethod: 'desc-value',
   theme: ColorTheme.default,
   variant: PieChartVariant.plain,
   tooltipVariant: TooltipVariant.value,
@@ -2902,12 +2936,12 @@ const group = (data, x, y) => {
   });
   return Object.values(groupDict);
 };
-const countBy = arr => {
+const countBy = (arr, sortingMethod) => {
   const counts = arr.reduce((prev, curr) => (prev[curr.key[2]] = ++prev[curr.key[2]] || 1, prev), {});
   return Object.keys(counts).map(key => ({
     key: key,
     value: counts[key]
-  })).sort((a, b) => a.value === b.value ? a.key > b.key ? 1 : -1 : a.value < b.value ? 1 : -1);
+  })).sort(getSortingMethod(sortingMethod));
 };
 
 const _excluded$2 = ["className", "data", "emptyComponent", "localeText", "size"];
@@ -2961,7 +2995,7 @@ var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
 var mdiChevronRight = "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z";
 var mdiMouse = "M11,1.07C7.05,1.56 4,4.92 4,9H11M4,15A8,8 0 0,0 12,23A8,8 0 0,0 20,15V11H4M13,1.07V9H20C20,4.92 16.94,1.56 13,1.07Z";
 
-const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
+const _excluded$1 = ["isBrushable", "className", "data", "dotRole", "hideControlKeyPanel", "id", "isDotSelected", "labelDecorator", "labelVariant", "legendProps", "onBrush", "onBrushEnd", "onDotClick", "size", "sortingMethod", "theme", "tooltipVariant", "variant", "xAxisVariant", "xAxisPlacement", "yAxisVariant", "yAxisPlacement"];
 const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
   const {
       isBrushable,
@@ -2978,6 +3012,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
       onBrushEnd,
       onDotClick,
       size,
+      sortingMethod,
       theme,
       tooltipVariant,
       variant,
@@ -3019,7 +3054,7 @@ const RenderedScatterPlot = /*#__PURE__*/forwardRef((props, ref) => {
     return scaleLinear().domain(domain).range([chartHeight, 0]).nice();
   })();
   const hasCategory = data[0] && data[0].key.length >= 3 && data[0].key[2] !== null && data[0].key[2] !== undefined;
-  const countsByCategory = hasCategory ? countBy(data) : undefined;
+  const countsByCategory = hasCategory ? countBy(data, sortingMethod) : undefined;
   const colorScale = useColor({
     data: countsByCategory || data,
     theme: theme,
@@ -3205,6 +3240,7 @@ const DEFAULT_PROPS = {
     emptyChartText: 'No Data'
   },
   size: ChartSize.medium,
+  sortingMethod: 'desc-value',
   theme: ColorTheme.default,
   tooltipVariant: TooltipVariant.none,
   variant: ScatterPlotVariant.default,
@@ -3274,5 +3310,5 @@ ScatterPlot.className = CLASSNAME;
 ScatterPlot.defaultProps = DEFAULT_PROPS;
 ScatterPlot.displayName = COMPONENT_NAME;
 
-export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, Line, LineChart, LineChartLabelVariant, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, ScatterPlotVariant, StyledArc, StyledArcs, StyledAxis, StyledBar, StyledBarChart, StyledBarChartEmptyText, StyledChartContainer, StyledChartContainerCaption, StyledChartContainerTitle, StyledDataPoint, StyledDot, StyledLegend, StyledLine, StyledLineChart, StyledLineChartEmptyText, StyledPieChart, StyledPieChartCenterText, StyledPieChartEmptyText, StyledScatterPlot, StyledScatterPlotEmptyText, TooltipVariant, empty, getColorScale, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
+export { Arc, Arcs, Axis, AxisPosition, AxisVariant, Bar, BarChart, BarOrientation, ChartContainer, ChartSize, ColorTheme, DataPoint, Dot, DotVariant, LabelVariant, Legend, Line, LineChart, LineChartLabelVariant, PieChart, PieChartLabelVariant, PieChartVariant, ScatterPlot, ScatterPlotLabelVariant, 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, monochrome, scheme, successDangerScheme, useBrush, useColor, useFormatCategoricalData, useZoom };
 //# sourceMappingURL=index.js.map