Add bar chart to Emojis page

Author: caleb531

desktop-app/src/components/MetricBarChart.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { BarChart } from 'layerchart';
+    import '../styles/metrics-bar-chart.css';
+    import type { DataPoint } from '../types';
+
+    let {
+        data,
+        x = 'key',
+        y = 'value'
+    }: { data: DataPoint[]; x?: string; y?: string; color?: string } = $props();
+</script>
+
+{#if data.length > 0}
+    <article class="metrics-bar-chart">
+        <BarChart
+            {data}
+            {x}
+            {y}
+            bandPadding={0.3}
+            props={{
+                bars: {
+                    radius: 4
+                },
+                yAxis: {
+                    ticks: 5
+                },
+                tooltip: {
+                    root: {
+                        classes: { root: 'layerchart-tooltip' }
+                    },
+                    item: {
+                        label: ''
+                    }
+                }
+            }}
+        />
+    </article>
+{/if}

desktop-app/src/routes/+layout.svelte

@@ -3,6 +3,7 @@
     import 'carbon-components-svelte/css/all.css';
     import type { ThemeProps } from 'carbon-components-svelte/src/Theme/Theme.svelte';
     import Header from '../components/Header.svelte';
+    import '../styles/colors.css';
     import '../styles/layout.css';
     import '../styles/utility-classes.css';
     const { children } = $props();

desktop-app/src/routes/message-totals/+page.svelte

@@ -24,10 +24,12 @@
                 const label = row[metricCol.id];
                 return typeof label === 'string' && columnNamePattern.test(label);
             })
-            .map((row) => ({
-                key: columnNameFormatter(String(row[metricCol.id])),
-                value: Number(row[totalCol.id])
-            }))
+            .map((row) => {
+                return {
+                    key: columnNameFormatter(String(row[metricCol.id])),
+                    value: Number(row[totalCol.id])
+                };
+            })
             .filter((dataPoint) => dataPoint.value > 0)
             .sort((a, b) => b.value - a.value);
     }

desktop-app/src/routes/most-frequent-emojis/+page.svelte

@@ -1,9 +1,44 @@
 <script lang="ts">
+    import MetricBarChart from '../../components/MetricBarChart.svelte';
     import ResultGrid from '../../components/ResultGrid.svelte';
+    import type { DataPoint, GridColumn } from '../../types';
+
+    function getChartData({
+        rows,
+        columns
+    }: {
+        rows: Array<Record<string, unknown>>;
+        columns: GridColumn[];
+    }): DataPoint[] {
+        if (!columns.length || !rows.length) return [];
+
+        // Emojis result usually matches "Emoji" and "Count"
+        let keyCol = columns.find((c) => /Emoji/i.test(c.header));
+        let valueCol = columns.find((c) => /Count|Total/i.test(c.header));
+
+        // Fallback: Use first and second columns if named columns not found
+        if (!keyCol && columns.length > 0) keyCol = columns[0];
+        if (!valueCol && columns.length > 1) valueCol = columns[1];
+
+        if (!keyCol || !valueCol) return [];
+
+        return rows
+            .map((row) => {
+                return {
+                    key: String(row[keyCol!.id]),
+                    value: Number(row[valueCol!.id])
+                };
+            })
+            .sort((a, b) => b.value - a.value);
+    }
 </script>
 
 <ResultGrid
     title="Most Frequent Emojis"
     description="See which emojis are used most frequently in your conversation."
     command={['most_frequent_emojis']}
-/>
+>
+    {#snippet charts(rows, columns)}
+        <MetricBarChart data={getChartData({ rows, columns })} />
+    {/snippet}
+</ResultGrid>

desktop-app/src/styles/colors.css

@@ -0,0 +1,4 @@
+:root {
+    /* Define colors as lists of HSL components */
+    --color-primary: 219 99% 53%;
+}

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

@@ -0,0 +1,6 @@
+.metrics-bar-chart {
+    height: 300px;
+    width: 100%;
+    position: relative;
+    /* Allow tooltip to overflow if necessary, but chart usually clips */
+}

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

@@ -24,5 +24,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    width: 50%;
+    margin: 0 auto;
     margin-top: -0.5em;
+    fill: none;
+}
+.result-grid-charts text {
+    fill: #fff;
 }

desktop-app/src/styles/utility-classes.css

@@ -83,3 +83,6 @@
 .dark\:bg-surface-300\/90 {
     background-color: rgba(48, 48, 48, 0.9);
 }
+.fill-transparent {
+    fill: transparent;
+}