mirror of https://github.com/cncf/cncf.io.git
Add shortcode for contributors chart
Signed-off-by: Chris Abraham <cjyabraham@gmail.com>
This commit is contained in:
Chris Abraham
parent
aa461d6eb8
commit
b15c6f31fc
|
|
@ -2,9 +2,6 @@
|
||||||
/**
|
/**
|
||||||
* Project Chart Shortcodes
|
* Project Chart Shortcodes
|
||||||
*
|
*
|
||||||
* Usage:
|
|
||||||
* [projects stage="graduated|incubating|sandbox"]
|
|
||||||
*
|
|
||||||
* @package WordPress
|
* @package WordPress
|
||||||
* @subpackage cncf-theme
|
* @subpackage cncf-theme
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
|
|
@ -336,3 +333,70 @@ function add_project_moves_chart_shortcode( $atts ) {
|
||||||
return $block_content;
|
return $block_content;
|
||||||
}
|
}
|
||||||
add_shortcode( 'project-moves-chart', 'add_project_moves_chart_shortcode' );
|
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' );
|
||||||
|
|
|
||||||
|
|
@ -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 );
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue