add fixLineMixin

demo/list.js

@@ -116,6 +116,11 @@ module.exports = [
     path: 'fitline-line',
     title: 'Fit Line on Line Chart'
   },
+  {
+    category: 'Line',
+    path: 'fixline-line',
+    title: 'Fix Line on Line Chart'
+  },
   {
     category: 'Line',
     path: 'meanline-line',

demo/src/line/fixline-line/index.js

@@ -0,0 +1,28 @@
+jelly.line().container('#jelly-container')
+  .data([
+    {category:'AAA', x: 1000, y: 10},{category:'AAA', x: 2000, y: 20},
+    {category:'AAA', x: 3000, y: 30},{category:'AAA', x: 4000, y: 40},
+    {category:'AAA', x: 1000, y: 50},{category:'AAA', x: 2000, y: 30},
+    {category:'AAA', x: 3000, y: 40},{category:'AAA', x: 4000, y: 100},
+    {category:'BBB', x: 1000, y: 80},{category:'BBB', x: 2000, y: 60},
+    {category:'BBB', x: 3000, y: 50},{category:'BBB', x: 4000, y: 70},
+    {category:'BBB', x: 1000, y: 20},{category:'BBB', x: 2000, y: 60},
+    {category:'BBB', x: 3000, y: 50},{category:'BBB', x: 4000, y: 60}
+  ]).dimensions([
+    {
+      field: 'x',
+      order: 'ascending'
+    }, {
+      field: 'category',
+      order: 'descending'
+    }])
+  .measures({field:'y', op:'mean'})
+  .stacked(true)
+  .point(true)
+  .shape('area').areaGradient(true)
+  .axis('x').axis({"target":"y","titleOrient":"right"})
+  .point({'type':'fill'})
+  .fixLine(65)
+  .legend(true)
+  .multiTooltip(true)
+  .render();

demo/src/line/fixline-line/index.md

@@ -0,0 +1 @@
+`.fixLine(50)` generate fixed horizonal line.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jelly-chart",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "author": "Newsjelly Corp.",
   "license": "GPL-3.0+",
   "description": "Jelly-Chart is a chart library based on D3v4 and SVG.",

src/layouts/fixlineMixin/index.js

@@ -0,0 +1,30 @@
+import {attrFunc} from '../../modules/util';
+
+const _attrs = {
+  fixLine: false
+}
+
+const fixLineMixin = Base => {
+  /**
+   * adds FitLine features
+   * @mixin FitLineMixin
+   */
+  let FitLineMixin = class extends Base {
+    constructor() {
+      super();
+      this.setAttrs(_attrs);
+    }
+  }
+  /**
+   * If fixLine is specified value, it draw horizon fixed line.
+   * @function
+   * @example
+   * line.fixLine(50)
+   * @param {number, boolean} [fixLine=false] If is not false, drawn fixed line.
+   * @return {fixLine|Line}
+   */
+  FitLineMixin.prototype.fixLine = attrFunc('fixLine');
+  return FitLineMixin;
+}
+
+export default fixLineMixin;

src/layouts/line/_fitLine.js

@@ -16,7 +16,7 @@ export default function() {
   let yValues = leastSquares.map(l => {
     return xValues.map(d => l.slope * d + l.intercept);
   });
-
+  console.log('fit yValues', yValues)
   if (fitLineG.empty()) {
     fitLineG = canvas.append('g').attr('class',  className('fit-line-g'))
       .attr('clip-path', `url(#${canvas.selectAll(className('canvas-g-clip-path', true)).attr('id')}`);

src/layouts/line/_fixLIne.js

@@ -0,0 +1,45 @@
+import {transition} from 'd3';
+import {className} from '../../modules/util';
+
+const fixLineColor = '#43cdef';
+export default function() {
+  const canvas = this.__execs__.canvas;  
+  const scale = this.__execs__.scale;
+  const fixLineValue = this.fixLine()
+  const trans = transition().duration(this.transition().duration).delay(this.transition().delay);
+  let fixLineG = canvas.selectAll(className('fix-line-g', true));
+  if (!fixLineValue) {
+    if (!fixLineG.empty()) canvas.select(className('fix-line-g', true)).remove();
+    return;
+  }
+
+  if (fixLineG.empty()) {
+    fixLineG = canvas.append('g').attr('class',  className('fix-line-g'))
+      //.attr('clip-path', `url(#${canvas.selectAll(className('canvas-g-clip-path', true)).attr('id')}`);
+  }
+
+  let xValues = scale.x.domain();
+  let yValues = [[fixLineValue,fixLineValue]]
+
+  fixLineG.datum(yValues);
+
+  let fixLine = fixLineG.selectAll(className('fix-line', true))
+    .data(d => d);
+  fixLine.exit().remove();
+  let fixLineEnter = fixLine.enter().append('line')
+    .attr('class', className('fix-line'))
+    .style('fill', 'none').style('stroke', fixLineColor)
+    .style('stroke-width', 2)
+    .attr('opacity', 0.8)
+    .attr('x1', scale.x(xValues[0]))
+    .attr('x2', scale.x(xValues[1]))
+    .attr('y1', d => (d.scale ? d.scale : scale.y).range()[0])
+    .attr('y2', d => (d.scale ? d.scale : scale.y).range()[0]);
+  fixLine = fixLineEnter.merge(fixLine);
+  fixLine.transition(trans)
+    .attr('x1', scale.x.range()[0], scale.x(xValues[0]))
+    .attr('x2', scale.x(xValues[1]))
+    .attr('y1', d => (d.scale ? d.scale : scale.y)(d[0])) 
+    .attr('y2', d => (d.scale ? d.scale : scale.y)(d[1]));
+
+}

src/layouts/line/index.js

@@ -2,6 +2,7 @@ import {dispatch} from 'd3';
 import Facet from '../facet/';
 import brushMixin from '../brushMixin';
 import fitLineMixin from '../fitLineMixin';
+import fixLineMixin from '../fixLineMixin';
 import seriesMixin from '../seriesMixin';
 import zoomMixin from '../zoomMixin';
 import paddingMixin from '../paddingMixin';
@@ -23,6 +24,7 @@ import _legend from './_legend';
 import _region from './_region';
 import _facet from './_facet';
 import _fitLine from './_fitLine';
+import _fixLine from './_fixLine';
 import _tooltip from './_tooltip';
 import _zoom from './_zoom';
 import {leastSquare as lsFunc} from '../../modules/transform';
@@ -57,7 +59,7 @@ const _attrs = {
  * @augments ShapeMixin
  * @augments StreamMixin
  */
-class Line extends mix(Facet).with(fitLineMixin, seriesMixin, brushMixin, zoomMixin, paddingMixin, shapeMixin, stackMixin, streamMixin) {
+class Line extends mix(Facet).with(fitLineMixin, fixLineMixin, seriesMixin, brushMixin, zoomMixin, paddingMixin, shapeMixin, stackMixin, streamMixin) {
   constructor() {
     super();
     this.setAttrs(_attrs);
@@ -73,6 +75,7 @@ class Line extends mix(Facet).with(fitLineMixin, seriesMixin, brushMixin, zoomMi
       .process('mark', _mark, {allow: function() {return !this.isBrushZoom() && !this.isFacet()}})
       .process('meanLine', _meanLine, {allow: function() {return !this.isBrushZoom()}})
       .process('fitLine', _fitLine, {allow: function() {return !this.isBrushZoom()}})
+      .process('fixLine', _fixLine, {allow: function() {return !this.isBrushZoom()}})
       .process('tooltip', _tooltip, {allow: function() {return !this.isBrushZoom()}})
       .process('panning', _panning, {allow: function() {return !this.isBrushZoom()}})
       .process('zoom', _zoom, {allow: function() {return !this.isBrushZoom()}})