Add shortcode for contributors chart

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

web/wp-content/themes/cncf-twenty-two/includes/shortcodes/project-charts.php

@@ -2,9 +2,6 @@
 /**
  * Project Chart Shortcodes
  *
- * Usage:
- * [projects stage="graduated|incubating|sandbox"]
- *
  * @package WordPress
  * @subpackage cncf-theme
  * @since 1.0.0
@@ -336,3 +333,70 @@ function add_project_moves_chart_shortcode( $atts ) {
 	return $block_content;
 }
 add_shortcode( 'project-moves-chart', 'add_project_moves_chart_shortcode' );
+
+
+/**
+ * Add Contributors chart shortcode.
+ *
+ * @param array $atts Attributes.
+ */
+function add_contributors_chart_shortcode( $atts ) {
+	$data = wp_remote_post(
+		'https://devstats.cncf.io/api/v1',
+		array(
+			'headers'     => array( 'Content-Type' => 'application/json; charset=utf-8' ),
+			'body'        => '{"api":"CumulativeCounts","payload":{"project":"all","metric":"contributors"}}',
+			'method'      => 'POST',
+			'data_format' => 'body',
+		)
+	);
+
+	if ( is_wp_error( $data ) || ( wp_remote_retrieve_response_code( $data ) !== 200 ) ) {
+		return;
+	}
+
+	$remote_body = json_decode( wp_remote_retrieve_body( $data ) );
+
+	if ( ! ( isset( $remote_body->timestamps ) && isset( $remote_body->values ) ) ) {
+		return;
+	}
+	$timestamps = $remote_body->timestamps;
+	$contributors_months = array();
+	foreach ( $timestamps as $m ) {
+		$contributors_months[] = gmdate( 'M, Y', strtotime( $m ) );
+	}
+
+	$values     = $remote_body->values;
+
+	ob_start();
+
+	// chart js.
+	wp_enqueue_script(
+		'chart-js',
+		get_template_directory_uri() . '/source/js/libraries/chart-3.9.1.min.js',
+		null,
+		filemtime( get_template_directory() . '/source/js/libraries/chart-3.9.1.min.js' ),
+		true
+	);
+	// custom script.
+	wp_enqueue_script(
+		'contributors-chart',
+		get_template_directory_uri() . '/source/js/on-demand/contributors-chart.js',
+		array( 'jquery', 'chart-js' ),
+		filemtime( get_template_directory() . '/source/js/on-demand/contributors-chart.js' ),
+		true
+	);
+	?>
+<div class="projects-chart-container">
+	<canvas id="contributorsChart"></canvas>
+</div>
+<script>
+	const contributors_months = <?php echo json_encode( $contributors_months ); ?>;
+	const contributors_counts = <?php echo json_encode( $values ); ?>;
+</script>
+
+	<?php
+	$block_content = ob_get_clean();
+	return $block_content;
+}
+add_shortcode( 'contributors-chart', 'add_contributors_chart_shortcode' );

web/wp-content/themes/cncf-twenty-two/source/js/on-demand/contributors-chart.js

@@ -0,0 +1,91 @@
+/** // phpcs:ignoreFile
+ * Contributors chart code
+ *
+ * @package WordPress
+ * @since 1.0.0
+ */
+
+/* eslint-disable no-undef */
+/* eslint-disable no-unused-vars */
+/* eslint-disable array-callback-return */
+/* eslint-disable no-var */
+
+function ready( fn ) {
+  if ( document.readyState !== "loading" ) {
+    fn();
+  } else {
+    document.addEventListener( "DOMContentLoaded",fn );
+  }
+}
+
+ready( function () {
+  contributorsChart();
+} );
+
+function contributorsChart() {
+
+  const ctx = document.getElementById('contributorsChart').getContext('2d');
+
+  const labels = contributors_months;
+  const data = {
+    labels: labels,
+    datasets: [
+      {
+        label: 'Contributors',
+        data: contributors_counts,
+        borderColor: '#0175e4',
+        backgroundColor: '#0175e4',
+        fill: true
+      }
+    ]
+  };
+
+  Chart.defaults.font.size = 16;
+  Chart.defaults.font.weight = 600;
+  Chart.defaults.color = '#000';
+  Chart.defaults.font.family = 'Clarity City';
+
+  const config = {
+    type: 'line',
+    data: data,
+    options: {
+      layout: {
+        padding: {
+          top: 20,
+          bottom: 20
+        }
+      },
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          mode: 'index'
+        },
+      },
+      interaction: {
+        mode: 'nearest',
+        axis: 'x',
+        intersect: false
+      },
+      pointRadius: 0,
+      scales: {
+        y: {
+          stacked: true,
+          title: {
+            display: true,
+            text: 'CNCF Project Contributors'
+          }
+        },
+        x: {
+          grid: {
+            display: false
+          }
+        }
+      }
+    }
+  };
+  const myChart = new Chart(ctx, config );
+}