feat(clean): Add wiki

.gitignore

@@ -115,3 +115,4 @@ profiling
 .coverage
 report.xml
 .vim
+.DS_Store

dataprep/clean/__init__.py

@@ -26,6 +26,8 @@
 
 from .clean_df import clean_df
 
+from .clean_df_gui import clean_df_gui
+
 from .clean_text import clean_text, default_text_pipeline
 
 from .clean_au_abn import clean_au_abn, validate_au_abn
@@ -376,6 +378,7 @@
     "clean_currency",
     "validate_currency",
     "clean_df",
+    "clean_df_gui",
     "clean_text",
     "default_text_pipeline",
     "clean_au_abn",

dataprep/clean/clean_df_gui.py

@@ -0,0 +1,51 @@
+"""
+Conduct a set of operations that would be useful for
+cleaning and standardizing a full Pandas DataFrame.
+"""
+# pylint: disable-msg=relative-beyond-top-level
+# pylint: disable-msg=cyclic-import
+# type: ignore
+
+from typing import Any
+
+import pandas as pd
+
+from IPython.display import IFrame, display
+
+from dataprep.clean.gui.clean_gui import launch
+
+
+def clean_df_gui(
+    df: pd.DataFrame,
+) -> Any:
+    """
+    This function shows the GUI of clean module.
+
+    Parameters
+    ----------
+    df
+        A Pandas DataFrame containing the data to be cleaned.
+    """
+    # pylint: disable=too-many-arguments
+    # pylint: disable-msg=too-many-locals
+    # pylint:disable=too-many-branches
+    # type: ignore
+
+    return UserInterface(df).display()
+
+
+class UserInterface:
+    """
+    A user interface used by clean module.
+    """
+
+    # pylint: disable=too-many-instance-attributes
+    def __init__(self, df: pd.DataFrame):
+        self.df = df
+
+    def display(self) -> None:
+        """Display the GUI."""
+        launch(self.df)
+
+        path_to_local_server = "http://localhost:7680"
+        display(IFrame(path_to_local_server, width=900, height=500))

dataprep/clean/gui/clean_frontend/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

dataprep/clean/gui/clean_frontend/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

dataprep/clean/gui/clean_frontend/.eslintrc.js

@@ -0,0 +1,19 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:vue/essential',
+    'airbnb-base',
+  ],
+  parserOptions: {
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  plugins: [
+    'vue',
+  ],
+  rules: {
+  },
+};

dataprep/clean/gui/clean_frontend/.gitignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

dataprep/clean/gui/clean_frontend/.postcssrc.js

@@ -0,0 +1,10 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    "postcss-import": {},
+    "postcss-url": {},
+    // to edit target browsers: use "browserslist" field in package.json
+    "autoprefixer": {}
+  }
+}

dataprep/clean/gui/clean_frontend/README.md

@@ -0,0 +1,21 @@
+# clean_frontend
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

dataprep/clean/gui/clean_frontend/build_frontend/build.js

@@ -0,0 +1,40 @@
+require('./check-versions')();
+
+process.env.NODE_ENV = 'production';
+
+const ora = require('ora');
+const rm = require('rimraf');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const config = require('../config');
+const webpackConfig = require('./webpack.prod.conf');
+
+const spinner = ora('building for production...');
+spinner.start();
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), (err) => {
+  if (err) throw err;
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop();
+    if (err) throw err;
+    process.stdout.write(`${stats.toString({
+      colors: true,
+      modules: false,
+      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+      chunks: false,
+      chunkModules: false,
+    })}\n\n`);
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('  Build failed with errors.\n'));
+      process.exit(1);
+    }
+
+    console.log(chalk.cyan('  Build complete.\n'));
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n'
+      + '  Opening index.html over file:// won"t work.\n',
+    ));
+  });
+});

dataprep/clean/gui/clean_frontend/build_frontend/check-versions.js

@@ -0,0 +1,52 @@
+const chalk = require('chalk');
+const semver = require('semver');
+const shell = require('shelljs');
+const packageConfig = require('../package.json');
+
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
+}
+
+const versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node,
+  },
+];
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm,
+  });
+}
+
+module.exports = function () {
+  const warnings = [];
+
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i];
+
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(`${mod.name}: ${
+        chalk.red(mod.currentVersion)} should be ${
+        chalk.green(mod.versionRequirement)}`);
+    }
+  }
+
+  if (warnings.length) {
+    console.log('');
+    console.log(chalk.yellow('To use this template, you must update following to modules:'));
+    console.log();
+
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i];
+      console.log(`  ${warning}`);
+    }
+
+    console.log();
+    process.exit(1);
+  }
+};

dataprep/clean/gui/clean_frontend/build_frontend/utils.js

@@ -0,0 +1,97 @@
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const config = require('../config');
+const packageConfig = require('../package.json');
+
+exports.assetsPath = function (_path) {
+  const assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory;
+
+  return path.posix.join(assetsSubDirectory, _path);
+};
+
+exports.cssLoaders = function (options) {
+  options = options || {};
+
+  const cssLoader = {
+    loader: 'css-loader',
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  };
+
+  const postcssLoader = {
+    loader: 'postcss-loader',
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  };
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders(loader, loaderOptions) {
+    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader];
+
+    if (loader) {
+      loaders.push({
+        loader: `${loader}-loader`,
+        options: { ...loaderOptions, sourceMap: options.sourceMap },
+      });
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader',
+      });
+    }
+    return ['vue-style-loader'].concat(loaders);
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus'),
+  };
+};
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  const output = [];
+  const loaders = exports.cssLoaders(options);
+
+  for (const extension in loaders) {
+    const loader = loaders[extension];
+    output.push({
+      test: new RegExp(`\\.${extension}$`),
+      use: loader,
+    });
+  }
+
+  return output;
+};
+
+exports.createNotifierCallback = () => {
+  const notifier = require('node-notifier');
+
+  return (severity, errors) => {
+    if (severity !== 'error') return;
+
+    const error = errors[0];
+    const filename = error.file && error.file.split('!').pop();
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: `${severity}: ${error.name}`,
+      subtitle: filename || '',
+      icon: path.join(__dirname, 'logo.png'),
+    });
+  };
+};

dataprep/clean/gui/clean_frontend/build_frontend/vue-loader.conf.js

@@ -0,0 +1,22 @@
+const utils = require('./utils');
+const config = require('../config');
+
+const isProduction = process.env.NODE_ENV === 'production';
+const sourceMapEnabled = isProduction
+  ? config.build.productionSourceMap
+  : config.dev.cssSourceMap;
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: sourceMapEnabled,
+    extract: isProduction,
+  }),
+  cssSourceMap: sourceMapEnabled,
+  cacheBusting: config.dev.cacheBusting,
+  transformToRequire: {
+    video: ['src', 'poster'],
+    source: 'src',
+    img: 'src',
+    image: 'xlink:href',
+  },
+};