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: diff --git a/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js b/frontend/src/Components/Charts/Arrest/Charts/CountOfStopsAndArrests.js index c11c4961..9eaf4e66 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 = [ + '#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 index 146be2dc..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 '; @@ -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 index 318f4e09..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': '#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 index cbf8b87e..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'; @@ -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 index 22c524dc..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': '#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 index d37ccf21..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 = ['#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 index 7bc1d76f..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 @@ -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 index 7f347abd..d18bc4c9 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 fc6dd2f7..faed5144 100644 --- 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 index 57164c1f..0dad79d4 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,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 index 1cc3f887..b1b2eef5 100644 --- 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 index 6c615d75..efb56506 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", +} diff --git a/nc/views/main.py b/nc/views/main.py index e7bf96d8..462b7ec8 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_BG, + DEMOGRAPHICS_COLORS_BORDER, + 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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "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": "#02bcbb", - "backgroundColor": "#80d9d8", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["white"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["white"], }, { "label": "Black", "data": get_values("Black"), - "borderColor": "#8879fc", - "backgroundColor": "#beb4fa", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["black"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["black"], }, { "label": "Hispanic", "data": get_values("Hispanic"), - "borderColor": "#9c0f2e", - "backgroundColor": "#ca8794", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["hispanic"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["hispanic"], }, { "label": "Asian", "data": get_values("Asian"), - "borderColor": "#ffe066", - "backgroundColor": "#ffeeb2", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["asian"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["asian"], }, { "label": "Native American", "data": get_values("Native American"), - "borderColor": "#0c3a66", - "backgroundColor": "#8598ac", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["native_american"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["native_american"], }, { "label": "Other", "data": get_values("Other"), - "borderColor": "#9e7b9b", - "backgroundColor": "#cab6c7", + "borderColor": DEMOGRAPHICS_COLORS_BORDER["other"], + "backgroundColor": DEMOGRAPHICS_COLORS_BG["other"], }, ], }