Dashboard Table Graph Format

cryptoquick commented 7 years ago

@nathanielc asked about displaying data in a table format, and we don't currently support that as a graph type on the dashboard.

nhaugo commented 7 years ago

Dupe of #1031

jaredscheib commented 7 years ago

Not quite @nhaugo – #1031 is about Data Explorer, whereas this one's about Dashboard. Re-opening for now (the other one was closed anyway).

botzill commented 6 years ago

Hey guys,

Any plans to add such graph in the future ?

nhaugo commented 6 years ago

@botzill yes, but it is not currently schedule for any particular release.

nhaugo commented 6 years ago

See also #2246

russorat commented 6 years ago

customer feedback: this would be really useful for "Top N" tables that could be used for identify bad actors. For example, i have a list of the top apps/ips/services that are making requests and I can investigate apps that are making way too many.

hasselrot commented 6 years ago

Would be extremely useful! Any updates on this?

nhaugo commented 6 years ago

Hi @hasselrot, I don't can't give you an exact timing, but it is near the top of the list for 2018

121watts commented 6 years ago

this package might be useful https://github.com/bvaughn/react-virtualized

russorat commented 6 years ago

Initial Requirements:

[x] A user shall be able to select to display their data as a table
[x] A user shall be able to show or hide columns in the table
[x] A user shall be able to sort table by any column
[x] A user shall be able to override the name of each column
[x] A user shall be able to correlate rows of the table with data from other graphs on the dash
[x] A user shall be able to format the displayed timestamp
[x] A user shall be able to set threshold values similar to single stat and change the color of the text or background

alexpaxton commented 6 years ago

table-graph-design--v2.pdf

Included all the relevant details I can think of in here I can handle styling next week

alexpaxton commented 6 years ago

table-graph-design--v3.pdf

evo7master commented 6 years ago

We often need to compare two datasets at the same point in time, so it would be exceptionally useful to not mandate time series on one axis , but to allow comparison of multiple measurements at the same point in time in a matrix, see example below:

russorat commented 6 years ago

thanks @evo7master ! we will see what we can do to tackle that use case.

megastef commented 6 years ago

Please check ReactJS / Redux Data Table called Sematable https://github.com/sematext/sematable. Sematable has probably all required features, is open source, and is well maintained. The data table component is used in production for Sematext Cloud to show a large number of logs, events and alerts. Announcement Blog post (2016): https://sematext.com/blog/reactjs-redux-table-sematable/

ischolten commented 6 years ago

Thanks so much @megastef! We are leaning towards react-virtualized at the moment due to the potential size of the data and the accompanying need for windowing/lazy-loading. But it's really nice to know that you are following our feature development. Thanks again!

ebb-tide commented 6 years ago

[x] Add react-visualized as dependency: https://bvaughn.github.io/react-virtualized/#/components/Grid
[x] Add TableGraph as a graph option in cell editor overlay.
[x] Add basic TableGraph visualization options
[x] Create TableGraph component
[x] Backend data schema

end of base functionality forinit PR. #2905 backend base functionality #2968

merged:

[x] TableGraph: styling!! (@alexpaxton)
[x] TableGraph: highlight cell on hover and trigger crosshairs on other cells. (@ebb-tide)
[x] TableGraph: highlight time range associated with crosshairs and scroll to bring in to view. (@ebb-tide)
[x] TableGraph: time format implementation. (@ischolten)
[x] TableGraph: series renaming. (@ischolten)
[x] TableGraph: columns sorting (with indicator) (@bthesorceror )
- from the vis options
[x] TableGraph: thresholding colors for individual cells text and background. (@alexpaxton)
[x] TableGraph: lazyloading. (out of the box)
[x] TableGraph: zoom in behavior in table (out of the box!!)
[x] TableGraph: switching time axis vertical/ horizontal. (@ebb-tide)
[x] TableGraph: freeze/fix top row and allow toggle freeze/fix left column(@ischolten)
[x] TableGraph: columns sorting (with indicator) (@ebb-tide)
- from the table itself.
[x] TableGraph: hide/unhide series (including time) visibility. (@ischolten)

in progress:

[ ] TableGraph: text wrapping. (@alexpaxton)

alexpaxton commented 6 years ago

TableOptions shape

cell: {
  tableOptions: {
    timeFormat: '',
    verticalTimeAxis: bool,                   
    sortBy: {
      internalName: '',
      displayName: '',
      visible: '',                               // added -is
    },
    wrapping: '',
    fieldNames: [                    // changed from columnNames
  {
      internalName: '',
      displayName: '',
      visible: true                            // added -is
    }],
    fixFirstColumn: true                // added -dk
}

in the backend, type TableColumn is changing to RenamableField.

stevebang commented 6 years ago

Rename "Fix First Column" to "Lock First Column"

@russorat In the Table Controls, the option "Fix First Column" should be renamed to "Lock First Column". Here are a couple of examples where the term "lock" is used:

Microsoft Excel: Freeze panes to lock rows and columns
SmartSheet: Lock or Unlock Columns and Rows

"Freeze" is often mentioned, but "lock" seems less ambiguous. When "freeze" is used, it is often documented as "to freeze (lock)" Or, as above, "Freeze panes to lock rows and columns". I think that "lock" is the least confusing, and if others have to repeatedly explain "freeze" by saying "lock", enough said. I did see in AirTable, their docs confusingly repeat the phrase "freeze (lock)" in explaining how to use the functionality, and at the end used the term "fixed" once. The term "fix" can be very confusing and difficult to translate meaningfully.

IBM in one instance refers to this as "Lock Column as Header" -- we could say "Lock First Column as Header", but I can see the first column being used for comparison and not as a header.

russorat commented 6 years ago

after looking at this, i've asked @alexpaxton to look into a simple way to format numbers in the table.

russorat commented 6 years ago

also, eventually, we may be able to use influxql functions for this: https://github.com/influxdata/influxdb/issues/9625 https://github.com/influxdata/influxdb/issues/9626 https://github.com/influxdata/influxdb/issues/9627 https://github.com/influxdata/influxdb/issues/9628

alexpaxton commented 6 years ago

screen shot 2018-03-23 at 12 43 19 pm

The UI for number formatting would be super simple (at least for this initial release) The input would be type="number" to prevent users inputting decimals or non-numerical characters. You can also enforce a max/min from the HTML itself.

This input would either truncate the value or add 0s to the end depending on the value

I'm also thinking that we should right-align cells with numerical data to ensure the decimal point is vertically aligned within each column. I arbitrarily put 3 as a reasonable default for decimal places to show.

I think in the future we'll move towards scoping some of these options (thresholds, decimal places, suffix/prefix) by column instead of applying to the whole table

russorat commented 6 years ago

I think that makes sense

russorat commented 6 years ago

[x] headers slightly off due to vertical scroll bar

russorat commented 6 years ago

[x] Need a way to reorder columns in the table (@ebb-tide)
[x] Need a way to adjust the size of the columns. Sometimes they are really wide even if the data isn't (@ischolten)
[x] Group by data should appear as a column duplicated for each row. This would allow you to use queries like select host, usage_user from "telegraf"."autogen"."cpu" group by host limit 1 and get a table with two columns: host and usage_user. Ask @ebb-tide for examples spreadsheet (@ebb-tide )
[x] In Thresholds, the default should always be the normal display of data (black with blue text). Only items that hit a threshold should have the text or background changed. ( FYI @alexpaxton )
[x] don't apply threshold values to the time column (@ebb-tide )

micw commented 6 years ago

Great work! Will there be an initial version available in 1.4.4?

russorat commented 6 years ago

feedback from demo:

[x] see if there is a way to fix the ugly scroll bars on firefox

russorat commented 6 years ago

Found this issue with table graphs. When jumping to the CEO, the query and visualization jumps back to the old mode.

kapture 2018-04-27 at 12 41 01

russorat commented 6 years ago

[x] need to fix the render of subqueries: select sum("rate") from (SELECT difference("usage_user") AS "rate" FROM "kube-infra"."autogen"."cpu" WHERE time > :dashboardTime: GROUP BY *) WHERE "rate" > 0 GROUP BY cpu

russorat commented 6 years ago

Final few requests after using this for a little bit:

[x] number values in the table should be right aligned, all other values should be left aligned. In future releases, we may allow this to be configurable by columns.
[x] Do not highlight text values with thresholds. we may add a feature later specifically for non-numerical values
[x] when time column is hidden, stop syncing the scroll with other graphs.

russorat commented 6 years ago

[x] left align number is being covered by the scroll bar. Could we shift it to the left a little bit?
[ ] double clicking on a frozen left column highlights the entire column (or multiple rows). Is there a way to get it to highlight a single value? Not sure if it's OS and browser specific or some css thingy.

kapture 2018-05-03 at 17 10 06

influxdata / chronograf

Dashboard Table Graph Format #1686