❤
npm
Sign UpSign In

kendo-ui-react-jquery-sparklines

1.0.2 • Public • Published

kendo-ui-react-jquery-sparklines

The Kendo UI for jQuery Sparklines widget wrapped as a React component.

WARNING: Must npm install professional version of Kendo UI using credentials.

You'll need to setup a .netrc file on your local system. This file contains the login (username & password) of the account on telerik.com in which you purchased Kendo UI professional or DevCraft.

Below are the instructions for both Windows and Mac users.

On Windows:

Create a text file called \_netrc in your home directory (e.g. c:\users\jane\_netrc).

Next, Declare a HOME environment variable.

EXAMPLE

C:\> SETX HOME %USERPROFILE%

Add the credentials using the format in the example above.

Git might have problems resolving your home directory if it contains spaces in its path—for example, c:\Documents and Settings\jane). Therefore, update your %HOME% environment variable to point to a directory having no spaces in its name.

On Mac:

Create a file called .netrc in your home directory ~/.netrc (i.e /User/USERNAME/.netrc). Make sure you modify the file permissions to make it readable only to you.

Add your credentials to the ~/.netrc (i.e /User/USERNAME/.netrc) file using the format from the example below.

EXAMPLE:

machine bower.telerik.com
    login my-telerik.identity@example.com-here
    password my-password-here

Install

npm i kendo-ui-react-jquery-sparklines

Usage Example

import React from 'react';
import ReactDOM from 'react-dom';
import KendoSparklines from 'kendo-ui-react-jquery-sparklines';
import Kendo from 'kendo/js/kendo.core';
 
//Don't forget CSS, webpack used to include CSS
import 'kendo/css/web/kendo.common.min.css';
import 'kendo/css/web/kendo.default.min.css';
 
var App = React.createClass({
  render: function() {
      return (<KendoSparklines options={{
                            data: [
                                936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
                                1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
                                974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
                                952, 940, 937, 980, 966, 965, 928, 916, 910, 980
                            ]
                        }}></KendoSparklines><br /><br />
                        <KendoSparklines options={{
                            type: "column",
                            data: [
                                16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
                                20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
                                21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
                                22, 21, 16, 15, 15, 16, 19, 20, 20, 21
                            ],
                            tooltip: {
                                format: "{0} &deg;C"
                            }
                        }}></KendoSparklines><br /><br />
                        <KendoSparklines options={{
                            type: "area",
                            data: [
                                71, 70, 69, 68, 65, 60, 55, 55, 50, 52,
                                73, 72, 72, 71, 68, 63, 57, 58, 53, 55,
                                63, 59, 61, 64, 58, 53, 48, 48, 45, 45,
                                63, 64, 63, 67, 58, 56, 53, 59, 51, 54
                            ],
                            tooltip: {
                                format: "{0} %"
                            }
                        }}></KendoSparklines><br /><br />
                        <KendoSparklines options={{
                            type: "bullet",
                            data: [21, 23],
                            valueAxis: {
                                min: 0,
                                max: 30,
                                plotBands: [{
                                    from: 0, to: 15, color: "#787878", opacity: 0.15
                                }, {
                                    from: 15, to: 22, color: "#787878", opacity: 0.3
                                }, {
                                    from: 22, to: 30, color: "#787878", opacity: 0.15
                                }]
                            },
                            tooltip: {
                                visible: true
                            }
                        }}></KendoSparklines><br /><br />
                        <KendoSparklines options={{
                            type: "pie",
                            data: [14, 10]
                        }}>
            </KendoSparklines>
      );
    }
});
 
ReactDOM.render(<App />, document.getElementById('app'));

React Props

Every KUI React Wrapper can make use of the following React props:

  • options
  • methods
  • events
  • unbindEvents
  • triggerEvents

Each is demonstrated below using a <KendoDropDownList> KUI React wrapper.

<KendoDropDownList
    //only updates upon state change from above if widget supports setOptions()
    //don't define events here, do it in events prop
    options={{ //nothing new here, object of KUI configuration values
        dataSource:[{
            text: "Item1",
            value: "1"
        }, {
            text: "Item2",
            value: "2"
        }, {
            text: "Item3",
            value: "3"
        }],
        dataTextField: "text",
        dataValueField: "value"
    }}
    //updates if object is different from initial mount
    methods={{ //name of method and array of arguments to pass to method
        open:[], //send empty array if no arguments
        value:['2']
    }}
    //Right now, always updates
    events={{ //name of event, and callback
        close:function(){console.log('dropdown closed')},
        select:function(){console.log('item selected')},
        open:function(){console.log('dropdown opened')}
    }}
    //updates if array is different from initial mount
    unbindEvents={[ //name of event to unbind, string
        "select"
    ]}
    //updates if array is different from initial mount
    triggerEvents={[ //name of event to trigger, string
        "open",
    ]}>
        <input className="kendoDropDownList" />
</KendoDropDownList>

KUI API

License

Apache License, Version 2.0

Readme

Keywords

Package Sidebar

Install

npm i kendo-ui-react-jquery-sparklines

Repository

github.com/codylindley/k-ui-react-jquery-wrappers/tree/master/packages/sparklines

Weekly Downloads

1

Version

1.0.2

License

Apache-2.0

Last publish

Collaborators

  • codylindley
Try on RunKit
Report malware