nicolaskruchten / jupyter_pivottablejs

Drag’n’drop Pivot Tables and Charts for Jupyter/IPython Notebook, care of PivotTable.js
http://nicolas.kruchten.com/content/2015/09/jupyter_pivottablejs/
Other
687 stars 88 forks source link

Hide Totals column/row? #30

Closed tomioueda closed 7 years ago

tomioueda commented 7 years ago

Hi

https://github.com/nicolaskruchten/pivottable/wiki/Frequently-Asked-Questions#totals

I'd like to be able to hide the totals column/row using this python module and as answered in the link above. How would one go about doing this?

nicolaskruchten commented 7 years ago

Unfortunately this level of control is not available within Jupyter at the moment, I'm sorry.

tomioueda commented 7 years ago

Ah, I meant within a Python script outside of Jupyter. I have a Python script that uses this module to render an html to a file which I then throw over to an Apache server I've made. The resulting html output file still contains a Totals column/row that I'd like to hide from users.

nicolaskruchten commented 7 years ago

Ah, neat hack! To be more precise, though, the Python integration doesn't really have any hooks for this level of control. If you want to get your hands dirty you can always insert the CSS from that FAQ entry into the HTML file you're throwing over to Apache :)

tomioueda commented 7 years ago

I apologize but my HTML/CSS skills are not very good :(

I was wondering where I would add .pvtTotal, .pvtTotalLabel, .pvtGrandTotal {display: none} to the CSS in this example html output from pivot_ui(outfile_path='example.html'):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PivotTable.js</title>

        <!-- external libs from cdnjs -->
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>

        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/pivot.min.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/pivot.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/d3_renderers.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/c3_renderers.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pivottable/2.14.0/export_renderers.min.js"></script>

        <style>
            body {font-family: Verdana;}
            .node {
              border: solid 1px white;
              font: 10px sans-serif;
              line-height: 12px;
              overflow: hidden;
              position: absolute;
              text-indent: 2px;
            }
            .c3-line, .c3-focused {stroke-width: 3px !important;}
            .c3-bar {stroke: white !important; stroke-width: 1;}
            .c3 text { font-size: 12px; color: grey;}
            .tick line {stroke: white;}
            .c3-axis path {stroke: grey;}
            .c3-circle { opacity: 1 !important; }
            .c3-xgrid-focus {visibility: hidden !important;}
        </style>
    </head>
    <body>
        <script type="text/javascript">
            $(function(){
                if(window.location != window.parent.location)
                    $("<a>", {target:"_blank", href:""})
                        .text("[pop out]").prependTo($("body"));

                $("#output").pivotUI(
                    $.csv.toArrays($("#output").text()),
                    $.extend({
                        renderers: $.extend(
                            $.pivotUtilities.renderers,
                            $.pivotUtilities.c3_renderers,
                            $.pivotUtilities.d3_renderers,
                            $.pivotUtilities.export_renderers
                            ),
                        hiddenAttributes: [""]
                    }, {"vals": ["Passrate"], "aggregatorName": "List Unique Values", "rows": ["Device", "Train", "Build"], "cols": ["Test"]})
                ).show();
             });
        </script>
        <div id="output" style="display: none;">,A,B,C,D,E
0,1.0,1.32921217265,,-0.316280359621,-0.990810386641
1,2.0,-1.07081625562,-1.43871327983,0.56441685152,0.295721887622
2,3.0,-1.62640423331,0.219565198748,0.678804799025,1.88927273142
3,4.0,0.961538398678,0.104011195684,-0.481165317281,0.850228531228
4,5.0,1.45342466641,1.05773743558,0.165561607158,0.51501837804
5,6.0,-1.33693568578,0.562861136708,1.39285482507,-0.0633279834506
6,7.0,0.121668361535,1.2076025382,-0.00204021491028,1.62779574448
7,8.0,0.354492785722,1.03752763273,-0.385683512768,0.519818000784
8,9.0,1.68658288745,-1.32596314576,1.42898370021,-2.08935427747
9,10.0,-0.129819937432,0.631522949364,-0.586538064295,0.290720080978
</div>
    </body>
</html>
tomioueda commented 7 years ago

Got it -- I just needed to add it within the style block:


        <style>
            body {font-family: Verdana;}
            .node {
              border: solid 1px white;
              font: 10px sans-serif;
              line-height: 12px;
              overflow: hidden;
              position: absolute;
              text-indent: 2px;
            }
            .c3-line, .c3-focused {stroke-width: 3px !important;}
            .c3-bar {stroke: white !important; stroke-width: 1;}
            .c3 text { font-size: 12px; color: grey;}
            .tick line {stroke: white;}
            .c3-axis path {stroke: grey;}
            .c3-circle { opacity: 1 !important; }
            .c3-xgrid-focus {visibility: hidden !important;}
            .pvtTotal, .pvtTotalLabel, .pvtGrandTotal {display: none}
        </style>