3.0.5
src/js/components/mixins/ChartRendererMixin.js
_applySettingsToData
Our d4 chart renderers expect any additional settings to be in the data
that is passed to it, so we merge them in (from a separate
chartSettings
object). An optional additional
parameter adds an
arbitray object to this
Current data and series settings
Optional additional object to apply
object
:
Data with settings applied
src/js/components/mixins/ChartRendererMixin.js
_handleStateUpdate Update a key in the renderer component's state
this.state
key
this.state
value
src/js/components/chart-xy/XYRenderer.jsx
XYLabels#_getPrevUndraggedNode Recursively traverse through previous labels to find one that is undragged This is used to calculate the default placement of a label (ie to the right of the previous undragged node)
src/js/components/chart-grid/ChartGrid_xScaleSettings.jsx
object
scale
:
chartProps.scale
object of the current chart.
See this component's PropTypes
function
onUpdate
:
Pass the updated scale back to the parent
string
className
:
CSS class to apply to this component
string
stepNumber
:
Number to display in Editor interface
<ChartGrid_xScaleSettings
scale={chartProps.scale}
onUpdate={this._handlePropAndReparse.bind(null, "scale")}
className="scale-options"
key="xScale"
stepNumber="4"
/>
#_handleDomainUpdate(k, v)
_handleDomainUpdate
Update the domain with a new custom maximum or mimimum. Like
_handleScaleUpdate
this passes an updated scale object to the parent
src/js/components/chart-grid/ChartGrid_xScaleSettings.jsx
_handleDomainUpdate
Update the domain with a new custom maximum or mimimum. Like
_handleScaleUpdate
this passes an updated scale object to the parent
#_handleScaleUpdate(k, v)
_handleScaleUpdate
Apply new values to the scale
object and pass it to the parent's callback
src/js/components/chart-grid/ChartGrid_xScaleSettings.jsx
_handleScaleUpdate
Apply new values to the scale
object and pass it to the parent's callback
string
k
:
New scale property's key
New scale proptery's value
src/js/components/mixins/ChartEditorMixin.js
_handlePropAndReparse Initiate a flux action that updates a prop and then triggers a reparse
chartProp
key
chartProp
value
src/js/components/mixins/ChartEditorMixin.js
_handlePropUpdate Initiate a flux action that updates a prop, that doesn't require reparsing
chartProp
key
chartProp
value
src/js/components/mixins/ChartEditorMixin.js
_handleStateUpdate Update a key in the editor component's state
this.state
key
this.state
value
src/js/components/Chartbuilder.jsx
boolean
autosave
:
Save to localStorage after every change
boolean
showMobilePreview
:
Show mobile preview underneath default chart
function
onStateChange
:
Callback when state is changed
Object
additionalComponents
:
Optional additional React components
string
renderedSVGClassName
:
Optional class name for chart SVG class
var React = require("react");
var Chartbuilder = require("./components/Chartbuilder.jsx");
var container = document.querySelector(".chartbuilder-container");
React.render(
<Chartbuilder
autosave={true}
showMobilePreview={true}
/>,
container );
#_onChange
Function that is fired any time a change is made to a chart. By default it
fetches the latest chart state from the stores and updates the Chartbuilder
component with that state. If autosave
is set to true
, it will also
update localStorage
with the new state.
src/js/components/Chartbuilder.jsx
Function that is fired any time a change is made to a chart. By default it
fetches the latest chart state from the stores and updates the Chartbuilder
component with that state. If autosave
is set to true
, it will also
update localStorage
with the new state.
Global config not specific to a chart type
.breakpoints
Configuration of breakpoints for Chartbuilder renderers.
src/js/config/chart-breakpoints.js
Configuration of breakpoints for Chartbuilder renderers.
.chart_sizes
Default dimensions for non-responsive chart sizes.
Default dimensions for non-responsive chart sizes.
.chart_style
Global style config that is not specific to any one chart type
Global style config that is not specific to any one chart type
.default_input
Tabular data that is loaded in when Chartbuilder loads initially
src/js/config/default-input.js
Tabular data that is loaded in when Chartbuilder loads initially
src/js/charts/cb-xy/xy-config.js
.display
display
src/js/charts/cb-xy/xy-config.js
display
Nem
or number
labelRectSize
:
Size of the legend label rectangle
Nem
or number
labelXMargin
:
Horiz distance btwn labels
Nem
or number
labelTextMargin
:
Horiz distance btwn label rect and text
Nem
or number
labelRowHeight
:
Vert distance btwn rows of labels items with colors the appropriate indexed CSS class
Nem
or number
afterTitle
:
Distance btwn top of title and top of legend or chart
Nem
or number
afterLegend
:
Distance btwn top of legend and top of chart
Nem
or number
blockerRectOffset
:
Distance btwn text of axis and its background blocker
Nem
or number
columnPaddingCoefficient
:
Distance relative to width that column charts should be from edge of the chart
Nem
or number
minPaddingOuter
:
Minimum distance between the outside of a chart and a graphical element
Nem
or number
bottomPaddingWithoutFooter
:
Bottom padding if footer is not drawn
object
aspectRatio
aspectRatio.wide
number
or fraction
aspectRatio.longSpot
number
or fraction
aspectRatio.smallSpot
number
or fraction
object
margin
:
Distances btwn outer chart elements and container
object
padding
:
Distances btwn inner chart elements and container
.xy_defaultProps
#calculate_xy_dimensions(width, opts)
src/js/charts/cb-xy/xy-dimensions.js
see ChartConfig#calculateDimensions
#parseXY(config, _chartProps, callback, parseOpts)
src/js/charts/cb-xy/parse-xy.js
Set up a configuration object for a given chart type
object
settings
settings.displayName
string
How this type's name should be displayed in the interface
settings.parser
function
Func to parse input for this chart type
settings.calculateDimensions
function
Func to calculate dimensions of this chart type
settings.display
object
Static display config for this chart type, such as positioning and spacing
settings.defaultProps
object
Defaults for dynamic properties that will be used to draw the chart
#calculateDimensions(width, model, chartConfig, enableResponsive, extraHeight)
Func that returns an object of {width: N, height: N}
that will determine
dimensions of a chart
Func that returns an object of {width: N, height: N}
that will determine
dimensions of a chart
number
width
:
Width of container or area that will contain the chart
object
model
:
The chartProps
and metadata
of the current chart
object
chartConfig
:
Parsed chart configuration
boolean
enableResponsive
:
Should we make dimensions relative to container or use preset sizes
number
extraHeight
:
Additional height we need to account for, eg from wrapped text at the footer
Object
:
dimensions - Dimensions returned by calculation
number
:
dimensions.width
number
:
dimension.height
#parser(config, _chartProps, callback, parseOpts)
Func that parses input and settings to return newly parsed chartProps
Func that parses input and settings to return newly parsed chartProps
object
config
:
The parsed configuration for this chart type
object
_chartProps
:
Previous chartProps
function
callback
:
Function to pass new chartProps
to upon parse completion
object
parseOpts
:
Additional parse options
Object
:
chartProps - Updated chartProps
src/js/charts/cb-chart-grid/chart-grid-config.js
.chart_grid_defaultProps
.display
display
src/js/charts/cb-chart-grid/chart-grid-config.js
display
Nem
or number
afterTitle
:
Distance btwn top of title and top of legend or chart
Nem
or number
afterLegend
:
Distance btwn top of legend and top of chart
Nem
or number
blockerRectOffset
:
Distance btwn text of axis and its background blocker
Nem
or number
paddingBerBar
:
Space btwn two bars in a bar grid
Nem
or number
barHeight
:
Height of an individual bar in a bar grid
Nem
or number
afterXYBottom
:
Vert distance btwn two chart grids that are stacked
Nem
or number
afterXYRight
:
Horiz distance btwn two chart grids that are next to each other
Nem
or number
columnExtraPadding
:
Extra padding given if a chart grid XY has columns
Nem
or number
bottomPaddingWithoutFooter
:
Bottom padding if footer is not drawn
Nem
or number
bottomPaddingWithoutFooter
:
Bottom padding if footer is not drawn
object
xy
:
Copy of xy_config.display
, used in XY chart grids
object
margin
:
Distances btwn outer chart elements and container
object
padding
:
Distances btwn inner chart elements and container
#chartGridDimensions(width, opts)
src/js/charts/cb-chart-grid/chart-grid-dimensions.js
see ChartConfig#calculateDimensions
#parseChartgrid(config, _chartProps, callback, parseOpts)
src/js/charts/cb-chart-grid/parse-chart-grid.js
src/js/components/Chartbuilder.jsx
Function to query Flux stores for all data. Runs whenever the stores are
updated, usually by the Editor but occassionally by Renderers that allow
direct editing of the chart, eg draggable legend labels in XYRenderer.jsx
Object
:
Chartbuilder state
src/js/dispatcher/dispatcher.js
Flux dispatcher handles incoming payloads and sends them to flux stores. Usually data come from the UI, but can also come from localStorage or a server
#handleServerAction(action)
Incoming server action. Normally a localStorage object
See ./actions/ChartServerActions.js
src/js/dispatcher/dispatcher.js
Incoming server action. Normally a localStorage object
See ./actions/ChartServerActions.js
Object
action
:
{ eventName: "string", :
#handleViewAction(action)
Incoming view action. Normally comes from a React component.
See ./actions/ChartPropertiesActions.js
src/js/dispatcher/dispatcher.js
Incoming view action. Normally comes from a React component.
See ./actions/ChartPropertiesActions.js
Object
action
:
{ eventName: "string", :
src/js/components/mixins/ChartEditorMixin.js
src/js/components/ChartExport.jsx
src/js/components/chart-grid/ChartGridEditor.jsx
src/js/components/ChartMetadata.jsx
Edit a chart's metadata
src/js/components/ChartTypeSelector.jsx
Select a new chart type, copying shared settings over to the new type.
src/js/components/shared/DataInput.jsx
src/js/components/shared/DateScaleSettings.jsx
src/js/components/shared/NumericScaleSettings.jsx
Y scale settings for XY charts. Used in both XY and chart grid, and most likely for future charts as well
src/js/components/shared/ScaleReset.jsx
src/js/components/shared/XY_yScaleSettings.jsx
Y scale settings for XY charts. Used in both XY and chart grid, and most likely for future charts as well
src/js/components/chart-xy/XYEditor.jsx
src/js/components/RendererWrapper.jsx
Wrapper component that determines which type of chart to render, wrapping it in Svg and telling it to draw.
#SvgRectLabel
Render labels that are either automatically placed into a legend, or can be dragged manually by the user
src/js/components/svg/SvgRectLabel.jsx
Render labels that are either automatically placed into a legend, or can be dragged manually by the user
#SvgText
An Svg
src/js/components/svg/SvgText.jsx
An Svg
src/js/components/chart-grid/ChartGridEditor.jsx
Series-specific settings drawn for each column in data
src/js/components/chart-grid/ChartGridEditor.jsx
Settings that control the grid layout and type
src/js/components/chart-grid/ChartGridEditor.jsx
Button to toggle universal setting that applies series settings to all series
src/js/components/chart-grid/ChartGridBars.jsx
src/js/components/chart-grid/ChartGridXY.jsx
src/js/components/chart-grid/ChartGridRenderer.jsx
passes props to that renderer
src/js/components/mixins/ChartRendererMixin.js
src/js/components/chart-xy/XYRenderer.jsx
src/js/stores/ChartMetadataStore.js
Flux store for chart metadata such as title, source, size, etc.
#clear
clear Set metadata to empty
src/js/stores/ChartMetadataStore.js
clear Set metadata to empty
#get(k)
get
src/js/stores/ChartMetadataStore.js
get
any
:
Return value at key k
#getAll
getAll
src/js/stores/ChartMetadataStore.js
getAll
object
:
Return all metadata
src/js/stores/ChartPropertiesStore.js
Flux store for chart properties such as data, settings, scale
#clear
clear Set chartProps to empty
src/js/stores/ChartPropertiesStore.js
clear Set chartProps to empty
#get(k)
get
src/js/stores/ChartPropertiesStore.js
get
any
:
Return value at key k
#getAll
getAll
src/js/stores/ChartPropertiesStore.js
getAll
object
:
Return all chartProps
src/js/charts/cb-chart-grid/chart-grid-config.js
object
scale
:
Default settings for date and primary scales
object
input
array
chartSettings
:
Default settings for a given series (column) of data
object
extraPadding
:
Additional padding. This is a dynamic value and is mostly changed within the component itself
object
_grid
:
Grid settings
_grid.rows
number
Number of rows in the grid
_grid.cols
number
Number of columns in the grid
_grid.type
string
Grid type (bars|lines|dots|columns)
object
mobile
:
Mobile-specific override settings
src/js/charts/cb-chart-grid/chart-grid-config.js
src/js/charts/cb-xy/xy-config.js
object
scale
:
Default settings for date and primary scales
array
data
object
input
Array
<object
> chartSettings
:
Default settings for a given series (column) of data
object
extraPadding
:
Additional padding. This is a dynamic value and is mostly changed within the component itself
object
_annotations
:
Additional informative graphical elements
_annotations.labels
object
If labels are dragged, their position settings are saved here
object
mobile
:
Mobile-specific override settings
src/js/charts/cb-xy/xy-config.js
src/js/actions/ChartServerActions.js
Send data from some external API, usually localStorage in our case
.receiveModel(model, chartModel)
Update the whole chart model
src/js/actions/ChartServerActions.js
Update the whole chart model
src/js/actions/ChartViewActions.js
Send data from React views to Flux dispatcher, and on to the stores
.updateAllChartProps(Object, newChartProps)
Update all chart props
src/js/actions/ChartViewActions.js
Update all chart props
chartProps
.updateAndReparse(key, newProp)
Update a single chart prop and reparse the input
src/js/actions/ChartViewActions.js
Update a single chart prop and reparse the input
.updateChartProp(key, newProp)
Update a single chart prop
src/js/actions/ChartViewActions.js
Update a single chart prop
.updateInput(key, newInput)
Update a data input and reparse it
src/js/actions/ChartViewActions.js
Update a data input and reparse it
.updateMetadata(newMetadata, k, v)
Update metadata
src/js/actions/ChartViewActions.js
Update metadata
object
newMetadata
:
The property's value
Store for errors/warnings to users about the bad/dumb things they are probably doing
#clear
clear Set errors to empty
clear Set errors to empty
#get(k)
get
get
any
:
Return value at key k
#getAll
getAll
getAll
object
:
Return all errors
Helper functions!
.combine_margin_pading(m, p)
combine_margin_pading
combine_margin_pading
object
.compute_scale_domain(scaleObj, data, opts)
compute_scale_domain
compute_scale_domain
Current scale before generating new domain
Array
<number
> data
:
All values in the current scale
object
opts
:
Whether to return nice values or force a minimum of 0 or below
object
:
{ domain: [min, max], custom:
.merge_or_apply(defaults, source)
Given a defaults object and a source object, copy the value from the source if it contains the same key, otherwise return the default. Skip keys that only exist in the source object.
Given a defaults object and a source object, copy the value from the source if it contains the same key, otherwise return the default. Skip keys that only exist in the source object.
object
:
Result has identical keys to defaults
.precision(a)
precision
precision
undefined
.round_to_precision(num, precision, supress_thou_sep)
round_to_precision Round a number to N decimal places
round_to_precision Round a number to N decimal places
number
:
Rounded number
.suggest_tick_num(domain)
Given a the domain of a scale suggest the most numerous number of round number ticks that it cold be divided into while still containing values evenly divisible by 1, 2, 2.5, 5, 10, or 25.
Given a the domain of a scale suggest the most numerous number of round number ticks that it cold be divided into while still containing values evenly divisible by 1, 2, 2.5, 5, 10, or 25.
array
domain
:
An array of two number like objects
integer
:
Result is a single integer representing a nice number of ticks to use
.transform_coords(transformString)
transform_coords
transform_coords
undefined
.tz_offset_to_minutes(offset)
Given a timezone offset in an hour:minute format and return the equivalent number of minutes as a number only exist in the source object.
.validate_chart_model(modelStr)
Test whether a string is a valid Chartbuilder model
src/js/util/validate-chart-model.js
Test whether a string is a valid Chartbuilder model
string
modelStr
:
unparsed string of chart model JSON
generateScale
Flux store for the current session, ie session data that persits regardless interaction. Includes locale-aware settings and are unrelated to the actual rendering of the chart.
#get(k)
get
get
any
:
Return value at key k
#getAll
getAll
getAll
object
:
Return all session data
get_tick_widths
object
string
src/js/components/LocalStorageTimer.jsx
Button that persists for TIMER_DURATION
and allows user to re-load the
chart currently saved in localStorage
. On click, it updates the
SessionStore
.
make_mults
{ array? of base components that data will be passed to }
{ data for each chart }
{grid option }
{ func that tells how to evaluate the components?? }
src/js/components/chart-xy/XYEditor.jsx
Series-specific settings for each column in data
boolean
allowSecondaryAxis
:
Should a secondary axis be allowed
Array
<object
> chartSettings
:
Current settings for data series
function
onUpdate
:
Callback that handles new series settings
function
onUpdateReparse
:
Callback that handles new series settings,
but which need to be sent back to parse-xy
number
numColors
:
Total number of possible colors
src/js/components/chart-xy/XYEditor.jsx
When labels are dragged, this component appears and allows you to reset them
src/js/components/chart-xy/XYRenderer.jsx
See React.PropTypes
declaration for properties:
propTypes: { chartProps: PropTypes.object.isRequired, editable: PropTypes.bool, displayConfig: PropTypes.object.isRequired, styleConfig: PropTypes.object.isRequired, xScale: PropTypes.func.isRequired, yScale: PropTypes.func.isRequired, dimensions: PropTypes.object, labelYMax: PropTypes.number, updateLabelYMax: PropTypes.func },