diff --git a/playground/src/demo.editable.json b/playground/src/demo.editable.json index 08d37f6..f16911c 100644 --- a/playground/src/demo.editable.json +++ b/playground/src/demo.editable.json @@ -8,6 +8,10 @@ "dataSrc": "{\r\n \"kind\": {\r\n \"plotly\": true\r\n },\r\n \"data\": [\r\n {\r\n \"type\": \"mesh3d\",\r\n \"x\": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9 ],\r\n \"y\": [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ],\r\n \"z\": [\r\n 0,\r\n 0.8414709848078965,\r\n 0.9092974268256817,\r\n 0.1411200080598672,\r\n -0.7568024953079282,\r\n -0.9589242746631385,\r\n -0.27941549819892586,\r\n 0.6569865987187891,\r\n 0.9893582466233818,\r\n 0.4121184852417566,\r\n 0.8414709848078965,\r\n 1.682941969615793,\r\n 1.7507684116335782,\r\n 0.9825909928677637,\r\n 0.0846684894999683,\r\n -0.11745328985524195,\r\n 0.5620554866089706,\r\n 1.4984575835266856,\r\n 1.8308292314312782,\r\n 1.253589470049653,\r\n 0.9092974268256817,\r\n 1.7507684116335782,\r\n 1.8185948536513634,\r\n 1.0504174348855488,\r\n 0.1524949315177535,\r\n -0.049626847837456745,\r\n 0.6298819286267558,\r\n 1.5662840255444708,\r\n 1.8986556734490634,\r\n 1.3214159120674382,\r\n 0.1411200080598672,\r\n 0.9825909928677637,\r\n 1.0504174348855488,\r\n 0.2822400161197344,\r\n -0.615682487248061,\r\n -0.8178042666032712,\r\n -0.13829549013905865,\r\n 0.7981066067786563,\r\n 1.130478254683249,\r\n 0.5532384933016238,\r\n -0.7568024953079282,\r\n 0.0846684894999683,\r\n 0.1524949315177535,\r\n -0.615682487248061,\r\n -1.5136049906158564,\r\n -1.7157267699710665,\r\n -1.036217993506854,\r\n -0.09981589658913914,\r\n 0.23255575131545358,\r\n -0.3446840100661716,\r\n -0.9589242746631385,\r\n -0.11745328985524195,\r\n -0.049626847837456745,\r\n -0.8178042666032712,\r\n -1.7157267699710665,\r\n -1.917848549326277,\r\n -1.2383397728620644,\r\n -0.3019376759443494,\r\n 0.030433971960243333,\r\n -0.5468057894213818,\r\n -0.27941549819892586,\r\n 0.5620554866089706,\r\n 0.6298819286267558,\r\n -0.13829549013905865,\r\n -1.036217993506854,\r\n -1.2383397728620644,\r\n -0.5588309963978517,\r\n 0.3775711005198632,\r\n 0.7099427484244559,\r\n 0.13270298704283073,\r\n 0.6569865987187891,\r\n 1.4984575835266856,\r\n 1.5662840255444708,\r\n 0.7981066067786563,\r\n -0.09981589658913914,\r\n -0.3019376759443494,\r\n 0.3775711005198632,\r\n 1.3139731974375781,\r\n 1.646344845342171,\r\n 1.0691050839605456,\r\n 0.9893582466233818,\r\n 1.8308292314312782,\r\n 1.8986556734490634,\r\n 1.130478254683249,\r\n 0.23255575131545358,\r\n 0.030433971960243333,\r\n 0.7099427484244559,\r\n 1.646344845342171,\r\n 1.9787164932467636,\r\n 1.4014767318651384,\r\n 0.4121184852417566,\r\n 1.253589470049653,\r\n 1.3214159120674382,\r\n 0.5532384933016238,\r\n -0.3446840100661716,\r\n -0.5468057894213818,\r\n 0.13270298704283073,\r\n 1.0691050839605456,\r\n 1.4014767318651384,\r\n 0.8242369704835132\r\n ]\r\n }\r\n ]\r\n}", "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(