[IMP] charts: add calendar chart

Task Description

This task aims to add the possibility to analyze temporal records
by grouping the value associated to each date into time periods
(e.g. year, date, month, hour of day, ...). This analysis is
added as a new chart which could be further adapted if we want to
make heat map based on a matrix data.

Related Task

Task: 4816317
Part-of: #6773
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: anhe-odoo

packages/o-spreadsheet-engine/src/constants.ts

@@ -40,6 +40,7 @@ export const CHART_PADDING_TOP = 15;
 export const CHART_TITLE_FONT_SIZE = 16;
 export const CHART_AXIS_TITLE_FONT_SIZE = 12;
 export const MASTER_CHART_HEIGHT = 60;
+export const CHART_COLORSCALE_WIDTH = 70;
 
 export const SCORECARD_CHART_TITLE_FONT_SIZE = 14;
 

packages/o-spreadsheet-engine/src/helpers/pivot/spreadsheet_pivot/date_spreadsheet_pivot.ts

@@ -6,7 +6,11 @@ import { toNormalizedPivotValue } from "../pivot_helpers";
 
 const NULL_SYMBOL = Symbol("NULL");
 
-export function createDate(dimension: PivotDimension, value: CellValue, locale: Locale): CellValue {
+export function createDate(
+  dimension: Pick<PivotDimension, "type" | "displayName" | "granularity">,
+  value: CellValue,
+  locale: Locale
+): CellValue {
   const granularity = dimension.granularity || "month";
   if (!(granularity in MAP_VALUE_DIMENSION_DATE)) {
     throw new Error(`Unknown date granularity: ${granularity}`);

packages/o-spreadsheet-engine/src/types/chart/calendar_chart.ts

@@ -0,0 +1,31 @@
+import { ChartConfiguration } from "chart.js";
+import { ChartColorScale, CommonChartDefinition } from ".";
+import { Color } from "../misc";
+import { Granularity } from "../pivot";
+
+export const CALENDAR_CHART_GRANULARITIES: Granularity[] = [
+  "year",
+  "quarter_number",
+  "month_number",
+  "iso_week_number",
+  "day_of_month",
+  "day_of_week",
+  "hour_number",
+  "minute_number",
+  "second_number",
+];
+
+export type CalendarChartGranularity = (typeof CALENDAR_CHART_GRANULARITIES)[number];
+
+export interface CalendarChartDefinition extends CommonChartDefinition {
+  readonly type: "calendar";
+  readonly colorScale?: ChartColorScale;
+  readonly missingValueColor?: Color;
+  readonly horizontalGroupBy?: CalendarChartGranularity;
+  readonly verticalGroupBy?: CalendarChartGranularity;
+}
+
+export type CalendarChartRuntime = {
+  chartJsConfig: ChartConfiguration;
+  background: Color;
+};

packages/o-spreadsheet-engine/src/types/chart/chart.ts

@@ -1,6 +1,7 @@
 import { Point } from "chart.js";
 import { XlsxHexColor } from "../xlsx";
 import { BarChartDefinition, BarChartRuntime } from "./bar_chart";
+import { CalendarChartDefinition } from "./calendar_chart";
 import { ComboChartDefinition, ComboChartRuntime } from "./combo_chart";
 import { LegendPosition } from "./common_chart";
 import { FunnelChartColors, FunnelChartDefinition, FunnelChartRuntime } from "./funnel_chart";
@@ -40,6 +41,7 @@ export const CHART_TYPES = [
   "funnel",
   "sunburst",
   "treemap",
+  "calendar",
 ] as const;
 export type ChartType = (typeof CHART_TYPES)[number];
 
@@ -57,13 +59,21 @@ export type ChartDefinition =
   | GeoChartDefinition
   | FunnelChartDefinition
   | SunburstChartDefinition
-  | TreeMapChartDefinition;
+  | TreeMapChartDefinition
+  | CalendarChartDefinition;
 
 export type ChartWithDataSetDefinition = Extract<
   ChartDefinition,
   { dataSets: CustomizedDataSet[]; labelRange?: string; humanize?: boolean }
 >;
 
+export type ChartWithColorScaleDefinition = Extract<
+  ChartDefinition,
+  { colorScale?: ChartColorScale }
+>;
+
+export type ChartWithTitleDefinition = Extract<ChartDefinition, { title?: TitleDesign }>;
+
 export type ChartWithAxisDefinition = Extract<
   ChartWithDataSetDefinition,
   { axesDesign?: AxesDesign }

packages/o-spreadsheet-engine/src/types/chart/geo_chart.ts

@@ -1,25 +1,14 @@
 import { ChartConfiguration } from "chart.js";
 import { Color } from "../misc";
-import {
-  ChartColorScale,
-  ChartRuntimeGenerationArgs,
-  CustomizedDataSet,
-  TitleDesign,
-} from "./chart";
-import { LegendPosition } from "./common_chart";
+import { ChartColorScale, ChartRuntimeGenerationArgs } from "./chart";
+import { CommonChartDefinition } from "./common_chart";
 
-export interface GeoChartDefinition {
+export interface GeoChartDefinition extends CommonChartDefinition {
   readonly type: "geo";
-  readonly dataSets: CustomizedDataSet[];
-  readonly dataSetsHaveTitle: boolean;
-  readonly labelRange?: string;
-  readonly title: TitleDesign;
-  readonly background?: Color;
-  readonly legendPosition: LegendPosition;
   readonly colorScale?: ChartColorScale;
   readonly missingValueColor?: Color;
   readonly region?: string;
-  readonly humanize?: boolean;
+  readonly showColorBar?: boolean;
 }
 
 export type GeoChartRuntime = {

src/components/figures/chart/chartJs/chartjs.ts

@@ -7,6 +7,7 @@ import { Store, useStore } from "../../../../store_engine";
 import { UID } from "../../../../types";
 import { chartJsExtensionRegistry, registerChartJSExtensions } from "./chart_js_extension";
 import { ChartAnimationStore } from "./chartjs_animation_store";
+import { chartColorScalePlugin } from "./chartjs_colorscale_plugin";
 import {
   funnelTooltipPositioner,
   getFunnelChartController,
@@ -52,6 +53,10 @@ chartJsExtensionRegistry.add("sunburstHoverPlugin", {
   register: (Chart) => Chart.register(sunburstHoverPlugin),
   unregister: (Chart) => Chart.unregister(sunburstHoverPlugin),
 });
+chartJsExtensionRegistry.add("chartColorScalePlugin", {
+  register: (Chart) => Chart.register(chartColorScalePlugin),
+  unregister: (Chart) => Chart.unregister(chartColorScalePlugin),
+});
 
 export class ChartJsComponent extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-ChartJsComponent";

src/components/figures/chart/chartJs/chartjs_colorscale_plugin.ts

@@ -0,0 +1,79 @@
+import {
+  CHART_AXIS_TITLE_FONT_SIZE,
+  CHART_COLORSCALE_WIDTH,
+  CHART_PADDING,
+} from "@odoo/o-spreadsheet-engine/constants";
+import { ChartType, Plugin } from "chart.js";
+import { Color, Locale } from "../../../..";
+import { getDefaultContextFont, humanizeNumber } from "../../../../helpers";
+
+export interface ChartColorScalePluginOptions {
+  position: "left" | "right" | "none";
+  colorScale: Color[];
+  fontColor?: Color;
+  minValue: number;
+  maxValue: number;
+  locale: Locale;
+}
+
+declare module "chart.js" {
+  interface PluginOptionsByType<TType extends ChartType> {
+    chartColorScalePlugin?: ChartColorScalePluginOptions;
+  }
+}
+
+/** This is a chartJS plugin that will draw the heatmap colorscale at the chart legend position */
+export const chartColorScalePlugin: Plugin = {
+  id: "chartColorScalePlugin",
+  afterDatasetsDraw(chart: any, args, options: ChartColorScalePluginOptions) {
+    if (!options.position || options.position === "none" || !options.colorScale.length) {
+      return;
+    }
+    const ctx = chart.ctx as CanvasRenderingContext2D;
+    ctx.save();
+
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.miterLimit = 1; // Avoid sharp artifacts on strokeText
+
+    const gradientHeight = (chart.chartArea.bottom - chart.chartArea.top) / 2;
+    const gradientWidth = 10;
+    const gradientX =
+      options.position === "left" ? CHART_PADDING : ctx.canvas.width - CHART_COLORSCALE_WIDTH;
+    const gradientY = chart.chartArea.top;
+
+    // Create gradient
+    const gradient = ctx.createLinearGradient(0, gradientY + gradientHeight, 0, gradientY);
+    const step = 1 / (options.colorScale.length - 1);
+    options.colorScale.forEach((color, index) => {
+      gradient.addColorStop(index * step, color);
+    });
+
+    // Draw gradient rectangle
+    ctx.fillStyle = gradient;
+    ctx.fillRect(gradientX, gradientY, gradientWidth, gradientHeight);
+
+    // Draw min and max labels
+    ctx.fillStyle = options.fontColor ?? "black";
+    ctx.font = getDefaultContextFont(CHART_AXIS_TITLE_FONT_SIZE);
+    ctx.textAlign = "left";
+    let minValue = Math.round(options.minValue * 100) / 100;
+    let maxValue = Math.round(options.maxValue * 100) / 100;
+    if (options.minValue === options.maxValue) {
+      minValue -= 1;
+      maxValue += 1;
+    }
+    const formattedMaxValue = humanizeNumber(
+      { value: maxValue, format: undefined },
+      options.locale
+    );
+    const formattedMinValue = humanizeNumber(
+      { value: minValue, format: undefined },
+      options.locale
+    );
+    ctx.fillText(formattedMinValue, gradientX + gradientWidth + 5, gradientY + gradientHeight - 6);
+    ctx.fillText(formattedMaxValue, gradientX + gradientWidth + 5, gradientY + 6);
+
+    ctx.restore();
+  },
+};