feat: allow toggling vibrant color for all charts

- supports new config key `app.vibrant_color` or env `WAKAPI_VIBRANT_COLOR`
- updates and extends `data/colors.json` with editor and os colors
- fixes #343

config.default.yml

@@ -17,6 +17,7 @@ app:
   inactive_days: 7                    # time of previous days within a user must have logged in to be considered active
   import_batch_size: 50               # maximum number of heartbeats to insert into the database within one transaction
   heartbeat_max_age: '4320h'          # maximum acceptable age of a heartbeat (see https://pkg.go.dev/time#ParseDuration)
+  vibrant_color: false                # whether to enable vibrant colors for all charts in summary page
   custom_languages:
     vue: Vue
     jsx: JSX
@@ -72,4 +73,4 @@ mail:
     client_id:
     client_secret:
 
-quick_start: false                  # whether to skip initial tasks on application startup, like summary generation
+quick_start: false                  # whether to skip initial tasks on application startup, like summary generation

config/config.go

@@ -71,6 +71,7 @@ type appConfig struct {
 	HeartbeatMaxAge   string                       `yaml:"heartbeat_max_age" default:"4320h" env:"WAKAPI_HEARTBEAT_MAX_AGE"`
 	CountCacheTTLMin  int                          `yaml:"count_cache_ttl_min" default:"30" env:"WAKAPI_COUNT_CACHE_TTL_MIN"`
 	AvatarURLTemplate string                       `yaml:"avatar_url_template" default:"api/avatar/{username_hash}.svg"`
+	VibrantColor      bool                         `yaml:"vibrant_color" default:"false" env:"WAKAPI_VIBRANT_COLOR"`
 	CustomLanguages   map[string]string            `yaml:"custom_languages"`
 	Colors            map[string]map[string]string `yaml:"-"`
 }

data/colors.json

@@ -2,246 +2,417 @@
   "languages": {
     "1C Enterprise": "#814CCC",
     "ABAP": "#E8274B",
-    "ActionScript": "#882B0F",
-    "Ada": "#02f88c",
-    "Agda": "#315665",
     "AGS Script": "#B9D9FF",
-    "Alloy": "#64C800",
+    "AL": "#3AA2B5",
     "AMPL": "#E6EFBB",
-    "AngelScript": "#C7D7DC",
     "ANTLR": "#9DC3FF",
     "API Blueprint": "#2ACCA8",
-    "APL": "#5A8164",
+    "APL": "#8a0707",
-    "AppleScript": "#101F1F",
+    "ASP.NET": "#9400ff",
-    "Arc": "#aa2afe",
-    "ASP": "#6a40fd",
-    "AspectJ": "#a957b0",
-    "Assembly": "#6E4C13",
-    "Asymptote": "#4a0c0c",
     "ATS": "#1ac620",
+    "ActionScript": "#e3491a",
+    "Ada": "#02f88c",
+    "Agda": "#467C91",
+    "Alloy": "#cc5c24",
+    "AngelScript": "#C7D7DC",
+    "Apex": "#1797c0",
+    "Apollo Guidance Computer": "#0B3D91",
+    "AppleScript": "#101F1F",
+    "Arc": "#ca2afe",
+    "Arduino": "#bd79d1",
+    "AspectJ": "#1957b0",
+    "Assembly": "#6E4C13",
+    "Asymptote": "#ff0000",
+    "Augeas": "#62331f",
     "AutoHotkey": "#6594b9",
-    "AutoIt": "#1C3552",
+    "AutoIt": "#36699B",
     "Ballerina": "#FF5000",
     "Batchfile": "#C1F12E",
+    "Beef": "#a52f4e",
+    "Bison": "#6A463F",
+    "Blade": "#f7523f",
     "BlitzMax": "#cd6400",
     "Boo": "#d4bec1",
+    "Boogie": "#c80fa0",
     "Brainfuck": "#2F2530",
+    "Browserslist": "#ffd539",
     "C": "#555555",
-    "C#": "#178600",
+    "C Sharp": "#178600",
+    "C#": "#5a25a2",
     "C++": "#f34b7d",
+    "CSON": "#244776",
+    "CSS": "#563d7c",
     "Ceylon": "#dfa535",
     "Chapel": "#8dc63f",
-    "Cirru": "#ccccff",
+    "Cirru": "#aaaaff",
     "Clarion": "#db901e",
-    "Clean": "#3F85AF",
+    "Classic ASP": "#6a40fd",
+    "Clean": "#3a81ad",
     "Click": "#E4E6F3",
     "Clojure": "#db5855",
+    "Closure Templates": "#0d948f",
     "CoffeeScript": "#244776",
     "ColdFusion": "#ed2cd6",
+    "ColdFusion CFC": "#ed2cd6",
     "Common Lisp": "#3fb68b",
     "Common Workflow Language": "#B5314C",
-    "Component Pascal": "#B0CE4E",
+    "Component Pascal": "#b0ce4e",
     "Crystal": "#000100",
-    "CSS": "#563d7c",
     "Cuda": "#3A4E3A",
-    "D": "#ba595e",
+    "D": "#fcd46d",
-    "Dart": "#00B4AB",
+    "DM": "#075ff1",
+    "Dafny": "#FFEC25",
+    "Dart": "#98BAD6",
     "DataWeave": "#003a52",
-    "DM": "#447265",
+    "Denizen": "#faf094",
+    "Dhall": "#dfafff",
     "Dockerfile": "#384d54",
-    "Docker": "#384d54",
     "Dogescript": "#cca760",
-    "Dylan": "#6c616e",
+    "Dylan": "#3ebc27",
     "E": "#ccce35",
-    "eC": "#913960",
     "ECL": "#8a1267",
+    "EJS": "#a91e50",
+    "EQ": "#a78649",
+    "Eagle": "#3994bc",
     "Eiffel": "#946d57",
     "Elixir": "#6e4a7e",
     "Elm": "#60B5CC",
     "Emacs Lisp": "#c065db",
-    "EmberScript": "#FFF4F3",
+    "EmberScript": "#f64e3e",
-    "EQ": "#a78649",
+    "Erlang": "#0faf8d",
-    "Erlang": "#B83998",
     "F#": "#b845fc",
     "F*": "#572e30",
+    "FLUX": "#33CCFF",
+    "FORTRAN": "#4d41b1",
     "Factor": "#636746",
     "Fancy": "#7b9db4",
-    "Fantom": "#14253c",
+    "Fantom": "#dbded5",
-    "FLUX": "#88ccff",
+    "Faust": "#c37240",
     "Forth": "#341708",
     "Fortran": "#4d41b1",
     "FreeMarker": "#0050b2",
     "Frege": "#00cafe",
-    "Game Maker Language": "#71b417",
+    "Futhark": "#5f021f",
+    "G-code": "#D08CF2",
+    "GAML": "#FFC766",
     "GDScript": "#355570",
+    "Game Maker Language": "#8ad353",
     "Genie": "#fb855d",
     "Gherkin": "#5B2063",
-    "Glyph": "#c1ac7f",
+    "Glyph": "#e4cc98",
     "Gnuplot": "#f0a9f0",
-    "Go": "#00ADD8",
+    "Go": "#375eab",
-    "Golo": "#88562A",
+    "Golo": "#f6a51f",
     "Gosu": "#82937f",
-    "Grammatical Framework": "#79aa7a",
+    "Grammatical Framework": "#ff0000",
+    "GraphQL": "#e10098",
     "Groovy": "#e69f56",
+    "HTML": "#e44b23",
     "Hack": "#878787",
+    "Haml": "#ece2a9",
+    "Handlebars": "#f7931e",
     "Harbour": "#0e60e3",
-    "Haskell": "#5e5086",
+    "Haskell": "#29b544",
-    "Haxe": "#df7900",
+    "Haxe": "#f7941e",
     "HiveQL": "#dce200",
-    "HTML": "#e34c26",
+    "HolyC": "#ffefaf",
-    "Hy": "#7790B2",
+    "Hy": "#7891b1",
-    "IDL": "#a3522f",
+    "IDL": "#e3592c",
+    "IGOR Pro": "#0000cc",
     "Idris": "#b30000",
+    "ImageJ Macro": "#99AAFF",
     "Io": "#a9188d",
     "Ioke": "#078193",
-    "Isabelle": "#FEFE00",
+    "Isabelle": "#fdcd00",
     "J": "#9EEDFF",
+    "JFlex": "#DBCA00",
+    "JSONiq": "#40d47e",
     "Java": "#b07219",
     "JavaScript": "#f1e05a",
     "Jolie": "#843179",
-    "JSONiq": "#40d47e",
     "Jsonnet": "#0064bd",
     "Julia": "#a270ba",
     "Jupyter Notebook": "#DA5B0B",
+    "KRL": "#f5c800",
+    "Kaitai Struct": "#773b37",
     "Kotlin": "#F18E33",
-    "KRL": "#28430A",
+    "LFE": "#004200",
-    "Lasso": "#999999",
-    "Lex": "#DBCA00",
-    "LFE": "#4C3023",
-    "LiveScript": "#499886",
     "LLVM": "#185619",
     "LOLCODE": "#cc9900",
-    "LookML": "#652B81",
     "LSL": "#3d9970",
-    "Lua": "#000080",
+    "Lark": "#0b130f",
-    "Makefile": "#427819",
+    "Lasso": "#2584c3",
-    "Mask": "#f97732",
+    "Latte": "#A8FF97",
+    "Less": "#1d365d",
+    "Lex": "#DBCA00",
+    "Liquid": "#67b8de",
+    "LiveScript": "#499886",
+    "LookML": "#652B81",
+    "Lua": "#fa1fa1",
     "MATLAB": "#e16737",
-    "Max": "#c4a79c",
     "MAXScript": "#00a6a6",
-    "mcfunction": "#E22837",
+    "MLIR": "#5EC8DB",
-    "Mercury": "#ff2b2b",
+    "MQL4": "#62A8D6",
+    "MQL5": "#4A76B8",
+    "MTML": "#0095d9",
+    "Macaulay2": "#d8ffff",
+    "Makefile": "#427819",
+    "Markdown": "#083fa1",
+    "Marko": "#42bff2",
+    "Mask": "#f97732",
+    "Matlab": "#bb92ac",
+    "Max": "#ce279c",
+    "Mercury": "#abcdef",
     "Meson": "#007800",
     "Metal": "#8f14e9",
     "Mirah": "#c7a938",
     "Modula-3": "#223388",
-    "MQL4": "#62A8D6",
+    "Mustache": "#724b3b",
-    "MQL5": "#4A76B8",
-    "MTML": "#b7e1f4",
     "NCL": "#28431f",
+    "NWScript": "#111522",
     "Nearley": "#990000",
-    "Nemerle": "#3d3c6e",
+    "Nemerle": "#0d3c6e",
-    "nesC": "#94B0C7",
     "NetLinx": "#0aa0ff",
     "NetLinx+ERB": "#747faa",
-    "NetLogo": "#ff6375",
+    "NetLogo": "#ff2b2b",
-    "NewLisp": "#87AED7",
+    "NewLisp": "#eedd66",
     "Nextflow": "#3ac486",
-    "Nim": "#37775b",
+    "Nim": "#ffc200",
-    "Nit": "#009917",
+    "Nimrod": "#37775b",
-    "Nix": "#7e7eff",
+    "Nit": "#0d8921",
+    "Nix": "#7070ff",
     "Nu": "#c9df40",
-    "Objective-C": "#438eff",
+    "NumPy": "#9C8AF9",
-    "Objective-C++": "#6866fb",
+    "Nunjucks": "#3d8137",
-    "Objective-J": "#ff0c5a",
     "OCaml": "#3be133",
+    "ObjectScript": "#424893",
+    "Objective-C": "#438eff",
+    "Objective-C++": "#4886FC",
+    "Objective-J": "#ff0c5a",
+    "Odin": "#60AFFE",
     "Omgrofl": "#cabbff",
-    "ooc": "#b0b77e",
     "Opal": "#f7ede0",
-    "Oxygene": "#cdd0e3",
+    "OpenQASM": "#AA70FF",
-    "Oz": "#fab738",
+    "Org": "#77aa99",
+    "Oxygene": "#5a63a3",
+    "Oz": "#fcaf3e",
     "P4": "#7055b5",
+    "PAWN": "#dbb284",
+    "PHP": "#4F5D95",
+    "PLSQL": "#dad8d8",
     "Pan": "#cc0000",
     "Papyrus": "#6600cc",
     "Parrot": "#f3ca0a",
-    "Pascal": "#E3F171",
+    "Pascal": "#b0ce4e",
     "Pawn": "#dbb284",
     "Pep8": "#C76F5B",
     "Perl": "#0298c3",
-    "Perl 6": "#0000fb",
+    "Perl6": "#0298c3",
-    "PHP": "#4F5D95",
     "PigLatin": "#fcd7de",
-    "Pike": "#005390",
+    "Pike": "#066ab2",
-    "PLSQL": "#dad8d8",
     "PogoScript": "#d80074",
     "PostScript": "#da291c",
     "PowerBuilder": "#8f0f8d",
     "PowerShell": "#012456",
-    "Processing": "#0096D8",
+    "Prisma": "#0c344b",
+    "Processing": "#2779ab",
     "Prolog": "#74283c",
-    "Propeller Spin": "#7fa2a7",
+    "Propeller Spin": "#2b446d",
-    "Puppet": "#302B6D",
+    "Pug": "#a86454",
+    "Puppet": "#cc5555",
+    "Pure Data": "#91de79",
     "PureBasic": "#5a6986",
-    "PureScript": "#1D222D",
+    "PureScript": "#bcdc53",
-    "Python": "#3572A5",
+    "Python": "#3581ba",
-    "q": "#0040cd",
+    "Q#": "#fed659",
     "QML": "#44a51c",
+    "Qt Script": "#00b841",
     "Quake": "#882233",
-    "R": "#198CE7",
+    "R": "#198ce7",
-    "Racket": "#3c5caa",
-    "Ragel": "#9d5200",
     "RAML": "#77d9fb",
+    "RUNOFF": "#665a4e",
+    "Racket": "#ae17ff",
+    "Ragel": "#9d5200",
+    "Ragel in Ruby Host": "#ff9c2e",
+    "Raku": "#0000fb",
     "Rascal": "#fffaa0",
+    "ReScript": "#ed5051",
+    "Reason": "#ff5847",
     "Rebol": "#358a5b",
-    "Red": "#f50000",
+    "Record Jar": "#0673ba",
+    "Red": "#ee0000",
     "Ren'Py": "#ff7f7f",
     "Ring": "#2D54CB",
+    "Riot": "#A71E49",
     "Roff": "#ecdebe",
     "Rouge": "#cc0088",
     "Ruby": "#701516",
-    "RUNOFF": "#665a4e",
     "Rust": "#dea584",
+    "SAS": "#1E90FF",
+    "SCSS": "#c6538c",
+    "SQF": "#FFCB1F",
+    "SRecode Template": "#348a34",
+    "SVG": "#ff9900",
     "SaltStack": "#646464",
-    "SAS": "#B34936",
+    "Sass": "#a53b70",
-    "Scala": "#c22d40",
+    "Scala": "#7dd3b0",
+    "Scaml": "#bd181a",
     "Scheme": "#1e4aec",
-    "sed": "#64b970",
     "Self": "#0579aa",
-    "Shell": "#89e051",
+    "Shell": "#5861ce",
     "Shen": "#120F14",
     "Slash": "#007eff",
     "Slice": "#003fa2",
+    "Slim": "#ff8877",
+    "SmPL": "#c94949",
     "Smalltalk": "#596706",
     "Solidity": "#AA6746",
-    "SourcePawn": "#5c7611",
+    "SourcePawn": "#f69e1d",
-    "SQF": "#3F3F3F",
     "Squirrel": "#800000",
-    "SRecode Template": "#348a34",
     "Stan": "#b2011d",
     "Standard ML": "#dc566d",
+    "Starlark": "#76d275",
+    "Stylus": "#ff6347",
     "SuperCollider": "#46390b",
     "Svelte": "#ff3e00",
     "Swift": "#ffac45",
-    "SystemVerilog": "#DAE1C2",
+    "SystemVerilog": "#343761",
-    "Tcl": "#e4cc98",
-    "Terra": "#00004c",
-    "TeX": "#3D6117",
     "TI Program": "#A0AA87",
-    "Turing": "#cf142b",
+    "Tcl": "#e4cc98",
-    "TypeScript": "#2b7489",
+    "TeX": "#3D6117",
+    "Terra": "#00004c",
+    "Turing": "#45f715",
+    "Twig": "#c1d026",
+    "TypeScript": "#31859c",
+    "Unified Parallel C": "#755223",
+    "Uno": "#9933cc",
     "UnrealScript": "#a54c4d",
-    "Vala": "#fbe5cd",
+    "V": "#4f87c4",
-    "VCL": "#148AA8",
+    "VBA": "#867db1",
-    "Verilog": "#b2b7f8",
+    "VBScript": "#15dcdc",
-    "VHDL": "#adb2cb",
+    "VCL": "#0298c3",
+    "VHDL": "#543978",
+    "Vala": "#ee7d06",
+    "Verilog": "#848bf3",
     "Vim script": "#199f4b",
+    "VimL": "#199c4b",
     "Visual Basic": "#945db7",
-    "Volt": "#1F1F1F",
+    "Visual Basic .NET": "#945db7",
+    "Volt": "#0098db",
     "Vue": "#2c3e50",
-    "wdl": "#42f1f4",
+    "Web Ontology Language": "#3994bc",
     "WebAssembly": "#04133b",
-    "wisp": "#7582D1",
+    "Wollok": "#a23738",
     "X10": "#4B6BEF",
-    "xBase": "#403a40",
     "XC": "#99DA07",
-    "XQuery": "#5232e7",
+    "XQuery": "#2700e2",
     "XSLT": "#EB8CEB",
-    "Yacc": "#4B6C4B",
+    "YAML": "#cb171e",
     "YARA": "#220000",
     "YASnippet": "#32AB90",
+    "Yacc": "#4B6C4B",
     "ZAP": "#0d665e",
+    "ZIL": "#dc75e5",
+    "ZenScript": "#00BCD1",
     "Zephir": "#118f9e",
     "Zig": "#ec915c",
-    "ZIL": "#dc75e5"
+    "cpp": "#f34b7d",
+    "eC": "#913960",
+    "edn": "#db5855",
+    "mIRC Script": "#3d57c3",
+    "mcfunction": "#E22837",
+    "nesC": "#ffce3b",
+    "ooc": "#b0b77e",
+    "q": "#0040cd",
+    "sed": "#64b970",
+    "wdl": "#42f1f4",
+    "wisp": "#7582D1",
+    "xBase": "#3a4040",
+    "Other": "#1f9aef"
+  },
+  "editors": {
+    "Adobe XD": "#fd27bc",
+    "Android Studio": "#99cd00",
+    "AppCode": "#04dbde",
+    "Aptana": "#ec8623",
+    "Atom": "#49b77e",
+    "Azure Data Studio": "#0271c6",
+    "Blender": "#fb8007",
+    "BlueJ": "#5d89af",
+    "Brackets": "#067dc3",
+    "Chrome": "#fdd308",
+    "CLion": "#14c9a5",
+    "Cloud9": "#25a6d9",
+    "Coda": "#3e8e1c",
+    "Code: :Blocks": "#d0ce71",
+    "Code::Blocks": "#d0ce71",
+    "CodeLite": "#1892e5",
+    "CodeTasty": "#7368a8",
+    "DataGrip": "#907cf2",
+    "DBeaver": "#897363",
+    "Eclipse": "#443582",
+    "Emacs": "#8c76c3",
+    "Embarcadero Delphi": "#d9242a",
+    "EmEditor": "#ed3103",
+    "Eric": "#423f13",
+    "Excel": "#0f753c",
+    "Figma": "#c7b9ff",
+    "Firefox": "#d96527",
+    "Flash Builder": "#aca3a4",
+    "Geany": "#fbec75",
+    "Gedit": "#872114",
+    "GoLand": "#bd4ffc",
+    "HBuilder X": "#1ba334",
+    "IntelliJ IDEA": "#2876e1",
+    "IntelliJ": "#2876e1",
+    "Kakoune": "#dd5f4a",
+    "Kate": "#3f4040",
+    "KDevelop": "#22a273",
+    "Komodo": "#fcb414",
+    "Light Table": "#007ac1",
+    "MacRabbit Espresso": "#e6593f",
+    "Micro": "#2c3494",
+    "MonoDevelop": "#6185b3",
+    "MySQL Workbench": "#245279",
+    "Neovim": "#068304",
+    "NetBeans": "#f1f6e2",
+    "Notepad++": "#9ecf54",
+    "Nova": "#ff054a",
+    "Onivim": "#ee848e",
+    "Photoshop": "#0a0054",
+    "PhpStorm": "#d93ac1",
+    "PowerPoint": "#c6421f",
+    "Processing": "#6a7152",
+    "PyCharm": "#d2ee5c",
+    "Pymakr": "#323d4f",
+    "QtCreator": "#7fc342",
+    "Rider": "#f7a415",
+    "RStudio": "#2369c7",
+    "RubyMine": "#ff6336",
+    "Sketch": "#fdad00",
+    "SlickEdit": "#57ca57",
+    "Spyder": "#ee181e",
+    "SQL Server Management Studio": "#ffb901",
+    "Sublime Text": "#ff9800",
+    "Terminal": "#133f1c",
+    "TeXstudio": "#652d96",
+    "TextMate": "#822b7a",
+    "Unity": "#222d36",
+    "Vim": "#068304",
+    "Visual Studio": "#9460cd",
+    "VS Code": "#027acd",
+    "VSCode": "#027acd",
+    "WebMatrix": "#aeaeae",
+    "WebStorm": "#00c6d7",
+    "Wing": "#b3b3b3",
+    "Word": "#0f4091",
+    "WPS Office": "#fc6143",
+    "Xamarin": "#3598db",
+    "Xcode": "#3fa7e4"
+  },
+  "operating_systems": {
+    "Linux": "#f0b912",
+    "Windows": "#00b7ee",
+    "Mac": "#4d66cb"
   }
-}
+}

models/view/summary.go

@@ -7,7 +7,10 @@ type SummaryViewModel struct {
 	*models.SummaryParams
 	User           *models.User
 	AvatarURL      string
+	VibrantColor   bool
+	EditorColors   map[string]string
 	LanguageColors map[string]string
+	OSColors       map[string]string
 	Error          string
 	Success        string
 	ApiKey         string

routes/summary.go

@@ -66,7 +66,10 @@ func (h *SummaryHandler) GetIndex(w http.ResponseWriter, r *http.Request) {
 		Summary:        summary,
 		SummaryParams:  summaryParams,
 		User:           user,
+		VibrantColor:   h.config.App.VibrantColor,
+		EditorColors:   utils.FilterColors(h.config.App.GetEditorColors(), summary.Editors),
 		LanguageColors: utils.FilterColors(h.config.App.GetLanguageColors(), summary.Languages),
+		OSColors:       utils.FilterColors(h.config.App.GetOSColors(), summary.OperatingSystems),
 		ApiKey:         user.ApiKey,
 		RawQuery:       rawQuery,
 	}

static/assets/js/summary.js

@@ -97,11 +97,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[0], wakapiData.projects.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.projects.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i % baseColors.length))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.projects.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i % baseColors.length))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                 }],
@@ -152,11 +152,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[1], wakapiData.operatingSystems.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.operatingSystems.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.operatingSystems.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? (osColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                     borderWidth: 0
@@ -189,11 +189,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[2], wakapiData.editors.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.editors.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.editors.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? (editorColors[p.key.toLowerCase()] || getRandomColor(p.key)) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                     borderWidth: 0
@@ -266,11 +266,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[4], wakapiData.machines.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.machines.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.machines.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                     borderWidth: 0
@@ -303,11 +303,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[5], wakapiData.labels.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.labels.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.labels.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                     borderWidth: 0
@@ -340,11 +340,11 @@ function draw(subselection) {
                         .slice(0, Math.min(showTopN[6], wakapiData.branches.length))
                         .map(p => parseInt(p.total)),
                     backgroundColor: wakapiData.branches.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i % baseColors.length))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 1)`
                     }),
                     hoverBackgroundColor: wakapiData.branches.map((p, i) => {
-                        const c = hexToRgb(getColor(p.key, i % baseColors.length))
+                        const c = hexToRgb(vibrantColor ? getRandomColor(p.key) : getColor(p.key, i % baseColors.length))
                         return `rgba(${c.r}, ${c.g}, ${c.b}, 0.8)`
                     }),
                 }],
@@ -455,4 +455,3 @@ window.addEventListener('load', function () {
     togglePlaceholders(getPresentDataMask())
     draw()
 })
-

views/summary.tpl.html

@@ -209,7 +209,10 @@
 {{ template "foot.tpl.html" . }}
 
 <script>
+    const vibrantColor = {{ .VibrantColor }}
+    const editorColors = {{ .EditorColors | json }}
     const languageColors = {{ .LanguageColors | json }}
+    const osColors = {{ .OSColors | json }}
 
     const wakapiData = {}
     wakapiData.projects = {{ .Projects | json }}
@@ -228,4 +231,4 @@
 
 </body>
 
-</html>
+</html>