From 11693f3aa9dd66ea988ad8354b17f69ca7e80c8d Mon Sep 17 00:00:00 2001 From: jeanetteobr Date: Wed, 13 Nov 2024 06:43:20 -0500 Subject: [PATCH 1/4] Update chart colors --- .../Arrest/Charts/CountOfStopsAndArrests.js | 5 +- .../Arrest/Charts/PercentageOfSearches.js | 9 +- .../PercentageOfSearchesForPurposeGroup.js | 6 +- .../Charts/Arrest/Charts/PercentageOfStops.js | 9 +- .../PercentageOfStopsForPurposeGroup.js | 6 +- .../PercentageOfStopsPerContrabandType.js | 2 +- .../Charts/Contraband/Contraband.js | 27 +++-- frontend/src/Components/Charts/chartUtils.js | 19 ++- frontend/src/styles/themes.styled.js | 23 ++-- frontend/src/util/setChartColors.js | 9 +- nc/views/main.py | 110 +++++++++--------- 11 files changed, 128 insertions(+), 97 deletions(-) diff --git a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js index c11c4961..6a66cae4 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js +++ b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js @@ -45,7 +45,10 @@ function CountOfStopsAndArrests(props) { .then((res) => { const tableData = createTableData(res.data); const labels = ['Stops With Arrests', 'Stops Without Arrests']; - const colors = ['#96a0fa', '#5364f4']; + const colors = [ + '#4153F6', //'#96a0fa', + '#E37C1C', //'#5364f4' + ]; const datasets = res.data.arrest_counts.map((dataset, i) => ({ axis: 'y', diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js index 146be2dc..8f366327 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js @@ -44,7 +44,14 @@ function PercentageOfSearches(props) { .get(url) .then((res) => { const tableData = createTableData(res.data); - const colors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b']; + const colors = [ + '#027979', //new color: Teal, old color:'#02bcbb', + '#8352F4', //new color: Purple, old color:'#8879fc', + '#E60032', //new color: Red, old color:'#9c0f2e', + '#4153F6', //new color: Blue, old color: #0c3a66', + '#E37C1C', //new color: Orange, old color: '#ffe066', + '#B40895', //new color: Fuschia, old color: '#9e7b9b' + ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], datasets: [ diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js index 318f4e09..0dcc5ea3 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js @@ -49,9 +49,9 @@ function PercentageOfSearchesForStopPurposeGroup(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#5F0F40', - 'Regulatory Equipment': '#E36414', - Other: '#0F4C5C', + 'Safety Violation': '#027979', + 'Regulatory Equipment': '#E37C1C', + Other: '#B40895', }; const data = { labels: Object.keys(colors), diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js index cbf8b87e..e6411cbb 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js @@ -44,7 +44,14 @@ function PercentageOfStops(props) { .get(url) .then((res) => { const tableData = createTableData(res.data); - const colors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b']; + const colors = [ + '#027979', //new color: Teal, old color:'#02bcbb', + '#8352F4', //new color: Purple, old color:'#8879fc', + '#E60032', //new color: Red, old color:'#9c0f2e', + '#4153F6', //new color: Blue, old color: #0c3a66', + '#E37C1C', //new color: Orange, old color: '#ffe066', + '#B40895', //new color: Fuschia, old color: '#9e7b9b' + ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], datasets: [ diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js index 22c524dc..06b396fd 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js @@ -48,9 +48,9 @@ function PercentageOfStopsForStopPurposeGroup(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#5F0F40', - 'Regulatory Equipment': '#E36414', - Other: '#0F4C5C', + 'Safety Violation': '#027979', + 'Regulatory Equipment': '#E37C1C', + Other: '#B40895', }; const data = { labels: Object.keys(colors), diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js index d37ccf21..44fbd45c 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js @@ -60,7 +60,7 @@ function PercentageOfStopsPerContrabandType(props) { total: Object.values(dataCounts).reduce((a, b) => a + b, 0), }); }); - const colors = ['#9FD356', '#3C91E6', '#EFCEFA', '#2F4858', '#A653F4']; + const colors = ['#E37C1C', '#4153F6', '#027979', '#B40895', '#E60032']; const data = { labels: ['Alcohol', 'Drugs', 'Money', 'Other', 'Weapons'], datasets: [ diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js index 7bc1d76f..a4ed98e6 100644 --- a/frontend/src/Components/Charts/Contraband/Contraband.js +++ b/frontend/src/Components/Charts/Contraband/Contraband.js @@ -191,7 +191,14 @@ function Contraband(props) { total: Object.values(dataCounts).reduce((a, b) => a + b, 0), }); }); - const colors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b']; + const colors = [ + '#027979', //new color: Teal, old color:'#02bcbb', + '#8352F4', //new color: Purple, old color:'#8879fc', + '#E60032', //new color: Red, old color:'#9c0f2e', + '#4153F6', //new color: Blue, old color: #0c3a66', + '#E37C1C', //new color: Orange, old color: '#ffe066', + '#B40895', //new color: Fuschia, old color: '#9e7b9b' + ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], datasets: [ @@ -247,7 +254,7 @@ function Contraband(props) { total: Object.values(dataCounts).reduce((a, b) => a + b, 0), }); }); - const colors = ['#9FD356', '#3C91E6', '#EFCEFA', '#2F4858', '#A653F4']; + const colors = ['#E37C1C', '#4153F6', '#027979', '#B40895', '#E60032']; const data = { labels: ['Alcohol', 'Drugs', 'Money', 'Other', 'Weapons'], datasets: [ @@ -286,9 +293,9 @@ function Contraband(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#5F0F40', - 'Regulatory Equipment': '#E36414', - Other: '#0F4C5C', + 'Safety Violation': '#027979', + 'Regulatory Equipment': '#E37C1C', + Other: '#B40895', }; const stopPurposeDataSets = res.data.contraband_percentages.map((ds) => ({ axis: 'x', @@ -337,11 +344,11 @@ function Contraband(props) { const updateContrabandHitRateByStopPurpose = (data) => { const colors = { - Alcohol: '#9FD356', - Drugs: '#3C91E6', - Money: '#EFCEFA', - Other: '#2F4858', - Weapons: '#A653F4', + Alcohol: '#E37C1C', + Drugs: '#4153F6', + Money: '#E60032', + Other: '#B40895', + Weapons: '#027979', }; const stopPurposeDataSets = data.map((sp) => ({ labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], diff --git a/frontend/src/Components/Charts/chartUtils.js b/frontend/src/Components/Charts/chartUtils.js index fc6dd2f7..46dd7ab0 100644 --- a/frontend/src/Components/Charts/chartUtils.js +++ b/frontend/src/Components/Charts/chartUtils.js @@ -48,16 +48,15 @@ export const STOP_PURPOSE_TYPES = [ ]; export const STOP_TYPE_COLORS = [ - '#ff7da8', - '#c1d670', - '#f9c86e', - '#74bd5b', - '#74db9d', - '#ad8de0', - '#dba7ed', - '#ff916d', - '#4abdc4', - '#f1ed39', + '#E60032', // Vivid Red + '#06D6A0', // Aqua Green + '#8352F4', // Bright Purple + '#FAE500', // Vibrant Yellow + '#027979', // Teal + '#E37C1C', // Orange + '#4153F6', // Strong Blue + '#B40895', // Magenta + '#0D3B66' // Navy Blue ]; export const STATIC_LEGEND_KEYS = RACES.map((r) => ({ diff --git a/frontend/src/styles/themes.styled.js b/frontend/src/styles/themes.styled.js index 57164c1f..6d27eab7 100644 --- a/frontend/src/styles/themes.styled.js +++ b/frontend/src/styles/themes.styled.js @@ -29,20 +29,21 @@ export default Object.freeze({ // Charting ethnicGroup: { - asian: '#ffe066', - black: '#8879fc', - hispanic: '#9c0f2e', - native_american: '#0c3a66', - other: '#9e7b9b', - white: '#02bcbb', + asian: '#4153F6', + black: '#8352F4', + hispanic: '#E60032', + native_american: '#E37C1C', + other: '#B40895', + white: '#027979', average: '#939393', }, + contrabandTypes: { - alcohol: '#9FD356', - drugs: '#3C91E6', - money: '#EFCEFA', - other: '#2F4858', - weapons: '#A653F4', + alcohol: '#E37C1C', + drugs: '#4153F6', + money: '#027979', + other: '#B40895', + weapons: '#E60032', }, fontColorsByEthnicGroup: { asian: '#212121', diff --git a/frontend/src/util/setChartColors.js b/frontend/src/util/setChartColors.js index 1cc3f887..bb18f954 100644 --- a/frontend/src/util/setChartColors.js +++ b/frontend/src/util/setChartColors.js @@ -1,4 +1,11 @@ -export const pieColors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b']; +export const pieColors = [ + '#027979', //new color: Teal, old color:'#02bcbb', + '#8352F4', //new color: Purple, old color:'#8879fc', + '#E60032', //new color: Red, old color:'#9c0f2e', + '#4153F6', //new color: Blue, old color: #0c3a66', + '#E37C1C', //new color: Orange, old color: '#ffe066', + '#B40895', //new color: Fuschia, old color: '#9e7b9b' +]; export const pieChartLabels = ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other']; export const pieChartConfig = { backgroundColor: pieColors, diff --git a/nc/views/main.py b/nc/views/main.py index 21c602b2..c507a007 100644 --- a/nc/views/main.py +++ b/nc/views/main.py @@ -345,37 +345,37 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], @@ -443,37 +443,37 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], @@ -599,37 +599,37 @@ def get_values(col): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], @@ -1153,37 +1153,37 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, { @@ -1272,37 +1272,37 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], @@ -1366,31 +1366,31 @@ def get_values(race): { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], @@ -1488,37 +1488,37 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#02bcbb", + "borderColor": "#027979", "backgroundColor": "#80d9d8", }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", + "borderColor": "#8352F4", "backgroundColor": "#beb4fa", }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", + "borderColor": "#E60032", "backgroundColor": "#ca8794", }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": "#4153F6", + "backgroundColor": "#A4AEF9", }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": "#E37C1C", + "backgroundColor": "#F0B37A", }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", + "borderColor": "#B40895", "backgroundColor": "#cab6c7", }, ], From 4b4c90f411565f96861956b73fe9401a97ddcce6 Mon Sep 17 00:00:00 2001 From: jeanetteobr Date: Wed, 15 Jan 2025 04:02:59 -0500 Subject: [PATCH 2/4] Update chart colors accross all charts. Create constants for chart colors for easier updates in future. --- .../Arrest/Charts/CountOfStopsAndArrests.js | 4 +- .../Arrest/Charts/PercentageOfSearches.js | 14 +- .../PercentageOfSearchesForPurposeGroup.js | 8 +- .../Charts/Arrest/Charts/PercentageOfStops.js | 14 +- .../PercentageOfStopsForPurposeGroup.js | 8 +- .../PercentageOfStopsPerContrabandType.js | 10 +- .../Charts/Contraband/Contraband.js | 39 ++-- .../Charts/TrafficStops/TrafficStops.js | 7 +- frontend/src/Components/Charts/chartUtils.js | 24 +++ frontend/src/styles/themes.styled.js | 24 ++- frontend/src/util/setChartColors.js | 14 +- nc/constants.py | 24 +++ nc/views/main.py | 196 +++++++++--------- 13 files changed, 232 insertions(+), 154 deletions(-) diff --git a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js index 6a66cae4..fe78f5fc 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js +++ b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js @@ -46,8 +46,8 @@ function CountOfStopsAndArrests(props) { const tableData = createTableData(res.data); const labels = ['Stops With Arrests', 'Stops Without Arrests']; const colors = [ - '#4153F6', //'#96a0fa', - '#E37C1C', //'#5364f4' + '#F9DC4E', //'#5364f4' + '#551DC3', //'#96a0fa', ]; const datasets = res.data.arrest_counts.map((dataset, i) => ({ diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js index 8f366327..d8062ec6 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearches.js @@ -10,7 +10,7 @@ import useOfficerId from '../../../../Hooks/useOfficerId'; import NewModal from '../../../NewCharts/NewModal'; import { ChartContainer } from '../../ChartSections/ChartsCommon.styled'; import createTableData from '../../../../util/createTableData'; -import { RACE_TABLE_COLUMNS } from '../../chartUtils'; +import { RACE_TABLE_COLUMNS, DEMOGRAPHICS_COLORS } from '../../chartUtils'; const graphTitle = 'Searches Leading to Arrest by Percentage '; @@ -45,12 +45,12 @@ function PercentageOfSearches(props) { .then((res) => { const tableData = createTableData(res.data); const colors = [ - '#027979', //new color: Teal, old color:'#02bcbb', - '#8352F4', //new color: Purple, old color:'#8879fc', - '#E60032', //new color: Red, old color:'#9c0f2e', - '#4153F6', //new color: Blue, old color: #0c3a66', - '#E37C1C', //new color: Orange, old color: '#ffe066', - '#B40895', //new color: Fuschia, old color: '#9e7b9b' + DEMOGRAPHICS_COLORS.white, + DEMOGRAPHICS_COLORS.black, + DEMOGRAPHICS_COLORS.hispanic, + DEMOGRAPHICS_COLORS.asian, + DEMOGRAPHICS_COLORS.nativeAmerican, + DEMOGRAPHICS_COLORS.other, ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js index 0dcc5ea3..0553c8c0 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfSearchesForPurposeGroup.js @@ -11,7 +11,7 @@ import NewModal from '../../../NewCharts/NewModal'; import { ChartContainer } from '../../ChartSections/ChartsCommon.styled'; import createTableData from '../../../../util/createTableData'; import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker'; -import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS } from '../../chartUtils'; +import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS, STOP_PURPOSE_COLORS } from '../../chartUtils'; const graphTitle = 'Percentage of Searches Leading to Arrest by Stop Purpose Group '; @@ -49,9 +49,9 @@ function PercentageOfSearchesForStopPurposeGroup(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#027979', - 'Regulatory Equipment': '#E37C1C', - Other: '#B40895', + 'Safety Violation': STOP_PURPOSE_COLORS.safteyViolation, + 'Regulatory Equipment': STOP_PURPOSE_COLORS.regulatoryEquipment, + Other: STOP_PURPOSE_COLORS.other, }; const data = { labels: Object.keys(colors), diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js index e6411cbb..3bfafde6 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStops.js @@ -10,7 +10,7 @@ import useOfficerId from '../../../../Hooks/useOfficerId'; import NewModal from '../../../NewCharts/NewModal'; import { ChartContainer } from '../../ChartSections/ChartsCommon.styled'; import createTableData from '../../../../util/createTableData'; -import { RACE_TABLE_COLUMNS } from '../../chartUtils'; +import { RACE_TABLE_COLUMNS, DEMOGRAPHICS_COLORS } from '../../chartUtils'; const graphTitle = 'Traffic Stops Leading to Arrest by Percentage'; @@ -45,12 +45,12 @@ function PercentageOfStops(props) { .then((res) => { const tableData = createTableData(res.data); const colors = [ - '#027979', //new color: Teal, old color:'#02bcbb', - '#8352F4', //new color: Purple, old color:'#8879fc', - '#E60032', //new color: Red, old color:'#9c0f2e', - '#4153F6', //new color: Blue, old color: #0c3a66', - '#E37C1C', //new color: Orange, old color: '#ffe066', - '#B40895', //new color: Fuschia, old color: '#9e7b9b' + DEMOGRAPHICS_COLORS.white, + DEMOGRAPHICS_COLORS.black, + DEMOGRAPHICS_COLORS.hispanic, + DEMOGRAPHICS_COLORS.asian, + DEMOGRAPHICS_COLORS.nativeAmerican, + DEMOGRAPHICS_COLORS.other, ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js index 06b396fd..c0d65d42 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsForPurposeGroup.js @@ -11,7 +11,7 @@ import NewModal from '../../../NewCharts/NewModal'; import { ChartContainer } from '../../ChartSections/ChartsCommon.styled'; import DataSubsetPicker from '../../ChartSections/DataSubsetPicker/DataSubsetPicker'; import createTableData from '../../../../util/createTableData'; -import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS } from '../../chartUtils'; +import { RACE_TABLE_COLUMNS, STOP_PURPOSE_GROUPS, STOP_PURPOSE_COLORS } from '../../chartUtils'; const graphTitle = 'Percentage of Stops Leading to Arrest by Stop Purpose Group'; @@ -48,9 +48,9 @@ function PercentageOfStopsForStopPurposeGroup(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#027979', - 'Regulatory Equipment': '#E37C1C', - Other: '#B40895', + 'Safety Violation': STOP_PURPOSE_COLORS.safteyViolation, + 'Regulatory Equipment': STOP_PURPOSE_COLORS.regulatoryEquipment, + Other: STOP_PURPOSE_COLORS.other, }; const data = { labels: Object.keys(colors), diff --git a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js index 44fbd45c..32a22b6a 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js +++ b/frontend/src/Components/Charts/Arrest/Charts/PercentageOfStopsPerContrabandType.js @@ -9,7 +9,7 @@ import axios from '../../../../Services/Axios'; import useOfficerId from '../../../../Hooks/useOfficerId'; import NewModal from '../../../NewCharts/NewModal'; import { ChartContainer } from '../../ChartSections/ChartsCommon.styled'; -import { CONTRABAND_TYPES_TABLE_COLUMNS } from '../../chartUtils'; +import { CONTRABAND_TYPES_TABLE_COLUMNS, CONTRANBAND_TYPE_COLORS } from '../../chartUtils'; const graphTitle = 'Percentage of Stops Leading to Arrest by Discovered Contraband Type'; @@ -60,7 +60,13 @@ function PercentageOfStopsPerContrabandType(props) { total: Object.values(dataCounts).reduce((a, b) => a + b, 0), }); }); - const colors = ['#E37C1C', '#4153F6', '#027979', '#B40895', '#E60032']; + const colors = [ + CONTRANBAND_TYPE_COLORS.alcohol, + CONTRANBAND_TYPE_COLORS.drugs, + CONTRANBAND_TYPE_COLORS.money, + CONTRANBAND_TYPE_COLORS.other, + CONTRANBAND_TYPE_COLORS.weapons, + ]; const data = { labels: ['Alcohol', 'Drugs', 'Money', 'Other', 'Weapons'], datasets: [ diff --git a/frontend/src/Components/Charts/Contraband/Contraband.js b/frontend/src/Components/Charts/Contraband/Contraband.js index a4ed98e6..49fdc039 100644 --- a/frontend/src/Components/Charts/Contraband/Contraband.js +++ b/frontend/src/Components/Charts/Contraband/Contraband.js @@ -4,10 +4,13 @@ import * as S from '../ChartSections/ChartsCommon.styled'; // Util import { + CONTRANBAND_TYPE_COLORS, CONTRABAND_TYPES, CONTRABAND_TYPES_TABLE_COLUMNS, + DEMOGRAPHICS_COLORS, RACE_TABLE_COLUMNS, STATIC_CONTRABAND_KEYS, + STOP_PURPOSE_COLORS, } from '../chartUtils'; // Hooks @@ -192,12 +195,12 @@ function Contraband(props) { }); }); const colors = [ - '#027979', //new color: Teal, old color:'#02bcbb', - '#8352F4', //new color: Purple, old color:'#8879fc', - '#E60032', //new color: Red, old color:'#9c0f2e', - '#4153F6', //new color: Blue, old color: #0c3a66', - '#E37C1C', //new color: Orange, old color: '#ffe066', - '#B40895', //new color: Fuschia, old color: '#9e7b9b' + DEMOGRAPHICS_COLORS.white, + DEMOGRAPHICS_COLORS.black, + DEMOGRAPHICS_COLORS.hispanic, + DEMOGRAPHICS_COLORS.asian, + DEMOGRAPHICS_COLORS.nativeAmerican, + DEMOGRAPHICS_COLORS.other, ]; const data = { labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], @@ -254,7 +257,13 @@ function Contraband(props) { total: Object.values(dataCounts).reduce((a, b) => a + b, 0), }); }); - const colors = ['#E37C1C', '#4153F6', '#027979', '#B40895', '#E60032']; + const colors = [ + CONTRANBAND_TYPE_COLORS.alcohol, + CONTRANBAND_TYPE_COLORS.drugs, + CONTRANBAND_TYPE_COLORS.money, + CONTRANBAND_TYPE_COLORS.other, + CONTRANBAND_TYPE_COLORS.weapons, + ]; const data = { labels: ['Alcohol', 'Drugs', 'Money', 'Other', 'Weapons'], datasets: [ @@ -293,9 +302,9 @@ function Contraband(props) { .get(url) .then((res) => { const colors = { - 'Safety Violation': '#027979', - 'Regulatory Equipment': '#E37C1C', - Other: '#B40895', + 'Safety Violation': STOP_PURPOSE_COLORS.safteyViolation, + 'Regulatory Equipment': STOP_PURPOSE_COLORS.regulatoryEquipment, + Other: STOP_PURPOSE_COLORS.other, }; const stopPurposeDataSets = res.data.contraband_percentages.map((ds) => ({ axis: 'x', @@ -344,11 +353,11 @@ function Contraband(props) { const updateContrabandHitRateByStopPurpose = (data) => { const colors = { - Alcohol: '#E37C1C', - Drugs: '#4153F6', - Money: '#E60032', - Other: '#B40895', - Weapons: '#027979', + Alcohol: CONTRANBAND_TYPE_COLORS.alcohol, + Drugs: CONTRANBAND_TYPE_COLORS.drugs, + Money: CONTRANBAND_TYPE_COLORS.money, + Other: CONTRANBAND_TYPE_COLORS.other, + Weapons: CONTRANBAND_TYPE_COLORS.weapons, }; const stopPurposeDataSets = data.map((sp) => ({ labels: ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other'], diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js index 7f347abd..af96e35c 100644 --- a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js +++ b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js @@ -25,6 +25,7 @@ import { STOP_TYPES, RACE_TABLE_COLUMNS, STOP_REASON_TABLE_COLUMNS, + STOP_PURPOSE_COLORS, } from '../chartUtils'; // State @@ -118,7 +119,11 @@ function TrafficStops(props) { }); const purposeGroupedPieLabels = ['Safety Violation', 'Regulatory and Equipment', 'Other']; - const purposeGroupedPieColors = ['#5F0F40', '#E36414', '#0F4C5C']; + const purposeGroupedPieColors = [ + STOP_PURPOSE_COLORS.safteyViolation, + STOP_PURPOSE_COLORS.regulatoryEquipment, + STOP_PURPOSE_COLORS.other + ]; const purposeGroupedPieConfig = { backgroundColor: purposeGroupedPieColors, borderColor: purposeGroupedPieColors, diff --git a/frontend/src/Components/Charts/chartUtils.js b/frontend/src/Components/Charts/chartUtils.js index 46dd7ab0..a016202d 100644 --- a/frontend/src/Components/Charts/chartUtils.js +++ b/frontend/src/Components/Charts/chartUtils.js @@ -1,3 +1,4 @@ +import { m } from 'framer-motion'; import toTitleCase from '../../util/toTitleCase'; export const RACES = ['white', 'black', 'hispanic', 'asian', 'native_american', 'other']; @@ -59,6 +60,29 @@ export const STOP_TYPE_COLORS = [ '#0D3B66' // Navy Blue ]; +export const DEMOGRAPHICS_COLORS = { + white: '#551DC3', // Chrysler Blue + black: '#F9DC4E', // Naples Yellow + hispanic: '#24BC7D', // Fuchia Rose + asian: '#1282A2', // Light Sea Green + nativeAmerican: '#D24B76', // Mint + other: '#999999', // Tufts Blue +}; + +export const CONTRANBAND_TYPE_COLORS = { + alcohol: '#551DC3', // Vivid Red + drugs: '#F9DC4E', // Aqua Green + money: '#24BC7D', // Bright Purple + other: '#999999', // Vibrant Yellow + weapons: '#D24B76', // Teal +}; + +export const STOP_PURPOSE_COLORS = { + safteyViolation: '#551DC3', + regulatoryEquipment: '#D24B76', + other: '#999999', +} + export const STATIC_LEGEND_KEYS = RACES.map((r) => ({ value: r, label: toTitleCase(r), diff --git a/frontend/src/styles/themes.styled.js b/frontend/src/styles/themes.styled.js index 6d27eab7..10ea3887 100644 --- a/frontend/src/styles/themes.styled.js +++ b/frontend/src/styles/themes.styled.js @@ -1,3 +1,5 @@ +import { DEMOGRAPHICS_COLORS, CONTRANBAND_TYPE_COLORS } from "Components/Charts/chartUtils"; + export default Object.freeze({ /* Colors */ colors: { @@ -29,21 +31,21 @@ export default Object.freeze({ // Charting ethnicGroup: { - asian: '#4153F6', - black: '#8352F4', - hispanic: '#E60032', - native_american: '#E37C1C', - other: '#B40895', - white: '#027979', + asian: DEMOGRAPHICS_COLORS.asian, + black: DEMOGRAPHICS_COLORS.black, + hispanic: DEMOGRAPHICS_COLORS.hispanic, + native_american: DEMOGRAPHICS_COLORS.nativeAmerican, + other: DEMOGRAPHICS_COLORS.other, + white:DEMOGRAPHICS_COLORS.white, average: '#939393', }, contrabandTypes: { - alcohol: '#E37C1C', - drugs: '#4153F6', - money: '#027979', - other: '#B40895', - weapons: '#E60032', + alcohol: CONTRANBAND_TYPE_COLORS.alcohol, + drugs: CONTRANBAND_TYPE_COLORS.drugs, + money: CONTRANBAND_TYPE_COLORS.money, + other: CONTRANBAND_TYPE_COLORS.other, + weapons: CONTRANBAND_TYPE_COLORS.weapons, }, fontColorsByEthnicGroup: { asian: '#212121', diff --git a/frontend/src/util/setChartColors.js b/frontend/src/util/setChartColors.js index bb18f954..131fa4d7 100644 --- a/frontend/src/util/setChartColors.js +++ b/frontend/src/util/setChartColors.js @@ -1,10 +1,12 @@ +import { DEMOGRAPHICS_COLORS } from "Components/Charts/chartUtils"; + export const pieColors = [ - '#027979', //new color: Teal, old color:'#02bcbb', - '#8352F4', //new color: Purple, old color:'#8879fc', - '#E60032', //new color: Red, old color:'#9c0f2e', - '#4153F6', //new color: Blue, old color: #0c3a66', - '#E37C1C', //new color: Orange, old color: '#ffe066', - '#B40895', //new color: Fuschia, old color: '#9e7b9b' + DEMOGRAPHICS_COLORS.white, + DEMOGRAPHICS_COLORS.black, + DEMOGRAPHICS_COLORS.hispanic, + DEMOGRAPHICS_COLORS.asian, + DEMOGRAPHICS_COLORS.nativeAmerican, + DEMOGRAPHICS_COLORS.other, ]; export const pieChartLabels = ['White', 'Black', 'Hispanic', 'Asian', 'Native American', 'Other']; export const pieChartConfig = { diff --git a/nc/constants.py b/nc/constants.py index 6c615d75..b0bf8d67 100644 --- a/nc/constants.py +++ b/nc/constants.py @@ -16,3 +16,27 @@ } STATEWIDE = -1 + +DEMOGRAPHICS_COLORS_BORDER = { + "white": "#551DC3", # Chrysler Blue + "black": "#F9DC4E", # Napels Yellow + "hispanic": "#24BC7D", # Mint + "asian": "#1282A2", # Cerulean + "native_american": "#D24B76", # Fuchsia Rose + "other": "#999999", # Gray +}; + +DEMOGRAPHICS_COLORS_BG = { + "white": "#804EE4", # Majorelle Blue + "black": "#FAE475", # Jasmine + "hispanic": "#87E8C0", # Aquamarine + "asian": "#6CD2EF", # Sky Blue + "native_american": "#E28DA8", # Amaranth Pink + "other": "#B8B8B8", # Silver +}; + +STOP_PURPOSE_COLORS= { + "saftey_violation": "#551DC3", + "regulatory_equipment": "#D24B76", + "other": "#999999", +} \ No newline at end of file diff --git a/nc/views/main.py b/nc/views/main.py index 12f0c909..7c17dc6c 100644 --- a/nc/views/main.py +++ b/nc/views/main.py @@ -23,7 +23,13 @@ from rest_framework_extensions.key_constructor.constructors import DefaultObjectKeyConstructor from nc import serializers -from nc.constants import CONTRABAND_TYPE_COLS, DEFAULT_RENAME_COLUMNS +from nc.constants import ( + CONTRABAND_TYPE_COLS, + DEFAULT_RENAME_COLUMNS, + DEMOGRAPHICS_COLORS_BORDER , + DEMOGRAPHICS_COLORS_BG, + STOP_PURPOSE_COLORS, +) from nc.filters import DriverStopsFilter from nc.models import SEARCH_TYPE_CHOICES as SEARCH_TYPE_CHOICES_TUPLES from nc.models import ( @@ -336,38 +342,38 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["other"], }, ], } @@ -433,38 +439,38 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } @@ -554,20 +560,20 @@ def get(self, request, agency_id): { "label": StopPurposeGroup.SAFETY_VIOLATION, "data": self.get_values(df, StopPurposeGroup.SAFETY_VIOLATION, years_len), - "borderColor": "#5F0F40", - "backgroundColor": "#5F0F40", + "borderColor": STOP_PURPOSE_COLORS["saftey_violation"], + "backgroundColor": STOP_PURPOSE_COLORS["saftey_violation"], }, { "label": StopPurposeGroup.REGULATORY_EQUIPMENT, "data": self.get_values(df, StopPurposeGroup.REGULATORY_EQUIPMENT, years_len), - "borderColor": "#E36414", - "backgroundColor": "#E36414", + "borderColor": STOP_PURPOSE_COLORS["regulatory_equipment"], + "backgroundColor": STOP_PURPOSE_COLORS["regulatory_equipment"], }, { "label": StopPurposeGroup.OTHER, "data": self.get_values(df, StopPurposeGroup.OTHER, years_len), - "borderColor": "#0F4C5C", - "backgroundColor": "#0F4C5C", + "borderColor": STOP_PURPOSE_COLORS["other"], + "backgroundColor": STOP_PURPOSE_COLORS["other"], }, ], } @@ -587,38 +593,38 @@ def get_values(col): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } @@ -1135,44 +1141,38 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", - }, - { - "label": "Average", - "data": get_values("Average"), - "borderColor": "#6e6e6e", - "backgroundColor": "#888888", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } @@ -1253,38 +1253,38 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } @@ -1343,35 +1343,41 @@ def get_values(race): return { "labels": ["Average"] + list(labels.values()), "datasets": [ + { + "label": "White", + "data": get_values("White"), + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], + }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } @@ -1467,38 +1473,38 @@ def get_values(race): { "label": "White", "data": get_values("White"), - "borderColor": "#027979", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8352F4", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#E60032", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#4153F6", - "backgroundColor": "#A4AEF9", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#E37C1C", - "backgroundColor": "#F0B37A", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#B40895", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], } From 1965b6135d8d57316ce4653eda8fe009d7e400f1 Mon Sep 17 00:00:00 2001 From: Colin Copeland Date: Wed, 15 Jan 2025 09:33:06 -0500 Subject: [PATCH 3/4] prettier and pre-commit fixes --- .../Arrest/Charts/CountOfStopsAndArrests.js | 4 +-- .../Charts/TrafficStops/TrafficStops.js | 6 ++-- frontend/src/Components/Charts/chartUtils.js | 5 ++- frontend/src/styles/themes.styled.js | 4 +-- frontend/src/util/setChartColors.js | 2 +- nc/constants.py | 32 +++++++++---------- nc/views/main.py | 6 ++-- 7 files changed, 29 insertions(+), 30 deletions(-) diff --git a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js index fe78f5fc..9eaf4e66 100644 --- a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js +++ b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js @@ -46,8 +46,8 @@ function CountOfStopsAndArrests(props) { const tableData = createTableData(res.data); const labels = ['Stops With Arrests', 'Stops Without Arrests']; const colors = [ - '#F9DC4E', //'#5364f4' - '#551DC3', //'#96a0fa', + '#F9DC4E', // '#5364f4' + '#551DC3', // '#96a0fa', ]; const datasets = res.data.arrest_counts.map((dataset, i) => ({ diff --git a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js index af96e35c..d18bc4c9 100644 --- a/frontend/src/Components/Charts/TrafficStops/TrafficStops.js +++ b/frontend/src/Components/Charts/TrafficStops/TrafficStops.js @@ -120,9 +120,9 @@ function TrafficStops(props) { const purposeGroupedPieLabels = ['Safety Violation', 'Regulatory and Equipment', 'Other']; const purposeGroupedPieColors = [ - STOP_PURPOSE_COLORS.safteyViolation, - STOP_PURPOSE_COLORS.regulatoryEquipment, - STOP_PURPOSE_COLORS.other + STOP_PURPOSE_COLORS.safteyViolation, + STOP_PURPOSE_COLORS.regulatoryEquipment, + STOP_PURPOSE_COLORS.other, ]; const purposeGroupedPieConfig = { backgroundColor: purposeGroupedPieColors, diff --git a/frontend/src/Components/Charts/chartUtils.js b/frontend/src/Components/Charts/chartUtils.js index a016202d..faed5144 100644 --- a/frontend/src/Components/Charts/chartUtils.js +++ b/frontend/src/Components/Charts/chartUtils.js @@ -1,4 +1,3 @@ -import { m } from 'framer-motion'; import toTitleCase from '../../util/toTitleCase'; export const RACES = ['white', 'black', 'hispanic', 'asian', 'native_american', 'other']; @@ -57,7 +56,7 @@ export const STOP_TYPE_COLORS = [ '#E37C1C', // Orange '#4153F6', // Strong Blue '#B40895', // Magenta - '#0D3B66' // Navy Blue + '#0D3B66', // Navy Blue ]; export const DEMOGRAPHICS_COLORS = { @@ -81,7 +80,7 @@ export const STOP_PURPOSE_COLORS = { safteyViolation: '#551DC3', regulatoryEquipment: '#D24B76', other: '#999999', -} +}; export const STATIC_LEGEND_KEYS = RACES.map((r) => ({ value: r, diff --git a/frontend/src/styles/themes.styled.js b/frontend/src/styles/themes.styled.js index 10ea3887..0dad79d4 100644 --- a/frontend/src/styles/themes.styled.js +++ b/frontend/src/styles/themes.styled.js @@ -1,4 +1,4 @@ -import { DEMOGRAPHICS_COLORS, CONTRANBAND_TYPE_COLORS } from "Components/Charts/chartUtils"; +import { DEMOGRAPHICS_COLORS, CONTRANBAND_TYPE_COLORS } from '../Components/Charts/chartUtils'; export default Object.freeze({ /* Colors */ @@ -36,7 +36,7 @@ export default Object.freeze({ hispanic: DEMOGRAPHICS_COLORS.hispanic, native_american: DEMOGRAPHICS_COLORS.nativeAmerican, other: DEMOGRAPHICS_COLORS.other, - white:DEMOGRAPHICS_COLORS.white, + white: DEMOGRAPHICS_COLORS.white, average: '#939393', }, diff --git a/frontend/src/util/setChartColors.js b/frontend/src/util/setChartColors.js index 131fa4d7..b1b2eef5 100644 --- a/frontend/src/util/setChartColors.js +++ b/frontend/src/util/setChartColors.js @@ -1,4 +1,4 @@ -import { DEMOGRAPHICS_COLORS } from "Components/Charts/chartUtils"; +import { DEMOGRAPHICS_COLORS } from '../Components/Charts/chartUtils'; export const pieColors = [ DEMOGRAPHICS_COLORS.white, diff --git a/nc/constants.py b/nc/constants.py index b0bf8d67..efb56506 100644 --- a/nc/constants.py +++ b/nc/constants.py @@ -18,25 +18,25 @@ STATEWIDE = -1 DEMOGRAPHICS_COLORS_BORDER = { - "white": "#551DC3", # Chrysler Blue - "black": "#F9DC4E", # Napels Yellow - "hispanic": "#24BC7D", # Mint - "asian": "#1282A2", # Cerulean - "native_american": "#D24B76", # Fuchsia Rose - "other": "#999999", # Gray -}; + "white": "#551DC3", # Chrysler Blue + "black": "#F9DC4E", # Napels Yellow + "hispanic": "#24BC7D", # Mint + "asian": "#1282A2", # Cerulean + "native_american": "#D24B76", # Fuchsia Rose + "other": "#999999", # Gray +} DEMOGRAPHICS_COLORS_BG = { - "white": "#804EE4", # Majorelle Blue - "black": "#FAE475", # Jasmine - "hispanic": "#87E8C0", # Aquamarine - "asian": "#6CD2EF", # Sky Blue - "native_american": "#E28DA8", # Amaranth Pink - "other": "#B8B8B8", # Silver -}; + "white": "#804EE4", # Majorelle Blue + "black": "#FAE475", # Jasmine + "hispanic": "#87E8C0", # Aquamarine + "asian": "#6CD2EF", # Sky Blue + "native_american": "#E28DA8", # Amaranth Pink + "other": "#B8B8B8", # Silver +} -STOP_PURPOSE_COLORS= { +STOP_PURPOSE_COLORS = { "saftey_violation": "#551DC3", "regulatory_equipment": "#D24B76", "other": "#999999", -} \ No newline at end of file +} diff --git a/nc/views/main.py b/nc/views/main.py index 7c17dc6c..462b7ec8 100644 --- a/nc/views/main.py +++ b/nc/views/main.py @@ -24,10 +24,10 @@ from nc import serializers from nc.constants import ( - CONTRABAND_TYPE_COLS, - DEFAULT_RENAME_COLUMNS, - DEMOGRAPHICS_COLORS_BORDER , + CONTRABAND_TYPE_COLS, + DEFAULT_RENAME_COLUMNS, DEMOGRAPHICS_COLORS_BG, + DEMOGRAPHICS_COLORS_BORDER, STOP_PURPOSE_COLORS, ) from nc.filters import DriverStopsFilter From c366b165d4d860bf80ed8db670048b840f132555 Mon Sep 17 00:00:00 2001 From: Colin Copeland Date: Wed, 15 Jan 2025 09:33:29 -0500 Subject: [PATCH 4/4] deploy this branch to staging --- .github/workflows/deploy.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml index 1561ffe0..994429ac 100755 --- a/.github/workflows/deploy.yaml +++ b/.github/workflows/deploy.yaml @@ -2,7 +2,7 @@ name: deploy on: push: - branches: [main, develop, CU-86897a79g-cache-misses] + branches: [main, develop, update-chart-colors] jobs: deploy: