i.e.

config.x: {
  column: "letter",
  type: "ordinal",
  domain : ["A", "B", "C"]
}

even when dataset only has values for "A" and "C"

Develop a set of tests to confirm that basic axis combinations work as expected in various situations. Focus on these settings for x/y type:

• linear/linear
• linear/log
• linear/ordinal
• linear/time
• log/log
• log/ordinal
• log/time
• ordinal/ordinal
• ordinal/time
• time/time

(10 cases)

See makeLegend lines 30, 41, and 80.

From unit tests:

Custom implementations can be used here. See here.

It might actually be more that the combination of text and non-text marks is breaking ...

in webcharts.css http://fonts.googleapis.com/css?family=Open+Sans:400,300 -> https://

should be similar to issue #21

npm run build is failing in node v6.9.2 with npm v4.1.1.

Would also be good to build in css uglify.

Use mark.type = bar and then figure out a reasonable set of states for the following options:

• x.type and y.type (perhaps in conjunction with x.bins and y.bins)
• marks.split
• marks.arrange
• possibly marks.summarizeX and marks.summarizeY

Currently the chart just bombs (no axis marks are drawn). Drop records and warn user instead? Abort and throw a error?

specifically, for attaching resize callback – prevents server-side rendering.

The config objects tests in /tests/samples/chart-config/sizing-resizable.json render as expected in the browser, but no axis ticks are drawn in JSDOM. Need to debug and add the json file in to testSettingList.json

Add documentation for chart.filtered_data and consider documenting how to access data for individual marks. This is currently a bit messy.

for picking a value from a continuous range

Remove old "required" option

Line node order differs from x/y domain order because it's sorted regardless of settings.x/y.order. Check out line 7:

 1    if(sublevel){
 2      this_nest.key(d => d[sublevel]);
 3      this_nest.sortKeys((a,b) => {
 4        return config.x.type === 'time' ? d3.ascending(new Date(a), new Date(b)) :
 5          config.x_dom ? d3.ascending(config.x_dom.indexOf(a), config.x_dom.indexOf(b)) :
 6          sublevel === config.color_by && config.legend.order ? d3.ascending(config.legend.order.indexOf(a), config.legend.order.indexOf(b)) :
 7          config.x.type === 'ordinal' || config.y.type === 'ordinal' ? naturalSorter(a,b) :
 8          d3.ascending(+a, +b);
 9      });
10    }

example

        x: {
            column: null, //set in syncSettings()
            type: null, //set in syncSettings()
            behavior: 'flex',
            tickAttr: null,
            order:
                ['Baseline'
                ,'Visit 1'
                ,'Visit 2'
                ,'Visit 3'
                ,'Early Termination'
                ,'End of Study']
        },

Add functionality for drawing marks that render svg text. Positioning the marks should be very similar to the settings for "circle" marks, but not sure the best way to specify the text content. Maybe the same system used to specify tooltips now?

Create a set of configurations to confirm that marks.summarizeX and marks.summarizeY behave as expected. Might make sense to have several different marks in the same chart to confirm this.

Inspired by this example

Something like this?
{
type: "dropdown",
options: ["x.column","marks[0].per[0]"],
label: "Group by",
values: ["Sector", "PrimaryFunction", "year", "Title"],
require: true
},

In the example below, 16-10 and 16-11 would have circles at y=0 (which would be included in the line).

Create a standard option for creating a webCharts table showing the raw data associated with a mark when clicking on said mark.

Introduce a config option that will keep the legend visible even when there is only one category represented. Perhaps:

config.legend.alwaysVisible = true

This causes an issue when webCharts references x/y.rangeBand(). Relevant code:

function drawLines(marks) {
  var _this16 = this;

  var config = this.config;
  var line = d3.svg.line().interpolate(config.interpolate).x(function (d) {
    return config.x.type === 'linear' ? _this16.x(+d.values.x) : config.x.type === 'time' ? _this16.x(new Date(d.values.x)) : _this16.x(d.values.x) + _this16.x.rangeBand() / 2;
  }).y(function (d) {
    return config.y.type === 'linear' ? _this16.y(+d.values.y) : config.y.type === 'time' ? _this16.y(new Date(d.values.y)) : _this16.y(d.values.y) + _this16.y.rangeBand() / 2;
  });

See RhoInc/safety-outlier-explorer#48 for an example

Test notes

• In CAT, select the safety-outlier-explorer renderer.
• Download and edit ADBDS so that all results (STRESN) are equal.
• Upload and select the edited dataset.
• Verify that the y-axis does not have a range of zero.

Description

When using WebCharts in a single-page app such as one powered by React, the library's behavior coupled with the nature of React causes a bug with rather serious performance implications.

Fixing this will require addition of a destroy/cleanup API to WebCharts Chart object as well as possibly modifications to the D3 library (already done, but AFAIK not upstreamed).

Steps to reproduce

0. Create a Chart with WebCharts and render it within a React component.
1. Cause the component to unmount (which results in removal of the Chart's target element from the actual DOM.)

Expected outcome

Chart unmounts cleanly. No errors produced.

Actual outcome

Chart unmounts, however D3 handlers for window resize. Since the chart no longer exists in the DOM, this causes error spam on the console (as well as a non-zero performance hit.) Needless to say, for a single-page app that will be potentially rendering and disposing of dozens of charts without a page reload, this is a major issue.

Proposed resolution

0. Add a .destroy() method to Chart to allow callers to signal that the chart will no longer be used (and thus associated resources should be released, handlers unbound, etc.)

1. If necessary, monkey-patch d3 to support the behavior implemented in d3 commit 6e3ce48. This allows for a "nuclear option" of just unbinding everything. (This is what I'm currently using in my application.)

i.e. if marks.values = {category: ['A', 'B'}, the nesting should only consider those two categories

Makes the flow in the config object a bit more logical, and allows for a bit more flexibility in the edge case where you want to plot 2 different dates with different formats.

See partial implementation in this example using this branch of the Safety outlier explorer renderer

As described at the end of this (rather optimistic) wiki page: https://github.com/RhoInc/Webcharts/wiki/Testing

Can be implemented in a new package.json script like so: format": "prettier --write 'scripts/**/*.js' && prettier --write 'util/**/*.js'",

currently, you get no information – chart just never shows up.

Right now "" is being drawn as a 0 - it should probably be null instead.

Test notes

• Verify that missing values such as an empty string (Chrome, FireFox) or a series of one or more spaces (IE) are not coerced to 0, i.e. that they are not plotted at all.
• Open the config-tester, select a scatter plot chart configuration, and set the Webcharts branch to master.
• Click Render Chart then in the Data Preview delete the contents of various cells whose values are plotted in the chart. Note how the chart updates these points to plot at 0.
• Change the Webcharts branch to falsey-zeroes and verify that these points are removed. Again delete the contents of various cells and verify that these point are removed rather than plotted at 0.

like for group comparisons

Provide a callback option for a control that is executed before the control's normal function calls chart.draw()

Tests are just commented out in the the testing branch

like chart.on('preprocess', function() { ...

Develop a set of test cases to make sure charts render at the specified size. Tests focus on these settings:

config.width
config.height
config.max_width
config.resizable
config.margin
config.aspect

Use the elements test data to create valid config objects that test all relevant iterations of:

x.type = [log,linear]
y.type = [log, linear]
mark.type = [circle, line, text]
per = [[element], [group]] (use summarizeX = summarizeY = 'mean')

This should produce 2 x 2 x 3 x 2 = 24 charts.

Add option to insert the legend before svg (instead of after). We could also consider legends to the right and left, but thinking those introduce more complicated layout issues ...

Copying @nbryant