@statnett/vue-plotly

    0.3.2 • Public • Published

    vue-plotly Build Status Coverage Status

    Install

    npm install @statnett/vue-plotly plotly.js --save

    Then use it as a module:

    import VuePlotly from '@statnett/vue-plotly'
     
    export default {
      components: {
        VuePlotly
      },
      data: function () {
        return {
          data: [{ x: [1, 3], y: [2, 4] }],
          layout: {},
          options: {}
        }
      }
    }
    <vue-plotly :data="data" :layout="layout" :options="options"/>

    Webpack

    To use vue-plotly with webpack you should see this example repo for how to make that work.

    In short, install ify-loader and transform-loader and add the following to your webpack config:

    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            'ify-loader',
            'transform-loader?plotly.js/tasks/util/compress_attributes.js',
          ]
        }
      ]
    }

    https://plot.ly/javascript/getting-started/#start-plotting might also be relevant.

    Browser

    The browser UMD build is located in the dist folder.

    Props

    The component supports the following props:

    • data

      The traces to draw. Will trigger a call to react when changed.

    • layout

      The layout options. Will trigger a relayout when changed.

    • options

      The general options https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_config.js

    • autoResize (default: false, not reactive)

      If true, the graph resizes when the window is resized.

    • watchShallow (default: false, not reactive)

      If true, does not trigger a redraw when child properties of data changes, but not the data object itself. Might be needed for large datasets.

    Events

    All plotly events are captured and emitted as vue events. The names are without the plotly_ prefix. The following events are supported:

    click, hover, unhover, selecting, selected, restyle, relayout, autosize, deselect, doubleclick, redraw, animated

    Function reference

    All functions defined by plotly are available as methods on the component. However it is not recommendable to call most of these manually since it is better to change the reactive properties on the data, layout or options directly, This will in turn trigger an update to the graph. If you do call these manually, the graph data and the props data might not be in sync.

    For certain scenarios though it, like downloading an image, you need to call these functions. You call the functions as you would normally, but without the first argument, the DOM element.

    The following functions are exposed:

    restyle, relayout, update, addTraces, deleteTraces, moveTraces, extendTraces, prependTraces, purge, toImage, downloadImage, plot, newPlot

    Some have special handling:

    • toImage

    Has default png format, and graph width and height pre filled, this can be overridden.

    • downloadImage

    Has default png format, and graph width and height pre filled. Filename is set to the title of the graph and with a date postfix. These can all be overridden.

    • plot

    Deprecated: https://plot.ly/javascript/plotlyjs-function-reference/#plotlyplot

    Accepts no arguments. Uses data, layout and options from the props data.

    • newPlot

    Accepts no arguments. Uses data, layout and options from the props data.

    • react

    Accepts no arguments. Uses data, layout and options from the props data.

    Read more about plotlyjs function reference here: https://plot.ly/javascript/plotlyjs-function-reference/

    Install

    npm i @statnett/vue-plotly

    DownloadsWeekly Downloads

    720

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    120 kB

    Total Files

    6

    Last publish

    Collaborators

    • jdlind
    • gwdekker
    • mokkabonna