Phoenix LiveView hooks with uPlot

uplot-liveview-hooks.ex

{dates, counts} = CountByDateQuery.row_counts_by_date()
|> App.Repo.all()
|> Enum.with_index()
|> Enum.map(fn {{date, count}, index} ->
  {:ok, date} = Timex.parse(date, "%b %Y", :strftime)
  {Timex.to_unix(date), count}
end)
|> Enum.sort()
|> Enum.unzip()

chart_data = Poison.encode!([dates, counts]);

<div phx-hook="PhxChartComponent"
    data-title="Failure rate"
    data-xLabel="Time"
    data-x="400"
    data-yLabel="Count"
    data-y="200"
    data-data="{{ @chart_data }}">
  <div id="chart" style="display: block;"></div>
</div>

Hooks.PhxChartComponent = {
    updated() {
        console.log('Updating chart')
        let data = JSON.parse(this.el.dataset.data)
        console.log(data)
        this.chart.setData(data)
    },
    mounted() {
        let data = [[],[]]

        const opts = {
            width: this.el.dataset.x,
            height: this.el.dataset.y,
            title: this.el.dataset.title,
            cursor: true,
            series: [
                {
                    label: this.el.dataset.xLabel,
                    data: data[0],
                },
                {
                    label: this.el.dataset.yLabel,
                    data: data[1],
                    // scale: "%",
                    // value: v => v.toFixed(1) + "%",
                    color: "red",
                    width: 2,
                    // dash: [10, 5],
                    stroke: "red",
                    fill: "rgba(255,0,0,0.1)",
                }
            ]
        };

        this.chart = new uPlot(opts, data, document.body)
    }
}