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

[WIP] Incorporate point series design guidelines #13847

Closed
wants to merge 7 commits into from
Closed

[WIP] Incorporate point series design guidelines #13847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
97e9ce2
updating based on design guidelines
ppisljar Aug 23, 2017
86cc9c6
setting defaults
ppisljar Aug 28, 2017
0c57408
remove ticks from timelion
thomasneirynck Oct 5, 2017
e4716e7
change font and linewith to match visualize
thomasneirynck Oct 5, 2017
5984337
match yaxis labels
thomasneirynck Oct 5, 2017
57633c7
show grid lines in timelion chart
thomasneirynck Oct 5, 2017
7d547af
style timelion grid
thomasneirynck Oct 5, 2017
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
5 changes: 3 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/area.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) {
defaults: {
type: 'area',
grid: {
categoryLines: false,
categoryLines: true,
valueAxis: 'ValueAxis-1',
style: {
color: '#eee'
}
Expand Down Expand Up @@ -72,7 +73,7 @@ export default function PointSeriesVisType(Private) {
id: '1'
},
drawLinesBetweenPoints: true,
showCircles: true,
showCircles: false,
interpolate: 'linear',
valueAxis: 'ValueAxis-1'
}],
Expand Down
5 changes: 3 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/histogram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) {
defaults: {
type: 'histogram',
grid: {
categoryLines: false,
categoryLines: true,
valueAxis: 'ValueAxis-1',
style: {
color: '#eee'
}
Expand Down Expand Up @@ -74,7 +75,7 @@ export default function PointSeriesVisType(Private) {
},
valueAxis: 'ValueAxis-1',
drawLinesBetweenPoints: true,
showCircles: true
showCircles: false
}
],
addTooltip: true,
Expand Down
5 changes: 3 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) {
defaults: {
type: 'histogram',
grid: {
categoryLines: false,
categoryLines: true,
valueAxis: 'ValueAxis-1',
style: {
color: '#eee'
}
Expand Down Expand Up @@ -77,7 +78,7 @@ export default function PointSeriesVisType(Private) {
},
valueAxis: 'ValueAxis-1',
drawLinesBetweenPoints: true,
showCircles: true
showCircles: false
}],
addTooltip: true,
addLegend: true,
Expand Down
5 changes: 3 additions & 2 deletions src/core_plugins/kbn_vislib_vis_types/public/line.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) {
defaults: {
type: 'line',
grid: {
categoryLines: false,
categoryLines: true,
valueAxis: 'ValueAxis-1',
style: {
color: '#eee'
}
Expand Down Expand Up @@ -74,7 +75,7 @@ export default function PointSeriesVisType(Private) {
},
valueAxis: 'ValueAxis-1',
drawLinesBetweenPoints: true,
showCircles: true
showCircles: false
}
],
addTooltip: true,
Expand Down
42 changes: 34 additions & 8 deletions src/core_plugins/timelion/public/panels/timechart/schema.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,6 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co
// TODO: I wonder if we should supply our own moment that sets this every time?
// could just use angular's injection to provide a moment service?
moment.tz.setDefault(config.get('dateFormat:tz'));

const render = $scope.seriesList.render || {};

$scope.chart = $scope.seriesList.list;
$scope.interval = $scope.interval;
$scope.search = $scope.search || _.noop;
Expand All @@ -37,10 +34,34 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co

const defaultOptions = {
xaxis: {
show: true,
position: 'bottom',
mode: 'time',
tickLength: 5,
tickLength: null,
timezone: 'browser',
font: {
size: 14,
family: '"Open Sans", Helvetica, Arial, sans-serif',
color: '#848e96'
}
},
yaxes: [{
tickLength: null,
font: {
size: 14,
family: '"Open Sans", Helvetica, Arial, sans-serif',
color: '#848e96'
}
},
{
tickLength: null,
font: {
size: 14,
family: '"Open Sans", Helvetica, Arial, sans-serif',
color: '#848e96'
}
}
],
selection: {
mode: 'x',
color: '#ccc'
Expand All @@ -51,9 +72,14 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co
lineWidth: 2
},
grid: {
show: render.grid,
borderWidth: 0,
borderColor: null,
show: true,
borderWidth: {
top: 0,
right: 0,
bottom: 2,
left: 2
},
borderColor: '#D9D9D9',
margin: 10,
hoverable: true,
autoHighlight: false
Expand Down Expand Up @@ -219,7 +245,7 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co
series = _.cloneDeep(_.defaults(series, {
shadowSize: 0,
lines: {
lineWidth: 3
lineWidth: 2
}
}));
series._id = index;
Expand Down
2 changes: 1 addition & 1 deletion src/core_plugins/timelion/server/series_functions/yaxis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ export default new Chainable('yaxis', {
myAxis.position = position || (yaxis % 2 ? 'left' : 'right');
myAxis.min = min;
myAxis.max = max;
myAxis.axisLabelFontSizePixels = 11;
myAxis.axisLabelFontSizePixels = 14;
myAxis.axisLabel = label;
myAxis.axisLabelColour = color;
myAxis.axisLabelUseCanvas = true;
Expand Down
2 changes: 1 addition & 1 deletion src/ui/public/vislib/lib/axis/axis.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export function VislibLibAxisProvider(Private) {
const style = config.get('style');
const chartEl = this.visConfig.get('el');
const position = config.get('position');
const axisPadding = 5;
const axisPadding = 16;

return function (selection) {
const text = selection.selectAll('.tick text');
Expand Down
14 changes: 7 additions & 7 deletions src/ui/public/vislib/lib/axis/axis_config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,12 @@ export function VislibLibAxisConfigProvider() {
mode: SCALE_MODES.NORMAL
},
style: {
color: '#ddd',
lineWidth: '1px',
color: '#D9D9D9',
lineWidth: '2px',
opacity: 1,
tickColor: '#ddd',
tickWidth: '1px',
tickLength: '6px',
tickColor: '#D9D9D9',
tickWidth: '0px',
tickLength: '0px',
rangePadding: 0.1,
rangeOuterPadding: 0
},
Expand All @@ -35,9 +35,9 @@ export function VislibLibAxisConfigProvider() {
rotate: 0,
rotateAnchor: 'center',
filter: false,
color: '#ddd',
color: '#666',
font: '"Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif',
fontSize: '8pt',
fontSize: '14px',
truncate: 100
},
title: {
Expand Down
22 changes: 11 additions & 11 deletions src/ui/public/vislib/lib/axis/axis_title.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function VislibLibAxisTitleProvider() {
const div = d3.select(el);
const width = $(el).width();
const height = $(el).height();
const titlePadding = 15;
const titlePadding = 16;
const axisPrefix = config.isHorizontal() ? 'x' : 'y';

const svg = div.append('svg')
Expand All @@ -37,16 +37,16 @@ export function VislibLibAxisTitleProvider() {
.attr('class', `axis-title ${axisPrefix}-axis-title`);

const bbox = svg.append('text')
.attr('transform', function () {
if (config.isHorizontal()) {
return `translate(${width / 2},${titlePadding})`;
}
return `translate(${titlePadding},${height / 2}) rotate(270)`;
})
.attr('text-anchor', 'middle')
.text(config.get('title.text'))
.node()
.getBBox();
.text(config.get('title.text'))
.attr('text-anchor', 'middle')
.attr('transform', function () {
if (config.isHorizontal()) {
return `translate(${width / 2},${titlePadding})`;
}
return `translate(${titlePadding},${height / 2}) rotate(270)`;
})
.node()
.getBBox();

if (config.isHorizontal()) {
svg.attr('height', Math.ceil(bbox.height));
Expand Down
6 changes: 3 additions & 3 deletions src/ui/public/vislib/styles/_layout.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
min-height: 0;
min-width: 0;
overflow: hidden;
padding: 10px 0;
padding: 16px 0;
}

.vis-wrapper svg {
Expand Down Expand Up @@ -66,9 +66,9 @@
}

.y-axis-title text, .x-axis-title text {
font-size: 9pt;
font-size: 16px;
fill: @vis-axis-title-color;
font-weight: bold;
//font-weight: bold;
}

.chart-title {
Expand Down