create statistics chart with chartjs

developerruhul · May 24, 2018 · 3550f6d · 3550f6d
1 parent bd30270
commit 3550f6d
Show file tree

Hide file tree

Showing 7 changed files with 158 additions and 54 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -5,6 +5,7 @@ const htmlclean = require("gulp-htmlclean");
 const cleanCSS = require("gulp-clean-css");
 const sass = require("gulp-sass");
 const prefix = require("gulp-autoprefixer");
+const uglify = require("gulp-uglify");
 
 /////////////////////////////////////////////////////////////////////////////////////////////
 // DEVELOPMENT
@@ -24,7 +25,7 @@ gulp.task("serve", ["sass"], () => {
   });
 
   gulp.watch(["src/scss/**/*.scss"], ["sass"]);
-  gulp.watch("src/index.html").on("change", server.reload);
+  gulp.watch(["src/index.html", "src/script/**"]).on("change", server.reload);
 });
 
 gulp.task("default", ["serve"]);
@@ -53,4 +54,11 @@ gulp.task("dist:images", () =>
   gulp.src("src/images/**").pipe(gulp.dest("dist/images/"))
 );
 
-gulp.task("build", ["dist:html", "dist:css", "dist:images"]);
+gulp.task("dist:js", () =>
+  gulp
+    .src("src/script/*.js")
+    .pipe(uglify())
+    .pipe(gulp.dest("dist/script/"))
+);
+
+gulp.task("build", ["dist:html", "dist:css", "dist:js", "dist:images"]);
diff --git a/package.json b/package.json
@@ -8,14 +8,15 @@
   "license": "MIT",
   "private": false,
   "devDependencies": {
+    "browser-sync": "^2.24.4",
     "del": "^3.0.0",
     "gulp": "^3.9.1",
     "gulp-autoprefixer": "^5.0.0",
     "gulp-clean-css": "^3.9.4",
     "gulp-htmlclean": "^2.7.22",
     "gulp-inject": "^4.3.2",
     "gulp-sass": "^4.0.1",
-    "browser-sync": "^2.24.4"
+    "gulp-uglify": "^3.0.0"
   },
   "scripts": {
     "start": "gulp serve"

diff --git a/src/index.html b/src/index.html
@@ -301,7 +301,7 @@ <h1 class="task__title">Statistics</h1>
                         <input class="switch-button__input" type="radio" name="stats_switch" id="stats_expence_button">
                         <label class="switch-button__label" for="stats_expence_button">Expence</label>
                     </form>
-                    <ul class="statistics-card__chart mt-average">
+                    <!-- <ul class="statistics-card__chart mt-average">
                         <li class="statistics-card__amount">$80K</li>
                         <li class="statistics-card__amount">$60K</li>
                         <li class="statistics-card__amount">$40K</li>
@@ -315,7 +315,12 @@ <h1 class="task__title">Statistics</h1>
                             <span>Jun</span>
                             <span>Jul</span>
                         </div>
-                    </ul>
+                    </ul> -->
+                    <div class="statistics-card__line-chart mt-average">
+                        <div class="statistics-card__aspect-ratio">
+                            <canvas id="chart"></canvas>
+                        </div>
+                    </div>
 
                 </section>
             </div>
@@ -328,6 +333,12 @@ <h1 class="task__title">Statistics</h1>
 
     <!-- INLINE SVG POLYFILL -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/svgxuse/1.2.6/svgxuse.min.js" defer></script>
+
+    <!-- CHART.JS CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
+
+    <!-- STATISTICS CHART -->
+    <script src="./script/index.js"></script>
 </body>
 
 </html>
diff --git a/src/script/index.js b/src/script/index.js
@@ -0,0 +1,93 @@
+var chart = document.getElementById("chart").getContext("2d"),
+  gradient = chart.createLinearGradient(0, 0, 0, 350);
+
+gradient.addColorStop(0, "rgba(0, 72, 253, 0.54)");
+gradient.addColorStop(0.5, "rgba(0, 72, 253, 0.24)");
+gradient.addColorStop(1, "rgba(255, 255, 255, 0.5)");
+
+Chart.defaults.global.defaultFontFamily = "Open Sans";
+
+var data = {
+  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+  datasets: [
+    {
+      label: "Income/Expence",
+      backgroundColor: gradient,
+      pointBackgroundColor: "white",
+      borderWidth: 3,
+      borderColor: "#205df9",
+      data: [5, 32, 13, 29, 36, 11, 36]
+    }
+  ]
+};
+
+var options = {
+  responsive: true,
+  maintainAspectRatio: false,
+  animation: {
+    easing: "easeInOutQuad",
+    duration: 520
+  },
+  scales: {
+    xAxes: [
+      {
+        gridLines: {
+          display: false,
+          drawBorder: false
+        },
+        ticks: {
+          display: true,
+          fontStyle: "bold",
+          fontSize: 12
+        }
+      }
+    ],
+    yAxes: [
+      {
+        position: "right",
+        gridLines: {
+          color: "rgba(0, 0, 0, 0.05)",
+          lineWidth: 2,
+          zeroLineColor: "transparent"
+        },
+        ticks: {
+          display: true,
+          fontStyle: "bold",
+          fontSize: 12,
+          beginAtZero: true,
+          callback: function(value) {
+            return "$" + value + "k";
+          },
+          autoSkip: true,
+          maxTicksLimit: 5
+        }
+      }
+    ]
+  },
+  elements: {
+    line: {
+      tension: 0.4
+    }
+  },
+  legend: {
+    display: false
+  },
+  point: {
+    backgroundColor: "blue"
+  },
+  tooltips: {
+    titleFontFamily: "Open Sans",
+    backgroundColor: "rgba(0,0,0,0.4)",
+    titleFontColor: "white",
+    caretSize: 0,
+    cornerRadius: 14,
+    xPadding: 10,
+    yPadding: 10
+  }
+};
+
+var chartInstance = new Chart(chart, {
+  type: "line",
+  data: data,
+  options: options
+});
diff --git a/src/scss/components/_statistics-card.scss b/src/scss/components/_statistics-card.scss
@@ -1,14 +1,3 @@
-// temp mixin
-$stats-gradient: linear-gradient(
-    to bottom,
-    lighten($color-primary, 15),
-    white 55%
-  )
-  no-repeat;
-
-$stats-img: url("../images/png/statistics.png") no-repeat;
-
-// -------------
 .statistics-card {
   width: 100%;
   height: 100%;
@@ -21,40 +10,13 @@ $stats-img: url("../images/png/statistics.png") no-repeat;
   flex-direction: column;
   align-items: baseline;
 
-  &__chart {
-    list-style: none;
-    align-self: stretch;
-
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-
-    // background as area chart :)
-    background: $stats-img, $stats-gradient;
-
-    background-size: 90%;
-    background-position: 0 4rem, 0 0;
-
-    color: $color-primary;
-    font-weight: 800;
-    font-size: 1.2rem;
-  }
-
-  &__amount {
-    &:not(:first-child) {
-      margin-top: 4rem;
-    }
+  &__line-chart {
+      align-self: stretch;
   }
 
-  &__date {
-    width: 92%;
-    align-self: baseline;
-
-    padding-top: 1.5rem;
-    margin-top: 1.4rem;
-    border-top: 1px solid lighten($color-primary, 15);
-
-    display: flex;
-    justify-content: space-between;
+  &__aspect-ratio {
+    height: 23rem;
+    width: 100%;
+    position: relative;
   }
 }
diff --git a/src/scss/layout/_task.scss b/src/scss/layout/_task.scss
@@ -7,7 +7,7 @@
   align-items: stretch;
 
   &__operations {
-    width: 38%;
+    width: 34%;
   }
 
   &__title {
@@ -17,7 +17,7 @@
   }
 
   &__statistics {
-    width: 58%;
+    width: 63%;
     display: flex;
     flex-direction: column;
   }

diff --git a/yarn.lock b/yarn.lock
@@ -575,7 +575,7 @@ [email protected], combined-stream@^1.0.5, combined-stream@~1.0.5:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@^2.2.0, commander@^2.9.0:
+commander@^2.2.0, commander@^2.9.0, commander@~2.15.0:
   version "2.15.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
 
@@ -1396,6 +1396,18 @@ gulp-sass@^4.0.1:
     through2 "^2.0.0"
     vinyl-sourcemaps-apply "^0.2.0"
 
+gulp-uglify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/gulp-uglify/-/gulp-uglify-3.0.0.tgz#0df0331d72a0d302e3e37e109485dddf33c6d1ca"
+  dependencies:
+    gulplog "^1.0.0"
+    has-gulplog "^0.1.0"
+    lodash "^4.13.1"
+    make-error-cause "^1.1.1"
+    through2 "^2.0.0"
+    uglify-js "^3.0.5"
+    vinyl-sourcemaps-apply "^0.2.0"
+
 gulp-util@^3.0.0:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -2114,7 +2126,7 @@ lodash@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
 
-lodash@^4.0.0, lodash@~4.17.4:
+lodash@^4.0.0, lodash@^4.13.1, lodash@~4.17.4:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -2140,6 +2152,16 @@ lru-cache@^4.0.1:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+make-error-cause@^1.1.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/make-error-cause/-/make-error-cause-1.2.2.tgz#df0388fcd0b37816dff0a5fb8108939777dcbc9d"
+  dependencies:
+    make-error "^1.2.0"
+
+make-error@^1.2.0:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.4.tgz#19978ed575f9e9545d2ff8c13e33b5d18a67d535"
+
 make-iterator@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/make-iterator/-/make-iterator-1.0.1.tgz#29b33f312aa8f547c4a5e490f56afcec99133ad6"
@@ -3245,7 +3267,7 @@ source-map@^0.4.2:
   dependencies:
     amdefine ">=0.0.4"
 
-source-map@^0.6.1:
+source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
@@ -3537,6 +3559,13 @@ [email protected]:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
+uglify-js@^3.0.5:
+  version "3.3.27"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.27.tgz#eb8c3c9429969f86ff5b0a2422ffc78c3cea8cc0"
+  dependencies:
+    commander "~2.15.0"
+    source-map "~0.6.1"
+
 ultron@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c"