Switch charts library to Chartist

.gitignore

@@ -1 +1,3 @@
 /vendor/
+*.min.css
+*.min.js

CHANGELOG.md

@@ -4,10 +4,11 @@ All notable changes to this WordPress plugin will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Unreleased
+## Version 1.1
 
 ### Changed
 * Code compliant to WordPress Coding Standards, ensured via Travis build
+* Switched charts library
 
 
 ## Version 1.0

assets/functions.js

@@ -0,0 +1,128 @@
+function exportTableToCSV($table, filename) {
+	var tmpColDelim = String.fromCharCode(11), tmpRowDelim = String.fromCharCode(0), // Temporary delimiters unlikely to be typed by keyboard to avoid accidentally splitting the actual contents
+	colDelim = '","', rowDelim = '"\r\n"', // actual delimiters for CSV
+	$rows = $table.find('tr'),
+	csv = '"' + $rows.map(function(i, row) {
+		var $row = jQuery(row), $cols = $row.find('td,th');
+		return $cols.map(function(j, col) {
+			var $col = jQuery(col), text = $col.text();
+			return text.replace(/"/g, '""'); // escape double quotes
+		}).get().join(tmpColDelim);
+	}).get().join(tmpRowDelim).split(tmpRowDelim)
+			.join(rowDelim).split(tmpColDelim)
+			.join(colDelim) + '"',
+	csvData = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csv);
+	jQuery(this).attr({
+		'download' : filename,
+		'href' : csvData
+	});
+}
+
+function posts_and_users_stats_bar_chart(div, xData, yData, xAxisTitle, yAxisTitle) {
+    var data = {
+        labels: xData,
+    	series: [
+        	yData
+		]
+	};
+
+    var options = {
+        seriesBarDistance: 20,
+        chartPadding: {
+            top: 20,
+            right: 30,
+            bottom: 30,
+            left: 30
+        },
+        axisY: {
+            onlyInteger: true
+        },
+        plugins: [
+            Chartist.plugins.ctAxisTitle({
+                axisX: {
+                    axisTitle: xAxisTitle,
+                    axisClass: 'ct-axis-title ct-x-axis-title',
+                    offset: {
+                        x: 0,
+                        y: 40
+                    },
+                    textAnchor: 'middle'
+                },
+                axisY: {
+                    axisTitle: yAxisTitle,
+                    axisClass: 'ct-axis-title ct-y-axis-title',
+                    offset: {
+                        x: 0,
+                        y: 25
+                    },
+                    flipTitle: true
+                }
+            })
+        ]
+    };
+
+    var responsiveOptions = [
+        ['screen and (max-width: 640px)', {
+            seriesBarDistance: 5,
+            axisX: {
+                labelInterpolationFnc: function (value) {
+                    return value[0];
+                }
+            }
+        }]
+    ];
+
+    new Chartist.Bar(div, data, options, responsiveOptions);
+}
+
+function posts_and_users_stats_time_line_chart(div, seriesData, dateFormat, xAxisTitle, yAxisTitle) {
+    var data = {
+        series: [
+            {
+                name: 'series-1',
+                data: seriesData
+            }
+        ]
+    };
+
+    var options = {
+        chartPadding: {
+            top: 20,
+            right: 30,
+            bottom: 30,
+            left: 30
+        },
+        axisX: {
+            type: Chartist.FixedScaleAxis,
+            divisor: 5,
+            labelInterpolationFnc: function(value) {
+                return moment(value).format(dateFormat);
+            }
+        },
+        lineSmooth: Chartist.Interpolation.step(),
+        plugins: [
+            Chartist.plugins.ctAxisTitle({
+                axisX: {
+                    axisTitle: xAxisTitle,
+                    axisClass: 'ct-axis-title ct-x-axis-title',
+                    offset: {
+                        x: 0,
+                        y: 40
+                    },
+                    textAnchor: 'middle'
+                },
+                axisY: {
+                    axisTitle: yAxisTitle,
+                    axisClass: 'ct-axis-title ct-y-axis-title',
+                    offset: {
+                        x: 0,
+                        y: 25
+                    },
+                    flipTitle: true
+                }
+            })
+        ]
+    };
+
+    new Chartist.Line(div, data, options)
+}

assets/style.css

@@ -0,0 +1,47 @@
+@charset "UTF-8";
+
+.posts-and-users-stats nav li {
+    display: inline;
+}
+
+.posts-and-users-stats section {
+    margin-bottom: 3em;
+}
+
+.posts-and-users-stats legend {
+    margin: .5em 0;
+    font-weight: bold;
+}
+
+.posts-and-users-stats .chart {
+    margin: 1em 0;
+}
+
+.posts-and-users-stats table {
+    border-collapse: collapse;
+    clear: both;
+}
+
+.posts-and-users-stats tr:nth-child(2n) {
+    background: #ddd;
+}
+
+.posts-and-users-stats th, .posts-and-users-stats td {
+    padding: .7em;
+    vertical-align: top;
+}
+
+.posts-and-users-stats .number {
+    text-align: right;
+}
+
+.posts-and-users-stats .chart-container {
+    background: #fff;
+    margin: 1em 0;
+}
+
+.posts-and-users-stats .chart-title {
+    text-align: center;
+    font-size: 1.5em;
+    padding: 0.5em 0;
+}

composer.json

@@ -15,7 +15,10 @@
     "source": "https://github.com/patrickrobrecht/posts-and-users-stats"
   },
   "require": {
-    "php": "^5.6|^7"
+    "php": "^5.6|^7",
+    "npm-asset/chartist": "^0.11.0",
+    "npm-asset/chartist-plugin-axistitle": "^0.0.5",
+    "npm-asset/moment": "^2.21.0"
   },
   "require-dev": {
     "dealerdirect/phpcodesniffer-composer-installer": "^0.4",
@@ -25,6 +28,12 @@
     "wimg/php-compatibility": "^8.0",
     "wp-coding-standards/wpcs": "^0.14"
   },
+  "repositories": [
+    {
+      "type": "composer",
+      "url": "https://asset-packagist.org"
+    }
+  ],
   "scripts": {
     "post-install-cmd": [
       "@build"
@@ -33,13 +42,30 @@
       "@build"
     ],
     "build": [
-      "@cs"
+      "@cs",
+      "@copy-assets",
+      "@minify"
+    ],
+    "copy-assets": [
+      "SlowProg\\CopyFile\\ScriptHandler::copy"
     ],
     "cs": [
       "phpcs --standard=phpcs.xml -s"
     ],
     "csfix": [
       "phpcbf --standard=phpcs.xml"
+    ],
+    "minify": [
+      "minifycss assets/style.css > assets/style.min.css",
+      "minifyjs assets/functions.js > assets/functions.min.js"
     ]
+  },
+  "extra": {
+    "copy-file": {
+      "vendor/npm-asset/chartist/dist/chartist.min.css": "lib/",
+      "vendor/npm-asset/chartist/dist/chartist.min.js": "lib/",
+      "vendor/npm-asset/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.min.js": "lib/",
+      "vendor/npm-asset/moment/min/moment.min.js": "lib/"
+    }
   }
 }