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

MultiLineChart - Domo Widget

//Setup some fake data
var data = [
  ['Grand Master Tooltip'],
  ["I'm with stupid ->"],
  ["<- I'm with stupid"],
  ["Really small area"],
  ["This is a block of text.  It will wrap according to maxWidth"],
  ["This has padding"]
];

var aHeight = 500;
var aWidth = 550;
var smallHeight = 50;
var smallWidth = 300;

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .style('height', aHeight + 'px')
  .style('width', aWidth + 'px')
  .append('g')
  .chart("DomoTooltip")
  .opacity(1)
  .format('textRectText')
  .caretSize(5)
  .c({
    padding: 10,
    tooltipBackgroundColor: '#f2f2f2'
  });

//Render the chart with data
chart.draw(data);

chart.base.insert("rect", ":first-child")
  .attr("y", aHeight / 2 + "px")
  .attr("x", aWidth / 2 + "px")
  .attr("height", 50 + 'px')
  .attr("width", 50 + 'px')
  .style({
    'fill': '#bada55',
    "fill-opacity": 1
  });
chart.base.insert("rect", ":first-child")
  .attr("height", aHeight + 'px')
  .attr("width", aWidth + 'px')
  .attr("stroke", "black")
  .style({
    'fill': 'white',
    "fill-opacity": 1
  });

var padding = 10;
var tooltipGroup;

tooltipGroup = chart._appends.append('g')

tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 10,
    'text-anchor': 'start',
    dy: 6.3
  })
  .style({
    fill: '#f68c35',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipCampaign', true)

tooltipGroup.append('line')
  .attr({
    x1: -padding,
    y1: 31,
    y2: 31
  })
  .style({
    'stroke': '#e4e5e5',
    'stroke-width': '1px',
    'fill': 'none'
  })
  .classed('tooltipLine', true)

tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 56.3,
    'text-anchor': 'start',
    dy: 4.2
  })
  .style({
    fill: '#888888',
    'font-size': '12px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipLabel', true)
tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 78.3,
    'text-anchor': 'start',
    dy: 6.3
  })
  .style({
    fill: '#555555',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipValue', true)

tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 112.3,
    'text-anchor': 'start',
    dy: 4.2
  })
  .style({
    fill: '#888888',
    'font-size': '12px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipLabel', true)
tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 133.3,
    'text-anchor': 'start',
    dy: 6.3
  })
  .style({
    fill: '#555555',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipValue', true)

tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 168.3,
    'text-anchor': 'start',
    dy: 4.2
  })
  .style({
    fill: '#888888',
    'font-size': '12px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipLabel', true)
tooltipGroup.append('text')
  .attr({
    x: padding,
    y: 189.3,
    'text-anchor': 'start',
    dy: 6.3
  })
  .style({
    fill: '#555555',
    'font-size': '18px',
    'text-transform': 'uppercase',
    'letter-spacing': 1
  })
  .classed('tooltipValue', true)

chart.base.on('mouseover', function () {

  chart._appends.select('line')
    .attr({
      x2: 0
    })
  chart._appends.selectAll('.tooltipCampaign')
    .text('Woot!')

  chart._appends.selectAll('.tooltipLabel')
    .text('I\'m A Label!')

  chart._appends.selectAll('.tooltipValue')
    .text('I\'m A Value!')

  chart.trigger('draw')

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

chart.base.on('mousemove', moveToolTip);

function moveToolTip() {
  var coordinates = [0, 0];
  coordinates = d3.mouse(chart.base.node());

  var x = coordinates[0];
  var y = coordinates[1];

  var point = {
    x: x,
    y: y
  };

  chart.trigger('moveTo', point)
}

chart.base.on('mouseout', function () {
  chart.trigger('remove');
})