Skip to content

[IMP] calendar chart: automatically detect calendar charts #7531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hokolomopo wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[IMP] calendar chart: automatically detect calendar charts #7531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b3c5ae7
[IMP] calendar chart: automatically detect calendar chart
hokolomopo Nov 25, 2025
27ef65e
[FIX] calendar chart: fix typing
hokolomopo Nov 25, 2025
d71feef
[IMP] demo: add calender chart demo data
hokolomopo Nov 25, 2025
d6582eb
[FIX] calendar chart: hide scales borders
hokolomopo Nov 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 48 additions & 2 deletions demo/data.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -493,6 +497,7 @@ export const demoData = {
styles: {},
formats: {
"X1:X23": 3,
"W37:W86": 7,
},
borders: {},
conditionalFormats: [],
Expand Down Expand Up @@ -841,7 +846,7 @@ export const demoData = {
legendPosition: "top",
labelRange: "Sheet1!A27:A35",
title: {
text: "Line",
text: "Pyramid",
},
horizontal: true,
stacked: true,
Expand Down Expand Up @@ -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: [
{
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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];

Expand Down
2 changes: 2 additions & 0 deletions src/helpers/figures/charts/runtime/chartjs_scales.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export function getCalendarChartScales(
grid: {
display: false,
},
border: { display: false },
},
x: {
title: getChartAxisTitleRuntime(definition.axesDesign?.x),
Expand All @@ -129,6 +130,7 @@ export function getCalendarChartScales(
ticks: {
color: fontColor,
},
border: { display: false },
},
};
}
Expand Down
10 changes: 6 additions & 4 deletions src/helpers/figures/charts/smart_chart_engine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ function buildSingleColumnChart(column: ColumnInfo, getters: Getters): ChartDefi
* columns left to right, and is as follows:
* - any type + percentage columns: pie chart
* - number + number columns: scatter chart
* - date + number columns: line chart
* - date + number columns: calendar chart
* - text + number columns: treemap if repetition in labels
* - any other combination: bar chart
*/
Expand Down Expand Up @@ -198,14 +198,16 @@ 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,
type: "line",
type: "calendar",
dataSets: [{ dataRange: getUnboundRange(getters, columns[1].zone) }],
labelRange: getUnboundRange(getters, columns[0].zone),
dataSetsHaveTitle: isDatasetTitled(getters, columns[0]),
title: {},
Copy link
Collaborator

@rrahir rrahir Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

functionally speaking, I am not convinced at all. If I want to see a day-to-day evolution of the sales of my shop, I would not be happy seeing a calendar chart which would make 0 sense.
Assuming that we want that feature, it should at least look for dates that span over several days, otherwise it becomes really pointless

legendPosition: "none",
horizontalGroupBy: "day_of_week",
verticalGroupBy: "month_number",
};
}

Expand Down
14 changes: 14 additions & 0 deletions tests/figures/chart/calendar/calendar_chart_plugin.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
});
});
2 changes: 1 addition & 1 deletion tests/figures/chart/menu_item_insert_chart.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -502,7 +502,7 @@ describe("Smart chart type detection", () => {
[["number", "percentage"], { type: "pie" }],
[["date", "percentage"], { type: "pie" }],
[["number", "number"], { type: "scatter" }],
[["date", "number"], { type: "line" }],
[["date", "number"], { type: "calendar" }],
[["text", "number"], { type: "bar" }],
[["text_repeated", "number"], { type: "treemap" }],
[["text", "date"], { type: "bar" }],
Expand Down