## How to add the legend to a widget using the legend-connector

1. `Widget.js`

    At top of the code, add

    ```
    var Legend = require('@domoinc/legend');
    var legendConnector = require('@domoinc/legend-connector');
    ```

    After the `_Chart.mergeConfig`, add

    ```
    _Chart.mergeConfig(legendConnector.getLegendConfigs(daTheme2));
    ```

    At the end of the `transform`, add

    ```
    legendConnector.initializeLegend(_Chart, Legend, _Chart._colorScale);
    setLegendTriggers();
    legendConnector.drawLegend(_Chart, validData, _Chart.a('Series'));
    ```

    The triggers may need modifications to ensure the right data is being passed. The object that the legend returns is `{series: name}`
    
    ```
    function setLegendTriggers() {
      if (_Chart.c('showLegend').value) {
        _Chart.on('dispatch:mouseover', function(obj) {
          _Chart._legend.trigger('external:mouseover', obj);
        });

        _Chart.on('dispatch:mouseout', function() {
          _Chart._legend.trigger('external:mouseout');
        });

        _Chart._legend.on('dispatch:mouseover', function(obj) {
          _Chart.trigger('external:mouseover', obj.series);
        });

        _Chart._legend.on('dispatch:mouseout', function() {
          _Chart.trigger('external:mouseout');
        });
      }
    }
    ```

1. `DomoWidget.js`

    At the top of the code, add

    ```
    var legendConnector;
    if (typeof require !== 'undefined') {
      legendConnector = require('@domoinc/legend-connector');
    } else {
      legendConnector = window.LegendConnector;
    }
    ```

    After `bbox` is defined and before the `container` is removed, add

    ```
    var legendPosition = legendConnector.getLegendPosition(container); //gets the client rect for the legend chartbounds
    ```

    After the `dataName` is set and before `return widget`, add

    ```
    legendConnector.setLegendPosition(widget, legendPosition); //update value for legend position, sets a default if undefined
    widget.prepareForArtboard = legendConnector.prepareForArtboard(widget, widget.a('Series'));
    legendConnector.pullFromArtboard(AutoWidgets, widget, widget.a('Series')); //update legend configs changed on artboard
    ```

1. `CreateWidget.js`

    At the top of the code, add

    ```
    var legendConnector;
    if (typeof require !== 'undefined') {
      legendConnector = require('@domoinc/legend-connector');
    } else {
      legendConnector = window.LegendConnector;
    }
    ```

    Before `chart.draw(data)` and after `chart` is initialized, add

    ```
    //set default legend position
    legendConnector.setLegendPosition(chart);
    ```

1. `auto.html`

    To allow the legend connector to work locally, before the `src/DomoWidget.js` and after the `dist/bundle.js` script tags, add

    ```
    <script type="text/javascript" src="node_modules/@domoinc/legend-connector/dist/bundle.js"></script>
    ```

1. `index.html`

    To allow the legend connector to work locally, before the `src/DomoWidget.js` and after the `dist/bundle.js` script tags, add

    ```
    <script type="text/javascript" src="node_modules/@domoinc/legend-connector/dist/bundle.js"></script>
    ```

1. `webpack.config.js`

    In the externals object, add

    ```
    '@domoinc/legend': {
      root: 'Legend',
      commonjs: '@domoinc/legend',
      commonjs2: '@domoinc/legend',
      amd: 'legend'
    },
    '@domoinc/legend-connector': {
      root: 'LegendConnector',
      commonjs: '@domoinc/legend-connector',
      commonjs2: '@domoinc/legend-connector',
      amd: 'legend-connector'
    }
    ```

1. `package.json`

    Run these commands to get the dependencies and `package.json` updated:

  ```
    npm install @domoinc/legend -S
    npm install @domoinc/legend-connector -S
    ```

    ```
    "@domoinc/legend": "^6.0.11",
    "@domoinc/legend-connector": "0.0.27",
    ```