Packages

pui

1.0.0-beta.17
1.0.0-beta.18 1.0.0-beta.17 1.0.0-beta.16 1.0.0-beta.15 1.0.0-beta.14 1.0.0-beta.13 1.0.0-beta.12 1.0.0-beta.11 1.0.0-beta.10 1.0.0-beta.9 1.0.0-beta.8 1.0.0-beta.7 1.0.0-beta.6 1.0.0-beta.5 1.0.0-beta.4 1.0.0-beta.3 1.0.0-beta.1 1.0.0-alpha.32 1.0.0-alpha.31 1.0.0-alpha.30 1.0.0-alpha.29 1.0.0-alpha.28 1.0.0-alpha.27 1.0.0-alpha.26 1.0.0-alpha.25 1.0.0-alpha.24 1.0.0-alpha.23 1.0.0-alpha.22 1.0.0-alpha.21 1.0.0-alpha.19 1.0.0-alpha.18 1.0.0-alpha.17 1.0.0-alpha.16 1.0.0-alpha.15 1.0.0-alpha.14 1.0.0-alpha.13 1.0.0-alpha.12 1.0.0-alpha.11

A Phoenix LiveView UI toolkit

HexDocs

Current section

Files

Jump to
Readme
38 Versions
2 Dependencies
Dependants
Files
Activity
pui assets js sparkline_chart.js
Raw

assets/js/sparkline_chart.js 

import ChartHook from "./chart_hook";



export default class SparklineChart extends ChartHook {

  measureSize(payload) {

    const width = Math.max(

      Math.round(this.root?.clientWidth || this.el.clientWidth || 0),

      48,

    );



    return {

      width,

      height: payload.height || 56,

    };

  }



  buildOptions(payload, size) {

    const options = super.buildOptions(

      {

        ...payload,

        preset: "line",

        grid: false,

        tooltip: { ...payload.tooltip, show: false },

        legend: { ...payload.legend, show: false, live: false },

      },

      size,

    );



    return {

      ...options,

      padding: [4, 2, 4, 2],

      cursor: { show: false },

      select: { show: false },

      legend: { show: false },

      axes: [{ show: false }, { show: false }],

      series: options.series.map((series, index) => {

        if (index === 0) {

          return series;

        }



        return {

          ...series,

          width: payload.series[index - 1]?.width ?? 1.5,

          points: { show: false },

          fill:

            payload.series[index - 1]?.fill || this.withAlpha(series.stroke, 0.18),

          paths: this.uPlot.paths.linear(),

        };

      }),

    };

  }

}