chart component: fix zero values in stacked bar charts

fixes #924

Author: lovasoa

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG.md
 
+## v0.35.2
+ - Fix a bug with zero values being displayed with a non-zero height in stacked bar charts.
+
 ## v0.35.1
  - improve color palette for charts
  - Fix some color names not working in the datagrid component

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "sqlpage"
-version = "0.35.1"
+version = "0.35.2"
 edition = "2021"
 description = "Build data user interfaces entirely in SQL. A web server that takes .sql files and formats the query result using pre-made configurable professional-looking components."
 keywords = ["web", "sql", "framework"]

Cargo.toml

@@ -678,7 +678,7 @@ INSERT INTO example(component, description, properties) VALUES
         "component": "chart",
         "title": "Quarterly Revenue",
         "type": "area",
-        "color": "indigo",
+        "color": "blue-lt",
         "marker": 5,
         "time": true
     },

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -12,8 +12,8 @@ sqlpage_chart = (() => {
   }
 
   const tblrColors = [
-    ["blue", "#0066FF", "#3399FF"],
-    ["red", "#FF0000", "#FF6666"],
+    ["blue", "#1c31dc", "#3399FF"],
+    ["red", "#d11414", "#FF6666"],
     ["green", "#00CC00", "#66FF66"],
     ["pink", "#FF1493", "#FF69B4"],
     ["purple", "#ae3ec9", "#c264d9"],
@@ -119,9 +119,10 @@ sqlpage_chart = (() => {
     } else if (categories && data.type === "bar")
       series = align_categories(series);
 
+    const chart_type = data.type || "line";
     const options = {
       chart: {
-        type: data.type || "line",
+        type: chart_type,
         fontFamily: "inherit",
         parentHeightOffset: 0,
         height: chartContainer.style.height,
@@ -157,7 +158,11 @@ sqlpage_chart = (() => {
         type: data.type === "area" ? "gradient" : "solid",
       },
       stroke: {
-        width: data.type === "area" ? 3 : 1,
+        width:
+          {
+            area: 3,
+            line: 2,
+          }[chart_type] || 0,
         lineCap: "round",
         curve: "smooth",
       },