feat: make vibrantColors a localStorage setting

README.md

@@ -144,7 +144,6 @@ You can specify configuration options either via a config file (default: `config
 | `app.import_batch_size` /<br>`WAKAPI_IMPORT_BATCH_SIZE`                      | `50`                                             | Size of batches of heartbeats to insert to the database during importing from external services                                                                          |
 | `app.inactive_days` /<br>`WAKAPI_INACTIVE_DAYS`                              | `7`                                              | Number of days after which to consider a user inactive (only for metrics)                                                                                                |
 | `app.heartbeat_max_age /`<br>`WAKAPI_HEARTBEAT_MAX_AGE`                      | `4320h`                                          | Maximum acceptable age of a heartbeat (see [`ParseDuration`](https://pkg.go.dev/time#ParseDuration))                                                                     |
-| `app.vibrant_color` /<br> `WAKAPI_VIBRANT_COLOR`                             | `false`                                          | whether to enable vibrant colors for all charts in summary page                                                                                                          |
 | `app.custom_languages`                                                       | -                                                | Map from file endings to language names                                                                                                                                  |
 | `app.avatar_url_template`                                                    | (see [`config.default.yml`](config.default.yml)) | URL template for external user avatar images (e.g. from [Dicebear](https://dicebear.com) or [Gravatar](https://gravatar.com))                                            |
 | `server.port` /<br> `WAKAPI_PORT`                                            | `3000`                                           | Port to listen on                                                                                                                                                        |

config.default.yml

@@ -17,7 +17,6 @@ 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

config/config.go

@@ -71,7 +71,6 @@ 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:"-"`
 }

models/view/summary.go

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

routes/summary.go

@@ -66,7 +66,6 @@ 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),

static/assets/js/components/settings.js

@@ -2,6 +2,7 @@ PetiteVue.createApp({
     //$delimiters: ['${', '}'],  // https://github.com/vuejs/petite-vue/pull/100
     activeTab: defaultTab,
     selectedTimezone: userTimeZone,
+    vibrantColorEnabled: JSON.parse(localStorage.getItem('vibrant-color') || false),
     get tzOptions() {
         return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))]
     },
@@ -31,8 +32,15 @@ PetiteVue.createApp({
             document.querySelector('#form-delete-user').submit()
         }
     },
+    toggleVibrantColor() {
+        let key = 'vibrant-color';
+        let value = !(JSON.parse(localStorage.getItem(key) || false));
+        localStorage.setItem(key, value);
+        this.vibrantColorEnabled = value;
+        return value;
+    },
     mounted() {
         this.updateTab()
         window.addEventListener('hashchange', () => this.updateTab())
     }
-}).mount('#settings-page')
+}).mount('#settings-page')

static/assets/js/summary.js

@@ -87,6 +87,8 @@ function draw(subselection) {
         .filter((c, i) => shouldUpdate(i))
         .forEach(c => c.destroy())
 
+    let vibrantColor = JSON.parse(window.localStorage.getItem('vibrant-color') || false);
+
     let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
         ? new Chart(projectsCanvas.getContext('2d'), {
             //type: 'horizontalBar',

views/settings.tpl.html

@@ -354,6 +354,26 @@
                     </div>
                 </div>
             </div>
+
+            <div class="w-full">
+                <hr class="border-t border-gray-800 my-4">
+            </div>
+
+            <!-- Colors -->
+            <div class="w-full">
+                <div class="flex flex-wrap md:flex-nowrap mb-8 gap-x-4">
+                    <div class="w-full md:w-1/3 mb-4 md:mb-0 inline-block">
+                        <span class="font-semibold text-gray-300 text-lg">Vibrant Colors</span>
+                        <p class="block text-sm text-gray-600">You can view the entire summary in vibrant colors similar to the "Languages" chart. Note that this setting is saved in your web browser only.</p>
+                    </div>
+
+                    <div class="w-full md:w-2/3 inline-block">
+                        <div class="flex-col items-center w-full text-gray-500 text-sm">
+                            <input class="flex cursor-pointer h-4 w-4" type="checkbox" id="vibrant-color-toggle" @click="toggleVibrantColor" v-model="vibrantColorEnabled">
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div v-cloak id="permissions" class="tab flex flex-col space-y-4" v-if="isActive('permissions')">
@@ -666,4 +686,3 @@
 </body>
 
 </html>
-

views/summary.tpl.html

@@ -209,7 +209,6 @@
 {{ template "foot.tpl.html" . }}
 
 <script>
-    const vibrantColor = {{ .VibrantColor }}
     const editorColors = {{ .EditorColors | json }}
     const languageColors = {{ .LanguageColors | json }}
     const osColors = {{ .OSColors | json }}