BarEdit

<script>
  import { LayerCake, Svg } from 'layercake';
  import { scaleBand } from 'd3-scale';

  import groups from './data/groups.csv';
  import Bar from './components/Bar.svelte';
  import AxisX from './components/AxisX.svelte';
  import AxisY from './components/AxisY.svelte';

  groups.forEach(row => {
    row.value = +row.value;
  });
</script>

<style>
  .chart-container {
    width: 100%;
    height: 100%;
  }
</style>

<div class="chart-container">
  <LayerCake
    padding={{ top: 0, bottom: 20, left: 30 }}
    x='value'
    y='year'
    yScale={scaleBand().paddingInner([0.05]).round(true)}
    yDomain={['1979', '1980', '1981', '1982', '1983']}
    xDomain={[0, null]}
    data={groups}
  >
    <Svg>
      <AxisX
        gridlines={true}
        baseline={true}
        snapTicks={true}
      />
      <AxisY
        gridlines={false}
      />
      <Bar/>
    </Svg>
  </LayerCake>

</div>

<script>
  import { getContext } from 'svelte';

  const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
</script>

<g class="bar-group">
  {#each $data as d, i}
    <rect
      class='group-rect'
      data-id="{i}"
      x="{$xScale.range()[0]}"
      y="{$yGet(d)}"
      height={$yScale.bandwidth()}
      width="{$xGet(d)}"
    ></rect>
  {/each}
</g>

<style>
  .group-rect {
    fill: #00bbff;
  }
</style>

<script>
  import { getContext } from 'svelte';

  const { width, height, xScale, yScale } = getContext('LayerCake');


  export let gridlines = true;
  export let formatTick = d => d;
  export let baseline = false;
  export let snapTicks = false;
  export let ticks = undefined;
  export let tickX = '0';
  export let tickY = '16';
  export let tickDx = '0';
  export let tickDy = '0';

  let tickVals;

  $: if (typeof $xScale.bandwidth === 'function') {
    tickVals = $xScale.domain();
  } else if (Array.isArray(ticks)) {
    tickVals = ticks;
  } else {
    tickVals = $xScale.ticks(ticks);
  }

  function textAnchor(i) {
    if (snapTicks === true) {
      if (i === 0) {
        return 'start';
      }
      if (i === tickVals.length - 1) {
        return 'end';
      }
    }
    return 'middle';
  }
</script>

<g class='axis x-axis'>
  {#each tickVals as tick, i}
    <g class='tick tick-{ tick }' transform='translate({$xScale(tick)},{$yScale.range()[0]})'>
      {#if gridlines !== false}
        <line y1='{$height * -1}' y2='0' x1='0' x2='0'></line>
      {/if}
      <text
        x={typeof tickX === 'function' ? tickX($xScale) : tickX}
        y={typeof tickY === 'function' ? tickY($yScale) : tickY}
        dx='{typeof tickDx === 'function' ? tickDx($xScale) : typeof $xScale.bandwidth === 'function' ? ($xScale.bandwidth() / 2) : tickDx}'
        dy='{typeof tickDy === 'function' ? tickDy($yScale) : tickDy}'
        text-anchor='{textAnchor(i)}'>{formatTick(tick)}</text>
    </g>
  {/each}
  {#if baseline === true}
    <line class="baseline" y1='{$height + 0.5}' y2='{$height + 0.5}' x1='0' x2='{$width}'></line>
  {/if}
</g>

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

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

  .tick text {
    fill: #666;
  }

  .baseline {
    stroke-dasharray: 0;
  }
</style>

<script>
  import { getContext } from 'svelte';

  const { padding, xRange, xScale, yScale } = getContext('LayerCake');

  export let ticks = undefined;
  export let gridlines = true;
  export let formatTick = d => d;
  export let tickX = '0';
  export let tickY = '';
  export let tickDx = undefined;
  export let tickDy = undefined;
  export let textAnchor = typeof $yScale.bandwidth === 'function'  ? 'end' : 'start';

  let tickVals;

  $: if (typeof $yScale.bandwidth === 'function') {
    tickVals = $yScale.domain();
  } else if (Array.isArray(ticks)) {
    tickVals = ticks;
  } else {
    tickVals = $yScale.ticks(ticks);
  }
</script>

<g class='axis y-axis' transform='translate(-{$padding.left}, 0)'>
  {#each tickVals as tick, i}
    <g class='tick tick-{tick}' transform='translate({$xRange[0]}, {$yScale(tick)})'>
      {#if gridlines !== false}
        <line
          x2='100%'
          y1="{typeof tickY === 'function' ? tickY($yScale) : typeof tickY === 'undefined' && typeof $yScale.bandwidth === 'function' ? ($yScale.bandwidth() / 2) : tickY || '-4'}"
          y2="{typeof tickY === 'function' ? tickY($yScale) : typeof tickY === 'undefined' && typeof $yScale.bandwidth === 'function' ? ($yScale.bandwidth() / 2) : tickY || '-4'}"
        ></line>
      {/if}
      <text
        x='{typeof tickX === 'function' ? tickX($xScale) : typeof tickX === 'undefined' && typeof $yScale.bandwidth === 'function' ? '-5' : tickX || '0'}'
        y='{typeof tickY === 'function' ? tickY($yScale) : typeof tickY === 'undefined' && typeof $yScale.bandwidth === 'function' ? (4 + ($yScale.bandwidth() / 2)) : tickY || '-4'}'
        dx={typeof tickDx === 'function' ? tickDx($xScale) : tickDx}
        dy={typeof tickDy === 'function' ? tickDy($yScale) : tickDy}
        style="text-anchor:{textAnchor};"
      >{formatTick(tick)}</text>
    </g>
  {/each}
</g>

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

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

  .tick text {
    fill: #666;
  }

  .tick.tick-0 line {
    stroke-dasharray: 0;
  }
</style>

year,value
1979,2
1980,3
1981,5
1982,8
1983,18