I'm trying to switch from a ResponsiveLine to a ResponsiveLineCanvas using Javascript library Nivo version 0.80.0 and React 18.2.0, but markers are just not shown.
Not sure what I am missing, so I created an example to reproduce the issue
https://codesandbox.io/embed/fast-leftpad-q6ypqr?fontsize=14&hidenavigation=1&theme=dark
It is sufficient to switch from ResponsiveLineCanvas to ResponsiveLine and the marker get shown.
From the docs I cannot guess if the feature is unsupported in ResponsiveLineCanvas. So, am I missing any configuration?
import React, { useEffect, useState } from "react";
import { ResponsiveLineCanvas } from "#nivo/line";
import { ResponsiveLine } from "#nivo/line";
const commonProperties = {
width: 900,
height: 400,
margin: { top: 20, right: 20, bottom: 60, left: 80 },
animate: true,
enableSlices: "x"
};
const App = () => (
<div style={{ height: 600 }}>
<ResponsiveLineCanvas
{...commonProperties}
data={[
{
id: "Id of serie",
data: [
{ x: 0, y: 0.2 },
{ x: 1, y: 0.3 },
{ x: 2, y: 0.5 },
{ x: 3, y: 0.4 },
{ x: 4, y: 0.3 },
{ x: 5, y: 0.5 },
{ x: 6, y: 0.3 },
{ x: 7, y: 0.1 }
]
}
]}
markers={[
{
axis: "x",
value: 2,
lineStyle: { stroke: "#6aa84f", strokeWidth: 3, opacity: 0.95 },
legend: "Budget line"
}
]}
layers={[
"grid",
"axes",
"areas",
"lines",
"points",
"slices",
"mesh",
"legends",
"markers"
]}
enableGridX={false}
colors={["rgb(97, 205, 187)", "rgb(244, 117, 96)"]}
xScale={{
type: "linear"
}}
yScale={{
type: "linear",
stacked: false,
min: 0,
max: 1
}}
enableArea={true}
areaOpacity={1}
enableSlices={false}
useMesh={true}
crosshairType="cross"
/>
</div>
);
export default App;
Looking at the source code, it's clear that support for markers has not been implemented in the LineCanvas and ResponsiveLineCanvas components. There is no mention of markers anywhere in the component source. The markers prop is not included in the destructuring assignment so that prop will be ignored and have no effect.
As for the layers prop, this Canvas version goes through a bunch of if statements to check for known layer types. "marker" is not one of these types. There is no else statement that lets you know if a provided layer was invalid, it just doesn't do anything.
The supported values of the layers prop, per the source code, are:
"grid"
"axes"
"areas"
"lines"
"points"
"mesh"
"legends"
custom functions
On the other hand, the SVG-based Line and ResponsiveLine components do use the markers prop and support layers=["markers"]. You can see here how the markers prop is passed off to a CartesianMarkers component from the #nivo/core package and the resulting element is stored in the layerById dictionary.
Related
I am trying to add the polyline using the following code in the viewer
const polylineOptions = {
mtype: 1,
polyline: {
clampToGround: false,
material: {
red: 0.9686274509803922,
green: 0.8784313725490196,
blue: 0.12549019607843137,
alpha: 1
},
positions:[
{
x: 4587184.226708501,
y: 263034.9288440118,
z: 4408875.3130637
},
{
x: 4587020.391536608,
y: 263038.279352096,
z: 4409044.42829542
},
{
x: 4587020.391536608,
y: 263038.279352096,
z: 4409044.42829542
}
]
width: 3,
zIndex: 1000
},
}
this.viewer.entities.add(this.polylineOptions);
but the behaviour is unexpected as follows
open this gif to see my result
and it is giving the following log in console
Entity polylines must have clampToGround: true when using zIndex. zIndex will be ignored.
What I actually want is to draw a space line but with clampToGround:false options, it creates the polyline that id attached to the terrain but when I use clampToGround:false then it hides under the tilelayer as shown in the gif
So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.
I have issue with react-chartjs-2 and chartjs-plugin-streaming, my goal was to create a live graph with stream, but it ends up in error and I don't quite know why. Anyhow, my imports are like this:
import { Chart, Bubble } from 'react-chartjs-2';
import ChartStream from 'chartjs-plugin-streaming';
Then right below that is this part:
Chart.pluginService.register(ChartStream);
and then theres's this part in component render
<Bubble
data={{
labels: ['demo'],
datasets: [{
backgroundColor: 'rgba(75,192,192,1)',
data: []
}]
}}
options={{
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.random() * 100,
r: 5
});
},
delay: 500,
refresh: 1000,
frameRate: 30,
duration: 3600000 // 3600000 = 1hour
}
},
scales: {
xAxes: [{
type: 'realtime',
id: 'x-axis-0'
}]
}
}}
/>
first error that happens right on navigation is this:
Uncaught TypeError: Cannot set property 'options' of undefined
at core.controller.js:51
at Array.forEach ()
at n (core.controller.js:50)
at e.update (core.controller.js:340)
at e.construct (core.controller.js:121)
at new e (core.js:7)
at t.renderChart (index.js:228)
at t.componentDidMount (index.js:53)
at e.notifyAll (CallbackQueue.js:76)
at r.close (ReactReconcileTransaction.js:80)
because in core.controller.js of chartjs is this part:
function updateConfig(chart) {
var newOptions = chart.options;
// Update Scale(s) with options
if (newOptions.scale) {
chart.scale.options = newOptions.scale;
} else if (newOptions.scales) {
newOptions.scales.xAxes.concat(newOptions.scales.yAxes).forEach(function(scaleOptions) {
chart.scales[scaleOptions.id].options = scaleOptions;
});
}
// Tooltip
chart.tooltip._options = newOptions.tooltips;
}
the part that fails is this:
chart.scales[scaleOptions.id].options = scaleOptions;
and it's caused by these options I set before, upon debugging there is no x-axis-0 in chart.scales, only y-axis-0
scales: {
xAxes: [{
type: 'realtime',
id: 'x-axis-0'
}]
}
Anyone know how to work around this issue?
The problem seems that when a chart instance is constructed, the 'realtime' scale is not registered yet, and chart.scales['x-axis-0'] is left undefined. Please make sure the chartjs-plugin-streaming is imported before a chart is constructed.
By the way, you don't need to register the plugin object to the pluginService explicitly. It is done with import 'chartjs-plugin-streaming'. Try this working sample:
import React from 'react';
import ReactDOM from 'react-dom';
import { Bubble } from 'react-chartjs-2';
import 'chartjs-plugin-streaming';
ReactDOM.render(
<Bubble
data={{
datasets: [{
label: 'demo',
backgroundColor: 'rgba(75,192,192,1)',
data: []
}]
}}
options={{
plugins: {
streaming: {
onRefresh: function(chart) {
chart.data.datasets[0].data.push({
x: Date.now(),
y: Math.random() * 100,
r: 5
});
},
delay: 500,
refresh: 1000,
frameRate: 30,
duration: 3600000 // 3600000 = 1hour
}
},
scales: {
xAxes: [{
type: 'realtime'
}]
}
}}
/>
, document.getElementById('root'));
I am trying to implement a flowchart editor using jsPlumb and this is my first time using it. I have a square element (which is draggable also) and when I try to re-size it, the endpoints do not move (see 1). I use jsPlumb-2.0.7.js here.
When I used jquery.jsPlumb-1.4.1-all-min.js, the endpoints move as the element is re-sized. But, there are some problems in the endpoints of the diamond shape element in the editor (see 2). I implemented this diamond shaped element by rotating the square element by 45 degrees.
Here is how I make the elements re-sizable:
function makeResizable(classname){
$(classname).resizable({
resize : function(event, ui) {
jsPlumb.repaint(ui.helper);
}
});
}
This is my source endpoint:
var connectorPaintStyle = {
lineWidth: 4,
strokeStyle: "#61B7CF",
joinstyle: "round",
outlineColor: "white",
outlineWidth: 2
},
connectorHoverStyle = {
lineWidth: 4,
strokeStyle: "#216477",
outlineWidth: 2,
outlineColor: "white"
},
endpointHoverStyle = {
fillStyle: "#216477",
strokeStyle: "#216477"
},
sourceEndpoint = {
endpoint: "Dot",
paintStyle: {
strokeStyle: "#7AB02C",
fillStyle: "transparent",
radius: 7,
lineWidth: 3
},
isSource: true,
connector: [ "Flowchart", { stub: [40, 60], gap: 10, cornerRadius: 5, alwaysRespectStubs: true } ],
connectorStyle: connectorPaintStyle,
hoverPaintStyle: endpointHoverStyle,
connectorHoverStyle: connectorHoverStyle,
maxConnections: -1,
dragOptions: {},
overlays: [
[ "Label", {
location: [0.5, 1.5],
label: "Drag",
cssClass: "endpointSourceLabel",
visible:false
} ]
]
};
This is my target endpoint:
targetEndpoint = {
endpoint: "Dot",
paintStyle: { fillStyle: "#7AB02C", radius: 11 },
hoverPaintStyle: endpointHoverStyle,
maxConnections: -1,
dropOptions: { hoverClass: "hover", activeClass: "active" },
isTarget: true,
overlays: [
[ "Label", { location: [0.5, -0.5], label: "Drop", cssClass: "endpointTargetLabel", visible:false } ]
]
}
I use the jsPlumb.addEndpoint() method to add the endpoints.
I searched for help but could not find a suitable answer. Can anyone provide a solution for this problem?
I am posting this as an answer because it solved my problem! I used the latest version of jsPlumb-2.0.7.js and created an instance of jsPlumb.
var instance = jsPlumb.getInstance({/*Drag options and connection overlays*/});
Then I used this instance to make the elements draggable and resizable.
And also, instead of using instance.repaint(ui.helper) I used instance.revalidate(ui.helper) within the resizable function.
Then it perfectly worked!
I am trying to add a custom 3d object in awe.js, I have tried with the cubes and sphere geometries, but haven't found any documentation that facilitates adding a 3d object. Any ideas?
awe.projections.add({
id:'n',
geometry:{ path:'cube.obj'},
rotation:{ x:30, y:30, z:0 },
material:{
type: 'phong',
color:0x000000,
},
}, { poi_id: 'north' });
using new libraries you can do it as shown below, I've copied that from my answer in another question (awe.js Augmented Reality adding text).
awe.pois.add({ id:'jsartoolkit_marker_64', position: { x:0, y:0, z:0 }, scale: { x: 1, y: 1, z: 1 } });
awe.projections.add({
id:'marker_projection',
geometry: { path: 'models/obj/example.obj' }, // path to your model
position: { x: 0, y: 0, z: 0 },
rotation: { x: 0, y: 180, z: 0 },
material:{ path: 'models/obj/example.mtl' }, // path to material if you're using one
visible: false,
}, { poi_id: 'jsartoolkit_marker_64' }); // common point of interest, in this case the marker