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

Change IconOverlay in DataDisplay #972

Merged
merged 6 commits into from
Sep 25, 2018
Merged

Change IconOverlay in DataDisplay #972

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
024302b
Fix LABEL_HEIGHT and add space for Placeholder in BarChart
swaterkamp Sep 25, 2018
0de76dd
Add space for Placeholder in Donut3DChart
swaterkamp Sep 25, 2018
b5efa87
Add space for Placeholder in LineChart
swaterkamp Sep 25, 2018
942bea2
Change appearance of IconOverlay in DataDisplay
swaterkamp Sep 25, 2018
c154ea5
Add space for IconOverlay in DataTable displays
swaterkamp Sep 25, 2018
4f5e583
Update coding style
swaterkamp Sep 25, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions gsa/src/web/components/chart/bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ import {scaleBand, scaleLinear} from 'd3-scale';
import {shorten} from 'gmp/utils/string';
import {isDefined} from 'gmp/utils/identity';

import {
MENU_PLACEHOLDER_WIDTH,
} from 'web/components/dashboard/display/datadisplay';

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use

import {
  MENU_PLACEHOLDER_WIDTH,
} from 'web/components/dashboard/display/datadisplay';

instead or put it into one line and add // eslint-disable-line max-len

import Layout from 'web/components/layout/layout';

import PropTypes from 'web/utils/proptypes';
Expand All @@ -46,14 +50,14 @@ const StyledLayout = styled(Layout)`
const LEGEND_MARGIN = 20;

const margin = {
top: 40,
top: 20,
right: 20,
bottom: 40,
left: 60,
};

const MAX_LABEL_LENGTH = 25;
const LABEL_HEIGHT = 10;
const LABEL_HEIGHT = 20;

const tickFormat = val => {
return shorten(val.toString(), MAX_LABEL_LENGTH);
Expand Down Expand Up @@ -98,7 +102,7 @@ class BarChart extends React.Component {
const marginLeft = horizontal ? margin.left +
Math.min(MAX_LABEL_LENGTH, maxLabelLength) * 4 : margin.left;

const maxWidth = width - marginLeft - margin.right;
const maxWidth = width - marginLeft - margin.right - MENU_PLACEHOLDER_WIDTH;
let maxHeight = height - margin.top - margin.bottom;

if (isDefined(xLabel)) {
Expand Down
6 changes: 5 additions & 1 deletion gsa/src/web/components/chart/donut3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ import Theme from 'web/utils/theme';
import path from './utils/path';
import arc from './utils/arc';

import {
MENU_PLACEHOLDER_WIDTH,
} from 'web/components/dashboard/display/datadisplay';

import Layout from 'web/components/layout/layout';

import Pie from './pie';
Expand Down Expand Up @@ -271,7 +275,7 @@ class Donut3DChart extends React.Component {
}

const {width: legendWidth} = legend.getBoundingClientRect();
return width - legendWidth - LEGEND_MARGIN;
return width - legendWidth - LEGEND_MARGIN - MENU_PLACEHOLDER_WIDTH;
}

shouldComponentUpdate(nextProps, nextState) {
Expand Down
7 changes: 6 additions & 1 deletion gsa/src/web/components/chart/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ import {isDefined} from 'gmp/utils/identity';

import date from 'gmp/models/date';

import {
MENU_PLACEHOLDER_WIDTH,
} from 'web/components/dashboard/display/datadisplay';

import Layout from 'web/components/layout/layout';

import PropTypes from 'web/utils/proptypes';
Expand Down Expand Up @@ -288,7 +292,8 @@ class LineChart extends React.Component {
width = width - legendWidth - LEGEND_MARGIN;
}

const maxWidth = width - margin.left - margin.right;
const maxWidth =
width - margin.left - margin.right - MENU_PLACEHOLDER_WIDTH;
const maxHeight = height - margin.top - margin.bottom;

const xValues = data.map(d => timeline ? d.x.toDate() : d.x);
Expand Down
116 changes: 59 additions & 57 deletions gsa/src/web/components/dashboard/display/datadisplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ import {excludeObjectProps} from 'gmp/utils/object';

import Icon from 'web/components/icon/icon';
import IconDivider from 'web/components/layout/icondivider';
import Layout from 'web/components/layout/layout';

import Loading from 'web/components/loading/loading';

Expand All @@ -44,6 +45,8 @@ import Display, {
DISPLAY_HEADER_HEIGHT, DISPLAY_BORDER_WIDTH,
} from './display';

export const MENU_PLACEHOLDER_WIDTH = 26;

const ownProps = [
'title',
'dataTransform',
Expand Down Expand Up @@ -81,16 +84,18 @@ const FilterString = styled.div`
`;

const IconBar = styled.div`
height: 26px;
width: 100%;
min-height: 26px;
height: 100%;
width: 26px;
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
padding: 5px 10px;
justify-content: center;
align-items: start;
padding-top: 5px;
position: absolute;
right: 0;
z-index: ${Theme.Layers.higher};
background: ${Theme.lightGray};
opacity: 0;
transition: opacity 500ms;
`;

Expand All @@ -99,14 +104,9 @@ const DisplayBox = styled.div`
flex-grow: 1;
position: relative;

${IconBar} {
visibility: hidden;
opacity: 0;
}

&:hover ${IconBar} {
visibility: visible;
opacity: 1;
transition: opacity 500ms;
}
`;

Expand Down Expand Up @@ -304,51 +304,53 @@ class DataDisplay extends React.Component {
{...otherProps}
>
<DisplayBox>
{isLoading ?
<Loading/> :
showContent &&
<React.Fragment>
<IconBar>
<IconDivider>
{showFilterSelection &&
<Icon
img="filter.svg"
title={_('Select Filter')}
onClick={onSelectFilterClick}
/>
}
{hasSvg &&
<Icon
img="download.svg"
onClick={this.handleDownloadSvg}
title={_('Download SVG')}
/>
}
{showCsvDownload &&
<Icon
img="download.svg"
title={_('Download CSV')}
onClick={this.handleDownloadCsv}
/>
}
</IconDivider>
</IconBar>
{children({
id,
data: transformedData,
width,
height,
svgRef: this.svgRef,
})}
</React.Fragment>
}
{showFilterString &&
<FilterString>
({_('Applied filter: ')}
<b>{filter.name}</b>&nbsp;
<i>{filter.simple().toFilterString()}</i>)
</FilterString>
}
<Layout flex="column" grow="1">
{isLoading ?
<Loading/> :
showContent &&
<React.Fragment>
{children({
id,
data: transformedData,
width,
height,
svgRef: this.svgRef,
})}
</React.Fragment>
}
<IconBar>
<IconDivider flex="column">
{showFilterSelection &&
<Icon
img="filter.svg"
title={_('Select Filter')}
onClick={onSelectFilterClick}
/>
}
{hasSvg &&
<Icon
img="download.svg"
title={_('Download SVG')}
onClick={this.handleDownloadSvg}
/>
}
{showCsvDownload &&
<Icon
img="download.svg"
title={_('Download CSV')}
onClick={this.handleDownloadCsv}
/>
}
</IconDivider>
</IconBar>
{showFilterString &&
<FilterString>
({_('Applied filter: ')}
<b>{filter.name}</b>&nbsp;
<i>{filter.simple().toFilterString()}</i>)
</FilterString>
}
</Layout>
</DisplayBox>
<Download innerRef={this.downloadRef}>
</Download>
Expand Down
5 changes: 5 additions & 0 deletions gsa/src/web/components/dashboard/display/datatable.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ import React from 'react';

import styled from 'styled-components';

import {
MENU_PLACEHOLDER_WIDTH,
} from 'web/components/dashboard/display/datadisplay';

import Table from 'web/components/table/stripedtable';
import TableHeader from 'web/components/table/header';
import TableHead from 'web/components/table/head';
Expand All @@ -36,6 +40,7 @@ import PropTypes from 'web/utils/proptypes';

const Margin = styled.div`
margin: 10px;
margin-right: ${MENU_PLACEHOLDER_WIDTH + 10}px;
display: flex;
flex-grow: 1;
overflow-y: auto;
Expand Down