From 97e9ce2dff335b383f9095c44dfd8385d226b68f Mon Sep 17 00:00:00 2001 From: ppisljar Date: Wed, 23 Aug 2017 13:35:14 +0200 Subject: [PATCH 1/7] updating based on design guidelines --- src/ui/public/vislib/lib/axis/axis.js | 2 +- src/ui/public/vislib/lib/axis/axis_config.js | 12 ++++++------ src/ui/public/vislib/lib/axis/axis_title.js | 2 +- src/ui/public/vislib/styles/_layout.less | 2 +- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/ui/public/vislib/lib/axis/axis.js b/src/ui/public/vislib/lib/axis/axis.js index 55620b63044e7..9ad2341012596 100644 --- a/src/ui/public/vislib/lib/axis/axis.js +++ b/src/ui/public/vislib/lib/axis/axis.js @@ -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'); diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js index f5c99b0fb3cb1..b9c3549e51952 100644 --- a/src/ui/public/vislib/lib/axis/axis_config.js +++ b/src/ui/public/vislib/lib/axis/axis_config.js @@ -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 }, @@ -35,7 +35,7 @@ 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', truncate: 100 diff --git a/src/ui/public/vislib/lib/axis/axis_title.js b/src/ui/public/vislib/lib/axis/axis_title.js index 0bdd36d82ac5d..134132052496a 100644 --- a/src/ui/public/vislib/lib/axis/axis_title.js +++ b/src/ui/public/vislib/lib/axis/axis_title.js @@ -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 = 12; const axisPrefix = config.isHorizontal() ? 'x' : 'y'; const svg = div.append('svg') diff --git a/src/ui/public/vislib/styles/_layout.less b/src/ui/public/vislib/styles/_layout.less index 4353f3f000872..fe93c0f6144ba 100644 --- a/src/ui/public/vislib/styles/_layout.less +++ b/src/ui/public/vislib/styles/_layout.less @@ -12,7 +12,7 @@ min-height: 0; min-width: 0; overflow: hidden; - padding: 10px 0; + padding: 16px 0; } .vis-wrapper svg { From 86cc9c6e53e98caf32c67cf91d0e473fe8f05712 Mon Sep 17 00:00:00 2001 From: ppisljar Date: Mon, 28 Aug 2017 09:11:13 +0200 Subject: [PATCH 2/7] setting defaults --- .../kbn_vislib_vis_types/public/area.js | 5 +++-- .../kbn_vislib_vis_types/public/histogram.js | 5 +++-- .../public/horizontal_bar.js | 5 +++-- .../kbn_vislib_vis_types/public/line.js | 5 +++-- src/ui/public/vislib/lib/axis/axis_config.js | 2 +- src/ui/public/vislib/lib/axis/axis_title.js | 22 +++++++++---------- src/ui/public/vislib/styles/_layout.less | 4 ++-- 7 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/core_plugins/kbn_vislib_vis_types/public/area.js b/src/core_plugins/kbn_vislib_vis_types/public/area.js index 9d0c8bb515dfa..5ed68ec354348 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/area.js @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) { defaults: { type: 'area', grid: { - categoryLines: false, + categoryLines: true, + valueAxis: 'ValueAxis-1', style: { color: '#eee' } @@ -72,7 +73,7 @@ export default function PointSeriesVisType(Private) { id: '1' }, drawLinesBetweenPoints: true, - showCircles: true, + showCircles: false, interpolate: 'linear', valueAxis: 'ValueAxis-1' }], diff --git a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js index cfd29461a6e53..57c54e897140c 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) { defaults: { type: 'histogram', grid: { - categoryLines: false, + categoryLines: true, + valueAxis: 'ValueAxis-1', style: { color: '#eee' } @@ -74,7 +75,7 @@ export default function PointSeriesVisType(Private) { }, valueAxis: 'ValueAxis-1', drawLinesBetweenPoints: true, - showCircles: true + showCircles: false } ], addTooltip: true, diff --git a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js index 9a1c8f9daf51b..9844de9f05b6d 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/horizontal_bar.js @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) { defaults: { type: 'histogram', grid: { - categoryLines: false, + categoryLines: true, + valueAxis: 'ValueAxis-1', style: { color: '#eee' } @@ -77,7 +78,7 @@ export default function PointSeriesVisType(Private) { }, valueAxis: 'ValueAxis-1', drawLinesBetweenPoints: true, - showCircles: true + showCircles: false }], addTooltip: true, addLegend: true, diff --git a/src/core_plugins/kbn_vislib_vis_types/public/line.js b/src/core_plugins/kbn_vislib_vis_types/public/line.js index ac8e41c17e21c..22211b55bb5fc 100644 --- a/src/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/core_plugins/kbn_vislib_vis_types/public/line.js @@ -18,7 +18,8 @@ export default function PointSeriesVisType(Private) { defaults: { type: 'line', grid: { - categoryLines: false, + categoryLines: true, + valueAxis: 'ValueAxis-1', style: { color: '#eee' } @@ -74,7 +75,7 @@ export default function PointSeriesVisType(Private) { }, valueAxis: 'ValueAxis-1', drawLinesBetweenPoints: true, - showCircles: true + showCircles: false } ], addTooltip: true, diff --git a/src/ui/public/vislib/lib/axis/axis_config.js b/src/ui/public/vislib/lib/axis/axis_config.js index b9c3549e51952..0b968b40d8276 100644 --- a/src/ui/public/vislib/lib/axis/axis_config.js +++ b/src/ui/public/vislib/lib/axis/axis_config.js @@ -37,7 +37,7 @@ export function VislibLibAxisConfigProvider() { filter: false, color: '#666', font: '"Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif', - fontSize: '8pt', + fontSize: '14px', truncate: 100 }, title: { diff --git a/src/ui/public/vislib/lib/axis/axis_title.js b/src/ui/public/vislib/lib/axis/axis_title.js index 134132052496a..78502fc92e55a 100644 --- a/src/ui/public/vislib/lib/axis/axis_title.js +++ b/src/ui/public/vislib/lib/axis/axis_title.js @@ -28,7 +28,7 @@ export function VislibLibAxisTitleProvider() { const div = d3.select(el); const width = $(el).width(); const height = $(el).height(); - const titlePadding = 12; + const titlePadding = 16; const axisPrefix = config.isHorizontal() ? 'x' : 'y'; const svg = div.append('svg') @@ -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)); diff --git a/src/ui/public/vislib/styles/_layout.less b/src/ui/public/vislib/styles/_layout.less index fe93c0f6144ba..63a3ebe87956d 100644 --- a/src/ui/public/vislib/styles/_layout.less +++ b/src/ui/public/vislib/styles/_layout.less @@ -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 { From 0c574086bb14c9c8bf5866183f5f3ce84aaf67d9 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 5 Oct 2017 17:04:49 -0400 Subject: [PATCH 3/7] remove ticks from timelion --- src/core_plugins/timelion/public/panels/timechart/schema.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js index 58a993f31c611..3b891499ffdf0 100644 --- a/src/core_plugins/timelion/public/panels/timechart/schema.js +++ b/src/core_plugins/timelion/public/panels/timechart/schema.js @@ -37,9 +37,11 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co const defaultOptions = { xaxis: { + show: true, + position: 'bottom', mode: 'time', - tickLength: 5, - timezone: 'browser', + tickLength: 0, + timezone: 'browser' }, selection: { mode: 'x', From e4716e7821ce7e18c8d4b900a89c6bf2b38743bd Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 5 Oct 2017 17:11:23 -0400 Subject: [PATCH 4/7] change font and linewith to match visualize --- .../timelion/public/panels/timechart/schema.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js index 3b891499ffdf0..b818d4a39a9db 100644 --- a/src/core_plugins/timelion/public/panels/timechart/schema.js +++ b/src/core_plugins/timelion/public/panels/timechart/schema.js @@ -41,7 +41,12 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co position: 'bottom', mode: 'time', tickLength: 0, - timezone: 'browser' + timezone: 'browser', + font: { + size: 14, + family: '"Open Sans", Helvetica, Arial, sans-serif', + color: '#848e96' + } }, selection: { mode: 'x', @@ -221,7 +226,7 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co series = _.cloneDeep(_.defaults(series, { shadowSize: 0, lines: { - lineWidth: 3 + lineWidth: 2 } })); series._id = index; @@ -263,6 +268,9 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co }); } + console.log('series', _.compact(series)); + console.log('options', _.compact(options)); + $scope.plot = $.plot(canvasElem, _.compact(series), options); if ($scope.plot) { From 598433718e2ccd83ef3c1634405893cad2a9dfcf Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 5 Oct 2017 17:27:32 -0400 Subject: [PATCH 5/7] match yaxis labels --- .../timelion/public/panels/timechart/schema.js | 18 +++++++++++++++--- .../timelion/server/series_functions/yaxis.js | 2 +- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js index b818d4a39a9db..3f4c621cdd430 100644 --- a/src/core_plugins/timelion/public/panels/timechart/schema.js +++ b/src/core_plugins/timelion/public/panels/timechart/schema.js @@ -48,6 +48,21 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co color: '#848e96' } }, + yaxes: [{ + font: { + size: 14, + family: '"Open Sans", Helvetica, Arial, sans-serif', + color: '#848e96' + } + }, + { + font: { + size: 14, + family: '"Open Sans", Helvetica, Arial, sans-serif', + color: '#848e96' + } + } + ], selection: { mode: 'x', color: '#ccc' @@ -268,9 +283,6 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co }); } - console.log('series', _.compact(series)); - console.log('options', _.compact(options)); - $scope.plot = $.plot(canvasElem, _.compact(series), options); if ($scope.plot) { diff --git a/src/core_plugins/timelion/server/series_functions/yaxis.js b/src/core_plugins/timelion/server/series_functions/yaxis.js index 69c2c13786195..db90519873411 100644 --- a/src/core_plugins/timelion/server/series_functions/yaxis.js +++ b/src/core_plugins/timelion/server/series_functions/yaxis.js @@ -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; From 57633c725f38779dcb602b93e19033b8b003eca9 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 5 Oct 2017 17:47:43 -0400 Subject: [PATCH 6/7] show grid lines in timelion chart --- src/core_plugins/timelion/public/panels/timechart/schema.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js index 3f4c621cdd430..5abc0d3a8ce57 100644 --- a/src/core_plugins/timelion/public/panels/timechart/schema.js +++ b/src/core_plugins/timelion/public/panels/timechart/schema.js @@ -40,7 +40,7 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co show: true, position: 'bottom', mode: 'time', - tickLength: 0, + tickLength: null, timezone: 'browser', font: { size: 14, @@ -49,6 +49,7 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co } }, yaxes: [{ + tickLength: null, font: { size: 14, family: '"Open Sans", Helvetica, Arial, sans-serif', @@ -56,6 +57,7 @@ export default function timechartFn(Private, config, $rootScope, timefilter, $co } }, { + tickLength: null, font: { size: 14, family: '"Open Sans", Helvetica, Arial, sans-serif', From 7d547af00aff63a0871af3cc0c7588a864681a32 Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 5 Oct 2017 18:24:19 -0400 Subject: [PATCH 7/7] style timelion grid --- .../timelion/public/panels/timechart/schema.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/core_plugins/timelion/public/panels/timechart/schema.js b/src/core_plugins/timelion/public/panels/timechart/schema.js index 5abc0d3a8ce57..b9f7094757b42 100644 --- a/src/core_plugins/timelion/public/panels/timechart/schema.js +++ b/src/core_plugins/timelion/public/panels/timechart/schema.js @@ -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; @@ -75,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