enter image description here
This is my api response.So I have network data like this :
const data = {
nodes: [
{
id: "ETH",
svg:
"https://cdn-icons-png.flaticon.com/512/2891/2891526.png",
},
{
id: "BTC",
svg:
"https://cdn-icons-png.flaticon.com/512/3033/3033143.png",
size :400
},
],
links: [
{ source: "ETH", target: "BTC" },
]
};
What I want to do is the response of persons(persons.personalData) object that is the name of person I want that to be nodes of network. I cant make it work. Any idea?
I have the exact same issue as this thread: get scss from design tokens json file using style dictionary. The answer mentioned in this thread is great, but is there a way to specify some setting so that the style-dictionary automatically converts the style object to the way its mentioned in the answer in the mentioned thread?
I basically want to convert
"Display-2xl": {
"Regular": {
"value": {
"fontFamily": "{fontFamilies.inter.value}",
"fontWeight": "{fontWeights.inter-0.value}",
"fontSize": "$fontSize.10",
},
"type": "typography"
},
}
to
"Display-2xl": {
"Regular": {
"type": "typography",
"fontFamily": {
"value": "{fontFamilies.inter.value}"
},
"fontWeight": {
"value": "{fontWeights.inter-0.value}"
},
"fontSize": {
"value": "{fontSize.10}"
}
}
}
by adding some format / transform. How can I achieve this?
My config.json object:
const StyleDictionary = require("style-dictionary").extend({
source: ["./tokens.json"],
platforms: {
scss: {
transformGroup: "scss",
buildPath: "src/tokens/",
files: [
{
destination: "_colors.scss",
format: "scss/variables",
filter: {
type: "color",
},
},
{
destination: "_shadows.scss",
format: "scss/variables",
filter: {
type: "boxShadow",
},
},
{
destination: "_fontFamilies.scss",
format: "scss/variables",
filter: {
type: "fontFamilies",
},
},
{
destination: "_lineHeights.scss",
format: "scss/variables",
filter: {
type: "lineHeights",
},
},
{
destination: "_fontWeights.scss",
format: "scss/variables",
filter: {
type: "fontWeights",
},
},
{
destination: "_fontSizes.scss",
format: "scss/variables",
filter: {
type: "fontSizes",
},
},
{
destination: "_letterSpacing.scss",
format: "scss/variables",
filter: {
type: "letterSpacing",
},
},
{
destination: "_paragraphSpacing.scss",
format: "scss/variables",
filter: {
type: "paragraphSpacing",
},
},
{
destination: "_typography.scss",
format: "scss/variables",
filter: {
type: "typography",
},
},
{
destination: "_textCase.scss",
format: "scss/variables",
filter: {
type: "textCase",
},
},
{
destination: "_textDecoration.scss",
format: "scss/variables",
filter: {
type: "textDecoration",
},
},
],
},
},
});
StyleDictionary.buildAllPlatforms();
The question makes in my opinion no sense, the solution is mentioned on the linked site already:
"Display-2xl": {
" ": { // Has to be a space. This comment also will break json
value: "PARENT VALUE"
},
"Regular": {
"type": "typography",
"fontFamily": {
"value": "{fontFamilies.inter.value}"
},
"fontWeight": {
"value": "{fontWeights.inter-0.value}"
},
"fontSize": {
"value": "{fontSize.10}"
}
}
}
Beside that the json represents a configuration and has to be created but a conversion from one json configuration format to another json configuration format is probably not part of the framework, concerning this the question might be just a bit misleading.
Nevertheless, both configurations can be used and should have the same result.
I am using multilanguage with getStaticPath generation (English and Spanish) but i am getting some errors cause of default language.
I am trying to generate these routes:
[
{ params: { slug: 'ruta-en-espaniol', locale: 'es' } },
{ params: { slug: 'path-in-english', locale: 'en' } },
]
But Next.js is generating not 2 routes...even 3.
/en/ruta-en-espaniol
/es/ruta-en-espaniol
/en/path-in-english
is there some property to disable this? Maybe something like this?:
{ params: { slug: 'ruta-en-espaniol', locale: 'en', ignoreRoute: true } }
I'm new to gatsby/graphql and I'm using the gatsby-source-custom-api plugin and based on the gatsby-config example:
// Lets assume this is the data from your API:
const exampleDataFromApi = [
{
url: "post-1",
images: [
{
url: "image-1.jpg",
modified: 1556752476267
},
{
url: "image-2.jpg",
modified: 1556752702168
}
],
author: {
firstname: "John",
lastname: "Doe"
}
}
];
// This is the content of your gatsby-config.js
// and what you need to provide as schema:
module.exports = {
plugins: [
{
resolve: "gatsby-source-custom-api",
options: {
url: {
development: "http://my-local-api.dev", // on "gatsby develop"
production: "https://my-remote-api.com" // on "gatsby build"
},
imageKeys: ["images"],
rootKey: "posts",
schemas: {
posts: `
url: String
images: [images]
author: author
`,
images: `
url: String
modified: Int
`,
author: `
firstname: String
lastname: String
`
}
}
}
]
};
I was wondering if there's a way to change the endpoint of the API based on the current page? For example current URL is https://mywebsite.com/data1 and API endpoint https://my-remote-api.com/data1.
I'm trying to reproduce this:
componentDidMount() {
fetch('https://my-remote-api.com/' + this.props.endpoint)
.then(response => response.json())
.then(data => this.setState({ data }));
}
but with graphql.
Im having problems with the kendo scheduler. Im using it together with AngularJS.
When i create an event and click save, first of the create window wont close and when i manually close it the event is not there. But if i reload the page the event is shown there, so it is getting saved to the database.
Scheduler dataSource:
var dataSource = {
transport: {
read: read,
create: create,
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
},
},
schema: {
model: {
id: "occurrenceId",
fields: {
occurrenceId: { from: "occurrenceId", type: "number" },
title: { from: "title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "start" },
end: { type: "date", from: "end" },
description: { from: "description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
};
And here is the create function:
function create(data) {
var occurrence = {
"title": data.data.title,
"start": data.data.start,
"end": data.data.end,
"description": data.data.description,
"recurrenceId": data.data.recurrenceId,
"recurrenceRule": data.data.recurrenceRule,
"recurrenceException": data.data.recurrenceException,
"isAllDay": data.data.isAllDay,
"ownerId": $scope.resource.id
}
$http({
method: 'POST',
url: '/api/occurrences',
data: JSON.stringify(occurrence),
contentType: "application/json"
}).success(function (response) {
response.data
});
}
Try returning the inserted data (including the generated ID) from your create function. On your http post's success, it doesn't seem to be doing anything meaningful.
From Kendo-UI data source API reference: The remote service must return the inserted data items and the data item field configured as the id must be set. For example if the id of the data item is ProductID the "create" server response must be [{ "ProductID": 79 }].