kennethanceyer / formulize

:waning_crescent_moon: formula ui generator

formulize 🌒

formula UI generator

📦 Installation

git

$ git clone [email protected]:KennethanCeyer/formulize

npm

$ npm install formulize

yarn

$ yarn add formulize

👏 Getting started

This plugin helps you to make formulas WYSWYG UI

this plugin is based metric-parser

demo page

📃 Example (basic)

<div id="formulize"></div>

If you want to make UI into #formulize

typescript

import { UI } from 'formulize';

const target = document.getElementById('formulize');
const formulize = new UI(target, {
    ...options
});

const data: Tree = {
    operator: '*',
    operand1: { value: { type: 'unit', unit: 1 } },
    operand2: { value: { type: 'unit', unit: 2 } }
};

formulize.setData(data);

javascript (ES6)

import { UI } from 'formulize';

const target = document.getElementById('formulize');
const formulize = new UI(target, {
    ...options
});

const data = {
    operator: '*',
    operand1: { value: { type: 'unit', unit: 1 } },
    operand2: { value: { type: 'unit', unit: 2 } }
};

formulize.setData(data);

jQuery

$(function() {
    $('#formulize').formulize({
        ...options
    });

    const formulize = $('#formulize').data('$formulize');
    const data = {
        operator: '*',
        operand1: { value: { type: 'unit', unit: 1 } },
        operand2: { value: { type: 'unit', unit: 2 } }
    };

    formulize.setData(data);

    // unrecommended way
    $('#formulize').setData(data);
});

🚩 Roadmap

• support typescript
• update formula tree parser
• support reference docs
• follow clean code philosophy
• follow object based implementation
• support UMD module
• support code qualify tool
• support automation test environment
• support scss style file
• support multiple themes
• support unit code to achieve coverage over 90%
• support integration testing with mocking dom in the code-level
• support e2e testing
• add guideline in Github WIKI
• add guideline snippet gist and jsfiddle
• add contributor guidelines
• support cdn

🔍 License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

formulize's Issues

Syntax Parser error is validating by 3 objects is not accurate.

Hi,

I found this is useful, but the syntax parse error is validate a valid formula by its presence of 03 objects is wrong.
It should consider any valid arithmetic operator is presence in between of two possible numbers or custom objects.
I already using this and not getting a way of doing this in the pignose library file, hope you could help me out by fixing this ASAP.

For a example i was using Custom Objects of my table fields for making Formulas like below;
Total Price - Discount Price

but, when i create something like, Total Price - Discount Tax (here you can see, i missed a valid arithmetic operator before Tax and still the parser recognize this as a valid formula.

$('.formula').click() event not firing when x,y coordinates supplied.

I'm facing a issue with $('.formula').click() event not firing when x,y coordinates supplied.
without the coordinates as above works fine and even debugging can be done.

But, as below i have supplied the coordinates to make the cursor.available in formula box is not working and not get hits into the desired function within the pignose.build.js file.

$('.formula').click({x:174.55,y:49.67});

getting 'ReferenceError: $ is not defined' in react class

I tried to implement formulize as shown below

import React, { Component } from 'react';
import { UI } from 'formulize';

export default class FormulaBuilder extends Component {

    componentDidMount() {
        const target = document.getElementById('rule-action-formulize');
        const formulize = new UI(target, {
            // ...options
        });

        const data = {
            operator: '*',
            operand1: { value: { type: 'unit', unit: 1 } },
            operand2: { value: { type: 'unit', unit: 2 } }
        };

        formulize.setData(data);
    }

    render() {
        return <div id="rule-action-formulize" />
    }

}

But I am getting following error

ReferenceError: $ is not defined[Learn More] formulize.umd.js:2168

Items get dragged in a non-draggable formulize instance when formula contains above 5 elements

Steps to Reproduce:

Formula Builder Showing Error When Value Provided as 0

Formula Builder Showing Error When Value Provided as 0, Ideally it should not be, strange when we are using 0 + 0 its passing.
How we can fix to ensure 0 is a valid value in the expression

custom operator validation not working

Hi, just trying the demo and noticed that the custom operator doesn't seem to be recognised as valid even when put in the correct place, e.g., between two values. When I call getFormula() it seems to lack a unit.

Cursor position

After input two or more rows, the cursor is not positioned correctly

Formula displays two different signs for multiplication

Hey there, me again. When I type the operator for multiplication the formula editor displays "X" but when I load in a formula id displays "*" as a multiplication operator. Example:

Calculator interface on the browser

Hello is it possible to get a calculator interface the user typing his formula on the web browser for example mortgage rate

setFormula() not working

Step to reproduce:

1. Open http://www.pigno.se/barn/PIGNOSE-Formula/ Basic example

2. Execute in console

   var instance = $('.formula.formula-basic').data('formula');
   var formula = instance.getFormula();
   instance.setFormula(formula.data);

3. It seems to do something only when input is focused

   1. Execute in console

      setTimeout(function(){ instance.setFormula(formula.data); }, 3000);

   2. Click on formula input and wait

script error in IE 11

in IE 11, there are errors in the Console when using your demo page:

SCRIPT438: Object doesn't support property or method 'assign'
File: pignose.formula.build.js, Line: 39, Column: 30

Is custom functions supported?

I'm building a GUI formula editor something like Excel Formulas. From the demo I noticed that this library is much like what I need. However I didn't find custom functions support, especially nested functions. Can you tell me whether it's supported or not? Thank you.

generating formula for RX and Tx exchange between two different equipment not speaking same language

Dear @jeremiahmegel , @KennethanCeyer , @doogie2301

I hope you are well and my best wishes for 2020,

I have an issue too #josdejong/mathjs#1699

And maybe you could help me with your library.

Topic - translate from different protocols data by generating mathematic formula.

One of the properties is "Formulas" of our datamodel is

Formulas ( Rx / Tx)

• Formulas provide a way to project values received from an equipment to another value range or representation.
• For example, an equipment might send gain values as INTEGERs ranging from 0 to 65535, while the actual gain range in is -64db to 12db. Obviously, the user of a front-end application prefers to deal with the gain values in db instead of the technical INTEGER range.
• To accommodate for this need, I am looking to provides the concept of formulas.

• This will create a basic formula which does not alter the input value – meaning it returns the identity of the input value:

Picture from ww.lawo.de

• The input value of the formula is denoted with the symbol $. You can use this symbol in an arithmetic expression which yields the desired output range.
• The line “$ =“ defines the input value (as sent by the device) of the formula.
• The following line “RX($) =“ defines the expression used to convert values that have been received from the device.
• The following line “TX($) =” defines the expression used to convert values that are about to get sent to the device. This expression has to reverse the projection made in the RX expression.

• To follow the ifSpeed example, let’s display the speed of the interface in megabytes per second instead of bits per second:
o Enter a test input value in the “$ =” field, e.g. “10000000” (10 megabit)
o Enter the expression $ / 8000000.0 into the “RX” field. 8000000 is the factor used to turn unit bits into unit megabyte.
o To reverse the RX expression, enter the expression $ * 8000000.0 into the “TX” field.
o You will now see the following:

Picture from www.lawo.de

o You can see that the result of the RX expression is 1.25 (megabytes) and the result of the TX expression, which uses 1.25 as input value, is 10000000 (bits per second, which is equal to the input value of the RX expression).

INPUT RANGE

• I have an Analog to Digital convert 12 bits (4096 positions)
• The manufacturer of the A/D converter infor you for 0 = -128dB and for 4095 = +15 dB

I am looking to create as above "Formula" with possibility to select linear or log the Rx and Tx formula.

Data model of my paramater

{
                    "identifier": "ParameTypeStream",
                    "description": "Stream PPM MAIN",
                    "value": 0,
                    "minimum": -4096,
                    "maximum": 480,
                    "access": "read",
                    "format": "%8.2f°",
                    "enumeration": "",
                    "factor": 32,
                    "isOnline": true,
                    "default": -1024,
                    "type": "integer",
                     "formula": "1000*\n1000/"
                }

The properties : formula

The Minimum & Maximum are :

"minimum": -4096,
"maximum": 480,

Then I need to generate the correct formula for Rx & Tx.

Regarding formula "1000\n1000/"*

That means when the client receives this properties the "/n" is the separation from RX formula then TX formula then no needs two properties

Here :

RX = value *1000
TX = value /1000

Use case - write the formula - RX

1. the client introduces the formula in an editbox. Just the '$' indicates the value I need to passing into the math expression and get the result.

Use case - write the formula - TX

If the RX formula is already written in the editbox , I need and expect with Mathjs library to generate the invert formula for TX and vice-versa if Tx is filled, then I got RX.

If RX = $/1000
then I need to get for TX = $*1000

The formula could be complex (log, square, ^, (expression)*log) I attached a document from my friend written for F# (Microsoft) long time ago and now we are using nodejs and javascript.

Ember+ Formulas.pdf

I hope you could make a simple example of code how to use it and then I will try it ;-)

Best Wishes for 2020
Youssef

the formula is messed up after selecting with the mouse

Selecting the formula with mouse, from right to left, causes the formula to become completely disordered

Example: this formula in demo page, basic mode, 1+2+3*(4+5), is converted in 1+352+*+)(4

Formulize.input

Please give an example of use. I think that this event does not work.
my code:

        var formulize = $('#formulize');
        formulize.formulize({
            text: {
                error: '',
                formula: '',
                pass: ''
            },
            input: function (data) {
                alert('Ok');
            }
        });

text work, but function input none, thanks

Is there any documentation for advance formula ?

Use Case:
I want to add input dropdown in formula where user can select a value from that dropdown.
Is it possible in formulize plugin?

Documentation on custom draggable items

Hello,

I am trying to implement your formulize tool into my platform.
I downloaded the js and css files and am using jquery to formulize my div.
Everything works fine but I'm having some issues understanding how to build those drag and drop custom elements shown in the demo.

There is little documentation as to this feature and I'm a little lost.

So here is what I don't really understand. How do I create and define these custom elements? (I want them to be character strings . And how do I trigger their insertion on drop.

EDIT:
I managed to inspect your demo page and copy paste one of your drag and drop elements. I imagine I will need to handle the drag and drop aspect myself and use insert.

However when your elements are inserted they are of type "item" whereas mine are of type "unit". Is there a way to define custom data types? I am making a formula builder using string elements and I would like those strings to be somehow retrievable in the data.

Adding operators with different keyboard layouts (except US) doesn't work

Not allowing writing after drag-drop custom values

Not allowing writing after drag-drop custom values, the cursor still blinks but not allowing writing further, have to click in writer for writing.
control should be in text area after dropping a drag-able item

Pick of right position

After last commit there is still problem with pick of right cursor position. In more different cases I am not able to move cursor everywhere I click with mouse, moved of custom value are not placed on right position.