Merge pull request #1609 from merico-dev/1608-able-to-set-series-orde…

…r-to-cartesian-charts-groupby-enabled-series

1608 able to set series order to cartesian charts groupby enabled series

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/plugins/viz-components/cartesian/editors/series/index.tsx

@@ -7,6 +7,7 @@ import { DEFAULT_SCATTER_SIZE } from '../../../../common-echarts-fields/symbol-s
 import { ICartesianChartConf, ICartesianChartSeriesItem } from '../../type';
 import { SeriesItemField } from './series-item';
 import { getDefaultLineAreaStyle } from '~/components/plugins/common-echarts-fields/line-area-style';
+import { getDefaultSeriesOrder } from '~/components/plugins/common-echarts-fields/series-order';
 
 interface ISeriesField {
   control: Control<ICartesianChartConf, $TSFixMe>;
@@ -39,6 +40,7 @@ export function SeriesField({ control, watch }: ISeriesField) {
       },
       hide_in_legend: false,
       group_by_key: '',
+      order_in_group: getDefaultSeriesOrder(),
       areaStyle: getDefaultLineAreaStyle(),
     };
     return item;

dashboard/src/components/plugins/viz-components/cartesian/editors/series/series-item.tsx

@@ -10,6 +10,7 @@ import { ICartesianChartConf, ICartesianChartSeriesItem } from '../../type';
 import { BarFields } from './fields.bar';
 import { LineFields } from './fields.line';
 import { ScatterFields } from './fields.scatter';
+import { SeriesOrderSelector } from '~/components/plugins/common-echarts-fields/series-order';
 
 interface ISeriesItemField {
   control: Control<ICartesianChartConf, $TSFixMe>;
@@ -24,6 +25,7 @@ interface ISeriesItemField {
 export function SeriesItemField({ control, index, seriesItem, yAxisOptions }: ISeriesItemField) {
   const { t } = useTranslation();
   const type = seriesItem.type;
+  const group_by_key = seriesItem.group_by_key;
   return (
     <Stack my={0} p={0} sx={{ position: 'relative' }}>
       <Stack>
@@ -101,6 +103,15 @@ export function SeriesItemField({ control, index, seriesItem, yAxisOptions }: IS
           )}
         />
       </Group>
+      {!!group_by_key && (
+        <Controller
+          name={`series.${index}.order_in_group`}
+          control={control}
+          render={({ field }) => (
+            <SeriesOrderSelector label={t('chart.series_order.label')} hiddenKeys={['value']} {...field} />
+          )}
+        />
+      )}
       {type === 'line' && <LineFields index={index} control={control} seriesItem={seriesItem} />}
       {type === 'bar' && <BarFields index={index} control={control} seriesItem={seriesItem} />}
       {type === 'scatter' && <ScatterFields index={index} control={control} />}

dashboard/src/components/plugins/viz-components/cartesian/migrators/index.ts

@@ -10,6 +10,7 @@ import { ICartesianChartConf } from '../type';
 
 import { VersionBasedMigrator } from '~/components/plugins/plugin-data-migrator';
 import { getDefaultLineAreaStyle } from '~/components/plugins/common-echarts-fields/line-area-style';
+import { getDefaultSeriesOrder } from '~/components/plugins/common-echarts-fields/series-order';
 
 export function updateSchema2(legacyConf: ICartesianChartConf & { variables: ITemplateVariable[] }): AnyObject {
   const cloned = cloneDeep(omit(legacyConf, 'variables'));
@@ -324,6 +325,21 @@ export function v21(legacyConf: any): ICartesianChartConf {
   };
 }
 
+export function v22(legacyConf: any): ICartesianChartConf {
+  const { series, ...rest } = legacyConf;
+  const newSeries = series.map((s: any) => {
+    const { order_in_group = getDefaultSeriesOrder(), ...restSeries } = s;
+    return {
+      ...restSeries,
+      order_in_group,
+    };
+  });
+  return {
+    ...rest,
+    series: newSeries,
+  };
+}
+
 export class VizCartesianMigrator extends VersionBasedMigrator {
   configVersions(): void {
     this.version(1, (data: $TSFixMe) => {
@@ -481,6 +497,13 @@ export class VizCartesianMigrator extends VersionBasedMigrator {
         config: v21(data.config),
       };
     });
+    this.version(22, (data, env) => {
+      return {
+        ...data,
+        version: 22,
+        config: v22(data.config),
+      };
+    });
   }
-  readonly VERSION = 21;
+  readonly VERSION = 22;
 }

dashboard/src/components/plugins/viz-components/cartesian/option/series/series_items.ts

@@ -13,6 +13,7 @@ export function getSeriesItemOrItems(
     label_position,
     name,
     group_by_key,
+    order_in_group,
     aggregation_on_value,
     stack,
     color,
@@ -89,7 +90,13 @@ export function getSeriesItemOrItems(
     x_axis_data_key,
     y_axis_data_key,
   });
-  return Object.entries(groupedData).map(([groupName, data]) => {
+
+  let groupedDataEntries = Object.entries(groupedData);
+  if (order_in_group.key === 'name') {
+    groupedDataEntries = _.orderBy(Object.entries(groupedData), 0, [order_in_group.order]);
+  }
+
+  return groupedDataEntries.map(([groupName, data]) => {
     const ret = cloneDeep(seriesItem);
     ret.name = groupName;
     ret.color = undefined;

dashboard/src/components/plugins/viz-components/cartesian/type.ts

@@ -17,6 +17,7 @@ import {
 import { EChartsYAxisPosition } from '../../common-echarts-fields/y-axis-position';
 import { DEFAULT_DATA_ZOOM_CONFIG, TEchartsDataZoomConfig } from './editors/echarts-zooming-field/types';
 import { EchartsLineAreaStyle } from '../../common-echarts-fields/line-area-style';
+import { SeriesOrder } from '../../common-echarts-fields/series-order';
 
 export interface ICartesianChartSeriesItem {
   type: 'line' | 'bar' | 'scatter';
@@ -36,6 +37,7 @@ export interface ICartesianChartSeriesItem {
   smooth: boolean;
   step: false | 'start' | 'middle' | 'end';
   group_by_key: string;
+  order_in_group: SeriesOrder;
   aggregation_on_value?: AggregationType;
   lineStyle: {
     type: IEChartsLineType;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"