<script>
import { LayerCake, Svg, Html } from 'layercake';
import { scaleBand } from 'd3-scale';
import Column from './Column.svelte';
import AxisX from './AxisX.svelte';
import AxisY from './AxisY.svelte';
import Annotations from './AnnotationsData.html.svelte';
import Arrows from './Arrows.svelte';
import ArrowheadMarker from './ArrowheadMarker.svelte';
// In your local project, you will more likely be loading this as a csv and converting it to json using @rollup/plugin-dsv
import data from './groups.js';
const xKey = 'year';
const yKey = 'value';
const annotations = [
{
text: 'Example text...',
[xKey]: '1980',
[yKey]: 14,
dx: 15, // Optional pixel values
dy: -5,
arrows: [{
clockwise: false, // true or false, defaults to true
source: {
anchor: 'left-bottom', // can be `{left, middle, right},{top-middle-bottom}`
dx: -2,
dy: -7
},
target: {
// These can be expressed in our data units if passed under the data keys
[xKey]: '1980',
[yKey]: 4.5,
// Optional adjustments