Merge pull request #57 from JetJet13/develop

Add Hole in Line Charts | Merge to Master

Author: JetJet13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mathbook",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "private": true,
   "scripts": {
     "start": "node ./bin/www",

src/front-end/public/javascripts/helperFunctions.js

@@ -1,4 +1,5 @@
 "use strict"
+
 function handleError(err) {
   console.error("something errored out", err)
   const status = err.status
@@ -60,7 +61,30 @@ function createLineChart(selector, chartData, chartOptions) {
   if (chartOptions["axisX"]) {
     chartOptions["axisX"]["type"] = Chartist.AutoScaleAxis
   }
-  return new Chartist.Line(selector, chartData, chartOptions)
+  const chart = new Chartist.Line(selector, chartData, chartOptions)
+  convertPointsToHoles(chart)
+  return chart
+}
+
+function convertPointsToHoles(chart) {
+  chart.on("draw", function(data) {
+    const pointIndex = data.index
+    const series = data.series
+    if (data.type === "point" && series[pointIndex].isHole) {
+      var point = new Chartist.Svg(
+        "circle",
+        {
+          cx: data.x,
+          cy: data.y,
+          // Edir r value for diffrent sizes
+          r: 5,
+          fill: "white"
+        },
+        "ct-hole"
+      )
+      data.element.replace(point)
+    }
+  })
 }
 
 function uniqueId() {

src/front-end/public/stylesheets/chart-colors.css

@@ -2,6 +2,10 @@
 .ct-series-a .ct-point {
   stroke: #3e8ef7;
 }
+.ct-series-a .ct-hole {
+  stroke: #3e8ef7;
+  stroke-width: 2px;
+}
 
 .ct-series-a .ct-area {
   fill: #3e8ef7;
@@ -12,6 +16,11 @@
   stroke: #49de94;
 }
 
+.ct-series-b .ct-hole {
+  stroke: #49de94;
+  stroke-width: 2px;
+}
+
 .ct-series-b .ct-area {
   fill: #49de94;
 }
@@ -21,6 +30,11 @@
   stroke: #ff666b;
 }
 
+.ct-series-c .ct-hole {
+  stroke: #ff666b;
+  stroke-width: 2px;
+}
+
 .ct-series-c .ct-area {
   fill: #ff666b;
 }
@@ -30,6 +44,11 @@
   stroke: #9463f7;
 }
 
+.ct-series-d .ct-hole {
+  stroke: #9463f7;
+  stroke-width: 2px;
+}
+
 .ct-series-d .ct-area {
   fill: #9463f7;
 }
@@ -39,6 +58,11 @@
   stroke: hsl(22, 99%, 61%);
 }
 
+.ct-series-e .ct-hole {
+  stroke: hsl(22, 99%, 61%);
+  stroke-width: 2px;
+}
+
 .ct-series-e .ct-area {
   fill: hsl(22, 99%, 61%);
 }
@@ -48,6 +72,151 @@
   stroke: hsl(48, 100%, 67%);
 }
 
+.ct-series-f .ct-hole {
+  stroke: hsl(48, 100%, 67%);
+  stroke-width: 2px;
+}
+
 .ct-series-f .ct-area {
   fill: hsl(48, 100%, 67%);
 }
+
+.ct-series-g .ct-line,
+.ct-series-g .ct-point {
+  stroke: #0544d3;
+}
+
+.ct-series-g .ct-hole {
+  stroke: #0544d3;
+  stroke-width: 2px;
+}
+
+.ct-series-g .ct-area {
+  fill: #0544d3;
+}
+
+.ct-series-h .ct-line,
+.ct-series-h .ct-point {
+  stroke: #6b0392;
+}
+
+.ct-series-h .ct-hole {
+  stroke: #6b0392;
+  stroke-width: 2px;
+}
+
+.ct-series-h .ct-area {
+  fill: #6b0392;
+}
+
+.ct-series-i .ct-line,
+.ct-series-i .ct-point {
+  stroke: #f05b4f;
+}
+
+.ct-series-i .ct-hole {
+  stroke: #f05b4f;
+  stroke-width: 2px;
+}
+
+.ct-series-i .ct-area {
+  fill: #f05b4f;
+}
+
+.ct-series-j .ct-line,
+.ct-series-j .ct-point {
+  stroke: #dda458;
+}
+
+.ct-series-j .ct-hole {
+  stroke: #dda458;
+  stroke-width: 2px;
+}
+
+.ct-series-j .ct-area {
+  fill: #dda458;
+}
+
+.ct-series-k .ct-line,
+.ct-series-k .ct-point {
+  stroke: #eacf7d;
+}
+
+.ct-series-k .ct-hole {
+  stroke: #eacf7d;
+  stroke-width: 2px;
+}
+
+.ct-series-k .ct-area {
+  fill: #eacf7d;
+}
+
+.ct-series-l .ct-line,
+.ct-series-l .ct-point {
+  stroke: #86797d;
+}
+
+.ct-series-l .ct-hole {
+  stroke: #86797d;
+  stroke-width: 2px;
+}
+
+.ct-series-l .ct-area {
+  fill: #86797d;
+}
+
+.ct-series-m .ct-line,
+.ct-series-m .ct-point {
+  stroke: #b2c326;
+}
+
+.ct-series-m .ct-hole {
+  stroke: #b2c326;
+  stroke-width: 2px;
+}
+
+.ct-series-m .ct-area {
+  fill: #b2c326;
+}
+
+.ct-series-n .ct-line,
+.ct-series-n .ct-point {
+  stroke: #6188e2;
+}
+
+.ct-series-n .ct-hole {
+  stroke: #6188e2;
+  stroke-width: 2px;
+}
+
+.ct-series-n .ct-area {
+  fill: #6188e2;
+}
+
+.ct-series-n .ct-line,
+.ct-series-n .ct-point {
+  stroke: #6188e2;
+}
+
+.ct-series-n .ct-hole {
+  stroke: #6188e2;
+  stroke-width: 2px;
+}
+
+.ct-series-n .ct-area {
+  fill: #6188e2;
+}
+
+.ct-series-o .ct-line,
+.ct-series-o .ct-point {
+  stroke: #a748ca;
+}
+
+.ct-series-o .ct-hole {
+  stroke: #a748ca;
+  stroke-width: 2px;
+}
+
+.ct-series-o .ct-area {
+  fill: #a748ca;
+}

src/front-end/tags/chart-modal/chart-modal.tag

@@ -109,6 +109,8 @@
             <textarea id="chartSeries" class="textarea" placeholder="x;y pairs, ie. 1;2, 2;3, 3;4"></textarea>
             <p class="help">format: x;y => (1,3).  e.g. 1;2 => (1,2)
             <br/>
+            You are able to insert a hole in the chart: hole(x;y) => hole(1;2)
+            <br/>
             Starting a new line (hitting enter) will add a new line plot
              </p>
           </div>
@@ -223,6 +225,12 @@
               const y = splitPoint[1]
               series.push({ x: x, y: y })
             }
+            else if (self.isValidHolePoint(point)){
+              const splitPoint = point.replace(/(hole\(){1}|(\){1})/g, '').split(';')
+              const x = splitPoint[0]
+              const y = splitPoint[1]
+              series.push({ x: x, y: y, isHole: true })
+            }
             else if (dataType[k] === "null"){
               series.push(null)
             }
@@ -243,7 +251,13 @@
   isValidInputPoint(point){
     // point should follow the following format: x;y => 1;3
     // decimals are allowed
-    return /^(\-)?\d+(?:\.\d+)?[\;](\-)?\d+(?:\.\d+)?$/.test(point)
+    return /^(\-)?\d+(?:\.\d+)?[\;]((\-)?\d+(?:\.\d+)?|(null)?)$/.test(point)
+  }
+
+  isValidHolePoint(point){
+    // point should follow the following format: hole(x;y) => hole(1;3)
+    // decimals are allowed
+    return /^(hole\()(\-)?\d+(?:\.\d+)?[\;]((\-)?\d+(?:\.\d+)?|(null)?)(\))$/.test(point)
   }
 
   toggleOption(type){
@@ -324,7 +338,6 @@
     this.xAxisHigh = "null"
     this.yAxisLow = "null"
     this.yAxisHigh = "null"
-    console.log('finished cleaning up fields')
   }
 
   closeModal(){