use Plotly for charts; use pyproject.toml

Author: sheppard

.eslintignore

@@ -2,3 +2,4 @@ docs/
 build/
 rest_pandas/static/
 packages/analyst/index.js
+index.unpkg.js

.github/workflows/test.yml

@@ -40,6 +40,7 @@ jobs:
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
+        python -m pip install build
         python -m pip install flake8 wheel
         python -m pip install django==${{ matrix.django-version }}
         python -m pip install djangorestframework==${{ matrix.drf-version }}
@@ -59,6 +60,8 @@ jobs:
         flake8 . --count --exit-zero --max-complexity=10 --max-line-length=127 --statistics
     - name: Test with unittest
       run: python -m unittest discover -s tests -t . -v
+    - name: Test build
+      run: python -m build
   npm:
     name: "@wq/${{ matrix.package }}"
     runs-on: ubuntu-22.04
@@ -102,8 +105,9 @@ jobs:
     - name: Publish to Github Packages
       if: github.event_name == 'push'
       run: |
+         python -m pip install setuptools-scm
          ./set_dev_version.sh
-         cd packages/$PACKAGE
          echo "registry=https://npm.pkg.github.com/wq" > .npmrc
          echo "//npm.pkg.github.com/:_authToken=${{ secrets.GITHUB_TOKEN }}" >> .npmrc
+         cd packages/$PACKAGE
          npm publish

babel.config.cjs

@@ -2,9 +2,14 @@ module.exports = {
     plugins: [["@babel/plugin-transform-react-jsx", { useSpread: true }]],
     env: {
         test: {
-            presets: [
-                ["@babel/preset-env", { targets: { node: "current" } }],
-                "@babel/preset-react",
+            presets: [["@babel/preset-env", { targets: { node: "current" } }]],
+        },
+        build: {
+            plugins: [
+                [
+                    "transform-rename-import",
+                    { original: "^(.+?)\\.jsx$", replacement: "$1.js" },
+                ],
             ],
         },
     },

package-lock.json

@@ -6,35 +6,32 @@
         "build": "npm run build --workspaces --if-present",
         "jest": "jest --verbose",
         "rollup": "rollup",
+        "rollup-all": "npm run rollup --workspaces --if-present",
+        "babel": "babel --ignore **/__tests__/**",
         "prettier": "prettier --write .",
         "lint": "eslint ."
     },
     "devDependencies": {
-        "@babel/cli": "^7.20.7",
-        "@babel/eslint-parser": "^7.19.1",
-        "@babel/plugin-transform-runtime": "^7.19.6",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.18.6",
-        "@babel/runtime": "^7.20.7",
-        "@rollup/plugin-babel": "^6.0.3",
-        "@rollup/plugin-commonjs": "^24.0.0",
-        "@rollup/plugin-json": "^6.0.0",
-        "@rollup/plugin-node-resolve": "^15.0.1",
-        "@rollup/plugin-replace": "^5.0.2",
-        "@rollup/plugin-terser": "^0.3.0",
+        "@babel/cli": "^7.23.0",
+        "@babel/eslint-parser": "^7.22.15",
+        "@babel/plugin-transform-react-jsx": "^7.22.15",
+        "@babel/preset-env": "^7.23.2",
+        "@rollup/plugin-babel": "^6.0.4",
+        "@rollup/plugin-commonjs": "^25.0.5",
+        "@rollup/plugin-node-resolve": "^15.2.3",
+        "@rollup/plugin-replace": "^5.0.3",
+        "@rollup/plugin-terser": "^0.4.4",
+        "@wq/rollup-plugin": "^2.0.0-beta.1",
         "babel-plugin-direct-import": "^1.0.0",
-        "eslint": "^8.32.0",
-        "eslint-plugin-import": "^2.27.5",
-        "eslint-plugin-jest": "^27.2.1",
-        "eslint-plugin-react": "^7.32.1",
-        "jest": "^29.3.1",
-        "jest-environment-jsdom": "^29.4.3",
+        "babel-plugin-transform-rename-import": "^2.3.0",
+        "eslint": "^8.51.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-jest": "^27.4.2",
+        "eslint-plugin-react": "^7.33.2",
+        "jest": "^29.7.0",
         "jest-fetch-mock": "^3.0.3",
-        "prettier": "^2.8.3",
-        "rollup": "^3.10.0",
-        "rollup-plugin-analyzer": "^4.0.0",
-        "rollup-plugin-ignore": "^1.0.10"
+        "prettier": "^3.0.3",
+        "rollup": "^4.0.2"
     },
     "prettier": {
         "tabWidth": 4

package.json

@@ -1,3 +1,5 @@
-index.js
-index.js.map
-version.js
+/index.js
+/icons.js
+/hooks.js
+/components/
+/views/

packages/analyst/.gitignore

@@ -0,0 +1,3 @@
+*.tgz
+__tests__
+rollup.config.js

packages/analyst/.npmignore

@@ -1,18 +1,17 @@
 {
     "name": "@wq/analyst",
     "version": "2.0.0-alpha.0",
-    "description": "wq framework plugin providing interactive data tables for Django REST Pandas",
+    "description": "wq framework plugin providing interactive data tables & charts for Django REST Pandas",
     "main": "index.js",
-    "files": [
-        "src/",
-        "index.js"
-    ],
+    "unpkg": "dist/index.unpkg.js",
     "type": "module",
     "scripts": {
         "test": "cd ../../ && npm run jest packages/analyst",
+        "build": "NODE_ENV=build npm run babel && npm run prettier",
+        "babel": "cd ../../ && npm run babel -- packages/analyst/src --out-dir packages/analyst/",
         "prettier": "cd ../../ && npm run prettier",
         "lint": "cd ../../ && npm run lint",
-        "build": "cd ../../ && npm run rollup -- -c packages/analyst/rollup.config.js"
+        "rollup": "cd ../../ && npm run rollup -- -c packages/analyst/rollup.config.js"
     },
     "repository": {
         "type": "git",
@@ -31,11 +30,16 @@
     },
     "homepage": "https://django-rest-pandas.wq.io/@wq/analyst",
     "dependencies": {
-        "@wq/material": "^2.0.0-alpha.0",
-        "@wq/material-web": "^2.0.0-alpha.0",
-        "@wq/pandas": "^2.0.0-alpha.0"
+        "@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/rollup-plugin": "^1.3.0"
+        "@wq/material": "^2.0.0-alpha.1",
+        "@wq/material-web": "^2.0.0-alpha.2"
     }
 }

packages/analyst/package.json

@@ -19,13 +19,20 @@ const dir = `packages/${pkg.name.replace("@wq/", "")}`;
 const config = {
         input: `${dir}/src/index.js`,
         plugins: [
+            {
+                resolveId(id) {
+                    if (id === "@wq/pandas") {
+                        return "packages/pandas/src/index.js";
+                    }
+                },
+            },
             wq(),
             babel({
                 plugins: [
                     "@babel/transform-react-jsx",
                     [
                         "babel-plugin-direct-import",
-                        { modules: ["@mui/material", "@mui/icons-material"] },
+                        { modules: ["@mui/icons-material"] },
                     ],
                 ],
                 babelHelpers: "inline",
@@ -35,7 +42,6 @@ const config = {
             terser({ keep_fnames: /^([A-Z]|use[A-Z])/ }), // Preserve component & hook names
         ],
         output: {
-            file: `${dir}/index.js`,
             banner,
             format: "esm",
             sourcemap: true,
@@ -48,24 +54,6 @@ const config = {
     };
 
 export default [
-    // @wq/app plugin (npm main)
-    {
-        ...config,
-        external: [
-            "react",
-            "prop-types",
-            "@wq/react",
-            "@wq/pandas",
-            "@mui/material",
-            "@mui/icons-material",
-        ],
-        plugins: [
-            babel({
-                plugins: ["@babel/transform-react-jsx"],
-                babelHelpers: "inline",
-            }),
-        ],
-    },
     // wq.app staticfiles plugin (for rest-pandas python package)
     {
         ...config,
@@ -78,4 +66,23 @@ export default [
             },
         },
     },
+    // wq.app staticfiles plugin (unpkg)
+    {
+        ...config,
+        plugins: [
+            replace({
+                ...replaceConfig,
+                "./wq.js": "https://unpkg.com/wq",
+                "./chart.js": "https://unpkg.com/@wq/chart",
+            }),
+            ...config.plugins,
+        ],
+        output: {
+            ...config.output,
+            file: `${dir}/dist/index.unpkg.js`,
+            sourcemapPathTransform(path) {
+                return path.replace("./", "wq/analyst/");
+            },
+        },
+    },
 ];

packages/analyst/rollup.config.js

@@ -1,13 +1,18 @@
 import React, { useState } from "react";
-import { Menu, MenuItem } from "@mui/material";
+import { Menu, MenuItem, useMediaQuery } from "@mui/material";
 import { useComponents } from "@wq/react";
 import PropTypes from "prop-types";
 
 export default function AnalystDownload({ url, title, formats }) {
     const [anchorEl, setAnchorEl] = useState(null),
-        { Button, HorizontalView, Typography, View } = useComponents(),
+        { Button, IconButton, HorizontalView, Typography, View } =
+            useComponents(),
+        mobile = useMediaQuery((theme) => theme.breakpoints.down("md")),
+        DownloadButton = mobile ? IconButton : Button,
         menuId = "analyst-download",
-        baseUrl = url.replace(/\.[^.]+$/, "");
+        currentUrl = new URL(url, window.location.href),
+        baseUrl = currentUrl.pathname.replace(/\.[^.]+$/, ""),
+        params = currentUrl.search;
     return (
         <>
             <HorizontalView>
@@ -16,15 +21,16 @@ export default function AnalystDownload({ url, title, formats }) {
                 ) : (
                     <View />
                 )}
-                <Button
+                <DownloadButton
                     aria-controls={menuId}
                     onClick={(evt) => setAnchorEl(evt.target)}
                     icon="download"
                     variant="contained"
                     color="primary"
+                    title="Download Data"
                 >
                     Download Data
-                </Button>
+                </DownloadButton>
             </HorizontalView>
             <Menu
                 id={menuId}
@@ -36,7 +42,7 @@ export default function AnalystDownload({ url, title, formats }) {
                     <MenuItem
                         key={format}
                         component="a"
-                        href={`${baseUrl}.${format}`}
+                        href={`${baseUrl}.${format}${params}`}
                         target="_blank"
                     >
                         {label}

packages/analyst/src/components/AnalystDownload.js packages/analyst/src/components/AnalystDownload.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Formik } from "formik";
+import { Grid } from "@mui/material";
+import { AutoInput } from "@wq/react";
+import { View } from "@wq/material";
+import PropTypes from "prop-types";
+
+export default function AnalystForm({ form, options, setOptions }) {
+    return (
+        <Formik
+            initialValues={options}
+            enableReinitialize={true}
+            validate={setOptions}
+        >
+            <View sx={{ p: 2 }}>
+                <Grid container spacing={1} sx={{}}>
+                    {form.map((field) => (
+                        <GridInput key={field.name} {...field} />
+                    ))}
+                </Grid>
+            </View>
+        </Formik>
+    );
+}
+
+AnalystForm.propTypes = {
+    form: PropTypes.arrayOf(PropTypes.object),
+    options: PropTypes.object,
+    setOptions: PropTypes.func,
+};
+
+function GridInput(props) {
+    if (props.type === "hidden") {
+        return <AutoInput {...props} />;
+    } else if (props.fullwidth) {
+        return (
+            <Grid item xs={12} lg={6} xl={4}>
+                <AutoInput {...props} />
+            </Grid>
+        );
+    } else {
+        return (
+            <Grid item xs={12} md={6} lg={3} xl={2}>
+                <AutoInput {...props} />
+            </Grid>
+        );
+    }
+}
+
+GridInput.propTypes = {
+    type: PropTypes.string,
+    fullwidth: PropTypes.bool,
+};