[example][m] - start of a simple-example

examples/simple-example/components/drd/DRD.tsx

@@ -0,0 +1,40 @@
+import { MDXRemote } from "next-mdx-remote";
+import dynamic from "next/dynamic";
+import { Mermaid } from "@flowershow/core";
+
+import FrictionlessViewFactory from "./FrictionlessView";
+
+// 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: dynamic(() => import("./Table")),
+  mermaid: Mermaid,
+  // Excel: dynamic(() => import('../components/Excel')),
+  // TODO: try and make these dynamic ...
+  Vega: dynamic(() => import("./Vega")),
+  VegaLite: dynamic(() => import("./VegaLite")),
+  LineChart: dynamic(() => import("./LineChart")),
+} as any;
+
+export default function DRD({
+  source,
+  frictionless = {
+    views: [],
+    resources: [],
+  },
+}: {
+  source: any;
+  frictionless?: any;
+}) {
+  //  dynamic() can't be used inside of React rendering
+  //  as it needs to be marked in the top level of the
+  //  module for preloading to work
+  components.FrictionlessView = FrictionlessViewFactory({
+    views: frictionless.views,
+    resources: frictionless.resources,
+  });
+
+  return <MDXRemote {...source} components={components} />;
+}

examples/simple-example/components/drd/DebouncedInput.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+const DebouncedInput = ({
+  value: initialValue,
+  onChange,
+  debounce = 500,
+  ...props
+}) => {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    setValue(initialValue);
+  }, [initialValue]);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      onChange(value);
+    }, debounce);
+
+    return () => clearTimeout(timeout);
+  }, [value]);
+
+  return (
+    <input
+      {...props}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+};
+
+export default DebouncedInput;
+

examples/simple-example/components/drd/FrictionlessView.tsx

@@ -0,0 +1,55 @@
+// FrictionlessView is a factory because we have to
+// set the views and resources lists before using it
+
+import { convertSimpleToVegaLite } from "../../lib/viewSpecConversion";
+import VegaLite from "./VegaLite";
+
+export default function FrictionlessViewFactory({
+  views = [],
+  resources = [],
+}): ({
+  viewId,
+  fullWidth,
+}: {
+  viewId: number;
+  fullWidth?: boolean;
+}) => JSX.Element {
+  return ({ viewId, fullWidth = false }) => {
+    if (!(viewId in views)) {
+      console.error(`View ${viewId} not found`);
+      return <></>;
+    }
+    const view = views[viewId];
+
+    let resource;
+    if (resources.length > 1) {
+      resource = resources.find((r) => r.name === view.resourceName);
+    } else {
+      resource = resources[0];
+    }
+
+    if (!resource) {
+      console.error(`Resource not found for view id ${viewId}`);
+      return <></>;
+    }
+
+    let vegaSpec;
+    switch (view.specType) {
+      case "simple":
+        vegaSpec = convertSimpleToVegaLite(view, resource);
+        break;
+      // ... other conversions
+    }
+
+    vegaSpec.data = { url: resource.path };
+
+    return (
+      <VegaLite
+        fullWidth={fullWidth}
+        spec={vegaSpec}
+        actions={{ editor: false }}
+        downloadFileName={resource.name}
+      />
+    );
+  };
+}

examples/simple-example/components/drd/LineChart.tsx

@@ -0,0 +1,49 @@
+import { VegaLite } from "react-vega";
+
+export default function LineChart({
+  data = [],
+  fullWidth = false,
+  title = "",
+}) {
+  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",
+    title,
+    width: "container" as "container",
+    height: 300,
+    mark: {
+      type: "line" as "line",
+      color: "black",
+      strokeWidth: 1,
+      tooltip: true,
+    },
+    data: {
+      name: "table",
+    },
+    selection: {
+      grid: {
+        type: "interval" as "interval",
+        bind: "scales",
+      },
+    },
+    encoding: {
+      x: {
+        field: "x",
+        timeUnit: "year",
+        type: "temporal" as "temporal",
+      },
+      y: {
+        field: "y",
+        type: "quantitative" as "temporal",
+      },
+    },
+  };
+
+  return <VegaLite data={vegaData} spec={spec} />;
+}

examples/simple-example/components/drd/Table.tsx

@@ -0,0 +1,188 @@
+import {
+  createColumnHelper,
+  FilterFn,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronDoubleLeftIcon,
+  ChevronDoubleRightIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "@heroicons/react/24/solid";
+
+import React, { useEffect, useMemo, useState } from "react";
+
+import loadUrlProxied from "../../lib/loadUrlProxied";
+import parseCsv from "../../lib/parseCsv";
+import DebouncedInput from "./DebouncedInput";
+
+const Table = ({
+  data: ogData = [],
+  cols: ogCols = [],
+  csv = "",
+  url = "",
+}) => {
+  if (csv) {
+    const out = parseCsv(csv);
+    ogData = out.rows;
+    ogCols = out.fields;
+  }
+
+  const [data, setData] = React.useState(ogData);
+  const [cols, setCols] = React.useState(ogCols);
+  const [error, setError] = React.useState(""); //  TODO: add error handling
+
+  const tableCols = useMemo(() => {
+    const columnHelper = createColumnHelper();
+    return cols.map((c) =>
+      columnHelper.accessor(c.key, {
+        header: () => c.name,
+        cell: (info) => info.getValue(),
+      })
+    );
+  }, [data, cols]);
+
+  const [globalFilter, setGlobalFilter] = useState("");
+
+  const table = useReactTable({
+    data,
+    columns: tableCols,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      globalFilter,
+    },
+    globalFilterFn: globalFilterFn,
+    onGlobalFilterChange: setGlobalFilter,
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+  });
+
+  useEffect(() => {
+    if (url) {
+      loadUrlProxied(url).then((data) => {
+        const { rows, fields } = parseCsv(data);
+        setData(rows);
+        setCols(fields);
+      });
+    }
+  }, [url]);
+
+  return (
+    <div>
+      <DebouncedInput
+        value={globalFilter ?? ""}
+        onChange={(value) => setGlobalFilter(String(value))}
+        className="p-2 text-sm shadow border border-block"
+        placeholder="Search all columns..."
+      />
+      <table>
+        <thead>
+          {table.getHeaderGroups().map((hg) => (
+            <tr key={hg.id}>
+              {hg.headers.map((h) => (
+                <th key={h.id}>
+                  <div
+                    {...{
+                      className: h.column.getCanSort()
+                        ? "cursor-pointer select-none"
+                        : "",
+                      onClick: h.column.getToggleSortingHandler(),
+                    }}
+                  >
+                    {flexRender(h.column.columnDef.header, h.getContext())}
+                    {{
+                      asc: (
+                        <ArrowUpIcon className="inline-block ml-2 h-4 w-4" />
+                      ),
+                      desc: (
+                        <ArrowDownIcon className="inline-block ml-2 h-4 w-4" />
+                      ),
+                    }[h.column.getIsSorted() as string] ?? (
+                      <div className="inline-block ml-2 h-4 w-4" />
+                    )}
+                  </div>
+                </th>
+              ))}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {table.getRowModel().rows.map((r) => (
+            <tr key={r.id}>
+              {r.getVisibleCells().map((c) => (
+                <td key={c.id}>
+                  {flexRender(c.column.columnDef.cell, c.getContext())}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="flex gap-2 items-center justify-center">
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanPreviousPage() ? "opacity-25" : "opacity-100"
+          }`}
+          onClick={() => table.setPageIndex(0)}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronDoubleLeftIcon />
+        </button>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanPreviousPage() ? "opacity-25" : "opacity-100"
+          }`}
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          <ChevronLeftIcon />
+        </button>
+        <span className="flex items-center gap-1">
+          <div>Page</div>
+          <strong>
+            {table.getState().pagination.pageIndex + 1} of{" "}
+            {table.getPageCount()}
+          </strong>
+        </span>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanNextPage() ? "opacity-25" : "opacity-100"
+          }`}
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronRightIcon />
+        </button>
+        <button
+          className={`w-6 h-6 ${
+            !table.getCanNextPage() ? "opacity-25" : "opacity-100"
+          }`}
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          <ChevronDoubleRightIcon />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+const globalFilterFn: FilterFn<any> = (row, columnId, filterValue: string) => {
+  const search = filterValue.toLowerCase();
+
+  let value = row.getValue(columnId) as string;
+  if (typeof value === "number") value = String(value);
+
+  return value?.toLowerCase().includes(search);
+};
+
+export default Table;

examples/simple-example/components/drd/Vega.tsx

@@ -0,0 +1,4 @@
+import { Vega as VegaOg } from "react-vega";
+export default function Vega(props) {
+  return <VegaOg {...props} />;
+}

examples/simple-example/components/drd/VegaLite.tsx

@@ -0,0 +1,4 @@
+import { VegaLite as VegaOg } from "react-vega";
+export default function Vega(props) {
+  return <VegaOg {...props} />;
+}