Client report graphs

.storybook/data/3ntrtcehas-reports.json

@@ -0,0 +1,23 @@
+[
+  {
+    "report_id": "r68fknmmmyhdpi3sh4ctc",
+    "created": "1515990588733",
+    "modified": "1515991093181",
+    "label_x_neg": null,
+    "label_y_neg": null,
+    "label_y_pos": null,
+    "label_x_pos": null,
+    "label_group_0": null,
+    "label_group_1": null,
+    "label_group_2": null,
+    "label_group_3": null,
+    "label_group_4": null,
+    "label_group_5": null,
+    "label_group_6": null,
+    "label_group_7": null,
+    "label_group_8": null,
+    "label_group_9": null,
+    "report_name": "SamplePoll14Jan",
+    "conversation_id": "3ntrtcehas"
+  }
+]

.storybook/preview.js

@@ -7,6 +7,19 @@ import jquery from 'jquery';
 global.$ = jquery;
 global.jQuery =  jquery;
 
+import * as d3array from 'd3-array';
+import * as d3force from 'd3-force';
+import * as d3geo from 'd3-geo';
+import * as d3scale from 'd3-scale';
+import * as d3voronoi from 'd3-voronoi';
+global.d3 = {
+  ...d3array,
+  ...d3force,
+  ...d3geo,
+  ...d3scale,
+  ...d3voronoi,
+};
+
 // This is where we mock responses for PolisNet endpoints.
 // TODO: Create a storybook plugin to do this dynamically.
 function ajax_responses(responses) {

.storybook/utils.js

@@ -1,11 +1,14 @@
 import * as globals from "../codebases/compdem/client-report/src/components/globals";
 import participationData from './data/3ntrtcehas-participation-init.json'
 import commentsData from './data/3ntrtcehas-comments.json'
+import reportsData from './data/3ntrtcehas-reports.json'
 
+// Simulates response data from /api/v3/math/pca2?conversation_id=3ntrtcehas
 export const getMath = () => {
   return JSON.parse(participationData.pca)
 }
 
+// Simulates manipulation of response data done in application code.
 export const getExtremity = () => {
   const mathResult = getMath()
   return mathResult.pca["comment-extremity"].reduce(
@@ -17,14 +20,21 @@ export const getExtremity = () => {
   )
 }
 
+// Simulates response data from /api/v3/conversations?conversation_id=3ntrtcehas
 export const getConversation = () => {
   return participationData.conversation
 }
 
+// Simulates response data from /api/v3/comments?conversation_id=3ntrtcehas&moderation=true&include_voting_patterns=true
 export const getComments = () => {
   return commentsData
 }
 
+// Simulates response data from /api/v3/reports?report_id=r3bpnywujybyru4rkx92i
+export const getReports = () => {
+  return reportsData
+}
+
 export const getVoteColors = () => ({
   agree: globals.brandColors.agree,
   disagree: globals.brandColors.disagree,

package.json

@@ -36,7 +36,13 @@
   "dependencies": {
     "@react-spring/web": "^9.7.4",
     "color": "~4.2.3",
+    "d3-array": "1.0.2",
+    "d3-contour": "~1.1.2",
     "d3-force": "~1.2.1",
+    "d3-geo": "1.5.0",
+    "d3-scale": "1.0.4",
+    "d3-scale-chromatic": "~1.1.1",
+    "d3-voronoi": "1.1.1",
     "hull.js": "^0.2.11",
     "radium": "^0.26.2",
     "react-chat-widget": "^3.0.5",

stories/compdem/client-report/Beeswarm.stories.js

@@ -1,38 +1,25 @@
 import React from 'react'
 import Beeswarm from '../../../codebases/compdem/client-report/src/components/beeswarm/beeswarm'
-import { getMath, getConversation, getExtremity } from '../../../.storybook/utils'
+import { getMath, getConversation, getExtremity, getComments, getVoteColors } from '../../../.storybook/utils'
 
 import '../../../codebases/compdem/client-report/src/index.css';
 
 const mathResult = getMath()
 
 export default {
-  title: 'compdem/client-report/Beeswarm (not working)',
+  title: 'compdem/client-report/Beeswarm',
   component: Beeswarm,
 }
 
 const Template = (args) => <Beeswarm {...args} />
 
-export const AllNull = Template.bind({})
-AllNull.args = {
-  conversation: null,
-  extremity: null, //{this.state.extremity}
-  math: null, //{this.state.math}
-  comments: null, //{this.state.comments}
-  probabilities: null, //{this.state.filteredCorrelationMatrix}
-  probabilitiesTids: null, //{this.state.filteredCorrelationTids}
-  voteColors: null, //{this.state.voteColors}
-}
-
 export const Default = Template.bind({})
 Default.args = {
-  ...AllNull.args,
   conversation: getConversation(),
   extremity: getExtremity(),
   math: mathResult,
-  comments: null, //{this.state.comments}
-  probabilities: null, //{this.state.filteredCorrelationMatrix}
-  probabilitiesTids: null, //{this.state.filteredCorrelationTids}
-  voteColors: null, //{this.state.voteColors}
+  comments: getComments(),
+  probabilities: {}, //{this.state.filteredCorrelationMatrix}
+  probabilitiesTids: {}, //{this.state.filteredCorrelationTids}
+  voteColors: getVoteColors(), //{this.state.voteColors},
 }
-