Adding some axis titles to layercakes histogram example

axis_titles.html

#### AxisXTitled.html

<g class='axis x-axis'>
  {#each ticks as tick, i}
    <g class='tick tick-{ tick }' transform='translate({$xScale(tick)},{$yScale.range()[0]})'>
      {#if opts.gridlines !== false}
        <line y1='{$height * -1}' y2='0' x1='0' x2='0'></line>
      {/if}
      <text y='16' text-anchor='{textAnchor(i)}'>{opts.formatTick ? opts.formatTick(tick) : tick}</text>
    </g>
  {/each}
  {#if opts.baseline === true}
    <line class="baseline" y1='{$height + 0.5}' y2='{$height + 0.5}' x1='0' x2='{$width}'></line>
  {/if}
</g>
{#if opts.title }
<g class='XAxisTitle'>
  <text y='{$height + 35}' x='{ $xScale.range()[1]/2}' >{opts.title }</text>
</g>
{/if}

<style>
  .tick {
    font-size: .725em;
    font-weight: 200;
  }

  line,
  .tick line {
    stroke: #aaa;
    stroke-dasharray: 2;
  }

  .tick text {
    fill: #666;
  }

  .baseline {
    stroke-dasharray: 0;
  }

  .XAxisTitle text {
    fill: #666;
    text-anchor: middle;
  }
</style>

<script>
export default {
  namespace: 'svg',
  computed: {
    ticks: ({ $xScale, opts }) => {
      return opts.ticks || $xScale.ticks(opts.tickNumber);
    },
    textAnchor: ({ ticks, opts }) => {
      return function (i) {
        if (opts.snapTicks === true) {
          if (i === 0) {
            return 'start';
          }
          if (i === ticks.length - 1) {
            return 'end';
          }
        }
        return 'middle';
      };
    }
  }
};
</script>


###### AxisYTitled.html

<g class='axis y-axis' transform='translate(-{$padding.left}, 0)'>
  {#each $yScale.ticks(opts.ticks || opts.tickNumber || 5) as tick, i}
    <g class='tick tick-{tick}' transform='translate(30, {$yScale(tick)})'>
      {#if opts.gridlines !== false}
        <line x2='100%'></line>
      {/if}
      <text y='-4'>{opts.formatTick ? opts.formatTick(tick) : tick}</text>
    </g>
  {/each}
</g>
{#if opts.title }
<g class='YAxisTitle'>
  <text transform='translate(-40,{$height/2})rotate(270)'>{opts.title}</text>
</g>
{/if}
<style>
  .tick {
    font-size: .725em;
    font-weight: 200;
  }

  .tick line {
    stroke: #aaa;
    stroke-dasharray: 2;
  }

  .tick text {
    fill: #666;
    text-anchor: start;
  }

  .tick.tick-0 line {
    stroke-dasharray: 0;
  }

  .YAxisTitle text {
    fill: #666;
    text-anchor: middle;
  }
</style>

<script>
export default {
  namespace: 'svg'
};
</script>


##### main.js [ snippets ] Note that it requires extra padding on LayerCake and titles on the axes.

import LayerCake from 'layercake';
import { histogram, extent } from 'd3-array';
import Column from './components/ColumnLinear.html';
import AxisXTitled from './components/AxisXTitled.html';
import AxisYTitled from './components/AxisYTitled.html';


var myCake = new LayerCake({
  padding: { top: 15, right: 5, bottom: 40, left: 60 },
  x: ['x0', 'x1'],
  y: 'length',
  xNice: true,
  yDomain: [0, null],
  xDomain: [0, num_bins],
  data: data_histogram,
  target: document.getElementById('my-chart')
})
  .svgLayers([
    { component: AxisXTitled, opts: { gridlines: false, baseline: true, snapTicks: true, title: "Bananas eaten"} },
    { component: AxisYTitled, opts: { gridlines: false, ticks: 3, title: "Number of Monkeys" } },
    { component: Column, opts: { fill: '#fff', stroke: '#000', 'stroke-width': 1 } }
  ]);
myCake.render();