#1414 Word Cloud: Ability to pass the word frequency

getredash · kravets-levko · Jul 3, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jun 27, 2019
commit 9c2d9873229f775dfd8538502dab0d7bfebfca74
diff --git a/client/app/visualizations/word-cloud/Editor.jsx b/client/app/visualizations/word-cloud/Editor.jsx
@@ -1,30 +1,43 @@
-import { map } from 'lodash';
+import { map, merge } from 'lodash';
 import React from 'react';
 import Select from 'antd/lib/select';
 import { EditorPropTypes } from '@/visualizations';
 
-const { Option } = Select;
-
 export default function Editor({ options, data, onOptionsChange }) {
-  const onColumnChanged = (column) => {
-    const newOptions = { ...options, column };
-    onOptionsChange(newOptions);
+  const optionsChanged = (newOptions) => {
+    onOptionsChange(merge({}, options, newOptions));
   };
 
   return (
-    <div className="form-group">
-      <label className="control-label" htmlFor="word-cloud-column">Word Cloud Column Name</label>
-      <Select
-        id="word-cloud-column"
-        className="w-100"
-        value={options.column}
-        onChange={onColumnChanged}
-      >
-        {map(data.columns, ({ name }) => (
-          <Option key={name}>{name}</Option>
-        ))}
-      </Select>
-    </div>
+    <React.Fragment>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-column">Words Column</label>
+        <Select
+          id="word-cloud-column"
+          className="w-100"
+          value={options.column}
+          onChange={column => optionsChanged({ column })}
+        >
+          {map(data.columns, ({ name }) => (
+            <Select.Option key={name}>{name}</Select.Option>
+          ))}
+        </Select>
+      </div>
+      <div className="form-group">
+        <label className="control-label" htmlFor="word-cloud-column">Frequencies Column</label>
+        <Select
+          id="word-cloud-column"
+          className="w-100"
+          value={options.frequenciesColumn}
+          onChange={frequenciesColumn => optionsChanged({ frequenciesColumn })}
+        >
+          <Select.Option key="none" value=""><i>(count word frequencies automatically)</i></Select.Option>
+          {map(data.columns, ({ name }) => (
+            <Select.Option key={'column-' + name} value={name}>{name}</Select.Option>
+          ))}
+        </Select>
+      </div>
+    </React.Fragment>
   );
 }
 

diff --git a/client/app/visualizations/word-cloud/Renderer.jsx b/client/app/visualizations/word-cloud/Renderer.jsx
@@ -1,31 +1,45 @@
 import d3 from 'd3';
 import cloud from 'd3-cloud';
-import { map, min, max, values, sortBy } from 'lodash';
+import { each, map, min, max, values, sortBy } from 'lodash';
 import React, { useMemo, useState, useEffect } from 'react';
 import { RendererPropTypes } from '@/visualizations';
 
 function computeWordFrequencies(rows, column) {
-  const wordsHash = {};
-
-  rows.forEach((row) => {
-    const wordsList = row[column].toString().split(' ');
-    wordsList.forEach((d) => {
-      if (d in wordsHash) {
-        wordsHash[d] += 1;
-      } else {
-        wordsHash[d] = 1;
-      }
+  const result = {};
+
+  each(rows, (row) => {
+    const wordsList = row[column].toString().split(/\s/g);
+    each(wordsList, (d) => {
+      result[d] = (result[d] || 0) + 1;
     });
   });
 
-  return wordsHash;
+  return result;
+}
+
+function getWordsWithFrequencies(rows, wordColumn, frequencyColumn) {
+  const result = {};
+
+  each(rows, (row) => {
+    const count = parseFloat(row[frequencyColumn]);
+    if (Number.isFinite(count) && (count > 0)) {
+      const word = row[wordColumn];
+      result[word] = count;
+    }
+  });
+
+  return result;
 }
 
 function prepareWords(rows, options) {
   let result = [];
 
   if (options.column) {
-    result = computeWordFrequencies(rows, options.column);
+    if (options.frequenciesColumn) {
+      result = getWordsWithFrequencies(rows, options.column, options.frequenciesColumn);
+    } else {
+      result = computeWordFrequencies(rows, options.column);
+    }
   }
 
   const counts = values(result);

diff --git a/client/app/visualizations/word-cloud/index.js b/client/app/visualizations/word-cloud/index.js
@@ -3,11 +3,16 @@ import { registerVisualization } from '@/visualizations';
 import Renderer from './Renderer';
 import Editor from './Editor';
 
+const DEFAULT_OPTIONS = {
+  column: '',
+  frequenciesColumn: '',
+};
+
 export default function init() {
   registerVisualization({
     type: 'WORD_CLOUD',
     name: 'Word Cloud',
-    getOptions: options => ({ ...options }),
+    getOptions: options => ({ ...DEFAULT_OPTIONS, ...options }),
     Renderer,
     Editor,