Stats should be computed lazily, and recomputed only when necessary. Memoization for a particular stat should be based on its precise dependencies, rather than a hacky guess of its dependencies as we do now:

https://github.com/influxdata/vis/blob/b8638c90878c07f6581bd93292b8b7bdd49b8ce7/src/utils/PlotEnv.ts#L82-L89

Add a config option to each layer that enables a user to view a plot with a log scale.

When mapping a column of type time to the x aesthetic of a histogram layer, the ticks on the x axis should be formatted as time.

A line tooltip with hoverDimension: 'x' will display points from multiple different x values.

Originally from @russorat.

canvas shapes are an order of magnitude more performant than d3 symbols.
will have implications for symbol scale.

• Drag to brush, release drag to zoom into brush selection
• Dragging horizontally brushes in x dimension
• Dragging vertically brushes in y dimension
• Shift+drag translates domains
• Double click to reset zoom

decide what hover will look like different scatter shapes.

Enable a user to pass a custom layer config. The config would work something like:

interface CustomLayerConfig {
  type: 'custom'
  render: (env: PlotEnv) => JSX.Element
}

The element returned by the render method should be positioned by the library like any other layer.

We should audit the PlotEnv class to make sure it provides a reasonable public interface.

It's not clear how this layer should intercept interaction events (e.g. hovering, dragging, brushing). Let's add those at a later time.

Greatest item should appear at the top.

currently getColumn(colName) for a column that doesn't exist throws an error which requires user to handle errors or check if colName is in table.
It would be more helpful to program against if getColumn(columnName, default) would return default instead.

I am running a query with that has multiple yields in it. I am then using the fromFlux() function to parse the data.

The following is the csv response:

#group,false,false,true,true,false
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,double
#default,writes_kb,,,,
,result,table,_start,_stop,writes_kb
,,0,2019-05-31T17:54:44Z,2019-05-31T21:54:44.685122992Z,16512.4


#group,false,false,true,true,false
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,double
#default,,,,,
,result,table,_start,_stop,reads_kb
,,0,2019-05-31T17:54:44Z,2019-05-31T21:54:44.685122992Z,11111.4


#group,false,false,true,true,false
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,double
#default,writes_kb,,,,
,result,table,_start,_stop,execution_sec
,,0,2019-05-31T17:54:44Z,2019-05-31T21:54:44.685122992Z,22222.4

#group,false,false,true,true,false
#datatype,string,long,dateTime:RFC3339,dateTime:RFC3339,long
#default,api_count,,,,
,result,table,_start,_stop,api_count
,,0,2019-05-31T17:54:44Z,2019-05-31T21:54:44.685122992Z,1125

The table gets parsed as

Because each of my results are a single stat, I would expect the data for each of those columns to be an array of length 1, rather than an array of length 4.

Currently adding prefix/suffix forces axes labels to be interpreted as strings. Need to figure out a way for date/time formatting to play nicely with time labels

It seems like this is using the group column computed in the stat, except that group column is based off of the fill mapping instead of the symbol mapping.

So I think if the layer was specified like:

{
  type: 'scatterplot',
  fill: ['a', 'b'],
  symbol: ['c'],
  // ...
}

Then the symbol scale would be based off of the a and b columns rather than the c column, which is what was specified.

We can totally address this in a future PR, which might have been what you were thinking. I think the solution would be to append another group column to the table—so there would be one group column based off of the fill columns, and an independent column based off of the symbol columns.

Originally posted by @chnn in https://github.com/_render_node/MDIzOlB1bGxSZXF1ZXN0UmV2aWV3VGhyZWFkMTY4MDc2NDU5OnYy/pull_request_review_threads/discussion

Similar to the position option in a histogram layer config, we should support a position option in line layer configs.

type LinePosition = 'overlaid' | 'stacked'

It should default to 'overlaid'.

The stacking logic should take place in a stat. We may have to refactor the collectLineData and simplifyLineData utils in the line layer to make this all work out.

Example of viz plot being used in inflxudb with problem.

The zero part of the line is not visible and makes the graph look disconnected.
When I adjust the y min to be negative, the graph looks connected.

Flux Data:

#group,false,false,true,false,false
#datatype,string,long,string,long,dateTime:RFC3339
#default,_result,,,,
,result,table,_field,_value,_time
,,0,event,0,2019-05-01T12:00:00Z
,,0,event,0,2019-05-02T00:00:00Z
,,0,event,0,2019-05-02T12:00:00Z
,,0,event,0,2019-05-03T00:00:00Z
,,0,event,0,2019-05-03T12:00:00Z
,,0,event,1,2019-05-04T00:00:00Z
,,0,event,6,2019-05-04T12:00:00Z
,,0,event,0,2019-05-05T00:00:00Z
,,0,event,0,2019-05-05T12:00:00Z
,,0,event,2,2019-05-06T00:00:00Z
,,0,event,0,2019-05-06T12:00:00Z
,,0,event,10,2019-05-07T00:00:00Z
,,0,event,0,2019-05-07T06:00:00Z

• Do not check in built storybook assets
• Add a run-storybook target in the Makefile to run the storybook in development mode

I would expect to see fewer ticks in the x axis if they dont all fit or have a different formatting to make them fit.

We should create an easier folder structure, like each vis type belongs to one folder, and a simple config file for create a new type.

1. Render a plot
2. Update the table in the plot config with data that has a different domain

The plot should reset its domain state, but does not currently. This is a bug in the PlotEnv memoization logic that computes the domain.

1. Create a plot with no/default xTickFormatter and yTickFormatter options
2. Use a temporal column as the fill grouping for a line layer

Values for the temporal column are formatted as numbers in the line tooltip. They should instead be formatter as times.

e.g. _start and _stop in the following tooltip:

We might need to rethink the xTickFormatter and xTickFormatter options to handle this properly—what about other values that require custom formatting in tooltips? For example, large numbers or numbers with units. Perhaps the xTickFormatter and yTickFormatter should instead be numberFormatter and timeFormatter options.

as a user of chronograf
with editor permissions or higher
when there are multiple y axes displayed on the graph
then i would like the ability to configure the min, max, prefix, and suffix for the second y axis.

We should have some way of stress testing plots (large and/or high cardinality data sets).

Depends on #22

e.g. Percy or Chromatic

We should add a new layer type that enables plotting rectangles with arbitrary x start / x stop / y start / y stop positions (along a continuous axis). The histogram and heatmap layer types should then use this layer type internally. For more motivation on the approach, see Section 6.1 of https://vita.had.co.nz/papers/layered-grammar.pdf

This would enable a user to plot histograms and heatmaps using precomputed data (e.g. via Flux).

This may be a good time to expose more powerful capabilities in the public API:

• The ability to specify a transform / stat with each layer (e.g. "bin my data" or "compute a regression line")
• The ability to specify the scale corresponding to a data-to-aesthetic mapping. To use the language of Vega (see [1], [2], [3]), a user should be able to specify that a scale is nominal/ordinal (to make a histogram using the bar layer) or quantitative (to make a heatmap using the bar layer)

Right now, we show the individual points on a line graph when during a hover:

We should add an option to line graphs to show all points that make up a line, not just the currently hovered points, whenever there is space.

This will help users who end up plotting lines with only a single point, as well as users who want to see their actual data set as part of an interpolated line.

• Points should only show when for every line in the line layer, each point in the line is at least 2 * pointRadius away from all other points in the line

• Update the points to have a "hollowed out appearance":

  

  The hovered state of the point should put a dot in the center of the point.

A line layer should have sort and aggregate options.

If there are multiple y values for a particular x value, the aggregate option defines how to plot those y values as a single point. It should support common aggregate operations like mean, median, mode, max, min, etc.

sort defines the ordering of points within a group in the table (which controls the ordering of line segments in the plot).

The size of scatter plot shapes are currently fixed, it would be nice to be able to specify a size multiplier that could be applied to them

It's now or never :)

Hello!
I would like to have every single square clickable. The use case I have in my mind is to jump to a different visualization of the particular event from the heatmap.

Let's say that I am visualizing the HTTP request latency and every square represent a request, I would like to be able to go to my trace, or to the dashboard that visualizes a single request clicking the square.

In Chronograf we can have a convention: "if the point returns a _link field it is the target of the square" in this way we can use a query to compose and inject the _link to the graph.

• Identify columns uniquely by (type, name) tuples
• Add a name property to table columns
• Retain and return information about the Flux group key
• Retain and return information about how many Flux tables a column appears in

Occasionally the built vis library will throw cryptic runtime errors that are resolved by removing the use of newish JavaScript features. See

• 7fe93f4
• 39ac5c2

These issues appear to be bugs in microbundle and/or Bublé.

We should switch to using rollup directly, so that we can use Babel instead of Bublé.

Only occurs in Firefox (tested in latest Safari, Firefox, Chrome on macOS). Storybook reproduction is the "edge hover bug" story on the hover-index-bug branch.

TypeError: closestRowIndices is undefined
    lookupIndex2D useHoverLineIndices.ts:261
    useHoverLineIndices useHoverLineIndices.ts:54
    LineLayer LineLayer.tsx:76
    React 16
    dispatchEvent (index):1018

The issue is that the hover index doesn't have a bin for the y value at the very bottom of the plot (the max y value).

The line graph shows the the dates 5/03 - 5/05 whereas the data shows that the date should be 5/15 - 5/17.

It's desirable to format ticks using a binary unit prefix when plotting data whose y-value is measured in bytes.

But the y-axis generates tick marks at "nice" intervals, i.e. at powers of 10. These intervals are no longer nice when formatting numbers with a binary unit prefix.

For example, here's the same plot with ticks formatted using a decimal unit prefix:

It has a nice tick of "6G". When formatting the ticks with a binary unit prefix, it looks like this:

The generated tick is now "5.5879G" (6 gigabytes =~ 5.88 gibibytes), which is no longer nice.