<script lang="ts">
import * as d3 from 'd3';
    import { onMount } from 'svelte';

export let data: {date: string, avgTemp: number}[] = [
  {date: "2023-01-01", avgTemp: 22},
  {date: "2023-01-02", avgTemp: 19},
  {date: "2023-01-03", avgTemp: 16},
  {date: "2023-01-04", avgTemp: 9},
  {date: "2023-01-05", avgTemp: 4},
  {date: "2023-01-06", avgTemp: 5},
  {date: "2023-01-07", avgTemp: 5},
  {date: "2023-01-08", avgTemp: 2},
  {date: "2023-01-09", avgTemp: 4},
  {date: "2023-01-10", avgTemp: 1},
  {date: "2023-01-11", avgTemp: 6},
  {date: "2023-01-12", avgTemp: 6},
  {date: "2023-01-13", avgTemp: -1},
  {date: "2023-01-14", avgTemp: -3},
  {date: "2023-01-15", avgTemp: -4},
  {date: "2023-01-16", avgTemp: -1},
  {date: "2023-01-17", avgTemp: -3},
  {date: "2023-01-18", avgTemp: -2},
  {date: "2023-01-19", avgTemp: 0},
  {date: "2023-01-20", avgTemp: -1},
  {date: "2023-01-21", avgTemp: 1},
  {date: "2023-01-22", avgTemp: 0},
  {date: "2023-01-23", avgTemp: -2},
];

let vis: Element;

onMount(() => {
  const xScale = d3.scaleBand().rangeRound([0, 500]).padding(0.1);
  const yScale = d3.scaleLinear().domain([-10, 40]).range([200, 0]);
  const container = d3.select(vis);
  container
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('width', xScale.bandwidth())
    .attr('heigth', (data) => yScale(data.avgTemp))
    .attr('fill', 'black')
})
</script>
<main>
  <svg bind:this={vis}></svg>
</main>
