caktus · jeanetteobr · Nov 13, 2024 · Jan 15, 2025 · Jan 15, 2025 · Jan 15, 2025
diff --git 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:

diff --git 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 = [
+          '#F9DC4E', // '#5364f4'
+          '#551DC3', // '#96a0fa',
+        ];
 
         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
@@ -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 ';
 
@@ -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 = [
+          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'],
           datasets: [

diff --git 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': '#5F0F40',
-          'Regulatory Equipment': '#E36414',
-          Other: '#0F4C5C',
+          '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
@@ -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';
 
@@ -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 = [
+          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'],
           datasets: [

diff --git 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': '#5F0F40',
-          'Regulatory Equipment': '#E36414',
-          Other: '#0F4C5C',
+          '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
@@ -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 = ['#9FD356', '#3C91E6', '#EFCEFA', '#2F4858', '#A653F4'];
+        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
@@ -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
@@ -191,7 +194,14 @@ function Contraband(props) {
             total: Object.values(dataCounts).reduce((a, b) => a + b, 0),
           });
         });
-        const colors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b'];
+        const colors = [
+          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'],
           datasets: [
@@ -247,7 +257,13 @@ function Contraband(props) {
             total: Object.values(dataCounts).reduce((a, b) => a + b, 0),
           });
         });
-        const colors = ['#9FD356', '#3C91E6', '#EFCEFA', '#2F4858', '#A653F4'];
+        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: [
@@ -286,9 +302,9 @@ function Contraband(props) {
       .get(url)
       .then((res) => {
         const colors = {
-          'Safety Violation': '#5F0F40',
-          'Regulatory Equipment': '#E36414',
-          Other: '#0F4C5C',
+          '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',
@@ -337,11 +353,11 @@ function Contraband(props) {
 
   const updateContrabandHitRateByStopPurpose = (data) => {
     const colors = {
-      Alcohol: '#9FD356',
-      Drugs: '#3C91E6',
-      Money: '#EFCEFA',
-      Other: '#2F4858',
-      Weapons: '#A653F4',
+      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
@@ -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
@@ -48,18 +48,40 @@ 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 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
@@ -1,3 +1,5 @@
+import { DEMOGRAPHICS_COLORS, CONTRANBAND_TYPE_COLORS } from '../Components/Charts/chartUtils';
+
 export default Object.freeze({
   /* Colors */
   colors: {
@@ -29,20 +31,21 @@ export default Object.freeze({
 
     // Charting
     ethnicGroup: {
-      asian: '#ffe066',
-      black: '#8879fc',
-      hispanic: '#9c0f2e',
-      native_american: '#0c3a66',
-      other: '#9e7b9b',
-      white: '#02bcbb',
+      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: '#9FD356',
-      drugs: '#3C91E6',
-      money: '#EFCEFA',
-      other: '#2F4858',
-      weapons: '#A653F4',
+      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
@@ -1,4 +1,13 @@
-export const pieColors = ['#02bcbb', '#8879fc', '#9c0f2e', '#ffe066', '#0c3a66', '#9e7b9b'];
+import { DEMOGRAPHICS_COLORS } from '../Components/Charts/chartUtils';
+
+export const pieColors = [
+  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 = {
   backgroundColor: pieColors,

diff --git 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",
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,7 @@ name: deploy @@
     on:
       push:
-        branches: [main, develop, CU-86897a79g-cache-misses]
+        branches: [main, develop, update-chart-colors]
     jobs:
       deploy:
@@ Expand Down @@