@domoinc/legend-connector

LegendConnector - Domo Widget

Stats

StarsIssuesVersionUpdatedCreatedSize
@domoinc/legend-connector
0.1.05 years ago5 years agoMinified + gzip package size for @domoinc/legend-connector in KB

Readme

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');
        });
      }
    }
    
  2. 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
    
  3. 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);
    
  4. 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>
    
  5. 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>
    
  6. 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'
    }
    
  7. 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",
  ```

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.