_applySettingsToData(_chartProps, additional)

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

Parameters

• _chartProps :

  Current data and series settings

• additional :

  Optional additional object to apply

Returns

_handleStateUpdate(k, v)

src/js/components/mixins/ChartRendererMixin.js

_handleStateUpdate Update a key in the renderer component's state

Parameters

• k :

  this.state key

• v :

  this.state value

_getPrevUndraggedNode(ix, undraggedLabels)

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)

Parameters

• number ix :

  The index of this undragged node in an array of undragged nodes

• Array<object> undraggedLabels :

  Position and size settings for all undraggedlabels

ChartGrid_xScaleSettings

src/js/components/chart-grid/ChartGrid_xScaleSettings.jsx

Chart grid xScale settings parent component

Properties

• 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

Examples

<ChartGrid_xScaleSettings
 scale={chartProps.scale}
 onUpdate={this._handlePropAndReparse.bind(null, "scale")}
 className="scale-options"
 key="xScale"
 stepNumber="4"
/>

Instance members

#_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

_handleDomainUpdate(k, v)

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

Parameters

• string k :

  Key of the domain object. Must be "max" or "min"

• number v :

  New domain value

#_handleScaleUpdate(k, v)

_handleScaleUpdate Apply new values to the scale object and pass it to the parent's callback

_handleScaleUpdate(k, v)

src/js/components/chart-grid/ChartGrid_xScaleSettings.jsx

_handleScaleUpdate Apply new values to the scale object and pass it to the parent's callback

Parameters

• string k :

  New scale property's key

• Any v :

  New scale proptery's value

_handlePropAndReparse(k, v)

src/js/components/mixins/ChartEditorMixin.js

_handlePropAndReparse Initiate a flux action that updates a prop and then triggers a reparse

Parameters

• k :

  chartProp key

• v :

  chartProp value

_handlePropUpdate(k, v)

src/js/components/mixins/ChartEditorMixin.js

_handlePropUpdate Initiate a flux action that updates a prop, that doesn't require reparsing

Parameters

• k :

  chartProp key

• v :

  chartProp value

_handleStateUpdate(k, v)

src/js/components/mixins/ChartEditorMixin.js

_handleStateUpdate Update a key in the editor component's state

Parameters

• k :

  this.state key

• v :

  this.state value

Chartbuilder

src/js/components/Chartbuilder.jsx

Chartbuilder parent component

Properties

• 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

Examples

var React = require("react");
var Chartbuilder = require("./components/Chartbuilder.jsx");
var container = document.querySelector(".chartbuilder-container");

React.render(
  <Chartbuilder
    autosave={true}
    showMobilePreview={true}
  />,
container );

Instance members

#_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.

_onChange

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.

config

src/js/config/chart-style.js

Global config not specific to a chart type

Static members

xy_config

src/js/charts/cb-xy/xy-config.js

Configuration of an XY chart

Static members

Instance members

ChartConfig(settings)

src/js/charts/ChartConfig.js

Chart config

Set up a configuration object for a given chart type

Parameters

• settings :

Properties

• 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

Instance members

#calculateDimensions(width, model, chartConfig, enableResponsive, extraHeight)

Func that returns an object of {width: N, height: N} that will determine dimensions of a chart

calculateDimensions(width, model, chartConfig, enableResponsive, extraHeight)

src/js/charts/ChartConfig.js

Func that returns an object of {width: N, height: N} that will determine dimensions of a chart

Parameters

• 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

Returns

Object :

dimensions - Dimensions returned by calculation

Returns

number :

dimensions.width

Returns

number :

dimension.height

#parser(config, _chartProps, callback, parseOpts)

Func that parses input and settings to return newly parsed chartProps

parser(config, _chartProps, callback, parseOpts)

src/js/charts/ChartConfig.js

Func that parses input and settings to return newly parsed chartProps

Parameters

• 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

Returns

Object :

chartProps - Updated chartProps

chart_grid_config

src/js/charts/cb-chart-grid/chart-grid-config.js

Configuration of a Chart grid

Static members

Instance members

Chartbuilder#getStateFromStores

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

Returns

ChartbuilderDispatcher

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

Instance members

ChartEditorMixin(k, v)

src/js/components/mixins/ChartEditorMixin.js

Functions common to chart editors

Parameters

• k :
• v :

ChartExport

src/js/components/ChartExport.jsx

Buttons that allow the user to export a chart to an image or Svg.

ChartGridEditor

src/js/components/chart-grid/ChartGridEditor.jsx

Editor interface for a Chart grid

Properties

• object chartProps :

  Properties used to draw this chart

• number numSteps :

  Allow the rendered component to interacted with and edited

ChartMetadata

src/js/components/ChartMetadata.jsx

Edit a chart's metadata

Properties

• object metadata :

  Current metadata

• string stepNumber :

  Step in the editing process

• additionalComponents :

  Additional React components. Anything passed here will be given a callback that updates the metadata field. This is useful for adding custom input fields not provided.

ChartTypeSelctor

src/js/components/ChartTypeSelector.jsx

Select a new chart type, copying shared settings over to the new type.

DataInput

src/js/components/shared/DataInput.jsx

Text area component and error messaging for data input

DateScaleSettings

src/js/components/shared/DateScaleSettings.jsx

Date scale settings for a chart editor

Properties

• object scale :

  Scale settings, which include date scale settings

• function onUpdate :

  Callback to send selected date options back to parent

• string stepNumber :

  Step in the editing process

NumericScaleSettings

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

ScaleReset

src/js/components/shared/ScaleReset.jsx

Button to delete a scale, resetting it to default settings

Properties

• object scale :

  Current chart's scale object

• string scaleId :

  Identifier for the scale we want to delete

• function onUpdate :

  Callback to send reset scale back to parent

XY_yScaleSettings

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

XYEditor

src/js/components/chart-xy/XYEditor.jsx

Editor interface for a XY chart

Properties

• object chartProps :

  Properties used to draw this chart

• number numSteps :

  Allow the rendered component to interacted with and edited

RendererWrapper

src/js/components/RendererWrapper.jsx

RendererWrapper

Wrapper component that determines which type of chart to render, wrapping it in Svg and telling it to draw.

Instance members

ChartGrid_chartSettings

src/js/components/chart-grid/ChartGridEditor.jsx

Series-specific settings drawn for each column in data

Properties

• string name :

  Series (column) name

• Array<object> chartSettings :

  Current settings for data series

• boolean universalSettings :

  Whether universalSettings is currently enabled

• number numColors :

  Total number of possible colors

ChartGrid_gridSettings

src/js/components/chart-grid/ChartGridEditor.jsx

Settings that control the grid layout and type

Properties

• object grid :

  Set grid type and number of rows and columns

• number numSeries :

  Number of columns, used to decide how many rows/columns are possible

ChartGrid_universalToggle

src/js/components/chart-grid/ChartGridEditor.jsx

Button to toggle universal setting that applies series settings to all series

Properties

• string text :

  Text of universal toggle button

• Array<object> chartSettings :

  Current settings for data series

• boolean universalSettings :

  Whether universalSettings is currently enabled

• function onClick :

  Callback on toggle button click

ChartGridBars

src/js/components/chart-grid/ChartGridBars.jsx

Component that renders bar (row) charts in a chart grid

Properties

• boolean editable :

  Allow the rendered component to interacted with and edited

• object displayConfig :

  Parsed visual display configuration for chart grid

• object chartProps :

  Properties used to draw this chart

ChartGridXY

src/js/components/chart-grid/ChartGridXY.jsx

Component that renders xy charts in a chart grid

Properties

• boolean editable :

  Allow the rendered component to interacted with and edited

• object styleConfig :

  Parsed global style config

• object displayConfig :

  Parsed visual display configuration for chart grid

• object chartProps :

  Properties used to draw this chart

ChartGridRenderer

src/js/components/chart-grid/ChartGridRenderer.jsx

Component that decides which grid (small multiples) type to render and

passes props to that renderer

Properties

• boolean editable :

  Allow the rendered component to interacted with and edited

• object displayConfig :

  Parsed visual display configuration for chart grid

• object chartProps :

  Properties used to draw this chart

ChartRendererMixin(_chartProps, additional)

src/js/components/mixins/ChartRendererMixin.js

Functions common to chart renderers

Parameters

• _chartProps :
• additional :

XYRenderer

src/js/components/chart-xy/XYRenderer.jsx

Component that renders XY (line, column, dot) charts

Properties

• boolean editable :

  Allow the rendered component to interacted with and edited

• object displayConfig :

  Parsed visual display configuration for chart grid

• object chartProps :

  Properties used to draw this chart

• object metadata :

  Title, data source, etc

ChartMetadataStore

src/js/stores/ChartMetadataStore.js

ChartMetadataStore.js

Flux store for chart metadata such as title, source, size, etc.

Instance members

ChartPropertiesStore

src/js/stores/ChartPropertiesStore.js

ChartProptiesStore.js

Flux store for chart properties such as data, settings, scale

Instance members

chartProps

src/js/charts/cb-chart-grid/chart-grid-config.js

Properties

• 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

metadata

src/js/charts/cb-chart-grid/chart-grid-config.js

Properties

• string chartType
• string size

chartProps

src/js/charts/cb-xy/xy-config.js

Properties

• 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

metadata

src/js/charts/cb-xy/xy-config.js

Properties

• string chartType
• string size

ChartServerActions(chartModel)

src/js/actions/ChartServerActions.js

ChartServerActions

Send data from some external API, usually localStorage in our case

Parameters

• chartModel :

Static members

ChartViewActions(newChartProps)

src/js/actions/ChartViewActions.js

ChartViewActions

Send data from React views to Flux dispatcher, and on to the stores

Parameters

• newChartProps :

Static members

ErrorStore

src/js/stores/ErrorStore.js

ErrorStore.js

Store for errors/warnings to users about the bad/dumb things they are probably doing

Instance members

helper

src/js/util/helper.js

Helper functions!

Static members

editors

src/js/charts/editors.js

renderers

src/js/charts/renderers.js

generate_scale(type, scaleOptions, data, range, additionalOpts)

src/js/util/scale-utils.js

generateScale

Parameters

• type :
• scaleOptions :
• data :
• range :
• additionalOpts :

SessionStore

src/js/stores/SessionStore.js

SessionStore

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.

Instance members

get_tick_widths(scaleOptions, font)

src/js/util/scale-utils.js

get_tick_widths

Parameters

• scaleOptions :

  object

• font :

  string

LocalStorageTimer

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(components, data, gridOpts, howToRender, Outer, outerProps, gridScales, renderDataFunc)

src/js/util/grid-utils.js

make_mults

Parameters

• components :

  { array? of base components that data will be passed to }

• data :

  { data for each chart }

• gridOpts :

  {grid option }

• howToRender :

  { func that tells how to evaluate the components?? }

• Outer :
• outerProps :
• gridScales :
• renderDataFunc :

XY_chartSettings

src/js/components/chart-xy/XYEditor.jsx

Series-specific settings for each column in data

Properties

• 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

XY_resetLabels

src/js/components/chart-xy/XYEditor.jsx

When labels are dragged, this component appears and allows you to reset them

Properties

• object annotations :

  Current chartProps._annotations

• function onUpdate :

  Callback that passes a reset version of chartProps._annotation

XYLabels

src/js/components/chart-xy/XYRenderer.jsx

Component that renders the legend labels for an XY chart

See React.PropTypes declaration for properties:

Examples

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
},