From 759c239d8d18e12824669a4affb703c502b21077 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Sun, 4 Aug 2019 18:27:23 +0200 Subject: [PATCH 01/13] first steps towards threshold line (histogram) --- .../public/editors/point_series.html | 76 +++++++++++++++- .../kbn_vislib_vis_types/public/histogram.js | 6 ++ .../point_series/column_chart.js | 88 +++++++++++++++++++ 3 files changed, 167 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html index 47079b44e1453..29fd12d0a4e4c 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html @@ -65,7 +65,7 @@
-
-
+
+ + +
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
- \ No newline at end of file + diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js index 07ddbcb941fdc..e97436f2e049a 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -100,6 +100,12 @@ export default function PointSeriesVisType(Private) { addTimeMarker: false, labels: { show: false, + }, + thresholdLine: { + show: false, + value: 10, + width: 1, + style: 'Full' } }, }, diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js b/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js index d6c1d2b86f158..d7cc88ebc6f73 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js @@ -28,6 +28,7 @@ const defaults = { color: undefined, fillColor: undefined, showLabel: true, + showThreshold: false }; /** @@ -61,6 +62,7 @@ export class ColumnChart extends PointSeries { super(handler, chartEl, chartData, seriesConfigArgs); this.seriesConfig = _.defaults(seriesConfigArgs || {}, defaults); this.labelOptions = _.defaults(handler.visConfig.get('labels', {}), defaults.showLabel); + this.thresholdLineOptions = handler.visConfig._values.thresholdLine; } addBars(svg, data) { @@ -90,6 +92,9 @@ export class ColumnChart extends PointSeries { .attr('stroke', () => color(data.label)); self.updateBars(bars); + if (this.thresholdLineOptions.show) { + self.addThresholdLine(bars, data); + } // Add tooltip if (isTooltip) { @@ -350,6 +355,89 @@ export class ColumnChart extends PointSeries { return bars; } + addThresholdLine(bars, data) { + const color = this.handler.data.getColorFunc(); + const xScale = this.getCategoryAxis().getScale(); + const yScale = this.getValueAxis().getScale(); + const chartData = this.chartData; + const groupCount = this.getGroupedCount(); + const groupNum = this.getGroupedNum(this.chartData); + const isTimeScale = this.getCategoryAxis().axisConfig.isTimeDomain(); + const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal(); + const isLogScale = this.getValueAxis().axisConfig.isLogScale(); + const gutterSpacingPercentage = 0.15; + let barWidth; + let gutterWidth; + + if (isTimeScale) { + const { min, interval } = this.handler.data.get('ordered'); + let intervalWidth = xScale(min + interval) - xScale(min); + intervalWidth = Math.abs(intervalWidth); + + gutterWidth = intervalWidth * gutterSpacingPercentage; + barWidth = (intervalWidth - gutterWidth) / groupCount; + } + + function x(d, i) { + if (isTimeScale) { + return xScale(d.x) + datumWidth(barWidth, d, bars.data()[i + 1], xScale, gutterWidth, groupCount) * groupNum; + } + return xScale(d.x) + xScale.rangeBand() / groupCount * groupNum; + } + + function y(d) { + if ((isHorizontal && d.y < 0) || (!isHorizontal && d.y > 0)) { + return yScale(0); + } + return yScale(d.y); + } + + function widthFunc(d, i) { + if (isTimeScale) { + return datumWidth(barWidth, d, bars.data()[i + 1], xScale, gutterWidth, groupCount); + } + return xScale.rangeBand() / groupCount; + } + + function heightFunc(d) { + const baseValue = isLogScale ? 1 : 0; + return Math.abs(yScale(baseValue) - yScale(d.y)); + } + + const layer = d3.select(bars[0].parentNode); + + const indexOfLastEntry = chartData.values.length - 1; + const thresholdLineLength = chartData.values[indexOfLastEntry].x; + + const thresholdLineBeginObj = { + x: 0, + y: this.thresholdLineOptions.value + }; + const thresholdLineEndObj = { + x: thresholdLineLength, + y: this.thresholdLineOptions.value + }; + const thresholdLineWidth = this.thresholdLineOptions.width; + let thresholdLineStyle = '0'; + if (this.thresholdLineOptions.style === 'Dashed') { + thresholdLineStyle = '10,5'; + } else if (this.thresholdLineOptions.style === 'Dot dashed') { + thresholdLineStyle = '20,5,5,5'; + } + layer + .append('line') + .attr('x1', isHorizontal ? x(thresholdLineBeginObj, 0) : heightFunc(thresholdLineBeginObj)) + .attr('y1', isHorizontal ? y(thresholdLineBeginObj) : x(thresholdLineBeginObj, 0)) + .attr('x2', isHorizontal ? x(thresholdLineEndObj, indexOfLastEntry) + widthFunc(thresholdLineEndObj, indexOfLastEntry) : + heightFunc(thresholdLineEndObj)) + .attr('y2', isHorizontal ? y(thresholdLineEndObj) : + x(thresholdLineEndObj, indexOfLastEntry) + widthFunc(thresholdLineEndObj, indexOfLastEntry)) + .attr('stroke-width', thresholdLineWidth) + .attr('stroke-dasharray', thresholdLineStyle) + .attr('stroke', () => color(data.label)); + + } + /** * Renders d3 visualization * From 4d1cdce832adb13250d53cd750b1d7413429e649 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Mon, 5 Aug 2019 16:47:01 +0200 Subject: [PATCH 02/13] threshold line added for all point_series charts --- .../kbn_vislib_vis_types/public/area.js | 6 ++ .../public/editors/point_series.html | 2 +- .../kbn_vislib_vis_types/public/line.js | 6 ++ .../point_series/_point_series.js | 30 ++++++ .../visualizations/point_series/area_chart.js | 3 + .../point_series/column_chart.js | 94 +------------------ .../visualizations/point_series/line_chart.js | 4 + 7 files changed, 55 insertions(+), 90 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js index a33d333867e62..131d63e061939 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js @@ -96,6 +96,12 @@ export default function PointSeriesVisType(Private) { legendPosition: 'right', times: [], addTimeMarker: false, + thresholdLine: { + show: false, + value: 10, + width: 1, + style: 'Full' + } }, }, editorConfig: { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html index 29fd12d0a4e4c..2412572ae3743 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html @@ -76,7 +76,7 @@ -
+
-
- -
- -
-
+
-
-
- -
- +
+
+ + + +
-
-
-
- -
- +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+
-
-
-
-
- -
- +
+
+ +
+ +
+
+ +
+
+ +
+ +
+
+
+
+
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js new file mode 100644 index 0000000000000..130c27ddae41a --- /dev/null +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js @@ -0,0 +1,33 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { uiModules } from 'ui/modules'; +import vislibValuePointSeriesTemplate from './point_series.html'; +const module = uiModules.get('kibana'); + +module.directive('vislibValueAxes', function () { + return { + restrict: 'E', + template: vislibValuePointSeriesTemplate, + replace: true, + link: function ($scope) { + $scope.isThresholdSettingsOpen = false; + } + }; +}); diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js index 96831b91a6ff6..085a4bfe5dca3 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js @@ -83,6 +83,7 @@ export class PointSeries { } addThresholdLine(svgElem) { + const chartData = this.chartData; const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal(); const yScale = this.getValueAxis().getScale(); const svgParentWidth = svgElem[0][0].attributes.width.value; @@ -90,13 +91,15 @@ export class PointSeries { const thresholdLineWidth = this.thresholdLineOptions.width; let thresholdLineStyle = '0'; - if (this.thresholdLineOptions.style === 'Dashed') { + if (this.thresholdLineOptions.style === 'dashed') { thresholdLineStyle = '10,5'; - } else if (this.thresholdLineOptions.style === 'Dot dashed') { + } else if (this.thresholdLineOptions.style === 'dot-dashed') { thresholdLineStyle = '20,5,5,5'; } const thresholdValue = this.thresholdLineOptions.value; + const labelColor = this.handler.data.getColorFunc()(chartData.label); + function y(y) { return yScale(y); } @@ -108,6 +111,6 @@ export class PointSeries { .attr('y2', isHorizontal ? y(thresholdValue) : svgParentHeight) .attr('stroke-width', thresholdLineWidth) .attr('stroke-dasharray', thresholdLineStyle) - .attr('stroke', '#ff0000'); + .attr('stroke', labelColor); } } From 94935bd937db2a7faf9e7af85695ef5a318d689e Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Mon, 5 Aug 2019 21:48:32 +0200 Subject: [PATCH 04/13] last fixes --- .../kbn_vislib_vis_types/public/editors/point_series.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html index c2fbb73f22fc4..039c5f94e8f58 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html @@ -145,7 +145,7 @@ type="number" greater-or-equal-than="1" value="1" - step="1" + step="0.5" ng-model="editorState.params.thresholdLine.width">
From 79cdb6fcc0707422f0dd9b98fae9b8f26bb7da88 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Mon, 5 Aug 2019 23:02:13 +0200 Subject: [PATCH 05/13] fixed typo --- src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js | 2 +- .../core_plugins/kbn_vislib_vis_types/public/histogram.js | 2 +- src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js index 131d63e061939..3348bd7f3846b 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js @@ -100,7 +100,7 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'Full' + style: 'full' } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js index e97436f2e049a..2ceae485860b1 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -105,7 +105,7 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'Full' + style: 'full' } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js index f664850e4a27c..270b3a55af74a 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js @@ -100,7 +100,7 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'Full' + style: 'full' } }, }, From 979a30ca97f27bffe68c9c2ecfe9694694d97359 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Thu, 8 Aug 2019 20:04:30 +0200 Subject: [PATCH 06/13] default values for thresholdLineOptions --- .../vislib/visualizations/point_series/_point_series.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js index 085a4bfe5dca3..d05bb40d3ecd8 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js @@ -19,6 +19,13 @@ import _ from 'lodash'; +const thresholdLineDefaults = { + show: false, + value: 10, + width: 1, + style: 'full' +}; + export class PointSeries { constructor(handler, seriesEl, seriesData, seriesConfig) { this.handler = handler; @@ -26,7 +33,7 @@ export class PointSeries { this.chartEl = seriesEl; this.chartData = seriesData; this.seriesConfig = seriesConfig; - this.thresholdLineOptions = handler.visConfig._values.thresholdLine; + this.thresholdLineOptions = _.defaults(handler.visConfig.get('thresholdLine', {}), thresholdLineDefaults); } getGroupedCount() { From 9914073a289972714b538ce5bb5b1669d3b3b9c6 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Wed, 21 Aug 2019 12:14:39 +0200 Subject: [PATCH 07/13] resolving conflicts --- .../public/editors/point_series.js | 2 +- .../public/editors/point_series.tsx | 58 ++++++++++++++++++- .../kbn_vislib_vis_types/public/types.ts | 8 +++ 3 files changed, 65 insertions(+), 3 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js index 130c27ddae41a..930858587c09c 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js @@ -18,7 +18,7 @@ */ import { uiModules } from 'ui/modules'; -import vislibValuePointSeriesTemplate from './point_series.html'; +import vislibValuePointSeriesTemplate from './point_series.tsx'; const module = uiModules.get('kibana'); module.directive('vislibValueAxes', function () { diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index fcff704878fed..e54979739664d 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -26,6 +26,8 @@ import { SwitchOption } from '../controls/switch'; import { GridOptions } from '../controls/point_series/grid_options'; import { BasicOptions } from '../controls/basic_options'; import { BasicVislibParams } from '../types'; +import { NumberInputOption } from '../controls/number_input'; +import { SelectOption } from '../controls/select'; function PointSeriesOptions(props: VisOptionsProps) { const { stateParams, setValue, vis } = props; @@ -41,7 +43,7 @@ function PointSeriesOptions(props: VisOptionsProps) { /> - + @@ -77,9 +79,61 @@ function PointSeriesOptions(props: VisOptionsProps) { } /> )} + + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> + + {stateParams.thresholdLine.show && ( + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> + ) && ( + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> + ) && ( + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> + ) + + } + - + diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 05d049d1c9e1e..0bf465dee5dd4 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -30,6 +30,13 @@ interface Labels { show: boolean; truncate: number; } +interface ThresholdLine { + show: boolean; + value: number; + width: number; + style: string; + +} export interface ValueAxis { id: string; labels: Labels; @@ -46,6 +53,7 @@ export interface BasicVislibParams extends CommonVislibParams { addTimeMarker: boolean; orderBucketsBySum?: boolean; labels: Labels; + thresholdLine: ThresholdLine; valueAxes: ValueAxis[]; grid: { categoryLines: boolean; From d74b5702637791835053ddd800866b7ded04958d Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Wed, 21 Aug 2019 17:40:00 +0200 Subject: [PATCH 08/13] threshold line not displayed when out of the canvas --- .../public/editors/point_series.js | 33 ------- .../public/editors/point_series.tsx | 92 ++++++++++++------- .../kbn_vislib_vis_types/public/types.ts | 2 +- .../point_series/_point_series.js | 25 +++-- 4 files changed, 75 insertions(+), 77 deletions(-) delete mode 100644 src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js deleted file mode 100644 index 930858587c09c..0000000000000 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.js +++ /dev/null @@ -1,33 +0,0 @@ -/* - * Licensed to Elasticsearch B.V. under one or more contributor - * license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright - * ownership. Elasticsearch B.V. licenses this file to you under - * the Apache License, Version 2.0 (the "License"); you may - * not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, - * software distributed under the License is distributed on an - * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY - * KIND, either express or implied. See the License for the - * specific language governing permissions and limitations - * under the License. - */ - -import { uiModules } from 'ui/modules'; -import vislibValuePointSeriesTemplate from './point_series.tsx'; -const module = uiModules.get('kibana'); - -module.directive('vislibValueAxes', function () { - return { - restrict: 'E', - template: vislibValuePointSeriesTemplate, - replace: true, - link: function ($scope) { - $scope.isThresholdSettingsOpen = false; - } - }; -}); diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index e54979739664d..079a013f6be57 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -31,6 +31,11 @@ import { SelectOption } from '../controls/select'; function PointSeriesOptions(props: VisOptionsProps) { const { stateParams, setValue, vis } = props; + const options = [ + {value: 'full', text: 'Full'}, + {value: 'dashed', text: 'Dashed'}, + {value: 'dot-dashed', text: 'Dot-dashed'}, + ]; return ( <> @@ -79,6 +84,25 @@ function PointSeriesOptions(props: VisOptionsProps) { } /> )} + + + + + + + + + + +

+ +

+ + + ) { /> {stateParams.thresholdLine.show && ( + + + - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } + label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.valueLabel', { + defaultMessage: 'Threshold value', + })} + paramName="value" + value={stateParams.thresholdLine.value} + step={0.1} + setValue={(paramName, value) => + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } /> - ) && ( + - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } + label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.widthLabel', { + defaultMessage: 'Line width', + })} + paramName="width" + min={1} + step={1} + value={stateParams.thresholdLine.width} + setValue={(paramName, value) => + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } /> - ) && ( + - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } + label={i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.style', { + defaultMessage: 'Line style', + })} + options={options} + paramName="style" + value={stateParams.thresholdLine.style} + setValue={(paramName, value) => + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } /> - ) + + ) } - - - ); } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 0bf465dee5dd4..a2a6a246b2ada 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -34,7 +34,7 @@ interface ThresholdLine { show: boolean; value: number; width: number; - style: string; + style: 'full' | 'dashed' | 'dot-dashed'; } export interface ValueAxis { diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js index d05bb40d3ecd8..319d0504e4ac7 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js @@ -23,7 +23,7 @@ const thresholdLineDefaults = { show: false, value: 10, width: 1, - style: 'full' + style: 'full', }; export class PointSeries { @@ -92,6 +92,7 @@ export class PointSeries { addThresholdLine(svgElem) { const chartData = this.chartData; const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal(); + const valueAxisDomain = this.getValueAxis().axisScale.getDomain(chartData.values.length); const yScale = this.getValueAxis().getScale(); const svgParentWidth = svgElem[0][0].attributes.width.value; const svgParentHeight = svgElem[0][0].attributes.height.value; @@ -110,14 +111,18 @@ export class PointSeries { function y(y) { return yScale(y); } - svgElem - .append('line') - .attr('x1', isHorizontal ? 0 : y(thresholdValue)) - .attr('y1', isHorizontal ? y(thresholdValue) : 0) - .attr('x2', isHorizontal ? svgParentWidth : y(thresholdValue)) - .attr('y2', isHorizontal ? y(thresholdValue) : svgParentHeight) - .attr('stroke-width', thresholdLineWidth) - .attr('stroke-dasharray', thresholdLineStyle) - .attr('stroke', labelColor); + + if (valueAxisDomain && valueAxisDomain[0] <= thresholdValue && valueAxisDomain[1] >= thresholdValue) { + svgElem + .append('line') + .attr('x1', isHorizontal ? 0 : y(thresholdValue)) + .attr('y1', isHorizontal ? y(thresholdValue) : 0) + .attr('x2', isHorizontal ? svgParentWidth : y(thresholdValue)) + .attr('y2', isHorizontal ? y(thresholdValue) : svgParentHeight) + .attr('stroke-width', thresholdLineWidth) + .attr('stroke-dasharray', thresholdLineStyle) + .attr('stroke', labelColor); + } + } } From 1714255171f18673a1a14e250f162d84444d6fac Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Wed, 21 Aug 2019 17:40:26 +0200 Subject: [PATCH 09/13] linting --- .../public/editors/point_series.tsx | 97 +++++++++---------- .../kbn_vislib_vis_types/public/types.ts | 1 - 2 files changed, 48 insertions(+), 50 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index 079a013f6be57..ac09109aecad8 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -32,9 +32,9 @@ import { SelectOption } from '../controls/select'; function PointSeriesOptions(props: VisOptionsProps) { const { stateParams, setValue, vis } = props; const options = [ - {value: 'full', text: 'Full'}, - {value: 'dashed', text: 'Dashed'}, - {value: 'dot-dashed', text: 'Dot-dashed'}, + { value: 'full', text: 'Full' }, + { value: 'dashed', text: 'Dashed' }, + { value: 'dot-dashed', text: 'Dot-dashed' }, ]; return ( @@ -48,7 +48,7 @@ function PointSeriesOptions(props: VisOptionsProps) { /> - + @@ -86,11 +86,11 @@ function PointSeriesOptions(props: VisOptionsProps) { )} - + - + @@ -101,8 +101,7 @@ function PointSeriesOptions(props: VisOptionsProps) { /> - - + ) { /> {stateParams.thresholdLine.show && ( - + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> - - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } - /> - - - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } - /> - - - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) - } - /> + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> + + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + } + /> - ) - } - + )} - ); } diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index a2a6a246b2ada..3a06349ada25f 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -35,7 +35,6 @@ interface ThresholdLine { value: number; width: number; style: 'full' | 'dashed' | 'dot-dashed'; - } export interface ValueAxis { id: string; From 33154645eb2bf36c85fdcf492dcc09d14cbc3811 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Wed, 21 Aug 2019 18:25:45 +0200 Subject: [PATCH 10/13] added color picker for threshold line --- .../kbn_vislib_vis_types/public/area.js | 3 ++- .../public/editors/point_series.tsx | 15 ++++++++++++++- .../kbn_vislib_vis_types/public/histogram.js | 3 ++- .../kbn_vislib_vis_types/public/line.js | 3 ++- .../kbn_vislib_vis_types/public/types.ts | 1 + .../visualizations/point_series/_point_series.js | 5 +++-- 6 files changed, 24 insertions(+), 6 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js index acc8751cef845..6e79df638e2e4 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js @@ -101,7 +101,8 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'full' + style: 'full', + color: '#00B3A4' }, labels: {} }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index ac09109aecad8..bbee24f3d2bc4 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -17,7 +17,7 @@ * under the License. */ import React from 'react'; -import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui'; +import { EuiPanel, EuiTitle, EuiSpacer, EuiColorPicker, EuiFormRow } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; @@ -158,6 +158,19 @@ function PointSeriesOptions(props: VisOptionsProps) { setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) } /> + + + { + setValue('thresholdLine', { ...stateParams.thresholdLine, color: value }); + }} + /> + )} diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js index 0a5d4923f54e3..83465487fa78a 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -106,7 +106,8 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'full' + style: 'full', + color: '#00B3A4' } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js index 8928cdffb06b7..472296bd6bac4 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js @@ -102,7 +102,8 @@ export default function PointSeriesVisType(Private) { show: false, value: 10, width: 1, - style: 'full' + style: 'full', + color: '#00B3A4' } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts index 3a06349ada25f..90bd577828cd8 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/types.ts @@ -35,6 +35,7 @@ interface ThresholdLine { value: number; width: number; style: 'full' | 'dashed' | 'dot-dashed'; + color: string; } export interface ValueAxis { id: string; diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js index 319d0504e4ac7..d2757a978c1af 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js @@ -24,6 +24,7 @@ const thresholdLineDefaults = { value: 10, width: 1, style: 'full', + color: '#00B3A4' }; export class PointSeries { @@ -106,7 +107,7 @@ export class PointSeries { } const thresholdValue = this.thresholdLineOptions.value; - const labelColor = this.handler.data.getColorFunc()(chartData.label); + const lineColor = this.thresholdLineOptions.color; function y(y) { return yScale(y); @@ -121,7 +122,7 @@ export class PointSeries { .attr('y2', isHorizontal ? y(thresholdValue) : svgParentHeight) .attr('stroke-width', thresholdLineWidth) .attr('stroke-dasharray', thresholdLineStyle) - .attr('stroke', labelColor); + .attr('stroke', lineColor); } } From 0e72d7cbffb025a0e1f71a2a81e48c9d2a4d51d3 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Thu, 22 Aug 2019 07:22:51 +0200 Subject: [PATCH 11/13] fixed assigning of a static color and i18 select options --- .../kbn_vislib_vis_types/public/area.js | 3 ++- .../public/editors/point_series.tsx | 21 ++++++++++++++++--- .../kbn_vislib_vis_types/public/histogram.js | 3 ++- .../kbn_vislib_vis_types/public/line.js | 4 +++- 4 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js index 6e79df638e2e4..adaff40c4e9ac 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js @@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; import { PointSeriesOptions } from './editors/point_series'; import { getLegendPositions, LegendPositions } from './utils/legend_positions'; +import { palettes } from '@elastic/eui/lib/services'; export default function PointSeriesVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -102,7 +103,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: '#00B3A4' + color: palettes.euiPaletteColorBlind.colors[0] }, labels: {} }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index bbee24f3d2bc4..e6b994207d176 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -32,9 +32,24 @@ import { SelectOption } from '../controls/select'; function PointSeriesOptions(props: VisOptionsProps) { const { stateParams, setValue, vis } = props; const options = [ - { value: 'full', text: 'Full' }, - { value: 'dashed', text: 'Dashed' }, - { value: 'dot-dashed', text: 'Dot-dashed' }, + { + value: 'full', + text: i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.style.full', { + defaultMessage: 'Full', + }), + }, + { + value: 'dashed', + text: i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.style.dashed', { + defaultMessage: 'Dashed', + }), + }, + { + value: 'dot-dashed', + text: i18n.translate('kbnVislibVisTypes.editors.pointSeries.thresholdLine.style.dotdashed', { + defaultMessage: 'Dot-dashed', + }), + }, ]; return ( diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js index 83465487fa78a..c03adbacde6b8 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -22,6 +22,7 @@ import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; import { PointSeriesOptions } from './editors/point_series'; import { getLegendPositions, LegendPositions } from './utils/legend_positions'; +import { palettes } from '@elastic/eui/lib/services'; export default function PointSeriesVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -107,7 +108,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: '#00B3A4' + color: palettes.euiPaletteColorBlind.colors[0] } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js index 472296bd6bac4..48079f9336d10 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js @@ -22,6 +22,8 @@ import { i18n } from '@kbn/i18n'; import { Schemas } from 'ui/vis/editors/default/schemas'; import { PointSeriesOptions } from './editors/point_series'; import { getLegendPositions, LegendPositions } from './utils/legend_positions'; +import { palettes } from '@elastic/eui/lib/services'; + export default function PointSeriesVisType(Private) { const VisFactory = Private(VisFactoryProvider); @@ -103,7 +105,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: '#00B3A4' + color: palettes.euiPaletteColorBlind.colors[0] } }, }, From 135b6f9fba4225c7c6d70ad73beea0b400672765 Mon Sep 17 00:00:00 2001 From: Filip Rydzi Date: Thu, 22 Aug 2019 09:22:51 +0200 Subject: [PATCH 12/13] changing default color and lintings --- src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js | 2 +- .../core_plugins/kbn_vislib_vis_types/public/histogram.js | 2 +- src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js | 2 +- .../public/vislib/visualizations/point_series/_point_series.js | 3 ++- .../public/vislib/visualizations/point_series/column_chart.js | 2 +- 5 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js index adaff40c4e9ac..9726f9f1a2ef7 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/area.js @@ -103,7 +103,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: palettes.euiPaletteColorBlind.colors[0] + color: palettes.euiPaletteColorBlind.colors[9] }, labels: {} }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js index c03adbacde6b8..15125dd598942 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/histogram.js @@ -108,7 +108,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: palettes.euiPaletteColorBlind.colors[0] + color: palettes.euiPaletteColorBlind.colors[9] } }, }, diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js index 48079f9336d10..60af39099cee6 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/line.js @@ -105,7 +105,7 @@ export default function PointSeriesVisType(Private) { value: 10, width: 1, style: 'full', - color: palettes.euiPaletteColorBlind.colors[0] + color: palettes.euiPaletteColorBlind.colors[9] } }, }, diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js index d2757a978c1af..6e14ab23d0956 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/_point_series.js @@ -18,13 +18,14 @@ */ import _ from 'lodash'; +import { palettes } from '@elastic/eui/lib/services'; const thresholdLineDefaults = { show: false, value: 10, width: 1, style: 'full', - color: '#00B3A4' + color: palettes.euiPaletteColorBlind.colors[9], }; export class PointSeries { diff --git a/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js b/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js index 53f4a2e4a4f88..693fd269b75ad 100644 --- a/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js +++ b/src/legacy/ui/public/vislib/visualizations/point_series/column_chart.js @@ -27,7 +27,7 @@ const defaults = { showTooltip: true, color: undefined, fillColor: undefined, - showLabel: true + showLabel: true, }; /** From c816c69c0d6bf2d1075d9a0b7dfe5d8c10f767bd Mon Sep 17 00:00:00 2001 From: Tim Roes Date: Thu, 22 Aug 2019 12:16:14 +0200 Subject: [PATCH 13/13] Fix remaining TS issues --- .../public/controls/number_input.tsx | 3 +++ .../kbn_vislib_vis_types/public/controls/select.tsx | 2 +- .../public/editors/point_series.tsx | 11 +++++------ 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/number_input.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/number_input.tsx index c8a754b481d71..3f305a1ca7ae9 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/number_input.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/number_input.tsx @@ -24,6 +24,7 @@ interface NumberInputOptionProps { label?: React.ReactNode; max?: number; min?: number; + step?: string | number; paramName: ParamName; value?: number | ''; setValue: (paramName: ParamName, value: number | '') => void; @@ -34,6 +35,7 @@ function NumberInputOption({ max, min, paramName, + step, value = '', setValue, }: NumberInputOptionProps) { @@ -41,6 +43,7 @@ function NumberInputOption({ ; + options: ReadonlyArray<{ readonly value: ValidParamValues; readonly text: string }>; paramName: ParamName; value?: ValidParamValues; setValue: (paramName: ParamName, value: ValidParamValues) => void; diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx index e6b994207d176..d94e99d3c54d4 100644 --- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx +++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.tsx @@ -50,7 +50,7 @@ function PointSeriesOptions(props: VisOptionsProps) { defaultMessage: 'Dot-dashed', }), }, - ]; + ] as const; return ( <> @@ -130,7 +130,7 @@ function PointSeriesOptions(props: VisOptionsProps) { /> {stateParams.thresholdLine.show && ( - + <> ) { )} paramName="value" value={stateParams.thresholdLine.value} - step={0.1} setValue={(paramName, value) => - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value || 0 }) } /> @@ -158,7 +157,7 @@ function PointSeriesOptions(props: VisOptionsProps) { step={1} value={stateParams.thresholdLine.width} setValue={(paramName, value) => - setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value }) + setValue('thresholdLine', { ...stateParams.thresholdLine, [paramName]: value || 1 }) } /> @@ -186,7 +185,7 @@ function PointSeriesOptions(props: VisOptionsProps) { }} /> - + )}