We Keep Coding

Grapejs together Vue

I'm using Grapejs with Vue and so far it seems to work fine, I'm having a problem with the "grapesjs-preset-webpage" library.
I am not able to add more HTML options, such as "Columns", "Videos" and other settings that at least appear when using the CDN.
My question would be how do I add more blocks beyond the 3 that already come as default?
(link-block, qyote, text-basic).
My configuration file is like this:
<script>
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import 'grapesjs/dist/grapes.min.js'
import plugin from 'grapesjs-preset-webpage';
export default {
name: 'BuilderHtml',
mounted(){
grapesjs.init({
container: '#gjs',
height: '900px',
width: '100%',
plugins: [plugin],
storageManager: {
id: 'gjs-',
type: 'local',
autosave: true,
storeComponents: true,
storeStyles: true,
storeHtml: true,
storeCss: true,
},
deviceManager: {
devices:
[
{
id: 'desktop',
name: 'Desktop',
width: '',
},
{
id: 'tablet',
name: 'Tablet',
width: '768px',
widthMedia: '992px',
},
{
id: 'mobilePortrait',
name: 'Mobile portrait',
width: '320px',
widthMedia: '575px',
},
]
},
pluginsOpts: {
[plugin]: {
blocksBasicOpts: {
blocks: ['column1', 'column2', 'column3', 'column3-7', 'text', 'link', 'image', 'video'],
flexGrid: 1,
},
blocks: ['link-block', 'quote', 'text-basic', 'column3'],
},
}
})
}
}
</script>
I'm trying to add this configuration below, but no new block is appearing, did I do something wrong?

Apexcharts Brush Chart is not working in react component

I'm using the react apexcharts.Apexcharts when I use the brush chart the chart which through the error. the code is given below with customized data. when using brush charts in my local component I'm facing the error which I have mention after the code
import React, { Component } from "react";
import ReactApexChart from "apexcharts";
class LineChartDemo extends Component {
constructor(props) {
super(props);
this.state = {
series: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
],
options: {
chart: {
id: "chartyear",
type: "area",
height: 160,
background: "#F6F8FA",
toolbar: {
show: false,
autoSelected: "pan",
},
events: {
mounted: function (chart) {
var commitsEl = document.querySelector(".cmeta span.commits");
var commits = chart.getSeriesTotalXRange(
chart.w.globals.minX,
chart.w.globals.maxX
);
commitsEl.innerHTML = commits;
},
updated: function (chart) {
var commitsEl = document.querySelector(".cmeta span.commits");
var commits = chart.getSeriesTotalXRange(
chart.w.globals.minX,
chart.w.globals.maxX
);
commitsEl.innerHTML = commits;
},
},
},
colors: ["#FF7F00"],
stroke: {
width: 0,
curve: "smooth",
},
dataLabels: {
enabled: false,
},
fill: {
opacity: 1,
type: "solid",
},
yaxis: {
show: false,
tickAmount: 3,
},
xaxis: {
type: "datetime",
},
},
seriesYears: [
{
name: "series1",
data: [31, 40, 28, 51, 42, 109, 100],
},
],
optionsYears: {
chart: {
height: 200,
type: "area",
background: "#F6F8FA",
toolbar: {
autoSelected: "selection",
},
brush: {
enabled: true,
target: "chartyear",
},
selection: {
enabled: true,
xaxis: {
min: new Date("26 Jan 2014").getTime(),
max: new Date("29 Mar 2015").getTime(),
},
},
},
colors: ["#7BD39A"],
dataLabels: {
enabled: false,
},
stroke: {
width: 0,
curve: "smooth",
},
fill: {
opacity: 1,
type: "solid",
},
legend: {
position: "top",
horizontalAlign: "left",
},
xaxis: {
type: "datetime",
},
},
};
}
render() {
debugger;
return (
<div id="wrapper">
<div id="chart-months">
<ReactApexChart
options={this.state.options}
series={this.state.series}
type="area"
height={160}
/>
</div>
<h5 class="github-style">
<img
class="userimg"
src="https://picsum.photos/200/200/?image=1031"
data-hovercard-user-id="634573"
alt=""
width="38"
height="38"
/>
<div class="userdetails">
<a class="username">coder</a>
<span class="cmeta">
<span class="commits"></span> commits
</span>
</div>
</h5>
<div id="chart-years">
<ReactApexChart
options={this.state.optionsYears}
series={this.state.seriesYears}
type="area"
height={200}
/>
</div>
</div>
);
}
}
export default LineChartDemo;
it through the following error
Uncaught TypeError: Cannot call a class as a function
Am i using the right way of apexcharts intregation in my react component..?

You're importing the wrong library.
First, you have to install apexcharts and react-apexcharts
npm install --save react-apexcharts apexcharts
but while importing, you should use the following
import ReactApexChart from "react-apexcharts";

Set link behind background image and make it clickable Cytoscape.js

Is it possible to set a link behind the backgraound image and make it clickable for specific nodes? I am using the style and elements in seperated json files.
here is my implementation:
{
"selector": ".myImage",
"css": {
"background-image": "https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg",
"background-width": "17px",
"background-image-opacity": 0.8,
"background-height": "15px",
"background-position-x": "50%",
"background-position-y": "0",
"padding": "5px",
"background-clip": "none",
"background-fit": "none"
}
},
}
**{
"elements": [
{
"data": {
"id": "node1",
"href": "https://js.cytoscape.org/#style"
},
"position": {
"x": 50,
"y": 300
},
"group": "nodes",
"removed": false,
"selected": false,
"selectable": false,
"locked": true,
"grabbable": true,
"classes": ""
},
]
}**
thanks for help

You can easily follow the two examples given in the docs:
Linkout Example
Images for BFS Layout
With these two, getting the link to work is really easy. I created a working example here:
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
css: {
content: "data(id)",
"text-valign": "center",
"text-halign": "center",
height: "60px",
width: "60px",
"border-color": "black",
"border-opacity": "1",
'background-fit': 'cover',
"border-width": "10px"
}
},
{
selector: "node[href]",
css: {
content: '',
'background-image': 'https://live.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg'
}
},
{
selector: "edge",
css: {
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "n0",
href: "https://js.cytoscape.org/#collection"
}
},
{
data: {
id: "n1",
href: "https://js.cytoscape.org//#demos"
}
},
{
data: {
id: "n2",
href: "https://js.cytoscape.org/"
}
},
{
data: {
id: "n3",
href: "https://js.cytoscape.org//#notation"
}
},
{
data: {
id: "n4",
href: "https://js.cytoscape.org/"
}
},
{
data: {
id: "n5"
}
},
{
data: {
id: "n6",
href: "https://js.cytoscape.org/#core"
}
},
{
data: {
id: "n7",
href: "http://cytoscape.org"
}
},
{
data: {
id: "n8"
}
},
{
data: {
id: "n9"
}
},
{
data: {
id: "n10",
href: "https://js.cytoscape.org/#notation"
}
},
],
edges: [{
data: {
source: "n0",
target: "n1"
}
},
{
data: {
source: "n1",
target: "n2"
}
},
{
data: {
source: "n1",
target: "n3"
}
},
{
data: {
source: "n4",
target: "n5"
}
},
{
data: {
source: "n4",
target: "n6"
}
},
{
data: {
source: "n6",
target: "n7"
}
},
{
data: {
source: "n6",
target: "n8"
}
},
{
data: {
source: "n8",
target: "n9"
}
},
{
data: {
source: "n8",
target: "n10"
}
}
]
},
layout: {
name: "dagre",
padding: 5
}
}));
cy.on('tap', 'node', function() {
if (this.data('href')) {
try { // your browser may block popups
window.open(this.data('href'));
} catch (e) { // fall back on url change
window.location.href = this.data('href');
}
}
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
<html>
<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/dagre#0.7.4/dist/dagre.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre#2.1.0/cytoscape-dagre.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>
This site seems to block popups, that is why the link may not work here, but as proof, here you can see it working in my codepen. Feel free to implement this code in your project and try it out there.

Passing data from external js file to vue component

I'm trying to pass data from external data.js file to the component so that it can be used in it.
However I'm getting error that the data is not defined.
Here is my data.js file
const data = [
{
chartOptions: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[100, 221, 250, 300, 411]]
},
{
name: "Company name",
color: "yellow",
type: "scatter",
data: [[0, 200]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
},
{
chartOptions2: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[120, 231, 222, 320, 321]]
},
{
name: "Company name 2",
color: "yellow",
type: "scatter",
data: [[0, 210]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
}
];
export default data;
And here is the component where I need to use data:
<template>
<div>
<highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
<highcharts class="hc" :options="chartOptions2" ref="chart"></highcharts>
</div>
</template>
<script>
import data from "./data.js";
export default {
data () {
return {
data
}
}
};
</script>
You can also try this on codesandbox

Convert your data.js to object (now it's an array):
const data = {
chartOptions: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[100, 221, 250, 300, 411]]
},
{
name: "Company name",
color: "yellow",
type: "scatter",
data: [[0, 200]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
},
chartOptions2: {
chart: {
type: "boxplot",
inverted: true,
height: 200
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [
{
name: "Observations",
data: [[120, 231, 222, 320, 321]]
},
{
name: "Company name 2",
color: "yellow",
type: "scatter",
data: [[0, 210]],
marker: {
fillColor: "yellow",
lineWidth: 1,
lineColor: "yellow"
}
}
]
}
}
export default data;
Then in your component:
import data from "./data.js";
export default {
data () {
return {
chartOptions: data.chartOptions,
chartOptions2: data.chartOptions2,
}
}
};

You should specify the key/value pair as follows :
data() {
return {
charts:data
};
},
and in the template access the items of the charts array :
<div>
<highcharts class="hc" :options="charts[0].chartOptions" ref="chart"></highcharts>
<highcharts class="hc" :options="charts[1].chartOptions2" ref="chart2"></highcharts>
</div>

how to disable download option on apexcharts?

I am use apexcharts vue bindings to plot a few bar charts.
As told by docs it should be possible to disable the toolbar by set show:false as seen there.
So i did it on my helper function:
// do-char-options.js
const randomColor = require("randomcolor");
module.exports = labels => ({
toolbar: { show:false },// docs says it should do the trick
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: { distributed: true, horizontal: true }
},
tooltip: {
theme: "dark"
},
xaxis: {
categories: labels,
color: "white",
labels: {
style: {
colors: ["white"]
}
}
},
yaxis: {
labels: {
style: {
color: "white"
}
}
}
});
and i pass it to my vue component this way:
<template>
<v-layout row justify-center wrap>
<v-flex xs12>
<apexchart type="bar" height="500" :options="chartOptions" :series="series"/>
</v-flex>
</v-layout>
</template>
<script>
const doOptions = require("./do-chart-options");
const labels = [
"Javascript",
"Java",
"SQL",
"HTML",
"CSS",
"C",
"C++",
"PHP",
"Python",
"GO",
"Ruby"
];
module.exports = {
name: "chart-languages",
data: _ => ({
series: [{ data: [160, 110, 90, 85, 80, 80, 60, 30, 15, 14, 9] }],
chartOptions: doOptions(labels)
})
};
</script>
However the menu is still there:
Any guidance is welcome.

toolbar should be under chart key
{
chart: {
toolbar: {
show: false
}
},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
...
}
You can check my demo here

chart: {
toolbar: {
show: true,
tools:{
download:false // <== line to add
}
}
}
Can only disable download option , but toolbar exists

Use CSS to hide the option(s) from the download section.
/* hide the Download CSV */
<style lang="scss" scoped>
::v-deep .apexcharts-menu-item.exportCSV {
display: none;
}
</style>

edit this line may help you
{chart: {toolbar: {show: false
}},
colors: randomColor({
luminosity: "light",
hue: "blue",
count: 30
}),
plotOptions: {
bar: {
distributed: true,
horizontal: true
}
},
}