nnajm / orb Goto Github PK

When you click on the filter icon and uncheck (Blank), nothing actually happens.

What is the best way to go to create my own theme?
Is it currently possible with the current version?

I think aggregation on string should not be possible because it leads to weird/unpredictable results:

I have started to work today on a patch that return a blank value when the input data is not a number (using typeof(val) === 'number' because strings like '012' are also unpredictable)

What do you think? Should I submit a PR?

Its possible to define a Format Function to be used when a field is droped to the Column axe?
It will be quite useful when used with a custom sort function, for example.

If you set a custom aggregation in the aggregateFunc setting, the field still displays (sum) when dropped in the data area.

Indeed, when setting a custom function, I don't see currently any way to set this name. Maybe an aggregateFuncName option would be appreciable but I don't know if it is the best way to do it...

Is there a way to feed data changes into the datasource and have the aggregates recalculated? I have a requirement to support data-changes over time. If the control currently does not support it, could you point me in the right direction to add it?

Thanks

I tried to store a config object and change the configuration via Javascript. But, after first config refresh, the pivot table not work properly.

There's an example:

var fngetConfig = function(myPivot) {
    console.log(myPivot.pivot);
    var config = myPivot.pivot.pgrid.config;
    var myConfig = {
        dataHeadersLocation: config.dataHeadersLocation,
        theme: config.theme.current(),
        toolbar: {
            visible: true
        },
        grandTotal: {
            rowsvisible: true,
            columnsvisible: true
        },
        subTotal: {
            visible: true,
            collapsed: true
        },
        fields: config.allFields,
        width: config.width,
        height: config.height,
        rows: [],
        columns: [],
        data: [],
        preFilters : {}
    };

    $.each(config.rowFields, function(idx, vField) {
        myConfig.rows.push(vField);
    });
    $.each(config.columnFields, function(idx, vField) {
        myConfig.columns.push(vField);
    });
    $.each(config.dataFields, function(idx, vField) {
        myConfig.data.push(vField);
    });

    return myConfig;
};

var fnRefreshPivot = function (storedConfig, myPivot, myDiv) {
        $("#"+myDiv).empty();
    var divEl = document.getElementById(myDiv);
    myPivot = new orb.pgridwidget(storedConfig);
    myPivot.render(divEl);
};

this problem occurs when I drag the fields after the first refresh

Create average, disregarding values 0 or null.

Using Safari (8.0.8) the horizontal scrollbar is missing. It seems like Orb is only adding this (empty) div:

<div class="orb-h-scrollbar" data-reactid=".0.1.1.4.1.0" style="width: 292px;"></div>

Where in Chrome it adds this:

<div class="orb-h-scrollbar" data-reactid=".0.1.1.4.1.0" style="width: 292px;">
    <div class="orb-scrollthumb " style="padding: 0px; width: 7.28191989068238px; left: 0px;" data-reactid=".0.1.1.4.1.0.0"></div>
</div>

Any idea how to fix this?

Is it on purpose that if I don't overwrite to formatFunc like in the example:

formatFunc: function(value) {
   return Number(value).toFixed(0);
}

the cell displays a blank instead of 0?

Besides of export to excel file it would be really nice to have extract to some open-ish standard format. The most standard one would be a csv file.
It should only require to deal with column names by concatenating as the example below:

             | 2014    | 2015
group | item | Q3 | Q4 | Q1 | Q2
--------------------------------
a     | a    | 5  | 4  | 3  | 2
a     | b    | 1  | 4  | 3  | 2
b     | a    | 2  | 4  | 3  | 2
b     | b    | 3  | 4  | 3  | 2

to

group,item,2014_Q3,2014_Q4,2015_Q1,2015_Q2
a,a,5,4,3,2
a,b,1,4,3,2
b,a,2,4,3,2
b,b,3,4,3,2

i want remove the field row/column/data.after preparing grid.is it possible.

Is there any internationalization support that we can use without directly change the strings in the source? If not, can anyone provide a kickstart on creating support for a strings dictionary. I'm a newbe with CoffeeScript.

This software is still mantained? We are planning to intensify the adoption of it in our application, but the latest closed bug was on July of 2015. The are many opened issues and no answer of the repository owner.

When the list of fields overflow the field space, a blank space appears on right side of rows grand total.
The more Fields i put on, the worse it gets.

Is it possible to style the components to fit.

It is taking fixed width and when I click on cell,the popped data is going out of screen width rather than being responsive!

Also the elements are becoming smaller and it is becoming harder to distinguish their names!

With the 1.1.0 version, when I open a filter popup of a field, I can't scroll the list of matches (.fltr-vals-col) with the mouse wheel. It is working fine using the current master version (v1.0.9).

I think it would be useful to be able to validate when a field is dropped either in the data, rows or column area.

For instance, if having columns=[A] and rows[B] and knowing that, if the user drop the C field in the rows area, it will make his computer burns, it would be nice to prevent him from doing so (at runtime) and then displaying a info message (not handled by this plugin).

Something like:

{
    name: '6',
    caption: 'Amount',
    onDrop: function() {
        if(ok)
            return true; //accept the drop
        else {
            alert('This configuration is not possible as it will generate too much data')
            return false; //cancel the drop
        }
    }
}

Then we need to determine what information should be passed to this callback to be able to determine if a drop is possible. For now, I thought of:

• the name of the field being dropped
• the dropped area (data, rows or columns)
• the current configuration of Rows, Columns and Data
• the source data (can be access directly from outside the plugin maybe)

What do you think? I can work on a PR but I don't really know from where to start.

A good example of potential future requests can be a pivottable library. There is a nice feature of charting pivot results. At some point it would be nice to have it too, or at least a json interface to the pivoted data so it can be picked up by external charting library more easily.

First, thanks for this awesome work!

Then I have a question: I don't know if it is already possible or if it would be hard to develop this feature but, is it possible to enable the user to directly change the aggregateFunc from the UI?

My idea is that when a field is dropped in the data area, the current aggregateFunc is shown like this "(sum)". Then this field could be clickable and display a popup to change the function...

What do you think?

Steps to reproduce:

1. Go to http://nnajm.github.io/orb/
2. Drop Quantity to the right of Amount (within the Data fields)
3. Now the Quantity cells within the grid all display: function n(e){return null!=e?e.toString():""}.

Also - perhaps related - when you drag a Data field to Fields and put it back in to Data, the formatting of the cells is gone again.

Tables do not expand/collapse corrrectly clicking on first rows or columns. Attached image using demo page.

Hi, thanx for great work!

Mixing Orb 1.1.0 with popular Redux boilerplates isn't straightforward process.

Instead of going from

import ord from 'orb' 

and smth like

<orb config={config} /> 

I ended up with the following code:

import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';

window.React = React;
window.ReactDOM = ReactDOM;
const orb = require('orb');

const config = { ... };

const myPivot = new orb.pgridwidget(config);
const elem = document.getElementById('rr');

myPivot.render(elem);

export default class PlainComponent extends Component {
// >> I would like to use myPivot here
}

... and it's not the best practice as i'm rendering in two separate divs.

Would you please share example how to use Orb as normal react 0.14 component?

export default class Orb extends Component {
  constructor() {
    super();
  }

  render() {
    return ( );
  }
}

It would be really nice to make Orb isomorphic and ES6 friendly as well.

Is there recommended way to use Orb 1.1.0. inside react 0.14 compatible components?

Hi good morning. I started using your pivot, but it's happening an error: Problem fields move items "Data". Example, exchanging "Amount" for "Quantity".

Its possible to create another calculated column, like the Grand Total, but with a custom aggregate function?

I have this scenario:

_________Expected__Realized__Calculated_____Grand Total (no even necessary in this case)
Row 1_______10_______5________50%____________15
Row 2_______20_______10_______50%____________30

How can I do such thing?
The Realized and Expected columns are only a column with a "descriptor" that I use to split records on columns.

Did you looked at react-native? Looks to be quite popular too, and maybe worth to switch from react? and it usually easier to made a switch sooner than later. Not sure what advantages it could bring other than performance(?). What do you think?

Example: I have a column with a total amount of people, and another column with the value of the evaluation score. I want it, a virtual column to show the percentage.

I have noticed that on Chrome and Firefox, when you click on a field button, the colgroup first column gets 1px larger. and stops after 5 clicks.

First of all, thanks for this awesome work!

It would be great if the component also has pagination for results.

Is their any method to support pagination?

In version 1.0.8 if the dataSource is set to an empty array like so:

var config = {
          dataSource: [],
          ...

Chrome registers a JS error "Uncaught TypeError: Cannot read property 'parent' of undefined". My intent was to load the data via ajax in a separate call, my current workaround is to hardcode a single row of data with zeros and "Loading..." as its content, this seems to work for the time being.

Thanks for the great work =)

Maybe I don't understand how to use it, but when I set aggregateFunc to 'avg' on a field using this syntax:

{name: 'test', caption: 'Test', aggregateFunc: 'avg'}

The created field button displays "Test (avg)" if I place it in the data area, however the table is still using the sum aggregate.

In the example, you use this syntax:

{
      name: '6', caption: 'Amount',
      dataSettings: {
          aggregateFunc: 'avg',
          formatFunc: function(value) {
             return Number(value).toFixed(0);
          }
      }
}

and it does work.

What is the reason I can't use directly the aggregateFunc option?

colored themes+bootsrap

Please create a way to remove the pivot componenet.
i tried
ReactDOM.unmountComponentAtNode(renderElement); in "orb.ui.pgridwidget.js" file where it uses ReactDOM.render(...)

i removes it but then when i recreate the element the drag and drop does not funcion.

The values are with the background color starting from light to darker color.

Currently color of icons can't be customized because they are PNG. I think it would be could to be able to change their color to deeper change the customization.

Using icon font or svg is a solution I guess.

Would be nice to get the json representation of the current layout, with rows, columns, etc.
Ultimately wanting to set a cookie for reloading the user's desired layout

If I do:

{
    name: '6',
    caption: 'Amount',
    formatFunc: function(value) {
        return value ? Number(value).toFixed(0) + ' $' : '';
    },
    dataSettings: {
        aggregateFunc: 'sum',
        aggregateFuncName: 'whatever'
    }
}

The custom format function is not called whereas if I do that:

{
    name: '6',
    caption: 'Amount',
    dataSettings: {
        aggregateFunc: 'sum',
        aggregateFuncName: 'whatever',
        formatFunc: function(value) {
            return value ? Number(value).toFixed(0) + ' $' : '';
        }
    }
}

It does work.

Is it a bug?

I'm trying to provide a custom sort function but it doesn't work. My function is never called actually...

Do you have any example?

Thanks for this great component!

I am trying to get it working inside a Rails app without luck so far. I installed the component with npm install orb installed also the react-rails gem to cover the React dependency, but when I run the app I get:

Uncaught TypeError: Cannot read property 'createClass' of undefined which I believe is thrown by react, and Cannot find module 'orb' in the var orb = require('orb'); line on my source.

Appreciate any help to get this component working inside a rails app.

In the example, the drill-down works correctly but in my case, I use a datasource which consists in an array of objects and the drill-down grid is always empty.

I have noticed that this line is the source of the problem because it iterates on data[i].length while data[i] is an object.

If I replace it by:

for(var j in data[i]) {

it works for array of arrays and array of objects.