@domoinc/legend-connector v0.1.0

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",