clhenrick / color-legend-element Goto Github PK

Hi there,

Just curious if there are any plans to upgrade this package for use in node.js 20+. I was using it successfully in an older version of node but came across issues with it once upgrading.

Thanks so much,
S

After switching over to the individual d3 modules in #8 the rollup.config.js was not updated to specify them as external packages, so they are being included with the JS bundles when npm run bundle is run.

While it is generally OK to use continuous gradients for area-based visializations (such as heat maps), especially when graduating by lightness only, it is certainly the case that vsualisations relying on colour only to distinguish discreet values do not work for colour deficient users.

Examples of these are pie charts, stacked bar charts and multi-line graphs.

In such cases, the visualisations need to either:

1. Directly connect the legend label to the visualisation component (e.g. Place label above, next to or on/in the relevant component) when appearing just once
2. Use a secondary distinction, such as line style, area pattern or texture depending on the type of visualisation.

The Array.prototype.at() method is not supported in Safari. This is causing the discrete and threshold legends to not render in Safari.

When used with a module bundler, a Windows OS user reported that the CLE could not find the required D3JS modules. Being more specific with the import resolved the issue:

import 'color-legend-element/build/color-legend-element.js';

When setting the tickFormatter property via JavaScript, it is expected that for a non-categorical scaleType the x-axis's tick text will be formatted accordingly. However this currently does not appear to be the case.

Example code:

const cle = document.querySelector('color-legend');
cle.tickFormatter = (d) => `${d}˚`;

Expected output:

Actual output:

Emitting events for click, hover, focus, keypress, etc. that includes data such as the datum, color, bin, etc. The most difficult part of this I think would be making the SVG elements accessible, for example enabling focus states and keyboard navigation for SVG rects, and not have a broken experience for users of assistive technology.

From this Twitter convo

...returning a colour/bin/break id etc in an event would help developers tie the legend to the viz interactively. Only part of an ally solution of course, but helpful.

During one of the library updates the UMD build started throwing an error.

Reproducible example: https://codepen.io/clhenrick/pen/abxRNGa

Error output from the console:

Uncaught (in promise) TypeError: i is undefined
    setContinousColorScale https://unpkg.com/[email protected]/build/color-legend-element.umd.js:45
    setColorScale https://unpkg.com/[email protected]/build/color-legend-element.umd.js:45
    willUpdate https://unpkg.com/[email protected]/build/color-legend-element.umd.js:190
    performUpdate https://unpkg.com/[email protected]/build/color-legend-element.umd.js:12
    scheduleUpdate https://unpkg.com/[email protected]/build/color-legend-element.umd.js:12
    _$ET https://unpkg.com/[email protected]/build/color-legend-element.umd.js:12
    requestUpdate https://unpkg.com/[email protected]/build/color-legend-element.umd.js:12
    set interpolator https://unpkg.com/[email protected]/build/color-legend-element.umd.js:190
    set https://unpkg.com/[email protected]/build/color-legend-element.umd.js:12
    <anonymous> https://cdpn.io/cpe/boomboom/pen.js?key=pen.js-3bc46d33-61e5-8000-5ba5-5c5987fea972:5
[color-legend-element.umd.js:45:422](https://unpkg.com/[email protected]/build/color-legend-element.umd.js)

Add support for diverging scales.

It might work like:

<color-legend
  scaleType="diverging"
  domain=[0, 0.5, 1]
  range=['red', 'yellow', 'blue']
/>

Thank you for this library.

Is it possible to have a vertical legend, instead of the horizontal ones shown in the examples?