ai_coder/visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #7 from fehrlich/plotly-tables

Browse Source 
Plotly tables
This commit is contained in:
Henning Dieterichs
2021-08-11 12:40:49 +02:00
committed by GitHub
parent d8e18743c0 ffcd3c9ad1
commit 0460009bd2
3 changed files with 26 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
playground/src/demo.editable.json
View File

@@ -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"

17
visualization-bundle/src/visualizers/plotly-visualizer/PlotlyViewer.tsx
View File

@@ -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<Plotly.Layout> {
function getLayout(theme: Theme): Partial<PlotlyLayoutAnyTemplate> {
return {
colorway: [
"#636efa",
@@ -140,11 +145,19 @@ function getLayout(theme: Theme): Partial<Plotly.Layout> {
"--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<Plotly.Layout> = {
const darkLayout: Partial<PlotlyLayoutAnyTemplate> = {
colorway: [
"#636efa",
"#EF553B",

7
visualization-bundle/src/visualizers/plotly-visualizer/index.tsx
View File

@@ -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(