I'm working on a project, and I'm using react-google-charts to chart my data. The problem that I am having is that no matter what I do, I can't seem to get rid of the extra white space below my control panel. Does anyone know how to get rid of this? I would really appreciate any help or advice on how to correct this. Thank you!
<div>
<h2 className="graphname">Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Orders</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [new Date(x._id), x.sales]),
]}
options={{
chartArea: {
left: '10%',
right: '10%',
}
}}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%",
height: "20%"
},
hAxis: { baselineColor: "none" }
}
}
},
controlPosition: "bottom",
}
]}
></Chart>
)}
</div>
Related
Trying to load an image in the center of a QR Code on a Vue3 project. Been reading through the API documentation online and it appears I'm supposed to load it as a string through the "image" parameter, but every time I try to load the image by QR Code disappears entirely.
The page I'm specifically working through is here: https://www.npmjs.com/package/qrcode-vue3
Below is the current working of the code:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
image="https://cryptologos.cc/logos/ravencoin-rvn-logo.png"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
End goal I would prefer to load the image from my assets folder but I can't even get a simple image that works to load. I know it's possible because I see the examples QR codes on the npm page but no example code to demonstrate it.
Realized I needed to add the crossOrigin = 'Anonymous' as well as I implemented a v-bind to a url of my local image. Final working solution is as follows:
New component:
<QRCodeVue3
:width="200"
:height="200"
value="HelloWorld"
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: 'H' }"
v-bind:image="iconUrl"
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 3, crossOrigin: 'Anonymous' }"
backgroundColor="white"
:dotsOptions="{
type: 'dots',
color: '#26249a',
gradient: {
type: 'linear',
rotation: 0,
colorStops: [
{ offset: 0, color: '#26249a' },
{ offset: 1, color: '#26249a' },
],
},
}"
:backgroundOptions="{ color: '#ffffff' }"
:cornersSquareOptions="{ type: 'dot', color: '#000000' }"
:cornersDotOptions="{ type: undefined, color: '#000000' }"
/>
Loading image:
export default {
name: "HomeView",
components: {
QRCodeVue3,
},
data() {
return {
iconUrl: require('../assets/ravencoin-rvn-logo.png')
};
},
The component's style doesn't update with the itemStyleMap[index] value chage:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="itemStyleMap[index]"
/>
I also tried:
<view
class="item"
v-for="(item, index) in itemList"
:key="index"
:style="{
background: itemStyleMap[index]['background'],
display: itemStyleMap[index]['display'],
zIndex: itemStyleMap[index]['zIndex'],
transform: itemStyleMap[index]['transform'],
transformOrigin: itemStyleMap[index]['transformOrigin'],
}"
/>
The itemStyleMap in data is something like this:
{
1: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
2: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
3: {
background: 'unset',
display: 'none',
zIndex: 'unset',
transform: 'unset',
transformOrigin: 'unset',
},
}
A more simple demo can be find here: https://jsfiddle.net/wfx6dhy5/7/
Is there any other better way to control infinate amount of style sets like this?
I don't know what is wrong in your project but I did something like this and it works.
check this out.
https://jsfiddle.net/softvini/c4j8ou9r/4/
<div id="app">
<div v-for="item of itemList" :key="item" :style="itemStyleMap[item]">
{{item}}
</div>
</div>
var vm = new Vue({
el: "#app",
data() {
return {
itemList: [0, 1, 2],
itemStyleMap: [{
background: "purple",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "red",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
{
background: "brown",
display: "block",
zIndex: "unset",
transform: "unset",
transformOrigin: "unset",
},
],
};
},
})
Maybe you need to read more about reactivity. So you can read it here:
https://v2.vuejs.org/v2/guide/reactivity.html
in your https://jsfiddle.net/wfx6dhy5/7/ data should be a function.
el: "#app",
data(){
return {
spanStyle: {
t:{
fontSize: "36px",
color: 'yellow',
border: null
}
}
}
},
methods: {
changeColors() {
this.spanStyle.color = (this.spanStyle.t.color == 'red') ? 'blue' : 'red';
this.spanStyl.border = (this.spanStyle.t.border == '3px solid blue') ? '3px solid red' : '3px solid blue';
}
}
});
Also, you missed .t in changeColors method. this.spanStyle.color should be this.spanStyle.t.color and this.spanStyl.border should be this.spanStyl.t.border
I have a react-select component with a custom scrollbar that works in desktop browsers as expected, but on mobile the scrollbar defaults to browser values.
Referencing a similar github issue and a similar stackoverflow issue have not helped resolve this issue.
const styles = {
menu: provided => ({
...provided,
width: '100%',
height: '240px',
boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
overflowY: 'scroll',
'::-webkit-scrollbar-thumb': {
background: royal, // imported color string
height: '50px',
},
'::-webkit-scrollbar-thumb:hover': {
background: royal,
height: '50px',
},
'::-webkit-scrollbar-track': {
background: softGrey,
},
'::-webkit-scrollbar': {
width: '4px',
background: softGrey,
},
}),
menuList: () => ({
'::-webkit-scrollbar': {
width: '4px',
},
}),
}
<Select
placeholder={placeholder}
styles={styles}
onMenuOpen={onOpenHandler}
onMenuClose={onCloseHandler}
onChange={onChangeHandler}
onInputChange={() => {}}
controlShouldRenderValue
label={label}
value={value}
defaultValue={defaultValue}
options={options}
/>
The github references using menuList, but I found that using menu and menuList got me the desired style. I tried every variant of:
using !important
moving only to menuList
having in both menu and menuList
using react-select v2 (2.4.1) and v3 (3.2.0)
Apparently iOS 14 webkit doesn't support custom scrollbars anymore.
https://github.com/JedWatson/react-select/issues/4439#issuecomment-776297882
https://developer.apple.com/forums/thread/670065?answerId=654532022#654532022
I have created a button, I need some response from button like, on touch of the button, the button focus should enable like change in background color. How can I do that?
My code is,
View:
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Style:
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
Controller:
$.proceedButton.addEventListener('touchstart', function() {
$.proceedButton.isFocused = true;
});
$.proceedButton.addEventListener('touchend', function() {
$.proceedButton.isFocused = false;
});
The above code is not working. Just I need to slight chage in background color while touch of the button.
Any solution!!
Use this property and pass colour code
backgroundSelectedColor : "RED"
focusable must be true for normal views.
for more you can refer this http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button-property-backgroundSelectedColor
I hope it may help you,
Alloy xml would be like this
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Then the button property would be like this
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundSelectedColor : "red",
backgroundSelectedImage : "/my_image.png",
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
You can set your selected image or background color on touch focus.
You wont need the controller code you have written in the controller.
Also for some object you can also have selectedColor.
You can also set backgroundFocusedImage,
As #CodeForFun mentioned you can use backgroundSelectedColor property of button.
Also following are all the states which can be used by a button in Titanium.
Disabled : backgroundDisabledImage and backgroundDisabledColor
Normal : backgroundImage and backgroundColor
Focus : backgroundFocusedImage and backgroundFocusedColor
Selected : backgroundSelectedImage and backgroundSelectedColor
Hope this would be helpful.
Edit : An example of usage:
View :
<Button class="button" >Proceed</Button>
TSS :
".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}
I have a Kendo UI datawiz component, RadialGauge, which I would like to feed with real time data. It's setup using the asp.net wrappers, like so (snipped from kendo demos):
<div id="gauge-container-center">
#(Html.Kendo().RadialGauge()
.Name("tensionGauge")
.Pointer(pointer => pointer.Value(28))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-60)
.EndAngle(240)
.Max(180)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(80).To(120).Color("#ffc700");
ranges.Add().From(120).To(150).Color("#ff7a00");
ranges.Add().From(150).To(180).Color("#c20000");
})
)
)
</div>
All the underlying functionality is for "real time" data is setup and working fine. My only issue is how I would go about feeding the signalR value into the .Pointer(pointer => pointer.Value(signalRValueHere) part. Any suggestions on how to do this? It doesn't seem to be an abundance of examples combining these two frameworks yet, so search results are scarce.
Ok, so I solved this using a different approach. I opted to use the javascript-initializer instead, allowing me to utilize SignalR-values in the script.
function createGauge() {
$("#tensionGauge").kendoRadialGauge({
pointer: {
value: 0,
color: "black",
},
cap: {
color: "white",
size: 1
},
scale: {
minorUnit: 50,
majorUnit: 100,
startAngle: -50,
endAngle: 230,
min: #Convert.ToInt32(Model.MinTensionRange),
max: #Convert.ToInt32(Model.MaxTensionRange),
labels: {
position: "inside"
},
ranges: [ // TODO: Fetch limits from signalR or Model
{
from: 300,
to: 100,
color: "#ffc700"
},{
from: -300,
to: -100,
color: "#ffc700"
}, {
from: #Convert.ToInt32(Model.MinTensionRange),
to: -300,
color: "#c20000"
},{
from: #Convert.ToInt32(Model.MaxTensionRange),
to: 300,
color: "#c20000"
}
]
}
});
}
$(document).ready(function () {
createGauge();
});
And the js-part to update the value:
messageHub.client.notifyTension = function (tensionMessage) {
$('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};