new styles

Author: hansfelix

css/style.css

@@ -53,6 +53,7 @@ body {
   grid-row-start: 2;
   grid-row-end: 3;
 
+  padding: 10px;
   background: #f6f6f6;
   border-bottom: 1px solid #c7c7c7;
 
@@ -61,5 +62,20 @@ body {
 }
 
 .dashboard-bar__top {
-  flex: 0 50px;
+  flex: 0 25px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dashboard-bar__chart {
+  flex: 1;
+}
+
+#dashboard-bar-title {
+  margin: 0;
+}
+
+#dashboard-bar-select {
+  min-width: 100px;
 }

index.html

@@ -48,17 +48,21 @@
                 <div style="width: 100%; height: 100%;"></div>
             </div> -->
         </section>
+
+        <!-- Dashboard Bar -->
         <section class="dashboard-bar">
             <div class="dashboard-bar__top">
-                <h4>XXXX</h4>
-                <select name="" id="">
+                <h4 id="dashboard-bar-title">-</h4>
+                <select name="" id="dashboard-bar-select">
                     <option value="">sad</option>
                 </select>
-
             </div>
-
-            <div id="bar-chart"></div>
+            <div class="dashboard-bar__chart">
+                <div id="bar-chart"></div>
+            </div>
         </section>
+
+        <!-- Dashboard  Pie -->
         <section class="dashboard-pie">
             <div id="pie-chart"></div>
         </section>

js/charts.js

@@ -6,7 +6,7 @@ function loadBarChart(labels, series, name, modelData) {
             data: series
         }],
         chart: {
-            height: 350,
+            height: '100%',
             type: 'bar',
             events: {
                 dataPointSelection: function (event, chartContext, config) {
@@ -117,7 +117,8 @@ function loadPieChart(labels, series, name, modelData) {
     var options = {
         series: series,
         chart: {
-            width: 380,
+            // height: '100%',
+            width: '100%',
             type: 'pie',
             events: {
                 dataPointSelection: function (event, chartContext, config) {