Add stacked bar chart to Totals By Day page

Author: caleb531

desktop-app/src/components/MetricStackedBarChart.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import { BarChart } from 'layerchart';
+    import '../styles/metrics-stacked-bar-chart.css';
+
+    type StackedDatum = Record<string, string | number>;
+    type StackedSeries = { key: string; label: string; color?: string };
+
+    let {
+        data,
+        series,
+        x = 'key',
+        bandPadding = 0.2,
+        labelType = 'string',
+        minLabelWidth = 90,
+        barWidth = 6,
+        showLegend = true
+    }: {
+        data: StackedDatum[];
+        series: StackedSeries[];
+        x?: string;
+        bandPadding?: number;
+        labelType?: 'string' | 'emoji';
+        minLabelWidth?: number;
+        barWidth?: number;
+        showLegend?: boolean;
+    } = $props();
+
+    let containerWidth = $state(0);
+
+    const labelClass = $derived(labelType === 'emoji' ? 'emoji-tick-label' : 'text-tick-label');
+
+    const tickCount = $derived.by(() => {
+        if (containerWidth <= 0) {
+            return 4;
+        }
+        return Math.max(2, Math.floor(containerWidth / minLabelWidth));
+    });
+
+    const chartWidth = $derived.by(() => {
+        if (data.length === 0) {
+            return containerWidth;
+        }
+        return Math.max(containerWidth, data.length * barWidth);
+    });
+
+    const axisProps = $derived.by(() => ({
+        xAxis: {
+            ticks: tickCount,
+            tickLabelProps: {
+                class: labelClass
+            }
+        },
+        yAxis: {
+            ticks: 5
+        }
+    }));
+
+    const maxStackValue = $derived.by(() => {
+        if (data.length === 0 || series.length === 0) {
+            return 0;
+        }
+        return data.reduce((maxValue, datum) => {
+            const total = series.reduce((sum, item) => {
+                const value = Number(datum[item.key] ?? 0);
+                return sum + (Number.isFinite(value) ? value : 0);
+            }, 0);
+            return Math.max(maxValue, total);
+        }, 0);
+    });
+
+    const chartPadding = $derived.by(() => {
+        const label = Math.round(maxStackValue).toLocaleString();
+        const estimatedLabelWidth = Math.max(48, Math.min(140, 12 + label.length * 8));
+        return {
+            top: 20,
+            right: 12,
+            bottom: 24,
+            left: estimatedLabelWidth
+        };
+    });
+</script>
+
+{#if data.length > 0 && series.length > 0}
+    <div class="metrics-stacked-bar-chart__container">
+        <div class="metrics-stacked-bar-chart__scroll" bind:clientWidth={containerWidth}>
+            <article class="metrics-stacked-bar-chart" style={`width: ${chartWidth}px;`}>
+                <BarChart
+                    {data}
+                    {series}
+                    {bandPadding}
+                    {x}
+                    seriesLayout="stack"
+                    padding={chartPadding}
+                    props={{
+                        bars: {
+                            radius: 0
+                        },
+                        ...axisProps,
+                        tooltip: {
+                            root: {
+                                classes: { root: 'layerchart-tooltip' }
+                            }
+                        }
+                    }}
+                />
+            </article>
+        </div>
+        {#if showLegend}
+            <ul class="metrics-stacked-bar-chart__legend" aria-label="Chart legend">
+                {#each series as item}
+                    <li class="metrics-stacked-bar-chart__legend-item">
+                        <span
+                            class="metrics-stacked-bar-chart__legend-swatch"
+                            style={`--legend-color: ${item.color ?? '#9aa0a6'}`}
+                        ></span>
+                        <span class="metrics-stacked-bar-chart__legend-label">{item.label}</span>
+                    </li>
+                {/each}
+            </ul>
+        {/if}
+    </div>
+{/if}

desktop-app/src/components/ResultGrid.svelte

@@ -22,9 +22,10 @@
         command: string[];
         charts?: Snippet<[Array<Record<string, unknown>>, GridColumn[]]>;
         children?: Snippet;
+        chartsClass?: string;
     }
 
-    let { title, description, command, charts, children }: Props = $props();
+    let { title, description, command, charts, children, chartsClass }: Props = $props();
 
     let isReloadingData = $state(true);
     let hasInitiallyLoaded = $state(false);
@@ -263,7 +264,11 @@
         </form>
 
         {#if charts && rows.length && !errorMessage}
-            <div class="result-grid-charts" aria-label="Chart area" role="img">
+            <div
+                class={`result-grid-charts${chartsClass ? ` ${chartsClass}` : ''}`}
+                aria-label="Chart area"
+                role="img"
+            >
                 {@render charts(rows, columns)}
             </div>
         {/if}

desktop-app/src/routes/totals-by-day/+page.svelte

@@ -1,9 +1,81 @@
 <script lang="ts">
+    import MetricStackedBarChart from '../../components/MetricStackedBarChart.svelte';
     import ResultGrid from '../../components/ResultGrid.svelte';
+    import type { GridColumn } from '../../types';
+
+    const seriesColors = [
+        '#0f62fe',
+        '#24a148',
+        '#8a3ffc',
+        '#ff832b',
+        '#007d79',
+        '#fa4d56',
+        '#a56eff'
+    ];
+
+    function getStackedChartProps({
+        rows,
+        columns
+    }: {
+        rows: Array<Record<string, unknown>>;
+        columns: GridColumn[];
+    }): {
+        data: Array<Record<string, string | number>>;
+        series: Array<{ key: string; label: string; color: string }>;
+    } {
+        if (!rows.length || !columns.length) {
+            return { data: [], series: [] };
+        }
+
+        const dateColumn = columns.find((column) => /date/i.test(column.header)) ?? columns[0];
+        if (!dateColumn) {
+            return { data: [], series: [] };
+        }
+
+        const matchedSeries = columns.filter((column) => /sent\s*by/i.test(column.header));
+        const seriesColumns = matchedSeries.length
+            ? matchedSeries
+            : columns.filter((column) => {
+                  if (column.id === dateColumn.id) {
+                      return false;
+                  }
+                  return !/total|#\s*sent$/i.test(column.header);
+              });
+
+        if (!seriesColumns.length) {
+            return { data: [], series: [] };
+        }
+
+        const data = rows
+            .map((row) => {
+                const entry: Record<string, string | number> = {
+                    date: String(row[dateColumn.id] ?? '')
+                };
+                for (const column of seriesColumns) {
+                    entry[column.id] = Number(row[column.id] ?? 0);
+                }
+                return entry;
+            })
+            .filter((entry) => entry.date);
+
+        const series = seriesColumns.map((column, index) => ({
+            key: column.id,
+            label: column.header,
+            color: seriesColors[index % seriesColors.length]
+        }));
+
+        return { data, series };
+    }
 </script>
 
 <ResultGrid
     title="Totals by Day"
     description="See your message totals, per person or overall, for each day you've messaged"
     command={['totals_by_day']}
-/>
+    chartsClass="result-grid-charts--wide"
+>
+    {#snippet charts(rows, columns)}
+        {@const chartProps = getStackedChartProps({ rows, columns })}
+        <MetricStackedBarChart data={chartProps.data} series={chartProps.series} x="date" />
+    {/snippet}
+</ResultGrid>

desktop-app/src/styles/metrics-stacked-bar-chart.css

@@ -0,0 +1,61 @@
+.metrics-stacked-bar-chart__container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.metrics-stacked-bar-chart__scroll {
+    width: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    padding-bottom: 0.5rem;
+    align-self: stretch;
+}
+
+.metrics-stacked-bar-chart {
+    height: 360px;
+    min-width: 100%;
+}
+
+.metrics-stacked-bar-chart__legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.5rem 1.25rem;
+    margin: 0.25rem 0 0;
+    padding: 0;
+    list-style: none;
+}
+
+.metrics-stacked-bar-chart__legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.45rem;
+    font-size: 0.85rem;
+    color: #e0e0e0;
+}
+
+.metrics-stacked-bar-chart__legend-swatch {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 0.2rem;
+    background: var(--legend-color, #9aa0a6);
+    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+
+/* Force Apple Color Emoji to ensure emojis are rendered as graphics, not text */
+.emoji-tick-label {
+    font-family:
+        'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol', sans-serif;
+    letter-spacing: normal;
+    word-spacing: normal;
+}
+
+.text-tick-label {
+    font-family:
+        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+        'Segoe UI Symbol';
+    letter-spacing: normal;
+    word-spacing: normal;
+}

desktop-app/src/styles/result-grid.css

@@ -95,3 +95,7 @@
 .result-grid-charts text {
     fill: #fff;
 }
+
+.result-grid-charts--wide {
+    width: min(100%, 90vw);
+}