Colorised spreadsheet (#1643)

* feat: colorise spreadSheet with rundown color

* feat: add colorisation in spreadsheet for block

* feat: border color

* fix: cleanup accessible color

* fix: review before merge (https://github.com/cpvalente/ontime/pull/1608)

* fix: usgae of map instead foreach (https://github.com/cpvalente/ontime/pull/1608)

* Update apps/server/src/services/sheet-service/SheetService.ts

Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>

* fix: comment condition

* fix: Remove Color plugin (but don't can get color like 'red' or 'black')

* fix: isLight for more clean code

* fix: remove map on isLight function

* fix: remove debug logger

* refactor colour

* lint

---------

Co-authored-by: Gwenitora <gwenitora.gardu74@gmail.com>
Co-authored-by: Gwenitora <61121870+Gwenitora@users.noreply.github.com>
Co-authored-by: Carlos Valente <34649812+cpvalente@users.noreply.github.com>
This commit is contained in:
Alex Christoffer Rasmussen
2025-06-24 22:38:03 +02:00
committed by GitHub
parent 984dcb0181
commit 4872cd0a48
14 changed files with 350 additions and 252 deletions
@@ -1,5 +1,5 @@
import { isOntimeBlock, isOntimeEvent, OntimeEvent, OntimeEntry } from 'ontime-types';
import { millisToString } from 'ontime-utils';
import { isOntimeBlock, isOntimeEvent, OntimeEvent, OntimeEntry, RGBColour } from 'ontime-types';
import { cssOrHexToColour, isLightColour, millisToString, mixColours } from 'ontime-utils';
import type { sheets_v4 } from '@googleapis/sheets';
import { is } from '../../utils/is.js';
@@ -100,8 +100,26 @@ export function cellRequestFromEvent(
}
}
const colors = isOntimeEvent(event) || isOntimeBlock(event) ? getAccessibleColour(event.colour) : undefined;
const cellColor: sheets_v4.Schema$CellData = !colors
? {}
: {
userEnteredFormat: {
backgroundColor: toSheetColourLevel(colors.background),
textFormat: {
foregroundColor: toSheetColourLevel(colors.text),
},
borders: {
bottom: {
style: 'SOLID',
color: toSheetColourLevel(colors.border),
},
},
},
};
const returnRows: sheets_v4.Schema$CellData[] = rowData.map(([key, _]) => {
return getCellData(key, event);
return { ...getCellData(key, event), ...cellColor };
});
return {
@@ -111,7 +129,7 @@ export function cellRequestFromEvent(
rowIndex: index + rowData[0][1]['row'] + 1,
columnIndex: titleCol,
},
fields: 'userEnteredValue',
fields: 'userEnteredValue,userEnteredFormat',
rows: [
{
values: returnRows,
@@ -156,3 +174,29 @@ function getCellData(key: keyof OntimeEvent | 'blank', event: OntimeEntry) {
return {};
}
type googleSheetCellColour = {
background: RGBColour;
text: RGBColour;
border: RGBColour;
};
function getAccessibleColour(bgColour?: string): googleSheetCellColour | undefined {
if (!bgColour) return undefined;
const background = cssOrHexToColour(bgColour);
if (!background) return undefined;
const text = isLightColour(background) ? BLACK : WHITE;
const border = mixColours(background, text, 0.2);
return { background, text, border };
}
const BLACK: RGBColour = { red: 0, green: 0, blue: 0, alpha: 1 };
const WHITE: RGBColour = { red: 255, green: 255, blue: 255, alpha: 0.98 };
// sheets use color values from 0 to 1
function toSheetColourLevel(colour: RGBColour): RGBColour {
return { red: colour.red / 255, green: colour.green / 255, blue: colour.blue / 255, alpha: colour.alpha };
}