0.0.1 • Published 2 years ago

somehow-line v0.0.1

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

somehow-line

flexible svelte linechart component

it uses spacetime to parse date-times.

work-in-progress

<script>
  import { Graph, Area, XAxis, YAxis, scale } from './src'
  let points=[
    {x:'1970-02-04',y:200},
    {x:'1971-02-04',y:250},
    {x:'1980-01-01',y:260},
  ]
  let xScale = (str) => scale({ 
    world: [0, 100], 
    minmax: [spacetime('1967-01-01').epoch, spacetime.now().epoch] 
  }, spacetime(String(str)).epoch)
  let yScale = (n) => scale({ world: [0, 100], minmax: [300, 0] }, n) // reversed
</script>

  <div class="container">
    <Graph start="1970" end="Dec 30 2022" height="700">
      <Area {points} {xScale} {yScale} />
    </Graph>
    <XAxis {xScale} ticks={['1970-01-01', '1980-01-01','1990-01-01']}/>
    <YAxis {yScale} ticks={[100, 200,300]}/>
  </div>

MIT