@domoinc/multiline-chart/bower_components/DomoTooltip/CreateWidget.js

MultiLineChart - Domo Widget

var aHeight = 400;
var aWidth  = 400;


/*----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
 CHART NUMBER 1 TEXT-RECT-TEXT
 ----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------*/
var chart1Vars = {
  padding: 10,

  tooltipHeaderStyle: {
    fill: '#f68c35',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  },

  tooltipDividerLineStyle: {
    'stroke': '#e4e5e5',
    'stroke-width': '1px',
    'fill': 'none'
  },

  tooltipValueStyle : {
    fill: '#555555',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  },

  tooltipLabelStyle: {
    fill: '#888888',
    'font-size': '12px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  }
};

initToolTip(
  "vis"
  , 'Complex Text Rect Text'
  , {
    aHeight: aHeight,
    aWidth: aWidth
  }
  , {
    opacity: 1,
    format:'textRectText',
    caretSize: 5,
    padding: chart1Vars.padding,
    tooltipBackgroundColor: '#f2f2f2',
    autoTriggerMoveToEvent: true
  }
  , initChart1Appends
  , drawChart1
);

/**
 *  initChart2Appends
 */
function initChart1Appends(appends) {
  var tooltipGroup = appends.append('g');

  //Layout Header
  chart1Vars.headerText = tooltipGroup.append('text')
    .attr({
      x: chart1Vars.padding,
      y: 10,
      'text-anchor': 'start',
      dy: 6.3
    })
    .classed('tooltipCampaign', true);

  //Layout divider
  chart1Vars.dividerLine = tooltipGroup.append('line')
    .attr({
      x1: -chart1Vars.padding,
      y1: 31,
      y2: 31
    })
    .classed('tooltipLine', true);

  //Layout Bottom Text
  chart1Vars.labelText = tooltipGroup.append('text')
    .attr({
      x: chart1Vars.padding,
      y: 56.3,
      'text-anchor': 'start',
      dy: 4.2
    })
    .classed('tooltipLabel', true);

  chart1Vars.valueText = tooltipGroup.append('text')
    .attr({
      x: chart1Vars.padding,
      y: 78.3,
      'text-anchor': 'start',
      dy: 6.3
    })
    .classed('tooltipValue', true)
}

/**
 *  drawChart2
 */
function drawChart1(chart) {
  var padding = 10;

  chart1Vars.headerText
    .style(chart1Vars.tooltipHeaderStyle)
    .text('Woot!');

  chart1Vars.dividerLine
    .style(chart1Vars.tooltipDividerLineStyle)
    .attr('x2', 0);

  chart1Vars.labelText
    .style(chart1Vars.tooltipLabelStyle)
    .text('I\'m A Label!');

  chart1Vars.valueText
    .style(chart1Vars.tooltipValueStyle)
    .text('I\'m A Value!');

  chart.trigger('draw');

  chart._appends.select('line').attr({x2: chart._appends.node().getBBox().width + padding});
}



/*----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
 CHART NUMBER 2 TEXT-RECT-TEXT
 ----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------*/
var chart2Vars = {
  fontSize : 12,
  tooltipTextColor : 'white',
  textFontFamily : 'Open Sans'
};
initToolTip(
  "vis2"
  , 'Text Rect Text'
  , {
    aHeight: aHeight,
    aWidth: aWidth
  }
  , {
    opacity: 1,
    format:'textRectText',
    caretSize: 5,
    padding: 10,
    tooltipBackgroundColor: 'grey',
    autoTriggerMoveToEvent: true
  }
  , initChart2Appends
  , drawChart2
);

/**
 *  initChart2Appends
 */
function initChart2Appends(appends) {
  chart2Vars.__tooltipValue = appends.append('text');
  chart2Vars.__tooltipRect  = appends.append('rect');
  chart2Vars.__tooltipLabel = appends.append('text');
}

/**
 *  drawChart2
 */
function drawChart2(chart) {
  chart2Vars.__tooltipValue
    .style({
      fill: chart2Vars.tooltipTextColor,
      'font-size': chart2Vars.fontSize + 'px',
      'font-family': chart2Vars.textFontFamily
    })
    .text('10M');

  chart2Vars.__tooltipRect.style('fill', chart2Vars.tooltipTextColor);

  chart2Vars.__tooltipLabel.style({
    fill: chart2Vars.tooltipTextColor,
    'font-size': chart2Vars.fontSize + 'px',
    'font-family': chart2Vars.textFontFamily
  })
    .text('Glorious');

  chart.trigger('draw');
}




/*----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
 CHART NUMBER 3 TEXT-BLOCK
 ----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/
var char3Vars = {
  fontSize : 12,
  tooltipTextColor : 'white',
  textFontFamily : 'Open Sans'
};

initToolTip(
  'vis3'
  , 'Text Block'
  , {
    aHeight: aHeight,
    aWidth: aWidth
  }
  , {
    opacity: 1,
    format:'textBlock',
    maxWidth: 170,
    caretSize: 5,
    padding: 10,
    tooltipBackgroundColor: 'grey',
    autoTriggerMoveToEvent: true
  }
  , initTooltipContent3
  , tooltipOnTriggerDraw3
);

//setupTooltipContent2
function initTooltipContent3 (appends) {
  char3Vars.__tooltipValue = appends.append('text');
}

//Setup Listener to draw the tooltip.
function tooltipOnTriggerDraw3(chart) {
  char3Vars.__tooltipValue
    .style({
      fill: char3Vars.tooltipTextColor,
      'font-size': char3Vars.fontSize + 'px',
      'font-family': char3Vars.textFontFamily
    })
    .text('Your mother was a hamster and father smelled of elder berries.');

  chart.trigger('draw');
}


/*----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
 CHART NUMBER 4 TEXT-BLOCK
 ----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------*/
var char4Vars = {
  fontSize : 11,
  tooltipTextColor : 'white',
  textFontFamily : 'Open Sans'
};

initToolTip(
  'vis4'
  , 'Simple Text'
  , {
    aHeight: aHeight,
    aWidth: aWidth
  }
  , {
    opacity: 1,
    format:'text',
    caretSize: 5,
    padding: 10,
    tooltipBackgroundColor: 'grey',
    autoTriggerMoveToEvent: true
  }
  , initTooltipContent4
  , tooltipOnTriggerDraw4
);

//setupTooltipContent2
function initTooltipContent4 (appends) {
  char4Vars.__tooltipValue = appends.append('text');
}

//Setup Listener to draw the tooltip.
function tooltipOnTriggerDraw4(chart) {
  char4Vars.__tooltipValue
    .style({
      fill: char4Vars.tooltipTextColor,
      'font-size': char4Vars.fontSize + 'px',
      'font-family': char4Vars.textFontFamily
    })
    .text('Your mother was a hamster and father smelled of elder berries.');

  chart.trigger('draw');
}





/*----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
  TOOLTIP CHAR INIT FUNCTION
 ----------------------------------------------------------------------------------
 ----------------------------------------------------------------------------------
----------------------------------------------------------------------------------*/

/**
 *  Inits a new domotooltip
 */
function initToolTip(div, divTitle, configs, widgetConfig, appendInitFn, drawFn) {
  var chartGroup;
  var chart;

  init();
  return chart;

  /**
   *  init
   */
  function init() {
    initSvg();
    initChart();
    draw(); //Simulate draw and move, so that tooltip starts on screen.
  }

  /**
   *  initChart
   */
  function initChart() {
    //Initialze the widget
    chart = chartGroup.chart("DomoTooltip").c(widgetConfig);

    appendInitFn(chart._appends);
    chart.base.on('mouseover', function() {drawFn(chart);});
    chart.base.on('mouseout', function () { chart.trigger('remove'); });

    chart.draw();
  }

  /**
   *  draw
   */
  function draw() {
    drawFn(chart);
    chart.trigger('moveTo', {x:configs.aHeight/2, y:configs.aWidth/2});
  }

  /**
   *  initSvg
   */
  function initSvg() {
    chartGroup = d3.select("#" + div)
      .append("svg")
      .style('height', (configs.aHeight) + 'px')
      .style('width', (configs.aWidth) + 'px')
      .append('g');

    //Added Background rect
    chartGroup.append("rect")
      .attr("height", configs.aHeight + 'px')
      .attr("width", configs.aWidth + 'px')
      .attr("stroke", "black")
      .style({'fill': 'white', "fill-opacity": 1});

    var titleSize = 14;
    chartGroup.append('text')
      .attr({y: titleSize, x:2})
      .style({'font-size': titleSize+'px', 'font-weight': 600, 'fill': '#555'})
      .text(divTitle);
  }
}