Skip to content

Commit 3b55a6e

Browse files
mdtaggmdtagg
committed
extracted string to color function into helper folder
The string to colour function was moved to facilitate easier navigation of the graph container. Additionally since it is only a function and not a react FC it could be imoprted into the three components that use it instead of passed down as props. Doing this added some simplicity to the types in the props
1 parent bae3625 commit 3b55a6e

6 files changed

Lines changed: 66 additions & 60 deletions

File tree

‎app/containers/DockerHealthContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { QueryContext } from '../context/QueryContext';
44
import GrafanaEventChart from '../charts/GrafanaEventChart';
55
import { Button } from '@material-ui/core';
66
import { useParams } from 'react-router-dom';
7+
import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
78

89
interface HealthContainerProps {
910
sizing: string;
10-
colourGenerator: Function;
1111
category: string;
1212
}
1313

@@ -32,7 +32,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
3232
const { selectedMetrics } = useContext(QueryContext);
3333
const { service } = useParams<keyof Params>() as Params;
3434
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
35-
const { sizing, colourGenerator, category } = props;
35+
const { sizing, category } = props;
3636
const [currIndex, setCurrIndex] = useState(0);
3737
const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]);
3838
const chunkSize = 7;

‎app/containers/EventContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { QueryContext } from '../context/QueryContext';
66
import EventChart from '../charts/EventChart';
77
import { Button } from '@material-ui/core';
88
import GrafanaEventChart from '../charts/GrafanaEventChart';
9+
import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
910

1011
interface EventContainerProps {
1112
sizing: string;
12-
colourGenerator: Function;
1313
}
1414

1515
interface Params {
@@ -32,7 +32,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
3232
const { eventData } = useContext(EventContext);
3333
const { selectedMetrics } = useContext(QueryContext);
3434
const { service } = useParams<keyof Params>() as Params;
35-
const { sizing, colourGenerator } = props;
35+
const { sizing } = props;
3636
// eventChartsArr contains all charts of all metrics
3737
const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
3838
const [currIndex, setCurrIndex] = useState(0);

app/containers/GraphsContainer.tsx renamed to app/containers/GraphsContainer/GraphsContainer.tsx

Lines changed: 32 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
/* eslint-disable no-bitwise */
22
import React, { useEffect, useState, useContext } from 'react';
33
import { useParams } from 'react-router-dom';
4-
import { ApplicationContext } from '../context/ApplicationContext';
5-
import { HealthContext } from '../context/HealthContext';
6-
import { CommsContext } from '../context/CommsContext';
7-
import { DockerContext } from '../context/DockerContext';
8-
import { EventContext } from '../context/EventContext';
9-
import Header from '../components/Header';
10-
import RequestTypesChart from '../charts/RequestTypesChart';
11-
import ResponseCodesChart from '../charts/ResponseCodesChart';
12-
import TrafficChart from '../charts/TrafficChart';
13-
import RouteChart from '../charts/RouteChart';
14-
import LogsTable from '../charts/LogsTable';
15-
import EventContainer from './EventContainer';
16-
import TransferColumns from '../components/TransferColumns';
17-
import HealthContainer from './HealthContainer';
18-
import ModifyMetrics from './ModifyMetricsContainer';
19-
import * as DashboardContext from '../context/DashboardContext';
20-
import lightAndDark from '../components/Styling';
21-
import DockerHealthContainer from './DockerHealthContainer';
4+
import { ApplicationContext } from '../../context/ApplicationContext';
5+
import { HealthContext } from '../../context/HealthContext';
6+
import { CommsContext } from '../../context/CommsContext';
7+
import { DockerContext } from '../../context/DockerContext';
8+
import { EventContext } from '../../context/EventContext';
9+
import Header from '../../components/Header';
10+
import RequestTypesChart from '../../charts/RequestTypesChart';
11+
import ResponseCodesChart from '../../charts/ResponseCodesChart';
12+
import TrafficChart from '../../charts/TrafficChart';
13+
import RouteChart from '../../charts/RouteChart';
14+
import LogsTable from '../../charts/LogsTable';
15+
import EventContainer from '../EventContainer';
16+
import TransferColumns from '../../components/TransferColumns';
17+
import HealthContainer from '../HealthContainer';
18+
import ModifyMetrics from '../ModifyMetricsContainer';
19+
import * as DashboardContext from '../../context/DashboardContext';
20+
import lightAndDark from '../../components/Styling';
21+
import DockerHealthContainer from '../DockerHealthContainer';
2222

23-
import GraphNavBar from '../components/GraphNavBar';
23+
import GraphNavBar from '../../components/GraphNavBar';
2424

25-
import '../stylesheets/GraphsContainer.scss';
26-
import Inspect from './Inspect';
25+
import '../../stylesheets/GraphsContainer.scss';
26+
import Inspect from '../Inspect';
2727

2828
interface Params {
2929
app: any;
@@ -94,48 +94,25 @@ const GraphsContainer: React.FC = React.memo(() => {
9494
//random variable to hold the light or dark mode of the display?..ok....sure
9595
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
9696

97-
const stringToColour = (string: string, recurses = 0) => {
98-
if (recurses > 20) return string;
99-
function hashString(str: string) {
100-
let hash = 0;
101-
for (let i = 0; i < str.length; i++) {
102-
hash = str.charCodeAt(i) + ((hash << 5) - hash);
103-
}
104-
let colour = '#';
105-
for (let i = 0; i < 3; i++) {
106-
const value = (hash >> (i * 8)) & 0xff;
107-
colour += `00${value.toString(16)}`.substring(-2);
108-
}
109-
return colour;
110-
}
111-
function contrastYiq(color: string) {
112-
const num = parseInt(color.slice(1), 16);
113-
const r = (num >>> 16) & 0xff;
114-
const g = (num >>> 8) & 0xff;
115-
const b = num & 0xff;
116-
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
117-
return yiq <= 50 ? stringToColour(color, recurses + 1) : color;
118-
}
119-
for (let salt = 0; salt < 5; salt++) string = hashString(string);
120-
return contrastYiq(string);
121-
};
122-
12397
return (
12498
<>
99+
125100
<GraphNavBar
126101
chart={chart}
127102
setChart={setChart}
128103
dockerData={dockerData}
129104
inspect={inspect}
130105
setInspect={setInspect}
131106
/>
132-
<Header
107+
<Header
133108
app={app}
134109
service={service}
135110
live={live}
136111
setLive={setLive}
137112
/>
113+
138114
{inspect && <Inspect />}
115+
139116
<div className="graphs-container">
140117
{chart === 'communications' ? (
141118
<div className="graphs">
@@ -155,22 +132,25 @@ const GraphsContainer: React.FC = React.memo(() => {
155132
)}
156133
{chart.startsWith('health_') && (
157134
<HealthContainer
158-
colourGenerator={stringToColour}
159135
sizing="solo"
160136
category={chart.substring(7)}
161-
currentService={service}
162137
/>
163138
)}
164139
{chart.startsWith('event_') && (
165140
<>
166-
<EventContainer colourGenerator={stringToColour} sizing="solo" />
141+
<EventContainer
142+
sizing="solo"
143+
/>
167144
</>
168145

169146
)}
170147
{/* docker charts */}
171148
{chart.startsWith('docker_') && (
172149
<>
173-
<DockerHealthContainer colourGenerator={stringToColour} sizing="solo" category={chart.substring(7)} />
150+
<DockerHealthContainer
151+
sizing="solo"
152+
category={chart.substring(7)}
153+
/>
174154
</>
175155

176156
)}

‎app/containers/GraphsContainer/helpers/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
3+
export const stringToColour = (string: string, recurses = 0) => {
4+
if (recurses > 20) return string;
5+
function hashString(str: string) {
6+
let hash = 0;
7+
for (let i = 0; i < str.length; i++) {
8+
hash = str.charCodeAt(i) + ((hash << 5) - hash);
9+
}
10+
let colour = '#';
11+
for (let i = 0; i < 3; i++) {
12+
const value = (hash >> (i * 8)) & 0xff;
13+
colour += `00${value.toString(16)}`.substring(-2);
14+
}
15+
return colour;
16+
}
17+
function contrastYiq(color: string) {
18+
const num = parseInt(color.slice(1), 16);
19+
const r = (num >>> 16) & 0xff;
20+
const g = (num >>> 8) & 0xff;
21+
const b = num & 0xff;
22+
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
23+
return yiq <= 50 ? stringToColour(color, recurses + 1) : color;
24+
}
25+
for (let salt = 0; salt < 5; salt++) string = hashString(string);
26+
return contrastYiq(string);
27+
};

‎app/containers/HealthContainer.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,11 @@ import { HealthContext } from '../context/HealthContext';
33
import { QueryContext } from '../context/QueryContext';
44
import HealthChart from '../charts/HealthChart';
55
import { useParams } from 'react-router-dom';
6+
import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
67

78
interface HealthContainerProps {
89
sizing: string;
9-
colourGenerator: Function;
1010
category: string;
11-
currentService: string;
1211
}
1312

1413
interface Params {
@@ -24,7 +23,7 @@ const HealthContainer: React.FC<HealthContainerProps> = React.memo(props => {
2423
const { selectedMetrics } = useContext(QueryContext);
2524
const { service } = useParams<keyof Params>() as Params;
2625
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
27-
const { category, sizing, colourGenerator } = props;
26+
const { category, sizing } = props;
2827
/**
2928
* This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer.
3029
* Once that has finished, it then filters the healthData down to the current category and the filteredMetrics.

‎app/containers/MainContainer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Contact from '../components/Contact';
55
import Settings from '../components/Settings';
66
import Occupied from '../components/Occupied/Occupied';
77
import lightAndDark from '../components/Styling';
8-
import GraphsContainer from './GraphsContainer';
8+
import GraphsContainer from './GraphsContainer/GraphsContainer';
99
import { DashboardContext } from '../context/DashboardContext';
1010
import SignUp from '../components/SignUp';
1111
import Login from '../components/Login';

0 commit comments

Comments
 (0)