From 6b3d544203734c2d9a05592970afd6b09b3bd917 Mon Sep 17 00:00:00 2001
From: Peter Pisljar <peter.pisljar@gmail.com>
Date: Mon, 10 Apr 2017 13:48:38 +0200
Subject: [PATCH] adding line width option to point series (#10583) (#11117)

backport of 1f75cd5
* adding line width option

* making circle size related to line width

* extracting magic number to variable
---
 .../public/controls/point_series/series.html       | 14 ++++++++++++++
 .../public/controls/point_series/series.js         |  1 +
 src/ui/public/vislib/lib/types/point_series.js     |  3 ++-
 .../visualizations/point_series/line_chart.js      |  9 +++++++--
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
index d8eac4052719d..99e00ca2477bf 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
@@ -110,6 +110,20 @@
             </div>
           </div>
 
+          <div class="kuiSideBarFormRow">
+            <label class="kuiSideBarFormRow__label">
+              Line Width
+            </label>
+            <div class="kuiSideBarFormRow__control">
+              <input name="lineWidth"
+                     class="kuiInput kuiSideBarInput"
+                     type="number"
+                     step="0.5"
+                     ng-model="chart.lineWidth"
+              >
+            </div>
+          </div>
+
         </div>
       </div>
     </div>
diff --git a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
index 5e5397882dfdd..faea5450c5e23 100644
--- a/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
+++ b/src/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.js
@@ -18,6 +18,7 @@ module.directive('vislibSeries', function () {
           drawLinesBetweenPoints: true,
           showCircles: true,
           interpolate: 'linear',
+          lineWidth: 2,
           data: {
             id: id,
             label: label
diff --git a/src/ui/public/vislib/lib/types/point_series.js b/src/ui/public/vislib/lib/types/point_series.js
index 70172c47b5bfb..59df0d69fbf24 100644
--- a/src/ui/public/vislib/lib/types/point_series.js
+++ b/src/ui/public/vislib/lib/types/point_series.js
@@ -34,7 +34,8 @@ export default function ColumnHandler() {
       valueAxis: matchingSeriParams.valueAxis,
       drawLinesBetweenPoints: matchingSeriParams.drawLinesBetweenPoints,
       showCircles: matchingSeriParams.showCircles,
-      radiusRatio: matchingSeriParams.radiusRatio,
+      radiusRatio: cfg.radiusRatio,
+      lineWidth: matchingSeriParams.lineWidth,
       data: seri
     };
   };
diff --git a/src/ui/public/vislib/visualizations/point_series/line_chart.js b/src/ui/public/vislib/visualizations/point_series/line_chart.js
index 8a651ce3740e1..37885d9312854 100644
--- a/src/ui/public/vislib/visualizations/point_series/line_chart.js
+++ b/src/ui/public/vislib/visualizations/point_series/line_chart.js
@@ -11,6 +11,7 @@ export default function LineChartFactory(Private) {
     radiusRatio: 9,
     showLines: true,
     interpolate: 'linear',
+    lineWidth: 2,
     color: undefined,
     fillColor: undefined
   };
@@ -40,6 +41,7 @@ export default function LineChartFactory(Private) {
       const tooltip = this.baseChart.tooltip;
       const isTooltip = this.handler.visConfig.get('tooltip.show');
       const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
+      const lineWidth = this.seriesConfig.lineWidth;
 
       const radii =  this.baseChart.radii;
 
@@ -93,8 +95,10 @@ export default function LineChartFactory(Private) {
           const width = self.baseChart.chartConfig.width;
           const height = self.baseChart.chartConfig.height;
           const circleRadius = (d.z - radii.min) / radiusStep;
+          const baseMagicNumber = 2;
 
-          return _.min([Math.sqrt((circleRadius || 2) + 2), width, height]) + (modifier || 0);
+          const base = circleRadius ? Math.sqrt(circleRadius + baseMagicNumber) + lineWidth : lineWidth;
+          return _.min([base, width, height]) + (modifier || 0);
         };
       }
 
@@ -141,6 +145,7 @@ export default function LineChartFactory(Private) {
       const yScale = this.getValueAxis().getScale();
       const color = this.handler.data.getColorFunc();
       const ordered = this.handler.data.get('ordered');
+      const lineWidth = this.seriesConfig.lineWidth;
       const interpolate = this.seriesConfig.interpolate;
       const isHorizontal = this.getCategoryAxis().axisConfig.isHorizontal();
 
@@ -179,7 +184,7 @@ export default function LineChartFactory(Private) {
       .attr('stroke', () => {
         return color(data.label);
       })
-      .attr('stroke-width', 2);
+      .attr('stroke-width', lineWidth);
 
       return line;
     }