Merge pull request #1012 from swaterkamp/GUImisc

Change Line Charts
greenbone · Oct 11, 2018 · 4c47d1d · 4c47d1d
2 parents f20a0d3 + 6a3b3bb
commit 4c47d1d
Show file tree

Hide file tree

Showing 14 changed files with 42 additions and 29 deletions.
diff --git a/gsa/src/web/components/chart/axis.js b/gsa/src/web/components/chart/axis.js
@@ -2,6 +2,7 @@
  *
  * Authors:
  * Björn Ricks <bjoern.ricks@greenbone.net>
+ * Steffen Waterkamp <steffen.waterkamp@greenbone.net>
  *
  * Copyright:
  * Copyright (C) 2018 Greenbone Networks GmbH
@@ -26,24 +27,34 @@ import {css} from 'glamor';
 
 import {Axis as VxAxis} from '@vx/axis';
 
-import PropTypes from '../../utils/proptypes';
+import PropTypes from 'web/utils/proptypes';
+import Theme from 'web/utils/theme';
 
 const FONT_SIZE = 10;
 
 const DEFAULT_TICK_LENGTH = 8;
 
+const labelCss = css({
+  fill: Theme.darkGray,
+});
+
 const lineCss = css({
   shapeRendering: 'crispEdges',
+  stroke: Theme.mediumGray,
   strokeWidth: 0.99,
+});
+
+const tickCss = css({
   '& line': {
+    stroke: Theme.mediumGray,
     shapeRendering: 'crispEdges',
     strokeWidth: 0.99,
   },
 });
 
 const DEFAULT_TICK_PROPS = {
-  fill: 'black',
-  fontFamily: 'Arial',
+  fill: Theme.mediumGray,
+  fontFamily: Theme.Font.default,
   fontSize: FONT_SIZE,
 };
 
@@ -93,8 +104,9 @@ const Axis = ({
   <VxAxis
     {...props}
     axisLineClassName={`${lineCss}`}
-    tickClassName={`${lineCss}`}
+    tickClassName={`${tickCss}`}
     labelOffset={labelOffset}
+    labelClassName={`${labelCss}`}
     orientation={orientation}
     rangePadding={rangePadding}
     tickLabelProps={tickLabelProps}

diff --git a/gsa/src/web/pages/certbund/dashboard/createddisplay.js b/gsa/src/web/pages/certbund/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const CertBundCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total CERT-Bund Advisories'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created CERT-Bund Advs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total CERT-Bund Advs'),
   },

diff --git a/gsa/src/web/pages/cpes/dashboard/createddisplay.js b/gsa/src/web/pages/cpes/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const CpesCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total CPEs'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created CPEs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total CPEs'),
   },

diff --git a/gsa/src/web/pages/cves/dashboard/createddisplay.js b/gsa/src/web/pages/cves/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const CvesCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total CVEs'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created CVEs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total CVEs'),
   },

diff --git a/gsa/src/web/pages/dfncert/dashboard/createddisplay.js b/gsa/src/web/pages/dfncert/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const DfnCertsCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total DFN-CERT Advs'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created DFN-CERT Advs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total DFN-CERT Advs'),
   },

diff --git a/gsa/src/web/pages/hosts/dashboard/modifieddisplay.js b/gsa/src/web/pages/hosts/dashboard/modifieddisplay.js
@@ -143,11 +143,11 @@ export class HostsModifiedDisplay extends React.Component {
                 y2AxisLabel={_('Total Hosts')}
                 xAxisLabel={_('Time')}
                 yLine={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   label: _('Modified Hosts'),
                 }}
                 y2Line={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   dashArray: '3, 2',
                   label: _('Total Hosts'),
                 }}

diff --git a/gsa/src/web/pages/hosts/dashboard/modifiedhighdisplay.js b/gsa/src/web/pages/hosts/dashboard/modifiedhighdisplay.js
@@ -144,11 +144,11 @@ export class HostsModifiedHighDisplay extends React.Component {
                 y2AxisLabel={_('Total Hosts (High)')}
                 xAxisLabel={_('Time')}
                 yLine={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   label: _('Modified Hosts (High)'),
                 }}
                 y2Line={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   dashArray: '3, 2',
                   label: _('Total Hosts (High)'),
                 }}

diff --git a/gsa/src/web/pages/notes/dashboard/createddisplay.js b/gsa/src/web/pages/notes/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const NotesCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total Notes'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created Notes'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total Notes'),
   },

diff --git a/gsa/src/web/pages/nvts/dashboard/createddisplay.js b/gsa/src/web/pages/nvts/dashboard/createddisplay.js
@@ -43,11 +43,11 @@ export const NvtsCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total NVTs'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created NVTs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total NVTs'),
   },

diff --git a/gsa/src/web/pages/ovaldefs/dashboard/createddisplay.js b/gsa/src/web/pages/ovaldefs/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const OvaldefsCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total OVAL Definitions'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created OVAL Defs'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total OVAL Defs'),
   },

diff --git a/gsa/src/web/pages/overrides/dashboard/createddisplay.js b/gsa/src/web/pages/overrides/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const OverridesCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total Overrides'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created Overrides'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total Overrides'),
   },

diff --git a/gsa/src/web/pages/reports/dashboard/highresultsdisplay.js b/gsa/src/web/pages/reports/dashboard/highresultsdisplay.js
@@ -131,11 +131,11 @@ export class ReportsHighResultsDisplay extends React.Component {
                 y2AxisLabel={_('Max High per Host')}
                 xAxisLabel={_('Time')}
                 yLine={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   label: _('Max High'),
                 }}
                 y2Line={{
-                  color: Theme.darkGreen,
+                  color: Theme.darkGreenTransparent,
                   dashArray: '3, 2',
                   label: _('Max High per Host'),
                 }}

diff --git a/gsa/src/web/pages/secinfo/dashboard/createddisplay.js b/gsa/src/web/pages/secinfo/dashboard/createddisplay.js
@@ -42,11 +42,11 @@ export const SecInfosCreatedDisplay = createDisplay({
   y2AxisLabel: _l('Total SecInfo Items'),
   xAxisLabel: _l('Time'),
   yLine: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     label: _l('Created SecInfo Items'),
   },
   y2Line: {
-    color: Theme.darkGreen,
+    color: Theme.darkGreenTransparent,
     dashArray: '3, 2',
     label: _l('Total SecInfo Items'),
   },

diff --git a/gsa/src/web/utils/theme.js b/gsa/src/web/utils/theme.js
@@ -50,7 +50,8 @@ const Theme = {
   blue: '#0000ff', // used by: links
 
   /* source ? */
-  darkGreen: '#519032',
+  darkGreen: '#519032', // RGB: 81, 144, 50
+  darkGreenTransparent: 'rgba(81, 144, 50, 0.8)', // corresponds to darkGreen
 
   Layers: {
     menu: 600,