diff --git a/src/components/base/MonthlyTrendsChartBase.ts b/src/components/base/MonthlyTrendsChartBase.ts index 973ee620..c24a3f6a 100644 --- a/src/components/base/MonthlyTrendsChartBase.ts +++ b/src/components/base/MonthlyTrendsChartBase.ts @@ -17,6 +17,7 @@ import { getAllDateRangesFromItems } from '@/lib/statistics.ts'; export interface CommonMonthlyTrendsChartProps { items: YearMonthItems[]; + stacked?: boolean; startYearMonth: TextualYearMonth | ''; endYearMonth: TextualYearMonth | ''; fiscalYearStart: number; diff --git a/src/components/desktop/MonthlyTrendsChart.vue b/src/components/desktop/MonthlyTrendsChart.vue index 3b753738..301a5221 100644 --- a/src/components/desktop/MonthlyTrendsChart.vue +++ b/src/components/desktop/MonthlyTrendsChart.vue @@ -58,7 +58,7 @@ interface MonthlyTrendsChartDataItem { selected: boolean; type: string; areaStyle?: object; - stack: string; + stack?: string; animation: boolean; data: number[]; } @@ -219,11 +219,16 @@ const allSeries = computed(() => { }, selected: true, type: 'line', - stack: 'a', animation: !props.skeleton, data: allAmounts }; + if (props.stacked) { + finalItem.stack = 'a'; + } else if (props.idField && item[props.idField]) { + finalItem.stack = item[props.idField] as string; + } + if (props.type === TrendChartType.Area.type) { finalItem.areaStyle = {}; } else if (props.type === TrendChartType.Column.type) { diff --git a/src/components/mobile/MonthlyTrendsBarChart.vue b/src/components/mobile/MonthlyTrendsBarChart.vue index 083ea24d..3ad7241b 100644 --- a/src/components/mobile/MonthlyTrendsBarChart.vue +++ b/src/components/mobile/MonthlyTrendsBarChart.vue @@ -43,9 +43,9 @@ - @@ -61,14 +61,31 @@
{{ item.displayDateRange }}
+
+
+
+
+ +
+
+ +
+
+
+