Related
When I send data into the apex chart array that I took from my json file with axios, the chart does not automatically renew itself in Vue3
With Axios, I fetch all the apexcharts in the json file and add them to the elementCustomize array. Then I push the data in the elementDataseries array into elementCustomize[i].options.series one by one, the data goes into the series of the related apexchart successfully, but I can't see the change in the chart in the page. I can see the data whenever I write a text in the page and save it.
Can you help me?
That is my json file
"elementCustomize": [
{
"id": "2023024145531",
"customizeId": 0,
"elementId": 2023024145531,
"pageId": 1,
"zone": "zone1",
"options": {
"series": [ {
"elementId" : 2023024145531,
"dataId" : 123453576978982,
"name" : "Data 1",
"data" : [-44,55,187,11,61,22,63,45,3]
}],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
},
{
"id": "2023025111221",
"customizeId": 0,
"elementId": "2023025111221",
"pageId": 1,
"zone": "zone3",
"options": {
"series": [],
"chart": {
"type": "bar",
"height": 280,
"toolbar": {
"show": true,
"tools": {
"download": true,
"selection": true,
"zoom": true,
"zoomin": true,
"zoomout": true,
"pan": true,
"reset": true
}
}
},
"plotOptions": {
"bar": {
"horizontal": false,
"columnWidth": "55%",
"endingShape": "rounded"
}
},
"colors": [
"#0150581244",
"#2196F3",
"#4CAF50",
"#9C27B0"
],
"dataLabels": {
"enabled": false
},
"stroke": {
"show": true,
"width": 2,
"colors": [
"transparent"
]
},
"xaxis": {
"categories": [
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct"
]
},
"yaxis": {
"title": {
"text": "$ (thousands)"
}
},
"fill": {
"opacity": 1
},
"legend": {
"position": "top",
"horizontalAlign": "center"
},
"title": {
"text": "Multiple Bars",
"align": "left"
},
"tooltip": {
"y": {}
}
}
}
]
The process where I pull this data from the json and sync it into the array
onBeforeMount(async () => {
await api.get(jsonServerUrl+"elementCustomize?pageId="+pageID).then(response=>{
elementCustomize = response.data
})
}
That is my apex chart code
<div v-for="item in filteredCustomize('zone1')" :key="item.id" class="drag-item s-card">
<ApexChart
id="apex-chart-1 chart"
:height="item.options.chart.height"
:type="item.options.chart.type"
:series="item.options.series"
:options="item.options"
>
</ApexChart>
{{item.options.series}}
<div class="elementHeadBar hover" align="start">
<VButton icon="feather:edit-2" color="info" :loading="loading" raised #click="updateSeries(item)"> test push series </VButton>
</div>
</div>
filteredCustomize for filtering areas, because i have 3 column in page. zone1, zone2, zone3 etc.
const filteredCustomize=(e)=>{
return elementCustomize.filter(item => item.zone === e)
}
I am posting fake datas with updateseries function.
const updateSeries = (item)=> {
let matchingData = elementDataSeries.filter(e => e.elementId == item.id)
if (matchingData){
for(let i = 0; i < elementCustomize.length; i++) {
for(let j = 0; j < elementDataSeries.length; j++) {
if(elementCustomize[i].elementId === elementDataSeries[j].elementId) {
elementCustomize[i].options.series.push(elementDataSeries[j]);
}
}
}
}else{
console.log("no")
}
console.log(elementCustomize)
}
i tried watch but it doesn't work. i read something in forums. when post data into apexchart series, it have to re render automatically.
I am creating azure-devops release pipeline with API, but getting error. I have validated the json as well and is correct from https://jsonlint.com/ Any help would be really appreciated
I have followed this issue as well and retention policy is correctly passed
Azure DevOps API release definition
error: "message": "VS402982: A retention policy is not set for the stage ‘Test-New-2’. Retention policies at the release pipeline level are deprecated. Use a retention policy at the stage level
POST https://vsrm.dev.azure.com/{{organization}}/{{project}}/_apis/release/definitions?api-version=6.0
json body:
"retentionPolicy": {
"daysToKeep": 30,
"releasesToKeep": 3,
"retainBuild": true
},
Yes, it should be the syntax issue, to create a release definition, you could refer to this sample.
Reruest URL:
POST https://vsrm.dev.azure.com/{organization}/{project}/_apis/release/definitions?api-version=6.0
Request Body:
{
"source": "undefined",
"revision": 1,
"description": null,
"createdBy": null,
"createdOn": "0001-01-01T00:00:00",
"modifiedBy": null,
"modifiedOn": "0001-01-01T00:00:00",
"isDeleted": false,
"variables": {},
"variableGroups": [],
"environments": [
{
"id": 0,
"name": "PROD",
"variables": {},
"variableGroups": [],
"preDeployApprovals": {
"approvals": [
{
"rank": 1,
"isAutomated": false,
"isNotificationOn": false,
"approver": {
"displayName": null,
"id": "aeb95c63-4fac-4948-84ce-711b0a9dda97"
},
"id": 0
}
]
},
"postDeployApprovals": {
"approvals": [
{
"rank": 1,
"isAutomated": true,
"isNotificationOn": false,
"id": 0
}
]
},
"deployPhases": [
{
"deploymentInput": {
"parallelExecution": {
"parallelExecutionType": "none"
},
"skipArtifactsDownload": false,
"artifactsDownloadInput": {},
"queueId": 15,
"demands": [],
"enableAccessToken": false,
"timeoutInMinutes": 0,
"jobCancelTimeoutInMinutes": 1,
"condition": "succeeded()",
"overrideInputs": {}
},
"rank": 1,
"phaseType": "agentBasedDeployment",
"name": "Run on agent",
"workflowTasks": []
}
],
"environmentOptions": {
"emailNotificationType": "OnlyOnFailure",
"emailRecipients": "release.environment.owner;release.creator",
"skipArtifactsDownload": false,
"timeoutInMinutes": 0,
"enableAccessToken": false,
"publishDeploymentStatus": false,
"badgeEnabled": false,
"autoLinkWorkItems": false,
"pullRequestDeploymentEnabled": false
},
"demands": [],
"conditions": [],
"executionPolicy": {
"concurrencyCount": 0,
"queueDepthCount": 0
},
"schedules": [],
"retentionPolicy": {
"daysToKeep": 30,
"releasesToKeep": 3,
"retainBuild": true
},
"properties": {},
"preDeploymentGates": {
"id": 0,
"gatesOptions": null,
"gates": []
},
"postDeploymentGates": {
"id": 0,
"gatesOptions": null,
"gates": []
},
"environmentTriggers": []
}
],
"artifacts": [],
"triggers": [],
"releaseNameFormat": null,
"tags": [],
"properties": {},
"id": 0,
"name": "Fabrikam-web",
"projectReference": null,
"_links": {}
}
I test it on my side, it works for me.
I am working on kepler.gl . i am trying to add another point on map and change the state of kepler.gl on a button click . I mean when i click the button another point is mapped on keppler.gl map . wright now i am having 4 point on the kepler.gl map and that's working fine ... here is the code of 4 point on the map
import React, { useState } from "react";
import keplerGlReducer, {mapStateUpdaters} from "kepler.gl/reducers";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { taskMiddleware } from "react-palm/tasks";
import { Provider, useDispatch } from "react-redux";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import useSwr from "swr";
import {csv} from 'd3';
import datajson from './Data/data.json'
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default function App() {
return (
<Provider store={store}>
<Map />
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const data=datajson;
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
data
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
}
}, [dispatch, data]);
return (
// <button onClick ={this.handledata} >changedata</button>
<KeplerGl
id="covid"
mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
width={window.innerWidth}
height={window.innerHeight}
/>
);
}}
my data.jason file look like this ....
[
{
"id": 139010,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 60,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "nan",
"to": "Sol",
"batt_diff": -8,
"duracion": 412,
"fecha": "2018-09-01",
"start30": "2018-09-01 08:00:00",
"end30": "2018-09-01 08:00:00",
"distancia": 2,
"latitude": 40.0,
"longitude": -4.0
},
{
"id": 138888,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 100,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "Universidad",
"to": "Embajadores",
"batt_diff": -4,
"duracion": 646,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 4,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138878,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 110,
"consumedFreeMinutes": 0,
"id_user": 10244,
"id_vehicle": 173,
"from": "Vallehermoso",
"to": "Cuatro Caminos",
"batt_diff": -7,
"duracion": 682,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 3,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138941,
"state": 4,
"subState": 0,
"paid": 0,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 170,
"consumedFreeMinutes": 0,
"id_user": 12133,
"id_vehicle": 207,
"from": "Justicia",
"to": "Prosperidad",
"batt_diff": -7,
"duracion": 1031,
"fecha": "2018-09-01",
"start30": "2018-09-01 02:00:00",
"end30": "2018-09-01 02:00:00",
"distancia": 5,
"latitude": "40.0",
"longitude": "-4.0"
}
]
now i want to add another point on a click of button ? like for example i want to add that point on a button click
{
"fields": [
{
"name": "id",
"format": "",
"type": "integer"
},
{
"name": "state",
"format": "",
"type": "integer"
},
{
"name": "substate",
"format": "",
"type": "integer"
},
{
"name": "paid",
"format": "",
"type": "integer"
},
{
"name": "stateReason",
"format": "",
"type": "string"
},
{
"name": "id_turistic",
"format": "",
"type": "integer"
},
{
"name": "priceFinal",
"format": "",
"type": "integer"
},
{
"name": "consumedFreeMinutes",
"format": "",
"type": "integer"
},
{
"name": "consumed",
"format": "",
"type": "integer"
},
{
"name": "id_user",
"format": "",
"type": "integer"
},
{
"name": "id_vehicle",
"format": "",
"type": "integer"
},
{
"name": "from",
"format": "",
"type": "string"
},
{
"name": "to",
"format": "",
"type": "string"
},
{
"name": "batt_diff",
"format": "",
"type": "string"
},
{
"name": "duracion",
"format": "",
"type": "string"
},
{
"name": "fecha",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "start30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "end30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "distancia",
"format": "",
"type": "integer"
},
{
"name": "latitude",
"format": "",
"type": "real"
},
{
"name": "longitude",
"format": "",
"type": "real"
},
{
"name": "lo",
"format": "",
"type": "real"
}
],
"rows": [
[
139010,
4,
0,
1,
"Trip finished by user",
5,
60,
0,
4627,
245,
"nan",
"Sol",
-8,
412,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
2,
40.0,
-12,
40.0
],
[
138888,
4,
0,
1,
"Trip finished by user",
5,
100,
0,
4627,
245,
"Universidad",
"Embajadores",
-4,
646,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
4,
40.0,
0,
40.0
],
[
138878,
4,
0,
1,
"Trip finished by user",
5,
110,
0,
10244,
173,
"Vallehermoso",
"Cuatro Caminos",
-7,
682,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
3,
40.0,
-8.0,
40.0
],
[
138941,
4,
0,
0,
"Trip finished by user",
5,
170,
0,
12133,
207,
"Justicia",
"Prosperidad",
-7,
1031,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
5,
40.0,
-4.0,
40.0
]
]
}
how can i do this can anyone help me for this? i already tried mapstateupdataer function but not been able to get desired results ?
I think you have not defined the button event handler. First, you need to define it and then you can dispatch the action with the new data.
For example, if you have a button with an event handler inside your render() method.
<Button onClick={addData}>Add Data</Button>
Update: To append existing data-set on the map. You have to import a new action from kepler/actions and dispatch it.
import {updateMap} from 'kepler.gl/actions'
const addData= () => {
const data = {latitude: 37.75043, longitude: -122.34679, width: 800, height: 1200};
dispatch(updateMap(data));
};
You have to assign your data (the array of objects in your question) to a variable. Let's call it as sampleData. And This is how your replaceData handler should be like:
const addData= () => {
const sampleData = ['your-new-data-set'];
const config = this.getMapConfig();
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
sampleData
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
};
I am working on a Sencha touch app. I made a jsonP request which returns an audio url, I will like to write a function that will play that audio on a button click.
The structure of the call and the response is as follows:
Ext.data.JsonP.request({
url: 'https://api.pearson.com/v2/dictionaries/entries',
callbackKey: 'callback',
params: {
apikey: 'ZzNOnelsRcNcE7Npoh2SdAeQbjRA4XE4',
headword: 'school'
}
// RESPONSE.....
{
"status": 200,
"offset": 0,
"limit": 2,
"count": 2,
"total": 245,
"url": "/v2/dictionaries/entries?headword=school&limit=2",
"results": [
{
"datasets": [
"ldoce5",
"dictionary"
],
"headword": "school",
"homnum": 1,
"id": "cqAFqfYHHt",
"part_of_speech": "noun",
"senses": [
{
"definition": "a place where children are taught",
"examples": [
{
"audio": [
{
"type": "example",
"url": "/v2/dictionaries/assets/ldoce/exa_pron/p008-001919005.mp3" // The audio url
}
],
"text": "His mother always used to pick him up from school."
}
],
"gramatical_info": {
"type": "uncountable and countable"
},
"signpost": "where children learn"
}
],
"url": "/v2/dictionaries/entries/cqAFqfYHHt"
},
{
"datasets": [
"wordwise",
"dictionary"
],
"headword": "school",
"id": "cqARFaW3Aw",
"part_of_speech": "noun",
"senses": [
{
"definition": "a place where children are taught, or the time they spend there every day",
"examples": [
{
"text": "Mr Mamood is a teacher at my school ."
}
]
}
],
"url": "/v2/dictionaries/entries/cqARFaW3Aw"
}
]
}
You could use a Ext.Audio component provided by Sencha Touch, hiding it.
{
id: 'audio',
xtype: 'audio',
hidden: true,
url: null
}
As soon as you get the audio url set it on the component:
Ext.getCmp('audio').setUrl(mp3Url);
Then you would use a button to toggle play/pause on it:
{
xtype: 'button',
text: 'Play'
handler: function() {
// get the audio component (using its id)
var audio = Ext.getCmp('audio');
audio.toggle();
this.setText(audio.isPlaying() ? 'Pause' : 'Play');
}
}
Check out http://docs.sencha.com/touch/2.3.1/#!/api/Ext.Audio for a working example.
I am trying to use the rootProperty value in a Sencha Touch 2 store to load some JSON I retrieved from the Foursquare Venues API and for the life of me I cannot get it to work.
According to the docs I should setup my rootProperty in dot notation to equal "response.venues" but it does not populate the list. I put the json in a separate file and removed the "response" and "venues" headers and it worked fine. There must be something blatantly obvious I'm missing here as I can't find a straight answer anywhere.
My model:
Ext.define('App.model.4SqVenue', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', id: 'id'}
]
}
});
My store:
Ext.define('App.store.4SqVenues', {
extend: 'Ext.data.Store',
requires: [
'App.model.4SqVenue'
],
config: {
model: 'App.model.4SqVenue',
storeId: '4SqVenuesStore',
proxy: {
type: 'jsonp',
url: 'foursquare venue request',
reader: {
type: 'json',
rootProperty: 'response.venues'
}
}
}
});
My view:
Ext.define('App.view.4SqVenues', {
extend: 'Ext.List',
xtype: '4SqVenuesCard',
requires: [
'App.store.4SqVenues'
],
config: {
fullscreen: true,
itemTpl: '{name}',
store: '4SqVenuesStore'
}
});
The response from the 4sq API:
{
"meta": {
"code": 200
},
"response": {
"venues": [
{
"id": "4a3ad368f964a52052a01fe3",
"name": "Four Peaks Brewing Company",
"contact": {
"phone": "4803039967",
"formattedPhone": "(480) 303-9967",
"twitter": "4PeaksBrewery"
},
"location": {
"address": "1340 E 8th St",
"crossStreet": "at Dorsey Ln.",
"lat": 33.4195052281187,
"lng": -111.91593825817108,
"distance": 1827,
"postalCode": "85281",
"city": "Tempe",
"state": "AZ",
"country": "United States"
},
"categories": [
{
"id": "4bf58dd8d48988d1d7941735",
"name": "Brewery",
"pluralName": "Breweries",
"shortName": "Brewery",
"icon": {
"prefix": "https://foursquare.com/img/categories/nightlife/brewery_",
"sizes": [
32,
44,
64,
88,
256
],
"name": ".png"
},
"primary": true
}
],
"verified": true,
"stats": {
"checkinsCount": 24513,
"usersCount": 8534,
"tipCount": 235
},
"url": "http://www.fourpeaks.com",
"likes": {
"count": 0,
"groups": []
},
"menu": {
"type": "foodAndBeverage",
"url": "https://foursquare.com/v/four-peaks-brewing-company/4a3ad368f964a52052a01fe3/menu",
"mobileUrl": "https://foursquare.com/v/4a3ad368f964a52052a01fe3/device_menu"
},
"specials": {
"count": 0,
"items": []
},
"hereNow": {
"count": 1,
"groups": [
{
"type": "others",
"name": "Other people here",
"count": 1,
"items": []
}
]
}
}
]
}
}
I have a very similar issue. Basically all is good if I load the json without the rootProperty defined. But once I define it things stop working (bad configuration error reported in Architect).
So the belwo works opnlu until I define the rootProperty as 'records'
{ "records" : [ { "artist" : "Champion",
"index" : 1,
"recordid" : "r00899659",
"trackname" : "1 To 2"
},
{ "artist" : "Champion",
"index" : 2,
"recordid" : "r00899668",
"trackname" : "Is Anybody There?"
}
.......
],
"rowcount" : 10,
"timestamp" : "1/07/2012 5:05:19 AM"
}
first, you have to wrap it in a function call as Per documentation for the response. Then you may have to use a convert function inside your model. Such as setting the root property to response, and then using convert to bring in all the other data from the venue property.