feat(D3 plugin): add bar-x sorting setting

src/plugins/d3/renderer/hooks/useShapes/bar-x.tsx

@@ -1,4 +1,4 @@
-import {max, pointer, select} from 'd3';
+import {ascending, descending, max, pointer, select, sort} from 'd3';
 import type {ScaleBand, ScaleLinear, ScaleTime} from 'd3';
 import React from 'react';
 import get from 'lodash/get';
@@ -61,6 +61,22 @@ function prepareData(args: {
     const barPadding = get(seriesOptions, 'bar-x.barPadding', defaultBarPadding);
     const groupPadding = get(seriesOptions, 'bar-x.groupPadding', defaultGroupPadding);
 
+    const sortingOptions = get(seriesOptions, 'bar-x.dataSorting');
+    const comparator = sortingOptions?.direction === 'desc' ? descending : ascending;
+    const sortKey = (() => {
+        switch (sortingOptions?.key) {
+            case 'y': {
+                return 'data.y';
+            }
+            case 'name': {
+                return 'series.name';
+            }
+            default: {
+                return undefined;
+            }
+        }
+    })();
+
     const data: Record<
         string | number,
         Record<string, {data: BarXSeriesData; series: PreparedBarXSeries}[]>
@@ -123,7 +139,11 @@ function prepareData(args: {
         const currentGroupWidth = rectWidth * stacks.length + rectGap * (stacks.length - 1);
         stacks.forEach((yValues, groupItemIndex) => {
             let stackHeight = 0;
-            yValues.forEach((yValue) => {
+
+            const sortedData = sortKey
+                ? sort(yValues, (a, b) => comparator(get(a, sortKey), get(b, sortKey)))
+                : yValues;
+            sortedData.forEach((yValue) => {
                 let xCenter;
                 if (xAxis.type === 'category') {
                     const xBandScale = xScale as ScaleBand<string>;

src/types/widget-data/series.ts

@@ -44,5 +44,20 @@ export type ChartKitWidgetSeriesOptions = {
          * @default 0.2
          */
         groupPadding?: number;
+
+        dataSorting?: {
+            /** Determines what data value should be used to sort by.
+             * Possible values are undefined to disable, "name" to sort by series name or "y"
+             *
+             * @default undefined
+             * */
+            key?: 'name' | 'y' | undefined;
+
+            /** Sorting direction.
+             *
+             * @default 'asc'
+             * */
+            direction?: 'asc' | 'desc';
+        };
     };
 };