We Keep Coding

jsreport, dynamic number of charts through jquery

I'm using JSreport 3.4.1. and Chart.js 3.8.0. From a server API I'm getting a series of data to create n. charts. The problem is that the number of charts are never the same (they depend on various parameters in a database).
I cannot create n. static charts for the reason above, so I was trying to dynamically create and inject them in the DOM through jQuery, but I'm having some difficulties:
It successfully creates the first chart, but with incorrect data (like it isn't waiting for the trigger input), and the second chart isn't shown at all.
Any idea on how to create a dynamic number of charts based on the number of objects (inside an array) that arrives through an API?
const datasets = {
"datasets": [{
"dynamic_id": 0,
"NomeAnomalia": "MIT Appoggi",
"GruppiAnomalie": 199,
"anomalyList": [{
"GruppiAnomalie": 199,
"Code": "Classe 1\nApp1",
"Name": "Piastra di base deformata",
"Class": "Classe 1",
"Severity": "0 - Lieve",
"Value": 100
}],
"pieChartData": [{
"severityName": "Lieve",
"severityValue": 100
},
{
"severityName": "Media",
"severityValue": 0
},
{
"severityName": "Forte",
"severityValue": 0
}
]
},
{
"dynamic_id": 1,
"NomeAnomalia": "MIT Impalcati,Travi,Traversi CA CAP",
"GruppiAnomalie": 199,
"anomalyList": [{
"GruppiAnomalie": 199,
"Code": "Classe 1\nApp1",
"Name": "Piastra di base deformata",
"Class": "Classe 1",
"Severity": "0 - Lieve",
"Value": 100
}],
"pieChartData": [{
"severityName": "Lieve",
"severityValue": 100
},
{
"severityName": "Media",
"severityValue": 0
},
{
"severityName": "Forte",
"severityValue": 0
}
]
}
]
}
var content = document.getElementById('content');
for (dataset of datasets.datasets) {
var divPieChart = `
<div class="row">
<div class="col-sm-12">
<div class="chart-container">
<canvas id="bar_chart_${dataset.dynamic_id}"></canvas>
</div>
</div>
</div>`;
content.innerHTML += divPieChart;
var bar_chart_ctx = document.getElementById(`bar_chart_${dataset.dynamic_id}`).getContext('2d');
var bar_chart = new Chart(bar_chart_ctx, {
type: 'bar',
data: {
labels: [1, 2, 3],
datasets: [{
"label": "2017",
"data": [5, 3, 7.5],
"backgroundColor": ["rgba(215, 221, 234)"]
}]
},
options: {
maintainAspectRatio: false,
devicePixelRatio: 1.5,
plugins: {
legend: {
display: true,
position: "top"
}
},
scales: {
y: {
beginAtZero: true
}
},
animation: {
onComplete: function() {
// set the PDF printing trigger when the animation is done
// to have this working, the chrome-pdf menu in the left must
// have the wait for printing trigger option selected
window.JSREPORT_READY_TO_START = true
}
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<div id="test"></div>
<div id="content"></div>
I've set a playground with mock data (not really needed cause I've put static data inside the charts) so you can see what I mean:
playground test
Thank you
EDIT
I figured out how to do it (JSReport specifically): in JSReport, window.JSREPORT_READY_TO_START = true tells the report that all the components in the page are done to print. Breaking down the "creation" of the html and the "creation" of the charts into two separates loop, using the length of the dataset as control, makes the work (only JSReport, I won't post a snippet cause it won't work the same as window.JSREPORT_READY_TO_START = true is not present).
Here's the playground if someone needs it: playground test

How load html content into Quill wysiwyg editor?

I want to use #vueup/vue-quill ^1.0.0-beta.7 on my control panel admin based on vue ^3.2.29.
Unfortunately, I noticed that loading HTML content is not working for me. Quill converts <div> tags to <p> tags for me, also removing classy and css styles, which destroys the appearance of the content. On backand i use Laravel.
Can anyone help me with this? I sit on it all day to no avail.
<template>
// [...]
<QuillEditor
ref="mainContent"
v-model:content="form.content"
style="min-height: 300px"
:options="editorOptions"
theme="snow"
content-type="html"
output="html"
#text-change="countMainContent"
/>
// [...]
</template>
<script>
import { QuillEditor, Quill } from "#vueup/vue-quill";
import "#vueup/vue-quill/dist/vue-quill.snow.css";
import BlotFormatter from "quill-blot-formatter";
import QuillImageDropAndPaste, { ImageData } from "quill-image-drop-and-paste";
import ArticleCategoryField from "../forms/ArticleCategoryField.vue";
import htmlEditButton from "quill-html-edit-button";
import useVuelidate from "#vuelidate/core";
import { required } from "../../utils/i18n-validators";
Quill.register({
"modules/blotFormatter": BlotFormatter,
"modules/htmlEditButton": htmlEditButton,
"modules/imageDropAndPaste": QuillImageDropAndPaste,
});
// [...]
data() {
return {
// [...]
editorOptions: {
handlers: {
// handlers object will be merged with default handlers object
link: function (value) {
if (value) {
var href = prompt("Enter the URL");
this.quill.format("link", href);
} else {
this.quill.format("link", false);
}
},
},
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["image", "link", "video"],
["clean"], // remove formatting button
],
blotFormatter: {},
htmlEditButton: {
debug: false,
msg: "Edytuj zawartość przy pomocy HTML",
cancelText: "Anuluj",
buttonTitle: "Pokaż kod źródłowy HTML",
},
imageDropAndPaste: {
handler: this.imageHandler,
},
},
},
// [...]
}
}
// [...]
methods: {
getArticle() {
if (this.articleId) {
this.$axios
.get("article/" + this.articleId, {
headers: {
Accept: "application/json",
Authorization: `Bearer ${this.$store.state.auth.token}`,
},
})
.then((response) => {
this.form.title = response.data.article.title;
this.form.mainImage =
response.data.article.uploaded_file_id;
this.form.category =
response.data.article.categories[0].id ?? 0;
this.$refs.mainContent.pasteHTML(
response.data.article.content
);
this.form.articleGallery = this.prepareGallery(
response.data.article.images
);
})
.catch((error) => {
if (process.env.MIX_APP_DEBUG)
this.$toast.error(error.message);
throw new Error(error);
});
}
},
// [...]

I know its bit late. But posting this to help those who visit this question.
I had the same problem. When i tried to load contents into use #vueup/vue-quill editor on the edit page, there were complications. I could load delta, html and plain text using setContents(),setHTML() etc, but after that the problem was that when i tried to type inside the same editor js errors occur. The only solution i found was to implement the quill on own. Sharing my experience to help others.
//do bootstrap if needed
// import './bootstrap';
import { createApp } from 'vue';
import { watch, ref, nextTick } from 'vue'
import axios from 'axios';
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import "quill/dist/quill.snow.css";
createApp({
data() {
return {
mainContentEditor: null,
mainContentEditorValue: '',
}
},
mounted() {
this.initMainContentEditor();
//call this to get article on load
this.getArticle();
},
methods: {
//initiate the main content editor
initMainContentEditor() {
var _this = this;
this.mainContentEditor = new Quill(this.$refs.mainContentEditor, {
modules: {
toolbar: [
[
{
header: [1, 2, 3, 4, false],
},
],
["bold", "italic", "underline", "link"],
],
},
//theme: 'bubble',
theme: "snow",
formats: ["bold", "underline", "header", "italic", "link"],
placeholder: "Type something in here!",
});
//register the event handler
this.mainContentEditor.on("text-change", function () {
_this.mainContentEditorChanged();
});
},
//this method is called when the editor changes its value
mainContentEditorChanged() {
console.log("main content changed!");
// do somethign with it like assign it to mainContentEditorValue
this.mainContentEditorValue = this.mainContentEditor.root.innerHTML;
},
getArticle() {
//do the api call to get the article response.
//once you get the respose
// assign the html content to quill editor
// check getArticle() method on question to fill this part
//replace
// this.$refs.mainContent.pasteHTML(
// response.data.article.content
// );
// with this
this.mainContentEditor.root.innerHTML = response.data.article.content;
}
}
}).mount('#app')
html/template
<div id="app">
<div ref="mainContentEditor"></div>
</div>
You can make it to a component and reuse it. I shared it to just show a working implementation.

use-supercluster gets empty array

After figuring out how to deal with TypeScript and use-supercluster library I have "made it work" until I got a new problem: I get an empty array whenever I use useSuperCluster() function.
I am following the creator's guide so I can handle my own project.
This is what I do:
const [bounds, setBounds] = useState(undefined as BBox | undefined);
const { data, error } = useSwr(API_URL, fetcher);
const coords: Array<ParkingData> = data && !error ? data.data : [];
const points: Array<PointFeature<GeoJsonProperties>> = coords.map(pd => ({
type: "Feature",
properties: {
cluster: false,
pdId: pd._id,
category: 'test'
},
geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
}));
const { clusters } = useSuperCluster({
points,
bounds,
zoom,
options: { radius: 75, maxZoom: 25 }
});
When I debug points I get something like:
But then, clusters is empty. I update bounds like in the video with a onChange attribute, like:
onChange={({ zoom, bounds }) => {
setZoom(zoom);
setBounds([
bounds.nw.lng,
bounds.se.lat,
bounds.se.lng,
bounds.nw.lat
]);
}}
So, what am I doing wrong?
Edit:
I had added supercluster object to useSuperCluster() destructuring like const { clusters, supercluster } = useSuperCluster(...) and after debugging it I get the following object:

Try changing this line order:
geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
to:
geometry: { type: "Point", coordinates: [ pd.lng, pd.lat ] }
apparently, the order is that way, in my case i tried this change and it didn't work for me, but for you there's a chance it will work.
https://github.com/mapbox/supercluster/issues/45

Mapbox Gl JS: Can't update feature property with setFeatureState

I am trying to create a web app that renders circles on a map. If the numUsers property is >= 1, the circle is green and if the numUsers property is 0, the circle is red (the default value is 0).
Below is the structure of my data source:
{
"type":"FeatureCollection",
"features":[
{
"type": "Feature",
"id": 0,
"geometry":{
"type":"Point",
"coordinates":[
1.49129,
42.46372
]
},
"properties": {
"numUsers":0
}
}
]
}
All the circles are initially rendered as red, which is what I want, because the numUsers property of each circle is initially set to 0. However, I want to change one of the circles to be green by setting the numUsers property to 1. I'm trying to use setFeatureState, but it doesn't change the circle's color to green:
map.setFeatureState({source: "cities", id : 0}, {numUsers : 1});
Below is my rendering JS code:
map.on('style.load', function (e) {
map.addSource('cities', {
"type": "geojson",
"data": "cities.geojson",
"cluster": true,
"clusterMaxZoom": 14,
"clusterRadius": 80
});
map.addLayer({
"id": "cities",
"type": "circle",
"source": "cities",
"paint": {
"circle-color": {
property: 'numUsers',
stops: [
[0, '#ff6666'],
[1, '#33ff33']
]
}
}
}, 'settlement-label');
});

You should use "feature-state"[1] expression to get the state that was set using setFeatureState and use "case" expression to switch through state values and set desired color.
Here's the gist of it:
// update after 2 seconds
setTimeout(() => {
map.setFeatureState({ id: 0, source: "geom" }, { numUsers: 1 });
map.setFeatureState({ id: 1, source: "geom" }, { numUsers: 2 });
}, 2000);
map.addLayer({
id: "geom",
type: "circle",
paint: {
"circle-color": [
"case",
["==", ["feature-state", "numUsers"], 1], "blue",
["==", ["feature-state", "numUsers"], 2], "green",
"red"
],
"circle-radius": 4
},
source: { /* ... source */ }
});
Code pen with a working map: https://codepen.io/manishraj/full/YzKeBwv
[1] https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

I'm not sure you can use those kinds of function expressions with feature states, per https://docs.mapbox.com/mapbox-gl-js/style-spec/#other-function.
Instead you should be able to use a match expression https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match with ["feature-state", "numUsers"] to get the feature state in an expression, https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-feature-state

Create a tapered line with OpenLayers and GeoJSON

I am trying to create an offline map through the following steps:
Download data from Natural Earth Data
Convert the shape files to GeoJSON
Add the GeoJSON files as layers in OpenLayers3
I am struggling to get the rivers right, I can display them, but only as a line with a fixed width. However, when looking at the file I created from Natural Earth Data I see that there are in fact many short lines, and each has a width (strokeweig) specified. See snippet below for illustration.
{
"type": "FeatureCollection",
"features": [
{ "type": "Feature", "properties": { "strokeweig": 0.20000000300000001, "scalerank": 5, "featurecla": "River", "name": null, "dissolve": "River_untitled_77", "note": "_untitled_77" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.991327277300684, 46.177440090512803 ], [ -73.078557095009359, 46.160128485695026 ], [ -73.146304897744017, 46.123541571632373 ], [ -73.177181566038399, 46.070624904965499 ], [ -73.163952399371681, 46.044166571632061 ] ] } },
{ "type": "Feature", "properties": { "strokeweig": 0.149999991, "scalerank": 5, "featurecla": "River", "name": "Ebro", "dissolve": "RiverEbro", "note": null }, "geometry": { "type": "LineString", "coordinates": [ [ -4.188860236009816, 43.011173407557422 ], [ -4.10225053548865, 43.001484076502706 ], [ -4.054759894212424, 42.952520656906145 ], [ -4.017449510097691, 42.861053371749534 ], [ -3.96267249186829, 42.825034898442098 ], [ -3.890377163091955, 42.844413560551544 ], [ -3.821957566737524, 42.841855577153098 ], [ -3.757387864588821, 42.81728343359832 ], [ -3.70925126790894, 42.832631333988999 ], [ -3.677521938481732, 42.887899278325165 ], [ -3.626775681971111, 42.89800202083822 ], [ -3.52213090658006, 42.845447089197393 ] ] } },
....
]
So, my question is twofold:
How do I work with this types of data in the first place to display a line with a width as specified in the strokeweig property of a features array item?
How do I deal with this value when zooming in and out?
Thanks,
Hendrik

You can find an example here http://openlayersbook.github.io/ch06-styling-vector-layers/example-07.html that is very near to your needs.
There is not a built-in solution. I can imagine at least two ways: Instead of creating one layer for the whole rivers featurecollection, create one layer for each "scalerank", and set their min/maxResolution accordingly. Otherwise, you can listen to the MapView change:resolution event, and add/remove or show/hide the features accordingly.

The code snippet below does sort of what I wanted:
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'maps/rivers.json',
format: new ol.format.GeoJSON()
}),
style: function(feature, resolution) {
var strokeWeight, scaleRank, width, style;
strokeWeight = feature.get('strokeweig');
scaleRank = feature.get('scalerank');
// strokeWeight is multiplied by scaleRanks because I think this is why this property was included in the GeoJSON
// This number is then corrected for different zoom levels, max-resolution~611.5 based on map.MaxZoom=18
// The calculation with dividers represents the amount of times the current resolution is SMALLER than
// the max-resolution. Note that the value 611.5 will need to be changed when we decide the
// map.maxZoom needs to be increased
width = strokeWeight * scaleRank * (611.5 / resolution));
style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgb(35, 51, 60)',
width: width
})
});
return [style];
}
});
I am not super happy with the formula that computes the width. Obviously taking a static value is not ideal and I don't know how the properties actually should have been combined to produce the correct line width.
I think I will be looking into the solution that Francesco suggested to improve it. This still won't be ideal because the max scaleRank in the file is 6 and I will be allowing zoom up to 18 (I know it won't be a very detailed map but that's OK).
Many thanks to Francesco for his help!!!!!