Cohort retention charts + POC of rendering charts on node and send them as attachment #49
Conversation
src/analytics/canvas.ts
Outdated
| const canvasConfiguration = { | ||
| width: 800, | ||
| height: 600, | ||
| backgroundColour: "white", | ||
| } as const; |
There was a problem hiding this comment.
The resolution is something we can increase if needed.
src/analytics/color.ts
Outdated
There was a problem hiding this comment.
Vibe coded but checked that it's okay.
| * - `["10", "6 (60%)", "3 (30%)", "0 (0%)"]` | ||
| * - `["0", "N/A", "N/A"]` | ||
| */ | ||
| function calcCohortRetentionTableRow(cohort: number[]): string[] { |
There was a problem hiding this comment.
extract out as a standalone function
| percentage: number; | ||
| }; | ||
|
|
||
| async function createCohortRetentionHeatMap( |
There was a problem hiding this comment.
Currently the code to generate the chart is very large.
This is due to the fact that this is the first chart we made via chart.js and all that can be in future extracted out as "utils" and "our base configuration" lives in here. So far we can't be sure what can be shared so it's best to leave it as it is. In future we can create e.g. base scale settings.
There was a problem hiding this comment.
I extracted 1 plugin out which can be reused.
Also extracted color stuff to color.ts.
Also made it a bit more readable.
| @@ -13,7 +13,11 @@ export interface ChartReport { | |||
| chart: ImageCharts; | |||
| } | |||
|
|
|||
| export type CohortRetentionReport = TextReport; | |||
| export interface LocalChartReport { | |||
There was a problem hiding this comment.
We already had ChartReport, this one comes form our own server so for development I named it LocalChartReport. Now we can decide for better name since renames will add a lot of "code changes' which aren't really related to logic which I will apply before merge.
My idea would be to use:
ChartReport -> ImageChartsReport
LocalChartReport -> ChartReport
|
|
||
| export function isDarkColor(color: string): boolean { | ||
| const luminance = calculateLuminance(color); | ||
| return luminance < 0.35; |
There was a problem hiding this comment.
0.35 is something i defined by feeling, I really don't like it at 0.5
| @@ -0,0 +1,171 @@ | |||
| // Palettes source https://mk.bcgsc.ca/brewer/swatches/brewer.txt | |||
| export const SEQUENTIAL_BLUE_PALETTE = [ | |||
There was a problem hiding this comment.
There are options with more than 7 colors in palette, but that might be overkill, even 7 might be.
Fixes: #33
Adds cohort retention chart which is fully rendered on our server via
chart.js.Chose
chart.jsas it's most popular one so hopefully for further chart edits people would find it most easy to pick up.