nnajm / orb Goto Github PK

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?

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.

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.

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

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 =)

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

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?

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.

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.

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!

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.

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.

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).

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 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...

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?

colored themes+bootsrap

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

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.

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.

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.

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?

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.

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.

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?

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

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?

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

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?

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?

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.

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

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.

Create average, disregarding values 0 or null.

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.

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

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?

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?