<script>
import { draw, fly, fade } from "svelte/transition";
import { hovered_data, positions } from './stores.js';
import { tweened } from 'svelte/motion'
import { interpolateString, interpolateLab, interpolateTransformCss } from 'd3-interpolate';
import * as easings from 'svelte/easing';
import * as d3 from "d3";
import {data} from './data.js';
import { get_line_paths, transform_df, d3_data, rescale } from './utils.js';
import Path from './Path.svelte';
import Axis from './Axis.svelte';
import Tooltip from './Tooltip.svelte';
import Cumulative from './Cumulative.svelte';
import RangeSlider from "svelte-range-slider-pips";
import TooltipLegend from './TooltipLegend.svelte';
// width and height of graph
let width = 800;
let height = 400;
const margin = 50;
const innerHeight = height - margin - margin;
let hover_legend;
// fixed colours for each category
const colours = ["#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "#8bd3c7"]
;
let categories = {
"google": true,
"(direct)": true,
"bing": true,
"duckduckgo": true,
"ecosia.org": true
}