redash: Can not render plotly type "table"

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?

About this issue

Original URL
State: closed
Created 8 months ago
Comments: 22 (1 by maintainers)

Most upvoted comments

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!

eradman on Dec 22, 2023

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

guidopetri on Jan 7, 2024

The latest image should be built automatically

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

eradman on Jan 9, 2024

Thanks for confirming @viettran97118! Closing

eradman on Jan 9, 2024

I started preview image. It’s working!

viettran97118 on Jan 9, 2024

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 on Nov 18, 2023

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: {

eradman on Nov 17, 2023