From 97431a5c892243a9e53facf9839b8e2f3a9f70c0 Mon Sep 17 00:00:00 2001 From: fehrlich Date: Wed, 11 Aug 2021 12:06:35 +0200 Subject: [PATCH 1/2] added plotly tableview --- playground/src/demo.editable.json | 3 +++ .../plotly-visualizer/PlotlyViewer.tsx | 17 +++++++++++++++-- .../src/visualizers/plotly-visualizer/index.tsx | 7 +++++++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/playground/src/demo.editable.json b/playground/src/demo.editable.json index 08d37f6..b950659 100644 --- a/playground/src/demo.editable.json +++ b/playground/src/demo.editable.json @@ -9,6 +9,9 @@ "name": "Plotly 3D Mesh Visualizer" }, { + "dataSrc": "{\r\n \"kind\":{ \"plotly\": true },\r\n \"data\": [{\r\n \"header\": {\r\n \"values\": [\"H1\", \"H2\", \"H3\"]\r\n },\r\n \"cells\": {\r\n \"values\": [\r\n [\"A\", \"B\", \"C\"],\r\n [341319, 281489, 294786],\r\n [4488916, 3918072, 3892124]\r\n ]\r\n },\r\n \"type\": \"table\"\r\n }],\r\n \"layout\": {}\r\n}", + "name": "Plotly Table Visualizer" + }, "dataSrc": "{\r\n \"kind\": { \"graph\": true },\r\n \"nodes\": [\r\n { \"id\": \"1\", \"label\": \"1\" },\r\n { \"id\": \"2\", \"label\": \"2\", \"color\": \"orange\" },\r\n { \"id\": \"3\", \"label\": \"3\" }\r\n ],\r\n \"edges\": [\r\n { \"from\": \"1\", \"to\": \"2\", \"color\": \"red\" },\r\n { \"from\": \"1\", \"to\": \"3\" }\r\n ]\r\n}", "name": "VisJS Graph Visualizer" }, diff --git a/visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx b/visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx index 050ed8c..0362c13 100644 --- a/visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx +++ b/visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx @@ -3,6 +3,11 @@ import { observer } from "mobx-react"; import * as React from "react"; import Plot from "react-plotly.js"; +// needs to be overwriten since the table layout is not defined in @types/plotly.js +interface PlotlyLayoutAnyTemplate extends Plotly.Layout { + template: any; +} + @observer export class PlotlyViewer extends React.Component<{ data: Plotly.Data[]; @@ -47,7 +52,7 @@ export class PlotlyViewer extends React.Component<{ } } -function getLayout(theme: Theme): Partial { +function getLayout(theme: Theme): Partial { return { colorway: [ "#636efa", @@ -140,11 +145,19 @@ function getLayout(theme: Theme): Partial { "--visualizer-plotly-background" ), }, + template: { + data: { + table: [{ + cells: { fill: { color: theme.resolveVarToColor("--visualizer-background") } }, + header: { fill: { color: "rgb(17, 17, 17)" } }, + }] + } + } }; } // extracted from the plotly website -const darkLayout: Partial = { +const darkLayout: Partial = { colorway: [ "#636efa", "#EF553B", diff --git a/visualization-bundle/src/visualizers/plotly-visualizer/index.tsx b/visualization-bundle/src/visualizers/plotly-visualizer/index.tsx index a2f5cf9..5686ae6 100644 --- a/visualization-bundle/src/visualizers/plotly-visualizer/index.tsx +++ b/visualization-bundle/src/visualizers/plotly-visualizer/index.tsx @@ -45,6 +45,12 @@ export const plotlyVisualizer = createVisualizer({ x: sOptionalProp(sDatumArr), y: sOptionalProp(sDatumArr), z: sOptionalProp(sDatumArr), + cells: sOptionalProp(sOpenObject({ + values: sArrayOf(sDatumArr), + })), + header: sOptionalProp(sOpenObject({ + values: sDatumArr, + })), type: sOptionalProp( sUnion([ sLiteral("bar"), @@ -73,6 +79,7 @@ export const plotlyVisualizer = createVisualizer({ sLiteral("funnel"), sLiteral("funnelarea"), sLiteral("scattermapbox"), + sLiteral("table"), ]) ), mode: sOptionalProp( From ffcd3c9ad1800e89776365806e9e53930cd88ed5 Mon Sep 17 00:00:00 2001 From: fehrlich Date: Wed, 11 Aug 2021 12:09:01 +0200 Subject: [PATCH 2/2] fixed commit --- playground/src/demo.editable.json | 1 + 1 file changed, 1 insertion(+) diff --git a/playground/src/demo.editable.json b/playground/src/demo.editable.json index b950659..f16911c 100644 --- a/playground/src/demo.editable.json +++ b/playground/src/demo.editable.json @@ -12,6 +12,7 @@ "dataSrc": "{\r\n \"kind\":{ \"plotly\": true },\r\n \"data\": [{\r\n \"header\": {\r\n \"values\": [\"H1\", \"H2\", \"H3\"]\r\n },\r\n \"cells\": {\r\n \"values\": [\r\n [\"A\", \"B\", \"C\"],\r\n [341319, 281489, 294786],\r\n [4488916, 3918072, 3892124]\r\n ]\r\n },\r\n \"type\": \"table\"\r\n }],\r\n \"layout\": {}\r\n}", "name": "Plotly Table Visualizer" }, + { "dataSrc": "{\r\n \"kind\": { \"graph\": true },\r\n \"nodes\": [\r\n { \"id\": \"1\", \"label\": \"1\" },\r\n { \"id\": \"2\", \"label\": \"2\", \"color\": \"orange\" },\r\n { \"id\": \"3\", \"label\": \"3\" }\r\n ],\r\n \"edges\": [\r\n { \"from\": \"1\", \"to\": \"2\", \"color\": \"red\" },\r\n { \"from\": \"1\", \"to\": \"3\" }\r\n ]\r\n}", "name": "VisJS Graph Visualizer" },