fix chart padding

assets/js/components/Chart.js

@@ -69,8 +69,8 @@ class Chart extends Component {
       return;
     }
 
-    let padding = { top: 24, right: 24, bottom: 64, left: 48 };
-    let height = 240;
+    let padding = { top: 24, right: 12, bottom: 64, left: 24 };
+    let height = Math.max( this.base.clientHeight, 240 );
     let width = this.base.clientWidth;
     let innerWidth = width - padding.left - padding.right;
     let innerHeight = height - padding.top - padding.bottom;
@@ -92,7 +92,7 @@ class Chart extends Component {
     
     // axes
     let x  = d3.scaleBand().range([0, innerWidth]).padding(0.1).domain(data.map((d) => d.Date)),
-      y  = d3.scaleLinear().range([innerHeight, 0]).domain([0, (max*1.155)]),
+      y  = d3.scaleLinear().range([innerHeight, 0]).domain([0, (max*1.1)]),
       yAxis = d3.axisLeft().scale(y).ticks(3).tickSize(-innerWidth),
       xAxis = d3.axisBottom().scale(x);
 
@@ -108,50 +108,52 @@ class Chart extends Component {
       .call(xAxis)
     xTicks.selectAll('g text').style('display', (d, i) => { 
       return i % nxLabels != 0 ? 'none' : 'block'
-    }).attr("transform", "rotate(-50)").style("text-anchor", "end");
+    }).attr("transform", "rotate(-60)").style("text-anchor", "end");
     xTicks.selectAll('g').style('display', (d, i) => {
       return i % nxTicks != 0 ? 'none' : 'block';
     });
 
-    // pageviews
-    const pageviewTip = d3.tip().attr('class', 'd3-tip').html((d) => d.Pageviews);
-    graph.call(pageviewTip)
+    // tooltip
+    const tip = d3.tip().attr('class', 'd3-tip').html((d) => (`
+      <div class="tip-heading">${d.Date}</div>
+      <div class="tip-content">
+        <div class="tip-pageviews">
+          <div class="tip-number">${d.Pageviews}</div>
+          <div class="tip-metric">Pageviews</div>
+        </div>
+        <div class="tip-visitors">
+          <div class="tip-number">${d.Visitors}</div>
+          <div class="tip-metric">Visitors</div>
+        </div>
+      </div>
+    `));
+    graph.call(tip)
 
-    let pageviewBars = graph.selectAll('g.pageviews').data(data).enter()
+    let days = graph.selectAll('g.day').data(data).enter()
       .append('g')
-      .attr('class', 'pageviews') 
-      .on('mouseover', pageviewTip.show)
-      .on('mouseout', pageviewTip.hide)
-      .attr('transform', function (d, i) { return "translate(" + x(d.Date) + ", 0)" });
-      
-    pageviewBars.append('rect')
+      .attr('class', 'day') 
+      .attr('transform', function (d, i) { return "translate(" + x(d.Date) + ", 0)" })
+      .on('mouseover', tip.show)
+      .on('mouseout', tip.hide)
+
+    let pageviews = days.append('rect')
+      .attr('class', 'bar-pageviews') 
       .attr('width', x.bandwidth() * 0.5)
       .attr("y", innerHeight)
       .attr("height", 0)
       .transition(t)
       .attr('y', d => y(d.Pageviews))
       .attr('height', (d) => innerHeight - y(d.Pageviews))
-      
 
-    // visitors  
-    const visitorTip = d3.tip().attr('class', 'd3-tip').html((d) => d.Visitors);
-    graph.call(visitorTip)
-
-    let visitorBars = graph.selectAll('g.visitors').data(data).enter()
-      .append('g')
-      .attr('class', 'visitors')
-      .on('mouseover', visitorTip.show)
-      .on('mouseout', visitorTip.hide)
-      .attr('transform', function (d, i) { return "translate(" + ( x(d.Date) + 0.5 * x.bandwidth() ) + ", 0)" });
-    
-    visitorBars.append('rect')
+    let visitors = days.append('rect')
+      .attr('class', 'bar-visitors')
       .attr('width', x.bandwidth() * 0.5)
       .attr("y", innerHeight)
       .attr("height", 0)
+      .attr('transform', function (d, i) { return "translate(" + ( 0.5 * x.bandwidth() ) + ", 0)" })
       .transition(t)
       .attr('height', (d) => (innerHeight - y(d.Visitors)) )
-      .attr('y', (d) => y(d.Visitors))
-  
+      .attr('y', (d) => y(d.Visitors))  
   }
 
   @bind

assets/sass/chart.scss

@@ -4,13 +4,17 @@
 }
 
 #chart {
+   height: 100%;
+   svg{ height: 100%; }
+
+   * { box-sizing: content-box; }
 }
 
-g.pageviews {
+.bar-pageviews {
    fill: #88ffc6;
 }
 
-g.visitors {
+.bar-visitors {
    fill: #533feb;
 }
 
@@ -30,6 +34,40 @@ g.visitors {
 }
 
 .d3-tip {
-   color: #98a0a6;
    font-size: 12px;
+   color: #959da5;
+   text-align: left;
+   background: rgba(0,0,0,.8);
+   border-radius: 3px;
+}
+
+.tip-heading {
+ font-weight: 600;
+ padding: 10px;
+ line-height: 1;
+}
+
+.tip-content {
+   display: flex;
+
+   > div {
+      padding: 5px 10px;
+      width: 50%;
+      display: block;
+      flex: 1;
+      min-width: 90px;
+   }
+}
+
+.tip-pageviews {
+   border-top: 3px solid rgb(136, 255, 198);
+}
+
+.tip-visitors {
+   border-top: 3px solid rgb(83, 63, 235);
+}
+
+.tip-number {
+   color: #dfe2e5;
+   font-weight: 600;
 }

assets/sass/styles.scss

@@ -156,16 +156,19 @@ body {
     }
     .box-graph {
         margin: 0 0 4px 0;
+        max-width: 1000px;
     }
     .box-totals { max-width: 230px; margin-left: 0; }
     .box-pages {
         flex-basis: 464px;
         width: 50%;
         margin: 0 2px 0 0;
+        max-width: 500px;
     }
     .box-referrers {
         flex-basis: 464px;
         margin: 0 0 0 2px;
+         max-width: 500px;
     }
 
     .totals-detail { width: 100%; }