migrate dashboard chart from Raphael to Chartist (#406)

Use the same chart library and UI as it is used in Statify now.
Doing so, we migrate the graphics library from Raphaël to Chartist with
a tooltips plugin and adjust the wrapper script and styling accordingly.

Including CSS and tooltips plugin, Chartist is about 50KB of size
compared to 96KB for Raphaël.

.eslintrc.json

@@ -5,7 +5,7 @@
     "jquery": true
   },
   "globals": {
-    "Raphael": "readonly",
+    "Chartist": "readonly",
     "getAnchors": "readonly"
   },
   "rules": {

antispam_bee.php

@@ -810,14 +810,26 @@ public static function add_dashboard_chart() {
 	public static function add_dashboard_style() {
 		$plugin = get_plugin_data( __FILE__ );
 
+		wp_register_style(
+			'chartist_css',
+			plugins_url( '/css/chartist.min.css', __FILE__ ),
+			array(),
+			'1.3.0'
+		);
+		wp_register_style(
+			'chartist_tooltip_css',
+			plugins_url( '/css/chartist-plugin-tooltip.min.css', __FILE__ ),
+			array(),
+			'1.0.0'
+		);
 		wp_register_style(
 			'ab_chart',
 			plugins_url( 'css/dashboard.min.css', __FILE__ ),
 			array(),
 			$plugin['Version']
 		);
 
-		wp_print_styles( 'ab_chart' );
+		wp_print_styles( array( 'chartist_css', 'chartist_tooltip_css', 'ab_chart' ) );
 	}
 
 
@@ -835,25 +847,25 @@ public static function add_dashboard_script() {
 		$plugin = get_plugin_data( __FILE__ );
 
 		wp_enqueue_script(
-			'raphael',
-			plugins_url( 'js/raphael.min.js', __FILE__ ),
+			'chartist_js',
+			plugins_url( 'js/chartist.min.js', __FILE__ ),
 			array(),
-			'2.1.0',
+			'1.3.0',
 			true
 		);
 
 		wp_enqueue_script(
-			'ab-raphael',
-			plugins_url( 'js/raphael.helper.min.js', __FILE__ ),
-			array( 'raphael' ),
-			$plugin['Version'],
+			'chartist_tooltip_js',
+			plugins_url( 'js/chartist-plugin-tooltip.min.js', __FILE__ ),
+			array( 'chartist_js' ),
+			'1.0.0',
 			true
 		);
 
 		wp_enqueue_script(
 			'ab_chart_js',
 			plugins_url( 'js/dashboard.min.js', __FILE__ ),
-			array( 'jquery', 'ab-raphael' ),
+			array( 'jquery', 'chartist_js' ),
 			$plugin['Version'],
 			true
 		);

composer.json

@@ -69,7 +69,7 @@
       "npx stylelint css/dashboard.css css/styles.css"
     ],
     "lint-js": [
-      "npx eslint js/dashboard.js js/raphael.helper.js js/scripts.js"
+      "npx eslint js/dashboard.js js/scripts.js"
     ],
     "lint-php": [
       "phpcs --standard=phpcs.xml -s"
@@ -78,7 +78,6 @@
       "minifycss css/dashboard.css > css/dashboard.min.css",
       "minifycss css/styles.css > css/styles.min.css",
       "minifyjs js/dashboard.js > js/dashboard.min.js",
-      "minifyjs js/raphael.helper.js > js/raphael.helper.min.js",
       "minifyjs js/scripts.js > js/scripts.min.js"
     ]
   }

css/dashboard.css

@@ -1,10 +1,50 @@
 #ab_chart {
 	color: #a7aaad;
+	flex: 0 0 100%;
+	direction: rtl;
 	height: 140px;
 	margin: 0 -4px;
+	overflow-x: auto;
+	overflow-y: hidden;
 	text-align: center;
 }
 
+#ab_chart .ct-label.ct-vertical.ct-start {
+	justify-content: flex-start;
+	text-align: left;
+	text-anchor: start;
+}
+
+#ab_chart .ct-line {
+	stroke: #3582c4;
+	stroke-width: 2px;
+}
+
+#ab_chart .ct-point {
+	fill: #fff;
+	stroke: #3582c4;
+	stroke-width: 1.5px;
+}
+
+#ab_chart .ct-area {
+	fill: #3582c4;
+}
+
+.ab-chartist-tooltip {
+	border: 1px solid #000;
+	background-color: #fff;
+	border-radius: 0.2em;
+	padding: 0.1em 0.5em;
+}
+
+.ab-chartist-tooltip::before {
+	border-top-color: #0009;
+}
+
+.ab-chartist-tooltip .chartist-tooltip-meta {
+	color: #3582c4;
+}
+
 #ab_chart_data {
 	display: none;
 }