Skip to content

Modular Design (v2) DRAFT

Jump to bottom
Wes Alvaro edited this page Feb 28, 2017 · 3 revisions

The following are ideas for created a more modular API to the Google Chart functionality. I believe these modularizations bring the element more in-line with web-component design paradigm. They will add a great deal of functionality while at the same time reducing code complexity.

Major Changes

See the next sections for more information on the new elements and properties as well as examples.

  • Charts will be drawn via a ChartWrapper. This alleviates needing to load the libraries and map the constructors. It is also required for adding charts to a Dashboard.
  • Charts no longer load URLs. If data is needed from the network, loading separately is now required (e.g. with an iron-ajax). This gives more flexibility and removes complexity from the <google-chart> element.
  • Charts now only draw DataTable or DataView objects (i.e. no longer parse data). Include a <google-chart-data> element to parse data with more flexibility and efficiency.
  • The new <google-chart-data> element listens for slice events on its properties. This allows for using the normal Polymer array manipulations and have the changes reflected. (these manipulations to be debounced)
  • Charts can now be drawn in a Dashboard. Multiple charts can be put into one <google-chart-dashboard> element to share data. This allows for sharing one DataTable and also enables controls.
  • In order to facilitate data sharing, a new view attribute is added to <google-chart> and <google-chart-data> to filter the DataTable.
  • A viewTransformer property has also been added to <google-chart> and <google-chart-data>. This function allows the user to manipulate the used DataView as they see fit.
  • Charts can now be controlled! Adding a <google-chart-control> to a <google-chart-dashboard> will control charts in the same <google-chart-dashboard>.
  • A new <google-chart-query> element is available. This element allows for working with servers that implement the Chart Tools DataSource Protocol.

Elements

google-chart

  • Properties
    • type: The type of chart to draw
    • options
    • data: A DataTable or DataView to draw
    • view: The result of one or more calls to DataView.toJSON
    • viewTransformer: A function provided with one parameter, a DataView
  • Children: google-chart-data
  • Listens for: google-chart-data-changed

google-chart-data

  • Properties
    • rows
    • cols
    • value: A DataTable in 2D-Array format.
    • view
    • viewTransformer

google-chart-query

For working with servers that implement the Chart Tools DataSource Protocol.

  • Properties: url, query, refresh
  • Fires: google-chart-error, google-chart-warning

google-chart-dashboard

  • Properties: data
  • Children
    • google-chart
    • google-chart-control
  • Listens for: google-chart-data-changed

google-chart-control

  • Required Parent: google-chart-dashboard
  • Properties
    • type
    • filter-index, filter-label
    • options
    • state
    • ui

Examples

Chart populated with a DataTable

Using rows and columns separately

Chart listens for the data changed event from the DataTable to update.

<google-chart>
  <google-chart-data rows="[[rows]]" cols="[[cols]]"></google-chart-data>
</google-chart>

Using Double-Array DataTable format

<google-chart>
  <google-chart-data value="[[data]]"></google-chart-data>
</google-chart>

From URL as JSON

<google-chart>
  <iron-ajax auto url="[[url]]" handle-as="json" last-response="{{data}}"></iron-ajax>
  <google-chart-data value="[[data]]"></google-chart-data>
</google-chart>

As the result of a Query

Chart listens for the data changed event from the Query to update.

<google-chart>
  <google-chart-query url="[[url]]" query="[[query]]"></google-chart-query>
</google-chart>

Creating a DataView

A DataView transforming function can be invoked to manipulate the data shown (e.g. add calculated columns or filters).

<google-chart>
  <google-chart-data value="[[data]]" view-transformer="_createView"></google-chart-data>
</google-chart>

Reusing data via a Dashboard

Populating Multiple Charts

The DataTable is drawn via the Dashboard, which will distribute the data to each contained Chart.

<google-chart-dashboard>
  <google-chart-data value="[[data]]"></google-chart-data>
  <google-chart type="bar"></google-chart>
  <google-chart type="column"></google-chart>
</google-chart>

Using with a Control

The same will work with a properly configured Control, as well.

<google-chart-dashboard>
  <google-chart-data value="[[data]]"></google-chart-data>
  <google-chart></google-chart>
  <google-chart-control filter="[[columnName]]"></google-chart-control>
</google-chart>
Clone this wiki locally