Related
I am working with solid gauge. We are upgrading from version 7.2.2 to the latest 9.2. We use to be able to pass in the y-axis plotbands a rounded: true which would round the tips of the bands. Since upgrading this no longer works. Instead the tips are squared off. I am looking for any assistance in how I might handle this.
Here is a fiddle of what it looks like squared off:
fiddle
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
height: '110%',
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
valueSuffix: '%',
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}</span>',
positioner: function (labelWidth) {
return {
x: (this.chart.chartWidth - labelWidth) / 2,
y: (this.chart.plotHeight / 2) + 15
};
}
},
pane: [
{
"startAngle": -140,
"endAngle": 140,
"background": {
"shape": "arc",
"borderWidth": 0,
"backgroundColor": "#FFF0"
}
}
],
yAxis: [
{
"gridLineWidth": 0,
"opposite": false,
"title": {
"text": "",
"useHTML": true
},
"labels": {
"useHTML": true,
"format": "{value}",
"enabled": false
},
"min": 0,
"max": 100,
"lineWidth": 0,
"tickWidth": 0,
"minorTickWidth": 0,
"plotBands": [
{
"thickness": "10%",
rounded: true,
"from": 0,
"to": 73,
"color": "#1792E555",
},
{
"thickness": "10%",
"from": 76,
"to": 88,
"color": "#FFE393"
},
{
"thickness": "10%",
"from": 91,
"to": 100,
"color": "#F9B890"
}
],
"plotLines": [],
"index": 0
}
],
plotOptions: {
solidgauge: {
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false,
rounded: true
}
},
series: [
{
"data": [
{
"y": 10,
"color": "#1792E5"
}
],
"radius": "100%",
"innerRadius": "90%",
linecap: 'rounded',
"rounded": true,
"useDial": false,
"type": "solidgauge",
"tooltip": {
"enabled": true,
"useHTML": true,
"borderRadius": 0,
"borderWidth": 0,
"shadow": false,
"valueDecimals": 2,
"style": {
"fontFamily": "inherit"
},
"padding": 6,
"shape": "square"
},
"dataLabels": {
"style": {
"textOutline": "none"
}
},
"events": {}
}
]
});
Unfortunately, it's not so easy to do. Since the plotBand is an SVG element you can try to edit its path and round the corners but it might be hard. You can check how the rounded path is created here: https://code.highcharts.com/modules/solid-gauge.src.js?_ga=2.104350400.154582566.1629699669-527407293.1629434064
And you can also check out this plugin: https://github.com/highcharts/rounded-corners
But the easiest solution would be to use another solidGauge series instead of plotBand. Something like that: https://jsfiddle.net/BlackLabel/k35vcsnx/
series[{...}, {
type: "solidgauge",
rounded: true,
data: [{
color: "#1792E555",
radius: '100%%',
innerRadius: '90%',
y: 73
}]
}
I am new to highcharts so i might be missing something here.
Recently i was working on area chart and i was able to draw the chart and everything is perfect, But i have a requirement where i have area chart should start from x as 0. Is there any way to do this ? I have attached a screenshot and fiddle link.
Here is fiddle link: https://jsfiddle.net/shantanugade/9vwxm412/
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
},
accessibility: {
rangeDescription: 'Range: 1940 to 2017.'
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} had stockpiled <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [
null, null, null, null, null, 6, 11, 32, 110, 235,
369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468,
20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342,
26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380,
21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824,
10577, 10527, 10475, 10421, 10358, 10295, 10104, 9914, 9620, 9326,
5113, 5113, 4954, 4804, 4761, 4717, 4368, 4018
]
}, {
name: 'USSR/Russia',
data: [ 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
5000, 2500, 500, 1200, 1500, 2000, 4260, 6600, 8690, 10600,
1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538,
11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935,
30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000,
37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000, 15537, 14162, 12787,
12600, 11400, 5500, 4512, 4502, 4502, 4500, 4500
]
}] })
As You can see in the image there is small gap.
You need to reduce xAxis.minPadding property:
xAxis: {
minPadding: 0,
...
}
Live demo: https://jsfiddle.net/BlackLabel/k2mzg0yq/
API Reference: https://api.highcharts.com/highcharts/xAxis.minPadding
I have searched for a few days. Until now I cannot figured it out.
I want my visibility icon change to hide, when clicked. But I don't know why it not automatically rendering. I must to type something on search bar to get the visibility_off icon.
I read documentation but, it not works
https://material-table.com/#/docs/features/actions
and this https://material-table.com/#/docs/features/component-overriding
this my code
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//find index
console.log(data[row.tableData.id]);
//change the data value
data[row.tableData.id].isActive = 0;
//set data with new data
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
And this is the full code.
const [tableConfig, setTableConfig] = useState({
columns:[
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data:[
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
actions:[
{
icon: "play_arrow",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => {
// console.log(row.tableData.id);
//cari indeks
/*console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].configName = "ase";
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
}
},
{
icon: "file_copy",
tooltip: "Clone",
onClick: () => {
console.log("clone button is clicked");
}
},
{
icon: "delete",
tooltip: "Delete",
onClick: () => {
console.log("Delete button is clicked");
}
},
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//cari indeks
console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].isActive = 0;
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
)
]
});
and this is the result. Please help me. Thank you.
NB: because of my reputation. I cannot post image here. Sorry
First of all you can separate your actions array.
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
As you can see I added clikHandler() function in your action array. This is for setting your tableconfig. You set tableConfig in a wrong way. You can check how to set immutable way your state.
const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
btw you should change your action in your jsx part as actions={actions}
You can see the working example
Note
In functional component setState does not pretend to merge entire states. You have to merge yourselves.
I have:
return (
<Particles
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
}}
params={{
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
polygon: {
nb_sides: 7
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"repulse": {
"distance": 200,
"duration": 0.4
}
}
},
"retina_detect": true
}} />
No matter how high I make number.value, the number of particles on the screen just doesn't increase. Any thoughts on what I'm doing wrong?
You've missed to enclose this properties inside particles. Also remove the z-index property from styles or set it to 0 that will display the particles
particles: {
number: {
value: 400,
density: {
enable: true,
value_area: 800
}
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
polygon: {
nb_sides: 7
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"repulse": {
"distance": 200,
"duration": 0.4
}
}
},
"retina_detect": true
Here is the fiddle
I tried to search the problem I am having but I could not find anything useful.
I have a store as:
var store = Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
model: 'User',
groupField: 'CRDS',
autoLoad: true,
data: {
'employees': [{
"CRDS": "ABBCAMS",
"SelBg": "TEST1",
"ALLBGs": [{
"ID": 10,
"BG": "TEST1"
}, {
"ID": 20,
"BG": "TEST2"
}, {
"ID": 30,
"BG": "TEST3"
}],
"excl": 1,
"unlc_acc": 0,
"susp_acc": 0,
"blck_acc": 0,
"agency": 0,
"tryimg": "img/trend-down.png"
}, {
"CRDS": "ABBCAMS",
"SelBg": "TEST4",
"ALLBGs": [{
"ID": 10,
"BG": "TEST1"
}, {
"ID": 20,
"BG": "TEST2"
}, {
"ID": 30,
"BG": "TEST3"
}],
"excl": 1,
"unlc_acc": 0,
"susp_acc": 0,
"blck_acc": 0,
"agency": 0,
"tryimg": "img/trend-down.png"
}, {
"CRDS": "BARCLON",
"SelBg": "TEST7",
"ALLBGs": [{
"ID": 10,
"BG": "TEST1"
}],
"excl": 0,
"unlc_acc": 1,
"susp_acc": 1,
"blck_acc": 1,
"agency": 1,
"tryimg": "img/trend-down.png"
}, {
"CRDS": "SOGEPAR",
"SelBg": "TEST9",
"ALLBGs": [{
"ID": 10,
"BG": "TEST1"
}, {
"ID": 20,
"BG": "TEST2"
}, {
"ID": 30,
"BG": "TEST3"
}],
"excl": 0,
"unlc_acc": 1,
"susp_acc": 1,
"blck_acc": 1,
"agency": 1,
"tryimg": "img/trend-down.png"
}, {
"CRDS": "CRITGOA",
"SelBg": "TEST3",
"ALLBGs": [{
"ID": 10,
"BG": "TEST1"
}, {
"ID": 20,
"BG": "TEST2"
}, {
"ID": 30,
"BG": "TEST3"
}],
"excl": 0,
"unlc_acc": 1,
"susp_acc": 1,
"blck_acc": 1,
"agency": 1,
"tryimg": "img/trend-down.png"
}]
}
});
I want to be able to load subset ALLBGs in a list box. I am not able to figure out how to go about this. Below is what I have ATM:
xtype: 'grid',
columns: [
{
text: 'GCL ORG ID',
dataIndex: 'SelBg',
renderer: function(store, record, rowIndex, value) {return Ext.getStore('employeeStore').data.items[value].data.SelBg;},
editor: new Ext.form.field.ComboBox({
id: 'bg1',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
displayField: 'BG',
valueField:'ID',
// NEED DYNAMIC STORE ALLBGs HERE
store: [
['Shade','ABCD'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
lazyRender: true,
listClass: 'x-combo-list-big'
})
}
Thanks,
Meet
I was able to do it by creating store at run time. For reference, i have applied the same changes in fiddle also.