diff --git a/packages/types/src/charts/common.d.ts b/packages/types/src/charts/common.d.ts index 85034c2fe7..9f036b2706 100644 --- a/packages/types/src/charts/common.d.ts +++ b/packages/types/src/charts/common.d.ts @@ -1,16 +1,14 @@ - - export type TChartColorScheme = "modern" | "horizon" | "earthen"; -export type TChartDatum = { +export type TChartBaseDatum = { key: string; name: string; count: number; -} & Record; +}; + +export type TChartDatum = TChartBaseDatum & Record; export type TChart = { data: TChartDatum[]; schema: Record; }; - - diff --git a/web/core/components/analytics/work-items/priority-chart.tsx b/web/core/components/analytics/work-items/priority-chart.tsx index 78a05c2c78..baca23e396 100644 --- a/web/core/components/analytics/work-items/priority-chart.tsx +++ b/web/core/components/analytics/work-items/priority-chart.tsx @@ -73,9 +73,14 @@ const PriorityChart = observer((props: Props) => { ); const parsedData = useMemo( () => - priorityChartData && parseChartData(priorityChartData, props.x_axis, props.group_by, props.x_axis_date_grouping), + priorityChartData && + parseChartData(priorityChartData, props.x_axis, props.group_by, props.x_axis_date_grouping, { + key: "name", + order: "asc", + }), [priorityChartData, props.x_axis, props.group_by, props.x_axis_date_grouping] ); + const chart_model = props.group_by ? EChartModels.STACKED : EChartModels.BASIC; const bars: TBarItem[] = useMemo(() => { diff --git a/web/core/components/chart/utils.ts b/web/core/components/chart/utils.ts index 9e1d779bf8..46d366740e 100644 --- a/web/core/components/chart/utils.ts +++ b/web/core/components/chart/utils.ts @@ -1,9 +1,19 @@ import { getWeekOfMonth, isValid } from "date-fns"; -import { CHART_X_AXIS_DATE_PROPERTIES, ChartXAxisDateGrouping, ChartXAxisProperty, TO_CAPITALIZE_PROPERTIES } from "@plane/constants"; -import { TChart, TChartDatum } from "@plane/types"; +import { + CHART_X_AXIS_DATE_PROPERTIES, + ChartXAxisDateGrouping, + ChartXAxisProperty, + TO_CAPITALIZE_PROPERTIES, +} from "@plane/constants"; +import { TChart, TChartBaseDatum, TChartDatum } from "@plane/types"; import { capitalizeFirstLetter, hexToHsl, hslToHex, renderFormattedDate } from "@plane/utils"; import { renderFormattedDateWithoutYear } from "@/helpers/date-time.helper"; +type SortConfig = { + key: keyof TChartBaseDatum | (string & {}); + order: "asc" | "desc"; +}; + const getDateGroupingName = (date: string, dateGrouping: ChartXAxisDateGrouping): string => { if (!date || ["none", "null"].includes(date.toLowerCase())) return "None"; @@ -47,7 +57,8 @@ export const parseChartData = ( data: TChart | null | undefined, xAxisProperty: ChartXAxisProperty | null | undefined, groupByProperty: ChartXAxisProperty | null | undefined, - xAxisDateGrouping: ChartXAxisDateGrouping | null | undefined + xAxisDateGrouping: ChartXAxisDateGrouping | null | undefined, + sortConfig?: SortConfig ): TChart => { if (!data) { return { @@ -61,7 +72,7 @@ export const parseChartData = ( const updatedWidgetData: TChartDatum[] = widgetData.map((datum) => { const keys = Object.keys(datum); const missingKeys = allKeys.filter((key) => !keys.includes(key)); - const missingValues: Record = Object.fromEntries(missingKeys.map(key => [key, 0])); + const missingValues: Record = Object.fromEntries(missingKeys.map((key) => [key, 0])); if (xAxisProperty) { // capitalize first letter if xAxisProperty is in TO_CAPITALIZE_PROPERTIES and no groupByProperty is set @@ -81,6 +92,13 @@ export const parseChartData = ( }; }); + updatedWidgetData.sort((a, b) => { + const aValue = a[sortConfig?.key ?? ""] ?? 0; + const bValue = b[sortConfig?.key ?? ""] ?? 0; + + return sortConfig?.order === "asc" ? (aValue > bValue ? 1 : -1) : aValue < bValue ? 1 : -1; + }); + // capitalize first letter if groupByProperty is in TO_CAPITALIZE_PROPERTIES const updatedSchema = schema; if (groupByProperty) { @@ -163,4 +181,4 @@ export const generateExtendedColors = (baseColorSet: string[], targetCount: numb } return colors.slice(0, targetCount); -}; \ No newline at end of file +};