1606 able to set order to series of pie chart

api/package.json

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

dashboard/package.json

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

dashboard/src/components/plugins/common-echarts-fields/series-order/index.ts

@@ -0,0 +1,2 @@
+export * from './series-order-selector';
+export * from './types';

dashboard/src/components/plugins/common-echarts-fields/series-order/series-order-selector.tsx

@@ -0,0 +1,79 @@
+import { Group, SegmentedControl, Select } from '@mantine/core';
+import { forwardRef, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { SeriesOrder } from './types';
+
+type Props = {
+  label: string;
+  value: SeriesOrder;
+  onChange: (v: SeriesOrder) => void;
+  hiddenKeys?: SeriesOrder['key'][];
+};
+
+export const SeriesOrderSelector = forwardRef<HTMLInputElement, Props>(
+  ({ label, value, onChange, hiddenKeys }, ref) => {
+    const { t, i18n } = useTranslation();
+    const keyOptions = useMemo(() => {
+      let ret: { label: string; value: SeriesOrder['key'] }[] = [
+        { label: t('chart.series_order.name'), value: 'name' },
+        { label: t('chart.series_order.value'), value: 'value' },
+        { label: t('chart.series_order.raw'), value: '' },
+      ];
+      if (hiddenKeys && Array.isArray(hiddenKeys) && hiddenKeys.length > 0) {
+        const s = new Set(hiddenKeys);
+        ret = ret.filter((r) => !s.has(r.value));
+      }
+      return ret;
+    }, [i18n.language, hiddenKeys]);
+
+    const orderOptions = useMemo(() => {
+      return [
+        { label: t('chart.series_order.asc'), value: 'asc' },
+        { label: t('chart.series_order.desc'), value: 'desc' },
+      ];
+    }, [i18n.language, hiddenKeys]);
+
+    const { key, order } = value;
+
+    const handleKeyChange = (v: string | null) => {
+      if (v === null) {
+        return;
+      }
+      onChange({
+        key: v as SeriesOrder['key'],
+        order,
+      });
+    };
+
+    const handleOrderChange = (v: string | null) => {
+      if (!v) {
+        return;
+      }
+      onChange({
+        key,
+        order: v as SeriesOrder['order'],
+      });
+    };
+    return (
+      <Group gap="xs" grow align="flex-end">
+        <Select
+          ref={ref}
+          label={label}
+          data={keyOptions}
+          value={key}
+          onChange={handleKeyChange}
+          // style={{ flexGrow: 1 }}
+        />
+        {key !== '' && (
+          <SegmentedControl
+            size="sm"
+            data={orderOptions}
+            value={order}
+            onChange={handleOrderChange}
+            // style={{ flexGrow: 0, flexShrink: 0 }}
+          />
+        )}
+      </Group>
+    );
+  },
+);

dashboard/src/components/plugins/common-echarts-fields/series-order/types.ts

@@ -0,0 +1,9 @@
+export type SeriesOrder = {
+  key: 'name' | 'value' | '';
+  order: 'asc' | 'desc';
+};
+export const getDefaultSeriesOrder = () =>
+  ({
+    key: '',
+    order: 'desc',
+  } as SeriesOrder);

dashboard/src/components/plugins/viz-components/pie-chart/index.tsx

@@ -44,8 +44,15 @@ class VizPieChartMigrator extends VersionBasedMigrator {
         config: Migrators.v5(data.config),
       };
     });
+    this.version(6, (data) => {
+      return {
+        ...data,
+        version: 6,
+        config: Migrators.v6(data.config),
+      };
+    });
   }
-  readonly VERSION = 5;
+  readonly VERSION = 6;
 }
 
 export const PieChartVizComponent: VizComponent = {
@@ -57,7 +64,7 @@ export const PieChartVizComponent: VizComponent = {
   configRender: VizPieChartEditor,
   createConfig() {
     return {
-      version: 5,
+      version: 6,
       config: cloneDeep(DEFAULT_CONFIG) as IPieChartConf,
     };
   },

dashboard/src/components/plugins/viz-components/pie-chart/migrators/index.ts

@@ -1,5 +1,6 @@
 import { IMigrationEnv } from '~/components/plugins/plugin-data-migrator';
 import { IPieChartConf } from '../type';
+import { getDefaultSeriesOrder } from '~/components/plugins/common-echarts-fields/series-order';
 
 export function v2(legacyConf: $TSFixMe): IPieChartConf {
   const { color_field = '', ...rest } = legacyConf;
@@ -46,3 +47,11 @@ export function v5(legacyConf: any): IPieChartConf {
     },
   };
 }
+
+export function v6(legacyConf: any): IPieChartConf {
+  const { series_order = getDefaultSeriesOrder(), ...rest } = legacyConf;
+  return {
+    ...rest,
+    series_order,
+  };
+}

dashboard/src/components/plugins/viz-components/pie-chart/option/series.ts

@@ -1,6 +1,7 @@
 import { set } from 'lodash';
 import { getColorFeed, parseDataKey } from '~/utils';
 import { IPieChartConf } from '../type';
+import _ from 'lodash';
 
 type TDataItem = {
   name: string;
@@ -19,7 +20,7 @@ function getColor(row: Record<string, any>, colorColumnKey: string, name: string
 }
 
 export function getSeries(conf: IPieChartConf, data: TPanelData, width: number) {
-  const { label_field, value_field, color_field, color } = conf;
+  const { label_field, value_field, series_order, color_field, color } = conf;
   if (!label_field || !value_field) {
     return {};
   }
@@ -35,14 +36,17 @@ export function getSeries(conf: IPieChartConf, data: TPanelData, width: number)
     return acc;
   }, {} as NameColorMap);
 
-  const chartData: TDataItem[] = data[label.queryID].map((d) => {
+  let chartData: TDataItem[] = data[label.queryID].map((d) => {
     const name = d[label.columnKey];
     return {
       name,
       value: Number(d[value.columnKey]),
       color: getColor(d, colorDataKey.columnKey, name, colorMap),
     };
   });
+  if (series_order) {
+    chartData = _.orderBy(chartData, [series_order.key], [series_order.order]);
+  }
 
   const colorFeed = getColorFeed('multiple');
   return {

dashboard/src/components/plugins/viz-components/pie-chart/type.ts

@@ -1,3 +1,5 @@
+import { getDefaultSeriesOrder, SeriesOrder } from '../../common-echarts-fields/series-order';
+
 export type NameColorMapRow = {
   name: string;
   color: string;
@@ -10,6 +12,7 @@ export interface IPieChartConf {
   color: {
     map: NameColorMapRow[];
   };
+  series_order: SeriesOrder;
 }
 
 export const DEFAULT_CONFIG: IPieChartConf = {
@@ -20,4 +23,5 @@ export const DEFAULT_CONFIG: IPieChartConf = {
   color: {
     map: [],
   },
+  series_order: getDefaultSeriesOrder(),
 };

dashboard/src/components/plugins/viz-components/pie-chart/viz-pie-chart-editor.tsx

@@ -13,6 +13,7 @@ import { PieColorMapEditor } from './editors/pie-color-map-editor';
 import { useEditPanelContext } from '~/contexts';
 import { extractData } from '~/utils';
 import _ from 'lodash';
+import { SeriesOrderSelector } from '../../common-echarts-fields/series-order';
 
 type StorageData = ReturnType<typeof useStorageData<IPieChartConf>>;
 
@@ -56,6 +57,11 @@ function Editor({ conf, setConf, context }: EditorProps) {
             name="value_field"
             render={({ field }) => <DataFieldSelector label={t('common.value_data_field')} required {...field} />}
           />
+          <Controller
+            control={control}
+            name="series_order"
+            render={({ field }) => <SeriesOrderSelector label={t('chart.series_order.label')} {...field} />}
+          />
           <Controller
             control={control}
             name="radius"

dashboard/src/i18n/en.ts

@@ -619,6 +619,14 @@ export const en = {
         echarts_based_charts: 'ECharts-based charts',
         others: 'Others',
       },
+      series_order: {
+        label: 'Order series by...',
+        name: 'Name',
+        value: 'Value',
+        raw: 'Record order',
+        asc: 'Ascending',
+        desc: 'Descending',
+      },
       label: {
         label: 'Label',
         label_full: 'Label',

dashboard/src/i18n/zh.ts

@@ -619,6 +619,14 @@ export const zh = {
         echarts_based_charts: '基于ECharts的图表',
         others: '其他',
       },
+      series_order: {
+        label: '排序依据',
+        name: '名称',
+        value: '值',
+        raw: '不排序，保持数据本身的顺序',
+        asc: '升序',
+        desc: '降序',
+      },
       label: {
         label: '文案',
         label_full: '标签文案',

package.json

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

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "14.5.1",
+  "version": "14.6.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.5.1",
+  "version": "14.6.0",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"