Make charts in plugin interactive

[relhajj]

Currently:

• chart is shown as a png (quality is decent but not great)

Goal:

• better quality image -- so text is more clear
• display the charts as interactive .svg's as they are shown in the website (so user will be able to interact w/ the charts)

[snadi]

I think this should be solved when we have the new svg data for the charts.. I just realized that you haven't tried any displaying an svg in java right?

[snadi]

Here is an example svg entry in the DB (the server data will be updated by monday):

 <?xml version='1.0' encoding='utf-8'?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="chart-54adfcce-d401-4e49-b312-0e8918b70ccf" class="pygal-chart" viewBox="0 0 1000 200"><!--Generated with pygal 2.4.0 (lxml) ©Kozea 2012-2016 on 2020-06-08--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-54adfcce-d401-4e49-b312-0e8918b70ccf{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-54adfcce-d401-4e49-b312-0e8918b70ccf{background-color:rgba(249,249,249,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf path,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf rect,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .graph &gt; .background{fill:rgba(249,249,249,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .plot &gt; .background{fill:rgba(255,255,255,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .graph{fill:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf text.no_data{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .title{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .legends .legend text{fill:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .legends .legend:hover text{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .line{stroke:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .guide.line{stroke:rgba(0,0,0,.54)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .major.line{stroke:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis text.major{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y .guides:hover .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .line-graph .axis.x .guides:hover .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .stackedline-graph .axis.x .guides:hover .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .guides:hover text{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .ci{stroke:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .reactive.active,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .ci .reactive.active{stroke-width:1.5}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .series text{fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .label{fill:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .label{fill:rgba(0,0,0,.87)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip .value{font-size:1.5em}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .bound{font-size:.5em}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .max-value{font-size:.75em;fill:rgba(0,0,0,.54)}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .color-0,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .color-0 a:visited{stroke:#F44336;fill:#F44336}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .color-1,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .color-1 a:visited{stroke:#3F51B5;fill:#3F51B5}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .text-overlay .color-0 text{fill:black}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .text-overlay .color-1 text{fill:black}
#chart-54adfcce-d401-4e49-b312-0e8918b70ccf text.no_data{text-anchor:middle}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .guide.line{fill:none}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .centered{text-anchor:middle}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .title{text-anchor:middle}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .legends .legend text{fill-opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.x text{text-anchor:middle}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.x:not(.web) text[transform]{text-anchor:start}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y text{text-anchor:end}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y text[transform].backwards{text-anchor:start}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y2 text{text-anchor:start}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y2 text[transform].backwards{text-anchor:end}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .guide.line{stroke-dasharray:4,4}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .major.guide.line{stroke-dasharray:6,6}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .horizontal .axis.y .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .horizontal .axis.y2 .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .vertical .axis.x .guide.line{opacity:0}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .horizontal .axis.always_show .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y .guides:hover .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.y2 .guides:hover .guide.line,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis.x .guides:hover .guide.line{opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .axis .guides:hover text{opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .nofill{fill:none}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .subtle-fill{fill-opacity:.2}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .dot{stroke-width:1px;fill-opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .dot.active{stroke-width:5px}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .dot.negative{fill:transparent}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf text,#chart-54adfcce-d401-4e49-b312-0e8918b70ccf tspan{stroke:none !important}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .series text.active{opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .tooltip text{fill-opacity:1}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .showable{visibility:hidden}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .showable.shown{visibility:visible}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-54adfcce-d401-4e49-b312-0e8918b70ccf .bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['54adfcce-d401-4e49-b312-0e8918b70ccf'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": false, "fill": false, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 200, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": false, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": false, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": true, "stroke_style": null, "style": {"background": "rgba(249, 249, 249, 1)", "ci_colors": [], "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, .87)", "foreground_strong": "rgba(0, 0, 0, 1)", "foreground_subtle": "rgba(0, 0, 0, .54)", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".7", "opacity_hover": ".8", "plot_background": "rgba(255, 255, 255, 1)", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "150ms", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "Testing", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 1000, "x_label_rotation": 45, "x_labels": null, "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 0, "legends": ["junit4", "testng"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"/></defs><title>Testing</title><g class="graph datetimeline-graph vertical"><rect x="0" y="0" width="1000" height="200" class="background"/><g transform="translate(120, 46)" class="plot"><rect x="0" y="0" width="828.6883117545685" height="73.08831175456858" class="background"/><g class="axis y always_show"><path d="M0.000000 73.088312 h828.688312" class="line"/><g class="guides"><path d="M0.000000 71.682767 h828.688312" class="major guide line"/><text x="-5" y="75.18276729774995" class="major">1</text><title>1</title></g><g class="guides"><path d="M0.000000 66.997619 h828.688312" class="guide line"/><text x="-5" y="70.49761910835453" class="">1.2</text><title>1.2</title></g><g class="guides"><path d="M0.000000 62.312471 h828.688312" class="guide line"/><text x="-5" y="65.81247091895911" class="">1.4</text><title>1.4</title></g><g class="guides"><path d="M0.000000 57.627323 h828.688312" class="guide line"/><text x="-5" y="61.12732272956368" class="">1.6</text><title>1.6</title></g><g class="guides"><path d="M0.000000 52.942175 h828.688312" class="guide line"/><text x="-5" y="56.44217454016826" class="">1.8</text><title>1.8</title></g><g class="guides"><path d="M0.000000 48.257026 h828.688312" class="major guide line"/><text x="-5" y="51.75702635077284" class="major">2</text><title>2</title></g><g class="guides"><path d="M0.000000 43.571878 h828.688312" class="guide line"/><text x="-5" y="47.07187816137741" class="">2.2</text><title>2.2</title></g><g class="guides"><path d="M0.000000 38.886730 h828.688312" class="guide line"/><text x="-5" y="42.386729971982" class="">2.4</text><title>2.4</title></g><g class="guides"><path d="M0.000000 34.201582 h828.688312" class="guide line"/><text x="-5" y="37.70158178258657" class="">2.6</text><title>2.6</title></g><g class="guides"><path d="M0.000000 29.516434 h828.688312" class="guide line"/><text x="-5" y="33.01643359319116" class="">2.8</text><title>2.8</title></g><g class="guides"><path d="M0.000000 24.831285 h828.688312" class="major guide line"/><text x="-5" y="28.331285403795725" class="major">3</text><title>3</title></g><g class="guides"><path d="M0.000000 20.146137 h828.688312" class="guide line"/><text x="-5" y="23.646137214400305" class="">3.2</text><title>3.2</title></g><g class="guides"><path d="M0.000000 15.460989 h828.688312" class="guide line"/><text x="-5" y="18.960989025004892" class="">3.4</text><title>3.4</title></g><g class="guides"><path d="M0.000000 10.775841 h828.688312" class="guide line"/><text x="-5" y="14.275840835609458" class="">3.6</text><title>3.6</title></g><g class="guides"><path d="M0.000000 6.090693 h828.688312" class="guide line"/><text x="-5" y="9.590692646214038" class="">3.8</text><title>3.8</title></g><g class="guides"><path d="M0.000000 1.405544 h828.688312" class="major guide line"/><text x="-5" y="4.9055444568186175" class="major">4</text><title>4</title></g></g><g class="axis x"><path d="M0.000000 0.000000 v73.088312" class="line"/><g class="guides"><path d="M90.974709 0.000000 v73.088312" class="guide line"/><text x="90.97470924864969" y="88.08831175456858" class="" transform="rotate(45 90.974709 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M179.011366 0.000000 v73.088312" class="guide line"/><text x="179.01136560345603" y="88.08831175456858" class="" transform="rotate(45 179.011366 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M266.995557 0.000000 v73.088312" class="guide line"/><text x="266.9955567280151" y="88.08831175456858" class="" transform="rotate(45 266.995557 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M355.032213 0.000000 v73.088312" class="guide line"/><text x="355.0322130828215" y="88.08831175456858" class="" transform="rotate(45 355.032213 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M443.068869 0.000000 v73.088312" class="guide line"/><text x="443.06886943762777" y="88.08831175456858" class="" transform="rotate(45 443.068869 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M531.105526 0.000000 v73.088312" class="guide line"/><text x="531.1055257924342" y="88.08831175456858" class="" transform="rotate(45 531.105526 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M619.089717 0.000000 v73.088312" class="guide line"/><text x="619.0897169169932" y="88.08831175456858" class="" transform="rotate(45 619.089717 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M707.126373 0.000000 v73.088312" class="guide line"/><text x="707.1263732717996" y="88.08831175456858" class="" transform="rotate(45 707.126373 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g><g class="guides"><path d="M795.163030 0.000000 v73.088312" class="guide line"/><text x="795.163029626606" y="88.08831175456858" class="" transform="rotate(45 795.163030 88.088312)">Jun 08, 2020</text><title>Jun 08, 2020</title></g></g><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/></g><g class="titles"><text x="500.0" y="26" class="title plot_title">Testing</text></g><g transform="translate(120, 46)" class="plot overlay"><g class="series serie-0 color-0"><g class="dots"><circle cx="15.949429995149655" cy="1.4055444568186175" r="2.5" class="dot reactive tooltip-trigger"/><desc class="value">Jun 08, 2020: 4</desc><desc class="x ">15.949429995149655</desc><desc class="y ">1.4055444568186175</desc></g></g><g class="series serie-1 color-1"><g class="dots"><circle cx="812.7388817594189" cy="71.68276729774995" r="2.5" class="dot reactive tooltip-trigger"/><desc class="value">Jun 08, 2020: 1</desc><desc class="x left top">812.7388817594189</desc><desc class="y left top">71.68276729774995</desc></g></g></g><g transform="translate(120, 46)" class="plot text-overlay"><g class="series serie-0 color-0"/><g class="series serie-1 color-1"/></g><g transform="translate(120, 46)" class="plot tooltip-overlay"><g transform="translate(0 0)" style="opacity: 0" class="tooltip"><rect rx="0" ry="0" width="0" height="0" class="tooltip-box"/><g class="text"/></g></g><g transform="translate(10, 56)" class="legends"><g id="activate-serie-0" class="legend reactive activate-serie"><rect x="0.0" y="1.0" width="12" height="12" class="color-0 reactive"/><text x="17.0" y="11.2">junit4</text></g><g id="activate-serie-1" class="legend reactive activate-serie"><rect x="0.0" y="22.0" width="12" height="12" class="color-1 reactive"/><text x="17.0" y="32.2">testng</text></g></g><g transform="translate(959, 56)" class="legends"/></g></svg>

[snadi]

I tried reading the svg charts in Java, but the problem is that the python library we are using embeds a js link for the tooltip. Java blocks external links for security reasons. We need to figure out if we can somehow change this on the python side to embed the js code or disable tooltip for the plugin version or if there's a workaround on the Java side for this.

[snadi]

@relhajj can you just document what you tried for this issue and then close it as did not implement?