Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change Line Charts #1012

Merged
merged 3 commits into from Oct 11, 2018
Merged

Change Line Charts #1012

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f30f1d
Change Chart Axis label and ticks
swaterkamp Oct 11, 2018
b702d7c
Add transparent darkGreen to Theme
swaterkamp Oct 11, 2018
6a3b3bb
Use new transparent darkGreen in all LineCharts
swaterkamp Oct 11, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 16 additions & 4 deletions gsa/src/web/components/chart/axis.js
View file
Open in desktop
Expand Up @@ -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
Expand All @@ -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,
};

Expand Down Expand Up @@ -93,8 +104,9 @@ const Axis = ({
<VxAxis
{...props}
axisLineClassName={`${lineCss}`}
tickClassName={`${lineCss}`}
tickClassName={`${tickCss}`}
labelOffset={labelOffset}
labelClassName={`${labelCss}`}
orientation={orientation}
rangePadding={rangePadding}
tickLabelProps={tickLabelProps}
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/certbund/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/cpes/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/cves/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/dfncert/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/hosts/dashboard/modifieddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
}}
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/hosts/dashboard/modifiedhighdisplay.js
View file
Open in desktop
Expand Up @@ -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)'),
}}
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/notes/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/nvts/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/ovaldefs/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/overrides/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/reports/dashboard/highresultsdisplay.js
View file
Open in desktop
Expand Up @@ -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'),
}}
Expand Down
4 changes: 2 additions & 2 deletions gsa/src/web/pages/secinfo/dashboard/createddisplay.js
View file
Open in desktop
Expand Up @@ -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'),
},
Expand Down
3 changes: 2 additions & 1 deletion gsa/src/web/utils/theme.js
View file
Open in desktop
Expand Up @@ -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,
Expand Down