.js charts somewhere other than assets directory

Dash Python
1

Hello,
I recently watched and LOVED what Adam does in this video:

My question is - is there a way to allow the .js files to be located somewhere other than the ‘assets’ dir?

My goal would be the ability to have a directory that has all the .js components in it, rathe than having this and all the .css, static images, etc mixed in one directory.

Thank you

2

Hello @anarchocaps,

Yes, this is possible, you can utilize flask’s architecture for some help.

Then you can create routes and cater from different directories as well.

3

hi @jinnyzor ,

Thanks for your response.

So in my code:

clientside_callback(
    ClientsideFunction(namespace="highcharts", function_name="multi_axes"),
    Output(f"{DAYPARTING.ROUTE}_dayparting-chart", "children"),
    Input(f"{DAYPARTING.ROUTE}_dayparting", "data"),
    Input(f"{DAYPARTING.ROUTE}_groupby_filter", "value"),
    State(f"{DAYPARTING.ROUTE}_dayparting-chart", "title"),
    State(f"{DAYPARTING.ROUTE}_dayparting-chart", "id"),
)

window.dash_clientside = Object.assign({}, window.dash_clientside, {
  highcharts: {
    multi_axes: function (allData, selectedFilter, title, id) {
      if (!allData) return window.dash_clientside.no_update;
      data = allData.filter((item) => item.group_by === selectedFilter)[0];
      categories = data.categories;
      data = data.data;
      const yaxes = [
        {...

I am stating the namespace and function_name, but I am just not seeing where the change the directory that the .js file is located in.

4

If you dont care about the files loading all at the beginning of the app layout, then you can split your assets folder into multiple directories eg (scripts, stylesheets, images, etc)

If you do care, then you need can create a static directory in the main app’s folder and create your subdirectory and pull the files as you need them.

5

I am trying to find what you are describing, in the docs, but I am unable to.

Sorry - just trying to make sure I understand.
So I need to create a directory called ‘static’ on the root dir, and within this I can create a ‘components’ dir with all the .js files?
If I do this, then what do I need to my code above to make it work?
I already tried creating a ‘components’ directory within ‘assets’, but the code above didn’t work with this…

6

You need to make sure you reload your whole app, by re running, not just relying on the hot reload.