From b4bae1fe7ddc7624f2a4bb0de3cdc53cfc8e9169 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Tue, 25 Nov 2025 14:12:47 +0100 Subject: [PATCH 1/5] [IMP] calendar chart: do not automatically detect calendar chart When improving the smart chart engine, we had the idea to automatically detect calendar charts based on the data provided. But after further consideration, we realized that calendar chart are a very niche use case, and automatically detecting them isn't a great idea. Task: 5357420 --- src/helpers/figures/charts/smart_chart_engine.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/helpers/figures/charts/smart_chart_engine.ts b/src/helpers/figures/charts/smart_chart_engine.ts index 804c58d437..7e9fd4c939 100644 --- a/src/helpers/figures/charts/smart_chart_engine.ts +++ b/src/helpers/figures/charts/smart_chart_engine.ts @@ -198,7 +198,6 @@ function buildTwoColumnChart(columns: ColumnInfo[], getters: Getters): ChartDefi }; } - // TODO: Handle date + number with calendar chart when implemented (and change the docstring) if (columns[0].type === "date" && columns[1].type === "number") { return { ...DEFAULT_LINE_CHART_CONFIG, From 3cb0a3b8523fe0f57d802bf59d8c06d10bcab6e1 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Tue, 25 Nov 2025 14:16:43 +0100 Subject: [PATCH 2/5] [FIX] calendar chart: fix typing The type `CalendarChartGranularity` would accept granularities that are only valid for pivots and not for calendar charts. Task: 5357420 --- .../o-spreadsheet-engine/src/types/chart/calendar_chart.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts b/packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts index 25f09ba148..887ba2c826 100644 --- a/packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts +++ b/packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts @@ -3,7 +3,7 @@ import { ChartColorScale, CommonChartDefinition } from "."; import { Color } from "../misc"; import { Granularity } from "../pivot"; -export const CALENDAR_CHART_GRANULARITIES: Granularity[] = [ +export const CALENDAR_CHART_GRANULARITIES = [ "year", "quarter_number", "month_number", @@ -13,7 +13,7 @@ export const CALENDAR_CHART_GRANULARITIES: Granularity[] = [ "hour_number", "minute_number", "second_number", -]; +] satisfies Granularity[]; export type CalendarChartGranularity = (typeof CALENDAR_CHART_GRANULARITIES)[number]; From e02f6aa8e8a50c0004ae3103c8b7826487f71b90 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Tue, 25 Nov 2025 14:37:03 +0100 Subject: [PATCH 3/5] [IMP] demo: add calender chart demo data Task: 5357420 --- demo/data.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 48 insertions(+), 2 deletions(-) diff --git a/demo/data.js b/demo/data.js index 8d58e1d5d4..8d76b85c8e 100644 --- a/demo/data.js +++ b/demo/data.js @@ -439,6 +439,8 @@ export const demoData = { V30: "Qualified", V31: "Proposition", V32: "Won", + V36: "Date of sale", + V37: "=TODAY() + ROUND(RANDARRAY(50)*30)", W1: "Movie Name", W2: "Avengers: Endgame", W3: "The Dark Knight", @@ -466,6 +468,8 @@ export const demoData = { W30: "=RANDBETWEEN(10, 40)", W31: "=RANDBETWEEN(10, 40)", W32: "=RANDBETWEEN(10, 40)", + W36: "Sale Amount", + W37: "=ROUND(RANDARRAY(50)*10000)", X1: "Revenue", X2: "2798000000", X3: "1006000000", @@ -493,6 +497,7 @@ export const demoData = { styles: {}, formats: { "X1:X23": 3, + "W37:W86": 7, }, borders: {}, conditionalFormats: [], @@ -841,7 +846,7 @@ export const demoData = { legendPosition: "top", labelRange: "Sheet1!A27:A35", title: { - text: "Line", + text: "Pyramid", }, horizontal: true, stacked: true, @@ -951,6 +956,32 @@ export const demoData = { }, }, }, + { + id: "15", + tag: "chart", + width: 500, + height: 300, + data: { + type: "calendar", + dataSets: [ + { + dataRange: "W36:W86", + }, + ], + dataSetsHaveTitle: true, + labelRange: "V36:V86", + title: {}, + horizontalGroupBy: "iso_week_number", + verticalGroupBy: "day_of_week", + legendPosition: "none", + }, + offset: { + x: 550, + y: 2225, + }, + col: 0, + row: 0, + }, ], tables: [ { @@ -998,6 +1029,21 @@ export const demoData = { styleId: "TableStyleMedium5", }, }, + { + range: "V36:W86", + type: "static", + config: { + hasFilters: false, + totalRow: false, + firstColumn: true, + lastColumn: false, + numberOfHeaders: 1, + bandedRows: true, + bandedColumns: false, + automaticAutofill: true, + styleId: "TableStyleMedium2", + }, + }, ], areGridLinesVisible: true, isVisible: true, @@ -3510,7 +3556,7 @@ export const demoData = { formats: { 1: "0.00%", 2: "#,##0.00", - 3: '$#,##0,,"K"', + 3: '$#,##0,,"m"', 4: "m/d/yyyy", 5: "hh:mm:ss a", 6: "d/m/yyyy", From df245e03d4ab99993eb22a6f28a55a5593bf78d2 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Tue, 25 Nov 2025 14:55:23 +0100 Subject: [PATCH 4/5] [FIX] calendar chart: hide scales borders The calendar chart grid lines aren't shown, but the borders between chartArea and the ticks labels was still shown. Depending on the screen, zoom, and size of the chart, the border would be more or less visible. This commit hides these borders. Task: 5357420 --- .../figures/charts/runtime/chartjs_scales.ts | 2 ++ .../chart/calendar/calendar_chart_plugin.test.ts | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/src/helpers/figures/charts/runtime/chartjs_scales.ts b/src/helpers/figures/charts/runtime/chartjs_scales.ts index a7d28fc5b1..4fbf24e3fc 100644 --- a/src/helpers/figures/charts/runtime/chartjs_scales.ts +++ b/src/helpers/figures/charts/runtime/chartjs_scales.ts @@ -118,6 +118,7 @@ export function getCalendarChartScales( grid: { display: false, }, + border: { display: false }, }, x: { title: getChartAxisTitleRuntime(definition.axesDesign?.x), @@ -129,6 +130,7 @@ export function getCalendarChartScales( ticks: { color: fontColor, }, + border: { display: false }, }, }; } diff --git a/tests/figures/chart/calendar/calendar_chart_plugin.test.ts b/tests/figures/chart/calendar/calendar_chart_plugin.test.ts index 4cbb153fee..031f9c3471 100644 --- a/tests/figures/chart/calendar/calendar_chart_plugin.test.ts +++ b/tests/figures/chart/calendar/calendar_chart_plugin.test.ts @@ -2,6 +2,7 @@ import { CalendarChartGranularity, CalendarChartRuntime, } from "@odoo/o-spreadsheet-engine/types/chart/calendar_chart"; +import { ScaleChartOptions } from "chart.js"; import { ChartCreationContext, Model } from "../../../../src"; import { CalendarChart } from "../../../../src/helpers/figures/charts/calendar_chart"; import { createCalendarChart, createSheet, setCellContent, setFormat } from "../../../test_helpers"; @@ -231,4 +232,17 @@ describe("calendar chart", () => { expect(runtime.chartJsConfig.data.labels).toEqual(grouping.labels); } ); + + test("Axis borders are not shown in calendar charts", () => { + const model = new Model(); + createCalendarChart( + model, + { type: "calendar", dataSets: [{ dataRange: "B1:B365" }] }, + "chartId" + ); + const runtime = model.getters.getChartRuntime("chartId") as CalendarChartRuntime; + const scales = runtime.chartJsConfig.options?.scales as ScaleChartOptions<"bar">["scales"]; + expect(scales?.x?.border?.display).toBe(false); + expect(scales?.y?.border?.display).toBe(false); + }); }); From 148436b9210829ca1d27099a761a526fef332a43 Mon Sep 17 00:00:00 2001 From: "Adrien Minne (adrm)" Date: Tue, 16 Dec 2025 14:38:36 +0100 Subject: [PATCH 5/5] [FIX] calendar chart: fix icon for dark mode The colors of the calendar chart preview icon were not adapted for dark mode. The oranges were not the same hue as the ones used in the rest of the chart preview, and the grid lines were barely visible. Task: 5357420 --- .../chart/chart_type_picker/chart_previews.xml | 15 +++++++++------ src/variables.css | 2 ++ 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/components/side_panel/chart/chart_type_picker/chart_previews.xml b/src/components/side_panel/chart/chart_type_picker/chart_previews.xml index c34f9b20ba..f379eb134f 100644 --- a/src/components/side_panel/chart/chart_type_picker/chart_previews.xml +++ b/src/components/side_panel/chart/chart_type_picker/chart_previews.xml @@ -377,18 +377,21 @@ - + - + - - + + diff --git a/src/variables.css b/src/variables.css index 9ccf771eab..97c3fff38e 100644 --- a/src/variables.css +++ b/src/variables.css @@ -64,6 +64,8 @@ --os-chart-preview-orange-line: light-dark(#eb6d00, #ff9d4d); --os-chart-preview-orange-fill: light-dark(#ffe1c8, #734200); + --os-chart-preview-orange-light: light-dark(#ff9d4d, #eb6d00); + --os-chart-preview-orange-dark: light-dark(#a34c00, #c96a1e); --os-chart-preview-blue-line: light-dark(#0074d9, #4cb3ff); --os-chart-preview-blue-fill: light-dark(#c4e4ff, #003e73);