Split client-side JS into separate file. Tweaks to layout and styling.

Author: jgclark

jgclark.Summaries/plugin.json

@@ -15,7 +15,8 @@
   "plugin.script": "script.js",
   "plugin.requiredFiles": [
     "chart.umd.min.js",
-    "chartStats.css"
+    "chartStats.css",
+    "chartStatsScripts.js"
   ],
   "plugin.isRemote": "false",
   "plugin.commands": [
@@ -525,7 +526,7 @@
       "title": "Colors for Charts",
       "description": "Comma-separated list of colors to use in the charts. Supported color formats are:\n- CSS names (e.g. 'red', 'blue')\n- Tailwind color names (e.g. 'gray-500', 'blue-500')\n- RGB Hex (e.g. '#F00', '#FF0000')\n- RGB decimal (e.g. 'rgba(255 0 0 / 0.7)')\n- HSL (e.g. 'hsl(0 100% 50%)')\n(If this is left blank, the default colors will be used.)",
       "type": "string",
-      "default": "#0a84ff, purple, green, red, yellow, orange, cyan, pink, mint, brown, indigo, rose",
+      "default": "blue, purple, yellow, green, red, orange, cyan, pink, brown, indigo, #ff2d55, grey",
       "required": true
     },
     {

jgclark.Summaries/requiredFiles/chartStats.css

@@ -1,7 +1,7 @@
 /** ----------------------------------------------------------------------------
  * Chart Stats styles - loaded at runtime from requiredFiles/chartStats.css.
  * Originally written by AI prompted by @grdn, then significantly modified by @jgclark.
- * Last updated 2026-01-30 for v1.1.0, @jgclark
+ * Last updated 2026-02-01 for v1.1.0, @jgclark
  * ---------------------------------------------------------------------------- */
 
 * {
@@ -44,29 +44,33 @@ button, input {
   font-weight: 500;
 }
 
-.header {
-  margin-bottom: 24px;
-}
-
 h1 {
   font-size: 1.75rem;
   font-weight: 600;
   letter-spacing: -0.5px;
   color: var(--text-primary);
 }
 
+/* 
+.header {
+  margin-bottom: 24px;
+}
+*/
+
 .section-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 1rem;
 }
 
+/*
 .section-header h2 {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--text-primary);
 }
+*/
 
 .controls-wrapper {
   display: flex;
@@ -169,7 +173,7 @@ h1 {
   gap: 8px;
 }
 
-.tag-checkbox {
+.filter-checkbox {
   width: 1.1rem;
   height: 1.1rem;
   cursor: pointer;
@@ -301,7 +305,7 @@ h1 {
 .charts-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 1rem;
 }
 
 .chart-wrapper {
@@ -334,21 +338,25 @@ h1 {
   height: var(--chart-height, 11rem);
 }
 
+/*
 .yesno-chart-container {
   height: var(--yesno-chart-height, 8rem);
 }
+*/
 
 canvas {
   max-height: 100%;
 }
 
+/*
 .chart-stats {
   display: flex;
   gap: 8px;
   align-items: center;
   font-size: 0.85rem;
   color: var(--text-secondary);
 }
+*/
 
 .stat-separator {
   color: var(--text-secondary);
@@ -357,8 +365,8 @@ canvas {
 
 .section-divider {
   margin: 1.5rem 0;
-  padding-top: 1.5rem;
-  border-top: 2px solid var(--border-color);
+  /* padding-top: 1.5rem; */
+  border-top: 2px dotted var(--border-color);
 }
 
 .habit-type-badge {
@@ -376,7 +384,7 @@ canvas {
 /* Visualization display containers */
 .viz-display {
   display: block;
-  padding: 0.75rem 0;
+  /* padding: 0.75rem 0; */
 }
 
 .heatmap-grid {
@@ -414,6 +422,7 @@ canvas {
   border-color: var(--border-color);
 }
 
+/*
 .heatmap-legend {
   display: flex;
   align-items: center;
@@ -434,8 +443,9 @@ canvas {
   height: 12px;
   border-radius: 2px;
   border: 1px solid var(--border-color);
-}
+} */
 
+/*
 .viz-selector {
   display: flex;
   gap: 4px;
@@ -463,7 +473,7 @@ canvas {
 .viz-option.active {
   background: var(--accent-color);
   color: white;
-}
+} */
 
 /* Combined yes/no layout */
 .yesno-combined-wrapper {