influxdata / giraffe Goto Github PK
View Code? Open in Web Editor NEWA foundation for visualizations in the InfluxDB UI
Home Page: https://influxdata.github.io/giraffe/
License: MIT License
A foundation for visualizations in the InfluxDB UI
Home Page: https://influxdata.github.io/giraffe/
License: MIT License
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
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:
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
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
A line tooltip with hoverDimension: 'x'
will display points from multiple different x values.
Originally from @russorat.
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:
ln -sF $PROJECTDIR/dist $APPDIR/node_modules/@influxdata/vis/dist
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.
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.
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.
canvas shapes are an order of magnitude more performant than d3 symbols.
will have implications for symbol scale.
Greatest item should appear at the top.
It's now or never :)
xTickFormatter
and yTickFormatter
optionsfill
grouping for a line
layerValues 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.
run-storybook
target in the Makefile
to run the storybook in development modeA 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).
Occasionally the built vis library will throw cryptic runtime errors that are resolved by removing the use of newish JavaScript features. See
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é.
(type, name)
tuplesname
property to table columnsdecide what hover will look like different scatter shapes.
table
in the plot config with data that has a different domainThe plot should reset its domain state, but does not currently. This is a bug in the PlotEnv
memoization logic that computes the domain.
Add a config option to each layer that enables a user to view a plot with a log scale.
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.
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.
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).
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
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.
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.
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 thesymbol
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
andb
columns rather than thec
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 thesymbol
columns.
Originally posted by @chnn in https://github.com/_render_node/MDIzOlB1bGxSZXF1ZXN0UmV2aWV3VGhyZWFkMTY4MDc2NDU5OnYy/pull_request_review_threads/discussion
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.
We should have some way of stress testing plots (large and/or high cardinality data sets).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.