Updated to v4.5.2

ReleaseNotes.txt

@@ -1,4 +1,12 @@
 *********************************************
+* jQWidgets v4.5.2 Release, May-04-2017     *
+*********************************************
+
+What's New:
+
+- Added 650+ new React Examples.
+
+*********************************************
 * jQWidgets v4.5.1 Release, April-01-2017   *
 *********************************************
 

demos/angular/setup.bat

@@ -16,5 +16,5 @@ xcopy /S /I ..\..\scripts scripts
 xcopy /S /I ..\..\styles styles
 xcopy /S /I ..\sampledata sampledata
 
-npm install
-npm start
+call npm install
+call npm start

demos/react/app/bargauge/addandremovevalues/app.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+import JqxListBox from '../../../jqwidgets-react/react_jqxlistbox.js';
+
+class App extends React.Component {
+    componentDidMount() {
+        this.refs.myListBox.checkIndex(2);
+        this.refs.myListBox.checkIndex(5);
+        this.refs.myListBox.checkIndex(6);
+
+        this.refs.myListBox.on('checkChange', (e) => {
+            let items = this.refs.myListBox.getCheckedItems();
+            let arrayOfItems = this.convertToArray(items);
+            document.getElementById('log').innerHTML = '<strong>Summary calories: ' + this.getSum(arrayOfItems) + '</strong>';
+            this.refs.myBarGauge.val(arrayOfItems);
+        });
+    }
+
+    convertToArray(items) {
+        let preparedArray = new Array(items.length);
+        for (let i = 0; i < items.length; i += 1) {
+            preparedArray[i] = items[i].value;
+        }
+        return preparedArray;
+    }
+    getSum(array) {
+        array = array || [];
+        let sum = 0;
+        if (!!array.length) {
+            for (let i = 0; i < array.length; i += 1) {
+                sum += array[i];
+            }
+        }
+        return sum;
+    }
+    render() {
+        let data =
+            [{
+                'id': '1',
+                'name': 'Hot Chocolate',
+                'calories': '370'
+            }, {
+                'id': '2',
+                'name': 'Peppermint Hot Chocolate',
+                'calories': '440'
+            }, {
+                'id': '3',
+                'name': 'Salted Caramel Hot Chocolate',
+                'calories': '450'
+            }, {
+                'id': '4',
+                'name': 'White Hot Chocolate',
+                'calories': '420'
+            }, {
+                'id': '5',
+                'name': 'Caffe Americano',
+                'calories': '15'
+            }, {
+                'id': '6',
+                'name': 'Caffe Latte',
+                'calories': '190'
+            }, {
+                'id': '7',
+                'name': 'Caffe Mocha',
+                'calories': '330'
+            }];
+        let source =
+            {
+                datatype: 'json',
+                datafields: [
+                    { name: 'name' },
+                    { name: 'calories', type: 'int' }
+                ],
+                id: 'id',
+                localdata: data
+            };
+        let dataAdapter = new $.jqx.dataAdapter(source);
+
+        let tooltip =
+            {
+                visible: true,
+                formatFunction: (value, index) => {
+                    let items = this.refs.myListBox.getCheckedItems();
+                    let item = items[index];
+                    return item.label + ': ' + value + ' cal.';
+                }
+            }
+        let labels =
+            {
+                formatFunction: (value) => {
+                    return value + ' cal.';
+                },
+                precision: 0,
+                indent: 15,
+                connectorWidth: 1
+            }
+
+        return (
+            <div>
+                <JqxBarGauge ref='myBarGauge' style={{ float: 'left' }}
+                    width={600} height={600} title={'Nutritional Values'} max={500}
+                    colorScheme={'scheme05'} values={[450, 190, 330]} baseValue={50}
+                    barSpacing={9} animationDuration={0} relativeInnerRadius={0.2}
+                    startAngle={0} endAngle={360} tooltip={tooltip} labels={labels}
+                />
+                <div style={{ marginLeft: 50, marginTop: 150, float: 'left' }}>
+                    <JqxListBox ref='myListBox'
+                        width={230} source={dataAdapter} checkboxes={true}
+                        displayMember={'name'} valueMember={'calories'}
+                    />
+                    <br />
+                    <br />
+                    <div id='log'><strong>Summary calories: 970 </strong></div>
+                </div>
+            </div>
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/autochangevalue/app.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+    componentDidMount() {
+        this.refs.myBarGauge.on('drawEnd', () => {
+            let values = [];
+            values[0] = this.getRandomInt(1, 99);
+            setTimeout(() => {
+                this.refs.myBarGauge.val(values);
+            }, 1000);
+        });
+    }
+
+    getRandomInt(min, max) {
+        return Math.floor(Math.random() * (max - min)) + min;
+    };
+
+    render() {
+
+        let barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];
+
+        let formatFunction = (value, index, color) => {
+            if (value < 20) {
+                return barGaugePalette[0];
+            }
+            if (value < 40) {
+                return barGaugePalette[1];
+            }
+            if (value < 60) {
+                return barGaugePalette[2];
+            }
+            if (value < 80) {
+                return barGaugePalette[3];
+            }
+            if (value <= 100) {
+                return barGaugePalette[4];
+            }
+        };
+
+        return (
+            <JqxBarGauge ref='myBarGauge'
+                width={'100%'} height={600} values={[25]}
+                relativeInnerRadius={0.6} formatFunction={formatFunction}
+            />
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/customtooltips/app.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+    render() {
+        let players = [25, 46, 6, 55, 14, 22, 57, 40, 87, 20];
+        let boundary = 33;
+        let title = { text: 'Ranking', subtitle: '(boundary - ' + boundary + ' points)' };
+        let labels =
+            {
+                formatFunction: (value) => {
+                    let realVal = parseInt(value);
+                    return realVal + ' pts';
+                },
+                font: { size: 12 },
+                indent: 10
+            }
+        let tooltip =
+            {
+                classname: 'myTooltip',
+                formatFunction: (value) => {
+                    let realVal = parseInt(value);
+                    let player = players.indexOf(realVal) + 1;
+                    return ('Player ' + player + ': ' + realVal + ' points');
+                },
+                visible: true
+            }
+        return (
+            <JqxBarGauge
+                width={570} height={570} max={90} labels={labels}
+                colorScheme={'scheme04'} values={players} baseValue={boundary}
+                tooltip={tooltip} startAngle={180} endAngle={-65}
+            />
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/defaultfunctionality/app.js

@@ -4,14 +4,14 @@ import ReactDOM from 'react-dom';
 import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
 
 class App extends React.Component {
-  render () {
-    return (
-      <JqxBarGauge
-        width={600} height={600} max={150}
-        colorScheme={'scheme02'} values={[102, 115, 130, 137]}
-      />
-    )
-  }
+    render() {
+        return (
+            <JqxBarGauge
+                width={600} height={600} max={150}
+                colorScheme={'scheme02'} values={[102, 115, 130, 137]}
+            />
+        )
+    }
 }
 
 ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/defaultfunctionality/app.txt

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+  render () {
+    return (
+      <JqxBarGauge
+        width={600} height={600} max={150}
+        colorScheme={'scheme02'} values={[102, 115, 130, 137]}
+      />
+    )
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/fluidsize/app.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+    render() {
+        return (
+            <JqxBarGauge
+                width={'75%'} height={'75%'}
+                colorScheme={'scheme11'} values={[32, 11, 100, 49, 69, 20]}
+            />
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/negativevalues/app.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+    render() {
+        let labels =
+            {
+                formatFunction: (value) => {
+                    return value + ' m';
+                },
+                precision: 1,
+                indent: 15
+            }
+        return (
+            <JqxBarGauge
+                width={600} height={600} max={45} min={-45}
+                endAngle={90} labels={labels} animationDuration={0}
+                relativeInnerRadius={0.2} baseValue={0} startAngle={270}
+                colorScheme={'scheme02'} values={[12, -35, -14.78, 29.5, 23.124, 41]}
+            />
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));

demos/react/app/bargauge/sequentialgrowth/app.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import JqxBarGauge from '../../../jqwidgets-react/react_jqxbargauge.js';
+
+class App extends React.Component {
+    componentDidMount() {
+        this.setState({
+            loop: 0
+        });
+        this.refs.myBarGauge.on('drawEnd', () => {
+
+            let arrayA = [20, 60, 0, 0];
+            let arrayB = [20, 60, 80, 0];
+            let arrayC = [20, 60, 80, 100];
+
+            switch (this.state.loop) {
+                case 0:
+                    this.refs.myBarGauge.val(arrayA);
+                    break;
+                case 1:
+                    this.refs.myBarGauge.val(arrayB);
+                    break;
+                case 2:
+                    this.refs.myBarGauge.val(arrayC);
+                    break;
+                default:
+                    console.log('Render time is finished.');
+                    break;
+            }
+            this.setState({
+                loop: this.state.loop + 1
+            });
+        })
+    }
+    render() {
+        let labels = { precision: 0, indent: 15, connectorWidth: 1 };
+        return (
+            <JqxBarGauge ref='myBarGauge'
+                width={650} height={650} animationDuration={300}
+                colorScheme={'scheme02'} values={[20, 0, 0, 0]}
+                relativeInnerRadius={0.2} barSpacing={14}
+                startAngle={180} endAngle={-180} labels={labels}
+            />
+        )
+    }
+}
+
+ReactDOM.render(<App />, document.getElementById('app'));