Merge pull request #76 from amcguiga/bubble-graph

Fee Bubble Graph and  C O L O R S

browser/package.json

@@ -15,6 +15,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "astoria-tech-design": "github:astoria-tech/design",
+    "color": "^3.1.3",
     "eslint": "^6.6.0",
     "luxon": "^1.25.0",
     "normalize.css": "^8.0.1",

browser/src/components/FoiaList/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { DateTime } from "luxon";
-import { FoiaStatus } from "../../utils/FoiaStatus";
-import { FeeRange } from "../../utils/FeeRange";
-import { TurnaroundTime } from "../../utils/TurnaroundTime";
+import FoiaStatus from "../../utils/FoiaStatus";
+import FeeRange from "../../utils/FeeRange";
+import TurnaroundTime from "../../utils/TurnaroundTime";
 
 
 const FoiaList = (props) => {

browser/src/components/Graphs/FoiaFeeBubbleGraph/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ResponsiveBubble } from '@nivo/circle-packing';
-import { FoiaStatus } from '../../../utils/FoiaStatus';
+import FoiaStatus from '../../../utils/FoiaStatus';
+import DonatelloColors from '../../../utils/DonatelloColors';
 
 const FoiaFeeBubbleGraph = (props) => {
   const paidStatuses = [
@@ -12,27 +13,24 @@ const FoiaFeeBubbleGraph = (props) => {
     FoiaStatus.Rejected,
   ];
 
-  const unpaidStatuses = [
+  /* const unpaidStatuses = [
     FoiaStatus.Ack,
     FoiaStatus.Processed,
     FoiaStatus.Appealing,
     FoiaStatus.Abandoned,
     FoiaStatus.Payment,
-  ];
+  ]; */
 
   const feeStatuses = props.data.foiaList.filter((item) => item.foiaReq.price > 0).map((item) => {
     const status = FoiaStatus.parse(item.foiaReq.status);
     return {
-      id: item.jurisdiction.jurisdictionName,
+      id: item.foiaReq.id,
+      label: item.jurisdiction.jurisdictionName,
       paid: paidStatuses.find((foiaStatus) => status.value === foiaStatus.value) ? 'paid': 'unpaid',
       value: item.foiaReq.price,
     };
   }).sort((a, b) => { 
-    // In order to get the colors right, all the unpaid elements have to be sorted first
-    // This ensures that similar sized fee requests get different colors since they're processed iteratively
-    if (a.paid === 'unpaid' && b.paid === 'paid') return -1;
-    else if (a.paid === 'paid' && b.paid === 'unpaid') return 1;
-    else return 0;
+    return a.value < b.value
   });
 
   const fees = {
@@ -42,31 +40,43 @@ const FoiaFeeBubbleGraph = (props) => {
 
   return(
     <div className="feeGraph">
-      <h3>Fees Charged by agency</h3>
+      <h2 className="headline">Fees Charged by Agency</h2>
       <p>
-        Most agencies have not charged fees for their requests and it is not
-        clear how the fees are calculated when there is a required payment.
+        Agencies are allowed to charge "reasonable" fees for any requests
+        that take more than 2 hours to complete. However, different departments
+        have different perspectives on what fee is reasonable.
       </p>
-      <div className="graph">
+      <div className="graph graph--circular">
         <ResponsiveBubble
           root={fees}
           margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           padding={6}
+          identity='id'
           colorBy='id'
-          labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 1.5 ] ] }}
+          label={node => node.data.label}
+          labelTextColor={{ from: 'color', modifiers: [ [ 'darker', 2.0 ] ] }}
           animate={false}
-          isZoomable={false}
+          isZoomable={false} 
           motionStiffness={50}
           motionDamping={30}
           leavesOnly={true}
           enableLabel={true}
-          colors={{ scheme: 'pastel1' }}
-          tooltipFormat={value =>
-            new Intl.NumberFormat(navigator.language, {style: "currency", currency: "USD"}).format(value)
-          }
-          labelSkipRadius={24}
+          colors={DonatelloColors.colorTints.reverse().map(color => color.hsl().string())}
+          tooltip={node => (
+            <span>
+                {node.data.label}: {new Intl.NumberFormat(navigator.language, {style: "currency", currency: "USD"}).format(node.data.value)}
+            </span>
+          )}
+          labelSkipRadius={44}
         />
       </div>
+      <p>
+        Some agencies charge only nominal fees to cover cost of printing and mailing documentation.
+      </p>
+      <p>
+        Other agencies require the entire process to be overseen by a police captain
+        and demand compensation for the cost of a captain's wages. 
+      </p>
     </div>
   );
 };

browser/src/components/Graphs/FoiaStatusFunnelGraph/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResponsiveFunnel } from '@nivo/funnel';
-import { FoiaStatus } from '../../../utils/FoiaStatus';
+import FoiaStatus from '../../../utils/FoiaStatus';
 
 
 const FoiaStatusFunnelGraph = (props) => {
@@ -45,11 +45,11 @@ const FoiaStatusFunnelGraph = (props) => {
   };
 
   return (
-    <div className="statusFunnel">
+    <div className="statusFunnel">      
       <div className="graph">
         <ResponsiveFunnel
           data={happyFunnel(communicationAggregate)}
-          margin={{ top: 10, right: 0, bottom: 50, left: 35 }}
+          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           isInteractive={true}
           padding={0.3}
           borderWidth={20}
@@ -67,7 +67,7 @@ const FoiaStatusFunnelGraph = (props) => {
       <div className="graph">
         <ResponsiveFunnel
           data={bumpyFunnel(communicationAggregate)}
-          margin={{ top: 10, right: 0, bottom: 50, left: 35 }}
+          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           isInteractive={true}
           padding={0.3}
           borderWidth={20}

browser/src/components/Graphs/FoiaStatusPieGraph/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResponsivePie } from '@nivo/pie';
-import { FoiaStatus } from '../../../utils/FoiaStatus';
+import FoiaStatus from '../../../utils/FoiaStatus';
 
 
 const FoiaStatusPieGraph = (props) => {
@@ -24,15 +24,11 @@ const FoiaStatusPieGraph = (props) => {
 
   return (
     <div className="statusPie">
-      <p>
-        In response to the Freedom of Information Law Requests, New York State
-        police departments have claimed to have no records (“no documents”) of
-        officer misconduct from the past 50 years.
-      </p>
-      <div className="graph">
+      <h2 className="headline">Request Status</h2>
+      <div className="graph graph--circular">
         <ResponsivePie
           data={statuses}
-          margin={{ top: 40, right: 80, bottom: 80, left: 120 }}
+          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           innerRadius={0.5}
           padAngle={0.7}
           cornerRadius={3}
@@ -41,6 +37,11 @@ const FoiaStatusPieGraph = (props) => {
           sortByValue={true}
         />
       </div>
+      <p>
+        In response to the Freedom of Information Law Requests, New York State
+        police departments have claimed to have no records (“no documents”) of
+        officer misconduct from the past 50 years.
+      </p>
       <p>
         The done status may not mean that the request was successful, Muckrock
         is restarting some requests from the beginning after having previous

browser/src/components/Graphs/FoiaStatusSankeyGraph/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ResponsiveSankey } from '@nivo/sankey';
-import { FoiaStatus } from '../../../utils/FoiaStatus';
+import FoiaStatus from '../../../utils/FoiaStatus';
 
 
 const FoiaStatusSankeyGraph = (props) => {
@@ -77,7 +77,7 @@ const FoiaStatusSankeyGraph = (props) => {
       <div className="graph">
         <ResponsiveSankey
           data={statusHistory}
-          margin={{ top: 40, right: 160, bottom: 40, left: 50 }}
+          margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
           align="justify"
           layout="vertical"
           sort="input"

browser/src/components/Graphs/FoiaStatusTreeGraph/index.js

@@ -15,7 +15,6 @@ const FoiaStatusTreeGraph = (props) => {
 
   return (
     <div className = "treeMapGraph">
-      <h2 className="headline__treemap">Statuses</h2>
       <div className="graph">
         <ResponsiveTreeMap
           data={statusGraphData()}

browser/src/components/Graphs/FoiaTimelineGraph/index.js

@@ -1,9 +1,15 @@
 import React from "react";
-import { TurnaroundTime } from "../../../utils/TurnaroundTime";
+import TurnaroundTime from "../../../utils/TurnaroundTime";
 import { ResponsiveBar } from "@nivo/bar";
+import DonatelloColors from "../../../utils/DonatelloColors";
 
 
 const FoiaTimelineGraph = (props) => {
+  const timelineColors = Array.from({ length: TurnaroundTime.all.length }, (empty, idx) => {
+    const ratio = 1.0 * idx / (TurnaroundTime.all.length + 1);
+    return DonatelloColors.DeepPurple.lighten(ratio);
+  });
+
   const turnaroundAggregate = TurnaroundTime.all.reduce((acc, time) => {
     return acc.set(time, 0);
   }, new Map());
@@ -17,7 +23,8 @@ const FoiaTimelineGraph = (props) => {
   const times = Array.from(turnaroundAggregate).map((time) => {
     return {
       value: time[1],
-      id: time[0].shortLabel
+      id: time[0].shortLabel,
+      label: time[0].label,
     }
   });
 
@@ -27,14 +34,16 @@ const FoiaTimelineGraph = (props) => {
       <p>
         Agencies have five days to confirm a FOIL request, but are not held to
         any timeline for how long it takes them to complete the request.
+        Since June 2020, only a portion of departments have completed the FOIL process.
       </p>
       <div className="graph graph--bar">
         <ResponsiveBar
           data={times}
-          isInteractive={false}
+          isInteractive={true}
           margin={{ top: 10, right: 0, bottom: 50, left: 35 }}
           padding={0.3}
           layout="vertical"
+          colorBy='value'
           axisTop={null}
           axisRight={null}
           axisBottom={{
@@ -56,8 +65,14 @@ const FoiaTimelineGraph = (props) => {
           labelSkipWidth={12}
           labelSkipHeight={12}
           labelTextColor={{ from: "color", modifiers: [["darker", 1.6]] }}
+          enableLabel={false}
           borderColor={{ from: "color", modifiers: [["darker", 1.6]] }}
-          colors={{ scheme: "nivo" }}
+          colors={timelineColors.reverse().map(color => color.hsl().toString())}
+          tooltip={node => (
+            <span>
+                {node.data.label}: {node.data.value}
+            </span>
+          )}
         />
       </div>
     </div>

browser/src/pages/Home.js

@@ -1,7 +1,7 @@
 import React from "react";
 import FoiaList from "../components/FoiaList";
 import FoiaTimelineGraph from "../components/Graphs/FoiaTimelineGraph";
-import FoiaFeeGraph from "../components/Graphs/FoiaFeeGraph";
+import FoiaFeeBubbleGraph from "../components/Graphs/FoiaFeeBubbleGraph";
 
 
 const Home = (props) => {
@@ -31,7 +31,7 @@ const Home = (props) => {
       <FoiaTimelineGraph
         data = {props.data}
       />
-      <FoiaFeeGraph
+      <FoiaFeeBubbleGraph
         data = {props.data}
       />
       <h2 id="links_and_references">Links and References</h2>

browser/src/pages/Sandbox.js

@@ -3,15 +3,11 @@ import FoiaStatusTreeGraph from "../components/Graphs/FoiaStatusTreeGraph";
 import FoiaStatusFunnelGraph from "../components/Graphs/FoiaStatusFunnelGraph";
 import FoiaStatusPieGraph from "../components/Graphs/FoiaStatusPieGraph";
 import FoiaStatusSankeyGraph from "../components/Graphs/FoiaStatusSankeyGraph";
-import FoiaFeeBubbleGraph from "../components/Graphs/FoiaFeeBubbleGraph";
 
 
 const Sandbox = (props) => {
   return (
     <main>
-      <FoiaFeeBubbleGraph
-        data = {props.data}
-      />
       <FoiaStatusPieGraph 
         data = {props.data}
       />

browser/src/styles.css

@@ -11,14 +11,6 @@ html {
   font: 62.5%;
 }
 
-@media screen and (min-width: 800px) {
-  main {
-    max-width: none;
-    display: grid;
-    grid-template-columns: 1fr 10ch 65ch 10ch 1fr;
-  }
-}
-
 main > * {
   grid-column: 3 / span 1;
 }
@@ -67,6 +59,10 @@ ul {
   grid-column: 1 / -1;
 }
 
+.graph text {
+  font-weight: bold;
+}
+
 .graph--tree-map {
   grid-column: 2 / span 3;
 }
@@ -131,7 +127,13 @@ header .header_content .torch-icon {
   margin-left: 3rem;
 }
 
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
+  main {
+    max-width: none;
+    display: grid;
+    grid-template-columns: 1fr 10ch 65ch 10ch 1fr;
+  }
+
   .foia-list__item-table {
     border-spacing: 1.5em;
     font-size: medium;
@@ -164,3 +166,9 @@ header .header_content .torch-icon {
     float: right;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .graph--circular {
+    height: 45vh;
+  }
+}