Develop Reference

React Select abreviate dropdown names on multi select

Hi is it possible to abbreviate dropdown names when selected like the figure below
this is my code :
multiValue: [
{ value: "BUF", label: "BUF" },
{ value: "CCT", label: "CCT" },
{ value: "JHB", label: "JHB" },
{ value: "EKH", label: "EKH" },
{ value: "ETK", label: "ETK" },
{ value: "MAN", label: "MAN" },
{ value: "NMB", label: "NMB" },
{ value: "TSH", label: "TSH" }
],
handleMultiChange(option) {
this.setState({multiValue: option});
}
<Select
id='multiple'
name="filters"
placeholder="Filter City"
value={this.state.multiValue}
options={this.state.filterOptions}
onChange={this.handleMultiChange}
isMulti={this.state.isMulti}
styles={style}
/>

You could accomplish this by providing a custom MultiValueLabel component
MultiValueLabel.component.js
export default function MultiValueLabel({
data,
innerProps,
selectProps
}) {
// ...any logic you might need
// 'data' should be the full object of each selected item
// so reference whatever key is necessary
return (
<div {...innerProps}>
{data.abbr}
</div>
)
}
Then you just pass that in
<Select
components={{
MultiValueLabel
}}
... other props
/>

Fusion chart doesnt load

I am using Fusion charts but one of my charts doesn't load. My html is :
<fusioncharts [width]="width" [height]="height" [type]="type" [dataFormat]="dataFormat" [dataSource]="dataSource">
</fusioncharts>
And the data for the chart:
this.dataSource = {
'chart': {
'caption': 'Number of posts',
'startingangle': '120',
'showlabels': '0',
'showlegend': '1',
'enablemultislicing': '0',
'slicingdistance': '15',
'showpercentvalues': '1',
'showpercentintooltip': '0',
'theme': 'ocean'
},
'data': [
{ label: 'Venezuela', value: '290' },
{ label: 'Saudi', value: '260' },
{ label: 'Canada', value: '180' },
{ label: 'Iran', value: '140' },
{ label: 'Russia', value: '115' },
{ label: 'UAE', value: '100' },
{ label: 'US', value: '30' },
{ label: 'China', value: '30' }
]
};
The particular chart doesn't load. In the console I also got another error TypeError: i.title is undefined. It is in vendor.2d90d48c94b0a738e874.bundle.js. The file is minified and there is no way to unerstand from where it comes. Atleast I can't. Can I ask you for some advice?

How to modify JSON labels React JS

I'm trying to add a chart in a ReactJS page. In the same page I've got the data in a table and I would like that those data were the same of my chart. My chart is like this:
export const myDataSourcePie ={
chart: {
caption: "Title",
subcaption: "Friends' chart",
startingangle: "120",
showlabels: "0",
showlegend: "1",
enablemultislicing: "0",
slicingdistance: "15",
showpercentvalues: "1",
showpercentintooltip: "0",
plottooltext: "Friend's email : $label Total messages : $datavalue",
theme: "ocean"
},
data: [
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '17',
},
{
label: 'email',
value: '100',
},
{
label: 'email',
value: '17',
},
]
}
export const chartConfigs = {
type: 'pie3d',
width: 800,
height: 600,
dataFormat: 'json',
dataSource: myDataSourcePie
};
and I import it and then render it with
<ReactFC {...chartConfigs} />
now obviously the data inside my JSON are not the right data. I've got a "friends" object list
friends:[
{"first_name": "name",
"surname": "surname",
"email": "foo#foo.com",
"date_of_birth": "1982-02-20",
"nationality": "Japan",
"messages": 5
},
{...},
{...},
..
]
from which I get the data to put in the table and I would like to get only two label of this object list to put in the chart (email and messages). How could I put this value inside my "myDataSourcePie"? With props?
Thank you

Try this:
getFriendsChart()
{
let dataChart = [];
this.state.friends.forEach( function( friend ) {
dataChart.push(
{
label: friend.email,
value: friend.messages,
}
);
});
let tempConfig = {...chartConfigs};
tempConfig.dataSource.data = dataChart;
return tempConfig;
}

custom filtering with reactive-table meteor package not working

I am trying to get the custom filter to work with reactive-table meteor package but it doesn't work and can't find out why...everything looks right in the code but on the client I select "bali" from the dropdown but won't filter the table.:
HTML:
<head>
<title>JavaScript table components comparison</title>
</head>
<body>
<div id="content">
{{> featureComparison}}
</div>
</body>
<template name="featureComparison">
<label>Surf Spot</label>
<select class="form-control" id="surf-spot-select">
<option></option>
<option>Bali</option>
</select>
<div id="table">
{{> reactiveTable collection=tables settings=tableSettings }}
</div>
</template>
JS:
Tables = new Meteor.Collection('features');
if (Meteor.isClient) {
var checkOrX = function (value) {
var html;
// first, normalize the value to a canonical interpretation
if (typeof value === 'boolean')
value = {
support: value
};
if (value === null || value === undefined) {
html = '<span style="color: orange; font-weight: bold">?</span>';
} else {
if (value.support === true)
html = '<span style="color: green">✔</span>'
else if (value.support === false)
html = '<span style="color: red">✘</span>';
else
html = '<span style="color: lightblue">' + value.support + '</span>';
if (value.link)
html += ' (more)';
}
return new Spacebars.SafeString(html);
};
Template.featureComparison.helpers({
tables : function () {
return Tables;
},
tableSettings : function () {
return {
showFilter: false,
rowsPerPage: 10,
showNavigation: 'auto',
showColumnToggles: true,
fields: [
{
key: 'name',
label: 'Library',
fn: function (name, object) {
var html = '<a name="' + name +'" target="_blank" href="' + object.url + '">' + name + '</a>';
return new Spacebars.SafeString(html);
}
},
{ key: 'multisort', label: 'Multi-column sorting', fn: checkOrX },
{ key: 'pages', label: 'Pagination', fn: checkOrX },
{ key: 'filter', label: 'Filtering/Search', fn: checkOrX },
{ key: 'resize', label: 'Resizable Columns', fn: checkOrX },
{ key: 'edit', label: 'Inline Editing', fn: checkOrX },
{ key: 'responsive', label: 'Mobile/Responsive', fn: checkOrX },
{ key: 'i18n', label: 'Internationalization', fn: checkOrX, hidden: true },
{ key: 'keyboard', label: 'Keyboard navigation', fn: checkOrX, hidden: true },
{ key: 'plugins', label: 'Plugins', fn: checkOrX, hidden: true },
{ key: 'meteor', label: 'Meteor Integration', fn: checkOrX, hidden: true },
{ key: 'lastUpdate', label: 'Last update', fn: checkOrX }
],
};
}
});
Template.featureComparison.created = function () {
this.filter = new ReactiveTable.Filter('surf-spot', []);
};
Template.featureComparison.events({
'change #surf-spot-select': function (event,template) {
var input = $("#surf-spot-select").val().toLowerCase();
if (input === 'bali') {
template.filter.set(input);
console.log("bali")
} else {
template.filter.set("");
console.log("nothing")
}
}
});
}

You should maybe attach your custom filter to your reactive table by setting the filters option in your reactive table settings:
tableSettings : function () {
return {
showFilter: false,
rowsPerPage: 10,
showNavigation: 'auto',
showColumnToggles: true,
filters: ['surf-spot'], // here
fields: [
{
key: 'name',
label: 'Library',
fn: function (name, object) {
var html = '<a name="' + name +'" target="_blank" href="' + object.url + '">' + name + '</a>';
return new Spacebars.SafeString(html);
}
},
{ key: 'multisort', label: 'Multi-column sorting', fn: checkOrX },
{ key: 'pages', label: 'Pagination', fn: checkOrX },
{ key: 'filter', label: 'Filtering/Search', fn: checkOrX },
{ key: 'resize', label: 'Resizable Columns', fn: checkOrX },
{ key: 'edit', label: 'Inline Editing', fn: checkOrX },
{ key: 'responsive', label: 'Mobile/Responsive', fn: checkOrX },
{ key: 'i18n', label: 'Internationalization', fn: checkOrX, hidden: true },
{ key: 'keyboard', label: 'Keyboard navigation', fn: checkOrX, hidden: true },
{ key: 'plugins', label: 'Plugins', fn: checkOrX, hidden: true },
{ key: 'meteor', label: 'Meteor Integration', fn: checkOrX, hidden: true },
{ key: 'lastUpdate', label: 'Last update', fn: checkOrX }
],
};
}

Working with subset of Angular JS model

Here is my model:
var nav = [{
label: 'Pages',
value: '#',
toggle: 'dropdown', // set this to '' when the menu has no children
children: [{
label: 'Home',
value: 'home'
}, {
label: 'Left Nav',
value: 'leftnav'
}, {
label: 'Two-Panel Selector',
value: 'two_panel_selector'
}]
}, {
label: 'Components',
value: '#',
toggle: 'dropdown',
children: [{
label: 'Lists & Tables',
value: 'lists_tables'
}]
}, {
label: 'Elements',
value: '#',
toggle: 'dropdown',
children: [{
label: 'Text',
value: 'elements?section=Text'
}, {
label: 'Buttons',
value: 'elements?section=Buttons'
}, {
label: 'Alerts',
value: 'elements?section=Alerts'
}, {
label: 'Inputs',
value: 'elements?section=Inputs'
}, {
label: 'Icons',
value: 'elements?section=Icons'
}, {
label: 'Sample Grid',
value: 'elements?section=Grid'
}, ]
}];
return {
getNavData: function() {
return nav;
}
};
I would like to work with the "Elements" children in a list. This works fine, but I am wondering if there's a way without using the array index as I have done:
div class="list-group">
<a class="list-group-item" ng-repeat="l in navData[2].children" ng-class="{'active': l.label == submenu}" ng-click="select(l.label)">{{l.label}}</a>
</div>

You could search for the element in your array like this:
<a ng-repeat="l in elementsChildren()"></a>
and in your controller:
$scope.elementsChildren() = function() {
for(var i = 0; i < nav.length; i++) {
if (nav[i].label === 'Elements')
return nav[i].children;
return [];
}
This means that if 'Elements' is moved within the array, your view won't break. However, this is more expensive. You will now be iterating over the array to find 'elements' (O(n)), as opposed to indexing directly into your array (O(1)).