Develop Reference

Facing issue while implementing € in "vue-d3-charts"

We are facing issue while implementing "€" symbol for currency, for "$" it works fine. Code snippet:
Working fine with below code:
import { D3BarChart } from 'vue-d3-charts';
export default {
name: "D3Chart",
components: {
D3BarChart,
},
props: {
aemdata: {
type: Object,
required: true,
},
billingdata: {
type: Object,
required: true,
},
},
data() {
return {
topUpColor : '#D3D3D3',
deductionColor : '#696969',
chart_config: {
key: 'monthYear',
values: ['topUp', 'deduction'],
axis: {
yTicks: 10,
yFormat: '$',
},
color: {
keys: {
'topUp': '#D3D3D3',
'deduction': '#696969',
},
},
},
};
},
}
Working screenshot:
But when we are using below code:
import { D3BarChart } from 'vue-d3-charts';
export default {
name: "D3Chart",
components: {
D3BarChart,
},
props: {
aemdata: {
type: Object,
required: true,
},
billingdata: {
type: Object,
required: true,
},
},
data() {
return {
topUpColor : '#D3D3D3',
deductionColor : '#696969',
chart_config: {
key: 'monthYear',
values: ['topUp', 'deduction'],
axis: {
yTicks: 10,
yFormat: '€',
},
color: {
keys: {
'topUp': '#D3D3D3',
'deduction': '#696969',
},
},
},
};
},
}
It is throwing Below error
"An error occurred while showing the error page Unfortunately an error
occurred and while showing the error page another error occurred
Error details: TypeError: this.chart.destroyChart is not a function
Go back to home"

How do I import and access a nested array/object in React?

I'm working with WordPress blocks using Javascript/React. I have a working piece of code that I want to be able to break up into multiple smaller files for easier management, however I can't seem to figure out how to properly import and access the information I want in this way.
Below I have a const const BLOCKS_TEMPLATE = []; with a bunch of data inside it that serves as a template for my custom block. It works fine if I have it inside my main file, but stops working if I take it out and try to import it.
I had tried moving this BLOCKS_TEMPLATE const out into its own file block_template.js and importing it at the top, then trying to access the data below in registerBlockType like below. It's not working for me, and I'm pretty sure I'm just screwing up the syntax. Can someone let me know what I'm doing wrong, if this is possible? Thank you and hopefully this is clear (not sure if the question I wrote is phrased correctly). I'm newer to working with React.
import { BLOCKS_TEMPLATE } from "./block_template";
const el = wp.element.createElement;
const { registerBlockType } = wp.blocks;
const { InnerBlocks } = wp.blockEditor;
const { __ } = window.wp.i18n;
registerBlockType('idg-blocks-plugin/stats-bar-template', {
title: __('Stats Bar Template'),
category: 'widgets',
icon: 'welcome-widgets-menus',
keywords: [__('Statistics'), __('Stats')],
edit: (props) => {
return el(
'div',
{ className: props.className },
el(InnerBlocks, {
template: BLOCKS_TEMPLATE,
templateLock: false,
})
);
},
save: (props) => {
return el(
'div',
{ className: props.className },
el('div', { className: 'custom-div' }, el(InnerBlocks.Content, {}))
);
},
});
The external file, block_template.js, is set up like this:
export const BLOCKS_TEMPLATE = [
[
'core/columns',
{
className: 'is-style-stats-columns',
},
[
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
[
'core/column',
{
className: 'is-statistic',
},
[
[
'core/paragraph',
{
className: 'is-style-main-stat',
placeholder: 'ex: 76.4B',
align: 'center',
},
],
[
'core/paragraph',
{
className: 'is-style-stat-supporting',
content: 'ex: Average Buying Power at Each Summit',
align: 'center',
},
],
],
],
],
],
];

How to show nested object with different Store from ExtJS Grid

I want to have REST operations on child object of a parent object on Ext Grid. I need to use rowExpander not rowWidget since I am using modern toolkit.
Here is my sample JSON data from my API:
{
"pagination": {
"page": 1,
"limit": 20,
"total": 1,
"hasPreviousPage": false,
"hasNextPage": false
},
"data": [
{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [
{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
},
{
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}
]
},
{
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [
{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
},
{
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}
]
}
]
}
I would like to display it per Customer and I have a REST action of POST on the movieRentals object. I would like to use RowExpander but I am not sure how to make it work.
Here is my current ExtJS Grid code:
Ext.define('Vidly.view.rental.DisplayRentalsView', {
extend: 'Ext.grid.Grid',
xtype: 'displayrentalsview',
reference: 'rentallist',
title: 'Rental List',
controller: 'displayrentalsviewcontroller',
viewModel: 'rentalsviewmodel',
reference:'displayrentalsviewgrid',
selType: 'rowmodel',
selModel:
{
mode: 'SINGLE'
},
viewConfig:
{
stripeRows: true
},
listeners: {
selectionchange: 'onSelectionChange',
show: 'onShow',
},
bind: {
store: '{RentalListStore}'
},
itemConfig: {
viewModel: true
},
plugins: {
pagingtoolbar: true
},
items: [
{
xtype: 'container',
docked: 'top',
items: [
{
docked: 'left',
xtype: 'button',
ui: 'decline',
itemId: 'returnRental',
text: 'Return Rental',
reference: 'btnReturnRental',
handler: 'onReturnClick',
disabled: true,
}
]
},
],
columns: [
{
text: "Customer",
flex: 1,
dataIndex: 'customer',
editor:
{
allowBlank: false
},
},
{
text: "Movie",
flex: 1,
dataIndex: 'movieRental',
editor:
{
allowBlank: false
},
},
{
text: "Date Rented",
flex: 1,
dataIndex: 'dateRented',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
},
{
text: "Date Returned",
flex: 1,
dataIndex: 'dateReturned',
editor:
{
allowBlank: false
},
renderer: function (value, metaData, record) {
if (value != null && value != "") {
var dateRented = new Date(Date.parse(value))
return Ext.Date.format(dateRented, 'm/d/Y')
}
else {
return "";
}
}
}
],
});

Its always good to provide an fiddle when your asking something in ExtJs
I Provided a fiddle here, I hope this helps you along
https://fiddle.sencha.com/#view/editor&fiddle/3bpk
Ext.application({
name: 'Fiddle',
launch: function () {
const store = Ext.create('Ext.data.Store', {
data: [{
"id": 2,
"customer": "Mark",
"dateRented": "2021-02-09T21:18:40.667",
"movieRentals": [{
"id": 5,
"rentalDetailDtoId": 2,
"movie": "Shingeki no Kyojin",
"dateReturned": null
}, {
"id": 6,
"rentalDetailDtoId": 2,
"movie": "Insidous 2",
"dateReturned": null
}]
}, {
"id": 1,
"customer": "Samuel",
"dateRented": "2021-02-09T21:17:18.403",
"movieRentals": [{
"id": 3,
"rentalDetailDtoId": 1,
"movie": "Home Alone",
"dateReturned": null
}, {
"id": 4,
"rentalDetailDtoId": 1,
"movie": "Neighbors",
"dateReturned": null
}]
}]
});
Ext.create('Ext.grid.Grid', {
store: store,
plugins: {
rowexpander: true
},
height: 500,
width: '100%',
itemConfig: {
body: {
tpl: '<ul>' +
'<tpl foreach="movieRentals">' +
'<li>Movie: {movie}</li>' +
'</tpl>' +
'</ul>'
}
},
columns: [{
text: 'Name',
dataIndex: 'customer',
width: 200
}, {
text: 'dateRented',
dataIndex: 'dateRented',
width: 250
}],
layout: 'fit',
fullscreen: true
});
}
});
and by the way, move those renderers into your viewController. Duplicate code is always ugly :-)

Ok, you should take a deeper look at the https://docs.sencha.com/extjs/7.3.1/modern/Ext.grid.Row.html#events
itemConfig: {
body: {
tpl: '<p>Hello World</p>',
listeners: {
beforeshow: sender => {
console.log(sender);
// Here you can tell your record to fetch data
}
}
}
}
feel free to play arround with the fiddle
https://fiddle.sencha.com/#fiddle/3bq5&view/editor

Apex charts, setting series data from array in state

In my react app, I'm getting results from pouchDB that I want to use as the data points in my series for apexCharts.
I'm getting the results and putting them in state, called maxCalories, and when logging in the console they are in this format:
So I want those 7 numbers (all with the index name of caloriesBurned to be my data in the series for the chart but I'm currently getting NaN on the graph.
Here's the full code, how can I set these to the correct format to use them in the chart data?
import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';
class TrendsComponent extends Component {
constructor(props) {
super(props);
this.state = {
maxCalories: '',
calorieRecord: {
caloriesConsumed: '',
caloriesBurned: '',
createdAt: this.newestDate,
updatedAt: undefined
},
caloriesDB: new DB('calorie-records'),
calories: {},
calorieElements: null,
options: {
},
chart: {
toolbar: {
show:false
},
id: "basic-bar"
},
xaxis: {
categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
}
},
series: [
{
name: "Trend (tracked)",
data: {this.maxCalories}
}
]
};
}
componentDidMount(){
this.setMax();
}
setMax = () => {
this.state.caloriesDB.db.find({
selector: {
$and: [
{_id: {"$gte": null}},
{caloriesBurned: {$exists: true}},
{createdAt: {$exists: true}}
]
},
fields: ['caloriesBurned', 'createdAt'],
sort: [{'_id':'desc'}],
limit: 7
}).then(result => {
console.log('max');
console.log(result);
const newDocs = result.docs;
this.setState({
maxCalories: newDocs.map(docs => docs)
});
console.log('maxCalories');
console.log(this.state.maxCalories);
}).catch((err) =>{
console.log(err);
});
}
render() {
return (
<div className="mixed-chart">
<Chart
options={this.state.options}
series={this.state.series}
type="area"
stacked="true"
width="700"
/>
</div>
);
}
}
export default TrendsComponent;

I had the same problem in my project. And I spent a lot of time in looking for solution. So here what I get:
const FinacialResultChart = (props) => {
const options = {
chart: {
toolbar: {
show: false
},
animations: {
enabled: false
}
},
stroke: {
curve: "smooth",
dashArray: [0, 8],
width: [4, 2]
},
grid: {
borderColor: props.labelColor
},
legend: {
show: false
},
colors: [props.dangerLight, props.strokeColor],
fill: {
type: "gradient",
gradient: {
shade: "dark",
inverseColors: false,
gradientToColors: [props.primary, props.strokeColor],
shadeIntensity: 1,
type: "horizontal",
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100, 100, 100]
}
},
markers: {
size: 0,
hover: {
size: 5
}
},
xaxis: {
labels: {
style: {
colors: props.strokeColor
}
},
axisTicks: {
show: false
},
categories: [
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
axisBorder: {
show: false
},
tickPlacement: "on"
},
yaxis: {
tickAmount: 5,
labels: {
style: {
color: props.strokeColor
}
}
},
tooltip: {
x: { show: false }
}
}
const data = [
{
name: "Итоговый результат",
data: props.userData.traidingMonth
}
]
return (
<Chart
options={options}
series={data}
type="line"
height={280}
/>
)
}
export default FinacialResultChart
So you need to change your class to const, and push all your props (api data for example) into your children chart component. In chart options you can get the chart data with props.data

How do I load a json file into Sencha Touch?

I'm trying to load a json-file into a list. Can anyone see what I'm doing wrong? I'm getting no error.
Data.js:
Ext.regModel('Contact', {
fields: ['bandName', 'playDate']
});
ListDemo.ListStore = new Ext.data.Store({
model: 'Contact',
sorters: 'bandName',
getGroupString : function(record) {
return record.get('bandName')[0];
},
/*data: [
{ bandName: "Bandname", playDate: "Thursday 20:00" }
]*/
proxy: {
type: 'scripttag',
url: 'http://domain.com/artists.json',
reader : {
type : 'json',
},
autoLoad: true
}
});
Index.js:
ListDemo = new Ext.Application({
name: "ListDemo",
launch: function() {
ListDemo.detailPanel = new Ext.Panel({
id: 'detailpanel',
tpl: 'Hello, {bandName}!',
dockedItems: [
{
xtype: 'toolbar',
items: [{
text: 'back',
ui: 'back',
handler: function() {
ListDemo.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'});
}
}]
}
]
});
ListDemo.listPanel = new Ext.List({
id: 'disclosurelist',
store: ListDemo.ListStore,
itemTpl: '<div class="contact">{bandName}<br /><span style="font-size:12px;">{playDate}</span></div>',
grouped: true,
onItemDisclosure: function(record, btn, index) {
ListDemo.detailPanel.update(record.data);
ListDemo.Viewport.setActiveItem('detailpanel');
}
});
ListDemo.Viewport = new Ext.Panel ({
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
items: [ListDemo.listPanel, ListDemo.detailPanel]
});
}
});
My json-file:
[
{ "id": 1, "bandName": "Moe", "playDate": "Thursday" },
{ "id": 2, "bandName": "Larry", "playDate": "Thursday" },
{ "id": 3, "bandName": "Curly", "playDate": "Thursday" }
]
Can anyone see what I'm doing wrong?

Your JSON-file is in array format. Add a node that has this array as value, and then set the data node (of your proxy) in your Sencha Touch file to this node.
The JSON would look as follows:
"data": [
{ "id": 1, "bandName": "Moe", "playDate": "Thursday" },
{ "id": 2, "bandName": "Larry", "playDate": "Thursday" },
{ "id": 3, "bandName": "Curly", "playDate": "Thursday" }
]

You should using Chrome browse and Chrome Developer tools to debug your code. Your json file is correct.