Related
I am using this package - qrcode-vue3 in my Laravel Vue project.
I am creating a QR code in various places of the app, each of which contains an logo image supplied via the component options:
<template>
<QRCodeVue3
v-bind="qrOptions"
/>
</template>
<script>
import QRCodeVue3 from "qrcode-vue3";
import {computed} from "vue";
import {useStore} from "vuex";
export default {
name: "QrGenerator",
components: {
QRCodeVue3,
},
props: {
qrData: {
type: String,
default: undefined,
},
withSquareLogo: {
type: Boolean,
default: true,
},
width: {
type: Number,
default: 300,
},
height: {
type: Number,
default: 300,
},
download: {
type: Boolean,
default: true,
},
downloadFileName: {
type: String,
default: undefined,
},
},
setup(props) {
const store = useStore();
const colors = computed(() => store.getters['whiteLabel/colors']);
const logos = computed(() => store.getters['whiteLabel/logos']);
const qrOptions = computed( () => ({
"backgroundOptions": {
"color": "#ffffff"
},
"backgroundOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#ffffff",
"color2": "#ffffff",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersDotOptions": {
"color": "#000000",
"type": ""
},
"cornersDotOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"cornersSquareOptions": {
"color": "#000000",
"type": "extra-rounded"
},
"cornersSquareOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": "#000000",
"color2": "#000000",
"linear": true,
"radial": false,
"rotation": "0"
}
},
"value": props.qrData,
"dotsOptions": {
"color": colors.value.primary_color,
"type": "extra-rounded"
},
"dotsOptionsHelper": {
"colorType": {
"gradient": false,
"single": true
},
"gradient": {
"color1": colors.value.primary_color,
"color2": colors.value.primary_color,
"linear": true,
"radial": false,
"rotation": "0"
}
},
"image": logos.value.square,
"imageOptions": {
"hideBackgroundDots": true,
"imageSize": 0.4,
"margin": 0,
"crossOrigin": "Anonymous"
},
"margin": 0,
"qrOptions": {
"errorCorrectionLevel": "Q",
"mode": "Byte",
"typeNumber": "0"
},
"download": false,
"height": props.height,
"width": props.width
}));
return {
logos,
colors,
qrOptions,
}
}
};
This works OK for some of the time, with logo loading into the QR code. The logo is in a static assets S3 bucket, that is public access and allow-origins of "*". The domain to the static assets bucket (https://static.myapp.com.au) is being proxied via CloudFlare.
But for some of the time I get a CORS error as the component is mounting and generating the QR:
Access to image at 'https://static.myapp.com.au/logo_square.png' from origin 'https://lins.myapp.com.au' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. index.js?f95a:1
GET https://static.myapp.com.au/logo_square.png net::ERR_FAILED 200
It has wasted a bunch of time now but without luck in finding the solution. It will work consecutively for a number of tries (say 20 times), then try again some minutes later and Bang! CORS error.
Thanks
I tried to add Quill Emojis to editor but I am getting console error as
Uncaught ReferenceError: Quill is not defined
I am using Laravel 5.6 and vue js and definately new to vue and its components so I may sound silly to you but for the past 3 days I am searching on the google for the solution and even contacted author of vue2editor on github here is the link
This is what I have tried so far:
vue2editor.vue
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor, Quill } from 'vue2-editor';
import Emoji from 'quill-emoji/dist/quill-emoji';
Quill.register('modules/quill-emoji', Emoji);
export default {
name: 'vue2editor',
components: { VueEditor },
data() {
return {
content: "<h1>Some initial content</h1>",
editorSettings: {
modules: {
toolbar: {
container: [
[{'size': ['small', false, 'large']}],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video'],
['emoji'],
],
handlers: {
'emoji': function () {}
},
},
toolbar_emoji: true,
short_name_emoji: true,
textarea_emoji:true,
},
},
text: null,
};
},
};
</script>
I even tried the method mentioned by one of the user on github for Quill-Emoji, here is the link.
I came here with lots of hopes; if anyone here is to help me out, at least tell me what I am missing will be more than a help for me.
Quill.register({
'formats/emoji': Emoji.EmojiBlot,
'modules/short_name_emoji': Emoji.ShortNameEmoji,
'modules/toolbar_emoji': Emoji.ToolbarEmoji,
'modules/textarea_emoji': Emoji.TextAreaEmoji}, true);
you need register the model, add the up code to you code.
Edit:
//1) Add plugin to laravel mix
const mix = require('laravel-mix')
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
})
]
};
});
//2 example vue file
<template>
<div class="mt-1">
<vue-editor
ref="editor"
v-model="content"
:editor-toolbar="customToolbar"
:editorOptions="editorSettings"
/>
</div>
</template>
<script>
import { VueEditor, Quill } from "vue2-editor";
import Emoji from "quill-emoji/dist/quill-emoji";
Quill.register("modules/emoji", Emoji);
export default {
components: {
VueEditor,
},
props: {
bubble: Object,
contentCol: {
type: String,
},
},
data() {
return {
edit: false,
content: "<b>Content is here</b>",
customToolbar: [["bold", "italic", "underline"], ["link"], ["emoji"]],
editorSettings: {
modules: {
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
},
},
};
},
beforeDestroy() {},
};
</script>
<style src="quill-emoji/dist/quill-emoji.css"/>
I need some help to set the width of the bars in kendo bar charts when the number of bars reduces.
Here is the jsFiddle link i am working on: http://jsfiddle.net/An59E/44/
In this example, there are 2 kendo bar charts, 1 has 6 bars and the other has 12 bars.
In the second graph the bars width is fine. Now when i remove 2 bars i need the same width of bars, instead the default behavior of the kendo is to resize bars. by setting the spacing and the gap values, the bars should resize. In this example, i have set the spacing and gaps value in series defaults attribute but it doesn't look like its working. Now the question is , how to change the width of the bars?
HMTL code:
<div id="chart1">
</div>
<div id="chart2">
</div>
JS code:
var series1= [70, 60, 40];
var series2= [-50, 40, 20];
var series3= [60, 60, -90, 60, 10, 50];
var series4= [60, 20, 20, 50, 40, 10];
$("#chart1").kendoChart({
seriesDefaults:
{
type: "column",
stack: true,
width:2,
gap: 50,
},
series:
[
{
data: series1,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series2,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#CCCCCC"},
],
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "A"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
$("#chart2").kendoChart({
series:
[
{
data: series3,
color: "#00CC00",
negativeColor: "#CC0000",
spacing: 0
},
{
data: series4,
color: "#CCCCCC"
}
],
plotArea:
{
border:
{
color: "#CCCCCC",
width: 1
}
},
chartArea:
{
border:
{
color: "#CCCCCC",
width: 1
},
height: 300,
},
categoryAxis:
{
pane: "top-pane",
color: "#0099FF",
majorGridLines:
{
visible: true,
},
line:
{
width: 3,
},
plotBands:
[
{from: 0, to:1, color: "#333333"},
],
/*categories: [2005, 2006, 2007, 2008, 2009, 2010],
labels:
{
margin:
{
top: 100,
}
},*/
},
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
},
valueAxis:
{
title:
{
text: "O"
},
majorGridLines:
{
visible: false
},
labels:
{
visible: false,
},
line:
{
visible: false
}
},
tooltip: {
visible: true,
/*format: "{0}"*/
template: "Institutional Results:#=value#<br/>Institutional Target:#=value#<br/>"
}
});
Thanks.
just replace below code snippet in javascript and you are done!
seriesDefaults:
{
type: "column",
labels:
{
visible: true,
color: "green"
},
gap: 5,
},
In above code I have added gap value to define gap of bars which leads to make them thin which you want.
Please refer to below js fiddle.
http://jsfiddle.net/An59E/134/
Please let me know if you face any difficulty to implement the same.
I'm creating a grouped bar chart like this:
$("#chart").kendoChart({
dataSource: {
data: rawdata,
group: { field: "Serie" },
},
legend: {
position: "top"
},
plotArea: {
background: "white",
},
seriesDefaults: {
type: "column",
style: "smooth",
stack: true
},
series: [
{
field: 'Valor1',
labels: {
visible: true,
background: '',
format: 'p1',
color: 'white',
position: 'center'
},
}
],
valueAxis: {
max: 1,
labels: {
format: "p2"
},
line: {
visible: false
},
axisCrossingValue: -10,
},
categoryAxis: {
field: "Segmento",
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # <br /> " +
"Valor = #= kendo.format('{0:p2}', value) # <br/> " +
"Tooltip = #= dataItem.Tooltip # ",
}
});
My data has four properties: Serie, Segmento, Valor1, Tooltip. Example of one data point:
{
"Serie": "S1",
"Segmento": "C1",
"Valor1": 0.31500380634422465,
"Tooltip": 20,
}
The values of the stack bar are incorrect in chrome but in firefox and ie it's fine.
Correct graph in firefox and ie:
Incorrect graph in chrome:
Here is a live demo: http://trykendoui.telerik.com/anET/9
How can i solve this?
This is a problem with Chrome's implementation of Array.sort; see this discussion.
You can fix it by sorting the data source explicitly:
dataSource: {
data: rawdata,
group: { field: "Serie" },
sort: [{ field: "Serie", dir: "asc"}, { field: "Segmento", dir: "asc"} ]
},
(updated demo)
being new to cytoscapeweb 2, i am following one of the provided example in order to learn how to use the API.
i cant make it work and firebug reports the following message:
Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)
var n = this.nodesGroup.getBBox();
in my html document, the cytoscapeweb div is embedded in a jquery tab widget (just to provide context)
somewhere in my.html
<div id="tabs">
<ul>
<li>Interactors Selection</li>
<li>Interactome Builder</li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
<div id="cy"></div>
</div>
</div>
and in foo.js
function cytoscapeInit() {
alert ("intializing cytoscape");
// create a mapper for node size
var nodeSizeMapper = {
continuousMapper: {
attr: {
name: "weight",
min: 0,
max: 100
},
mapped: {
min: 15,
max: 30
}
}
};
// call cytoscape web on the `cy` div
$("#cy").cytoscapeweb({
// define the elements in the graph
elements: {
nodes: [
{ data: { id: "a", weight: 43 }, classes: "foo" },
{ data: { id: "b", weight: 2 }, classes: "bar" },
{ data: { id: "c", weight: 88 }, classes: "foo bar" }
],
edges: [
{ data: { id: "ab", source: "a", target: "b", weight: 32 }, classes: "foo" },
{ data: { id: "bc", source: "b", target: "c", weight: 12 }, classes: "bar baz" },
{ data: { id: "ca", source: "c", target: "a", weight: 96 }, classes: "baz foo" },
{ data: { id: "ac", source: "a", target: "c", weight: 65 }, classes: "bar" }
]
},
// define the layout to use
layout: {
name: "preset",
positions: {
"a": { x: 30, y: 30 },
"b": { x: 125, y: 131 },
"c": { x: 200, y: 50 }
},
fit: false,
stop: function(){
cy.reset();
cy.center();
}
},
// define the visual style (like css) of the graph
style: {
selectors: {
"node":{
shape: "ellipse",
fillColor: "#888",
height: nodeSizeMapper,
width: nodeSizeMapper,
labelText: {
passthroughMapper: "id"
}
},
".yay": {
fillColor: "red",
lineColor: "red",
targetArrowColor: "red"
},
"edge": {
lineColor: "#ccc",
targetArrowColor: "#ccc",
width: {
continuousMapper: {
attr: {
name: "weight"
},
mapped: {
min: 2,
max: 5
}
}
},
targetArrowShape: "triangle"
},
"node:selected": {
fillColor: "#333"
},
"edge:selected":{
lineColor: "#666",
targetArrowColor: "#666"
}
}
},
// define the callback for when cytoscape web is ready
ready: function( cy ){
window.cy = cy;
}
});
Did i miss something obvious?
If so, all apologies.
(1) Don't put alerts in your code like that even when you're testing. It can break asynchronous code, like initialising Cytoscape Web or doing an AJAX call. Use console.log() instead.
(2) You're probably hiding the Cytoscape Web div, cy, with the tabs. You shouldn't be using display: none;, because the Cytoscape Web viewport will then be 0x0 px. Try something like position: absolute; left: -9999px; or similiar for hiding. This entails modifying whatever class name jQuery uses for hidden tabs (probably .ui-state-hidden or something similar).
(3) I'll look into making the renderer code more tolerant of hidden Cytoscape Web divs.
I have a better solution to this problem:
Execute jquery tab just after all of the graphs are loaded.
http://cytoscape.github.io/cytoscape.js/#core/events/cy.ready
for(var t = 0, tot=pageList.length; t<tot; t++) //draw graph for all pages
{
var currPage = pageList[t];
getData(currPage);
}
function getData(currPage)
{
//initiate graph, do stuff...
//graph ready
window[currPage + "Container"].ready(function(e)
{
if (currPage.indexOf(lastPage) != -1)//executetabsafterlastgraphisdrawn
{
setTabs();
}
});
}