We Keep Coding

Vue3 Chart.js not rendering

My problem: I followed the doc from vue-chartjs but the chart is not rendering the data.
Here is my code:
My component Chart.vue
<script>
import { Line } from 'vue3-chart-v2'
export default {
extends: Line,
props: {
chartdata: {
type: Object,
default: null
},
options: {
type: Object,
default: null
}
},
mounted () {
this.renderChart(this.chartdata, this.options)
}
}
</script>
My Home.vue code:
<template>
<div class="container">
<line-chart
v-if="loaded"
:chartdata="chartdata"
:options="options"/>
</div>
</template>
<script>
import LineChart from '../components/Chart.vue'
export default {
name: 'LineChartContainer',
components: { LineChart },
data: () => ({
loaded: false,
chartdata: null,
options: {
responsive: true,
}
}),
async mounted () {
this.loaded = false
try {
const quotes = [
1, 2, 3, 4,
]
this.chartdata = quotes
this.loaded = true
} catch (e) {
console.error(e)
}
}
}
</script>
When I'm rendering the Home view, I see the axis of the chart, but no data inside...
In the console, I don't have any errors.
Later, I would like to fetch data from an API. Thus, the quotes would receive data from an external API. Here I just put some fake data for testing.
Does anyone can help me ? Thks

I was missing the import { defineComponent } from 'vue' in my component. Now it works using the below code.
<template>
<div class="container">
<line-chart
v-if="loaded"
:chartdata="chartdata"
:options="options"/>
</div>
</template>
<script>
import LineChart from '../components/Chart.vue'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'LineChartContainer',
components: { LineChart },
data: () => ({
loaded: false,
chartdata: null,
options: {
responsive: true,
}
}),
async mounted () {
this.loaded = false
try {
const quotes = [
1, 2, 3, 4,
]
this.chartdata = quotes
this.loaded = true
} catch (e) {
console.error(e)
}
}
})
</script>

React: Using .map won't display any data

I use asp.net core and react for a project. Everyting is happening in Visual Studio. I make a call to the server to bring some appoinment(this is working, I checked with debuger and I have an element) but my problem is when I try to display the name of the item that was brought.
{this.state.appoinmentList.map(emp => emp.Name)} ,
here is the problem. The app opens but it won't show the name and with the debuger when I hover over 'emp' it shows:
"emp is not defined"
and
"ReferenceError: emp is not defined
How can I fix the problem?Thank you.
import * as React from 'react';
import { ScheduleComponent, Day, Week, WorkWeek, Month, Agenda, Inject } from '#syncfusion/ej2-react-schedule';
import { RouteComponentProps, withRouter } from 'react-router';
import { connect } from 'react-redux';
import { Ajax } from '#syncfusion/ej2-base';
import { DataManager, ODataV4Adaptor, Query } from '#syncfusion/ej2-data';
import { Data } from '#syncfusion/ej2-schedule/src/schedule/actions/data';
interface ScheduleDataState {
appoinmentList: ScheduleData[],
loading: boolean;
value: string
}
export default class Scheduler extends React.Component<RouteComponentProps<{}>, ScheduleDataState> {
constructor() {
super();
this.state = { appoinmentList: [], loading: true, value: "yes" };
fetch('api/Schedule/GetAll')
.then(response => response.json() as Promise<ScheduleData[]>)
.then(data => {
this.setState({ appoinmentList: data, loading: false,value: "yes" });
});
}
render() {
return <p>
{this.state.appoinmentList.map(emp => emp.Name)}
{ this.state.value }
</p>
}
}
export class ScheduleData {
Id: number = 0;
Name: string = "";
SecondName: string = "";
DateStart: string = "";
DataStop: string = "";
Notes: string = "";
Status: string = "";
}

react append to array

I'm using a reactstrap dashboard theme
The side menus are populated by an array of menu objects.
I wish to:
populate the array from XHR
set the raw data blob as a global variable for the rest of the app to use.
Here is what I'm trying ...
class ClusterItems extends Component {
constructor (props) {
super(props)
this.state = {
apiurl: ' ',
clusterItems: [
{
name: 'Clusters',
title: true,
wrapper: { element: '', attributes: {} },
class: ''
},
{
divider: true
}
]
}
}
componentDidMount () {
const apiurl = 'http://validapiurl/clusters'
axios.get(apiurl).then(results => (
this.state.clusterItems.push({
icon: 'icon-layers',
name: item.clusterName,
url: '/clusters' + item.clusterName + '/instances'
})
))
}
}
The part that I'm missing is how to export this.state.clusterItems as an ARRAY and how to do the global export of the data blob clusters.

React Native Highcharts call method

Hi I am using react native highcharts for chart. Everything is working fine. But I can't able to call a react method within the highcharts declaration.
Here is my component.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading:false
};
this.getSingleData = this.getSingleData.bind(this);
}
getSingleData(x, y) {
console.log(x, y)
}
render() {
var Highcharts='Highcharts';
const configData = {
chart: {
type: 'areaspline',
marginTop:80
},
plotOptions: {
series: {
point: {
cursor: 'pointer',
events: {
click: () => {
this.getSingleData(this.x, this.y);
}
}
}
}
},
series: [{
showInLegend: false,
name: "Total",
data: []
}]
}
return (
<ChartView style={{height:300}} config={configData}></ChartView>
);
}
}
When I try to call getSingleData the method is not calling.
It was works when using reactjs. But it is not working in React Native. Because I am declaring the click event inside render. I don't know how to call a class method.
I've tried with static method, but no luck.
Please give me some suggestions.

Here is the code for your issue, it worked for me. Hopefully, it will work for you too.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading:false
};
this.getSingleData = this.getSingleData.bind(this);
}
getSingleData(x, y) {
console.log(x, y)
}
onMessage = (message)=>{
/*
----
Write your condition in this function on which basis you want to render the content by clicking on your graph
----
*/
}
render() {
var Highcharts='Highcharts';
const configData = {
chart: {
type: 'areaspline',
marginTop:80
},
plotOptions: {
useHTML:true
series: {
point: {
cursor: 'pointer',
events: {
click: () => {
window.ReactNativeWebView.postMessage(this.y);
this.getSingleData(this.x, this.y);
}
}
}
}
},
series: [{
showInLegend: false,
name: "Total",
data: []
}]
}
return (
<ChartView style={{height:300}} config={configData} onMessage={m}></ChartView>
);
}
}

How to format text and embed a video with Quill?

I started to integrate a WYSIWYG into a blog project, I'm using Quill for this (I had no experience with it before). I was able to customize my editor the way it was required, what I don't understand is how to deal with text format and embed videos. I have two fields in my post form, "preview" and "content" (two quill editors) while introducing the text I can give format to it (header, italic, underline...etc) and when click the embed video option the editor allows me to add the link and visualize the embed video in that moment. When I press my save button it stores the post in my db but in my single post page I visualize all the fields without format (header, italic, underline...etc) and also no embed video. How can I give format and show the video? Any help would be appreciated.
I read the Quill documentation and tried to understand how to deal with this using deltas but I don't know how to make this work.
I'm using Meteor + React, this is my code (I'll show only relevant code):
This is my lib, quill.jsx
import React, { Component } from 'react';
import QuillLib from './vendor/quill.js';
import { ud } from '/helpers/lib/main.jsx';
class Quill extends Component {
constructor(props) {
super(props);
this.id = ud.shortUID();
}
componentDidMount() {
const that = this;
const toolbarOptions = [
[{ font: [] }],
[{ header: 1 }, { header: 2 }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ align: [] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ script: 'sub' }, { script: 'super' }],
[{ indent: '-1' }, { indent: '+1' }],
[{ color: [] }, { background: [] }],
['video'],
['image'],
];
const quill = new QuillLib(`#quill-editor-container-${this.id}`, {
modules: {
toolbar: toolbarOptions,
},
theme: 'snow',
});
const content = this.props.content;
quill.setContents(content);
quill.on('text-change', (delta) => {
if (that.props.onChange) {
that.props.onChange(quill);
}
});
}
render() {
return (
<div className="wysiwyg-wrapper">
<div id={`quill-editor-container-${this.id}`}></div>
</div>
);
}
}
export default Quill;
This is my input form component, list.jxs
import { Meteor } from 'meteor/meteor';
import { PostSchema } from '/modules/blog/lib/collections.jsx';
import Quill from '/modules/quill/client/main.jsx';
export class BlogCategory extends Component {
constructor(props) {
super(props);
this.state = {
post: {
content: '',
preview: '',
},
};
this.onPreviewChange = this.onPreviewChange.bind(this);
this.onContentChange = this.onContentChange.bind(this);
}
onPreviewChange(content) {
this.state.post.preview = content.getText();
this.setState(this.state);
}
onContentChange(content) {
this.state.post.content = content.getText();
this.setState(this.state);
}
save() {
const content = this.state.post.content;
const preview = this.state.post.preview;
const post = new PostSchema();
post.set({
content,
preview,
});
if (post.validate(false)) {
const id = post.save();
}
console.log(post.getValidationErrors(false));
}
renderCreatePostForm() {
let content;
if (this.state.showForm) {
content = (
<form action="">
<Quill
content={this.state.post.preview}
onChange={this.onPreviewChange}
/>
<Quill
content={this.state.post.content}
onChange={this.onContentChange}
/>
</form>
);
}
return content;
}
render() {
let content = (
<div className="col-xs-12">
{this.renderActions()}
</div>
);
if (!this.props.ready) {
content = <p>LOADING...</p>;
}
return content;
}
}
export default createContainer(() => {
const handleValidPost = Meteor.subscribe('posts');
return {
ready: handleValidPost.ready(),
posts: PostSchema.find({}).fetch(),
};
}, BlogCategory);
And finally my collections.jsx
import { Mongo } from 'meteor/mongo';
export const PostCollection = new Mongo.Collection('Posts');
export const PostSchema = Astro.Class({
name: 'PostSchema',
collection: PostCollection,
fields: {
content: {
validator : Validators.and([
Validators.required(),
Validators.string(),
Validators.minLength(3)
])
},
preview: {
validator : Validators.and([
Validators.required(),
Validators.string(),
Validators.minLength(3)
])
},
}
});

While getting Quill contents by getText, you lost your text format and video information. Using getText, all non-string data will be omitted. Quill data are defined as Delta (which is a JSON object).
You can fix this by updating your onPreviewChange and onContentChange to use getContents instead of getText. Save these Delta to DB and load it again.
onPreviewChange(content) {
this.state.post.preview = content.getContents();
this.setState(this.state);
}
onContentChange(content) {
this.state.post.content = content.getContents();
this.setState(this.state);
}