We Keep Coding

How to filter items in Fluent UI groupedList component

I want to use Fluent UI groupedList, but there are 2 things I didn't understand.
1st) I always see items have a parent group/s. Is it possible to write items in groups level?
-- Group 1
--- Group 2
---- Group 3
--- Item
As seen above, Item is on the level of Group 2. How can I implement something like this?
2nd) I couldn't filter items by groups. For example, I want some items to belong to Group 2, and some other to Group 3. But as I see on the component examples, we have counts and whatever count we give, the component shows us that much item.
Fluent UI groupedList component:
https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist
I also have this codepen:
https://codepen.io/ozan-bilgi/pen/mdKZqNG?editors=0010
const { GroupedList, IGroup, IColumn, DetailsRow, Selection, SelectionMode, SelectionZone, Toggle, IToggleStyles, ThemeProvider, initializeIcons } = window.FluentUIReact;
const { useBoolean, useConst } = window.FluentUIReactHooks;
const { createListItems, createGroups, IExampleItem } = window.FluentUIExampleData;
// Initialize icons in case this example uses them
initializeIcons();
const toggleStyles: Partial<IToggleStyles> = { root: { marginBottom: '20px' } };
const items = [
{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group0",
location: "portland",
name: "www",
shape: "square",
thumbnail: "AAAA",
width: 212
},
{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group1",
location: "portland",
name: "eee",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group2",
location: "portland",
name: "rrr",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group3",
location: "portland",
name: "nnn",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group4",
location: "portland",
name: "bbb",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group5",
location: "portland",
name: "vvv",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group6",
location: "portland",
name: "lorem",
shape: "square",
thumbnail: "AAAA",
width: 212
},{
color: "red",
description: "Lorem ipsum",
height: 212,
key: "group7",
location: "portland",
name: "aaa",
shape: "square",
thumbnail: "AAAA",
width: 212
},
]
const columns = [
{ key: 'group0', name: 'Title', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'business', name: 'Business', fieldName: 'business', minWidth: 100, maxWidth: 200, isResizable: true },
{ key: 'initialAssessment', name: 'Initial Assessment', fieldName: 'initialAssessment', minWidth: 100, maxWidth: 200, isResizable: true },
];
//const groups = createGroups(groupCount, groupDepth, 0, groupCount);
const groups = [
{
children: [{
children: [],
count: 3,
isCollapsed: undefined,
key: "group0-0-0",
level: 1,
name: "group0-0-0",
startIndex: 0
}],
count: 2,
isCollapsed: undefined,
key: "group0",
level: 0,
name: "First Group",
startIndex: 0
},
{
children: [{
children: [],
count: 2,
isCollapsed: undefined,
key: "group1",
level: 1,
name: "group0-0-0",
startIndex: 0
}],
count: 1,
isCollapsed: undefined,
key: "group2",
level: 0,
name: "Second Group",
startIndex: 0
}
]
const GroupedListBasicExample: React.FunctionComponent = () => {
const onRenderCell = (
nestingDepth?: number,
item?: IExampleItem,
itemIndex?: number,
group?: IGroup,
): React.ReactNode => {
return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
<DetailsRow
columns={columns}
groupNestingDepth={nestingDepth}
item={item}
itemIndex={itemIndex}
selectionMode={SelectionMode.multiple}
group={group}
/>
) : null;
};
return (
<div>
<GroupedList
items={items}
// eslint-disable-next-line react/jsx-no-bind
onRenderCell={onRenderCell}
selectionMode={SelectionMode.multiple}
groups={groups}
/>
</div>
);
};
const GroupedListBasicExampleWrapper = () => <ThemeProvider><GroupedListBasicExample /></ThemeProvider>;
ReactDOM.render(<GroupedListBasicExampleWrapper />, document.getElementById('content'))

Clearing a selected item in dropdown after selecting item in other dropdown with vue-treeselect

I'm coding about auto select provinces in Thailand, When I choose province A in province dropdown the district dropdown will change to value in province A, and when I change to province B in province dropdown value in district dropdown has changed to district in province B already but the UI of district dropdown still shows district in province A.
I have researched treeselect docs and tried for several days now, and I really can't find a solution :-(
This is UI rightnow
<treeselect
id="province-selected"
v-model="state.provinceSelected"
:options="provinceArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="province-input"
:class="{ errorselect: v$.provinceSelected.$errors.length }"
:normalizer="normalizerProvince"
#select="getDistrict"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>

The official documentation of VueTreeselect mentions, the select event is Emitted after selecting an option. It has no dependency with the value update. I prefer you to use input event instead of select. Because the documentation states, the input event will be Emitted after value changes. So inside this method you will get the updated value for the first select.
Working Fiddle
Vue.component('treeselect', VueTreeselect.Treeselect)
new Vue({
el: '#app',
data: {
provinceArr: [
{ id: 1, label: 'Province 1', districtArr: [
{ id: 10, label: 'District 01' },
{ id: 11, label: 'District 02' },
{ id: 12, label: 'District 03' },
{ id: 13, label: 'District 04' },
]},
{ id: 2, label: 'Province 2', districtArr: [
{ id: 20, label: 'District 21' },
{ id: 21, label: 'District 22' },
{ id: 22, label: 'District 23' },
{ id: 23, label: 'District 24' },
]},
{ id: 3, label: 'Province 3', districtArr: [
{ id: 30, label: 'District 31' },
{ id: 31, label: 'District 32' },
{ id: 32, label: 'District 33' },
{ id: 33, label: 'District 34' },
] },
{ id: 4, label: 'Province 4', districtArr: [
{ id: 40, label: 'District 41' },
{ id: 41, label: 'District 42' },
{ id: 42, label: 'District 43' },
{ id: 43, label: 'District 44' },
] },
{ id: 5, label: 'Province 5', districtArr: [
{ id: 50, label: 'District 51' },
{ id: 51, label: 'District 52' },
{ id: 52, label: 'District 53' },
{ id: 53, label: 'District 54' },
] },
{ id: 6, label: 'Province 6', districtArr: [
{ id: 60, label: 'District 61' },
{ id: 61, label: 'District 62' },
{ id: 72, label: 'District 73' },
{ id: 73, label: 'District 74' },
] },
],
districtArr: [],
state: {
provinceSelected: null,
districtSelected: null,
},
},
methods: {
getDistrict: function(node, instanceId) {
console.log(this.state.provinceSelected, node, instanceId);
// Some logic to populate districts
this.districtArr = this.provinceArr.find(item => item.id === this.state.provinceSelected).districtArr;
},
onDistrictSelected: function(node, instanceId) {
console.log(this.state.districtSelected)
}
}
})
<!-- include Vue 2.x -->
<script src="https://cdn.jsdelivr.net/npm/vue#^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/#riophae/vue-treeselect#^0.4.0/dist/vue-treeselect.min.css">
<div id="app">
<div>
<p>Province</p>
<treeselect
id="province-selected"
v-model="state.provinceSelected"
:options="provinceArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="province-input"
#input="getDistrict"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>
</div>
<div>
<p>District</p>
<treeselect
id="district-selected"
v-model="state.districtSelected"
:options="districtArr"
placeholder="กรุณาเลือกจังหวัด"
noResultsText="ไม่พบข้อมูล"
data-test="district-input"
#input="onDistrictSelected"
zIndex="20000"
:clearable="false"
:allowClearingDisabled="true"
/>
</div>
</div>

stacked bar chart using angular-highchart

var array= [{ name: "LTNS", id: 1, percentage: 60, price: 900000 },
{ name: "NPCS", id: 2, percentage: 30, price: 342000 },
{ name: "MARCOS", id: 3, percentage: 10, price: 600000 }]
Using above array i need build stacked bar chart in angular-highchart and result should be like below.
I am using angular-highchart 7.2.0 version.
I have seen lots reference but nothing is same as above.

I think that you can start from this approach:
var array = [{
name: "LTNS",
id: 1,
percentage: 60,
price: 900000
},
{
name: "NPCS",
id: 2,
percentage: 30,
price: 342000
},
{
name: "MARCOS",
id: 3,
percentage: 10,
price: 600000
}
].reverse();
array.forEach(obj => {
obj.data = [obj.percentage]
})
Highcharts.chart('container', {
chart: {
type: 'bar'
},
plotOptions: {
bar: {
stacking: 'normal',
groupPadding: 0.2
}
},
series: array
});
Demo: https://jsfiddle.net/BlackLabel/d9xrgeka/
If you will face an issue implementing other features, please ask a specific question.

ERROR : TypeError: undefined is not an object (evaluating 'tem.userName') when working with flalist

i have a problem with reactnative flatlist
the flatlis doesn't render
what should i do do
below is the code...........................................................................
.....................................................................
the code is as swhown below...................................................................................................
enter image description here
import React, {useState, useEffect} from 'react';
import AsyncStorage from '#react-native-async-storage/async-storage';
import {
StyleSheet,
View,
Text,
TextInput,
SafeAreaView,
ScrollView,
Alert,
Button,
KeyboardAvoidingView,
Platform,
PermissionsAndroid,
FlatList,
} from 'react-native';
import Geolocation from '#react-native-community/geolocation';
const App = () => {
const Posts = [
{
id: '1',
userName: 'Jenny Doe',
postTime: '4 mins ago',
post:
'Hey there, this is my test for a post of my social app in React Native.',
liked: true,
likes: '14',
comments: '5',
},
{
id: '2',
userName: 'John Doe',
postTime: '2 hours ago',
post:
'Hey there, this is my test for a post of my social app in React Native.',
liked: false,
likes: '8',
comments: '0',
},
{
id: '3',
userName: 'Ken William',
postTime: '1 hours ago',
post:
'Hey there, this is my test for a post of my social app in React Native.',
liked: true,
likes: '1',
comments: '0',
},
{
id: '4',
userName: 'Selina Paul',
postTime: '1 day ago',
post:
'Hey there, this is my test for a post of my social app in React Native.',
liked: true,
likes: '22',
comments: '4',
},
{
id: '5',
userName: 'Christy Alex',
postTime: '2 days ago',
post:
'Hey there, this is my test for a post of my social app in React Native.',
liked: false,
likes: '0',
comments: '0',
},
];
const renderItem = ({tem}) => {
<View style={styles.item}>
<Text style={styles.title}>{tem.userName}</Text>
<Text style={styles.title}>{tem.post}</Text>
</View>
};
return (
<View>
<FlatList
data={Posts}
renderItem={renderItem}
keyExtractor={(tem) => tem.id}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
paddingTop: 23,
},
input: {
margin: 15,
borderColor: '#7a42f4',
borderWidth: 1,
},
submitButton: {
backgroundColor: 'gray',
padding: 10,
margin: 15,
height: 40,
width: 10,
},
submitButtonText: {
color: 'white',
},
buttonContainer: {
width: '40%',
alignSelf: 'center',
marginVertical: 30,
color: 'red',
},
});
export default App;

You should use predefined item instead of tem. Also it seems like return is missing.
const renderItem = ({item}) => {
return (
<View style={styles.item}>
<Text style={styles.title}>{item.userName}</Text>
<Text style={styles.title}>{item.post}</Text>
</View>
);
};

how to create a radio button section with a data table in react native?

I would like to create a page like this in react native however I don't know how I could implement the radio buttons with data that looks like the following code. an idea of ​​how I could go about itenter image description here
My data looks like this with an option title first then the radio button to choose. To make it simple I would like to create a section with a title and radio buttons that and the data I get them in a table like this one
const products = [
{
id: 1,
title : 'Boisson',
data : [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
{
id: 2,
title : 'Boisson',
data : [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
];
Thank's for your help

You can use react-native-paper radio button check my example:
import React, { Component } from 'react';
import { Text, StyleSheet, View } from 'react-native';
import { RadioButton } from 'react-native-paper';
const products = [
{
id: 1,
title: 'Soft Drinks',
data: [
{
label: 'Coca Cola',
price: '500 KMF',
},
{
label: 'Fanta',
price: '250 KMF',
},
{
label: 'Sprite',
price: '200 KMF',
},
]
},
{
id: 2,
title: 'Juices',
data: [
{
label: 'Mango',
price: '500 KMF',
},
{
label: 'Orange',
price: '250 KMF',
},
{
label: 'Strawberry',
price: '200 KMF',
},
]
},
];
export default class DrinkSelector extends Component {
checkDrink(drink, object) {
var i;
for (i = 0; i < object.length; i++) {
if (object[i].isChecked === 'checked') {
object[i].isChecked = 'unchecked';
}
}
drink.isChecked = "checked";
this.setState({ refresh: true });
}
render() {
return (
<View style={{ flex: 1, padding: 20, backgroundColor: "#f2f2f2" }}>
{products.map((object, d) =>
<View key={d} style={{ justifyContent: 'space-between' }}>
<Text style={{ fontSize: 18, marginBottom: 20 }}>{object.title}</Text>
{object.data.map((drink, i) =>
<View key={i} style={styles.drinkCard}>
<RadioButton value={drink.price} status={drink.isChecked} onPress={() => this.checkDrink(drink, object.data)} />
<Text style={{ fontSize: 20, paddingLeft: 10 }}>{drink.label}</Text>
</View>
)}
</View>
)}
</View>
)
}
}
const styles = StyleSheet.create({
drinkCard: {
paddingLeft: 6,
alignItems: 'center',
flexDirection: 'row',
marginBottom: 16,
backgroundColor: 'white',
height: 55,
elevation: 1,
borderRadius: 4,
}
})