Add a legendFormatter option #683

Merged
merged 3 commits into from Nov 4, 2015

Projects

None yet

1 participant

@danvk
Owner
danvk commented Oct 28, 2015

This is intended to be a catch-all for legend formatting needs. This comes up often in Stack Overflow questions which can't be easily answered with valueFormatter. Nowadays I wave my hands and say "write your own legend, either as a plugin or using highlightCallback and unhighlightCallback." This is a simpler option.

The legendFormatter is repeatedly called with a data object describing the selection or lack of selection. It contains all the information you need to generate a standard legend (e.g. formatted values), but there's nothing preventing you from doing something crazier on your own.

For example, here's what a simple legendFormatter might look like:

function legendFormatter(data) {
  if (data.x == null) return '';  // no selection
  return data.xHTML + data.series.map(v => v.labelHTML + ': ' + v.yHTML).join(' ');
}

Here's what the data object looks like when nothing is selected:

{
  "dygraph": "(dygraph)",
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)"
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)"
    }
  ]
}

The dashHTML properties help you render lines which match each series' line on the chart. When strokePattern is set, they become dotted or dashed lines as needed.

Each value has a corresponding HTML variant, which is properly formatted and escaped according to all the relevant options which have been set for the chart.

Here's what it looks like when a row is selected:

{
  "dygraph": "(dygraph)",
  "x": 93,
  "xHTML": 93,
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)",
      "y": 93,
      "yHTML": "93"
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)",
      "y": 26.04,
      "yHTML": "26.04"
    }
  ]
}

Here's what it looks like when a single series is selected (e.g. with highlightSeriesOpts):

{
  "dygraph": "(dygraph)",
  "x": 94,
  "xHTML": 94,
  "series": [
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,128,0);\"></div>",
      "label": "Y1",
      "labelHTML": "Y1",
      "visible": true,
      "color": "rgb(0,128,0)",
      "y": 94,
      "yHTML": "94",
      "isHighlighted": true
    },
    {
      "dashHTML": "<div style=\"display: inline-block; position: relative; bottom: .5ex; padding-left: 1em; height: 1px; border-bottom: 2px solid rgb(0,0,128);\"></div>",
      "label": "Y2",
      "labelHTML": "Y2",
      "visible": true,
      "color": "rgb(0,0,128)",
      "y": 22.56,
      "yHTML": "22.56"
    }
  ]
}

(Note the isHighlighted property set on Y1.)

Fixes #407

added some commits Oct 28, 2015
@danvk Add a legendFormatter option 77ad133
@danvk Demo of legendFormatter
85dfd53
@danvk usage
ac928d2
@danvk
Owner
danvk commented Oct 28, 2015

cc @kberg @klausw @paulfelix @hulkholden thoughts on the legendFormatter API described above?

@danvk
Owner
danvk commented Nov 4, 2015

Warnock applies. I'll interpret everyone's silence as approval. Merging.

@danvk danvk merged commit 961b513 into master Nov 4, 2015

5 checks passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
coverage/coveralls Coverage increased (+0.04%) to 89.638%
Details
dist/dygraph-combined.js +501 bytes (+0.40%) → 123,834 bytes
dist/dygraph.min.js.gz +158 bytes (+0.43%) → 36,807 bytes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment