adding line width option to point series (#10583)

* adding line width option * making circle size related to line width * extracting magic number to variable
elastic · Apr 10, 2017 · 1f75cd5 · 1f75cd5
1 parent cea1b39
commit 1f75cd5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;
     }