8c3b1bccd3
* Nav bar and layout * Main catch all route that loads material from content * Data Literate: demo plus all associated components * content/data-literate/demo.mdx * components/* (pretty much all are related to demo) * lib/markdown.js, lib/mdxUtils.js * api/proxy.js to proxy remote urls (to handle CORs) * content/data-literate.md (DL home page - old data literate home page converted to markdown) * excel-viewer.js: excel viewer demo from data literate * package.json / yarn.lock * Nav: @headlessui/react @heroicons/react/outline @heroicons/react * CSV support for table: papaparse * Excel support for tables etc: xlsx * Vega: react-vega vega vega-lite * MDX: next-mdx-remote (yarn rm @next/mdx)
34 lines
665 B
JavaScript
34 lines
665 B
JavaScript
import { Vega, VegaLite } from 'react-vega'
|
|
|
|
export default function LineChart( { data=[] }) {
|
|
var tmp = data
|
|
if (Array.isArray(data)) {
|
|
tmp = data.map((r,i) => {
|
|
return { x: r[0], y: r[1] }
|
|
})
|
|
}
|
|
const vegaData = { "table": tmp }
|
|
const spec = {
|
|
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
|
|
"mark": "line",
|
|
"data": {
|
|
"name": "table"
|
|
},
|
|
"encoding": {
|
|
"x": {
|
|
"field": "x",
|
|
"timeUnit": "year",
|
|
"type": "temporal"
|
|
},
|
|
"y": {
|
|
"field": "y",
|
|
"type": "quantitative"
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<VegaLite data={ vegaData } spec={ spec } />
|
|
)
|
|
}
|