feat(insights): allow customizing result colors with data color themes

frontend/src/exporter/ExportedInsight/ExportedInsight.tsx

@@ -1,14 +1,15 @@
 import './ExportedInsight.scss'
 
 import clsx from 'clsx'
-import { BindLogic } from 'kea'
+import { BindLogic, useMountedLogic } from 'kea'
 import { TopHeading } from 'lib/components/Cards/InsightCard/TopHeading'
 import { InsightLegend } from 'lib/components/InsightLegend/InsightLegend'
 import {
     DISPLAY_TYPES_WITHOUT_DETAILED_RESULTS,
     DISPLAY_TYPES_WITHOUT_LEGEND,
 } from 'lib/components/InsightLegend/utils'
 import { SINGLE_SERIES_DISPLAY_TYPES } from 'lib/constants'
+import { dataThemeLogic } from 'scenes/dataThemeLogic'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { InsightsTable } from 'scenes/insights/views/InsightsTable/InsightsTable'
 
@@ -17,15 +18,19 @@ import { getQueryBasedInsightModel } from '~/queries/nodes/InsightViz/utils'
 import { Query } from '~/queries/Query/Query'
 import { isDataTableNode, isInsightVizNode, isTrendsQuery } from '~/queries/utils'
 import { Logo } from '~/toolbar/assets/Logo'
-import { ChartDisplayType, InsightLogicProps, InsightModel } from '~/types'
+import { ChartDisplayType, DataColorThemeModel, InsightLogicProps, InsightModel } from '~/types'
 
 export function ExportedInsight({
     insight: legacyInsight,
+    themes,
     exportOptions: { whitelabel, noHeader, legend, detailed: detailedResults },
 }: {
     insight: InsightModel
+    themes: DataColorThemeModel[]
     exportOptions: ExportOptions
 }): JSX.Element {
+    useMountedLogic(dataThemeLogic({ themes }))
+
     const insight = getQueryBasedInsightModel(legacyInsight)
 
     if (

frontend/src/exporter/Exporter.tsx

@@ -23,7 +23,7 @@ import { exporterViewLogic } from './exporterViewLogic'
 export function Exporter(props: ExportedData): JSX.Element {
     // NOTE: Mounting the logic is important as it is used by sub-logics
     const { exportedData } = useValues(exporterViewLogic(props))
-    const { type, dashboard, insight, recording, accessToken, ...exportOptions } = exportedData
+    const { type, dashboard, insight, recording, themes, accessToken, ...exportOptions } = exportedData
     const { whitelabel, showInspector = false } = exportOptions
 
     const { currentTeam } = useValues(teamLogic)
@@ -75,12 +75,13 @@ export function Exporter(props: ExportedData): JSX.Element {
                 ) : null
             ) : null}
             {insight ? (
-                <ExportedInsight insight={insight} exportOptions={exportOptions} />
+                <ExportedInsight insight={insight} themes={themes!} exportOptions={exportOptions} />
             ) : dashboard ? (
                 <Dashboard
                     id={String(dashboard.id)}
                     dashboard={getQueryBasedDashboard(dashboard)!}
                     placement={type === ExportType.Image ? DashboardPlacement.Export : DashboardPlacement.Public}
+                    themes={themes}
                 />
             ) : recording ? (
                 <SessionRecordingPlayer

frontend/src/exporter/types.ts

@@ -1,4 +1,4 @@
-import { DashboardType, InsightModel, SessionRecordingType } from '~/types'
+import { DashboardType, DataColorThemeModel, InsightModel, SessionRecordingType } from '~/types'
 
 export enum ExportType {
     Image = 'image',
@@ -20,5 +20,6 @@ export interface ExportedData extends ExportOptions {
     type: ExportType
     dashboard?: DashboardType
     insight?: InsightModel
+    themes?: DataColorThemeModel[]
     recording?: SessionRecordingType
 }

frontend/src/lib/api.mock.ts

@@ -3,6 +3,7 @@ import { dayjs } from 'lib/dayjs'
 
 import {
     CohortType,
+    DataColorThemeModel,
     FilterLogicalOperator,
     GroupType,
     OrganizationInviteType,
@@ -276,3 +277,28 @@ export const MOCK_DEFAULT_PLUGIN_CONFIG: PluginConfigWithPluginInfo = {
     created_at: '2020-12-01T14:00:00.000Z',
     plugin_info: MOCK_DEFAULT_PLUGIN,
 }
+
+export const MOCK_DATA_COLOR_THEMES: DataColorThemeModel[] = [
+    {
+        id: 1,
+        name: 'Default Theme',
+        colors: [
+            '#1d4aff',
+            '#621da6',
+            '#42827e',
+            '#ce0e74',
+            '#f14f58',
+            '#7c440e',
+            '#529a0a',
+            '#0476fb',
+            '#fe729e',
+            '#35416b',
+            '#41cbc4',
+            '#b64b02',
+            '#e4a604',
+            '#a56eff',
+            '#30d5c8',
+        ],
+        is_global: true,
+    },
+]

frontend/src/lib/api.ts

@@ -37,6 +37,7 @@ import {
     DashboardTemplateListParams,
     DashboardTemplateType,
     DashboardType,
+    DataColorThemeModel,
     DataWarehouseSavedQuery,
     DataWarehouseTable,
     DataWarehouseViewLink,
@@ -944,6 +945,15 @@ class ApiRequest {
     public async delete(): Promise<any> {
         return await api.delete(this.assembleFullUrl())
     }
+
+    // Data color themes
+    public dataColorThemes(teamId?: TeamType['id']): ApiRequest {
+        return this.environmentsDetail(teamId).addPathComponent('data_color_themes')
+    }
+
+    public dataColorTheme(id: DataColorThemeModel['id'], teamId?: TeamType['id']): ApiRequest {
+        return this.environmentsDetail(teamId).addPathComponent('data_color_themes').addPathComponent(id)
+    }
 }
 
 const normalizeUrl = (url: string): string => {
@@ -2520,6 +2530,18 @@ const api = {
         },
     },
 
+    dataColorThemes: {
+        async list(): Promise<DataColorThemeModel[]> {
+            return await new ApiRequest().dataColorThemes().get()
+        },
+        async create(data: Partial<DataColorThemeModel>): Promise<DataColorThemeModel> {
+            return await new ApiRequest().dataColorThemes().create({ data })
+        },
+        async update(id: DataColorThemeModel['id'], data: Partial<DataColorThemeModel>): Promise<DataColorThemeModel> {
+            return await new ApiRequest().dataColorTheme(id).update({ data })
+        },
+    },
+
     queryURL: (): string => {
         return new ApiRequest().query().assembleFullUrl(true)
     },

frontend/src/lib/colors.ts

@@ -4,39 +4,49 @@ import { LifecycleToggle } from '~/types'
 
 import { LemonTagType } from './lemon-ui/LemonTag'
 
-/** --brand-blue in HSL for saturation mixing */
-export const BRAND_BLUE_HSL: [number, number, number] = [228, 100, 56]
-export const PURPLE: [number, number, number] = [260, 88, 71]
+/*
+ * Data colors.
+ */
 
-/* Insight series colors. */
+/** CSS variable names for the default posthog theme data colors. */
 const dataColorVars = [
-    'color-1',
-    'color-2',
-    'color-3',
-    'color-4',
-    'color-5',
-    'color-6',
-    'color-7',
-    'color-8',
-    'color-9',
-    'color-10',
-    'color-11',
-    'color-12',
-    'color-13',
-    'color-14',
-    'color-15',
-]
+    'data-color-1',
+    'data-color-2',
+    'data-color-3',
+    'data-color-4',
+    'data-color-5',
+    'data-color-6',
+    'data-color-7',
+    'data-color-8',
+    'data-color-9',
+    'data-color-10',
+    'data-color-11',
+    'data-color-12',
+    'data-color-13',
+    'data-color-14',
+    'data-color-15',
+] as const
 
-export const tagColors: LemonTagType[] = [
-    'primary',
-    'highlight',
-    'warning',
-    'danger',
-    'success',
-    'completion',
-    'caution',
-    'option',
-]
+export type DataColorToken =
+    | 'preset-1'
+    | 'preset-2'
+    | 'preset-3'
+    | 'preset-4'
+    | 'preset-5'
+    | 'preset-6'
+    | 'preset-7'
+    | 'preset-8'
+    | 'preset-9'
+    | 'preset-10'
+    | 'preset-11'
+    | 'preset-12'
+    | 'preset-13'
+    | 'preset-14'
+    | 'preset-15'
+
+export type DataColorTheme = Partial<Record<DataColorToken, string>> & {
+    [key: `preset-${number}`]: string
+}
 
 export function getColorVar(variable: string): string {
     const colorValue = getComputedStyle(document.body).getPropertyValue('--' + variable)
@@ -48,6 +58,10 @@ export function getColorVar(variable: string): string {
     return colorValue.trim()
 }
 
+export function getDataThemeColor(theme: DataColorTheme, color: DataColorToken): string {
+    return theme[color] as string
+}
+
 /** Returns the color for the given series index.
  *
  * The returned colors are in hex format for compatibility with Chart.js. They repeat
@@ -57,12 +71,12 @@ export function getColorVar(variable: string): string {
  */
 export function getSeriesColor(index: number = 0): string {
     const adjustedIndex = index % dataColorVars.length
-    return getColorVar(`data-${dataColorVars[adjustedIndex]}`)
+    return getColorVar(dataColorVars[adjustedIndex])
 }
 
 /** Returns all color options for series */
 export function getSeriesColorPalette(): string[] {
-    return dataColorVars.map((colorVar) => getColorVar(`data-${colorVar}`))
+    return dataColorVars.map((colorVar) => getColorVar(colorVar))
 }
 
 /** Return the background color for the given series index. */
@@ -104,18 +118,17 @@ export function getGraphColors(isDarkModeOn: boolean): Record<string, string | n
     }
 }
 
-/**
- * Gradate color saturation based on its intended strength.
- * This is for visualizations where a data point's color depends on its value.
- * @param hsl The HSL color to gradate.
- * @param strength The strength of the data point.
- * @param floor The minimum saturation. This preserves proportionality of strength, so doesn't just cut it off.
+/*
+ * Tag colors.
  */
-export function gradateColor(
-    hsl: [number, number, number],
-    strength: number,
-    floor: number = 0
-): `hsla(${number}, ${number}%, ${number}%, ${string})` {
-    const saturation = floor + (1 - floor) * strength
-    return `hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, ${saturation.toPrecision(3)})`
-}
+
+export const tagColors: LemonTagType[] = [
+    'primary',
+    'highlight',
+    'warning',
+    'danger',
+    'success',
+    'completion',
+    'caution',
+    'option',
+]

frontend/src/lib/components/InsightLegend/InsightLegend.tsx

@@ -27,9 +27,7 @@ export function InsightLegend({ horizontal, inCardView, readOnly = false }: Insi
         >
             <div className="grid grid-cols-1">
                 {indexedResults &&
-                    indexedResults.map((item, index) => (
-                        <InsightLegendRow key={index} item={item} totalItems={indexedResults.length} rowIndex={index} />
-                    ))}
+                    indexedResults.map((item, index) => <InsightLegendRow key={index} item={item} rowIndex={index} />)}
             </div>
         </div>
     ) : null

frontend/src/lib/components/InsightLegend/InsightLegendRow.tsx

@@ -1,5 +1,5 @@
 import { useActions, useValues } from 'kea'
-import { getSeriesBackgroundColor, getTrendLikeSeriesColor } from 'lib/colors'
+import { getSeriesBackgroundColor } from 'lib/colors'
 import { InsightLabel } from 'lib/components/InsightLabel'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
 import { useEffect, useRef } from 'react'
@@ -19,15 +19,14 @@ import { shouldHighlightThisRow } from './utils'
 type InsightLegendRowProps = {
     rowIndex: number
     item: IndexedTrendResult
-    totalItems: number
 }
 
-export function InsightLegendRow({ rowIndex, item, totalItems }: InsightLegendRowProps): JSX.Element {
+export function InsightLegendRow({ rowIndex, item }: InsightLegendRowProps): JSX.Element {
     const { cohorts } = useValues(cohortsModel)
     const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
 
     const { insightProps, highlightedSeries } = useValues(insightLogic)
-    const { display, trendsFilter, breakdownFilter, isSingleSeries, hiddenLegendIndexes } = useValues(
+    const { display, trendsFilter, breakdownFilter, isSingleSeries, hiddenLegendIndexes, getTrendsColor } = useValues(
         trendsDataLogic(insightProps)
     )
     const { toggleHiddenLegendIndex } = useActions(trendsDataLogic(insightProps))
@@ -54,21 +53,23 @@ export function InsightLegendRow({ rowIndex, item, totalItems }: InsightLegendRo
     )
 
     const isPrevious = !!item.compare && item.compare_label === 'previous'
-    const adjustedIndex = isPrevious ? item.seriesIndex - totalItems / 2 : item.seriesIndex
+
+    const themeColor = getTrendsColor(item)
+    const mainColor = isPrevious ? `${themeColor}80` : themeColor
 
     return (
         <div key={item.id} className="InsightLegendMenu-item p-2 flex flex-row" ref={rowRef} {...highlightStyle}>
             <div className="grow">
                 <LemonCheckbox
                     className="text-xs mr-4"
-                    color={getTrendLikeSeriesColor(adjustedIndex, isPrevious)}
+                    color={mainColor}
                     checked={!hiddenLegendIndexes.includes(rowIndex)}
                     onChange={() => toggleHiddenLegendIndex(rowIndex)}
                     fullWidth
                     label={
                         <InsightLabel
                             key={item.id}
-                            seriesColor={getTrendLikeSeriesColor(adjustedIndex, isPrevious)}
+                            seriesColor={mainColor}
                             action={item.action}
                             fallbackName={item.breakdown_value === '' ? 'None' : item.label}
                             hasMultipleSeries={!isSingleSeries}