julianna-langston / chartjs-plugin-a11y-legend Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 2.0 789 KB

Provide keyboard navigation for the legends in a chart.js chart

License: MIT License

HTML 8.80% JavaScript 14.41% TypeScript 76.79%

chartjs-plugin-a11y-legend's People

Contributors

Stargazers

Watchers

Forkers

stockinail

chartjs-plugin-a11y-legend's Issues

Bug: Mouse clicking on focusBox does not pass-through click event

Steps to reproduce

Go to this codepen
Tab to the legend. Confirm that there's a focus indicator box around the legend item "Green"
Using the mouse, click the word "Green"

Note that nothing happens. If you click "Red", the "Red" group gets toggled off. The focus box is preventing the click event from working.

TS Lint Error: Could not find a declaration file for module 'chartjs-plugin-a11y-legend'

I get the following TS Lint Error: Could not find a declaration file for module 'chartjs-plugin-a11y-legend'

Any chance you could provide TS type definitions?

Many thanks for your awesome work!

Position relative breaks positioning

When using position: relative; on the parent container of the canvas as outlined in the Chart.js docs here, the positioning of the legend focus indicator is incorrect.

Request: integration with the react chart library

I like this library but it seems to just not function with the react-chartjs-2 library. I've tried a couple different methods of importing it in and it doesn't want to plug and play.

So far I've used:
chartJS.register( ) to set it - Unsuccessful and doesn't allow the graph to render
The plugin property on the Bar component - error dump, below

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'reviveFocusBox')

Call Stack
Object.beforeDraw
node_modules\chartjs-plugin-a11y-legend\dist\plugin.mjs (118:0)
callback
node_modules\chart.js\dist\chunks\helpers.segment.js (79:0)
PluginService._notify
node_modules\chart.js\dist\chart.js (5067:24)
PluginService.notify
node_modules\chart.js\dist\chart.js (5050:0)
Chart.notifyPlugins
node_modules\chart.js\dist\chart.js (6328:0)
Chart.draw
node_modules\chart.js\dist\chart.js (6031:0)
Chart.render
node_modules\chart.js\dist\chart.js (6014:0)
Chart.update
node_modules\chart.js\dist\chart.js (5899:0)
Chart.eval
node_modules\chart.js\dist\chart.js (5631:33)
Chart.eval [as _doResize]
node_modules\chart.js\dist\chunks\helpers.segment.js (597:0)
Chart._resize
node_modules\chart.js\dist\chart.js (5720:0)
Chart.resize
node_modules\chart.js\dist\chart.js (5691:0)
attached
node_modules\chart.js\dist\chart.js (6262:0)
Chart.bindResponsiveEvents
node_modules\chart.js\dist\chart.js (6274:0)
Chart.bindEvents
node_modules\chart.js\dist\chart.js (6218:0)
Chart._initialize
node_modules\chart.js\dist\chart.js (5677:0)
new Chart
node_modules\chart.js\dist\chart.js (5640:0)
renderChart
node_modules\react-chartjs-2\dist\index.js (85:0)
eval
node_modules\react-chartjs-2\dist\index.js (149:0)
commitHookEffectListMount
node_modules\react-dom\cjs\react-dom.development.js (23150:0)
commitPassiveMountOnFiber
node_modules\react-dom\cjs\react-dom.development.js (24926:0)
commitPassiveMountEffects_complete
node_modules\react-dom\cjs\react-dom.development.js (24891:0)
commitPassiveMountEffects_begin
node_modules\react-dom\cjs\react-dom.development.js (24878:0)
commitPassiveMountEffects
node_modules\react-dom\cjs\react-dom.development.js (24866:0)
flushPassiveEffectsImpl
node_modules\react-dom\cjs\react-dom.development.js (27039:0)
flushPassiveEffects
node_modules\react-dom\cjs\react-dom.development.js (26984:0)
commitRootImpl
node_modules\react-dom\cjs\react-dom.development.js (26935:0)
commitRoot
node_modules\react-dom\cjs\react-dom.development.js (26682:0)
performSyncWorkOnRoot
node_modules\react-dom\cjs\react-dom.development.js (26117:0)
flushSyncCallbacks
node_modules\react-dom\cjs\react-dom.development.js (12042:0)
flushSync
node_modules\react-dom\cjs\react-dom.development.js (26201:0)
scheduleRefresh
node_modules\react-dom\cjs\react-dom.development.js (27795:0)
renderer.scheduleRefresh
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend_compact.js (5135:16)
eval
node_modules\next\dist\compiled\react-refresh\cjs\react-refresh-runtime.development.js (265:0)
Set.forEach
<anonymous>
Object.performReactRefresh
node_modules\next\dist\compiled\react-refresh\cjs\react-refresh-runtime.development.js (254:0)
eval
node_modules\next\dist\compiled\@next\react-refresh-utils\dist\internal\helpers.js (124:0)

Invalid plugin id in README sample

In the README tehre is a sample how to set options to the plugin:

    options: {
        plugins: {
            "chartjs-plugin-a11y-legend": {
                padding: 0
            }
        }
    },

but the plugin id is

chartjs-plugin-a11y-legend/src/plugin.ts

Line 139 in c51811c

id: "a11y_legend",

therefore I think the correct options sample should be:

    options: {
        plugins: {
            "a11y-legend": {
                padding: 0
            }
        }
    },

README reports padding as possible option but it sounds to be margin

In the README, it's writtem that there is only 1 option, padding.

Available options

The following pluing options are available:

padding - (pixels) Add some padding to the bounding box that will appear around your legend items. Default: 4.

But having a look to the code, the option sounds to be margin:

chartjs-plugin-a11y-legend/src/plugin.ts

Lines 156 to 158 in c51811c

    
           defaults: { 
        
               margin: 4 
        
           }

Toggling legend items with enter generates different events than with mouse clicks

Create a chart with multiple groups, the a11y-legend plugin, and with this test plugin:

{
  id: "test",
  afterDatasetUpdate: (chart, args, options) => {
    console.log("dataset updated. Mode: ", args.mode);
  }
}

Click a legend item for one of the groups. You'll see this console message:

dataset updated. Mode: hide

Tab to that legend item and press spacebar (or enter). You'll see this console message:

dataset updated. Mode: undefined

This is inconsistent behavior between the mouse events and the keyboard events.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.