nicolaskruchten / pivottable

Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
https://pivottable.js.org/
MIT License
4.35k stars 1.08k forks source link

Specifying style (line width, dash) when rendering using plotly #1098

Open EricRossC opened 5 years ago

EricRossC commented 5 years ago

Hi!

Do you know if it's possible to specify a special style (line width, dashing, etc) for one "series" of data? For example, in the image I'd like to draw the yellow line as a thicker line.

image

Any way to pass extra infor in plotly_renderers.js somewhere?

Thanks!

EricRossC commented 5 years ago

Well, for now I did the following hack:

Index: dist/pivot.js
===================================================================
--- dist/pivot.js   (revision 852)
+++ dist/pivot.js   (working copy)
@@ -651,6 +651,9 @@
         this.filter = (ref9 = opts.filter) != null ? ref9 : (function() {
           return true;
         });
+        this.plotlyTraceDecorator = (ref9 = opts.plotlyTraceDecorator) != null ? ref9 : (function(traceKey, trace) {
+          return trace;
+        });
         this.tree = {};
         this.rowKeys = [];
         this.colKeys = [];
Index: dist/plotly_renderers.js
===================================================================
--- dist/plotly_renderers.js    (revision 852)
+++ dist/plotly_renderers.js    (working copy)
@@ -68,6 +68,7 @@
             trace.x = transpose ? values : labels;
             trace.y = transpose ? labels : values;
           }
+          pivotData.plotlyTraceDecorator(traceKey, trace);
           return $.extend(trace, traceOptions);
         });
         if (transpose) {

So in my code I can write:

$target.pivot(data, {
    ......
    renderer: $.pivotUtilities.plotly_renderers["Line Chart"],
    rendererOptions: { 
        ......
    },
    plotlyTraceDecorator: function(traceKey, trace) {
        traceKey = traceKey[0];
        if (traceKey.includes("-91-")) {
            console.log(traceKey, trace);
            trace.line = { color: '#002C4E', width: '3', dash: 'dot' };
        }
    }
});

The result is:

image