Added World Cloud analytic visualization and Tag Cloud analytic.

wirmar · Jan 14, 2020 · 8cc34de · 8cc34de
1 parent e332edd
commit 8cc34de
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "passport-local": "^1.0.0",
     "pug": "^2.0.3",
     "quickselect": "^2.0.0",
+    "react-tagcloud": "^2.0.0",
     "request": "^2.88.0",
     "rss": "^1.2.2",
     "sanitize-html": "^1.20.1",

diff --git a/public/js/analytics/colorCurve.js b/public/js/analytics/colorCurve.js
@@ -93,7 +93,7 @@ onmessage = (e) => {
       ['Total', curve.total, '#000000'],
     ].map((color) => ({
       label: color[0],
-      data: color[1],
+      data: color[1].map((af) => af.toFixed(2)),
       fill: false,
       backgroundColor: color[2],
       borderColor: color[2],

diff --git a/public/js/analytics/tagCloud.js b/public/js/analytics/tagCloud.js
@@ -0,0 +1,19 @@
+onmessage = (e) => {
+  if (!e) return;
+  const cards = e.data;
+
+  var tags = {};
+  cards.forEach((card) =>
+    card.tags.forEach((tag) => {
+      if (tags[tag]) {
+        tags[tag] += card.asfan;
+      } else {
+        tags[tag] = card.asfan;
+      }
+    }),
+  );
+  const words = Object.keys(tags).map((key) => {
+    return { value: key, count: tags[key] };
+  });
+  postMessage({ type: 'cloud', words: words });
+};
diff --git a/src/components/AnalyticsBarChart.js b/src/components/AnalyticsBarChart.js
@@ -40,6 +40,7 @@ const AnalyticsBarChart = ({ data, title, ...props }) => {
       <Row {...props}>
         <Col>
           <h4 className="d-lg-block d-none">{title}</h4>
+          Click the labels to filter them out of the datasets.
         </Col>
       </Row>
       <Row>

diff --git a/src/components/AnalyticsCloud.js b/src/components/AnalyticsCloud.js
@@ -0,0 +1,22 @@
+import { TagCloud } from 'react-tagcloud';
+import { Col, Row } from 'reactstrap';
+
+const AnalyticsCloud = ({ data, title, ...props }) => {
+  const colorOptions = { luminosity: 'dark' };
+  return (
+    <>
+      <Row>
+        <Col>
+          <h4 className="d-lg-block d-none">{title}</h4>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <TagCloud minSize={10} maxSize={80} colorOptions={colorOptions} tags={data['words']} />
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default AnalyticsCloud;
diff --git a/src/cube_analysis.js b/src/cube_analysis.js
@@ -9,6 +9,7 @@ import Hash from './util/Hash';
 import AddAnalyticModal from './components/AddAnalyticModal';
 import AddAnalyticModalContext from './components/AddAnalyticModalContext';
 import AnalyticsBarChart from './components/AnalyticsBarChart';
+import AnalyticsCloud from './components/AnalyticsCloud';
 import AnalyticsTable from './components/AnalyticsTable';
 import DynamicFlash from './components/DynamicFlash';
 import ErrorBoundary from './components/ErrorBoundary';
@@ -28,8 +29,16 @@ class CubeAnalysis extends Component {
         typeBreakdown: { url: '/js/analytics/typeBreakdown.js', title: 'Type Breakdown' },
         typeBreakdownAsfan: { url: '/js/analytics/typeBreakdownAsfan.js', title: 'Type Breakdown Asfans' },
         curve: { url: '/js/analytics/colorCurve.js', title: 'Curve' },
+        tagCloud: { url: '/js/analytics/tagCloud.js', title: 'Tag Cloud' },
       },
-      analytics_order: ['colorCount', 'cumulativeColorCount', 'typeBreakdown', 'typeBreakdownAsfan', 'curve'],
+      analytics_order: [
+        'colorCount',
+        'cumulativeColorCount',
+        'typeBreakdown',
+        'typeBreakdownAsfan',
+        'curve',
+        'tagCloud',
+      ],
       filter: [],
       openCollapse: null,
       cardsWithAsfan: null,
@@ -238,39 +247,39 @@ class CubeAnalysis extends Component {
         if (data.type == 'table') result = <AnalyticsTable data={this.state.data} title={analytics[active].title} />;
         else if (data.type == 'bar')
           result = <AnalyticsBarChart data={this.state.data} title={analytics[active].title} />;
+        else if (data.type == 'cloud')
+          result = <AnalyticsCloud data={this.state.data} title={analytics[active].title} />;
       }
       return result;
     };
     var dropdownElement;
     if (cube.draft_formats) {
       dropdownElement = (
-        <Container>
-          <Row>
-            <Col>
-              <h5>{formatId >= 0 ? cube.draft_formats[formatId] : 'Default Draft Format'}</h5>
-            </Col>
-            <Col>
-              <Dropdown isOpen={formatDropdownOpen} toggle={this.toggleFormatDropdownOpen}>
-                <DropdownToggle caret>Change Draft Format</DropdownToggle>
-                <DropdownMenu>
-                  <DropdownItem key="default" onClick={() => this.setFormat(-1)}>
-                    Default Draft Format
-                  </DropdownItem>
-                  <DropdownItem header key="customformatsheader">
-                    Custom Formats
-                  </DropdownItem>
-                  {cube.draft_formats
-                    ? cube.draft_formats.map((format, formatIndex) => (
-                        <DropdownItem key={format} onClick={() => this.setFormat(formatIndex)}>
-                          {format.title}
-                        </DropdownItem>
-                      ))
-                    : ''}
-                </DropdownMenu>
-              </Dropdown>
-            </Col>
-          </Row>
-        </Container>
+        <Row>
+          <Col>
+            <h5>{formatId >= 0 ? cube.draft_formats[formatId].title : 'Default Draft Format'}</h5>
+          </Col>
+          <Col>
+            <Dropdown isOpen={formatDropdownOpen} toggle={this.toggleFormatDropdownOpen}>
+              <DropdownToggle caret>Change Draft Format</DropdownToggle>
+              <DropdownMenu>
+                <DropdownItem key="default" onClick={() => this.setFormat(-1)}>
+                  Default Draft Format
+                </DropdownItem>
+                <DropdownItem header key="customformatsheader">
+                  Custom Formats
+                </DropdownItem>
+                {cube.draft_formats
+                  ? cube.draft_formats.map((format, formatIndex) => (
+                      <DropdownItem key={format} onClick={() => this.setFormat(formatIndex)}>
+                        {format.title}
+                      </DropdownItem>
+                    ))
+                  : ''}
+              </DropdownMenu>
+            </Dropdown>
+          </Col>
+        </Row>
       );
     } else {
       dropdownElement = <h5>Default Draft Format</h5>;