<script>
import { LayerCake, ScaledSvg, Html, flatten } from 'layercake';
import { scaleOrdinal } from 'd3-scale';
import { timeParse, timeFormat } from 'd3-time-format';
import { format, precisionFixed } from 'd3-format';
import MultiLine from './_components/MultiLine.svelte';
import AxisX from './_components/AxisX.html.svelte';
import AxisY from './_components/AxisY.html.svelte';
import GroupLabels from './_components/GroupLabels.html.svelte';
import SharedTooltip from './_components/SharedTooltip.percent-range.html.svelte';
import data from './_data/fruit.csv';
const xKey = 'month';
const yKey = 'value';
const zKey = 'fruit';
const seriesNames = Object.keys(data[0]).filter(d => d !== xKey);
const seriesColors = ['#ffe4b8', '#ffb3c0', '#ff7ac7', '#ff00cc'];
const parseDate = timeParse('%Y-%m-%d');
const dataLong = seriesNames.map(key => {
return {
[zKey]: key,
values: data.map(d => {
d[xKey] = typeof d[xKey] === 'string' ? parseDate(d[xKey]) : d[xKey];
return {
[yKey]: +d[key],
[xKey]: d[xKey],
[zKey]: key
};
})
};
});
const formatTickX = timeFormat('%b. %e');
const formatTickY = d => format(`.${precisionFixed(d)}s`)(d);
</script>
<style>
.chart-container {
width: 100%;
height: 250px;
}
</style>
<div class="chart-container">
<LayerCake
ssr={true}
percentRange={true}
padding={{ top: 7, right: 10, bottom: 20, left: 25 }}
x={xKey}
y={yKey}
z={zKey}
zScale={scaleOrdinal()}
zRange={seriesColors}
flatData={flatten(dataLong, 'values')}
yDomain={[0, null]}
data={dataLong}
>
<Html>
<AxisX
gridlines={false}
ticks={data.map(d => d[xKey]).sort((a, b) => a - b)}
formatTick={formatTickX}
snapTicks={true}
tickMarks={true}
/>
<AxisY
baseline={true}
formatTick={formatTickY}
/>
</Html>
<ScaledSvg>
<MultiLine/>
</ScaledSvg>
<Html>
<GroupLabels/>
<SharedTooltip
formatTitle={formatTickX}
dataset={data}
/>
</Html>
</LayerCake>
</div>
<script>
import { getContext } from 'svelte';
const { data, xGet, yGet, zGet } = getContext('LayerCake');
$: path = values => {
return 'M' + values
.map(d => {
return $xGet(d) + ',' + $yGet(d);
})
.join('L');
};
</script>
<g class="line-group">
{#each $data as group}
<path
class='path-line'
d='{path(group.values)}'
stroke="{$zGet(group)}"
></path>
{/each}
</g>
<style>
.path-line {
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 3px;
}
</style>
<script>
import { getContext } from 'svelte';
const { xScale } = getContext('LayerCake');
export let gridlines = true;
export let tickMarks = false;
export let baseline = false;
export let snapTicks = false;
export let formatTick = d => d;
export let ticks = undefined;
export let yTick = 7;
$: isBandwidth = typeof $xScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$xScale.domain() :
typeof ticks === 'function' ?
ticks($xScale.ticks()) :
$xScale.ticks(ticks);
</script>
<div class='axis x-axis' class:snapTicks>
{#each tickVals as tick, i (tick)}
{#if gridlines !== false}
<div class="gridline" style='left:{$xScale(tick)}%;top: 0px;bottom: 0;'></div>
{/if}
{#if tickMarks === true}
<div class="tick-mark" style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;height:6px;bottom: -6px;'></div>
{/if}
<div
class='tick tick-{ i }'
style='left:{$xScale(tick) + (isBandwidth ? $xScale.bandwidth() / 2 : 0)}%;top:100%;'>
<div
class="text"
style='top:{(yTick)}px;'>{formatTick(tick)}</div>
</div>
{/each}
{#if baseline === true}
<div class="baseline" style='top: 100%;width: 100%;'></div>
{/if}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: .725em;
font-weight: 200;
}
.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.snapTicks .tick:last-child {
transform: translateX(-40%);
}
.axis.snapTicks .tick.tick-0 {
transform: translateX(40%);
}
</style>
<script>
import { getContext } from 'svelte';
const { padding, xRange, yScale } = getContext('LayerCake');
export let gridlines = true;
export let tickMarks = false;
export let baseline = false;
export let formatTick = d => d;
export let ticks = 4;
export let xTick = -4;
export let yTick = -1;
$: isBandwidth = typeof $yScale.bandwidth === 'function';
$: tickVals = Array.isArray(ticks) ? ticks :
isBandwidth ?
$yScale.domain() :
typeof ticks === 'function' ?
ticks($yScale.ticks()) :
$yScale.ticks(ticks);
</script>
<div class='axis y-axis' style='transform:translate(-{$padding.left}px, 0)'>
{#each tickVals as tick, i (tick)}
<div class='tick tick-{i}' style='top:{$yScale(tick) + (isBandwidth ? $yScale.bandwidth () / 2 : 0)}%;left:{$xRange[0]}%;'>
{#if gridlines !== false}
<div class="gridline" style='top:0;left:{isBandwidth ? $padding.left : 0}px;right:-{$padding.left + $padding.right}px;'></div>
{/if}
{#if baseline !== false && i === 0}
<div class="gridline baseline" style='top:0;left:{isBandwidth ? $padding.left : 0};right:-{$padding.left + $padding.right}px;'></div>
{/if}
{#if tickMarks === true}
<div class="tick-mark" style='top:0;left:{isBandwidth ? $padding.left - 6 : 0}px;width:6px;'></div>
{/if}
<div
class="text"
style='
top:{yTick}px;
left:{isBandwidth ? ($padding.left + xTick - 4) : 0}px;
transform: translate({isBandwidth ? '-100%' : 0}, {isBandwidth ? -50 - Math.floor($yScale.bandwidth() / -2) : '-100'}%);
'
>{formatTick(tick)}</div>
</div>
{/each}
</div>
<style>
.axis,
.tick,
.tick-mark,
.gridline,
.baseline,
.text {
position: absolute;
}
.axis {
width: 100%;
height: 100%;
}
.tick {
font-size: 12px;
width: 100%;
font-weight: 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>
<script>
import { getContext } from 'svelte';
import { max } from 'd3-array';
const { data, x, y, xScale, yScale, xRange, yRange, z } = getContext('LayerCake');
const cap = val => val.replace(/^\w/, d => d.toUpperCase());
$: left = values => $xScale(max(values, $x)) / Math.max(...$xRange);
$: top = values => $yScale(max(values, $y)) / Math.max(...$yRange);
</script>
{#each $data as group}
<div
class="label"
style="
top:{top(group.values) * 100}%;
left:{left(group.values) * 100}%;
"
>{cap($z(group))}</div>
{/each}
<style>
.label {
position: absolute;
transform: translate(-100%, -100%)translateY(1px);
font-size: 13px;
}
</style>
<script>
import { getContext } from 'svelte';
import { format } from 'd3-format';
import QuadTree from './QuadTree.percent-range.html.svelte';
const { data, width, yScale, config } = getContext('LayerCake');
const commas = format(',');
const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
export let formatTitle = d => d;
export let formatKey = d => titleCase(d);
export let formatValue = d => isNaN(+d) ? d : commas(d);
export let offset = -20;
export let dataset = undefined;
const w = 150;
const w2 = w / 2;
let top = 0;
function sortResult(result) {
if (Object.keys(result).length === 0) return [];
const rows = Object.keys(result).filter(d => d !== $config.x).map(key => {
return {
key,
value: result[key]
};
}).sort((a, b) => b.value - a.value);
return rows;
}
</script>
<style>
.tooltip {
position: absolute;
font-size: 13px;
pointer-events: none;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.85);
transform: translate(-50%, -100%);
padding: 5px;
z-index: 15;
}
.line {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
border-left: 1px dotted #666;
pointer-events: none;
}
.tooltip,
.line {
transition: left 250ms ease-out, top 250ms ease-out;
}
.title {
font-weight: bold;
}
.key {
color: #999;
}
</style>
<QuadTree
dataset={dataset || $data}
y='x'
let:x
let:y
let:visible
let:found
let:e
>
{@const foundSorted = sortResult(found)}
{#if visible === true}
<div
style="left:{(x / 100) * $width }px;"
class="line"></div>
<div
class="tooltip"
style="
width:{w}px;
display: { visible ? 'block' : 'none' };
top:calc({$yScale(foundSorted[0].value)}% + {offset}px);
left:{Math.min(Math.max(w2, (x / 100) * $width), $width - w2)}px;"
>
<div class="title">{formatTitle(found[$config.x])}</div>
{#each foundSorted as row}
<div class="row"><span class="key">{formatKey(row.key)}:</span> {formatValue(row.value)}</div>
{/each}
</div>
{/if}
</QuadTree>
<script>
import { getContext } from 'svelte';
import { quadtree } from 'd3-quadtree';
const { data, xGet, yGet, width, height } = getContext('LayerCake');
let visible = false;
let found = {};
let e = {};
export let x = 'x';
export let y = 'y';
export let searchRadius = undefined;
export let dataset = undefined;
$: xGetter = x === 'x' ? $xGet : $yGet;
$: yGetter = y === 'y' ? $yGet : $xGet;
function findItem (evt) {
e = evt;
const xLayerKey = `layer${x.toUpperCase()}`;
const yLayerKey = `layer${y.toUpperCase()}`;
const xLayerVal = (evt[xLayerKey] / (x === 'x' ? $width : $height)) * 100;
const yLayerVal = (evt[yLayerKey] / (y === 'y' ? $height : $width)) * 100;
found = finder.find(xLayerVal, yLayerVal, searchRadius) || {};
visible = Object.keys(found).length > 0;
}
$: finder = quadtree()
.extent([[-1, -1], [$width + 1, $height + 1]])
.x(xGetter)
.y(yGetter)
.addAll(dataset || $data);
</script>
<style>
.bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<div
class="bg"
on:mousemove="{findItem}"
on:mouseout="{() => visible = false}"
on:blur="{() => visible = false}"
></div>
<slot
x={xGetter(found) || 0}
y={yGetter(found) || 0}
{found}
{visible}
{e}
></slot>
month,apples,bananas,cherries,dates
2015-04-01,3840,1920,960,400
2015-03-01,1600,1440,960,400
2015-02-01,640,960,640,400
2015-01-01,320,480,640,400