diff --git a/src/App.js b/src/App.js
index 452d4ba90abe419e473727a3fbecb8812b34b3ee..3dc71300459f268639124cc773ccd326d788a70f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -8,7 +8,7 @@ import {
} from 'react-router-dom';
import { ThemeProvider } from "@material-ui/core/styles"
import { CssBaseline } from "@material-ui/core";
-import { theme } from "./Theme";
+import { theme } from "./style/Theme";
import { IOCListView } from './views/IOC/IOCListView';
import { HomeAccessControl } from './views/home/HomeAccessControl';
import { GlobalAppBar } from './components/navigation/GlobalAppBar/GlobalAppBar';
diff --git a/src/components/IOC/IOCDelete.js b/src/components/IOC/IOCDelete.js
index 563c479df9ea2c6c544da5e068e0c651ba1499d4..8169a05b5d5998a5fce6d0df23eb6b88d8872d41 100644
--- a/src/components/IOC/IOCDelete.js
+++ b/src/components/IOC/IOCDelete.js
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import { makeStyles } from '@material-ui/core/styles';
import { Button, Typography, Grid } from "@material-ui/core";
-import { theme } from "../../Theme";
+import { theme } from "../../style/Theme";
import { useDeleteIOC } from '../../api/SwaggerApi';
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
diff --git a/src/components/IOC/IOCService.js b/src/components/IOC/IOCService.js
index fc84341e5505ce9429287603b193d97188879f02..bc484e82d7adab25b08b37bf7016a5121b52227c 100644
--- a/src/components/IOC/IOCService.js
+++ b/src/components/IOC/IOCService.js
@@ -7,7 +7,7 @@ import { SimpleModal } from "../../components/common/SimpleModal/SimpleModal";
import { ConfirmationDialog } from "../dialog/ConfirmationDialog";
import { notificationContext } from "../../components/common/notification/Notifications";
import { Alert } from "@material-ui/lab";
-import { theme } from "../../Theme";
+import { theme } from "../../style/Theme";
import { initRequestParams } from "../common/Helper";
const useStyles = makeStyles({
diff --git a/src/components/common/Helper.js b/src/components/common/Helper.js
index 6789fda58df745a7092e4f32ceb9ed209f567e02..a21036476abad652d32321011c8988d9711a0bb3 100644
--- a/src/components/common/Helper.js
+++ b/src/components/common/Helper.js
@@ -1,5 +1,7 @@
import React, { useState, useEffect } from "react";
import moment from 'moment';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
+
export function formatToList(items) {
@@ -63,47 +65,12 @@ export function useWindowDimensions() {
}, []);
return windowDimensions;
-}
-
-export function colorFromIndex(index) {
- const COLORS=[
- 'rgba(66, 165, 245, 1)',
- 'rgba(245, 132, 66, 1)',
- 'rgba(245, 221, 66, 1)',
- 'rgba(194, 66, 245, 1)',
- 'rgba(100, 242, 75, 1)',
- 'rgba(242, 75, 100, 1)',
- 'rgba(75, 242, 192, 1)',
- 'rgba(161, 168, 167, 1)',
- 'rgba(37, 38, 38, 1)',
- 'rgba(242, 162, 172, 1)',
- 'rgba(172, 242, 162, 1)',
- 'rgba(162, 242, 222, 1)'
- ];
-
- let n = COLORS.length;
-
- return COLORS[(index % n + n) % n];
-}
+}
-export function backgroundColorFromIndex(index) {
- const COLORS=[
- 'rgba(66, 165, 245, 0.2)',
- 'rgba(245, 132, 66, 0.2)',
- 'rgba(245, 221, 66, 0.2)',
- 'rgba(194, 66, 245, 0.2)',
- 'rgba(100, 242, 75, 0.2)',
- 'rgba(242, 75, 100, 0.2)',
- 'rgba(75, 242, 192, 0.2)',
- 'rgba(161, 168, 167, 0.2)',
- 'rgba(37, 38, 38, 0.2)',
- 'rgba(242, 162, 172, 0.2)',
- 'rgba(172, 242, 162, 0.2)',
- 'rgba(162, 242, 222, 0.2)'];
-
- let n = COLORS.length;
-
- return COLORS[(index % n + n) % n];
+export function circularPalette(palette, index, opacity=1.0) {
+ const colors = Object.values(palette);
+ let n = colors.length;
+ return alpha(colors[(index % n + n) % n], opacity);
}
export function applicationSubTitle() {
diff --git a/src/components/common/stepper/StepperWithStyle.js b/src/components/common/stepper/StepperWithStyle.js
index 3117d4678e3af9aa3fcf2343ef2035d3eb5819cf..2fdf95a0f34baf8ba9909803a214dae0acbdcc33 100644
--- a/src/components/common/stepper/StepperWithStyle.js
+++ b/src/components/common/stepper/StepperWithStyle.js
@@ -2,7 +2,7 @@ import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import clsx from 'clsx';
import {Stepper, Step, StepLabel, StepConnector, Hidden} from '@material-ui/core';
-import { theme } from "../../../Theme";
+import { theme } from "../../../style/Theme";
const useStyles = makeStyles({
stepper: {
diff --git a/src/components/deployments/DeploymentIcons.js b/src/components/deployments/DeploymentIcons.js
index bd940c88f60ef285b89a74958d8ee40295b9549d..1a136b0c7df9024e0de6f38aeb921f4cd202aaf6 100644
--- a/src/components/deployments/DeploymentIcons.js
+++ b/src/components/deployments/DeploymentIcons.js
@@ -1,7 +1,7 @@
import React from "react";
import { CheckCircleOutline, ErrorOutline, RotateRightOutlined, ScheduleOutlined, QueueOutlined, ClearOutlined } from "@material-ui/icons";
import { Tooltip } from "@material-ui/core";
-import { theme } from "../../Theme";
+import { theme } from "../../style/Theme";
import { RocketLaunch } from '../../icons/RocketLaunch';
export function DeploymentStatusIcon({ status }) {
diff --git a/src/components/statistics/ActiveIOCChart.js b/src/components/statistics/ActiveIOCChart.js
index 334f4dd3747c3063c7d920ec0d1dae8a37225a14..4567fc73634a5e7b1e8612c9e5ee4599b07a2d56 100644
--- a/src/components/statistics/ActiveIOCChart.js
+++ b/src/components/statistics/ActiveIOCChart.js
@@ -1,16 +1,17 @@
import React, { useState } from 'react';
import { useCurrentlyActiveIOCs } from '../../api/SwaggerApi';
import { useEffect, useRef } from 'react';
-import { LinearProgress } from '@material-ui/core';
+import { LinearProgress, useTheme } from '@material-ui/core';
import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { colorFromIndex } from '../common/Helper';
+import { circularPalette } from '../common/Helper';
export default function ActiveIOCChart() {
const [activeIocs, getActiveIocs] = useCurrentlyActiveIOCs();
const activeIocChartRef = useRef(null);
const [chartData, setChartData] = useState({});
+ const theme = useTheme();
useEffect(() => {
getActiveIocs();
@@ -25,7 +26,7 @@ export default function ActiveIOCChart() {
Object.values(activeIocs).forEach((ioc, index) => {
barData.push(ioc);
- brdColor.push(colorFromIndex(index));
+ brdColor.push(circularPalette(theme.palette.graph, index));
});//Object.foreach
diff --git a/src/components/statistics/DeploymentLineChart.js b/src/components/statistics/DeploymentLineChart.js
index 4926d264d6eebee1608ecc7f433a2e137afc9500..8812863b2d703c895b701d8024ea3e4e3f962690 100644
--- a/src/components/statistics/DeploymentLineChart.js
+++ b/src/components/statistics/DeploymentLineChart.js
@@ -1,17 +1,18 @@
import React from 'react';
import { useEffect, useRef } from 'react';
-import { backgroundColorFromIndex, dateFormat } from '../common/Helper';
-import { LinearProgress, Button } from '@material-ui/core';
+import { dateFormat } from '../common/Helper';
+import { LinearProgress, Button, useTheme } from '@material-ui/core';
import zoomPlugin from "chartjs-plugin-zoom";
import { Line, Chart } from 'react-chartjs-2';
import 'chartjs-adapter-moment';
-import { colorFromIndex } from '../common/Helper';
+import { circularPalette } from '../common/Helper';
Chart.register(zoomPlugin); // REGISTER PLUGIN
export default function DeploymentLineChart({title, chartLabel, hook}) {
const [iocDeployments, getIOCDeployments] = hook();
+ const theme = useTheme();
useEffect(() => {
getIOCDeployments();
@@ -102,8 +103,8 @@ export default function DeploymentLineChart({title, chartLabel, hook}) {
useEffect(() => {
if ((iocChartRef.current) && (iocDeployments)) {
- let iocColor = colorFromIndex(0);
- let fillColor = backgroundColorFromIndex(0);
+ let iocColor = circularPalette(theme.palette.graph, 0);
+ let fillColor = circularPalette(theme.palette.graph, 0, 0.2);
iocChartRef.current.data.datasets.push({
label: chartLabel,
fill: true,
diff --git a/src/style/Palette.js b/src/style/Palette.js
new file mode 100644
index 0000000000000000000000000000000000000000..577266ce831be3be3581cab479b1230590de574e
--- /dev/null
+++ b/src/style/Palette.js
@@ -0,0 +1,31 @@
+// Official ESS colors from visual identity document
+export const essColors = {
+ cyan: '#0099dc',
+ purple: '#821382',
+ orange: '#ff7d00',
+ forest: '#006646',
+ grass: '#99be00',
+ navy: '#003366',
+ black: '#000000',
+ white: '#ffffff',
+};
+
+// Only opaque ESS colors
+const { white, ...essOpaqueColors } = essColors;
+export { essOpaqueColors };
+
+// Contrasting colors used for charts and graphs
+export const chartColors = {
+ blue: 'rgba(66, 165, 245, 1)',
+ orange: 'rgba(245, 132, 66, 1)',
+ lime: 'rgba(245, 221, 66, 1)',
+ purple: 'rgba(194, 66, 245, 1)',
+ green: 'rgba(100, 242, 75, 1)',
+ salmon: 'rgba(242, 75, 100, 1)',
+ teal: 'rgba(75, 242, 192, 1)',
+ gray: 'rgba(161, 168, 167, 1)',
+ black: 'rgba(37, 38, 38, 1)',
+ pink: 'rgba(242, 162, 172, 1)',
+ lightgreen: 'rgba(172, 242, 162, 1)',
+ seafoam: 'rgba(162, 242, 222, 1)'
+};
\ No newline at end of file
diff --git a/src/Theme.js b/src/style/Theme.js
similarity index 95%
rename from src/Theme.js
rename to src/style/Theme.js
index f257d456a8e00333ce6dbe286f17888ef5c69869..4080f5d69f27ed000849559f98efbae788a4aba8 100644
--- a/src/Theme.js
+++ b/src/style/Theme.js
@@ -1,4 +1,5 @@
import { createMuiTheme } from "@material-ui/core/styles";
+import { chartColors } from "./Palette";
export const theme = createMuiTheme({
overrides: {
@@ -27,6 +28,7 @@ export const theme = createMuiTheme({
neutral: '#000',
progress: '#ffc107',
},
+ graph: chartColors,
},
typography: {
fontFamily:[