fix chart bug and styling

activities/www/chart.sql

@@ -20,6 +20,7 @@ WHERE activity = 'Eating'
 GROUP BY delta.activity);
 
 SELECT 'chart' AS component
+--, '' AS title
 , :total_time || ' min.' AS title
 , TRUE AS time
 , 'area' AS type
@@ -29,70 +30,47 @@ SELECT 'chart' AS component
 , '100' AS height
 -- TODO: fix color to series
 --
---   SELECT DISTINCT color(activity) FROM activities ORDER BY activity;
+--  SELECT DISTINCT color(activity) FROM activities ORDER BY activity;
 , 'azure' AS color
-, 'green' AS color
 , 'red' AS color
+, 'green' AS color
 ;
 
 --SELECT 'table' AS component;
-SELECT :start_of_day AS x, NULL as y, 'Unknown' AS series;
 -- TODO: ensure every series is present to stabalize colors
 --   SELECT DISTINCT :date AS x, NULL as y, activity AS series FROM activities ORDER BY activity;
-SELECT :end_of_day AS x, NULL as y, 'Unknown' AS series;
-SELECT datetime(CASE y
-  WHEN 0 THEN datetime(x, '-00:00:01.000')
-  WHEN 2 THEN datetime(x, '+00:00:01.000')
-  ELSE x
-END, 'localtime') AS x, series, CASE y % 2 WHEN 1 THEN 1 ELSE NULL END AS y FROM (
-SELECT ts AS x
-, activity AS series
-, 0 AS y
-FROM activities a
-WHERE user = :user
-AND datetime(datetime(ts, 'localtime'), 'start of day') = :start_of_day
---AND EXISTS (SELECT * FROM (
---  SELECT lag.activity
---  FROM activities lag
---  WHERE lag.ts < a.ts
---  ORDER BY ts ASC
---  LIMIT 1
---) q WHERE q.activity <> activity)
-UNION
-SELECT ts AS x
-, activity AS series
-, 1 AS y
-FROM activities a
-WHERE user = :user
-AND datetime(datetime(ts, 'localtime'), 'start of day') = :start_of_day
-UNION
-SELECT COALESCE((
-  SELECT min(lag.ts, datetime(:end_of_day, 'utc'))
-  FROM activities lag
-  WHERE lag.ts > a.ts AND lag.activity <> a.activity
-  --AND datetime(datetime(a.ts, 'localtime'), 'start of day') = :start_of_day
-  ORDER BY lag.ts ASC
-  LIMIT 1
-), min(CURRENT_TIMESTAMP, datetime(:end_of_day, 'utc'))) AS x
-, activity AS series
-, 1 AS y
-FROM activities a
-WHERE user = :user
-AND datetime(datetime(ts, 'localtime'), 'start of day') = :start_of_day
-UNION
-SELECT COALESCE((
-  SELECT min(lag.ts, datetime(:end_of_day, 'utc'))
-  FROM activities lag
-  WHERE lag.ts > a.ts AND lag.activity <> a.activity
-  --AND datetime(datetime(a.ts, 'localtime'), 'start of day') = :start_of_day
-  ORDER BY lag.ts ASC
-  LIMIT 1
-), min(CURRENT_TIMESTAMP, datetime(:end_of_day, 'utc'))) AS x
-, activity AS series
-, 2 AS y
-FROM activities a
-WHERE user = :user
-AND datetime(datetime(ts, 'localtime'), 'start of day') = :start_of_day
+WITH plot AS (
+    SELECT ROW_NUMBER() OVER (ORDER BY ts) AS row
+    , ts
+    , activity
+    FROM (
+        SELECT ts, activity FROM activities
+        WHERE user = :user
+        AND datetime(ts, 'localtime') BETWEEN :start_of_day AND :end_of_day
+        UNION
+        SELECT datetime(:start_of_day, 'utc'), 'Unknown'
+        UNION
+        SELECT datetime(:end_of_day, 'utc'), 'Unknown'
+    )
+)
+SELECT datetime(x, 'localtime') AS x, CASE value WHEN 0 THEN NULL ELSE value END AS y, series FROM (
+    SELECT datetime(next.ts, '-00:00:01.000') AS x, 0 AS value, next.activity AS series
+    FROM plot, plot next
+    WHERE plot.row = next.row - 1
+    AND plot.activity <> next.activity
+    UNION
+    SELECT ts AS x, 1 AS value, activity AS series
+    FROM plot
+    UNION
+    SELECT datetime(next.ts, '-00:00:01.000') AS x, 1 AS value, plot.activity AS series
+    FROM plot, plot next
+    WHERE plot.row = next.row - 1
+    AND plot.activity <> next.activity
+    UNION
+    SELECT next.ts AS x, 0 AS value, plot.activity AS series
+    FROM plot, plot next
+    WHERE plot.row = next.row - 1
+    AND plot.activity <> next.activity
 ) q
-ORDER BY series, x ASC, y ASC
+ORDER BY series DESC, x ASC
 ;

activities/www/index.sql

@@ -31,7 +31,8 @@ SELECT 'text' AS component
     padding: 0;
 }
 .card > .card-body > .d-flex {
-    padding: 0 10em;
+    font-size: 0.3em;
+    padding: 0 120px;
 }
 .card > .card-body > .d-flex {
     height: 0;
@@ -42,17 +43,10 @@ SELECT 'text' AS component
 .apexcharts-yaxis {
     display: none;
 }
-//.col:has(+ .col .apexcharts-legend-text) .apexcharts-xaxis-texts-g {
-//    /* height: 0; // modifying the height alters the chart size */
-//    visibility: hidden;
-//}
 .col:has(+ .col .apexcharts-legend-text) .apexcharts-legend {
     /* height: 0; // modifying the height alters the chart size */
     visibility: hidden;
 }
-/*.col:last-child .apexcharts-legend {
-    height: inherit;
-}*/
 </style>' AS html
 ;