[Data literate][m]: Copy and refactor data-literate into minimal template folder

2022-03-14 12:55:51 +01:00
parent 603ae2c7b3
commit 86eb6c2744
20 changed files with 51890 additions and 0 deletions
--- a/examples/data-literate-template/components/DataLiterate.js
+++ b/examples/data-literate-template/components/DataLiterate.js
@@ -0,0 +1,41 @@
+import Layout from './Layout'
+import Head from 'next/head'
+import Excel from './Excel'
+import Table from './Table'
+import TableGrid from './TableGrid'
+import LineChart from './LineChart'
+import MetaData from './Metadata'
+import { MDXProvider } from '@mdx-js/react'
+import { Vega, VegaLite } from 'react-vega'
+
+// Custom components/renderers to pass to MDX.
+// Since the MDX files aren't loaded by webpack, they have no knowledge of how
+// to handle import statements. Instead, you must include components in scope
+// here.
+const components = {
+  Table,
+  Excel,
+  Vega,
+  VegaLite,
+  LineChart,
+  Head,
+  TableGrid,
+  MetaData,
+}
+
+
+export default function DataLiterate({ children }) {
+  const { Component, pageProps } = children
+
+  return (
+    <Layout>
+      <main>
+        <MDXProvider components={components}>
+          <div className="prose mx-auto">
+            <Component {...pageProps} />
+          </div>
+        </MDXProvider>
+      </main>
+    </Layout>
+  )
+}
--- a/examples/data-literate-template/components/Excel.js
+++ b/examples/data-literate-template/components/Excel.js
@@ -0,0 +1,74 @@
+import axios from 'axios'
+import XLSX from 'xlsx'
+import React, { useEffect, useState } from 'react'
+
+import Table from './Table'
+
+export default function Excel ({ src='' }) {
+	const [data, setData] = React.useState([])
+	const [cols, setCols] = React.useState([])
+	const [workbook, setWorkbook] = React.useState(null)
+	const [error, setError] = React.useState('')
+  const [hasMounted, setHasMounted] = React.useState(0)
+
+  // so this is here so we re-render this in the browser
+  // and not just when we build the page statically in nextjs
+  useEffect(() => {
+    if (hasMounted==0) {
+      handleUrl(src)
+    }
+    setHasMounted(1)
+  })
+  
+  function handleUrl(url) {
+    // if url is external may have CORS issue so we proxy it ...
+    if (url.startsWith('http')) {
+      const PROXY_URL = window.location.origin + '/api/proxy'
+      url = PROXY_URL + '?url=' + encodeURIComponent(url)
+    }
+    axios.get(url, {
+      responseType: 'arraybuffer'
+    }).then((res) => {
+      let out = new Uint8Array(res.data)
+      let workbook = XLSX.read(out, {type: "array"})
+      // Get first worksheet
+      const wsname = workbook.SheetNames[0]
+      const ws = workbook.Sheets[wsname]
+      // Convert array of arrays
+      const datatmp = XLSX.utils.sheet_to_json(ws, {header:1})
+      const colstmp = make_cols(ws['!ref'])
+      setData(datatmp)
+      setCols(colstmp)
+      setWorkbook(workbook)
+    }).catch((e) => {
+      setError(e.message)
+    })
+  }
+
+  return (
+    <>
+      {error &&
+        <div>
+          There was an error loading the excel file at {src}:
+          <p>{error}</p>
+        </div>
+      }
+      {workbook &&
+        <ul>
+           {workbook.SheetNames.map((value, index) => {
+            return <li key={index}>{value}</li>
+        })}
+        </ul>
+      }
+      <Table data={data} cols={cols} />
+    </>
+  )
+}
+
+/* generate an array of column objects */
+const make_cols = refstr => {
+	let o = [], C = XLSX.utils.decode_range(refstr).e.c + 1
+	for(var i = 0; i < C; ++i) o[i] = {name:XLSX.utils.encode_col(i), key:i}
+	return o
+}
+
--- a/examples/data-literate-template/components/Layout.js
+++ b/examples/data-literate-template/components/Layout.js
@@ -0,0 +1,29 @@
+import Link from 'next/link'
+import Head from 'next/head'
+
+export default function Layout({ children, title = 'Home' }) {
+  return (
+    <>
+      <Head>
+        <title>Portal.JS - {title}</title>
+        <link rel="icon" href="/favicon.ico" />
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+      </Head>
+      <div className="mx-auto p-6">
+        {children}
+      </div>
+      <footer className="flex items-center justify-center w-full h-24 border-t">
+        <a
+          className="flex items-center justify-center"
+          href="https://datopian.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Built by{' '}
+          <img src="/datopian-logo.png" alt="Datopian Logo" className="h-6 ml-2" />
+        </a>
+      </footer>
+    </>
+  )
+}
--- a/examples/data-literate-template/components/LineChart.js
+++ b/examples/data-literate-template/components/LineChart.js
@@ -0,0 +1,33 @@
+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 } />
+  )
+}
--- a/examples/data-literate-template/components/Metadata.js
+++ b/examples/data-literate-template/components/Metadata.js
@@ -0,0 +1,18 @@
+
+
+export default function MetaData({ title, author, description }) {
+    return (
+        <header>
+            <div className="mb-6">
+                <h1>{title}</h1>
+                {author && (
+                    <div className="-mt-6"><p className="opacity-60 pl-1">{author}</p></div>
+                )}
+                {description && (
+                    <p className="description">{description}</p>
+                )}
+            </div>
+        </header>
+    )
+
+}
--- a/examples/data-literate-template/components/Table.js
+++ b/examples/data-literate-template/components/Table.js
@@ -0,0 +1,83 @@
+import axios from 'axios'
+import React, { useEffect, useState } from 'react'
+
+const papa = require("papaparse")
+
+/*
+  Simple HTML Table
+  usage: <OutTable data={data} cols={cols} />
+    data:Array<Array<any> >;
+    cols:Array<{name:string, key:number|string}>;
+*/
+export default function Table({ data=[], cols=[], csv='', url='' }) {
+  if (csv) {
+    const out = parseCsv(csv)
+    data = out.rows
+    cols = out.cols
+  }
+
+	const [ourdata, setData] = React.useState(data)
+	const [ourcols, setCols] = React.useState(cols)
+	const [error, setError] = React.useState('')
+
+  useEffect(() => {
+    if (url) {
+      loadUrl(url)
+    }
+  }, [url])
+
+  function loadUrl(path) {
+    // HACK: duplicate of Excel code - maybe refactor
+    // if url is external may have CORS issue so we proxy it ...
+    if (url.startsWith('http')) {
+      const PROXY_URL = window.location.origin + '/api/proxy'
+      url = PROXY_URL + '?url=' + encodeURIComponent(url)
+    }
+    axios.get(url).then((res) => {
+      const { rows, fields } = parseCsv(res.data)      
+      setData(rows)
+      setCols(fields)
+    })
+  }
+
+	return (
+    <>
+      <SimpleTable data={ourdata} cols={ourcols} />
+    </>
+	)
+}
+
+/*
+  Simple HTML Table
+  usage: <OutTable data={data} cols={cols} />
+    data:Array<Array<any> >;
+    cols:Array<{name:string, key:number|string}>;
+*/
+function SimpleTable({ data=[], cols=[] }) {
+	return (
+		<div className="table-responsive">
+			<table className="table table-striped">
+				<thead>
+					<tr>{cols.map((c) => <th key={c.key}>{c.name}</th>)}</tr>
+				</thead>
+				<tbody>
+					{data.map((r,i) => <tr key={i}>
+						{cols.map(c => <td key={c.key}>{ r[c.key] }</td>)}
+					</tr>)}
+				</tbody>
+			</table>
+		</div>
+	)
+}
+
+function parseCsv(csv) {
+  csv = csv.trim()
+  const rawdata = papa.parse(csv, {header: true})
+  const cols = rawdata.meta.fields.map((r,i) => {
+    return { key: r, name: r }
+  })
+  return {
+    rows: rawdata.data,
+    fields: cols
+  }
+}
--- a/examples/data-literate-template/components/TableGrid.js
+++ b/examples/data-literate-template/components/TableGrid.js
@@ -0,0 +1,81 @@
+import axios from 'axios'
+import React, { useEffect } from 'react'
+import { Table } from 'portal'
+
+const papa = require("papaparse")
+
+/*
+  Portaljs Table Grid
+  usage: <TableGrid url="" data={data} cols={cols} csv="" />
+*/
+export default function TableGrid({ data = [], cols = [], csv = '', url = '' }) {
+
+  if (csv) {
+    const out = parseCsv(csv)
+    data = prepareRowsForPortalJsTable(out.rows)
+    cols = out.fields
+  }
+
+  if (cols) {
+    cols = prepareColsForPortalJsTable(cols)
+  }
+
+  const [ourdata, setData] = React.useState(data)
+  const [ourcols, setCols] = React.useState(cols)
+
+  useEffect(() => {
+    if (url) {
+      loadUrl(url)
+    }
+  }, [url])
+
+  function loadUrl(path) {
+    // HACK: duplicate of Excel code - maybe refactor
+    // if url is external may have CORS issue so we proxy it ...
+    if (url.startsWith('http')) {
+      const PROXY_URL = window.location.origin + '/api/proxy'
+      url = PROXY_URL + '?url=' + encodeURIComponent(url)
+    }
+    axios.get(url).then((res) => {
+      const { rows, fields } = parseCsv(res.data)
+      setData(rows)
+      setCols(prepareColsForPortalJsTable(fields))
+    })
+  }
+  return (
+    <div>
+      <Table columns={ourcols} data={ourdata} height={"400px"} />
+    </div>
+  )
+}
+
+function prepareColsForPortalJsTable(cols) {
+  return cols.map((col) => {
+    return {
+      field: col.key,
+      headerName: col.name,
+      flex: true
+    }
+  })
+}
+
+function prepareRowsForPortalJsTable(rows) {
+  return rows.map((r) => {
+    return {
+      ...r,
+      id: r.id || r.key
+    }
+  })
+}
+
+function parseCsv(csv) {
+  csv = csv.trim()
+  const rawdata = papa.parse(csv, { header: true })
+  const cols = rawdata.meta.fields.map((r, i) => {
+    return { key: r, name: r }
+  })
+  return {
+    rows: rawdata.data,
+    fields: cols
+  }
+}