Skip to content

Commit

Permalink
Merge pull request #1729 from aestoltm/job_viewer_plotly
Browse files Browse the repository at this point in the history 
Integrate Plotly JavaScript for Job Viewer Tab
  • Loading branch information
@aestoltm
aestoltm authored Jul 5, 2023
2 parents f40b817 + 2e6b0ed commit ab1f25f
Show file tree
Hide file tree
Showing 16 changed files with 657 additions and 614 deletions.
18 changes: 16 additions & 2 deletions background_scripts/chrome-helper/chrome-helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,23 @@ const args = require('yargs').argv;

await page.goto('file://' + args['input-file']);

const innerHtml = await page.evaluate(() => document.querySelector('.highcharts-container').innerHTML);
let svgInnerHtml;

console.log(JSON.stringify(innerHtml));
if (args.plotly) {
// Chart traces and axis values svg
let plotlyChart = await page.evaluate(() => document.querySelector('.user-select-none.svg-container').children[0].outerHTML);
// Chart title and axis titles svg
const plotlyLabels = await page.evaluate(() => document.querySelector('.user-select-none.svg-container').children[2].innerHTML);

plotlyChart = plotlyChart.substring(0, plotlyChart.length - 6);
const plotlyImage = plotlyChart + '' + plotlyLabels + '</svg>';
// HTML tags in titles thorw xml not well-formed error
svgInnerHtml = plotlyImage.replace(/<br>|<b>|<\/b>/gm, '');
} else {
svgInnerHtml = await page.evaluate(() => document.querySelector('.highcharts-container').innerHTML);
}

console.log(JSON.stringify(svgInnerHtml));

await browser.close();
})();
93 changes: 6 additions & 87 deletions classes/Rest/Controllers/WarehouseControllerProvider.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1964,106 +1964,25 @@ private function chartDataResponse($data)
*/
private function chartImageResponse($data, $type, $settings)
{
// Enable plot marker only if a single point is present in the data series' plot data.
// Otherwise plot the data with a line.

$markerEnabled = false;

// check the series array passed in from the overall data array:
foreach ($data['series'] as $series) {
// if the series array contains any data array with exactly one element, enable markers
// (a dot for each series' element) so that the plotted data can be seen:
if (isset($series['data']) && count($series['data']) == 1) {
$markerEnabled = true;
break;
}
}

$axisTitleFontSize = ($settings['font_size'] + 12) . 'px';
$axisLabelFontSize = ($settings['font_size'] + 11) . 'px';
$mainTitleFontSize = ($settings['font_size'] + 16) . 'px';

$lineWidth = 1 + $settings['scale'];

$chartConfig = array(
'colors' => array( '#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970',
'#f28f43', '#77a1e5', '#c42525', '#a6c96a'
),
'series' => $data['series'],
'xAxis' => array(
'type' => 'datetime',
'minTickInterval' => 1000,
'labels' => array(
'style' => array(
'fontWeight'=> 'normal',
'fontSize' => $axisLabelFontSize
),
),
'lineWidth' => $lineWidth,
'title' => array(
'style' => array(
'fontWeight' => 'bold',
'fontSize' => $axisTitleFontSize,
'color' => '#5078a0'
),
'text' => 'Time (' . $data['schema']['timezone'] . ')'
)
),
'yAxis' => array(
'title' => array(
'style' => array(
'fontWeight' => 'bold',
'fontSize' => $axisTitleFontSize,
'color' => '#5078a0'
),
'text' => $data['schema']['units']
),
'lineWidth' => $lineWidth,
'labels' => array(
'style' => array(
'fontWeight'=> 'normal',
'fontSize' => $axisLabelFontSize
),
),
'min' => 0.0
),
'legend' => array(
'enabled' => false
),
'plotOptions' => array(
'line' => array(
'lineWidth' => $lineWidth,
'marker' => array(
'enabled' => $markerEnabled
)
)
),
'credits' => array(
'text' => $data['schema']['source'] . '. Powered by XDMoD/Highcharts',
'href' => ''
),
'exporting' => array(
'enabled' => false
),
'title' => array(
'style' => array(
'color' => '#444b6e',
'fontSize' => $mainTitleFontSize
),

'text' => $settings['show_title'] ? $data['schema']['description'] : null
)
'data' => $data,
'axisTickSize' => $axisLabelFontSize,
'axisTitleSize' => $axisTitleFontSize,
'lineWidth' => $lineWidth,
'chartTitleSize' => $mainTitleFontSize
);

if (strpos($data['schema']['units'], '%') !== false) {
$chartConfig['yAxis']['max'] = 100.0;
}

$globalConfig = array(
'timezone' => $data['schema']['timezone']
);

$chartImage = \xd_charting\exportHighchart($chartConfig, $settings['width'], $settings['height'], $settings['scale'], $type, $globalConfig, $settings['fileMetadata']);
$chartImage = \xd_charting\exportHighchart($chartConfig, $settings['width'], $settings['height'], $settings['scale'], $type, $globalConfig, $settings['fileMetadata'], true);
$chartFilename = $settings['fileMetadata']['title'] . '.' . $type;
$mimeOverride = $type == 'svg' ? 'image/svg+xml' : null;

Expand Down
8 changes: 4 additions & 4 deletions composer-el7.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
"ubccr/simplesamlphp-module-authoidcoauth2": "^1.1",
"phpoffice/phpword": "^0.17.0",
"monolog/monolog": "^1.25",
"plotly/plotly": "^1.57.1",
"plotly/plotly": "^2.24.2",
"kassner/log-parser": "~1.5",
"geoip2/geoip2": "~2.0",
"ua-parser/uap-php": "^3.9"
Expand Down Expand Up @@ -211,13 +211,13 @@
"package": {
"name": "plotly/plotly",
"type": "vanilla-plugin",
"version": "1.57.1",
"version": "2.24.2",
"license": "MIT",
"homepage": "https://github.com/plotly/plotly.js",
"dist": {
"url": "https://cdn.plot.ly/plotly-1.57.1.min.js",
"url": "https://cdn.plot.ly/plotly-2.24.2.min.js",
"type": "file",
"shasum": "ccf99902ea104599c3b5b4811e83b8ee8118aad3"
"shasum": "18d8802e7767617cfc23b6008a56581a567c1015"
},
"require": {
"composer/installers": "~1.0"
Expand Down
6 changes: 3 additions & 3 deletions composer-el7.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1587,11 +1587,11 @@
},
{
"name": "plotly/plotly",
"version": "1.57.1",
"version": "2.24.2",
"dist": {
"type": "file",
"url": "https://cdn.plot.ly/plotly-1.57.1.min.js",
"shasum": "ccf99902ea104599c3b5b4811e83b8ee8118aad3"
"url": "https://cdn.plot.ly/plotly-2.24.2.min.js",
"shasum": "18d8802e7767617cfc23b6008a56581a567c1015"
},
"require": {
"composer/installers": "~1.0"
Expand Down
8 changes: 4 additions & 4 deletions composer-el8.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"ubccr/simplesamlphp-module-authoidcoauth2": "^1.1",
"phpoffice/phpword": "^0.17.0",
"monolog/monolog": "^1.25",
"plotly/plotly": "^1.57.1",
"plotly/plotly": "^2.24.2",
"kassner/log-parser": "~1.5",
"geoip2/geoip2": "~2.0",
"ua-parser/uap-php": "^3.9",
Expand Down Expand Up @@ -213,13 +213,13 @@
"package": {
"name": "plotly/plotly",
"type": "vanilla-plugin",
"version": "1.57.1",
"version": "2.24.2",
"license": "MIT",
"homepage": "https://github.com/plotly/plotly.js",
"dist": {
"url": "https://cdn.plot.ly/plotly-1.57.1.min.js",
"url": "https://cdn.plot.ly/plotly-2.24.2.min.js",
"type": "file",
"shasum": "ccf99902ea104599c3b5b4811e83b8ee8118aad3"
"shasum": "18d8802e7767617cfc23b6008a56581a567c1015"
},
"require": {
"composer/installers": "~1.0"
Expand Down
6 changes: 3 additions & 3 deletions composer-el8.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1737,11 +1737,11 @@
},
{
"name": "plotly/plotly",
"version": "1.57.1",
"version": "2.24.2",
"dist": {
"type": "file",
"url": "https://cdn.plot.ly/plotly-1.57.1.min.js",
"shasum": "ccf99902ea104599c3b5b4811e83b8ee8118aad3"
"url": "https://cdn.plot.ly/plotly-2.24.2.min.js",
"shasum": "18d8802e7767617cfc23b6008a56581a567c1015"
},
"require": {
"composer/installers": "~1.0"
Expand Down
4 changes: 3 additions & 1 deletion html/.eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@
"Dashboard": false,
"DashboardStore": false,
"grecaptcha": false,
"StringUtilities": false
"StringUtilities": false,
"Plotly": false,
"generateChartOptions": false
}
}
Loading

0 comments on commit ab1f25f

Please sign in to comment.