Skip to content

Commit

Permalink
Relocate inline JS code in graph plugin to separate file
Browse files Browse the repository at this point in the history 
Fixes #21669
  • Loading branch information
@syncguru @vboctor
syncguru authored and vboctor committed Oct 20, 2016
1 parent b10babe commit 0d00ae9
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 106 deletions.
86 changes: 86 additions & 0 deletions plugins/MantisGraph/MantisGraph.js
View file
@@ -0,0 +1,86 @@
$(document).ready( function() {
$("canvas[id^='barchart']").each( function() {
new Chart( $(this), {
type: 'bar',
data: {
labels: $(this).data('labels'),
datasets: [{
label: '# of issues',
data: $(this).data('values'),
backgroundColor: 'rgba(252, 189, 189, 0.2)',
borderColor: 'rgba(252, 189, 189, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});

$("canvas[id^='piechart']").each( function() {
new Chart( $(this), {
type: 'pie',
data: {
labels: $(this).data('labels'),
datasets: [{
label: '# of issues',
data: $(this).data('values'),
backgroundColor: $(this).data('background-colors'),
borderColor: $(this).data('border-colors'),
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});

$("canvas[id^='linebydate']").each( function() {
var ctx = $(this).get(0).getContext("2d");
new Chart(ctx, {
type: 'line',
data: {
labels: $(this).data('labels'),
datasets: [
{
label: $(this).data('opened-label'),
backgroundColor: 'rgba(255, 158, 158, 0.5)',
data: $(this).data('opened-values')
},
{
label: $(this).data('resolved-label'),
backgroundColor: 'rgba(49, 196, 110, 0.5)',
data: $(this).data('resolved-values')
},
{
label: $(this).data('still-open-label'),
backgroundColor: 'rgba(255, 0, 0, 1)',
data: $(this).data('still-open-values')
},]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
});
});
1 change: 1 addition & 0 deletions plugins/MantisGraph/MantisGraph.php
View file
Expand Up @@ -113,6 +113,7 @@ function resources() {
html_javascript_link( 'chart-' . CHARTJS_VERSION . '.min.js' );
html_javascript_link( 'chart.bundle-' . CHARTJS_VERSION . '.min.js' );
}
html_javascript_link( '../plugins/MantisGraph/MantisGraph.js' );
}

/**
Expand Down
131 changes: 25 additions & 106 deletions plugins/MantisGraph/core/graph_api.php
View file
Expand Up @@ -69,7 +69,7 @@ function graph_numeric_array( array $p_values ) {
* @return string The rgba with the surrounding single quotes, 'rgba(252, 189, 189, 0.2)'
*/
function graph_color_to_rgba( $p_color, $p_alpha ) {
$t_rgba = "'rgba(";
$t_rgba = '"rgba(';

if ( $p_color[0] == '#' ) {
$t_color = substr( $p_color, 1 );
Expand All @@ -80,7 +80,7 @@ function graph_color_to_rgba( $p_color, $p_alpha ) {
$t_rgba .= intval( $t_color[0] . $t_color[1], 16 ) . ', ';
$t_rgba .= intval( $t_color[2] . $t_color[3], 16 ) . ', ';
$t_rgba .= intval( $t_color[4] . $t_color[5], 16 ) . ', ';
$t_rgba .= $p_alpha . ")'";
$t_rgba .= $p_alpha . ')"';

return $t_rgba;
}
Expand Down Expand Up @@ -143,40 +143,11 @@ function graph_bar( array $p_metrics, $p_title = '', $p_series_name, $p_color =
$t_values = array_values( $p_metrics );
$t_js_values = graph_numeric_array( $t_values );

$t_colors = array( $p_color );
$t_background_colors = graph_colors_to_rgbas( $t_colors, 0.2 );
$t_border_colors = graph_colors_to_rgbas( $t_colors, 1 );

echo <<<EOT
<canvas id="barchart{$s_id}" width="500" height="400"></canvas>
<script>
$(document).ready( function() {
var ctx = document.getElementById("barchart{$s_id}");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [{$t_js_labels}],
datasets: [{
label: '{$p_series_name}',
data: [{$t_js_values}],
backgroundColor: {$t_background_colors},
borderColor: {$t_border_colors},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>
EOT;
?>
<canvas id="barchart<?php echo $s_id ?>" width="500" height="400"
data-labels="[<?php echo htmlspecialchars( $t_js_labels, ENT_QUOTES ) ?>]"
data-values="[<?php echo $t_js_values ?>]" />
<?php
}

/**
Expand All @@ -200,37 +171,13 @@ function graph_pie( array $p_metrics, $p_title = '' ) {
$t_colors = graph_status_colors_to_colors();
$t_background_colors = graph_colors_to_rgbas( $t_colors, 0.2 );
$t_border_colors = graph_colors_to_rgbas( $t_colors, 1 );

echo <<<EOT
<canvas id="piechart{$s_id}" width="500" height="400"></canvas>
<script>
$(document).ready( function() {
var ctx = document.getElementById("piechart{$s_id}");
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [{$t_js_labels}],
datasets: [{
label: '# of issues',
data: [{$t_js_values}],
backgroundColor: [{$t_background_colors}],
borderColor: [{$t_border_colors}],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>
EOT;
?>
<canvas id="piechart<?php echo $s_id ?>" width="500" height="400"
data-labels="[<?php echo htmlspecialchars( $t_js_labels, ENT_QUOTES ) ?>]"
data-values="[<?php echo $t_js_values ?>]"
data-background-colors="[<?php echo htmlspecialchars( $t_background_colors, ENT_QUOTES ) ?>]"
data-border-colors="[<?php echo htmlspecialchars( $t_border_colors, ENT_QUOTES ) ?>]" />
<?php
}

/**
Expand Down Expand Up @@ -265,45 +212,17 @@ function graph_cumulative_bydate( array $p_metrics ) {
$t_legend_resolved = plugin_lang_get( 'legend_resolved' );
$t_legend_still_open = plugin_lang_get( 'legend_still_open' );

echo <<<EOT
<canvas id="linebydate{$s_id}" width="500" height="400"></canvas>
<script type="text/javascript">
$(document).ready( function() {
var ctx = $("#linebydate{$s_id}").get(0).getContext("2d");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{$t_js_labels}],
datasets: [
{
label: '{$t_legend_opened}',
backgroundColor: "rgba(255, 158, 158, 0.5)",
data: [{$t_opened_values}]
},
{
label: '{$t_legend_resolved}',
backgroundColor: "rgba(49, 196, 110, 0.5)",
data: [{$t_resolved_values}]
},
{
label: '{$t_legend_still_open}',
backgroundColor: "rgba(255, 0, 0, 1)",
data: [{$t_still_open_values}]
}, ]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
});
</script>
EOT;
?>
<canvas id="linebydate<?php echo $s_id ?>" width="500" height="400"
data-labels="[<?php echo htmlspecialchars( $t_js_labels, ENT_QUOTES ) ?>]"
data-opened-label="<?php echo $t_legend_opened ?>"
data-opened-values="[<?php echo $t_opened_values ?>]"
data-resolved-label="<?php echo $t_legend_resolved ?>"
data-resolved-values="[<?php echo $t_resolved_values ?>]"
data-still-open-label="<?php echo $t_legend_still_open ?>"
data-still-open-values="[<?php echo $t_still_open_values ?>]" />
<?php

}

/**
Expand Down

0 comments on commit 0d00ae9

Please sign in to comment.