jspreadsheet / ce

Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software.
https://bossanova.uk/jspreadsheet/v4
MIT License
6.77k stars 828 forks source link

No separation between Formula, Value and Presentation Layer #1306

Closed MaPePeR closed 3 years ago

MaPePeR commented 3 years ago

Maybe I missed something, but I think the separation between the different layers of a spreadsheet is somewhat weak and should be improved:

In my understanding there are 3 Layers of a spreadsheet:

In jexcel i couldn't find a separation between the Value and the Presentation Layer, though. The getValue Function returns either (processedValue=false) obj.options.data[y][x], which is the Formula Layer or (processedValue=true) obj.records[y][x].innerHTML, which is a mix of Value and Presentation Layer. I couldn't find another data structure that contains the formula results besides innerHTML. (Maybe I missed it?)

There is no real access to the value layer, which makes it a lot harder than it should be to do calculations with other Formula results, that are also styled.

If i have a formula that depends on a formula cell for which i applied special styling in innerHTML I first have to undo that styling/parse innerHTML in order to get the result of the formula in that cell back. This makes most of the formula functions not reusable, because they depend on the visual format of the cells that are used for their calculation.

I tried to show that in this jsfiddle.

Alex-Monahan commented 3 years ago

Hello!

One way that we have gotten around this is by styling with css classes and a separate css file. Then you don't have to use inline CSS.

That said, I think storing the results of formula execution in a JS Object instead of just the DOM could help us to export those values to other web components that depend on the JExcel data. So it would be a helpful feature for us also!

Thanks, Alex

On Mon, Feb 1, 2021, 9:40 AM MaPePeR notifications@github.com wrote:

Maybe I missed something, but I think the separation between the different layers of a spreadsheet is somewhat weak and should be improved:

In my understanding there are 3 Layers of a spreadsheet:

  • Formula Layer (obj.options.data?)
    • Contains the data that is entered by the User. So formulas and raw data.
  • Value Layer (obj.records[y][x].innerHTML??)
    • Contains the result of the formulas as numbers alongside the non-formula raw data
  • Presentation Layer (also obj.records[y][x].innerHTML!)
    • Applying Formatting to the Value Layer e.g. Number Formatting, Units, Colors...

In jexcel i couldn't find a separation between the Value and the Presentation Layer, though. The getValue https://github.com/jspreadsheet/jexcel/blob/1eed06da44293b6b24be0a99399a44415c40ea4e/src/js/jexcel.core.js#L2141-L2149 Function returns either (processedValue=false) obj.options.data[y][x], which is the Formula Layer or (processedValue=true) obj.records[y][x].innerHTML, which is a mix of Value and Presentation Layer. I couldn't find another data structure that contains the formula results besides innerHTML. (Maybe I missed it?)

There is no real access to the value layer, which makes it a lot harder than it should be to do calculations with other Formula results, that are also styled.

If i have a formula that depends on a formula cell for which i applied special styling in innerHTML I first have to undo that styling/parse innerHTML in order to get the result of the formula in that cell back. This makes most of the formula functions not reusable, because they depend on the visual format of the cells that are used for their calculation.

I tried to show that in this jsfiddle https://jsfiddle.net/rksfex5p/4/.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/jspreadsheet/jexcel/issues/1306, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMOORAO3W23SEJYIEEBYD43S43KP3ANCNFSM4W5DFOIA .

hodeware commented 3 years ago

The new engine which is available from v7+ PRO distribution consider obj.records[y][x] as an object:

obj.records[y][x] = { element: DOM, x: x, y: y, v: value, style: string }

The benefits of this approach are:

a) smarter DOM management, where DOM only will be created when needed (lazyLoading, pagination). So, performance is much better. b) The style is saved for when the DOM is created. And the processed value is available. c) Keep the processed value available;

A second way to get the processed values, when cache: true, is via the following properties. obj.A1 obj.A2 obj.C4 etc

We have plans to bring the new engine wider available in different distributions. We should announce some news soon. If you wish to add your email to our newsletter or send us an email I am happy to drop you a message.

contact@jexcel.net

Meanwhile, please feel free to test the PRO distribution free of any charge, commitment, etc.

% npm install jexcel-pro

You can use this license code in your local env. YjQzMzdlOTRiOGY3ZTQ0ZDQ4ZTI1YWU3MDFjMDI0ZWJmOTNjODA1NWFiZTRiNDJhNmRiYTJlZjkwODQ3N2IwMWRmNWRjYWUwZDViM2VhMmI3NzVjOTcwMzVlN2ZhODI1Y2EyMmE3NDI0ZmE0ZjVmNGQ2MWEzN2M3MTA4MThhMDUsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk16SXdPVEkwTURBc0ltUnZiV0ZwYmlJNld5SnFjMlpwWkdSc1pTNXVaWFFpTENKcVpYaGpaV3d1Ym1WMElpd2lZMjlrWlhOaGJtUmliM2d1YVc4aUxDSnFjMmhsYkd3dWJtVjBJaXdpTVROemQyMHVZM05pTG1Gd2NDSXNJbXh2WTJGc2FHOXpkQ0pkTENKd2JHRnVJam9pTXlKOQ