;
/**
* React component for the {@link wijmo.gauge.LinearGauge} control.
*
* The linear-gauge component may contain
* a {@link wijmo.react.gauge.Range} child component.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.gauge.LinearGauge} control it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*
* The example below shows how to instantiate and initialize a
* {@link wijmo.gauge.LinearGauge} control in JSX:
*
* <Wj.LinearGauge
* min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
* value={ this.state.view.currentItem.sales }
* valueChanged={ this.salesChanged }
* format="c0" thumbSize={ 20 } showRanges={ false }
* face={{ thickness:0.5 }}
* pointer={{ thickness:0.5 }}
* ranges={[
* { min: 0, max: 333, color: 'red' },
* { min: 333, max: 666, color: 'gold' },
* { min: 666, max: 1000, color: 'green' }
* ]} />
*
* The code min, max, step, and isReadOnly properties
* to define the range of the gauge and to allow users to edit its value.
* Next, it sets the value and valueChanged properties to create
* a two-way binding for the gauge's value.
*
* Then it sets the format, thumbSize, and showRanges
* properties to define the appearance of the gauge. Finally, the markup sets
* the thickness of the face and pointer ranges, and extra ranges
* that will control the color of the value range depending on the gauge's
* current value.
*/
export declare const LinearGauge: WjForwardRefExoticComponent;
export declare type BulletGraphInputs = LinearGaugeInputs & {
bad?: number;
good?: number;
target?: number;
};
export declare type BulletGraphEvents = LinearGaugeEvents & {};
export declare const BulletGraphMeta: {
inputs: string[];
events: string[];
};
export declare type BulletGraphProps = BulletGraphInputs & BulletGraphEvents;
export declare type BulletGraphRef = WjRef;
/**
* React component for the {@link wijmo.gauge.BulletGraph} control.
*
* The bullet-graph component may contain
* a {@link wijmo.react.gauge.Range} child component.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.gauge.BulletGraph} control it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*
* The example below shows how to instantiate and initialize a
* {@link wijmo.gauge.BulletGraph} control in JSX:
*
* <Wj.BulletGraph
* min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
* value={ this.state.view.currentItem.sales }
* valueChanged={ this.salesChanged }
* format="c0" thumbSize={ 20 } showRanges={ false }
* face={{ thickness:0.5 }}
* pointer={{ thickness:0.5 }}
* ranges={[
* { min: 0, max: 333, color: 'red' },
* { min: 333, max: 666, color: 'gold' },
* { min: 666, max: 1000, color: 'green' }
* ]} />
*
* The code min, max, step, and isReadOnly properties
* to define the range of the gauge and to allow users to edit its value.
* Next, it sets the value and valueChanged properties to create
* a two-way binding for the gauge's value.
*
* Then it sets the format, thumbSize, and showRanges
* properties to define the appearance of the gauge. Finally, the markup sets
* the thickness of the face and pointer ranges, and extra ranges
* that will control the color of the value range depending on the gauge's
* current value.
*/
export declare const BulletGraph: WjForwardRefExoticComponent;
export declare type RadialGaugeInputs = GaugeBaseInputs & {
autoScale?: boolean;
faceBounds?: wjcCore.Rect;
needleElement?: any;
needleLength?: wjcGauge.NeedleLength | string;
needleShape?: wjcGauge.NeedleShape | string;
startAngle?: number;
sweepAngle?: number;
};
export declare type RadialGaugeEvents = GaugeBaseEvents & {};
export declare const RadialGaugeMeta: {
inputs: string[];
events: string[];
};
export declare type RadialGaugeProps = RadialGaugeInputs & RadialGaugeEvents;
export declare type RadialGaugeRef = WjRef;
/**
* React component for the {@link wijmo.gauge.RadialGauge} control.
*
* The radial-gauge component may contain
* a {@link wijmo.react.gauge.Range} child component.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.gauge.RadialGauge} control it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*
* The example below shows how to instantiate and initialize a
* {@link wijmo.gauge.RadialGauge} control in JSX:
*
* <Wj.RadialGauge
* min={ 0 } max={ 1000 } step={ 50 } isReadOnly={ false }
* value={ this.state.view.currentItem.sales }
* valueChanged={ this.salesChanged }
* format="c0" thumbSize={ 20 } showRanges={ false }
* face={{ thickness:0.5 }}
* pointer={{ thickness:0.5 }}
* ranges={[
* { min: 0, max: 333, color: 'red' },
* { min: 333, max: 666, color: 'gold' },
* { min: 666, max: 1000, color: 'green' }
* ]} />
*
* The code min, max, step, and isReadOnly properties
* to define the range of the gauge and to allow users to edit its value.
* Next, it sets the value and valueChanged properties to create
* a two-way binding for the gauge's value.
*
* Then it sets the format, thumbSize, and showRanges
* properties to define the appearance of the gauge. Finally, the markup sets
* the thickness of the face and pointer ranges, and extra ranges
* that will control the color of the value range depending on the gauge's
* current value.
*/
export declare const RadialGauge: WjForwardRefExoticComponent;
export declare type RangeInputs = BaseInputs & {
color?: string;
max?: number;
min?: number;
name?: string;
thickness?: number;
wjProperty?: string;
};
export declare type RangeEvents = {
propertyChanged?: wjcCore.IEventHandler;
};
export declare const RangeMeta: {
inputs: string[];
events: string[];
};
export declare type RangeProps = RangeInputs & RangeEvents;
export declare type RangeRef = WjRef;
/**
* React component for the {@link wijmo.gauge.Range} class.
*
* The range component should be contained in
* one of the following components:
* {@link wijmo.react.gauge.LinearGauge}
* , {@link wijmo.react.gauge.BulletGraph}
* or {@link wijmo.react.gauge.RadialGauge}.
*
* The component supports all properties and events of the pure JavaScript {@link wijmo.gauge.Range} class it represents.
*
* The component includes an initialized event that is raised when the control is initialized after it is added to the page.
* You can use this event to perform further initialization in addition to setting properties in JSX.
* The signature of the handler function is the same as any other Wijmo event handlers.
*/
export declare const Range: WjForwardRefExoticComponent;