<script>
import { LayerCake, ScaledSvg, Html } from 'layercake';
import { scaleBand } from 'd3-scale';
import Bar from './_components/Bar.svelte';
import AxisX from './_components/AxisX.percent-range.html.svelte';
import AxisY from './_components/AxisY.percent-range.html.svelte';
import data from './_data/groups.csv';
data.forEach(d => {
d.value = +d.value;
});
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
ssr
percentRange
padding={{ top: 0, right: 20, bottom: 20, left: 35 }}
x='value'
y='year'
yScale={scaleBand().paddingInner(0.05).round(true)}
yDomain={['1979', '1980', '1981', '1982', '1983']}
xDomain={[0, null]}
{data}
>
<Html>
<AxisX
gridlines
baseline
snapLabels
/>
<AxisY gridlines={false} tickMarks/>
</Html>
<ScaledSvg>
<Bar/>
</ScaledSvg>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
export let fill = '#00bbff';
</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)}"
{fill}
></rect>
{/each}
</g>
<script>
import { getContext } from 'svelte';
const { width, height, xScale, yRange } = getContext('LayerCake');
export let tickMarks = false;
export let gridlines = true;
export let tickMarkLength = 6;
export let baseline = false;
export let snapLabels = false;
export let format = d => d;
export let ticks = undefined;
export let tickGutter = 0;
export let dx = 0;
export let dy = 1;
$: tickLen = tickMarks === true
? tickMarkLength ?? 6
: 0;
$: isBandwidth = typeof $xScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$xScale.domain() :
typeof ticks === 'function' ?
ticks($xScale.ticks()) :
$xScale.ticks(ticks);
$: halfBand = isBandwidth ? $xScale.bandwidth() / 2 : 0
</script>
<div class='axis x-axis' class:snapLabels>
{#each tickVals as tick, i (tick)}
{@const tickValPx = $xScale(tick)}
{#if baseline === true}
<div class="baseline" style='top:100%; width:100%;'></div>
{/if}
{#if gridlines === true}
<div
class="gridline"
style:left='{tickValPx}%'
style='top:0; bottom:0;'></div>
{/if}
{#if tickMarks === true}
<div
class="tick-mark"
style:left='{tickValPx + halfBand}%'
style:height='{tickLen}px'
style:bottom='{-tickLen - tickGutter}px'
></div>
{/if}
<div
class='tick tick-{i}'
style:left='{tickValPx + halfBand}%'
style='top:calc(100% + {tickGutter}px);'>
<div
class="text"
style:top='{tickLen}px'
style:transform='translate(calc(-50% + {dx}px), {dy}px)'
>{format(tick)}</div>
</div>
{/each}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: 11px;
}
.gridline {
border-left: 1px dashed #aaa;
}
.tick-mark {
border-left: 1px solid #aaa;
}
.baseline {
border-top: 1px solid #aaa;
}
.tick .text {
color: #666;
position: relative;
white-space: nowrap;
transform: translateX(-50%);
}
.axis.snapLabels .tick:last-child {
transform: translateX(-40%);
}
.axis.snapLabels .tick.tick-0 {
transform: translateX(40%);
}
</style>
<script>
import { getContext } from 'svelte';
const { xRange, yScale } = getContext('LayerCake');
export let tickMarks = false;
export let labelPosition = 'even';
export let snapBaselineLabel = false;
export let gridlines = true;
export let tickMarkLength = undefined;
export let format = d => d ;
export let ticks = 4;
export let tickGutter = 0;
export let dx = 0;
export let dy = -3;
export let charPixelWidth = 7.25;
$: isBandwidth = typeof $yScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$yScale.domain() :
typeof ticks === 'function' ?
ticks($yScale.ticks()) :
$yScale.ticks(ticks);
function calcStringLength(sum, val) {
if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
return sum + charPixelWidth;
}
$: tickLen = tickMarks === true
? labelPosition === 'above'
? tickMarkLength ?? widestTickLen
: tickMarkLength ?? 6
: 0;
$: widestTickLen = Math.max(10, Math.max(...tickVals.map(d => format(d).toString().split('').reduce(calcStringLength, 0))));
$: x1 = -tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen);
$: halfBand = isBandwidth ? $yScale.bandwidth() / 2 : 0;
$: maxTickValPerc = Math.max(...tickVals.map($yScale));
</script>
<div class='axis y-axis'>
{#each tickVals as tick, i (tick)}
{@const tickValPerc = $yScale(tick)}
<div class='tick tick-{i}' style='left:{$xRange[0]}%;top:{tickValPerc + halfBand}%;'>
{#if gridlines === true}
<div
class="gridline"
style="top:0;"
style:left='{x1}px'
style:right='0px'
></div>
{/if}
{#if tickMarks === true}
<div
class="tick-mark"
style:top='0'
style:left='{x1}px'
style:width='{tickLen}px'
></div>
{/if}
<div
class="text"
style:top='0'
style:text-align='{labelPosition === 'even' ? 'right' : 'left'}'
style:width='{widestTickLen}px'
style:left='{-widestTickLen - tickGutter - (labelPosition === 'even' ? tickLen : 0)}px'
style:transform='translate({dx + (labelPosition === 'even' ? -3 : 0)}px, calc(-50% + {dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPerc === maxTickValPerc) ? -3 : 4)}px))'
>{format(tick)}</div>
</div>
{/each}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline,
.text {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: 11px;
width: 100%;
}
.gridline {
border-top: 1px dashed #aaa;
}
.tick-mark {
border-top: 1px solid #aaa;
}
.baseline.gridline {
border-top-style: solid;
}
.tick .text {
color: #666;
}
</style>
year,value
1979,2
1980,3
1981,5
1982,8
1983,18