<script>
import { LayerCake, Svg, flatten, stack } from 'layercake';
import { scaleBand, scaleOrdinal } from 'd3-scale';
import { format } from 'd3-format';
import ColumnStacked from './_components/ColumnStacked.svelte';
import AxisX from './_components/AxisX.svelte';
import AxisY from './_components/AxisY.svelte';
import data from './_data/fruitOrdinal.csv';
const xKey = 'year';
const yKey = [0, 1];
const zKey = 'key';
const seriesNames = Object.keys(data[0]).filter(d => d !== xKey);
const seriesColors = ['#00e047', '#7ceb68', '#b7f486', '#ecfda5'];
data.forEach(d => {
seriesNames.forEach(name => {
d[name] = +d[name];
});
});
const formatLabelY = d => format(`~s`)(d);
const stackedData = stack(data, seriesNames);
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
padding={{ top: 0, right: 0, bottom: 20, left: 20 }}
x={d => d.data[xKey]}
y={yKey}
z={zKey}
xScale={scaleBand().paddingInner(0.02).round(true)}
xDomainSort={false}
zScale={scaleOrdinal()}
zDomain={seriesNames}
zRange={seriesColors}
flatData={flatten(stackedData)}
data={stackedData}
>
<Svg>
<AxisX
gridlines={false}
/>
<AxisY
ticks={4}
gridlines={false}
format={formatLabelY}
/>
<ColumnStacked/>
</Svg>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, zGet, xScale } = getContext('LayerCake');
</script>
<g class="column-group">
{#each $data as series, i}
{#each series as d}
{@const yVals = $yGet(d)}
{@const columnHeight = yVals[0] - yVals[1]}
<rect
class='group-rect'
data-id="{i}"
x="{$xGet(d)}"
y="{yVals[1]}"
width={$xScale.bandwidth()}
height="{columnHeight}"
fill={$zGet(series)}
></rect>
{/each}
{/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 = 12;
function textAnchor(i, sl) {
if (sl === true) {
if (i === 0) {
return 'start';
}
if (i === tickVals.length - 1) {
return 'end';
}
}
return 'middle';
}
$: 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>
<g class="axis x-axis" class:snapLabels>
{#each tickVals as tick, i (tick)}
{#if baseline === true}
<line
class="baseline"
y1={$height}
y2={$height}
x1="0"
x2={$width}
/>
{/if}
<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
{#if gridlines === true}
<line
class="gridline"
x1={halfBand}
x2={halfBand}
y1={-$height}
y2="0"
/>
{/if}
{#if tickMarks === true}
<line
class="tick-mark"
x1={halfBand}
x2={halfBand}
y1={tickGutter}
y2={tickGutter + tickLen}
/>
{/if}
<text
x={halfBand}
y={tickGutter + tickLen}
{dx}
{dy}
text-anchor={textAnchor(i, snapLabels)}>{format(tick)}</text
>
</g>
{/each}
</g>
<style>
.tick {
font-size: 11px;
}
line,
.tick line {
stroke: #aaa;
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.tick .tick-mark,
.baseline {
stroke-dasharray: 0;
}
.axis.snapLabels .tick:last-child text {
transform: translateX(3px);
}
.axis.snapLabels .tick.tick-0 text {
transform: translateX(-3px);
}
</style>
<script>
import { getContext } from 'svelte';
const { xRange, yScale, width } = 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 = 0;
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);
$: y = isBandwidth ? $yScale.bandwidth() / 2 : 0;
$: maxTickValPx = Math.max(...tickVals.map($yScale));
</script>
<g class='axis y-axis'>
{#each tickVals as tick (tick)}
{@const tickValPx = $yScale(tick)}
<g class='tick tick-{tick}' transform='translate({$xRange[0]}, {tickValPx})'>
{#if gridlines === true}
<line
class="gridline"
{x1}
x2='{$width}'
y1={y}
y2={y}
></line>
{/if}
{#if tickMarks === true}
<line
class='tick-mark'
{x1}
x2={x1 + tickLen}
y1={y}
y2={y}
></line>
{/if}
<text
x='{x1}'
{y}
dx={dx + (labelPosition === 'even' ? -3 : 0)}
text-anchor={labelPosition === 'above' ? 'start' : 'end'}
dy='{dy + (labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx) ? -3 : 4)}'
>{format(tick)}</text>
</g>
{/each}
</g>
<style>
.tick {
font-size: 11px;
}
.tick line {
stroke: #aaa;
}
.tick .gridline {
stroke-dasharray: 2;
}
.tick text {
fill: #666;
}
.tick.tick-0 line {
stroke-dasharray: 0;
}
</style>
year,apples,bananas,cherries,dates
2019,3840,1920,960,400
2018,1600,1440,960,400
2017,820,1000,640,400
2016,820,560,720,400