With QT 5.10 my ComboBox is selectable only once. After the first select it remains closed and no further selection is possible. Is this the standard behaviour or a bug? How can I "unlock" the ComboBox again?
import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ComboBox {
width: 100
model: ["One", "Two", "Three"]
}
}
After program start:
Selecting:
Locked:
Related
I am using React Apexcharts to create a radial chart. By default, the progress bar goes in a clockwise direction but I need it to go counter-clockwise. Is there any option property available I can use?
What my graph looks like now:
What I need it to look like (bar going in opposite direction):
My options object:
let options = {
colors: ["#857EFF"],
plotOptions: {
radialBar: {
hollow: {
margin: 0,
size: "70%",
background: "#293450"
},
track: {
dropShadow: {
enabled: true,
top: 2,
left: 0,
blur: 4,
opacity: 0.15,
}
},
dataLabels: {
name: {
offsetY: -10,
color: "#fff",
fontSize: "13px"
},
value: {
color: "#fff",
fontSize: "30px",
show: true
}
}
}
},
fill: {
type: "gradient",
gradient: {
shade: "dark",
type: "vertical",
gradientToColors: ["#05E996"],
stops: [0, 100]
}
},
stroke: {
lineCap: "round"
},
labels: ["Progress"]
}
Any help is appreciated, thank you!
I've been looking for an answer for this Problem without any success. Today i've successfully created a workaround.
The Apex Radialbar just hardcoded always goes clockwise, no matter what you do because it is always going from startAngle to endAngle using +1.
So using startAngle -360 and endAngle 0 will have no effect.
Essentially, you want to create the Radialbar and mirror it on Y axis and then remirror everyhting you want to keep normal, back to normal. However you need to transform the components usually back in place.
You can also try only selecting the Radialbar and only rotating that, however i find getting the other components back in the correct place using "transformX" is usually easier.
so lets say you want a Bar from -360 to 90 but counter-clockwise,
create a Radialbar from 0 to 270 and then use the following CSS transforms.
Here is the example Radialbar from the Angular Documentation with a counter-clockwise bar.
TIPP:
Use exact classifiers and unique, here in ng-deep with
counter-clockwise svg
Because once you use ng-deep you cannot unset it, unless you modify the document directly, so when you switch views you might have unwanted sideeffects.
Mirrored
Original
Change startAngle and endAngle options
https://apexcharts.com/docs/options/plotoptions/radialbar/
plotOptions: {
radialBar: {
startAngle: -360,
endAngle: 0,
...
I'm looking to do this same thing and after reading apexcharts docs as well as experimenting around with it I don't think it's currently possible.
I have a problem having a checkbox selection and link in the same Material UI DataGrid table cell/field.
The problem is that one of the cells should have an external link and clicking to that cell, which redirects to another page, checkbox is also being selected. So my goal is to disable checkbox selection on this particular cell/field.
In Mui docs there is disableSelectionOnClick api, which allows to check only from checkbox, but not from cell or row. So this not what I want. I still want to have the ability to check from rows except the cell that has a link. In my example provided below, my particular cell name,that should be disable from checking, is total marks.
Code example and sandbox link
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
import Link from "#mui/material/Link";
const getTotal = (params) =>
params.getValue(params.id, "maths") + params.getValue(params.id, "science");
const columns = [
{ field: "maths", headerName: "Maths", width: 130 },
{ field: "science", headerName: "Science", width: 130 },
{
field: "Total",
headerName: "Total marks",
width: 160,
valueGetter: getTotal,
editable: true,
renderCell: (cellValues) => (
<Link
target="_blank"
rel="noopener noreferrer"
href="https://www.google.com/"
sx={{ cursor: "pointer" }}
>
{cellValues.value}
</Link>
)
}
];
const rows = [
{ id: 1, maths: 75, science: 60 },
{ id: 2, maths: 80, science: 70 },
{ id: 3, maths: 50, science: 80 },
{ id: 4, maths: 80, science: 60 },
{ id: 5, maths: 100, science: 90 }
];
export default function ValueGetterGrid() {
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid rows={rows} columns={columns} checkboxSelection />
</div>
);
}
Any help will be appreciated
you can use the event.stopPropagation() method, along with field. forked your sandbox and updated it.
Live Demo
For me, stopPropagation and preventDefault does not work, but the following should prevent checkbox selection when column 'Total' is clicked in MUI DataGrid:
const handleCellClick = (param, event) => {
event.defaultMuiPrevented = param.field === "Total";
};
...
<DataGrid ... onCellClick={handleCellClick} />
Hope it works for you. See sandbox:
https://codesandbox.io/s/material-demo-forked-qjkzsv?file=/demo.js
I have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ??
Here is an example of what I currently have: codeSandBox
From playing around with it, most of your options are not being recognized at all.
I played with the colors, layouts, displaying things, etc., and nothing made a difference. The only thing that's making a difference is the responsive key.
Normally, the way you would change the way the lines would be displayed is like this:
const options = {
legend: { display: false },
title: { display: true, text: "Line Chart" },
scales: {
yAxes: [{
gridLines: {
z: 99
},
ticks: {
beginAtZero: true
}
}]
},
xAxes: [{
gridLines: {
z: 99
}
}],
responsive: true
};
In your options object, under the scales key, under each axis, you can set the z-index of the gridlines. This set of options should work, according to this.
However, because your options aren't being recognized, none of the options here are even taking effect in the first place.
I haven't used Chart.js in react so I can't really help you more than that, in this aspect.
However, what I can say does work, is in line 10 in your sample code in the sandbox, I changed the hex value to rgba:
backgroundColor: "rgba(235, 245, 251, 0.5)",
It's the same color, only a little lighter, but what is most important is you can see the grid lines.
https://i.stack.imgur.com/VQ7v3.png
My advice is if you're only using React for this chart, don't. It seems to be making things harder.
I am trying to use the following package for image gallery in my react app:
https://github.com/neptunian/react-photo-gallery
The images that I have are not from some URL, as shown in this example:
https://codesandbox.io/s/awesome-bassi-5vn3lvz2n4?from-embed=&file=/index.js:204-210
I tried to store them in a folder in my react application, and save a list of them and send this list to the Gallery as parameter, but the gallery doesn't display those images, only from URL images.
example of the list, Only the first image that is from URL is getting shown:
const photos = [
{
src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
width: 4,
height: 3
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschGBH11de.jpg",
width: 4,
height: 3
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammer11.png",
width: 1,
height: 1
},
{
src: "../assets/PowerToolsRentalsImages/hammers/bosch-gbh-11de/BoschHammerRental.jpg",
width: 3,
height: 4
}
];
export default photos;
this is how it looks in my app:
Source URL that is generated in the DOM:
I found a solution,
after reading more I discovered that when using create-react-app you must use import (or require) and can't use img src="..." directly.
So I have edited the list of images to be like the following code, and now it work:
import BoschGBH11de from './BoschGBH11de.jpg';
import BoschHammer11 from './BoschHammer11.png';
import BoschHammerRental from './BoschHammerRental.jpg';
const photos = [
{
src: "https://source.unsplash.com/Dm-qxdynoEc/800x799",
width: 4,
height: 3
},
{
src: BoschGBH11de,
width: 4,
height: 3
},
{
src: BoschHammer11,
width: 1,
height: 1
},
{
src: BoschHammerRental,
width: 3,
height: 4
}
];
export default photos;
I am using react-google-charts in my reactjs application to create google line chart. I don't find any detailed document for this plugin.
I have few questions:
a) How to specify scaleStepWidth?
b) How to create pointDot in Line Chart?
To enable pointDot in line chart you have to just set "true" the points property option in configuration i-e
"pointsVisible: true"
Moreover you can find an example of line chart here
https://github.com/RakanNimer/react-google-charts/blob/HEAD/sandboxes/linechart/index.js
Other customization options if required then you can provide it in option property. for example just like below:
var options = {
//title: 'Graph',
//isStacked: true,
//legend: { position: 'top', maxLines: 3 },
width: chartwidth1 / 2 * 2,
height:450,
vAxis: {
gridlines: { count: 15 },
viewWindow: { min: -100000, max: 2000000},
},
//series: series,
chartArea: {
top: '10%', // set this to adjust the legend width
left: '8%', // set this eventually, to adjust the left margin
height: "80%",
width: "93%",
//width: "60%"
},
legend: { position: 'top', alignment: 'start' },
pointsVisible: true
}