Highcharts conversion to Plotly JS

.gitignore

@@ -282,7 +282,6 @@ xdmod-*.rpm
 /.sonar/
 external_libraries/
 
-/html/gui/lib/highcharts
 /html/gui/lib/jquery
 /html/gui/lib/jquery-plugins
 /html/gui/lib/moment

CHANGELOG.md

@@ -1,5 +1,23 @@
 # Open XDMoD Change Log
 
+## 2024-XX-XX v11.0.0
+- Important Notes
+    - Open XDMoD is now no longer bundled with any non-commercial licenses. The charting library used in Open XDMoD has changed from [Highcharts](https://www.highcharts.com/) to [Plotly JS](https://plotly.com/javascript/), an open source library. This transition removes the non-commercial license required from the Highcharts library. Please refer to the [license notices](https://open.xdmod.org/10.5/notices.html) for more information about the open source licenses bundled with Open XDMoD.
+- New Features
+    - General
+        - Chart axes are draggable to adjust the chart range. For charts in the Metric Explorer, the axis range can be reset to the default through the axis context menu. For other charts, the chart can be reset to the default by double-clicking.
+        - Rendering support for a subset of HTML tags in a chart's main title. Please refer to the [list](https://plotly.com/javascript/reference/layout/annotations/#layout-annotations-items-annotation-text) of supported HTML tags. Unsupported tags will not render but still display in the title.
+- Uncategorized
+    - Chart Feature Changes
+        - For line charts, the context menu for a data series is brought up by clicking on its points, not its lines. As before, the context menu can also be brought up by clicking on it in the legend.
+        - The button for resetting the chart zoom in Metric Explorer charts appears in the chart context menus instead of a button on the chart. Resetting the chart zoom for charts in all other tabs now requires a double click on the plotting area instead of a button on the chart.
+    - Chart Features Temporarily Removed
+        - The ability to change the layering order for charts with multiple axes.
+        - Hover animations.
+        - Shadow.
+    - Known Issues
+        - Charts exported as images can have legend displacement based on the chart size. The current workaround is to make the exported chart larger until the legend fits. Customizing legend entry names to be shorter may also help.
+        - Chart legend double-click feature is disabled due to an interaction with legend single-click events.
 ## 2023-09-11 v10.5.0
 - Bug Fixes
     - Cloud

NOTICE

@@ -16,10 +16,10 @@ License: MIT license
 Author:  jQuery Foundation and other contributors
 Link:    http://jquery.com/
 
-Name:    Highcharts
-License: Creative Commons Attribution-NonCommercial 3.0
-Author:  Torstein Hønsi
-Link:    http://www.highcharts.com/
+Name:    Plotly.js
+License: MIT license
+Author:  Plotly, Inc.
+Link:    https://github.com/plotly/plotly.js
 
 Name:    RSVP.js
 License: MIT license

background_scripts/chrome-helper/chrome-helper.js

@@ -20,23 +20,18 @@ const args = require('yargs').argv;
 
     await page.goto('file://' + args['input-file']);
 
-    let svgInnerHtml;
-
-    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);
-    }
+    // Chart traces and axis values svg
+    let chart = await page.evaluate(() => document.querySelector('.user-select-none.svg-container').children[0].outerHTML);
+    // Chart title and axis titles svg
+    const chartLabels = await page.evaluate(() => document.querySelector('.user-select-none.svg-container').children[2].innerHTML);
+
+    chart = chart.substring(0, chart.length - 6);
+    let svg = chart + '' + chartLabels + '</svg>';
+
+    // Unencoded HTML tags throw xml not well-formed error
+    svg = svg.replace(/data-unformatted="(.*?)"/g, (str) => str.replace(/>/g, '&gt;').replace(/</g, '&lt;'));
 
-    console.log(JSON.stringify(svgInnerHtml));
+    console.log(JSON.stringify(svg));
 
     await browser.close();
 })();

classes/DataWarehouse/Access/Common.php

@@ -299,7 +299,7 @@ protected function exportImage($returnData, $width, $height, $scale, $format, $f
 
             $result = array(
                 "headers" => array( "Content-Type" => "image/png"),
-                "results" => \xd_charting\exportHighchart($returnData, '148', '69', 2, 'png')
+                "results" => \xd_charting\exportChart($returnData, '148', '69', 2, 'png')
             );
 
             return $result;
@@ -312,7 +312,7 @@ protected function exportImage($returnData, $width, $height, $scale, $format, $f
 
             $result = array( 
                 "headers" => array( "Content-Type" => "image/png"),
-                "results" => \xd_charting\exportHighchart($returnData, $width, $height, $scale, 'png')
+                "results" => \xd_charting\exportChart($returnData, $width, $height, $scale, 'png')
             );
 
             return $result;
@@ -329,7 +329,7 @@ protected function exportImage($returnData, $width, $height, $scale, $format, $f
 
             $result = array(
                 "headers" => \DataWarehouse\ExportBuilder::getHeader( $format, false, $filename),
-                "results" => \xd_charting\exportHighchart($returnData['data'][0], $width, $height, $scale, $format, null, $fileMeta)
+                "results" => \xd_charting\exportChart($returnData['data'][0], $width, $height, $scale, $format, null, $fileMeta)
             );
 
             return $result;
@@ -338,7 +338,7 @@ protected function exportImage($returnData, $width, $height, $scale, $format, $f
         {
             $result = array(
                 "headers" => \DataWarehouse\ExportBuilder::getHeader( $format, false, $filename),
-                "results" => 'data:image/png;base64,'.base64_encode(\xd_charting\exportHighchart($returnData['data'][0], $width, $height, $scale, 'png'))
+                "results" => 'data:image/png;base64,'.base64_encode(\xd_charting\exportChart($returnData['data'][0], $width, $height, $scale, 'png'))
             );
             return $result;
 
@@ -348,7 +348,7 @@ protected function exportImage($returnData, $width, $height, $scale, $format, $f
             $result = array(
                 "headers" => \DataWarehouse\ExportBuilder::getHeader( $format, false, $filename),
                 "results" => 'data:image/svg+xml;base64,' . base64_encode(
-                    \xd_charting\exportHighchart( $returnData['data'][0], $width, $height, $scale, 'svg'))
+                    \xd_charting\exportChart( $returnData['data'][0], $width, $height, $scale, 'svg'))
                 );
 
             return $result;

classes/DataWarehouse/Access/MetricExplorer.php

@@ -88,10 +88,10 @@ public function get_data($user)
             ? '\DataWarehouse\Data\TimeseriesDataset'
             : '\DataWarehouse\Data\SimpleDataset';
 
-        $highchart_classname
+        $chart_classname
             = $timeseries
-            ? '\DataWarehouse\Visualization\HighChartTimeseries2'
-            : '\DataWarehouse\Visualization\HighChart2';
+            ? '\DataWarehouse\Visualization\TimeseriesChart'
+            : '\DataWarehouse\Visualization\AggregateChart';
 
         $filename = $this->getFilename();
         $filenameSpecifiedInRequest = $filename !== null;
@@ -159,7 +159,7 @@ public function get_data($user)
 
             $font_size = $this->getFontSize();
 
-            $hc = new $highchart_classname(
+            $chart = new $chart_classname(
                 $aggregation_unit,
                 $start_date,
                 $end_date,
@@ -176,13 +176,12 @@ public function get_data($user)
             );
 
             if ($show_title) {
-                $hc->setTitle($title, $font_size);
+                $chart->setTitle($title, $font_size);
             }
 
             // Called before and after configure.
-            $hc->setLegend($legend_location, $font_size);
-
-            $hc->configure(
+            $chart->setLegend($legend_location, $font_size);
+            $chart->configure(
                 $data_series,
                 $x_axis,
                 $y_axis,
@@ -195,9 +194,9 @@ public function get_data($user)
                 $showRemainder
             );
 
-            $hc->setLegend($legend_location, $font_size);
+            $chart->setLegend($legend_location, $font_size);
 
-            $returnData = $hc->exportJsonStore($limit, $offset);
+            $returnData = $chart->exportJsonStore($limit, $offset);
 
             $requestDescripter = new \User\Elements\RequestDescripter($this->request);
             $chartIdentifier = $requestDescripter->__toString();
@@ -211,7 +210,7 @@ public function get_data($user)
             $returnData['data'][0]['reportGeneratorMeta'] = array(
                 'chart_args'         => $chartIdentifier,
                 'title'              => $title,
-                'params_title'       => $hc->getSubtitleText(),
+                'params_title'       => $chart->getSubtitleText(),
                 'start_date'         => $start_date,
                 'end_date'           => $end_date,
                 'included_in_report' => $includedInReport ? 'y' : 'n',