From 6033cc6538ebde58fa4ddf55d7a4f8c8cc72dd5e Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 25 Jul 2023 01:08:33 -0400 Subject: [PATCH 1/9] Basic working cosponsor chart --- components/bill/BillDetails.tsx | 370 ++++++++++++++++++ components/dashboard/BillCosponsorCard.tsx | 55 +++ components/db/bills.ts | 1 + functions/src/bills/types.ts | 8 +- package.json | 5 +- .../BillCosponsorCard.stories.tsx | 56 ++- yarn.lock | 29 +- 7 files changed, 516 insertions(+), 8 deletions(-) create mode 100644 components/dashboard/BillCosponsorCard.tsx diff --git a/components/bill/BillDetails.tsx b/components/bill/BillDetails.tsx index 927654ee8..d991c0d3e 100644 --- a/components/bill/BillDetails.tsx +++ b/components/bill/BillDetails.tsx @@ -15,6 +15,9 @@ import { Committees, Hearing, Sponsors } from "./SponsorsAndCommittees" import { Status } from "./Status" import { Summary } from "./Summary" import { BillProps } from "./types" +import { BillCosponsorCard } from "components/dashboard/BillCosponsorCard" +import { Bill } from "components/db/bills" +import { Timestamp } from "firebase/firestore" const StyledContainer = styled(Container)` font-family: "Nunito"; @@ -88,7 +91,374 @@ export const BillDetails = ({ bill }: BillProps) => { )} + ) } + +const testbill: Bill = { + id: '1234', + court: 193, + content: { + Pinslip: 'test pinslip', + Title: 'a bill to do legislative things', + PrimarySponsor: { + "Id": "JSC1", + "Name": "Josh S. Cutler", + "Type": 1, + "ResponseDate": "2023-01-17T15:14:22.9133333" + }, + Cosponsors: [ + { + "Id": "L_S1", + "Name": "Lindsay N. Sabadosa", + "Type": 1, + + "ResponseDate": "2023-01-18T15:55:36.56" + }, + { + "Id": "DCG1", + "Name": "Denise C. Garlick", + "Type": 1, + + "ResponseDate": "2023-01-18T15:56:46.42" + }, + { + "Id": "JCD1", + "Name": "James C. Arena-DeRosa", + "Type": 1, + + "ResponseDate": "2023-02-18T11:48:54.2" + }, + { + "Id": "SBA1", + "Name": "Shirley B. Arriaga", + "Type": 1, + + "ResponseDate": "2023-05-08T13:16:41.88" + }, + { + "Id": "BMA1", + "Name": "Brian M. Ashe", + "Type": 1, + + "ResponseDate": "2023-06-15T09:28:22.0566667" + }, + { + "Id": "RBB1", + "Name": "Ruth B. Balser", + "Type": 1, + + "ResponseDate": "2023-02-15T12:41:35.2633333" + }, + { + "Id": "CPB2", + "Name": "Christine P. Barber", + "Type": 1, + + "ResponseDate": "2023-02-23T10:22:43.34" + }, + { + "Id": "J_B1", + "Name": "John Barrett, III", + "Type": 1, + + "ResponseDate": "2023-02-10T13:23:01.5266667" + }, + { + "Id": "NMB1", + "Name": "Natalie M. Blais", + "Type": 1, + + "ResponseDate": "2023-02-08T10:10:02.6333333" + }, + { + "Id": "MDB0", + "Name": "Michael D. Brady", + "Type": 1, + + "ResponseDate": "2023-05-04T12:00:13.9566667" + }, + { + "Id": "PLC1", + "Name": "Peter Capano", + "Type": 1, + + "ResponseDate": "2023-01-30T09:29:07.1366667" + }, + { + "Id": "DRC1", + "Name": "Daniel R. Carey", + "Type": 1, + + "ResponseDate": "2023-02-24T13:56:33.48" + }, + { + "Id": "JMC0", + "Name": "Joanne M. Comerford", + "Type": 1, + + "ResponseDate": "2023-02-09T10:21:23.9" + }, + { + "Id": "M_C1", + "Name": "Mike Connolly", + "Type": 1, + + "ResponseDate": "2023-02-15T14:41:47.7766667" + }, + { + "Id": "MCD1", + "Name": "Marjorie C. Decker", + "Type": 1, + + "ResponseDate": "2023-05-03T10:05:32.67" + }, + { + "Id": "SND0", + "Name": "Sal N. DiDomenico", + "Type": 1, + + "ResponseDate": "2023-01-25T16:24:36.71" + }, + { + "Id": "CAD1", + "Name": "Carol A. Doherty", + "Type": 1, + + "ResponseDate": "2023-01-30T15:51:40.3133333" + }, + { + "Id": "M_D2", + "Name": "Mindy Domb", + "Type": 1, + + "ResponseDate": "2023-01-20T14:34:12.0366667" + }, + { + "Id": "K_D1", + "Name": "Kate Donaghue", + "Type": 1, + + "ResponseDate": "2023-02-28T11:24:40.29" + }, + { + "Id": "MMD1", + "Name": "Michelle M. DuBois", + "Type": 1, + + "ResponseDate": "2023-02-07T21:30:17.69" + }, + { + "Id": "PAD1", + "Name": "Patricia A. Duffy", + "Type": 1, + + "ResponseDate": "2023-03-01T16:58:31.3166667" + }, + { + "Id": "JBE0", + "Name": "James B. Eldridge", + "Type": 1, + + "ResponseDate": "2023-02-19T14:52:08.2933333" + }, + { + "Id": "TFB1", + "Name": "Tricia Farley-Bouvier", + "Type": 1, + + "ResponseDate": "2023-02-10T09:43:48.2933333" + }, + { + "Id": "PRF0", + "Name": "Paul R. Feeney", + "Type": 1, + + "ResponseDate": "2023-01-26T15:01:03.0033333" + }, + { + "Id": "CLG1", + "Name": "Carmine Lawrence Gentile", + "Type": 1, + + "ResponseDate": "2023-02-02T22:26:54.4166667" + }, + { + "Id": "C_G1", + "Name": "Carlos González", + "Type": 1, + + "ResponseDate": "2023-03-31T15:59:54.5433333" + }, + { + "Id": "JKH1", + "Name": "James K. Hawkins", + "Type": 1, + + "ResponseDate": "2023-01-27T15:21:11.4266667" + }, + { + "Id": "N_H1", + "Name": "Natalie M. Higgins", + "Type": 1, + + "ResponseDate": "2023-02-14T14:02:56.14" + }, + { + "Id": "PJK1", + "Name": "Patrick Joseph Kearney", + "Type": 1, + + "ResponseDate": "2023-02-09T16:23:34.2233333" + }, + { + "Id": "DAL1", + "Name": "David Henry Argosky LeBoeuf", + "Type": 1, + + "ResponseDate": "2023-01-30T15:18:03.9666667" + }, + { + "Id": "JPL1", + "Name": "Jack Patrick Lewis", + "Type": 1, + + "ResponseDate": "2023-01-20T17:41:31.3866667" + }, + { + "Id": "DPL1", + "Name": "David Paul Linsky", + "Type": 1, + + "ResponseDate": "2023-06-20T15:29:09.34" + }, + { + "Id": "ACM1", + "Name": "Adrian C. Madaro", + "Type": 1, + + "ResponseDate": "2023-02-13T15:39:58.3133333" + }, + { + "Id": "RAM1", + "Name": "Rita A. Mendes", + "Type": 1, + + "ResponseDate": "2023-05-18T15:16:47.1766667" + }, + { + "Id": "S_M1", + "Name": "Samantha Montaño", + "Type": 1, + + "ResponseDate": "2023-01-23T13:59:17.6066667" + }, + { + "Id": "BWM1", + "Name": "Brian W. Murray", + "Type": 1, + + "ResponseDate": "2023-02-16T23:15:34.4966667" + }, + { + "Id": "SCO1", + "Name": "Steven Owens", + "Type": 1, + + "ResponseDate": "2023-03-01T11:33:07.13" + }, + { + "Id": "WSP1", + "Name": "Smitty Pignatelli", + "Type": 1, + + "ResponseDate": "2023-02-08T09:49:01.4633333" + }, + { + "Id": "O_R1", + "Name": "Orlando Ramos", + "Type": 1, + + "ResponseDate": "2023-03-31T11:02:43.65" + }, + { + "Id": "RLR0", + "Name": "Rebecca L. Rausch", + "Type": 1, + + "ResponseDate": "2023-07-07T16:11:25.1866667" + }, + { + "Id": "MRS1", + "Name": "Margaret R. Scarsdale", + "Type": 1, + + "ResponseDate": "2023-03-27T16:41:44.28" + }, + { + "Id": "DAS1", + "Name": "Danillo A. Sena", + "Type": 1, + + "ResponseDate": "2023-03-07T15:35:04.4266667" + }, + { + "Id": "TMS1", + "Name": "Thomas M. Stanley", + "Type": 1, + + "ResponseDate": "2023-02-10T15:47:34.6833333" + }, + { + "Id": "S_G2", + "Name": "Steven Ultrino", + "Type": 1, + + "ResponseDate": "2023-01-31T09:27:05.3833333" + }, + { + "Id": "E_U1", + "Name": "Erika Uyterhoeven", + "Type": 1, + + "ResponseDate": "2023-02-09T13:23:10.4633333" + }, + { + "Id": "T_V1", + "Name": "Tommy Vitolo", + "Type": 1, + + "ResponseDate": "2023-03-30T12:11:00.8333333" + }, + { + "Id": "SLG1", + "Name": "Susannah M. Whipps", + "Type": 1, + + "ResponseDate": "2023-01-27T14:52:06.1266667" + }, + { + "Id": "BLW1", + "Name": "Bud L. Williams", + "Type": 1, + + "ResponseDate": "2023-02-08T19:41:28.4633333" + } + ], + DocumentText: 'document text', + BillNumber: 'H1234', + DocketNumber: '1234', + GeneralCourtNumber: 193, + LegislationTypeName: '' +}, +city: 'Boston', +cosponsorCount: 0, +testimonyCount: 0, +endorseCount: 0, +neutralCount: 0, +opposeCount: 0, +fetchedAt: Timestamp.fromMillis(0), +history: [], +} diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx new file mode 100644 index 000000000..3c204f31b --- /dev/null +++ b/components/dashboard/BillCosponsorCard.tsx @@ -0,0 +1,55 @@ +import { Line } from "react-chartjs-2" +import { ChartData, Chart, registerables } from "chart.js" +Chart.register(...registerables); +import { Bill } from "components/db/bills" +import 'chartjs-adapter-moment'; + +export const BillCosponsorCard = ({bill}: {bill: Bill}) => { + const precision: string = 'day' + const cosponsors = bill.content.Cosponsors + const labels = cosponsors.map(cs => new Date(Date.parse(cs.ResponseDate))).sort((a, b) => a.getTime() - b.getTime()) + let finalLabels + if (precision === 'day') { + finalLabels = Array.from(new Set(labels.map(d => d.toLocaleDateString()))) + } else { + finalLabels = labels + } + const chartData = finalLabels.map(d => { + const date = typeof d === 'string' ? new Date(d) : d + return cosponsors.filter(cs => new Date(Date.parse(cs.ResponseDate)) <= date).length + }) + const data: ChartData<"line"> = { + labels: finalLabels, + datasets: [ + { + label: 'Cosponsors', + data: chartData, + borderColor: 'rgb(255, 99, 132)', + backgroundColor: 'rgba(255, 99, 132, 0.5)' + } + ], + } + return
+ +
+} diff --git a/components/db/bills.ts b/components/db/bills.ts index c4d81bff2..f296e2bd5 100644 --- a/components/db/bills.ts +++ b/components/db/bills.ts @@ -22,6 +22,7 @@ export type MemberReference = { /** 1 = Legislative Member, 2 = Committee, 3 = Public Request, 4 = Special * Request */ Type: number + ResponseDate: string } export type BillContent = { diff --git a/functions/src/bills/types.ts b/functions/src/bills/types.ts index b9b9347bb..788128971 100644 --- a/functions/src/bills/types.ts +++ b/functions/src/bills/types.ts @@ -44,9 +44,13 @@ export type BillContent = Static export const BillContent = Record({ Pinslip: Nullable(String), Title: String, - PrimarySponsor: Nullable(Record({ Name: String })), + PrimarySponsor: Nullable( + Record({ Name: String, ResponseDate: Maybe(String) }) + ), DocumentText: Maybe(String), - Cosponsors: Array(Record({ Name: Maybe(String) })) + Cosponsors: Array( + Record({ Name: Maybe(String), ResponseDate: Maybe(String) }) + ) }) /** Represents a missing timestamp value. This allows documents without values diff --git a/package.json b/package.json index cb48b5508..c8b760c2a 100644 --- a/package.json +++ b/package.json @@ -75,9 +75,10 @@ "autolinker": "^3.16.0", "awesome-debounce-promise": "^2.1.0", "bootstrap": "5.1.3", + "chart.js": "^4.3.1", + "chartjs-adapter-moment": "^1.0.1", "clsx": "^1.2.1", "copy-to-clipboard": "^3.3.1", - "date-fns": "^2.29.3", "diff": "^5.1.0", "dompurify": "^2.3.10", "express": "^4.18.2", @@ -91,6 +92,7 @@ "logrocket": "^3.0.1", "luxon": "^3.1.1", "marked": "^4.2.5", + "moment": "^2.29.4", "nanoid": "^3.3.1", "next": "^12.1.5", "next-i18next": "^13.1.5", @@ -103,6 +105,7 @@ "react-admin-firebase": "^4.0.12", "react-async-hook": "^4.0.0", "react-bootstrap": "^2.1.1", + "react-chartjs-2": "^5.2.0", "react-copy-to-clipboard": "^5.1.0", "react-dom": "^17.0.2", "react-hook-form": "^7.33.1", diff --git a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx index 48b08cd5f..5848b579e 100644 --- a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx +++ b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx @@ -1,8 +1,8 @@ +import { BillCosponsorCard } from "components/dashboard/BillCosponsorCard" +import { Bill } from "components/db/bills" +import { Timestamp } from "firebase/firestore" import { createMeta } from "stories/utils" -// TODO: move into components directory -const BillCosponsorCard = () =>
TODO
- export default createMeta({ title: "Dashboard/Mission Center/BillCosponsorCard", figmaUrl: @@ -10,4 +10,52 @@ export default createMeta({ component: BillCosponsorCard }) -export const Primary = () => +const bill: Bill = { + id: '1234', + court: 193, + content: { + Pinslip: 'test pinslip', + Title: 'a bill to do legislative things', + PrimarySponsor: { + "Id": "JSC1", + "Name": "Josh S. Cutler", + "Type": 1, + "ResponseDate": "2023-01-17T15:14:22.9133333" + }, + Cosponsors: [ + { + "Id": "JSC1", + "Name": "Josh S. Cutler", + "Type": 1, + "ResponseDate": "2023-01-17T15:14:22.9133333" + }, + { + "Id": "KPL1", + "Name": "Kathleen R. LaNatra", + "Type": 1, + "ResponseDate": "2023-01-17T16:13:57.6333333" + }, + { + "Id": "V_H1", + "Name": "Vanna Howard", + "Type": 1, + "ResponseDate": "2023-02-27T10:26:30.92" + } + ], + DocumentText: 'document text', + BillNumber: 'H1234', + DocketNumber: '1234', + GeneralCourtNumber: 193, + LegislationTypeName: '' +}, +city: 'Boston', +cosponsorCount: 0, +testimonyCount: 0, +endorseCount: 0, +neutralCount: 0, +opposeCount: 0, +fetchedAt: Timestamp.fromMillis(0), +history: [], +} + +export const Primary = () => diff --git a/yarn.lock b/yarn.lock index be11d52c2..aae2151f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3631,6 +3631,11 @@ resolved "https://registry.yarnpkg.com/@jsdevtools/ono/-/ono-7.1.3.tgz#9df03bbd7c696a5c58885c34aa06da41c8543796" integrity sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg== +"@kurkle/color@^0.3.0": + version "0.3.2" + resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f" + integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw== + "@lit-labs/react@^1.0.2": version "1.0.8" resolved "https://registry.yarnpkg.com/@lit-labs/react/-/react-1.0.8.tgz#faba6383e08e4349685fc58a2d316a225924e79a" @@ -8124,6 +8129,18 @@ chardet@^0.7.0: resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== +chart.js@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.3.1.tgz#b83ea014ff9f45e43bfd98ef2bdaba2a9aed8a16" + integrity sha512-QHuISG3hTJ0ftq0I0f5jqH9mNVO9bqG8P+zvMOVslgKajQVvFEX7QAhYNJ+QEmw+uYTwo8XpTimaB82oeTWjxw== + dependencies: + "@kurkle/color" "^0.3.0" + +chartjs-adapter-moment@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/chartjs-adapter-moment/-/chartjs-adapter-moment-1.0.1.tgz#0f04c30d330b207c14bfb57dfaae9ce332f09102" + integrity sha512-Uz+nTX/GxocuqXpGylxK19YG4R3OSVf8326D+HwSTsNw1LgzyIGRo+Qujwro1wy6X+soNSnfj5t2vZ+r6EaDmA== + "chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.2, chokidar@^3.4.1, chokidar@^3.4.2: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" @@ -9042,7 +9059,7 @@ date-fns@^2.16.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== -date-fns@^2.19.0, date-fns@^2.29.3: +date-fns@^2.19.0: version "2.29.3" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== @@ -15183,6 +15200,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +moment@^2.29.4: + version "2.29.4" + resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108" + integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w== + morgan@^1.10.0, morgan@^1.8.2: version "1.10.0" resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.10.0.tgz#091778abc1fc47cd3509824653dae1faab6b17d7" @@ -17199,6 +17221,11 @@ react-bootstrap@^2.1.1: uncontrollable "^7.2.1" warning "^4.0.3" +react-chartjs-2@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz#43c1e3549071c00a1a083ecbd26c1ad34d385f5d" + integrity sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA== + react-copy-to-clipboard@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz#09aae5ec4c62750ccb2e6421a58725eabc41255c" From 1708d4a3a2b60bb6317b1facb383e6903e3ebad6 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 25 Jul 2023 01:12:10 -0400 Subject: [PATCH 2/9] Didn't mean to get rid of this --- package.json | 1 + yarn.lock | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/package.json b/package.json index c8b760c2a..130266682 100644 --- a/package.json +++ b/package.json @@ -79,6 +79,7 @@ "chartjs-adapter-moment": "^1.0.1", "clsx": "^1.2.1", "copy-to-clipboard": "^3.3.1", + "date-fns": "^2.29.3", "diff": "^5.1.0", "dompurify": "^2.3.10", "express": "^4.18.2", diff --git a/yarn.lock b/yarn.lock index aae2151f0..976b4d79b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9064,6 +9064,13 @@ date-fns@^2.19.0: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== +date-fns@^2.29.3: + version "2.30.0" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0" + integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw== + dependencies: + "@babel/runtime" "^7.21.0" + debounce-fn@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/debounce-fn/-/debounce-fn-4.0.0.tgz#ed76d206d8a50e60de0dd66d494d82835ffe61c7" From 063134e5c8ed27791a338ba24c5d6095e9d05d5d Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 25 Jul 2023 01:14:35 -0400 Subject: [PATCH 3/9] Update yarn.lock --- yarn.lock | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/yarn.lock b/yarn.lock index 976b4d79b..531784975 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9059,18 +9059,11 @@ date-fns@^2.16.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2" integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw== -date-fns@^2.19.0: +date-fns@^2.19.0, date-fns@^2.29.3: version "2.29.3" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8" integrity sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA== -date-fns@^2.29.3: - version "2.30.0" - resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0" - integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw== - dependencies: - "@babel/runtime" "^7.21.0" - debounce-fn@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/debounce-fn/-/debounce-fn-4.0.0.tgz#ed76d206d8a50e60de0dd66d494d82835ffe61c7" From 2c92430f4a63cab2c4a0c9ef4e915195602a06e9 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 25 Jul 2023 20:00:24 -0400 Subject: [PATCH 4/9] Moving data to story --- components/bill/BillDetails.tsx | 370 ------------------ components/dashboard/BillCosponsorCard.tsx | 2 +- .../BillCosponsorCard.stories.tsx | 337 +++++++++++++++- 3 files changed, 329 insertions(+), 380 deletions(-) diff --git a/components/bill/BillDetails.tsx b/components/bill/BillDetails.tsx index d991c0d3e..927654ee8 100644 --- a/components/bill/BillDetails.tsx +++ b/components/bill/BillDetails.tsx @@ -15,9 +15,6 @@ import { Committees, Hearing, Sponsors } from "./SponsorsAndCommittees" import { Status } from "./Status" import { Summary } from "./Summary" import { BillProps } from "./types" -import { BillCosponsorCard } from "components/dashboard/BillCosponsorCard" -import { Bill } from "components/db/bills" -import { Timestamp } from "firebase/firestore" const StyledContainer = styled(Container)` font-family: "Nunito"; @@ -91,374 +88,7 @@ export const BillDetails = ({ bill }: BillProps) => { )} - ) } - -const testbill: Bill = { - id: '1234', - court: 193, - content: { - Pinslip: 'test pinslip', - Title: 'a bill to do legislative things', - PrimarySponsor: { - "Id": "JSC1", - "Name": "Josh S. Cutler", - "Type": 1, - "ResponseDate": "2023-01-17T15:14:22.9133333" - }, - Cosponsors: [ - { - "Id": "L_S1", - "Name": "Lindsay N. Sabadosa", - "Type": 1, - - "ResponseDate": "2023-01-18T15:55:36.56" - }, - { - "Id": "DCG1", - "Name": "Denise C. Garlick", - "Type": 1, - - "ResponseDate": "2023-01-18T15:56:46.42" - }, - { - "Id": "JCD1", - "Name": "James C. Arena-DeRosa", - "Type": 1, - - "ResponseDate": "2023-02-18T11:48:54.2" - }, - { - "Id": "SBA1", - "Name": "Shirley B. Arriaga", - "Type": 1, - - "ResponseDate": "2023-05-08T13:16:41.88" - }, - { - "Id": "BMA1", - "Name": "Brian M. Ashe", - "Type": 1, - - "ResponseDate": "2023-06-15T09:28:22.0566667" - }, - { - "Id": "RBB1", - "Name": "Ruth B. Balser", - "Type": 1, - - "ResponseDate": "2023-02-15T12:41:35.2633333" - }, - { - "Id": "CPB2", - "Name": "Christine P. Barber", - "Type": 1, - - "ResponseDate": "2023-02-23T10:22:43.34" - }, - { - "Id": "J_B1", - "Name": "John Barrett, III", - "Type": 1, - - "ResponseDate": "2023-02-10T13:23:01.5266667" - }, - { - "Id": "NMB1", - "Name": "Natalie M. Blais", - "Type": 1, - - "ResponseDate": "2023-02-08T10:10:02.6333333" - }, - { - "Id": "MDB0", - "Name": "Michael D. Brady", - "Type": 1, - - "ResponseDate": "2023-05-04T12:00:13.9566667" - }, - { - "Id": "PLC1", - "Name": "Peter Capano", - "Type": 1, - - "ResponseDate": "2023-01-30T09:29:07.1366667" - }, - { - "Id": "DRC1", - "Name": "Daniel R. Carey", - "Type": 1, - - "ResponseDate": "2023-02-24T13:56:33.48" - }, - { - "Id": "JMC0", - "Name": "Joanne M. Comerford", - "Type": 1, - - "ResponseDate": "2023-02-09T10:21:23.9" - }, - { - "Id": "M_C1", - "Name": "Mike Connolly", - "Type": 1, - - "ResponseDate": "2023-02-15T14:41:47.7766667" - }, - { - "Id": "MCD1", - "Name": "Marjorie C. Decker", - "Type": 1, - - "ResponseDate": "2023-05-03T10:05:32.67" - }, - { - "Id": "SND0", - "Name": "Sal N. DiDomenico", - "Type": 1, - - "ResponseDate": "2023-01-25T16:24:36.71" - }, - { - "Id": "CAD1", - "Name": "Carol A. Doherty", - "Type": 1, - - "ResponseDate": "2023-01-30T15:51:40.3133333" - }, - { - "Id": "M_D2", - "Name": "Mindy Domb", - "Type": 1, - - "ResponseDate": "2023-01-20T14:34:12.0366667" - }, - { - "Id": "K_D1", - "Name": "Kate Donaghue", - "Type": 1, - - "ResponseDate": "2023-02-28T11:24:40.29" - }, - { - "Id": "MMD1", - "Name": "Michelle M. DuBois", - "Type": 1, - - "ResponseDate": "2023-02-07T21:30:17.69" - }, - { - "Id": "PAD1", - "Name": "Patricia A. Duffy", - "Type": 1, - - "ResponseDate": "2023-03-01T16:58:31.3166667" - }, - { - "Id": "JBE0", - "Name": "James B. Eldridge", - "Type": 1, - - "ResponseDate": "2023-02-19T14:52:08.2933333" - }, - { - "Id": "TFB1", - "Name": "Tricia Farley-Bouvier", - "Type": 1, - - "ResponseDate": "2023-02-10T09:43:48.2933333" - }, - { - "Id": "PRF0", - "Name": "Paul R. Feeney", - "Type": 1, - - "ResponseDate": "2023-01-26T15:01:03.0033333" - }, - { - "Id": "CLG1", - "Name": "Carmine Lawrence Gentile", - "Type": 1, - - "ResponseDate": "2023-02-02T22:26:54.4166667" - }, - { - "Id": "C_G1", - "Name": "Carlos González", - "Type": 1, - - "ResponseDate": "2023-03-31T15:59:54.5433333" - }, - { - "Id": "JKH1", - "Name": "James K. Hawkins", - "Type": 1, - - "ResponseDate": "2023-01-27T15:21:11.4266667" - }, - { - "Id": "N_H1", - "Name": "Natalie M. Higgins", - "Type": 1, - - "ResponseDate": "2023-02-14T14:02:56.14" - }, - { - "Id": "PJK1", - "Name": "Patrick Joseph Kearney", - "Type": 1, - - "ResponseDate": "2023-02-09T16:23:34.2233333" - }, - { - "Id": "DAL1", - "Name": "David Henry Argosky LeBoeuf", - "Type": 1, - - "ResponseDate": "2023-01-30T15:18:03.9666667" - }, - { - "Id": "JPL1", - "Name": "Jack Patrick Lewis", - "Type": 1, - - "ResponseDate": "2023-01-20T17:41:31.3866667" - }, - { - "Id": "DPL1", - "Name": "David Paul Linsky", - "Type": 1, - - "ResponseDate": "2023-06-20T15:29:09.34" - }, - { - "Id": "ACM1", - "Name": "Adrian C. Madaro", - "Type": 1, - - "ResponseDate": "2023-02-13T15:39:58.3133333" - }, - { - "Id": "RAM1", - "Name": "Rita A. Mendes", - "Type": 1, - - "ResponseDate": "2023-05-18T15:16:47.1766667" - }, - { - "Id": "S_M1", - "Name": "Samantha Montaño", - "Type": 1, - - "ResponseDate": "2023-01-23T13:59:17.6066667" - }, - { - "Id": "BWM1", - "Name": "Brian W. Murray", - "Type": 1, - - "ResponseDate": "2023-02-16T23:15:34.4966667" - }, - { - "Id": "SCO1", - "Name": "Steven Owens", - "Type": 1, - - "ResponseDate": "2023-03-01T11:33:07.13" - }, - { - "Id": "WSP1", - "Name": "Smitty Pignatelli", - "Type": 1, - - "ResponseDate": "2023-02-08T09:49:01.4633333" - }, - { - "Id": "O_R1", - "Name": "Orlando Ramos", - "Type": 1, - - "ResponseDate": "2023-03-31T11:02:43.65" - }, - { - "Id": "RLR0", - "Name": "Rebecca L. Rausch", - "Type": 1, - - "ResponseDate": "2023-07-07T16:11:25.1866667" - }, - { - "Id": "MRS1", - "Name": "Margaret R. Scarsdale", - "Type": 1, - - "ResponseDate": "2023-03-27T16:41:44.28" - }, - { - "Id": "DAS1", - "Name": "Danillo A. Sena", - "Type": 1, - - "ResponseDate": "2023-03-07T15:35:04.4266667" - }, - { - "Id": "TMS1", - "Name": "Thomas M. Stanley", - "Type": 1, - - "ResponseDate": "2023-02-10T15:47:34.6833333" - }, - { - "Id": "S_G2", - "Name": "Steven Ultrino", - "Type": 1, - - "ResponseDate": "2023-01-31T09:27:05.3833333" - }, - { - "Id": "E_U1", - "Name": "Erika Uyterhoeven", - "Type": 1, - - "ResponseDate": "2023-02-09T13:23:10.4633333" - }, - { - "Id": "T_V1", - "Name": "Tommy Vitolo", - "Type": 1, - - "ResponseDate": "2023-03-30T12:11:00.8333333" - }, - { - "Id": "SLG1", - "Name": "Susannah M. Whipps", - "Type": 1, - - "ResponseDate": "2023-01-27T14:52:06.1266667" - }, - { - "Id": "BLW1", - "Name": "Bud L. Williams", - "Type": 1, - - "ResponseDate": "2023-02-08T19:41:28.4633333" - } - ], - DocumentText: 'document text', - BillNumber: 'H1234', - DocketNumber: '1234', - GeneralCourtNumber: 193, - LegislationTypeName: '' -}, -city: 'Boston', -cosponsorCount: 0, -testimonyCount: 0, -endorseCount: 0, -neutralCount: 0, -opposeCount: 0, -fetchedAt: Timestamp.fromMillis(0), -history: [], -} diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index 3c204f31b..39dfcc890 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -5,7 +5,7 @@ import { Bill } from "components/db/bills" import 'chartjs-adapter-moment'; export const BillCosponsorCard = ({bill}: {bill: Bill}) => { - const precision: string = 'day' + const precision: string = 'exact' const cosponsors = bill.content.Cosponsors const labels = cosponsors.map(cs => new Date(Date.parse(cs.ResponseDate))).sort((a, b) => a.getTime() - b.getTime()) let finalLabels diff --git a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx index 5848b579e..6932d3531 100644 --- a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx +++ b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx @@ -24,22 +24,340 @@ const bill: Bill = { }, Cosponsors: [ { - "Id": "JSC1", - "Name": "Josh S. Cutler", + "Id": "L_S1", + "Name": "Lindsay N. Sabadosa", "Type": 1, - "ResponseDate": "2023-01-17T15:14:22.9133333" + + "ResponseDate": "2023-01-18T15:55:36.56" + }, + { + "Id": "DCG1", + "Name": "Denise C. Garlick", + "Type": 1, + + "ResponseDate": "2023-01-18T15:56:46.42" + }, + { + "Id": "JCD1", + "Name": "James C. Arena-DeRosa", + "Type": 1, + + "ResponseDate": "2023-02-18T11:48:54.2" + }, + { + "Id": "SBA1", + "Name": "Shirley B. Arriaga", + "Type": 1, + + "ResponseDate": "2023-05-08T13:16:41.88" + }, + { + "Id": "BMA1", + "Name": "Brian M. Ashe", + "Type": 1, + + "ResponseDate": "2023-06-15T09:28:22.0566667" + }, + { + "Id": "RBB1", + "Name": "Ruth B. Balser", + "Type": 1, + + "ResponseDate": "2023-02-15T12:41:35.2633333" + }, + { + "Id": "CPB2", + "Name": "Christine P. Barber", + "Type": 1, + + "ResponseDate": "2023-02-23T10:22:43.34" + }, + { + "Id": "J_B1", + "Name": "John Barrett, III", + "Type": 1, + + "ResponseDate": "2023-02-10T13:23:01.5266667" + }, + { + "Id": "NMB1", + "Name": "Natalie M. Blais", + "Type": 1, + + "ResponseDate": "2023-02-08T10:10:02.6333333" + }, + { + "Id": "MDB0", + "Name": "Michael D. Brady", + "Type": 1, + + "ResponseDate": "2023-05-04T12:00:13.9566667" + }, + { + "Id": "PLC1", + "Name": "Peter Capano", + "Type": 1, + + "ResponseDate": "2023-01-30T09:29:07.1366667" + }, + { + "Id": "DRC1", + "Name": "Daniel R. Carey", + "Type": 1, + + "ResponseDate": "2023-02-24T13:56:33.48" + }, + { + "Id": "JMC0", + "Name": "Joanne M. Comerford", + "Type": 1, + + "ResponseDate": "2023-02-09T10:21:23.9" + }, + { + "Id": "M_C1", + "Name": "Mike Connolly", + "Type": 1, + + "ResponseDate": "2023-02-15T14:41:47.7766667" + }, + { + "Id": "MCD1", + "Name": "Marjorie C. Decker", + "Type": 1, + + "ResponseDate": "2023-05-03T10:05:32.67" + }, + { + "Id": "SND0", + "Name": "Sal N. DiDomenico", + "Type": 1, + + "ResponseDate": "2023-01-25T16:24:36.71" + }, + { + "Id": "CAD1", + "Name": "Carol A. Doherty", + "Type": 1, + + "ResponseDate": "2023-01-30T15:51:40.3133333" + }, + { + "Id": "M_D2", + "Name": "Mindy Domb", + "Type": 1, + + "ResponseDate": "2023-01-20T14:34:12.0366667" + }, + { + "Id": "K_D1", + "Name": "Kate Donaghue", + "Type": 1, + + "ResponseDate": "2023-02-28T11:24:40.29" + }, + { + "Id": "MMD1", + "Name": "Michelle M. DuBois", + "Type": 1, + + "ResponseDate": "2023-02-07T21:30:17.69" + }, + { + "Id": "PAD1", + "Name": "Patricia A. Duffy", + "Type": 1, + + "ResponseDate": "2023-03-01T16:58:31.3166667" + }, + { + "Id": "JBE0", + "Name": "James B. Eldridge", + "Type": 1, + + "ResponseDate": "2023-02-19T14:52:08.2933333" + }, + { + "Id": "TFB1", + "Name": "Tricia Farley-Bouvier", + "Type": 1, + + "ResponseDate": "2023-02-10T09:43:48.2933333" + }, + { + "Id": "PRF0", + "Name": "Paul R. Feeney", + "Type": 1, + + "ResponseDate": "2023-01-26T15:01:03.0033333" + }, + { + "Id": "CLG1", + "Name": "Carmine Lawrence Gentile", + "Type": 1, + + "ResponseDate": "2023-02-02T22:26:54.4166667" + }, + { + "Id": "C_G1", + "Name": "Carlos González", + "Type": 1, + + "ResponseDate": "2023-03-31T15:59:54.5433333" + }, + { + "Id": "JKH1", + "Name": "James K. Hawkins", + "Type": 1, + + "ResponseDate": "2023-01-27T15:21:11.4266667" + }, + { + "Id": "N_H1", + "Name": "Natalie M. Higgins", + "Type": 1, + + "ResponseDate": "2023-02-14T14:02:56.14" + }, + { + "Id": "PJK1", + "Name": "Patrick Joseph Kearney", + "Type": 1, + + "ResponseDate": "2023-02-09T16:23:34.2233333" + }, + { + "Id": "DAL1", + "Name": "David Henry Argosky LeBoeuf", + "Type": 1, + + "ResponseDate": "2023-01-30T15:18:03.9666667" + }, + { + "Id": "JPL1", + "Name": "Jack Patrick Lewis", + "Type": 1, + + "ResponseDate": "2023-01-20T17:41:31.3866667" + }, + { + "Id": "DPL1", + "Name": "David Paul Linsky", + "Type": 1, + + "ResponseDate": "2023-06-20T15:29:09.34" + }, + { + "Id": "ACM1", + "Name": "Adrian C. Madaro", + "Type": 1, + + "ResponseDate": "2023-02-13T15:39:58.3133333" + }, + { + "Id": "RAM1", + "Name": "Rita A. Mendes", + "Type": 1, + + "ResponseDate": "2023-05-18T15:16:47.1766667" + }, + { + "Id": "S_M1", + "Name": "Samantha Montaño", + "Type": 1, + + "ResponseDate": "2023-01-23T13:59:17.6066667" + }, + { + "Id": "BWM1", + "Name": "Brian W. Murray", + "Type": 1, + + "ResponseDate": "2023-02-16T23:15:34.4966667" + }, + { + "Id": "SCO1", + "Name": "Steven Owens", + "Type": 1, + + "ResponseDate": "2023-03-01T11:33:07.13" + }, + { + "Id": "WSP1", + "Name": "Smitty Pignatelli", + "Type": 1, + + "ResponseDate": "2023-02-08T09:49:01.4633333" + }, + { + "Id": "O_R1", + "Name": "Orlando Ramos", + "Type": 1, + + "ResponseDate": "2023-03-31T11:02:43.65" + }, + { + "Id": "RLR0", + "Name": "Rebecca L. Rausch", + "Type": 1, + + "ResponseDate": "2023-07-07T16:11:25.1866667" + }, + { + "Id": "MRS1", + "Name": "Margaret R. Scarsdale", + "Type": 1, + + "ResponseDate": "2023-03-27T16:41:44.28" }, { - "Id": "KPL1", - "Name": "Kathleen R. LaNatra", + "Id": "DAS1", + "Name": "Danillo A. Sena", "Type": 1, - "ResponseDate": "2023-01-17T16:13:57.6333333" + + "ResponseDate": "2023-03-07T15:35:04.4266667" + }, + { + "Id": "TMS1", + "Name": "Thomas M. Stanley", + "Type": 1, + + "ResponseDate": "2023-02-10T15:47:34.6833333" + }, + { + "Id": "S_G2", + "Name": "Steven Ultrino", + "Type": 1, + + "ResponseDate": "2023-01-31T09:27:05.3833333" }, { - "Id": "V_H1", - "Name": "Vanna Howard", + "Id": "E_U1", + "Name": "Erika Uyterhoeven", "Type": 1, - "ResponseDate": "2023-02-27T10:26:30.92" + + "ResponseDate": "2023-02-09T13:23:10.4633333" + }, + { + "Id": "T_V1", + "Name": "Tommy Vitolo", + "Type": 1, + + "ResponseDate": "2023-03-30T12:11:00.8333333" + }, + { + "Id": "SLG1", + "Name": "Susannah M. Whipps", + "Type": 1, + + "ResponseDate": "2023-01-27T14:52:06.1266667" + }, + { + "Id": "BLW1", + "Name": "Bud L. Williams", + "Type": 1, + + "ResponseDate": "2023-02-08T19:41:28.4633333" } ], DocumentText: 'document text', @@ -58,4 +376,5 @@ fetchedAt: Timestamp.fromMillis(0), history: [], } + export const Primary = () => From 395a0de9f04143b9686afddb22c89455d3c0217a Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 1 Aug 2023 00:03:07 -0400 Subject: [PATCH 5/9] Linting --- components/dashboard/BillCosponsorCard.tsx | 101 +++-- .../BillTestimonyListCard.stories.tsx | 7 +- .../BillCosponsorCard.stories.tsx | 425 +++++++++--------- 3 files changed, 271 insertions(+), 262 deletions(-) diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index 39dfcc890..8115ab816 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -1,55 +1,60 @@ import { Line } from "react-chartjs-2" import { ChartData, Chart, registerables } from "chart.js" -Chart.register(...registerables); +Chart.register(...registerables) import { Bill } from "components/db/bills" -import 'chartjs-adapter-moment'; +import "chartjs-adapter-moment" -export const BillCosponsorCard = ({bill}: {bill: Bill}) => { - const precision: string = 'exact' - const cosponsors = bill.content.Cosponsors - const labels = cosponsors.map(cs => new Date(Date.parse(cs.ResponseDate))).sort((a, b) => a.getTime() - b.getTime()) - let finalLabels - if (precision === 'day') { - finalLabels = Array.from(new Set(labels.map(d => d.toLocaleDateString()))) - } else { - finalLabels = labels - } - const chartData = finalLabels.map(d => { - const date = typeof d === 'string' ? new Date(d) : d - return cosponsors.filter(cs => new Date(Date.parse(cs.ResponseDate)) <= date).length - }) - const data: ChartData<"line"> = { - labels: finalLabels, - datasets: [ - { - label: 'Cosponsors', - data: chartData, - borderColor: 'rgb(255, 99, 132)', - backgroundColor: 'rgba(255, 99, 132, 0.5)' +export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { + const precision: string = "exact" + const cosponsors = bill.content.Cosponsors + const labels = cosponsors + .map(cs => new Date(Date.parse(cs.ResponseDate))) + .sort((a, b) => a.getTime() - b.getTime()) + let finalLabels + if (precision === "day") { + finalLabels = Array.from(new Set(labels.map(d => d.toLocaleDateString()))) + } else { + finalLabels = labels + } + const chartData = finalLabels.map(d => { + const date = typeof d === "string" ? new Date(d) : d + return cosponsors.filter( + cs => new Date(Date.parse(cs.ResponseDate)) <= date + ).length + }) + const data: ChartData<"line"> = { + labels: finalLabels, + datasets: [ + { + label: "Cosponsors", + data: chartData, + borderColor: "rgb(255, 99, 132)", + backgroundColor: "rgba(255, 99, 132, 0.5)" + } + ] + } + return ( +
+ - + } + }} + />
+ ) } diff --git a/stories/billDetail/BillTestimonyListCard.stories.tsx b/stories/billDetail/BillTestimonyListCard.stories.tsx index d2dff17c6..e655ae275 100644 --- a/stories/billDetail/BillTestimonyListCard.stories.tsx +++ b/stories/billDetail/BillTestimonyListCard.stories.tsx @@ -13,7 +13,12 @@ export default createMeta({ component: BillTestimonyListCard }) -var first = { Id: "test", Name: "tes", Type: 0 } +var first = { + Id: "test", + Name: "tes", + Type: 0, + ResponseDate: "2023-01-17T15:14:22.9133333" +} const Template: ComponentStory = props => { return diff --git a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx index 6932d3531..718695b04 100644 --- a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx +++ b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx @@ -11,370 +11,369 @@ export default createMeta({ }) const bill: Bill = { - id: '1234', + id: "1234", court: 193, content: { - Pinslip: 'test pinslip', - Title: 'a bill to do legislative things', + Pinslip: "test pinslip", + Title: "a bill to do legislative things", PrimarySponsor: { - "Id": "JSC1", - "Name": "Josh S. Cutler", - "Type": 1, - "ResponseDate": "2023-01-17T15:14:22.9133333" + Id: "JSC1", + Name: "Josh S. Cutler", + Type: 1, + ResponseDate: "2023-01-17T15:14:22.9133333" }, Cosponsors: [ { - "Id": "L_S1", - "Name": "Lindsay N. Sabadosa", - "Type": 1, + Id: "L_S1", + Name: "Lindsay N. Sabadosa", + Type: 1, - "ResponseDate": "2023-01-18T15:55:36.56" + ResponseDate: "2023-01-18T15:55:36.56" }, { - "Id": "DCG1", - "Name": "Denise C. Garlick", - "Type": 1, + Id: "DCG1", + Name: "Denise C. Garlick", + Type: 1, - "ResponseDate": "2023-01-18T15:56:46.42" + ResponseDate: "2023-01-18T15:56:46.42" }, { - "Id": "JCD1", - "Name": "James C. Arena-DeRosa", - "Type": 1, + Id: "JCD1", + Name: "James C. Arena-DeRosa", + Type: 1, - "ResponseDate": "2023-02-18T11:48:54.2" + ResponseDate: "2023-02-18T11:48:54.2" }, { - "Id": "SBA1", - "Name": "Shirley B. Arriaga", - "Type": 1, + Id: "SBA1", + Name: "Shirley B. Arriaga", + Type: 1, - "ResponseDate": "2023-05-08T13:16:41.88" + ResponseDate: "2023-05-08T13:16:41.88" }, { - "Id": "BMA1", - "Name": "Brian M. Ashe", - "Type": 1, + Id: "BMA1", + Name: "Brian M. Ashe", + Type: 1, - "ResponseDate": "2023-06-15T09:28:22.0566667" + ResponseDate: "2023-06-15T09:28:22.0566667" }, { - "Id": "RBB1", - "Name": "Ruth B. Balser", - "Type": 1, + Id: "RBB1", + Name: "Ruth B. Balser", + Type: 1, - "ResponseDate": "2023-02-15T12:41:35.2633333" + ResponseDate: "2023-02-15T12:41:35.2633333" }, { - "Id": "CPB2", - "Name": "Christine P. Barber", - "Type": 1, + Id: "CPB2", + Name: "Christine P. Barber", + Type: 1, - "ResponseDate": "2023-02-23T10:22:43.34" + ResponseDate: "2023-02-23T10:22:43.34" }, { - "Id": "J_B1", - "Name": "John Barrett, III", - "Type": 1, + Id: "J_B1", + Name: "John Barrett, III", + Type: 1, - "ResponseDate": "2023-02-10T13:23:01.5266667" + ResponseDate: "2023-02-10T13:23:01.5266667" }, { - "Id": "NMB1", - "Name": "Natalie M. Blais", - "Type": 1, + Id: "NMB1", + Name: "Natalie M. Blais", + Type: 1, - "ResponseDate": "2023-02-08T10:10:02.6333333" + ResponseDate: "2023-02-08T10:10:02.6333333" }, { - "Id": "MDB0", - "Name": "Michael D. Brady", - "Type": 1, + Id: "MDB0", + Name: "Michael D. Brady", + Type: 1, - "ResponseDate": "2023-05-04T12:00:13.9566667" + ResponseDate: "2023-05-04T12:00:13.9566667" }, { - "Id": "PLC1", - "Name": "Peter Capano", - "Type": 1, + Id: "PLC1", + Name: "Peter Capano", + Type: 1, - "ResponseDate": "2023-01-30T09:29:07.1366667" + ResponseDate: "2023-01-30T09:29:07.1366667" }, { - "Id": "DRC1", - "Name": "Daniel R. Carey", - "Type": 1, + Id: "DRC1", + Name: "Daniel R. Carey", + Type: 1, - "ResponseDate": "2023-02-24T13:56:33.48" + ResponseDate: "2023-02-24T13:56:33.48" }, { - "Id": "JMC0", - "Name": "Joanne M. Comerford", - "Type": 1, + Id: "JMC0", + Name: "Joanne M. Comerford", + Type: 1, - "ResponseDate": "2023-02-09T10:21:23.9" + ResponseDate: "2023-02-09T10:21:23.9" }, { - "Id": "M_C1", - "Name": "Mike Connolly", - "Type": 1, + Id: "M_C1", + Name: "Mike Connolly", + Type: 1, - "ResponseDate": "2023-02-15T14:41:47.7766667" + ResponseDate: "2023-02-15T14:41:47.7766667" }, { - "Id": "MCD1", - "Name": "Marjorie C. Decker", - "Type": 1, + Id: "MCD1", + Name: "Marjorie C. Decker", + Type: 1, - "ResponseDate": "2023-05-03T10:05:32.67" + ResponseDate: "2023-05-03T10:05:32.67" }, { - "Id": "SND0", - "Name": "Sal N. DiDomenico", - "Type": 1, + Id: "SND0", + Name: "Sal N. DiDomenico", + Type: 1, - "ResponseDate": "2023-01-25T16:24:36.71" + ResponseDate: "2023-01-25T16:24:36.71" }, { - "Id": "CAD1", - "Name": "Carol A. Doherty", - "Type": 1, + Id: "CAD1", + Name: "Carol A. Doherty", + Type: 1, - "ResponseDate": "2023-01-30T15:51:40.3133333" + ResponseDate: "2023-01-30T15:51:40.3133333" }, { - "Id": "M_D2", - "Name": "Mindy Domb", - "Type": 1, + Id: "M_D2", + Name: "Mindy Domb", + Type: 1, - "ResponseDate": "2023-01-20T14:34:12.0366667" + ResponseDate: "2023-01-20T14:34:12.0366667" }, { - "Id": "K_D1", - "Name": "Kate Donaghue", - "Type": 1, + Id: "K_D1", + Name: "Kate Donaghue", + Type: 1, - "ResponseDate": "2023-02-28T11:24:40.29" + ResponseDate: "2023-02-28T11:24:40.29" }, { - "Id": "MMD1", - "Name": "Michelle M. DuBois", - "Type": 1, + Id: "MMD1", + Name: "Michelle M. DuBois", + Type: 1, - "ResponseDate": "2023-02-07T21:30:17.69" + ResponseDate: "2023-02-07T21:30:17.69" }, { - "Id": "PAD1", - "Name": "Patricia A. Duffy", - "Type": 1, + Id: "PAD1", + Name: "Patricia A. Duffy", + Type: 1, - "ResponseDate": "2023-03-01T16:58:31.3166667" + ResponseDate: "2023-03-01T16:58:31.3166667" }, { - "Id": "JBE0", - "Name": "James B. Eldridge", - "Type": 1, + Id: "JBE0", + Name: "James B. Eldridge", + Type: 1, - "ResponseDate": "2023-02-19T14:52:08.2933333" + ResponseDate: "2023-02-19T14:52:08.2933333" }, { - "Id": "TFB1", - "Name": "Tricia Farley-Bouvier", - "Type": 1, + Id: "TFB1", + Name: "Tricia Farley-Bouvier", + Type: 1, - "ResponseDate": "2023-02-10T09:43:48.2933333" + ResponseDate: "2023-02-10T09:43:48.2933333" }, { - "Id": "PRF0", - "Name": "Paul R. Feeney", - "Type": 1, + Id: "PRF0", + Name: "Paul R. Feeney", + Type: 1, - "ResponseDate": "2023-01-26T15:01:03.0033333" + ResponseDate: "2023-01-26T15:01:03.0033333" }, { - "Id": "CLG1", - "Name": "Carmine Lawrence Gentile", - "Type": 1, + Id: "CLG1", + Name: "Carmine Lawrence Gentile", + Type: 1, - "ResponseDate": "2023-02-02T22:26:54.4166667" + ResponseDate: "2023-02-02T22:26:54.4166667" }, { - "Id": "C_G1", - "Name": "Carlos González", - "Type": 1, + Id: "C_G1", + Name: "Carlos González", + Type: 1, - "ResponseDate": "2023-03-31T15:59:54.5433333" + ResponseDate: "2023-03-31T15:59:54.5433333" }, { - "Id": "JKH1", - "Name": "James K. Hawkins", - "Type": 1, + Id: "JKH1", + Name: "James K. Hawkins", + Type: 1, - "ResponseDate": "2023-01-27T15:21:11.4266667" + ResponseDate: "2023-01-27T15:21:11.4266667" }, { - "Id": "N_H1", - "Name": "Natalie M. Higgins", - "Type": 1, + Id: "N_H1", + Name: "Natalie M. Higgins", + Type: 1, - "ResponseDate": "2023-02-14T14:02:56.14" + ResponseDate: "2023-02-14T14:02:56.14" }, { - "Id": "PJK1", - "Name": "Patrick Joseph Kearney", - "Type": 1, + Id: "PJK1", + Name: "Patrick Joseph Kearney", + Type: 1, - "ResponseDate": "2023-02-09T16:23:34.2233333" + ResponseDate: "2023-02-09T16:23:34.2233333" }, { - "Id": "DAL1", - "Name": "David Henry Argosky LeBoeuf", - "Type": 1, + Id: "DAL1", + Name: "David Henry Argosky LeBoeuf", + Type: 1, - "ResponseDate": "2023-01-30T15:18:03.9666667" + ResponseDate: "2023-01-30T15:18:03.9666667" }, { - "Id": "JPL1", - "Name": "Jack Patrick Lewis", - "Type": 1, + Id: "JPL1", + Name: "Jack Patrick Lewis", + Type: 1, - "ResponseDate": "2023-01-20T17:41:31.3866667" + ResponseDate: "2023-01-20T17:41:31.3866667" }, { - "Id": "DPL1", - "Name": "David Paul Linsky", - "Type": 1, + Id: "DPL1", + Name: "David Paul Linsky", + Type: 1, - "ResponseDate": "2023-06-20T15:29:09.34" + ResponseDate: "2023-06-20T15:29:09.34" }, { - "Id": "ACM1", - "Name": "Adrian C. Madaro", - "Type": 1, + Id: "ACM1", + Name: "Adrian C. Madaro", + Type: 1, - "ResponseDate": "2023-02-13T15:39:58.3133333" + ResponseDate: "2023-02-13T15:39:58.3133333" }, { - "Id": "RAM1", - "Name": "Rita A. Mendes", - "Type": 1, + Id: "RAM1", + Name: "Rita A. Mendes", + Type: 1, - "ResponseDate": "2023-05-18T15:16:47.1766667" + ResponseDate: "2023-05-18T15:16:47.1766667" }, { - "Id": "S_M1", - "Name": "Samantha Montaño", - "Type": 1, + Id: "S_M1", + Name: "Samantha Montaño", + Type: 1, - "ResponseDate": "2023-01-23T13:59:17.6066667" + ResponseDate: "2023-01-23T13:59:17.6066667" }, { - "Id": "BWM1", - "Name": "Brian W. Murray", - "Type": 1, + Id: "BWM1", + Name: "Brian W. Murray", + Type: 1, - "ResponseDate": "2023-02-16T23:15:34.4966667" + ResponseDate: "2023-02-16T23:15:34.4966667" }, { - "Id": "SCO1", - "Name": "Steven Owens", - "Type": 1, + Id: "SCO1", + Name: "Steven Owens", + Type: 1, - "ResponseDate": "2023-03-01T11:33:07.13" + ResponseDate: "2023-03-01T11:33:07.13" }, { - "Id": "WSP1", - "Name": "Smitty Pignatelli", - "Type": 1, + Id: "WSP1", + Name: "Smitty Pignatelli", + Type: 1, - "ResponseDate": "2023-02-08T09:49:01.4633333" + ResponseDate: "2023-02-08T09:49:01.4633333" }, { - "Id": "O_R1", - "Name": "Orlando Ramos", - "Type": 1, + Id: "O_R1", + Name: "Orlando Ramos", + Type: 1, - "ResponseDate": "2023-03-31T11:02:43.65" + ResponseDate: "2023-03-31T11:02:43.65" }, { - "Id": "RLR0", - "Name": "Rebecca L. Rausch", - "Type": 1, + Id: "RLR0", + Name: "Rebecca L. Rausch", + Type: 1, - "ResponseDate": "2023-07-07T16:11:25.1866667" + ResponseDate: "2023-07-07T16:11:25.1866667" }, { - "Id": "MRS1", - "Name": "Margaret R. Scarsdale", - "Type": 1, + Id: "MRS1", + Name: "Margaret R. Scarsdale", + Type: 1, - "ResponseDate": "2023-03-27T16:41:44.28" + ResponseDate: "2023-03-27T16:41:44.28" }, { - "Id": "DAS1", - "Name": "Danillo A. Sena", - "Type": 1, + Id: "DAS1", + Name: "Danillo A. Sena", + Type: 1, - "ResponseDate": "2023-03-07T15:35:04.4266667" + ResponseDate: "2023-03-07T15:35:04.4266667" }, { - "Id": "TMS1", - "Name": "Thomas M. Stanley", - "Type": 1, + Id: "TMS1", + Name: "Thomas M. Stanley", + Type: 1, - "ResponseDate": "2023-02-10T15:47:34.6833333" + ResponseDate: "2023-02-10T15:47:34.6833333" }, { - "Id": "S_G2", - "Name": "Steven Ultrino", - "Type": 1, + Id: "S_G2", + Name: "Steven Ultrino", + Type: 1, - "ResponseDate": "2023-01-31T09:27:05.3833333" + ResponseDate: "2023-01-31T09:27:05.3833333" }, { - "Id": "E_U1", - "Name": "Erika Uyterhoeven", - "Type": 1, + Id: "E_U1", + Name: "Erika Uyterhoeven", + Type: 1, - "ResponseDate": "2023-02-09T13:23:10.4633333" + ResponseDate: "2023-02-09T13:23:10.4633333" }, { - "Id": "T_V1", - "Name": "Tommy Vitolo", - "Type": 1, + Id: "T_V1", + Name: "Tommy Vitolo", + Type: 1, - "ResponseDate": "2023-03-30T12:11:00.8333333" + ResponseDate: "2023-03-30T12:11:00.8333333" }, { - "Id": "SLG1", - "Name": "Susannah M. Whipps", - "Type": 1, + Id: "SLG1", + Name: "Susannah M. Whipps", + Type: 1, - "ResponseDate": "2023-01-27T14:52:06.1266667" + ResponseDate: "2023-01-27T14:52:06.1266667" }, { - "Id": "BLW1", - "Name": "Bud L. Williams", - "Type": 1, + Id: "BLW1", + Name: "Bud L. Williams", + Type: 1, - "ResponseDate": "2023-02-08T19:41:28.4633333" + ResponseDate: "2023-02-08T19:41:28.4633333" } ], - DocumentText: 'document text', - BillNumber: 'H1234', - DocketNumber: '1234', + DocumentText: "document text", + BillNumber: "H1234", + DocketNumber: "1234", GeneralCourtNumber: 193, - LegislationTypeName: '' -}, -city: 'Boston', -cosponsorCount: 0, -testimonyCount: 0, -endorseCount: 0, -neutralCount: 0, -opposeCount: 0, -fetchedAt: Timestamp.fromMillis(0), -history: [], + LegislationTypeName: "" + }, + city: "Boston", + cosponsorCount: 0, + testimonyCount: 0, + endorseCount: 0, + neutralCount: 0, + opposeCount: 0, + fetchedAt: Timestamp.fromMillis(0), + history: [] } - export const Primary = () => From 091f548439ba488851097166db31a7f657682256 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Mon, 7 Aug 2023 02:19:13 -0400 Subject: [PATCH 6/9] Cosponsor info on hover --- components/dashboard/BillCosponsorCard.tsx | 162 +++++++++++++++--- .../BillCosponsorCard.stories.tsx | 2 +- 2 files changed, 135 insertions(+), 29 deletions(-) diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index 8115ab816..82622a6b3 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -1,38 +1,43 @@ import { Line } from "react-chartjs-2" import { ChartData, Chart, registerables } from "chart.js" Chart.register(...registerables) -import { Bill } from "components/db/bills" +import { Bill, MemberReference } from "components/db/bills" import "chartjs-adapter-moment" + +const parseResponseDate = (date: string): Date => { + return new Date(Date.parse(date)) +} + export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { - const precision: string = "exact" - const cosponsors = bill.content.Cosponsors - const labels = cosponsors - .map(cs => new Date(Date.parse(cs.ResponseDate))) - .sort((a, b) => a.getTime() - b.getTime()) - let finalLabels - if (precision === "day") { - finalLabels = Array.from(new Set(labels.map(d => d.toLocaleDateString()))) - } else { - finalLabels = labels - } - const chartData = finalLabels.map(d => { + const sortedCosponsors = bill.content.Cosponsors.sort( + (a, b) => parseResponseDate(a.ResponseDate).getTime() - parseResponseDate(b.ResponseDate).getTime() + ) + const labels = sortedCosponsors.map(cs => parseResponseDate(cs.ResponseDate)) + const chartData = labels.map(d => { const date = typeof d === "string" ? new Date(d) : d - return cosponsors.filter( - cs => new Date(Date.parse(cs.ResponseDate)) <= date - ).length + const signedOn = sortedCosponsors.filter( + cs => parseResponseDate(cs.ResponseDate) <= date + ) + return { + index: signedOn.length, + newest: signedOn.pop(), + } }) - const data: ChartData<"line"> = { - labels: finalLabels, - datasets: [ - { - label: "Cosponsors", - data: chartData, - borderColor: "rgb(255, 99, 132)", - backgroundColor: "rgba(255, 99, 132, 0.5)" - } - ] + const data: ChartData<'line', {index: number, newest: MemberReference | undefined} []> = { + labels: labels, + datasets: [{ + label: "Cosponsors", + data: chartData, + parsing: { + xAxisKey: 'newest.ResponseDate', + yAxisKey: 'index' + }, + borderColor: "rgb(255, 99, 132)", + backgroundColor: "rgba(255, 99, 132, 0.5)" + }] } + return (
{ } }, y: { - min: Math.min(...chartData), - max: Math.max(...chartData) + 2, + min: 0, + max: chartData.length + 2, ticks: { stepSize: 1 } } + }, + plugins: { + title: { + display: true, + text: `Cosponsors - ${bill.id}` + }, + tooltip: { + enabled: false, + position: 'nearest', + external: externalTooltipHandler, + } } }} />
) } + +const getOrCreateTooltip = (chart) => { + let tooltipEl = chart.canvas.parentNode.querySelector('div'); + + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)'; + tooltipEl.style.borderRadius = '3px'; + tooltipEl.style.color = 'white'; + tooltipEl.style.opacity = 1; + tooltipEl.style.pointerEvents = 'none'; + tooltipEl.style.position = 'absolute'; + tooltipEl.style.transform = 'translate(-50%, 0)'; + tooltipEl.style.transition = 'all .1s ease'; + + chart.canvas.parentNode.appendChild(tooltipEl); + } + + const tooltipContent = document.createElement('div'); + tooltipContent.setAttribute('id', 'tooltip-content') + tooltipContent.style.margin = '0px'; + + tooltipEl.appendChild(tooltipContent); + + return tooltipEl; +}; + +const externalTooltipHandler = (context) => { + // Tooltip Element + const {chart, tooltip} = context; + const tooltipEl = getOrCreateTooltip(chart); + + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + + if (tooltip.body) { + + const tooltipContent = tooltipEl.querySelector('#tooltip-content'); + tooltipContent.style.display = 'flex' + tooltipContent.style.flexDirection = 'column' + tooltipContent.style.alignItems = 'center' + + const imageContainer = document.createElement('div') + imageContainer.style.height = '75px' + imageContainer.style.width = '75px' + imageContainer.style.clipPath = 'circle(40%)' + + const image = document.createElement('img') + const data = tooltip.dataPoints[0] + const index: number = data.dataIndex + const item = data.dataset.data[index].newest + image.style.width = '75px' + image.style.height = 'auto' + image.src = `https://malegislature.gov/Legislators/Profile/173/${item.Id}.jpg` + + const label = document.createElement('div') + label.style.display = 'flex' + label.style.flexDirection = 'column' + label.style.textAlign = 'center' + label.innerHTML = ` + ${item.Name} + Cosponsors: ${data.dataset.data[index].index} + Date: ${parseResponseDate(item.ResponseDate).toLocaleString()} + ` + + // Remove old children + while (tooltipContent.firstChild) { + tooltipContent.firstChild.remove(); + } + + // Add new children + tooltipContent.appendChild(imageContainer) + tooltipContent.appendChild(label) + imageContainer.appendChild(image) + + } + + const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + + // Display, position, and set styles for font + tooltipEl.style.opacity = 1; + tooltipEl.style.font = tooltip.options.bodyFont.string; + tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px'; + tooltipEl.style.whiteSpace = 'nowrap' + tooltipEl.style.left = positionX + tooltip.caretX + 'px'; + tooltipEl.style.top = positionY + tooltip.caretY + 'px'; +}; diff --git a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx index 718695b04..4213be327 100644 --- a/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx +++ b/stories/dashboard/missionCenter/BillCosponsorCard.stories.tsx @@ -11,7 +11,7 @@ export default createMeta({ }) const bill: Bill = { - id: "1234", + id: "H1234", court: 193, content: { Pinslip: "test pinslip", From 17cd0ab30c5915837211bcb64f49c7393759f980 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Mon, 7 Aug 2023 02:19:41 -0400 Subject: [PATCH 7/9] Update BillCosponsorCard.tsx --- components/dashboard/BillCosponsorCard.tsx | 141 +++++++++++---------- 1 file changed, 74 insertions(+), 67 deletions(-) diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index 82622a6b3..d19a03842 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -4,14 +4,15 @@ Chart.register(...registerables) import { Bill, MemberReference } from "components/db/bills" import "chartjs-adapter-moment" - const parseResponseDate = (date: string): Date => { return new Date(Date.parse(date)) } export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { const sortedCosponsors = bill.content.Cosponsors.sort( - (a, b) => parseResponseDate(a.ResponseDate).getTime() - parseResponseDate(b.ResponseDate).getTime() + (a, b) => + parseResponseDate(a.ResponseDate).getTime() - + parseResponseDate(b.ResponseDate).getTime() ) const labels = sortedCosponsors.map(cs => parseResponseDate(cs.ResponseDate)) const chartData = labels.map(d => { @@ -21,21 +22,26 @@ export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { ) return { index: signedOn.length, - newest: signedOn.pop(), + newest: signedOn.pop() } }) - const data: ChartData<'line', {index: number, newest: MemberReference | undefined} []> = { + const data: ChartData< + "line", + { index: number; newest: MemberReference | undefined }[] + > = { labels: labels, - datasets: [{ - label: "Cosponsors", - data: chartData, - parsing: { - xAxisKey: 'newest.ResponseDate', - yAxisKey: 'index' - }, - borderColor: "rgb(255, 99, 132)", - backgroundColor: "rgba(255, 99, 132, 0.5)" - }] + datasets: [ + { + label: "Cosponsors", + data: chartData, + parsing: { + xAxisKey: "newest.ResponseDate", + yAxisKey: "index" + }, + borderColor: "rgb(255, 99, 132)", + backgroundColor: "rgba(255, 99, 132, 0.5)" + } + ] } return ( @@ -65,8 +71,8 @@ export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { }, tooltip: { enabled: false, - position: 'nearest', - external: externalTooltipHandler, + position: "nearest", + external: externalTooltipHandler } } }} @@ -75,92 +81,93 @@ export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { ) } -const getOrCreateTooltip = (chart) => { - let tooltipEl = chart.canvas.parentNode.querySelector('div'); +const getOrCreateTooltip = chart => { + let tooltipEl = chart.canvas.parentNode.querySelector("div") if (!tooltipEl) { - tooltipEl = document.createElement('div'); - tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)'; - tooltipEl.style.borderRadius = '3px'; - tooltipEl.style.color = 'white'; - tooltipEl.style.opacity = 1; - tooltipEl.style.pointerEvents = 'none'; - tooltipEl.style.position = 'absolute'; - tooltipEl.style.transform = 'translate(-50%, 0)'; - tooltipEl.style.transition = 'all .1s ease'; - - chart.canvas.parentNode.appendChild(tooltipEl); + tooltipEl = document.createElement("div") + tooltipEl.style.background = "rgba(0, 0, 0, 0.7)" + tooltipEl.style.borderRadius = "3px" + tooltipEl.style.color = "white" + tooltipEl.style.opacity = 1 + tooltipEl.style.pointerEvents = "none" + tooltipEl.style.position = "absolute" + tooltipEl.style.transform = "translate(-50%, 0)" + tooltipEl.style.transition = "all .1s ease" + + chart.canvas.parentNode.appendChild(tooltipEl) } - const tooltipContent = document.createElement('div'); - tooltipContent.setAttribute('id', 'tooltip-content') - tooltipContent.style.margin = '0px'; + const tooltipContent = document.createElement("div") + tooltipContent.setAttribute("id", "tooltip-content") + tooltipContent.style.margin = "0px" - tooltipEl.appendChild(tooltipContent); + tooltipEl.appendChild(tooltipContent) - return tooltipEl; -}; + return tooltipEl +} -const externalTooltipHandler = (context) => { +const externalTooltipHandler = context => { // Tooltip Element - const {chart, tooltip} = context; - const tooltipEl = getOrCreateTooltip(chart); + const { chart, tooltip } = context + const tooltipEl = getOrCreateTooltip(chart) // Hide if no tooltip if (tooltip.opacity === 0) { - tooltipEl.style.opacity = 0; - return; + tooltipEl.style.opacity = 0 + return } if (tooltip.body) { + const tooltipContent = tooltipEl.querySelector("#tooltip-content") + tooltipContent.style.display = "flex" + tooltipContent.style.flexDirection = "column" + tooltipContent.style.alignItems = "center" - const tooltipContent = tooltipEl.querySelector('#tooltip-content'); - tooltipContent.style.display = 'flex' - tooltipContent.style.flexDirection = 'column' - tooltipContent.style.alignItems = 'center' - - const imageContainer = document.createElement('div') - imageContainer.style.height = '75px' - imageContainer.style.width = '75px' - imageContainer.style.clipPath = 'circle(40%)' + const imageContainer = document.createElement("div") + imageContainer.style.height = "75px" + imageContainer.style.width = "75px" + imageContainer.style.clipPath = "circle(40%)" - const image = document.createElement('img') + const image = document.createElement("img") const data = tooltip.dataPoints[0] const index: number = data.dataIndex const item = data.dataset.data[index].newest - image.style.width = '75px' - image.style.height = 'auto' + image.style.width = "75px" + image.style.height = "auto" image.src = `https://malegislature.gov/Legislators/Profile/173/${item.Id}.jpg` - const label = document.createElement('div') - label.style.display = 'flex' - label.style.flexDirection = 'column' - label.style.textAlign = 'center' + const label = document.createElement("div") + label.style.display = "flex" + label.style.flexDirection = "column" + label.style.textAlign = "center" label.innerHTML = ` ${item.Name} Cosponsors: ${data.dataset.data[index].index} - Date: ${parseResponseDate(item.ResponseDate).toLocaleString()} + Date: ${parseResponseDate( + item.ResponseDate + ).toLocaleString()} ` // Remove old children while (tooltipContent.firstChild) { - tooltipContent.firstChild.remove(); + tooltipContent.firstChild.remove() } // Add new children tooltipContent.appendChild(imageContainer) tooltipContent.appendChild(label) imageContainer.appendChild(image) - } - const {offsetLeft: positionX, offsetTop: positionY} = chart.canvas; + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas // Display, position, and set styles for font - tooltipEl.style.opacity = 1; - tooltipEl.style.font = tooltip.options.bodyFont.string; - tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px'; - tooltipEl.style.whiteSpace = 'nowrap' - tooltipEl.style.left = positionX + tooltip.caretX + 'px'; - tooltipEl.style.top = positionY + tooltip.caretY + 'px'; -}; + tooltipEl.style.opacity = 1 + tooltipEl.style.font = tooltip.options.bodyFont.string + tooltipEl.style.padding = + tooltip.options.padding + "px " + tooltip.options.padding + "px" + tooltipEl.style.whiteSpace = "nowrap" + tooltipEl.style.left = positionX + tooltip.caretX + "px" + tooltipEl.style.top = positionY + tooltip.caretY + "px" +} From 87c427cfeda1dd6c7595ef2c8145bbd4130a4e38 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 8 Aug 2023 19:03:59 -0400 Subject: [PATCH 8/9] Update BillCosponsorCard.tsx --- components/dashboard/BillCosponsorCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index d19a03842..d60b40405 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -81,7 +81,7 @@ export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { ) } -const getOrCreateTooltip = chart => { +const getOrCreateTooltip = (chart: { canvas: { parentNode: { querySelector: (arg0: string) => any; appendChild: (arg0: any) => void } } }) => { let tooltipEl = chart.canvas.parentNode.querySelector("div") if (!tooltipEl) { @@ -107,7 +107,7 @@ const getOrCreateTooltip = chart => { return tooltipEl } -const externalTooltipHandler = context => { +const externalTooltipHandler = (context: { chart: any; tooltip: any }) => { // Tooltip Element const { chart, tooltip } = context const tooltipEl = getOrCreateTooltip(chart) From ccdea5bedebd7a32d09e356a6f02dad330c882a3 Mon Sep 17 00:00:00 2001 From: Austin Houck Date: Tue, 8 Aug 2023 19:12:24 -0400 Subject: [PATCH 9/9] Update BillCosponsorCard.tsx --- components/dashboard/BillCosponsorCard.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/dashboard/BillCosponsorCard.tsx b/components/dashboard/BillCosponsorCard.tsx index d60b40405..670f59d5a 100644 --- a/components/dashboard/BillCosponsorCard.tsx +++ b/components/dashboard/BillCosponsorCard.tsx @@ -81,7 +81,14 @@ export const BillCosponsorCard = ({ bill }: { bill: Bill }) => { ) } -const getOrCreateTooltip = (chart: { canvas: { parentNode: { querySelector: (arg0: string) => any; appendChild: (arg0: any) => void } } }) => { +const getOrCreateTooltip = (chart: { + canvas: { + parentNode: { + querySelector: (arg0: string) => any + appendChild: (arg0: any) => void + } + } +}) => { let tooltipEl = chart.canvas.parentNode.querySelector("div") if (!tooltipEl) {