Can not render plotly type "table"

[viettran97118]

var values = [
      ['Salaries', 'Office', 'Merchandise', 'Legal', '<b>TOTAL</b>'],
      [1200000, 20000, 80000, 2000, 12120000],
      [1300000, 20000, 70000, 2000, 130902000],
      [1300000, 20000, 120000, 2000, 131222000],
      [1400000, 20000, 90000, 2000, 14102000]]

var data = [{
  type: 'table',
  header: {
    values: [["<b>EXPENSES</b>"], ["<b>Q1</b>"],
                 ["<b>Q2</b>"], ["<b>Q3</b>"], ["<b>Q4</b>"]],
    align: "center",
    line: {width: 1, color: 'black'},
    fill: {color: "grey"},
    font: {family: "Arial", size: 12, color: "white"}
  },
  cells: {
    values: values,
    align: "center",
    line: {color: "black", width: 1},
    font: {family: "Arial", size: 11, color: ["black"]}
  }
}]

Plotly.newPlot(element, data);

I can not render table when use custom in charge, how about i can do it?

[viettran97118]

I provide more information:

[eradman]

This does work if we import the Plotly table trace:

diff --git a/viz-lib/src/visualizations/chart/plotly/index.ts b/viz-lib/src/visualizations/chart/plotly/index.ts
index 8680f5f6..d2f52e3f 100644
--- a/viz-lib/src/visualizations/chart/plotly/index.ts
+++ b/viz-lib/src/visualizations/chart/plotly/index.ts
@@ -9,6 +9,8 @@ import histogram from "plotly.js/lib/histogram";
 import box from "plotly.js/lib/box";
 // @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
 import heatmap from "plotly.js/lib/heatmap";
+// @ts-expect-error ts-migrate(7016) FIXME: Could not find a declaration file for module 'plot... Remove this comment to see the full error message
+import table from "plotly.js/lib/table";

 import prepareData from "./prepareData";
 import prepareLayout from "./prepareLayout";
@@ -18,7 +20,7 @@ import updateChartSize from "./updateChartSize";
 import { prepareCustomChartData, createCustomChartRenderer } from "./customChartUtils";

 // @ts-expect-error ts-migrate(2339) FIXME: Property 'register' does not exist on type 'typeof... Remove this comment to see the full error message
-Plotly.register([bar, pie, histogram, box, heatmap]);
+Plotly.register([bar, pie, histogram, box, heatmap, table]);
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'setPlotConfig' does not exist on type 't... Remove this comment to see the full error message
 Plotly.setPlotConfig({
   modeBarButtonsToRemove: ["sendDataToCloud"],

@viettran97118 you bring up a much needed fature. There are many plotly visualizations we could use, but are not made available without a custom build!

I will investigate means of configuring this.

[viettran97118]

So, i see. Can you add Plotly.register([bar, pie, histogram, box, heatmap]); => Plotly.register([bar, pie, histogram, box, heatmap, treemap, table, indicator, scatter, parcats, splom, funnel, waterfall]);

but, table, indicator are simple type. it is used frequently.

[eradman]

Adding the additional libraries is easy, but this adds to the size of the application:

vendors~app.js before: Transfered: 7.78 Size: 35.22 MB

vendors~app.js after: Transfered: 8.43 Size: 38.15 MB

This is an 8% increase in the size.

Secondaly, there are a wide range of charts to choose from, and we don't know what others need. (I would personaly would like to have access to sunburst and treemap.)

For reference, here are the available chart types:

du -sh ./node_modules/plotly.js/src/traces/*
58K     ./node_modules/plotly.js/src/traces/bar
18K     ./node_modules/plotly.js/src/traces/barpolar
44K     ./node_modules/plotly.js/src/traces/box
7.0K    ./node_modules/plotly.js/src/traces/candlestick
82K     ./node_modules/plotly.js/src/traces/carpet
17K     ./node_modules/plotly.js/src/traces/choropleth
14K     ./node_modules/plotly.js/src/traces/choroplethmapbox
13K     ./node_modules/plotly.js/src/traces/cone
58K     ./node_modules/plotly.js/src/traces/contour
20K     ./node_modules/plotly.js/src/traces/contourcarpet
5.5K    ./node_modules/plotly.js/src/traces/contourgl
17K     ./node_modules/plotly.js/src/traces/densitymapbox
25K     ./node_modules/plotly.js/src/traces/funnel
19K     ./node_modules/plotly.js/src/traces/funnelarea
39K     ./node_modules/plotly.js/src/traces/heatmap
9.0K    ./node_modules/plotly.js/src/traces/heatmapgl
40K     ./node_modules/plotly.js/src/traces/histogram
14K     ./node_modules/plotly.js/src/traces/histogram2d
5.0K    ./node_modules/plotly.js/src/traces/histogram2dcontour
21K     ./node_modules/plotly.js/src/traces/image
28K     ./node_modules/plotly.js/src/traces/indicator
22K     ./node_modules/plotly.js/src/traces/isosurface
14K     ./node_modules/plotly.js/src/traces/mesh3d
21K     ./node_modules/plotly.js/src/traces/ohlc
44K     ./node_modules/plotly.js/src/traces/parcats
53K     ./node_modules/plotly.js/src/traces/parcoords
43K     ./node_modules/plotly.js/src/traces/pie
11K     ./node_modules/plotly.js/src/traces/pointcloud
39K     ./node_modules/plotly.js/src/traces/sankey
80K     ./node_modules/plotly.js/src/traces/scatter
20K     ./node_modules/plotly.js/src/traces/scatter3d
17K     ./node_modules/plotly.js/src/traces/scattercarpet
21K     ./node_modules/plotly.js/src/traces/scattergeo
39K     ./node_modules/plotly.js/src/traces/scattergl
22K     ./node_modules/plotly.js/src/traces/scattermapbox
15K     ./node_modules/plotly.js/src/traces/scatterpolar
13K     ./node_modules/plotly.js/src/traces/scatterpolargl
17K     ./node_modules/plotly.js/src/traces/scatterternary
29K     ./node_modules/plotly.js/src/traces/splom
16K     ./node_modules/plotly.js/src/traces/streamtube
40K     ./node_modules/plotly.js/src/traces/sunburst
22K     ./node_modules/plotly.js/src/traces/surface
33K     ./node_modules/plotly.js/src/traces/table
36K     ./node_modules/plotly.js/src/traces/treemap
27K     ./node_modules/plotly.js/src/traces/violin
8.0K    ./node_modules/plotly.js/src/traces/volume
26K     ./node_modules/plotly.js/src/traces/waterfall

[guidopetri]

Could this be configurable on an env var level? Personally, I would love to have access to all chart types, and I'd be fine paying the 8% cost in application size.

[deecay]

FYI, there are some chart types that needs third "axis", such as heatmapgl (x, y and value). Currently the visualization only make 2 axis available, so not all chart types are usable unless we extend the amount of data available to the user.

[eradman]

@guidopetri the difficulty is that the Plotly library is bundled/minimized when the frontend is built, so I don't see an way to dynamically load additional functionality. Perhaps a built-time option to include the entire library would be useful.

[viettran97118]

FYI, there are some chart types that needs third "axis", such as heatmapgl (x, y and value). Currently the visualization only make 2 axis available, so not all chart types are usable unless we extend the amount of data available to the user.

Oh, i understand. but i just need 2d chart. (table or kpi card)...

[viettran97118]

Could this be configurable on an env var level? Personally, I would love to have access to all chart types, and I'd be fine paying the 8% cost in application size.

I agree. I am Data Analysis, I I would love to have access to all chart types. This help me a lot.

[guidopetri]

@guidopetri the difficulty is that the Plotly library is bundled/minimized when the frontend is built, so I don't see an way to dynamically load additional functionality. Perhaps a built-time option to include the entire library would be useful.

Ah, yes, this is what I meant - an arg that enables it during build or that compiles it when the docker container is launched or something. We could set it up under a different image tag if needed.

[eradman]

I spent time experiementing with the NormalModuleReplacementPlugin, which should be able to patch the imports at built time.

It only works partially: it updates some import lines, but seems to miss others. This diff assumes a new file viz-lib/src/visualizations/chart/plotly/index-all.ts which imports all chart types:

diff --git a/viz-lib/webpack.config.js b/viz-lib/webpack.config.js
index d716ecd1..6d9a7934 100644
--- a/viz-lib/webpack.config.js
+++ b/viz-lib/webpack.config.js
@@ -1,9 +1,17 @@
 const LessPluginAutoPrefix = require("less-plugin-autoprefix");
 const path = require("path");
+const webpack = require("webpack");

 const isProduction = process.env.NODE_ENV === "production";
+const isPlotlyBuildAll = process.env.PLOTLY_BUILD === "all";

 module.exports = {
+  plugins: [
+    new webpack.NormalModuleReplacementPlugin(
+      /plotly$/,
+      resource => resource.request += isPlotlyBuildAll ? "/index-all" : ""
+    )
+  ],
   mode: isProduction ? "production" : "development",
   entry: "./src/index.ts",
   output: {

[viettran97118]

Oh Great, Are you ready to deploy it to the front end?

[eradman]

Oh Great, Are you ready to deploy it to the front end?

No, I need to find an alternate approach, or figure out why this is not working.

I can see that this webpack is accessing the alternate file (index-all.ts) after setting PLOTLY_BUILD=all, but the final output (vendors~app.js) still contains the default imports.

[eradman]

I found that trying to support alternate frontend builds was very complicated. One of the difficulties is that the frontend may be built inside or external to a docker container.

Instead I proposed a change to import all plotly chart types in #6673. The final build does not seem to be larger, so there may be no downside to doing this!

[guidopetri]

6673 just got merged (thanks Eric!). @viettran97118 , can you verify with the latest preview image that you can now render plotly tables?

[viettran97118]

Yay, it is a good news in 2024. I will check it and report as soon.

[viettran97118]

I started preview image. It's working!

[eradman]

Thanks for confirming @viettran97118! Closing

[viettran97118]

@eradman, do you have plan update new version lastest image, right?

[eradman]

The latest image should be built automatically

https://hub.docker.com/r/redash/preview

[trantrinhquocviet]

@eradman , @guidopetri

So, I have problem when update current version redash to preview image. I thinks, have problem when init database right?

But, when i setup local it no problem.

[eradman]

@trantrinhquocviet the warnings in the screenshot you posted are normal, and also unrelated to this ticket.

Please start a new issue showing the errors you saw when upgrading the preview image.