@wq/analyst v3

Author: sheppard

Diff for: package-lock.json

@@ -1,6 +1,6 @@
+/Analyst.js
 /index.js
 /icons.js
 /hooks.js
 /components/
-/views/
 /version.js

Diff for: packages/analyst/.gitignore

@@ -8,12 +8,12 @@
     "files": [
         "src",
         "dist",
+        "Analyst.js",
         "index.js",
         "icons.js",
         "hooks.js",
         "version.js",
-        "components",
-        "views"
+        "components"
     ],
     "scripts": {
         "test": "cd ../../ && npm run jest packages/analyst",
@@ -42,14 +42,6 @@
     "dependencies": {
         "@wq/chart": "^2.0.0-alpha.0",
         "@wq/pandas": "^2.0.0-alpha.0",
-        "mustache": "^4.2.0"
-    },
-    "peerDependencies": {
-        "@wq/material": "*",
-        "@wq/material-web": "*"
-    },
-    "devDependencies": {
-        "@wq/material": "^2.1.0",
-        "@wq/material-web": "^2.1.0"
+        "@wq/react": "^3.0.0-a1-dev4.g2569553"
     }
 }

Diff for: packages/analyst/package.json

@@ -0,0 +1,114 @@
+import React from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
+import { useAnalyst } from "./hooks.js";
+import { AnalystIcon, Table, Series, Scatter, Boxplot } from "./icons.js";
+import PropTypes from "prop-types";
+
+import {
+    AnalystDownload,
+    AnalystTable,
+    AnalystForm,
+    AnalystSeries,
+    AnalystScatter,
+    AnalystBoxplot,
+} from "./components/index.js";
+
+const AnalystDefaults = {
+    components: {
+        AnalystDownload,
+        AnalystForm,
+        AnalystTable,
+        AnalystSeries,
+        AnalystScatter,
+        AnalystBoxplot,
+    },
+    icons: {
+        Analyst: AnalystIcon,
+        Table,
+        Series,
+        Scatter,
+        Boxplot,
+    },
+};
+
+const AnalystFallback = {
+    components: {
+        View: createFallbackComponent("View", "@wq/material"),
+        Typography: createFallbackComponent("Typography", "@wq/material"),
+    },
+};
+
+function Analyst({ children, ...props }) {
+    const { View, Typography, AnalystDownload, AnalystForm, AnalystTable } =
+            useComponents(),
+        {
+            url,
+            data,
+            fields,
+            error,
+            title,
+            formats,
+            initial_rows,
+            initial_order,
+            id_column,
+            id_url_prefix,
+            form,
+            options,
+            setOptions,
+            ActiveMode = AnalystTable,
+        } = useAnalyst(props);
+
+    if (error) {
+        return (
+            <View sx={{ p: 2 }}>
+                {title && <Typography variant="h5">{title}</Typography>}
+                {children}
+                <Typography>{error}</Typography>
+            </View>
+        );
+    }
+
+    return (
+        <View
+            style={{
+                flex: 1,
+                display: "flex",
+                flexDirection: "column",
+                overflow: "hidden",
+            }}
+        >
+            {formats && (
+                <AnalystDownload url={url} title={title} formats={formats} />
+            )}
+            {!formats && title && <Typography variant="h5">{title}</Typography>}
+            {children}
+            {form && (
+                <AnalystForm
+                    form={form}
+                    options={options}
+                    setOptions={setOptions}
+                />
+            )}
+            {ActiveMode && (
+                <ActiveMode
+                    data={data}
+                    options={options}
+                    fields={fields}
+                    initial_rows={initial_rows}
+                    initial_order={initial_order}
+                    id_column={id_column}
+                    id_url_prefix={id_url_prefix}
+                />
+            )}
+        </View>
+    );
+}
+
+Analyst.propTypes = {
+    children: PropTypes.node,
+};
+
+export default withWQ(Analyst, {
+    defaults: AnalystDefaults,
+    fallback: AnalystFallback,
+});

Diff for: packages/analyst/src/Analyst.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Boxplot } from "@wq/chart";
+import PropTypes from "prop-types";
+
+export default function AnalystBoxplot({ data, options }) {
+    return (
+        <Boxplot
+            datasets={data && data.datasets}
+            x={options.date}
+            y={options.value}
+            group={options.group}
+        />
+    );
+}
+
+AnalystBoxplot.propTypes = {
+    data: PropTypes.object,
+    options: PropTypes.object,
+};
+
+AnalystBoxplot.getAnalystMode = (data, columnTypes) => {
+    if (columnTypes.numeric) {
+        return {
+            name: "boxplot",
+            label: "Box",
+            dateColumns: columnTypes.date,
+            valueColumns: columnTypes.numeric,
+        };
+    }
+};

Diff for: packages/analyst/src/components/AnalystBoxplot.jsx

@@ -1,9 +1,23 @@
 import React, { useState } from "react";
 import { Menu, MenuItem, useMediaQuery } from "@mui/material";
-import { useComponents } from "@wq/react";
+import { Download } from "../icons";
+import { useComponents, withWQ, createFallbackComponents } from "@wq/react";
 import PropTypes from "prop-types";
 
-export default function AnalystDownload({ url, title, formats }) {
+const AnalystDownloadDefaults = {
+    icons: {
+        Download,
+    },
+};
+
+const AnalystDownloadFallback = {
+    components: createFallbackComponents(
+        ["Button", "IconButton", "HorizontalView", "Typography", "View"],
+        "@wq/material",
+    ),
+};
+
+function AnalystDownload({ url, title, formats }) {
     const [anchorEl, setAnchorEl] = useState(null),
         { Button, IconButton, HorizontalView, Typography, View } =
             useComponents(),
@@ -58,3 +72,8 @@ AnalystDownload.propTypes = {
     title: PropTypes.string,
     formats: PropTypes.object,
 };
+
+export default withWQ(AnalystDownload, {
+    defaults: AnalystDownloadDefaults,
+    fallback: AnalystDownloadFallback,
+});

Diff for: packages/analyst/src/components/AnalystDownload.jsx

@@ -1,35 +1,72 @@
-import React from "react";
-import { Formik } from "formik";
-import { Grid } from "@mui/material";
-import { AutoInput } from "@wq/react";
-import { View } from "@wq/material";
+import React, { useCallback } from "react";
+import { useComponents, withWQ, createFallbackComponent } from "@wq/react";
 import PropTypes from "prop-types";
 
-export default function AnalystForm({ form, options, setOptions }) {
+const AnalystFormFallback = {
+    components: {
+        Grid: createFallbackComponent("Grid", "@wq/material"),
+        View: createFallbackComponent("View", "@wq/material"),
+        AutoForm: createFallbackComponent("AutoForm", "@wq/form", "AutoForm"),
+        AutoInput: createFallbackComponent("AutoInput", "@wq/form", "AutoForm"),
+    },
+};
+
+function AnalystForm({ form, options, setOptions, wq, children }) {
+    const useValidate = useCallback(() => {
+            function validate(newOptions) {
+                setOptions(newOptions);
+            }
+            validate.onChange = true;
+            return validate;
+        }, [setOptions]),
+        { AutoForm, AutoInput } = useComponents();
+
     return (
-        <Formik
-            initialValues={options}
-            enableReinitialize={true}
-            validate={setOptions}
+        <AutoForm
+            form={form}
+            data={options}
+            hideSubmit
+            wq={{
+                ...wq,
+                components: {
+                    ...(wq || {}).components,
+                    AutoInput: GridInput,
+                    FormRoot: GridFormRoot,
+                    BaseAutoInput: AutoInput,
+                    useValidate,
+                },
+            }}
         >
-            <View sx={{ p: 2 }}>
-                <Grid container spacing={1} sx={{}}>
-                    {form.map((field) => (
-                        <GridInput key={field.name} {...field} />
-                    ))}
-                </Grid>
-            </View>
-        </Formik>
+            {children}
+        </AutoForm>
     );
 }
 
 AnalystForm.propTypes = {
     form: PropTypes.arrayOf(PropTypes.object),
     options: PropTypes.object,
     setOptions: PropTypes.func,
+    wq: PropTypes.object,
+    children: PropTypes.node,
+};
+
+function GridFormRoot({ children }) {
+    const { View, Grid } = useComponents();
+    return (
+        <View sx={{ p: 2 }}>
+            <Grid container spacing={1}>
+                {children}
+            </Grid>
+        </View>
+    );
+}
+
+GridFormRoot.propTypes = {
+    children: PropTypes.node,
 };
 
 function GridInput(props) {
+    const { BaseAutoInput: AutoInput, Grid } = useComponents();
     if (props.type === "hidden") {
         return <AutoInput {...props} />;
     } else if (props.fullwidth) {
@@ -51,3 +88,5 @@ GridInput.propTypes = {
     type: PropTypes.string,
     fullwidth: PropTypes.bool,
 };
+
+export default withWQ(AnalystForm, { fallback: AnalystFormFallback });

Diff for: packages/analyst/src/components/AnalystForm.jsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Scatter } from "@wq/chart";
+import PropTypes from "prop-types";
+
+export default function AnalystScatter({ data, options }) {
+    return (
+        <Scatter
+            datasets={data && data.datasets}
+            x={options.value}
+            y={options.value2}
+            label={options.date}
+        />
+    );
+}
+
+AnalystScatter.propTypes = {
+    data: PropTypes.object,
+    options: PropTypes.object,
+};
+
+AnalystScatter.getAnalystMode = (data, columnTypes) => {
+    if (
+        columnTypes.date &&
+        columnTypes.numeric &&
+        columnTypes.numeric.length > 1
+    ) {
+        return {
+            name: "scatter",
+            label: "Scatter",
+            dateColumns: columnTypes.date,
+            valueColumns: columnTypes.numeric,
+        };
+    }
+};

Diff for: packages/analyst/src/components/AnalystScatter.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { Series } from "@wq/chart";
+import PropTypes from "prop-types";
+
+export default function AnalystSeries({ data, options }) {
+    return (
+        <Series
+            datasets={data && data.datasets}
+            x={options.date}
+            y={options.value}
+        />
+    );
+}
+
+AnalystSeries.propTypes = {
+    data: PropTypes.object,
+    options: PropTypes.object,
+};
+
+AnalystSeries.getAnalystMode = (data, columnTypes) => {
+    if (columnTypes.date && columnTypes.numeric) {
+        return {
+            name: "series",
+            label: "Series",
+            dateColumns: columnTypes.date,
+            valueColumns: columnTypes.numeric,
+        };
+    }
+};