Update chart dimensions for responsive design and enhance quiz completion alert localization

src/charts/areachart-original.vl.json

@@ -5,8 +5,8 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 500,
-  "height": 300,
+  "width": "container",
+  "height": 400,
   "data": {
     "values": [
       {
@@ -120,7 +120,9 @@
       "type": "temporal",
       "title": null,
       "axis": {
-        "grid": true
+        "grid": true,
+        "tickCount": 4,
+        "labelExpr": "timeFormat(datum.value, '%b %Y')"
       }
     },
     "y": {

src/charts/areachart-ukrainian.vl.json

@@ -5,8 +5,8 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 500,
-  "height": 300,
+  "width": "container",
+  "height": 400,
   "data": {
     "values": [
       {
@@ -120,7 +120,9 @@
       "type": "temporal",
       "title": null,
       "axis": {
-        "grid": true
+        "grid": true,
+        "tickCount": 4,
+        "labelExpr": "timeFormat(datum.value, '%b %Y')"
       }
     },
     "y": {
@@ -130,6 +132,11 @@
       "axis": {
         "titleFontWeight": "bold",
         "grid": true
+      },
+      "stack": null,
+      "scale": {
+        "zero": false,
+        "domainMin": 0.5
       }
     },
     "tooltip": [

src/charts/barchart-ukrainian.vl.json

@@ -9,7 +9,7 @@
     "url": "data/barchart.csv", "format": {"type": "csv"}
   },
   "width": "container",
-  "height": "container",
+  "height": 400,
   "mark": {
     "type": "bar"
   },
@@ -32,6 +32,9 @@
         "title": "Швидкість інтернету (МБіт/с)",
         "titleFontWeight": "bold",
         "grid": true
+      },
+      "scale": {
+        "zero": true
       }
     }
   }

src/charts/bubblechart-original.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": 400,
+    "width": "container",
     "height": 400,
     "data": {
       "url": "data/bubblechart.csv"

src/charts/bubblechart-ukrainian.vl.json

@@ -5,7 +5,7 @@
       "fontSize": 16,
       "fontWeight": "bold"
     },
-    "width": 400,
+    "width": "container",
     "height": 400,
     "data": {
       "url": "data/bubblechart.csv"

src/charts/choropleth-ukrainian.vl.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "height": 300,
-  "width": 600,
+  "height": 500,
+  "width": "container",
   "title": "Кількість шлюбів в першому півріччі 2024 р.",
   "config": {
     "padding": 0,

src/charts/histogram-original.vl.json

@@ -6,7 +6,7 @@
     "fontWeight": "bold"
   },
   "width": "container",
-  "height": 300,
+  "height": 400,
   "data": {
     "url": "data/histogram.csv"
   },

src/charts/histogram-ukrainian.vl.json

@@ -5,8 +5,8 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 500,
-  "height": 300,
+  "width": "container",
+  "height": 400,
   "data": {
     "url": "data/histogram.csv"
   },

src/charts/linechart-ukrainian.vl.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
-  "width": 600,
+  "width": "container",
   "height": 400,
   "title": "Ціни на нафту",
   "data": {

src/charts/piechart-original.vl.json

@@ -12,7 +12,7 @@
         "titleFontWeight": "bold"
       }
     },
-    "width": "container", "height": 300,
+    "width": "container", "height": 400,
     "data": {
       "values": [        
         {"brand": "Samsung", "share": 17.6},

src/charts/piechart-ukrainian.vl.json

@@ -12,7 +12,7 @@
         "titleFontWeight": "bold"
       }
     },
-    "width": 500, "height": 300,
+    "width": "container", "height": 400,
     "data": {
       "values": [        
         {"brand": "Samsung", "share": 17.6},

src/charts/scatterplot-ukrainian.vl.json

@@ -5,7 +5,7 @@
     "fontSize": 16,
     "fontWeight": "bold"
   },
-  "width": 400,
+  "width": "container",
   "height": 400,
   "data": {
     "url": "data/scatterplot.csv"

src/charts/stacked100-ukrainian.vl.json

@@ -8,8 +8,8 @@
   "data": {
     "url": "data/stacked100.csv"
   },
-  "width": 500,
-  "height": 300,
+  "width": "container",
+  "height": 400,
   "encoding": {
     "y": {
       "field": "value",
@@ -49,6 +49,11 @@
         "title": "Медалі",
         "orient": "right"
       }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "ascending"
     }
   },
   "mark": "bar",
@@ -69,9 +74,8 @@
       "as": "category"
     },
     {
-      "sort": [
-        {"field": "category", "order": "descending"}
-      ]
+      "calculate": "datum.category === 'Gold' ? 1 : datum.category === 'Silver' ? 2 : 3",
+      "as": "order"
     }
   ],
   "config": {

src/charts/stackedareachart-original.vl.json

@@ -6,7 +6,7 @@
         "fontWeight": "bold"
     },
     "width": "container",
-    "height": 500,
+    "height": 400,
     "data": {
         "values": [
             {

src/charts/stackedareachart-ukrainian.vl.json

@@ -5,7 +5,7 @@
         "fontSize": 16,
         "fontWeight": "bold"
     },
-    "width": 400,
+    "width": "container",
     "height": 400,
     "data": {
         "values": [

src/charts/stackedbarchart-ukrainian.vl.json

@@ -6,8 +6,8 @@
   "data": {
     "url": "data/stackedbarchart.csv"
   },
-  "width": 500,
-  "height": 300,
+  "width": "container",
+  "height": 400,
   "encoding": {
     "x": {
       "field": "CityUK",
@@ -24,7 +24,9 @@
       "axis": {
         "title": "Ціна ($)",
         "titleFontWeight": "bold",
-        "grid": true
+        "grid": true,
+        "gridDash": [1, 0],
+        "tickCount": 15
       },
       "scale": {
         "domain": [
@@ -38,18 +40,18 @@
       "type": "nominal",
       "scale": {
         "domain": [
-          "Sandwich",
-          "Water",
-          "Peanut",
+          "Vodka",
           "Soda",
-          "Vodka"
+          "Peanut",
+          "Water",
+          "Sandwich"
         ],
         "range": [
+          "#386cb0",
           "#7fc97f",
           "#beaed4",
           "#fdc086",
-          "#fb9a99",
-          "#386cb0"
+          "#fb9a99"
         ]
       },
       "legend": {
@@ -57,6 +59,11 @@
         "orient": "right",
         "labelExpr": "datum.label == 'Sandwich' ? 'Сендвіч' : datum.label == 'Water' ? 'Вода' : datum.label == 'Peanut' ? 'Арахіс' : datum.label == 'Soda' ? 'Газована вода' : 'Горілка'"
       }
+    },
+    "order": {
+      "field": "order",
+      "type": "quantitative",
+      "sort": "descending"
     }
   },
   "mark": "bar",
@@ -73,6 +80,10 @@
         "category",
         "value"
       ]
+    },
+    {
+      "calculate": "datum.category === 'Vodka' ? 1 : datum.category === 'Soda' ? 2 : datum.category === 'Peanut' ? 3 : datum.category === 'Water' ? 4 : 5",
+      "as": "order"
     }
   ],
   "config": {

src/js/quiz.js

@@ -44,7 +44,7 @@ document.addEventListener('DOMContentLoaded', function () {
     // Check if there is a completed quiz
     const allQuizzes = JSON.parse(localStorage.getItem('allQuizzes') || '{}');
     if (allQuizzes[quizId] && allQuizzes[quizId].completed) {
-        alert("You have already completed the quiz. Redirecting to the questionnaire.");
+        alert("Ви вже пройшли дослідження. Дякуємо! Перенаправлення на головну сторінку тесту.");
         window.location.href = 'index.html';
         return;
     }