Develop Reference

React Highchart: How set the "accessibility.enabled" option to false

I have this error in console:
Highcharts warning: Consider including the "accessibility.js" module to make your chart more usable for people with disabilities. Set the "accessibility.enabled" option to false to remove this warning. See https://www.highcharts.com/docs/accessibility/accessibility-module.
Cannot find in documentation where Set the "accessibility.enabled" option to false.
This is the option that I pass to component:
const optionNUsersPerService = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Utenti per servizio'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Utenti',
colorByPoint: true,
data: getDataUsersPerService(props.items)
}]
}
And this is the component:
return (
<HighchartsReact
highcharts={Highcharts}
options={currentOptions}
immutable={true}
callback={props.callback}
/>
);

The warning has been added since Highcharts v10.1.0 (2022-04-29)
Changelog: https://www.highcharts.com/blog/changelog/
To disable accessibility, set:
accessibility: {
enabled: false
}
Live demo: http://jsfiddle.net/BlackLabel/mvnjskqr/
API Reference: https://api.highcharts.com/highcharts/accessibility.enabled

I don't advise that you disable accessibility for your charts, it will make them inaccessible to users with disabilities that rely on a keyboard and voice over software like NVDA, JAWS, VoiceOver etc.
An alternative way to get rid of this warning is to simply import the Accessibility module.
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";
require("highcharts/modules/accessibility")(Highcharts);
Ref: https://github.com/highcharts/highcharts-react#how-to-add-a-module
Ref: https://github.com/highcharts/highcharts-react/issues/141

Meteor Aldeed:tabular - unable to render buttons extensions

I have followed the instructions as mentioned in the Read Me regarding use of extensions with the tabular table link. However, doing so does not get me the extra set of buttons on my table. I was wondering if I was doing something wrong. If someone could guide me with this issue, it would be most helpful!
index.js
import dataTablesBootstrap from "datatables.net-bs4/js/dataTables.bootstrap4.js";
import "datatables.net-bs4/css/dataTables.bootstrap4.css";
dataTablesBootstrap(window, $);
// BUTTONS DATATABLES
import dataTableButtons from "datatables.net-buttons-bs4";
// Import whichever buttons you are using
import columnVisibilityButton from "datatables.net-buttons/js/buttons.colVis.js";
import html5ExportButtons from "datatables.net-buttons/js/buttons.html5.js";
import flashExportButtons from "datatables.net-buttons/js/buttons.flash.js";
import printButton from "datatables.net-buttons/js/buttons.print.js";
// Then initialize everything you imported
dataTableButtons(window, $);
columnVisibilityButton(window, $);
html5ExportButtons(window, $);
flashExportButtons(window, $);
printButton(window, $);
table.js
import Tabular from "meteor/aldeed:tabular";
// import { Template } from 'meteor/templating';
new Tabular.Table({
name: "listUsersTable",
collection: Meteor.users,
autoWidth: false,
order: [
[0, "asc"],
// [1, "desc"],
],
// results dropdown
lengthMenu: [
[10, 25, 50, 100], // value
[10, 25, 50, 100], // label
],
// other properties...
buttonContainer: ".col-sm-6:eq(0)",
buttons: ["copy", "excel", "csv", "colvis"],
throttleRefresh: 5000, // throttle the reactivity
search: {
caseInsensitive: true,
smart: true,
onEnterOnly: true,
},
responsive: true,
columns: [
{
data: "username",
title: "Username",
width: "20%",
autoWidth: false,
},
{
title: "Profile",
bSortable: false,
width: "40%",
tmpl: Meteor.isClient && Template.edit_user_links,
tmplContext(rowData) {
return {
item: rowData,
column: "profile",
};
},
},
// other columns
]
});
I am unable to view the "copy", "excel", "csv", "colvis" buttons anywhere around my table. In addition to this, I would like to know the role of "buttonContainer: ".col-sm-6:eq(0)", Am I supposed to declare a div with that class?
Thanks!

How to mutate VueJS prop?

Hi i'm having trouble understanding how to mutate a prop value in vue js. I'm using vue-chartjs to dynamically rerender a chart using chartjs. The behaviour works but I get a console message warning when I fire off the updateValues() function.
Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders. Instead, use a
data or computed property based on the prop's value. Prop being
mutated: "myData"
How do I properly mutate the prop?
// Parent Component
<bar-graph :myData="dataCollection" :height="250"></bar-graph>
data () {
return {
dataCollection: {
labels: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017],
datasets: [
{
label: 'Sample Lables',
backgroundColor: 'red',
data: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500]
}
]
}
}
},
methods: {
updateValues () {
this.dataCollection = {
labels: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500],
datasets: [
{
label: 'Sample Lables',
backgroundColor: 'red',
data: [5000, 5000, 5000, 5000, 5500, 5500, 10000, 5500, 5500]
}
]
}
}
}
//Child component bar graph
import { Bar } from 'vue-chartjs'
export default Bar.extend({
props: ['myData'],
mounted () {
this.renderChart(this.myData, {responsive: true, maintainAspectRatio: false})
},
watch: {
myData: function () {
console.log('destroy')
this._chart.destroy()
this.renderChart(this.myData, {responsive: true, maintainAspectRatio: false})
}
}
})

There is no way to "properly" mutate a prop, because it is a input to a component.
I recommend importing the data passed via the prop to the component's state and then using accordingly. By using this local copy, you avoid mutating the prop and getting that warning.
export default Bar.extend({
props: ['myData'],
data() {
return {
passedData: null
}
}
mounted() {
// Import data from prop into component's state
this.passedData == this.myData;
// Use as desired
this.renderChart(this.myData, {
responsive: true,
maintainAspectRatio: false
})
},
watch: {
myData: function() {
console.log('destroy')
this._chart.destroy()
this.renderChart(this.myData, {
responsive: true,
maintainAspectRatio: false
})
}
}
})

A comment / addition to #TheCascadian's answer: If myData is an Object, then this.passedData would be a reference to the same object, so you'll still get that warning. You might consider using cloneDeep from lodash to have a real inner copy of the property and use it internally accordingly.

Allow HTML content for ToolTip in Enyo

I am working on Tooltip, where my requirement is to show more details line by line inside tooltip, when user hovers over some iconbutton. Currently, I am trying like this:
{kind: "moon.TooltipDecorator", components: [
{kind: "moon.IconButton", src: "$lib/moonstone/samples/assets/icon-button-enyo-logo.png"},
{kind: "moon.Tooltip", name:'info', floating: true, contentUpperCase: false,allowHtml: true, content: "Floating tooltip <br>for an IconButton."}
]
}
But this is treating HTML content just like strings. I tried to set dynamically, but result is same. Below what i tried:
this.$.info.setContent('Fare Charges'+ "<span style='border:1px solid'"+flightsData[0].price+'</span><br>'+'<span>Some more data</span>');
Is there any ways to achieve it?

moon.Tooltip was designed to only be a single line of text. If you want more than one line, you can create your own tooltip based off of moon.Tooltip.
enyo.kind({
name: 'my.Tooltip',
kind: 'moon.Tooltip',
published: {
allowHtml: false
},
allowHtmlChanged: function() {
this.$.client.set('allowHtml', this.allowHtml);
},
create: function () {
this.inherited(arguments);
this.allowHtmlChanged();
},
});
enyo.kind({
name: "App",
components: [
{kind: "moon.TooltipDecorator", components: [
{kind: "moon.IconButton", src: "$lib/moonstone/samples/assets/icon-button-enyo-logo.png"},
{kind: "my.Tooltip", name:'info', floating: true, contentUpperCase: false, allowHtml: true, content: "Floating tooltip <br>for an IconButton."}
]
}
]
});
new App().renderInto(document.body);
You also need to override the .moon-tooltip-label CSS class:
.moon-tooltip-label {
height:auto;
}

JQuery-JTable stretching in IE7 - OK in other browsers

The JQuery-JTable plugin has some issues with IE7. As the author has already stated on this thread, there's not much support for IE7.
Therefore, I have this problem:
When I have, for example, a description field (usually a textarea), in IE7 it will stretch the div, making the JTable look enourmous. Like this:
In every other browser (tested in Chrome, Firefox and IE 8-9), it doesn't happen:
This is the JTable fields binding:
fields: {
code: {
title: 'CND',
key: true,
create: false,
edit: false,
list: false
},
company: {
title: 'company',
list: true,
create: true,
edit: true
},
cert: {
title: 'cert',
edit: true,
create: true
},
emission: {
title: 'emission'
},
descriptions: {
title: 'descriptions',
type: 'textarea',
edit: true,
list: true,
create: true,
maxWidth: '100px',
showHint: true
}
Has anyone ever been through this kind of a problem?
I guess I can just tell the user to use Firefox or Chrome, but I want to give this a shot first.