Installation of the uPlot with Phoenix 1.6.6 and Phoenix live view 0.17.5

Phoenix Forum Questions / Help
, , , ,
1

I am doing a course from Poetcoding for doing an app with Cryptocurrency by WebSockets and showing them with Phoenix Live View.
But I am trying to do the course with the new version( v1.6.6 ) of Phoenix by myself.
And I am facing problems when I tried to install the uPlot Javascript.
I installed the uPlot with esbuild wich is a different way of the tutorial wich was used the webpack.
I will tell now the steps I tried to do for the installation of the uPlot:
1 - I go for the folder assets and run the npm install uplot:
npm i uplot --save

so I saw in my package.json this:

{
  "scripts": {
    "deploy": "cd .. && mix assets.deploy && rm -f _build/esbuild"
  },
  "dependencies": {
    "uplot": "^1.6.20"
  }
}

my package.lock.json:

{
  "name": "assets",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "dependencies": {
        "uplot": "^1.6.20"
      }
    },
    "node_modules/uplot": {
      "version": "1.6.20",
      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.20.tgz",
      "integrity": "sha512-Jl4Z51Sns4xKLLQeBeiGdcgv4eW1UkKwukSTndIP3YcnlU4za9qGhejlX+XzRbvjaB32C0pxRsdq8m8Gwbq1Eg=="
    }
  },
  "dependencies": {
    "uplot": {
      "version": "1.6.20",
      "resolved": "https://registry.npmjs.org/uplot/-/uplot-1.6.20.tgz",
      "integrity": "sha512-Jl4Z51Sns4xKLLQeBeiGdcgv4eW1UkKwukSTndIP3YcnlU4za9qGhejlX+XzRbvjaB32C0pxRsdq8m8Gwbq1Eg=="
    }
  }
}

2 - I created the chart.js file and tried to do the logs for the mounted, beforeUpate, updated, etc… and all was working very well. But when I tried to import the CSS and the Javascript of the uPlot my app begins to show a simple and white web interface like without the frontend, like don’t have CSS.

my chart.js file :

import _css from 'uplot/dist/uPlot.min.css'
import uPlot from "uplot"

let ChartHook = {
  mounted() {
    this.trades = [];
    this.plot = new uPlot(plotOptions(), [[], []], this.el);
  },
  updated() {
    let price = parseFloat(this.el.dataset.price),
      timestamp = parseInt(this.el.dataset.tradedAt)

    this.trades.push({
      timestamp: timestamp, price: price
    });

    if(this.trades.length > 20) {
      this.trades.splice(0, 1)
    }
    this.updateChart()
  },

  updateChart() {
    let x = this.trades.map(t => t.timestamp);
    let y = this.trades.map(t => t.price);
    this.plot.setData([x, y]);
  }
}

function plotOptions() {
  return {
    width: 200, height: 80, 
    class: "chart-container",
    cursor: {show: false}, 
    select: {show: false}, 
    legend: {show: false},
    scales: {},
    axes: [
      {show: false},
      {show: false}
    ],
    series: [
      {},
      {
        size: 0,
        width: 2,
        stroke: "white",
        fill: "rgb(45,85,150)",
      },
    ],
  };
}

export { ChartHook }

the chart component:

<div class="chart-component">
   <div phx-hook="Chart"
        id={ "product-chart-#{to_string(@product)}" }
        data-price={ @trade.price }
        data-traded-at={ DateTime.to_unix(@trade.traded_at, :millisecond) }
        phx-update="ignore"
    >
      <div class="chart-container"></div>
    </div>
 </div>

I am thinking it was the import of the CSS in the chart.js file because I saw something about the esbuild to not put the import of the app.css file in the app.js for something.
I would like to have a help for this. What I need to do for continue working on this project?
I need to do the steps for install the uPlot in a different way?
My app on github

2

Since esbuild is not responsible for the CSS in this project, the import has to take place from within an scss file, such as app.scss.

I was able to get this working in the project by adding --load-path=../assets/node_modules to the dart_sass config’s args property in config.exs, like this:

config :dart_sass,
  version: "1.49.11",
  default: [
    args: ~w(css/app.scss ../priv/static/assets/app.css --load-path=../assets/node_modules),
    cd: Path.expand("../assets", __DIR__)
  ]

Followed by an import of the css at the top of app.scss:

@use "uplot/dist/uPlot.min.css";
@import "./phoenix.scss";
@import "./poeticoins.scss";

I don’t know why it has to be an @use, but @import did not work.

In the end, the charts render like this:

Screen Shot 2022-05-04 at 7.50.55 AM

Hopefully this helps!

3 Likes
3

This worked, thank you very much @ChristianAlexander!
I think this @import not worked because the file of the uPlot is a CSS file and before this problem I installed the DartSass and it was needed to change the extension .css for .scss of the @import phoenix.scss file to work.

1 Like