opensandiego/sdvv-frontend

Frontend for the Campaign Finance Transparency Dashboard

Transparency Dashboard for San Diego City elections

Organizations Involved in the Project

• Open San Diego
• Represent.us
• Common Cause
• League of Women's Voters

Links

• Production website: https://followthemoneysandiego.org/
• Development branch (dev) website: https://develop-san-diego-voters-voice.web.app/
• UI Design Prototype

Background Information

Currently, campaign finance information for candidates running for local offices as well as money spent by outside groups to support or defeat them is not readily accessible to the public. When the amount of money being spent as well as the source is not known, voters feel disenfranchised by the election process. Making campaign finance data easy to find and read will increase public trust and confidence in the election process.

For more information with Voter's Voice Initiative visit https://sdvotersvoice.org/

Data Source

The campaign finance data used in this site is sourced from publicly available campaign disclosure data provided by the City of San Diego's Electronic Filing System.

Prerequisites

• Angular CLI 16+
• npm 9.8+
• node 18+

Setup

1. Clone directory from github

2. change to the sdvv-frontend directory

cd sdvv-frontend

3. Run npm install to install all the dependencies

npm install

4. Install the Angular CLI

npm install -g @angular/cli

5. Build the libraries at least once. This will build them into the /dist folder.

npm run build:lib

If you are modifying a component in a library then you can run either library in watch mode using:

npm run start:lib:ui:charts
npm run start:lib:ui:components

6. Start the Angular server then browse to http://localhost:4200/

npm run start

Or to start the server and open the application in the browser.

ng serve --open

The easiest way to run the site locally is to have it access the data using the remote development backend hosted on Heroku. This does not require the backend or database to be run locally. To do this use:

npm run start:db:remote

Contributing

Contributing

sdvv-frontend's Issues

Create netfile_api branch which netfile_api_2020.csv file and netfile_api_2019.csv will be uploaded

mis-wording on FAQ page?

Current wording:
What is an independent expenditure?
Independent expenditures are campaign communications that expressly advocate for the election or defeat of a candidate that is not made in cooperation, consultation or concert with; or at the request or suggestion of a candidate, candidate's authorized committee or political party.

Shouldn't this be: Independent expenditures are campaign contributions instead of communications?

Create a race sum of all contributions for Mayor, City Council and City Attorney

Calculate for each race

1. Download the candidate's from the following file (https://docs.google.com/spreadsheets/d/1mENueYg0PhXE_MA9AypWWBJvBLdY03b8H_N_aIW-Ohw/edit#gid=0)
   Create a for loop to run through the Candidate_Name column
2. Create a for loop and filter by Mayor, City Council and City Attorney
3. Sum the total for all contributions for each race
4. Add contributions for each race to file src/assets/candidates/2020/campaign_race_totals.json

Voters Voice Initiatives home button

The boundary of the Voters Voice Initiatives home button in the upper left hand corner extends very far to the right. Is this intentional? Also, it has a brightly colored outline that appears after you click on it that does not go away until you click somewhere else on the page.

inconsistent spelling of Voters Voice Initiative

Which way is correct?

Voter's Voice Initiative
Voters’ Voice Initiatives

Note the placement of the apostrophe and the singular vs. plural on Initiative(s)

Mayor page Industry Breakdown table issues

On the Mayor page, the By Industry table needs more spacing, but it is not clear what this is so it may also need some re-design or at least a good explanation in the ToolTip.

1. It is not clear what the left column with the green dots represents. Why green dots and how are those different job titles related to the contributions for this candidate? Maybe need a table header row to describe each column?
2. Need more padding between the columns.</del
3. Right justify the column with the dollar amounts, and can we eliminate the decimal/cents (looks like all amounts are whole dollars anyway).
4. The percentages look off. Are these values accurate? What do they represent?

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

configure initial settings for sdvv-frontend with angular

/mayor webpage is not displaying mayor candidate card image properly

Found bug with chrome Version 84.0.4147.125 (Official Build) (64-bit) on Mac. Tested with Firefox and Safari, no problems.

use the netfile_api branch to make changes to scripts for candidate calculations. New scripts will use netfile_api_2020.csv and netfile_api_2019.csv to perform calculations. There will be a md file describing the new column changes

Create github pipeline to firebase

initialize firebase web application

• Create account
• Associate domain to use

'All Races' toggle

The 'All Races' toggle in the upper right hand corner is a little confusing. It's not really clear on first glance what this button is for. I noticed that the left hand filters disappear/reappear after clicking it a few times, but it does not seem to change the content of the main area of the page.
If this button is just to toggle the filter list, it seems like it should have a different label (wording) and maybe placement closer to the list itself?
If it is supposed to change what gets displayed, it looks like it's not working as intended.
It also does not change appearance on mouseover the way other buttons do. Is this intentional?

Download 2018 data for from netfile API

Candidate data also goes back to 2018. Download data from netfile API, name file netfile_api_2019.csv and save to src/assests/data

add github code to firebase

candidate calculation - spent

Create a function that takes a file path and json file. It will update the following information into the json file from excel spreadsheet (located in src/assests/data/netfile_2020.xlsx)

spent

Further information follow instructions on for above category view https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

Mayor page link to candidate website incorrect

On the Mayor page there is a link that looks like it goes to the candidate's web site but it does not:

<div _ngcontent-uji-c9="" class="website-link"><mat-icon _ngcontent-uji-c9="" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">link</mat-icon><a _ngcontent-uji-c9="" href="">Website</a></div>

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

Write HTML/SCSS for Homepage Component (Top & Side Nav, Footer)

Usability Testing Round 1

Conduct usability testing on initial round of volunteers and compile a report of the findings so we can iterate on those.

Create script to download 2020 data from netfile API to src/assets/data.Name the file netfile_api_2020.csv. Perform the same actions for the 2019 data, name the file netfile_api_2019.csv.

Mayor page Raised v. Spent bar chart needs more spacing

The Raised v. Spent bar chart on the Mayor page needs more spacing between the two bars. If the two values are similar and high numbers they could overlap:

Please see screenshot

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

candidate calculation - support

Follow instructions for "support" in the below link https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

Create wireframe for mayor grid page. After this is complete create css and html layout for mayor grid page (mobile)

After this is complete let Gino and Stephen know so they can add it to the repo

candidate calculation - industry

Create a function that takes a file path and json file. It will update the following information into the json file from excel spreadsheet (located in src/assests/data/netfile_2020.xlsx)

industry

Further information follow instructions on for above category view https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

Create smoke tests for website to confirm all links are working. Discuss further any additional tests that might be useful.

Mayor panel list shows John Jones for each candidate

When clicking on the mayor panel the three candidates that show up below all say John Jones instead of the candidate's name.

Mayor detail page Raised / Donors spacing issue

On the mayor page in the candidate detail there needs to be some more padding between Raised / Donors:

<div _ngcontent-uji-c9="" class="raised-donors p-grid p-justify-center p-align-center p-col-12 p-xl-3 p-lg-3"><div _ngcontent-uji-c9="" class="raised p-col-6 p-xl-3 p-lg-3 p-md-3"><p _ngcontent-uji-c9="" class="raised-title">Raised</p><div _ngcontent-uji-c9="" class="raised-amount">$150,000</div></div><div _ngcontent-uji-c9="" class="donors p-col-6 p-xl-3 p-lg-3 p-md-3"><p _ngcontent-uji-c9="" class="donors-title">Donors</p><div _ngcontent-uji-c9="" class="donors-amount">3250</div></div></div>

Please see screenshot:

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

Percentages for "by industry" for each candidate percentages are incorrect

The percentages are showing 8000% (as an example) when viewing the detailed candidate card for each candidate.

missing link Learn About Us

There is a missing link on the main page under 'Learn About Us'

Update github frontend master code to firebase and verify that website is publishing correctly

Send screenshot or document about FAQ and help page to Amy so she can respond with information that is needed

Create readme file describing new columns names and how we can apply filters. As an example, to calculate committee contributions in the excel spreadsheet we filter by filer_id and then sum the transaction_2 columns from all the contribution sheets. How can we now find all contributions from the columns listed in the csv file.

Create wireframe for splash page. After this is complete create css and html layout for splash page (mobile)

After css and html is completed, follow up with Gino or Stephen so they can add it to the repository

Explore UX wireframes and graphics to see what components will be needed for angular

candidate calculation - donor

Create a function that takes a file path and json file. It will update the following information the json file excel spreadsheet (located in src/assests/data/netfile_2020.xlsx)

donor

Further information follow instructions on https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

Mayor detail page Support / Oppose is confusing

On the Mayor detail page there is a an issue with the Support / Oppose. Currently, for Barbara Bry it shows $153.675K for support. I think that showing the value in thousands in this way is confusing. People are not used to seeing 3 digits after a decimal point for dollar amounts. Better to not force the user to do math in their head. I can't tell if the same thing is done for the oppose value since it is currently 0.

Please see screenshot:

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

udpate wording on splash page

Please change:
Who is the Voters' Voice Initiatives?
The Voters’ Voice Initiatives are aimed at providing “we the people” a greater voice in our government. Transparency in campaign finance is critical. Providing full disclosure on the flow of money in local politics empowers citizens to hold their government accountable for decisions made. Transparency reduces the potential for corruption and increases trust between voters and their government.
To:
The Voters' Voice Initiatives is a non-partisan coalition (including Represent.us and the League of Women Voters) working to give "We The People" a greater voice in our local government by:

• Improving Transparency in Campaign Finance
• Providing Full Disclosure on the Flow of Money
• Reducing the Potential for Corruption
• Increasing Accountability in Government

Candidate card numbers are not updating when switching between candidates

Clicking on Mayor panel > then clicking on the candidates detail card will show the candidate card. If you switch from one candidate card to the other the below calculations are not updated.

• raised vs spent money and bar charts
• By industry top 5 do not change
• The oppose vs support numbers do not change

Create an "average donation" calculation.

• Average Donation
  1. Download the candidate's from the following file (https://docs.google.com/spreadsheets/d/1mENueYg0PhXE_MA9AypWWBJvBLdY03b8H_N_aIW-Ohw/edit#gid=0)
  2. Create a for loop to run through the Candidate_Name column
  3. Filter by the candidate's name
  4. Sum the total for each contribution in the Trans_Amt1 column and divide by the number of contributions
  5. Round this number by dollar unit (44.30 will be 44)
  6. Update the average donation key in the candidate's json file (example src/assests/candidates/2020/mayor/barbara_bry/barbara_bry.json)

add links to sources

Can we add some links to the souces here:

The San Diego Campaign Finance Dashboard is being developed by volunteers in a non-partisan coalition as a service to our community. Data has been gathered from public records posted by the City of San Diego Clerk’s Office and the County of San Diego Registrar of Voters Public Portal in order to create the graphs and summaries for each candidate’s campaign.

update wording on splash page (#2)

Please update:
Follow the Money
See how local candidates are financing their campaigns so you can be informed before you vote.

To:
Follow the Money
See how local campaigns are financed so you can be informed before you vote.

ToolTips on Mayor page need text

The ToolTips on the Mayor page need text:

There are 4 ToolTips in total:

1. Raised v. Spent
2. By Industry
3. In v. Out District
4. Outside Money

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

candidate calculation - google drive information

Create a function that takes a file path and json file. It will update the following information the json file (taken from the google spreadsheet).

candidate name
description
website

Further information follow instructions on https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

Todd Gloria detail page picture is off centered

When going to Mayor > Todd Gloria "see details" candidate card in Firefox the candidates picture is not centered.

Updated shared_calculations.py to include new netfile_api_2018.csv in calculations

Issue #78 will create a new netfile_api_2018.csv file. Update the CSV_PATHS variable in shared_calculations.py file so that 2018 data is added.

determine database schema in firebase

candidate calculation - oppose

Follow instructions for "support" in the below link https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md

For each detailed candidate card the candidate's image is not showing when using Google chrome

When clicking Mayor > candidate "see details" the detailed candidate card is not showing the image at all. This was tested with Google chrome version 85.0.4183.83 on Mac OS 10.15.5,. no issues with firefox

Chart on Mayor page not displaying properly

The chart on the Mayor page is not displaying properly:

<canvas _ngcontent-xkp-c8="" basechart="" height="520" width="556" class="chartjs-render-monitor" style="display: block; height: 260px; width: 278px;"></canvas>

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

Please see screenshot

Mayor candidate tile needs extra padding for current job title

The mayoral candidate tile (and probably all candidate tiles) needs a little extra padding on the line that shows the candidates current job/role. Please see screenshot:

Testing Env: Chrome Version 84.0.4147.89 (Official Build) (64-bit) on Mac OS 10.15.6 (19G73)

candidate calculation - raised

Create a function that takes a file path and json file. It will update the following information into the json file from excel spreadsheet (located in src/assests/data/netfile_2020.xlsx)

raised

Further information follow instructions on for above category view https://github.com/opensandiego/sdvv-backend/blob/master/candidate_calc_description.md