more frontend tinkering

static/app.js

@@ -82,9 +82,17 @@ function renderLineChart(months, massData, valueData) {
     legend: {
       data: ['Mass (kg)', 'Value (DKK)'],
       textStyle: { color: c.textColor },
-      top: 0
+      top: 0,
+      left: 'center',
+      orient: 'horizontal'
+    },
+    grid: {
+      left: '8%',
+      right: '10%',
+      bottom: 50,
+      containLabel: true,
+      top: '18%'
     },
-    grid: { left: '3%', right: '4%', bottom: '10%', containLabel: true },
     xAxis: {
       type: 'category',
       data: xLabels,
@@ -93,7 +101,10 @@ function renderLineChart(months, massData, valueData) {
         color: c.textColor,
         interval: 0,
         rotate: 0,
-        fontSize: 10
+        fontSize: 10,
+        margin: 8,
+        overflow: 'break',
+        width: 70
       },
       boundaryGap: false,
     },
@@ -105,7 +116,8 @@ function renderLineChart(months, massData, valueData) {
         splitLine: { lineStyle: { color: c.gridColor } },
         axisLabel: {
           color: c.accent,
-          formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString())
+          formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
+          margin: 8
         },
         axisLine: { show: true, lineStyle: { color: c.accent } },
         nameTextStyle: { color: c.accent, padding: [0, 0, 0, 0] }
@@ -117,10 +129,11 @@ function renderLineChart(months, massData, valueData) {
         splitLine: { show: false },
         axisLabel: {
           color: c.secondary,
-          formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString())
+          formatter: (val) => (val >= 1e6 ? (val / 1e6).toFixed(1) + 'M' : val.toLocaleString()),
+          margin: 8
         },
         axisLine: { show: true, lineStyle: { color: c.secondary } },
-        nameTextStyle: { color: c.secondary }
+        nameTextStyle: { color: c.secondary, padding: [0, 10, 0, 0] }
       }
     ],
     series: [
@@ -176,10 +189,10 @@ function renderTopSpeciesChart(data) {
       }
     },
     grid: {
-      left: '3%',
+      left: '5%',
-      right: '8%',
+      right: '20%',
-      bottom: '8%',
+      bottom: 60,
-      top: '5%',
+      top: 10,
       containLabel: true,
     },
     xAxis: {
@@ -203,8 +216,9 @@ function renderTopSpeciesChart(data) {
         color: c.textColor,
         fontSize: 11,
         fontWeight: 'bold',
-        width: 120,
+        width: 100,
         overflow: 'truncate',
+        interval: 'auto',
       },
     },
     series: [
@@ -212,6 +226,7 @@ function renderTopSpeciesChart(data) {
         type: 'bar',
         data: values,
         barMaxWidth: 28,
+        barGap: '30%',
         itemStyle: {
           borderRadius: [0, 4, 4, 0],
         },
@@ -220,8 +235,9 @@ function renderTopSpeciesChart(data) {
           position: 'right',
           formatter: (params) => formatDKKShort(params.value),
           color: c.textColor,
-          fontSize: 11,
+          fontSize: 10,
-          distance: 6,
+          distance: 8,
+          overflow: 'break',
         },
         emphasis: {
           itemStyle: {
@@ -272,17 +288,19 @@ function renderBarChart(months, seriesData) {
     legend: {
       textStyle: { color: c.textColor },
       top: 0,
+      left: 'center',
+      orient: 'horizontal',
       type: 'scroll',
       maxItems: 5,
       padding: [0, 0, 0, 0],
       itemGap: 10
     },
     grid: {
-      left: '3%',
+      left: '8%',
-      right: '4%',
+      right: '5%',
-      bottom: '15%',
+      bottom: 65,
       containLabel: true,
-      top: '20%'
+      top: '25%'
     },
     xAxis: {
       type: 'category',
@@ -293,7 +311,9 @@ function renderBarChart(months, seriesData) {
         interval: 0,
         fontSize: 9,
         rotate: 0,
-        margin: 12
+        margin: 8,
+        overflow: 'break',
+        width: 60
       },
       axisTick: { show: false }
     },
@@ -302,7 +322,8 @@ function renderBarChart(months, seriesData) {
       splitLine: { lineStyle: { color: c.gridColor, type: 'dashed' } },
       axisLabel: {
         color: c.textColor,
-        formatter: (val) => formatDKKShort(val)
+        formatter: (val) => formatDKKShort(val),
+        margin: 8
       },
       nameTextStyle: { padding: [0, 0, 0, 10] }
     },
@@ -311,6 +332,9 @@ function renderBarChart(months, seriesData) {
       barMaxWidth: barMaxWidth,
       itemStyle: {
         color: c.palette[idx % c.palette.length]
+      },
+      label: {
+        show: false
       }
     })),
   });

static/index.html

@@ -67,15 +67,15 @@
       <div id="charts-grid" class="charts-grid" style="display:none;">
         <div class="chart-container full-width">
           <div class="chart-title">Total Landings (Mass & Value)</div>
-          <div id="chart-line" style="width:100%; height:400px;"></div>
+          <div id="chart-line" style="width:100%; height:420px;"></div>
         </div>
         <div class="chart-container">
           <div class="chart-title">Top Species by Value</div>
-          <div id="chart-donut" style="width:100%; height:350px;"></div>
+          <div id="chart-donut" style="width:100%; height:380px;"></div>
         </div>
         <div class="chart-container">
           <div class="chart-title">Monthly Value by Top Species</div>
-          <div id="chart-bar" style="width:100%; height:350px;"></div>
+          <div id="chart-bar" style="width:100%; height:380px;"></div>
         </div>
       </div>
     </div>