Skip to content
Snippets Groups Projects
Commit 737f1220 authored by Emmanuel Raviart's avatar Emmanuel Raviart
Browse files

Prettify source code.

parent ab016122
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/lib/Waterfall/AxisX.svelte
+ 90
− 73
View file @ 737f1220
<script> <script>
import { getContext } from 'svelte'; import { getContext } from "svelte"
const { width, height, xScale, yRange } = getContext('LayerCake'); const { width, height, xScale, yRange } = getContext("LayerCake")
export let gridlines = true; export let gridlines = true
export let tickMarks = false; export let tickMarks = false
export let formatTick = d => d; export let formatTick = (d) => d
export let baseline = false; export let baseline = false
export let snapTicks = false; export let snapTicks = false
export let ticks = undefined; export let ticks = undefined
export let xTick = undefined; export let xTick = undefined
export let yTick = 16; export let yTick = 16
export let dxTick = 0; export let dxTick = 0
export let dyTick = 0; export let dyTick = 0
$: isBandwidth = typeof $xScale.bandwidth === 'function'; $: isBandwidth = typeof $xScale.bandwidth === "function"
$: tickVals = Array.isArray(ticks) ? ticks : $: tickVals = Array.isArray(ticks)
isBandwidth ? ? ticks
$xScale.domain() : : isBandwidth
typeof ticks === 'function' ? ? $xScale.domain()
ticks($xScale.ticks()) : : typeof ticks === "function"
$xScale.ticks(ticks); ? ticks($xScale.ticks())
: $xScale.ticks(ticks)
function textAnchor(i) { function textAnchor(i) {
if (snapTicks === true) { if (snapTicks === true) {
if (i === 0) { if (i === 0) {
return 'start'; return "start"
} }
if (i === tickVals.length - 1) { if (i === tickVals.length - 1) {
return 'end'; return "end"
} }
} }
return 'middle'; return "middle"
} }
</script> </script>
<g class='axis x-axis' class:snapTicks> <g class="axis x-axis" class:snapTicks>
{#each tickVals as tick, i} {#each tickVals as tick, i}
<g class='tick tick-{ i }' transform='translate({$xScale(tick)},{$yRange[0]})'> <g
class="tick tick-{i}"
transform="translate({$xScale(tick)},{$yRange[0]})"
>
{#if gridlines !== false} {#if gridlines !== false}
<line class="gridline" y1='{$height * -1}' y2='0' x1='0' x2='0'></line> <line class="gridline" y1={$height * -1} y2="0" x1="0" x2="0" />
{/if} {/if}
{#if tickMarks === true} {#if tickMarks === true}
<line class="tick-mark" y1='{0}' y2='{6}' x1='{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}' x2='{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}'></line> <line
class="tick-mark"
y1={0}
y2={6}
x1={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
x2={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
/>
{/if} {/if}
<text <text
x="{xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}" x={xTick || isBandwidth ? $xScale.bandwidth() / 2 : 0}
y='{yTick}' y={yTick}
dx='{dxTick}' dx={dxTick}
dy='{dyTick}' dy={dyTick}
text-anchor='{textAnchor(i)}'>{formatTick(tick)}</text> text-anchor={textAnchor(i)}>{formatTick(tick)}</text
>
</g> </g>
{/each} {/each}
{#if baseline === true} {#if baseline === true}
<line class="baseline" y1='{$height + 0.5}' y2='{$height + 0.5}' x1='0' x2='{$width}'></line> <line
class="baseline"
y1={$height + 0.5}
y2={$height + 0.5}
x1="0"
x2={$width}
/>
{/if} {/if}
</g> </g>
<style> <style>
.tick { .tick {
font-size: .725em; font-size: 0.725em;
font-weight: 200; font-weight: 200;
} }
......
src/lib/Waterfall/AxisY.svelte
+ 69
− 63
View file @ 737f1220
<script> <script>
import { getContext } from 'svelte'; import { getContext } from "svelte"
const { padding, xRange, yScale } = getContext('LayerCake'); const { padding, xRange, yScale } = getContext("LayerCake")
export let ticks = 4; export let ticks = 4
export let tickMarks = false; export let tickMarks = false
export let gridlines = true; export let gridlines = true
export let formatTick = d => d; export let formatTick = (d) => d
export let xTick = 0; export let xTick = 0
export let yTick = 0; export let yTick = 0
export let dxTick = 0; export let dxTick = 0
export let dyTick = -4; export let dyTick = -4
export let textAnchor = 'start'; export let textAnchor = "start"
$: isBandwidth = typeof $yScale.bandwidth === 'function'; $: isBandwidth = typeof $yScale.bandwidth === "function"
$: tickVals = Array.isArray(ticks) ? ticks : $: tickVals = Array.isArray(ticks)
isBandwidth ? ? ticks
$yScale.domain() : : isBandwidth
typeof ticks === 'function' ? ? $yScale.domain()
ticks($yScale.ticks()) : : typeof ticks === "function"
$yScale.ticks(ticks); ? ticks($yScale.ticks())
: $yScale.ticks(ticks)
</script> </script>
<g class='axis y-axis' transform='translate({-$padding.left}, 0)'> <g class="axis y-axis" transform="translate({-$padding.left}, 0)">
{#each tickVals as tick, i} {#each tickVals as tick, i}
<g class='tick tick-{tick}' transform='translate({$xRange[0] + (isBandwidth ? $padding.left : 0)}, {$yScale(tick)})'> <g
class="tick tick-{tick}"
transform="translate({$xRange[0] +
(isBandwidth ? $padding.left : 0)}, {$yScale(tick)})"
>
{#if gridlines !== false} {#if gridlines !== false}
<line <line
class="gridline" class="gridline"
x2='100%' x2="100%"
y1={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)} y1={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
y2={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)} y2={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
></line> />
{/if} {/if}
{#if tickMarks === true} {#if tickMarks === true}
<line <line
class='tick-mark' class="tick-mark"
x1='0' x1="0"
x2='{isBandwidth ? -6 : 6}' x2={isBandwidth ? -6 : 6}
y1={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)} y1={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
y2={yTick + (isBandwidth ? ($yScale.bandwidth() / 2) : 0)} y2={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
></line> />
{/if} {/if}
<text <text
x='{xTick}' x={xTick}
y='{yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}' y={yTick + (isBandwidth ? $yScale.bandwidth() / 2 : 0)}
dx='{isBandwidth ? -9 : dxTick}' dx={isBandwidth ? -9 : dxTick}
dy='{isBandwidth ? 4 : dyTick}' dy={isBandwidth ? 4 : dyTick}
style="text-anchor:{isBandwidth ? 'end' : textAnchor};" style="text-anchor:{isBandwidth ? 'end' : textAnchor};"
>{formatTick(tick)}</text> >{formatTick(tick)}</text
>
</g> </g>
{/each} {/each}
</g> </g>
<style> <style>
.tick { .tick {
font-size: .725em; font-size: 0.725em;
font-weight: 200; font-weight: 200;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment