Merge pull request #2888 from the-deep/project/reporting-module-charts

Project/reporting module charts

.babelrc

@@ -2,18 +2,18 @@
     "presets": [
         "@babel/preset-env",
         "@babel/preset-react",
-        "@babel/preset-typescript",
+        "@babel/preset-typescript"
     ],
     "plugins": [
         // Reuse babel's injected headers
         "@babel/plugin-transform-runtime",
 
         // Polyfill
         ["polyfill-corejs3", {
-            "method": "usage-global",
+            "method": "usage-global"
         }],
         ["polyfill-regenerator", {
-            "method": "usage-global",
+            "method": "usage-global"
         }],
 
         // Handle absolute imports
@@ -31,8 +31,8 @@
                 "#redirects": "./app/redirects",
                 "#utils": "./app/utils",
                 "#hooks": "./app/hooks",
-                "#types": "./app/types",
-            },
+                "#types": "./app/types"
+            }
         }],
 
         // Extends javascript support
@@ -43,6 +43,6 @@
         // "@babel/plugin-transform-react-inline-elements",
 
         // Extends graphql support
-        'babel-plugin-graphql-tag',
-    ],
+        "babel-plugin-graphql-tag"
+    ]
 }

.eslintrc.js

@@ -63,6 +63,12 @@ const config = {
 
         'import/extensions': ['off', 'never'],
         'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+        'import/no-unresolved': [
+            'error',
+            {
+                ignore: ['^geojson+'],
+            },
+        ],
 
         'jsx-a11y/anchor-is-valid': ['error', {
             components: ['Link'],

.madgerc

@@ -1,6 +1,6 @@
 {
     "baseDir": ".",
     "fileExtensions": ["js", "ts", "jsx", "tsx"],
-    "webackConfig": "./webpack.config.js",
+    "webpackConfig": "./webpack.config.js",
     "tsConfig": "./tsconfig.json"
 }

app/Base/index.tsx

@@ -14,6 +14,7 @@ import { setMapboxToken } from '@togglecorp/re-map';
 import ReactGA from 'react-ga4';
 
 import '@the-deep/deep-ui/build/esm/index.css';
+import '@the-deep/reporting-module-components/build/esm/index.css';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
 import Init from '#base/components/Init';

app/Base/styles.css

@@ -55,3 +55,7 @@
         font-weight: var(--dui-font-weight-regular);
     }
 }
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+}

app/Base/utils/restRequest.ts

@@ -16,6 +16,9 @@ import {
 } from '#base/configs/restRequest';
 import { deepEnvironment } from '#base/configs/env';
 
+const CONTENT_TYPE_JSON = 'application/json';
+// const CONTENT_TYPE_STREAM = 'application/octet-stream';
+
 function getCookie(name: string) {
     const value = `; ${document.cookie}`;
     const parts = value.split(`; ${name}=`);
@@ -95,6 +98,7 @@ function alterResponse(errors: ErrorFromServer['errors']): Error['value']['faram
 }
 
 export interface OptionBase {
+    isFile?: boolean;
     formData?: boolean;
     failureMessage?: React.ReactNode;
 }
@@ -160,6 +164,18 @@ export const processDeepOptions: DeepContextInterface['transformOptions'] = (
             body: requestBody,
             ...otherOptions,
         };
+    } else if (requestOptions.isFile) {
+        finalOptions = {
+            method: 'GET',
+            headers: {
+                // FIXME: Better define this for security reasons?
+                Accept: '*/*',
+                'Content-Type': 'application/octet-stream',
+                ...headers,
+            },
+            body: undefined,
+            ...otherOptions,
+        };
     } else {
         const requestBody = body ? JSON.stringify(body) : undefined;
         finalOptions = {
@@ -201,21 +217,21 @@ export const processDeepResponse: DeepContextInterface['transformResponse'] = as
     ctx,
     */
 ) => {
-    const resText = await res.text();
-    if (resText.length > 0) {
-        const json = JSON.parse(resText);
-        /*
-        const { schemaName } = ctx;
-        if (schemaName && options.method !== 'DELETE') {
-            try {
-                schema.validate(json, schemaName);
-            } catch (e) {
-                console.error(url, options.method, json, e.message);
+    if (res.status >= 200 && res.status < 300) {
+        if (res.headers.get('content-type') === CONTENT_TYPE_JSON) {
+            const resText = await res.text();
+
+            if (resText.length > 0 && res.headers.get('content-type') === CONTENT_TYPE_JSON) {
+                const json = JSON.parse(resText);
+                return json;
             }
+            return undefined;
         }
-        */
-        return json;
+
+        const arrayBuffer = await res.arrayBuffer();
+        return arrayBuffer;
     }
+
     return undefined;
 };
 

app/components/GalleryFileUpload/index.tsx

@@ -1,15 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { FileInput, useAlert } from '@the-deep/deep-ui';
 import { IoCloudUpload } from 'react-icons/io5';
 import { gql, useMutation } from '@apollo/client';
 import { removeNull } from '@togglecorp/toggle-form';
+import { _cs } from '@togglecorp/fujs';
 
 import {
     FileUploadMutation,
     FileUploadMutationVariables,
     GalleryFileType,
 } from '#generated/types';
 
+import styles from './styles.css';
+
 const UPLOAD_FILE = gql`
     mutation FileUpload(
         $data: FileUploadInputType!,
@@ -31,11 +34,12 @@ const UPLOAD_FILE = gql`
     }
 `;
 interface Props {
-    onSuccess: (file: NonNullable<GalleryFileType>) => void;
-    acceptFileType?: '.pdf' | 'image/*';
+    onSuccess: (file: NonNullable<GalleryFileType>, uploadedFile: File | undefined) => void;
+    acceptFileType?: '.pdf' | 'image/*' | '.xlsx' | '.csv' | '.geojson';
     title?: string;
     disabled?: boolean;
     projectIds?: string[];
+    buttonOnly?: boolean;
 }
 
 function FileUpload(props: Props) {
@@ -45,8 +49,11 @@ function FileUpload(props: Props) {
         acceptFileType,
         disabled,
         projectIds,
+        buttonOnly,
     } = props;
+
     const alert = useAlert();
+    const [uploadedFile, setUploadedFile] = useState<File>();
 
     const [
         uploadFile,
@@ -76,6 +83,7 @@ function FileUpload(props: Props) {
                     const resultRemoveNull = removeNull(result);
                     onSuccess(
                         resultRemoveNull,
+                        uploadedFile,
                     );
                 }
             },
@@ -93,6 +101,7 @@ function FileUpload(props: Props) {
             if (!value) {
                 return;
             }
+            setUploadedFile(value);
 
             uploadFile({
                 variables: {
@@ -115,17 +124,25 @@ function FileUpload(props: Props) {
 
     return (
         <FileInput
+            className={_cs(
+                styles.galleryFileUpload,
+                buttonOnly && styles.buttonOnly,
+            )}
             name={undefined}
             value={null}
             onChange={handleFileInputChange}
             status={undefined}
             overrideStatus
-            title={title}
+            title={buttonOnly ? undefined : title}
+            label={buttonOnly ? undefined : title}
             maxFileSize={100}
             accept={acceptFileType}
             disabled={loading || disabled}
         >
-            <IoCloudUpload />
+            <div className={styles.children}>
+                <IoCloudUpload />
+                {buttonOnly ? title : undefined}
+            </div>
         </FileInput>
     );
 }

app/components/GalleryFileUpload/styles.css

@@ -0,0 +1,11 @@
+.gallery-file-upload {
+    &.button-only {
+        --height-border: 0;
+    }
+
+    .children {
+        display: flex;
+        align-items: center;
+        gap: var(--dui-spacing-small);
+    }
+}

app/components/report/ReportBuilder/DatasetItem/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+import {
+    RawButton,
+} from '@the-deep/deep-ui';
+
+import styles from './styles.css';
+
+interface Props {
+    datasetId: string;
+    title: string;
+    active: boolean;
+    onClick: (datasetId: string) => void;
+}
+
+function DatasetItem(props: Props) {
+    const {
+        title,
+        datasetId,
+        onClick,
+        active,
+    } = props;
+
+    return (
+        <RawButton
+            name={datasetId}
+            onClick={onClick}
+            className={_cs(
+                styles.frameworkItem,
+                active && styles.selected,
+            )}
+        >
+            <div className={styles.title}>
+                {title}
+            </div>
+        </RawButton>
+    );
+}
+
+export default DatasetItem;

app/components/report/ReportBuilder/DatasetItem/styles.css

@@ -0,0 +1,18 @@
+.framework-item {
+    display: flex;
+    flex-direction: column;
+    border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+    background-color: var(--dui-color-background-information);
+    padding: var(--dui-spacing-small) var(--dui-spacing-medium);
+    width: 100%;
+    text-align: left;
+    gap: var(--dui-spacing-small);
+
+    .title {
+        font-weight: var(--dui-font-weight-bold);
+    }
+
+    &.selected {
+        background-color: var(--dui-color-surface-information);
+    }
+}