API Docs

Class: ProfileEditor

PD.SVG. ProfileEditor

Generates an interactive editable daily line chart.

This type of chart allows for the display and editing of data that is evenly spaced over a 24hr period. It displays a line with nodes for each data point, which can be selected and manipulated by the user using the pointer ot keyboard when it has the focus.

NOTE: To maintain compatibility with a number of legacy web apps, this class still uses some old-school getter/setter methods. These methods take an optional argument which, if present, sets the value of the corresponding internal property. If no argument is given, the method just returns the internal property value.

new ProfileEditor(config)

Creates a new interactive editable daily line chart.

Parameters:
Name Type Description
config object

A configuration object.
Properties of config:
Name Type Argument Description
svgId SVGElement | string

The SVG element to use, or the DOM identifier of an SVG element.
title string <optional>

The primary title to display in the chart.
subTitle string <optional>

The secondary title to display in the chart.
units string <optional>

The units to display in the scale legend.
detailMode boolean <optional>

Whether or not to use much finer value increments.
thumbRadius number <optional>

The selection radius for chart point, defaults to 15 pixels.
data Array <optional>

An optional array of 24 fractional data values.
tooltipWidth number <optional>

The width of the selection tooltip.
tooltipHeight number <optional>

The height of the selection tooltip.
throttledRescale number <optional>

The number of milliseconds to throttle calls to rescale() by.
padding Array <optional>

An array of padding pixels in top, right, bottom, left order.
paddingTop number <optional>

The number of padding pixels at the top of the chart.
paddingRight number <optional>

The number of padding pixels to the right of the chart.
paddingBottom number <optional>

The number of padding pixels at the bottom of the chart.
paddingLeft number <optional>

The number of padding pixels to the left of the chart.
selectAction number <optional>

What action to take when interactively selecting.
xMin number <optional>

The minimum horizontal extents of the chart.
xMax number <optional>

The maximum horizontal extents of the chart.
xNodeOffset number <optional>

An optional offset value line X coordinates.
xTickMajor number <optional>

The increment between large axis ticks and text.
xTickMinor number <optional>

The increment between small axis ticks.
yMin number <optional>

The minimum vertical extents of the chart.
yMax number <optional>

The maximum vertical extents of the chart.
yTickMajor number <optional>

The increment between large axis ticks and text.
yTickMinor number <optional>

The increment between small axis ticks.
yStepMajor number <optional>

The setting/dragging increment when holding the SHIFT key.
yStepMinor number <optional>

The normal setting/dragging increment.
yStep number <optional>

The minimum snap increment when setting/dragging data.
xFormat function <optional>

A function taking a numeric X-axis value and returning a string for display.
yFormat function <optional>

A function taking a numeric Y-axis value and returning a string for display.
decimals number <optional>

The number of decimal places to displayed values if yFormat not given.
Author:
  • drajmarsh
Throws:

Throws an error if provided with an invalid svgId element or id.

Type
Error

Members

:number

id

A unique identifier for this sun-path.

Type
  • number
:boolean

isProfileEditor <readonly>

A flag identifying this object as a day schedule chart.

Type
  • boolean
:SVGElement

svgElem

The SVG element to render the chart to.

Type
  • SVGElement

Methods

axisMaxY( [max])

Get/set the maximum vertical axis value.

Parameters:
Name Type Argument Description
max number <optional>

When provided, this sets the maximum value of the vertical axis range.
Returns:

Returns the current maximum value.

Type
number

axisMinY( [min])

Get/set the minimum vertical axis value.

Parameters:
Name Type Argument Description
min number <optional>

When provided, this sets the minimum value of the vertical axis range.
Returns:

Returns the current minimum value.

Type
number

axisStepMajorY( [major])

Get/set The large setting/dragging increment value when holding the SHIFT key.

Parameters:
Name Type Argument Description
major number <optional>

When provided, this sets the large increment value.
Returns:

Returns the current major step value.

Type
number

axisStepMinorY( [minor])

Get/set The smaller default setting/dragging increment value.

Parameters:
Name Type Argument Description
minor number <optional>

When provided, this sets the smaller increment value.
Returns:

Returns the current minor step value.

Type
number

axisStepY( [step])

Get/set The smallest allowable increment value when holding the CTRL/META key.

Parameters:
Name Type Argument Description
step number <optional>

When provided, this sets the smallest allowable increment value.
Returns:

Returns the current step value.

Type
number

decimals( [decimals])

Get/set the number of decimal points to display values with.

Parameters:
Name Type Argument Description
decimals number <optional>

When provided, this sets the new number of decimal points to use.
Returns:

Returns the current precision.

Type
number

detailMode( [mode])

Get/set interactive fine detail mode.

Parameters:
Name Type Argument Description
mode boolean <optional>

When provided, this sets the detailed mode on or off.
Returns:

Returns the current detail mode state.

Type
boolean

getNodeAtIndex(index)

Retrieves the data node at the given index.

Parameters:
Name Type Description
index number

The array index of the data value to get.
Returns:

Returns the data node at the specified index, or null if the index is out of range.

Type
object | null

getNodeCount()

Retrieves the number of stored data nodes.

Returns:

Returns the number of nodes.

Type
number

getPositionOfPoint(index)

Retrieves the pixel position of the given point within the chart.

Parameters:
Name Type Description
index number

The array index of the data value to get the position of.
Returns:

Returns an [x,y] position array relative to the chart, in pixels.

Type
Array | null

getValueAtIndex(index)

Retrieves the value of the data node at the given index.

Parameters:
Name Type Description
index number

The array index of the data value to get.
Returns:

Returns the absolute value at the specified node index.

Type
number

height( [height])

Get/set the overall height of the chart, in pixels.

Parameters:
Name Type Argument Description
height number <optional>

When provided, this sets the new chart height in pixels.
Returns:

Returns the current chart height in pixels.

Type
number

hideTooltip()

Hides the tooltip above the selected node if it is visible.

Returns:

Returns this chart instance to support method chaining.

Type
object

incrementValue(event, delta)

Increments/decrements the absolute value of currently selected data node(s).

Parameters:
Name Type Description
event object

The event that triggered the increment, if available. If 'null', keyboard modifiers are ignored.
delta number

A positive or negative value serving as the increment modifier (+/- 1 to 10).
Returns:

Returns this chart instance to support method chaining.

Type
object

nextNode( [index] [, shift])

Selects the next node index in the node array.

Parameters:
Name Type Argument Description
index number <optional>

The index to start incrementing at, defaults to the current selection index.
shift boolean <optional>

An optional flag to indicate the Shift key being held down.
Returns:

Returns this chart instance to support method chaining.

Type
object

paddingBottom( [pixels])

Get/set the inset on the bottom side of the chart.

Parameters:
Name Type Argument Description
pixels number <optional>

When provided, this sets the number of pixels the chart axis is indented from the parent container edge on the bottom side.
Returns:

Returns the current bottom padding in pixels.

Type
number

paddingLeft( [pixels])

Get/set the inset on the left side of the chart.

Parameters:
Name Type Argument Description
pixels number <optional>

When provided, this sets the number of pixels the chart axis is indented from the parent container edge on the left side.
Returns:

Returns the current left padding in pixels.

Type
number

paddingRight( [pixels])

Get/set the inset on the right side of the chart.

Parameters:
Name Type Argument Description
pixels number <optional>

When provided, this sets the number of pixels the chart axis is indented from the parent container edge on the right side.
Returns:

Returns the current right padding in pixels.

Type
number

paddingTop( [pixels])

Get/set the inset on the top side of the chart.

Parameters:
Name Type Argument Description
pixels number <optional>

When provided, this sets the number of pixels the chart axis is indented from the parent container edge on the top side.
Returns:

Returns the current top padding in pixels.

Type
number

polylineColor( [color])

Get/set the polyline color as a CSS string in the form '#RRGGBB'.

Parameters:
Name Type Argument Description
color string <optional>

When provided, this sets the polyline color in the form '#RRGGBB'.
Returns:

Returns the current polyline color.

Type
string

prevNode( [index] [, shift])

Selects the previous node index in the node array.

Parameters:
Name Type Argument Description
index number <optional>

The index to start decrementing at, defaults to the current selection index.
shift boolean <optional>

An optional flag to indicate the Shift key being held down.
Returns:

Returns this chart instance to support method chaining.

Type
object

refresh()

Regenerates the whole chart from scratch.

Returns:

Returns this chart instance to support method chaining.

Type
object

rescale( [instant])

Initiates a rescaling of the chart when it has changed size or shape.

The maximum frequency at which this method will actually rescale the chart is governed by the 'throttledRescale' property.

Parameters:
Name Type Argument Default Description
instant boolean <optional>
<nullable>
 false

Amn optional flag to make the rescale immediate even if debounced, defaults to false.
Returns:

Returns this chart instance to support method chaining.

Type
object

selectAction( [action])

Get/set the action to take when interactively selecting.

Parameters:
Name Type Argument Description
action number <optional>

When provided, specifies the action to take when selecting.
Returns:

Returns the current select action.

Type
number

selectNode(index, shift)

Selects the given node index in the node array.

Parameters:
Name Type Description
index number

The array index of the node to select.
shift boolean

When true, any existing selection is cleared before selecting the new node. If false, existing selection is left untouched.
Returns:

Returns this chart instance to support method chaining.

Type
object

set(config)

Sets one or more configuration values for the chart.

Parameters:
Name Type Description
config object

An object containing one or more configuration settings.
Returns:

Returns this chart instance to support method chaining.

Type
object

setHourlyData(data)

Configures chart to display 24 hourly fractional data values as percentages.

Parameters:
Name Type Description
data Array

An array of 24 hourly schedule values.
Returns:

Returns this chart instance to support method chaining.

Type
object

setProfileData(data)

Configures chart to display 24 hourly fractional data values as percentages.

Parameters:
Name Type Description
data Array

An array of 24 hourly schedule values.
Returns:

Returns this chart instance to support method chaining.

Type
object

setValueAtIndex(index, value)

Sets the value of the data node at the given index.

Parameters:
Name Type Description
index number

The array index of the data value to set.
value number

The new value to set.
Returns:

Returns this chart instance to support method chaining.

Type
object

show(state)

Shows or hides the chart based on given state.

Parameters:
Name Type Description
state boolean

Use true to show, false to hide.
Returns:

Returns this chart instance to support method chaining.

Type
object

stepData( [step])

Get/set whether or not the data line is shown as steps or linear.

Parameters:
Name Type Argument Description
step boolean <optional>

When provided, specifies whether or not line is stepped.
Returns:

Returns the current step value.

Type
boolean

subTitle( [subtitle])

Get/set the chart sub-title displayed in the header above the chart.

Parameters:
Name Type Argument Description
subtitle string <optional>

When provided, this sets the new sub-title for the chart.
Returns:

Returns the current chart sub-title.

Type
string

throttledRescale( [ms])

Get/set the timer value for throttling calls to the rescale() method.

This basically means that multiple calls to the rescale() method that occur within the specified number of milliseconds will be amalgamated to a single call that occurs at the end of that period.

Parameters:
Name Type Argument Description
ms number <optional>

When provided, this sets the throttling time, in milliseconds. Any value less than 5ms effectively turns off throttling.
Returns:

Returns the current throttling time in milliseconds.

Type
number

title( [title])

Get/set the chart title displayed in the header above the chart.

Parameters:
Name Type Argument Description
title string <optional>

When provided, this sets the new title for the chart.
Returns:

Returns the current chart title.

Type
string

titleSeparation( [fraction])

Get/set the title/sub-title separation as a fraction pf the chart width.

Parameters:
Name Type Argument Description
fraction number <optional>

When provided, this sets the fraction of chart width to separate titles by (0 to 1).
Returns:

Returns the current separation value.

Type
number

update()

Regenerates just the data line, checking for and notifying changes.

Returns:

Returns this chart instance to support method chaining.

Type
object

updateWithoutNotification()

Regenerates just the data line without checking for or notifying changes.

Returns:

Returns this chart instance to support method chaining.

Type
object

width( [width])

Get/set the overall width of the chart.

Parameters:
Name Type Argument Description
width number <optional>

When provided, this sets the new chart width in pixels.
Returns:

Returns the current width in pixels.

Type
number