feat(insights): add custom data color themes

frontend/src/lib/api.ts

@@ -38,6 +38,7 @@ import {
     DashboardTemplateListParams,
     DashboardTemplateType,
     DashboardType,
+    DataColorThemeModel,
     DataWarehouseSavedQuery,
     DataWarehouseTable,
     DataWarehouseViewLink,
@@ -913,6 +914,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 => {
@@ -2456,6 +2466,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/components/InsightLegend/InsightLegendRow.tsx

@@ -3,10 +3,9 @@ import { getSeriesBackgroundColor } from 'lib/colors'
 import { InsightLabel } from 'lib/components/InsightLabel'
 import { LemonCheckbox } from 'lib/lemon-ui/LemonCheckbox'
 import { useEffect, useRef } from 'react'
-import { dataThemeLogic } from 'scenes/dataThemeLogic'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
 import { insightLogic } from 'scenes/insights/insightLogic'
-import { formatBreakdownLabel, getTrendResultCustomizationColorToken } from 'scenes/insights/utils'
+import { formatBreakdownLabel } from 'scenes/insights/utils'
 import { formatCompareLabel } from 'scenes/insights/views/InsightsTable/columns/SeriesColumn'
 import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
 import { IndexedTrendResult } from 'scenes/trends/types'
@@ -27,19 +26,11 @@ export function InsightLegendRow({ rowIndex, item }: InsightLegendRowProps): JSX
     const { formatPropertyValueForDisplay } = useValues(propertyDefinitionsModel)
 
     const { insightProps, highlightedSeries } = useValues(insightLogic)
-    const {
-        display,
-        trendsFilter,
-        breakdownFilter,
-        isSingleSeries,
-        hiddenLegendIndexes,
-        resultCustomizationBy,
-        resultCustomizations,
-    } = useValues(trendsDataLogic(insightProps))
+    const { display, trendsFilter, breakdownFilter, isSingleSeries, hiddenLegendIndexes, getTrendsColor } = useValues(
+        trendsDataLogic(insightProps)
+    )
     const { toggleHiddenLegendIndex } = useActions(trendsDataLogic(insightProps))
 
-    const { getTheme } = useValues(dataThemeLogic)
-
     const highlighted = shouldHighlightThisRow(rowIndex, highlightedSeries, hiddenLegendIndexes)
     const highlightStyle: Record<string, any> = highlighted
         ? {
@@ -63,11 +54,8 @@ export function InsightLegendRow({ rowIndex, item }: InsightLegendRowProps): JSX
 
     const isPrevious = !!item.compare && item.compare_label === 'previous'
 
-    const theme = getTheme('posthog')
-    const colorToken = getTrendResultCustomizationColorToken(resultCustomizationBy, resultCustomizations, theme, item)
-
-    const themeColor = theme[colorToken]
-    const mainColor = isPrevious ? `${themeColor}80` : themeColor
+    const themeColor = getTrendsColor(item)
+    const mainColor = (isPrevious ? `${themeColor}80` : themeColor) || undefined
 
     return (
         <div key={item.id} className="InsightLegendMenu-item p-2 flex flex-row" ref={rowRef} {...highlightStyle}>

frontend/src/lib/components/SeriesGlyph.tsx

@@ -1,12 +1,13 @@
 import { useValues } from 'kea'
 import { getSeriesColor } from 'lib/colors'
 import { alphabet, hexToRGBA, lightenDarkenColor, RGBToRGBA } from 'lib/utils'
+import { useEffect, useState } from 'react'
 
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 
 interface SeriesGlyphProps {
     className?: string
-    children: React.ReactNode
+    children?: React.ReactNode
     style?: React.CSSProperties
     variant?: 'funnel-step-glyph' // Built-in styling defaults
 }
@@ -20,6 +21,37 @@ export function SeriesGlyph({ className, style, children, variant }: SeriesGlyph
     )
 }
 
+type ColorGlyphProps = {
+    color?: string | null
+} & SeriesGlyphProps
+
+export function ColorGlyph({ color, ...rest }: ColorGlyphProps): JSX.Element {
+    const { isDarkModeOn } = useValues(themeLogic)
+
+    const [lastValidColor, setLastValidColor] = useState<string>('#000000')
+
+    useEffect(() => {
+        // allow only 6-digit hex colors
+        // other color formats are not supported everywhere e.g. insight visualizations
+        if (color != null && /^#[0-9A-Fa-f]{6}$/.test(color)) {
+            setLastValidColor(color)
+        }
+    }, [color])
+
+    return (
+        <SeriesGlyph
+            style={{
+                borderColor: lastValidColor,
+                color: lastValidColor,
+                backgroundColor: isDarkModeOn
+                    ? RGBToRGBA(lightenDarkenColor(lastValidColor, -20), 0.3)
+                    : hexToRGBA(lastValidColor, 0.2),
+            }}
+            {...rest}
+        />
+    )
+}
+
 interface SeriesLetterProps {
     className?: string
     hasBreakdown: boolean

frontend/src/lib/lemon-ui/colors.stories.tsx

@@ -182,6 +182,24 @@ const threeThousand = [
     'primary-alt',
 ]
 
+const dataColors = [
+    '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',
+]
+
 export function ColorPalette(): JSX.Element {
     const [hover, setHover] = useState<string>()
     return (
@@ -278,3 +296,53 @@ export function AllThreeThousandColorOptions(): JSX.Element {
         />
     )
 }
+
+export function DataColors(): JSX.Element {
+    return (
+        <LemonTable
+            dataSource={dataColors.map((color) => ({ name: color, color }))}
+            columns={[
+                {
+                    title: 'Class name',
+                    key: 'name',
+                    dataIndex: 'name',
+                    render: function RenderName(name) {
+                        return name
+                    },
+                },
+                {
+                    title: 'Light mode',
+                    key: 'light',
+                    dataIndex: 'color',
+                    render: function RenderColor(color) {
+                        return (
+                            <div className="bg-bg-3000-light flex items-center justify-center border rounded h-16 w-16">
+                                <div
+                                    className="border rounded h-8 w-8"
+                                    // eslint-disable-next-line react/forbid-dom-props
+                                    style={{ backgroundColor: `var(--${color})` }}
+                                />
+                            </div>
+                        )
+                    },
+                },
+                {
+                    title: 'Dark mode',
+                    key: 'dark',
+                    dataIndex: 'color',
+                    render: function RenderColor(color) {
+                        return (
+                            <div className="bg-bg-3000-dark flex items-center justify-center border rounded h-16 w-16">
+                                <div
+                                    className="border rounded h-8 w-8"
+                                    // eslint-disable-next-line react/forbid-dom-props
+                                    style={{ backgroundColor: `var(--${color})` }}
+                                />
+                            </div>
+                        )
+                    },
+                },
+            ]}
+        />
+    )
+}

frontend/src/queries/nodes/DataVisualization/Components/ColorPickerButton.tsx

@@ -1,7 +1,7 @@
 import { LemonButton, Popover } from '@posthog/lemon-ui'
 import { useValues } from 'kea'
-import { SeriesGlyph } from 'lib/components/SeriesGlyph'
-import { hexToRGBA, lightenDarkenColor, RGBToHex, RGBToRGBA } from 'lib/utils'
+import { ColorGlyph } from 'lib/components/SeriesGlyph'
+import { lightenDarkenColor, RGBToHex } from 'lib/utils'
 import { useState } from 'react'
 import { ColorResult, TwitterPicker } from 'react-color'
 
@@ -57,17 +57,7 @@ export const ColorPickerButton = ({
                 sideIcon={<></>}
                 className="ConditionalFormattingTab__ColorPicker"
             >
-                <SeriesGlyph
-                    style={{
-                        borderColor: color,
-                        color: color,
-                        backgroundColor: isDarkModeOn
-                            ? RGBToRGBA(lightenDarkenColor(color, -20), 0.3)
-                            : hexToRGBA(color, 0.5),
-                    }}
-                >
-                    <></>
-                </SeriesGlyph>
+                <ColorGlyph color={color} />
             </LemonButton>
         </Popover>
     )

frontend/src/queries/nodes/DataVisualization/Components/ConditionalFormatting/ConditionalFormattingTab.tsx

@@ -3,10 +3,8 @@ import './ConditionalFormattingTab.scss'
 import { IconPlusSmall, IconTrash } from '@posthog/icons'
 import { LemonButton, LemonCollapse, LemonInput, LemonSelect, LemonTag } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
-import { SeriesGlyph } from 'lib/components/SeriesGlyph'
-import { hexToRGBA, lightenDarkenColor, RGBToRGBA } from 'lib/utils'
+import { ColorGlyph } from 'lib/components/SeriesGlyph'
 
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { ColorPickerButton } from '~/queries/nodes/DataVisualization/Components/ColorPickerButton'
 import { ConditionalFormattingRule } from '~/queries/schema'
 
@@ -33,7 +31,6 @@ const getRuleHeader = (rule: ConditionalFormattingRule): string => {
 }
 
 export const ConditionalFormattingTab = (): JSX.Element => {
-    const { isDarkModeOn } = useValues(themeLogic)
     const { conditionalFormattingRules, conditionalFormattingRulesPanelActiveKeys } = useValues(dataVisualizationLogic)
     const { addConditionalFormattingRule, setConditionalFormattingRulesPanelActiveKeys } =
         useActions(dataVisualizationLogic)
@@ -53,17 +50,7 @@ export const ConditionalFormattingTab = (): JSX.Element => {
                         key: rule.id,
                         header: (
                             <>
-                                <SeriesGlyph
-                                    style={{
-                                        borderColor: rule.color,
-                                        color: rule.color,
-                                        backgroundColor: isDarkModeOn
-                                            ? RGBToRGBA(lightenDarkenColor(rule.color, -20), 0.3)
-                                            : hexToRGBA(rule.color, 0.2),
-                                    }}
-                                >
-                                    <></>
-                                </SeriesGlyph>
+                                <ColorGlyph color={rule.color} />
                                 <span className="ml-2">{getRuleHeader(rule)}</span>
                             </>
                         ),

frontend/src/queries/nodes/DataVisualization/Components/SeriesTab.tsx

@@ -13,11 +13,8 @@ import {
 import { useActions, useValues } from 'kea'
 import { Form } from 'kea-forms'
 import { getSeriesColor, getSeriesColorPalette } from 'lib/colors'
-import { SeriesGlyph } from 'lib/components/SeriesGlyph'
+import { ColorGlyph } from 'lib/components/SeriesGlyph'
 import { LemonField } from 'lib/lemon-ui/LemonField'
-import { hexToRGBA, lightenDarkenColor, RGBToRGBA } from 'lib/utils'
-
-import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 
 import { AxisSeries, dataVisualizationLogic } from '../dataVisualizationLogic'
 import { ColorPickerButton } from './ColorPickerButton'
@@ -126,7 +123,6 @@ const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number
     const { isSettingsOpen, canOpenSettings, activeSettingsTab } = useValues(seriesLogic)
     const { setSettingsOpen, submitFormatting, submitDisplay, setSettingsTab } = useActions(seriesLogic)
 
-    const { isDarkModeOn } = useValues(themeLogic)
     const seriesColor = series.settings?.display?.color ?? getSeriesColor(index)
     const showSeriesColor = !showTableSettings && !selectedSeriesBreakdownColumn
 
@@ -135,20 +131,7 @@ const YSeries = ({ series, index }: { series: AxisSeries<number>; index: number
         value: name,
         label: (
             <div className="items-center flex flex-1">
-                {showSeriesColor && (
-                    <SeriesGlyph
-                        style={{
-                            borderColor: seriesColor,
-                            color: seriesColor,
-                            backgroundColor: isDarkModeOn
-                                ? RGBToRGBA(lightenDarkenColor(seriesColor, -20), 0.3)
-                                : hexToRGBA(seriesColor, 0.2),
-                        }}
-                        className="mr-2"
-                    >
-                        <></>
-                    </SeriesGlyph>
-                )}
+                {showSeriesColor && <ColorGlyph className="mr-2" color={seriesColor} />}
                 {series.settings?.display?.label && series.column.name === name ? series.settings.display.label : name}
                 <LemonTag className="ml-2" type="default">
                     {type.name}
@@ -399,24 +382,12 @@ export const SeriesBreakdownSelector = (): JSX.Element => {
 }
 
 const BreakdownSeries = ({ series, index }: { series: AxisBreakdownSeries<number>; index: number }): JSX.Element => {
-    const { isDarkModeOn } = useValues(themeLogic)
     const seriesColor = series.settings?.display?.color ?? getSeriesColor(index)
 
     return (
         <div className="flex gap-1 mb-2">
             <div className="flex gap-2">
-                <SeriesGlyph
-                    style={{
-                        borderColor: seriesColor,
-                        color: seriesColor,
-                        backgroundColor: isDarkModeOn
-                            ? RGBToRGBA(lightenDarkenColor(seriesColor, -20), 0.3)
-                            : hexToRGBA(seriesColor, 0.2),
-                    }}
-                    className="mr-2"
-                >
-                    <></>
-                </SeriesGlyph>
+                <ColorGlyph color={seriesColor} className="mr-2" />
                 <span>{series.name ? series.name : '[No value]'}</span>
             </div>
             {/* For now let's keep things simple and not allow too much configuration */}