feat(data-warehouse): Add show legend to charts (#27983)

PostHog · Jan 28, 2025 · 331e9db · 331e9db
1 parent 585165b
commit 331e9db
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 3 deletions.
diff --git a/frontend/src/products.ts b/frontend/src/products.ts
@@ -1,4 +1,4 @@
-// Generated by utils.mjs on 2025-01-27 15:49 UTC, based on product folders
+// Generated by utils.mjs on 2025-01-28 18:13 UTC, based on product folders
 
 /** This const is auto-generated, as is the whole file */
 export const productScenes: Record<string, any> = {

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx b/frontend/src/queries/nodes/DataVisualization/Components/Charts/LineGraph.tsx
@@ -137,7 +137,7 @@ export const LineGraph = (): JSX.Element => {
 
         const data: ChartData = {
             labels: xSeriesData.data,
-            datasets: ySeriesData.map(({ data, settings }, index) => {
+            datasets: ySeriesData.map(({ data, settings, ...rest }, index) => {
                 const color = settings?.display?.color ?? getSeriesColor(index)
                 const backgroundColor = isAreaChart ? hexToRGBA(color, 0.5) : color
 
@@ -151,8 +151,17 @@ export const LineGraph = (): JSX.Element => {
                     yAxisID = 'yRight'
                 }
 
+                const getLabel = (): string => {
+                    if ('name' in rest) {
+                        return rest.name
+                    }
+
+                    return rest.column.name
+                }
+
                 return {
                     data,
+                    label: getLabel(),
                     borderColor: color,
                     backgroundColor: backgroundColor,
                     borderWidth: graphType === GraphType.Bar ? 0 : 2,
@@ -286,7 +295,7 @@ export const LineGraph = (): JSX.Element => {
                     borderColor: 'white',
                 },
                 legend: {
-                    display: false,
+                    display: chartSettings.showLegend ?? false,
                 },
                 annotation: annotations,
                 ...(isBarChart

diff --git a/frontend/src/queries/nodes/DataVisualization/Components/DisplayTab.tsx b/frontend/src/queries/nodes/DataVisualization/Components/DisplayTab.tsx
@@ -18,6 +18,17 @@ export const DisplayTab = (): JSX.Element => {
 
     return (
         <div className="flex flex-col w-full">
+            <div className="mt-1 mb-2 flex flex-col">
+                <LemonSwitch
+                    className="flex-1 mb-3 w-full"
+                    label="Show legend"
+                    checked={chartSettings.showLegend ?? false}
+                    onChange={(value) => {
+                        updateChartSettings({ showLegend: value })
+                    }}
+                />
+            </div>
+
             <div className="mt-1 mb-2 flex flex-col">
                 <h3>Left Y-axis</h3>
                 <LemonField.Pure label="Scale" className="gap-0 mb-3">

diff --git a/frontend/src/queries/schema.json b/frontend/src/queries/schema.json
@@ -4103,6 +4103,9 @@
                 "seriesBreakdownColumn": {
                     "type": ["string", "null"]
                 },
+                "showLegend": {
+                    "type": "boolean"
+                },
                 "stackBars100": {
                     "description": "Whether we fill the bars to 100% in stacked mode",
                     "type": "boolean"

diff --git a/frontend/src/queries/schema/schema-general.ts b/frontend/src/queries/schema/schema-general.ts
@@ -722,6 +722,7 @@ export interface ChartSettings {
     /** Whether we fill the bars to 100% in stacked mode */
     stackBars100?: boolean
     seriesBreakdownColumn?: string | null
+    showLegend?: boolean
 }
 
 export interface ConditionalFormattingRule {

diff --git a/posthog/schema.py b/posthog/schema.py
@@ -1949,6 +1949,7 @@ class ChartSettings(BaseModel):
     leftYAxisSettings: Optional[YAxisSettings] = None
     rightYAxisSettings: Optional[YAxisSettings] = None
     seriesBreakdownColumn: Optional[str] = None
+    showLegend: Optional[bool] = None
     stackBars100: Optional[bool] = Field(default=None, description="Whether we fill the bars to 100% in stacked mode")
     xAxis: Optional[ChartAxis] = None
     yAxis: Optional[list[ChartAxis]] = None