Develop Reference

How to modify the style dictionary configuration file to output the typography tokens as SCSS Variables

I am all new to design tokens and design system. I am trying to convert my design tokens as SCSS variables using the style dictionary it looks like everything working fine except the typography tokens are resulting as [object object] in the variable file. Not sure what I am doing wrong. Any help would be appreciated. Below is my config file for style dictionary.
const StyleDictionary = require('style-dictionary');
module.exports = {
// This will match any files ending in json or json5
source: [`tokens/*.json`],
transforms: [
{
type: 'typography',
fields: {
fontSize: 'fontsize',
fontWeight: 'fontWeight',
lineHeight: 'lineHeight',
},
},
],
platforms: {
scss: {
buildPath: `style/`,
files: [{
destination: `_variables.scss`,
format: `scss/variables`
}]
}
}
}
MY Token JSON is
{
"btn": {
"primary": {
"default": {
"value": "{colors.accent.sun}",
"type": "color"
},
"hover": {
"value": "{colors.accent.l_sun}",
"type": "color"
},
"focus": {
"value": "{colors.accent.sun}",
"type": "color"
},
"focusbr": {
"value": "{colors.accent.gold}",
"type": "color"
},
"click": {
"value": "{colors.accent.gold}",
"type": "color"
},
"txtcolor": {
"value": "{colors.neutral.black}",
"type": "color"
}
},
"disabled": {
"value": "{colors.neutral.ll_grey}",
"type": "color"
},
"radius": {
"value": ".4rem",
"type": "borderRadius"
},
"brwidth": {
"value": ".2rem",
"type": "borderWidth"
},
"ghostbg": {
"value": "{colors.neutral.white}",
"type": "color"
},
"ghost": {
"defaultbr": {
"value": "{colors.primary.m_blue}",
"type": "color"
},
"focusbr": {
"value": "{colors.primary.d_blue}",
"type": "color"
},
"clickbr": {
"value": "{colors.neutral.ll_grey}",
"type": "color"
}
},
"transparent": {
"defaultbr": {
"value": "{colors.neutral.white}",
"type": "color"
},
"focusbr": {
"value": "{colors.primary.azure}",
"type": "color"
},
"click": {
"value": "{colors.primary.azure}",
"type": "color"
}
},
"transparentbg": {
"value": "{colors.neutral.white}",
"type": "color"
},
"textcolor": {
"value": "{colors.primary.m_blue}",
"type": "color"
}
},
"btn-df": {
"padding": {
"value": "1.6rem 3.2rem",
"type": "spacing"
}
},
"btn-dftypography": {
"value": {
"fontWeight": "",
"fontSize": "1.8rem",
"lineHeight": ""
},
"type": "typography"
},
"btn-smtypography": {
"value": {
"fontSize": "1.4rem",
"fontWeight": "",
"lineHeight": ""
},
"type": "typography"
},
"btn-mdtypography": {
"value": {
"fontSize": "1.6rem"
},
"type": "typography"
},
"btn-dftypographystyles": {
"value": {
"fontWeight": "400",
"lineHeight": "120%"
},
"type": "typography"
},
"btn-md": {
"padding": {
"value": "1.4rem 3.2rem",
"type": "spacing"
}
},
"btn-sm": {
"padding": {
"value": "1.4rem 3.2rem",
"type": "spacing"
}
}
}

Based on the code and token JSON file provided, it appears that the typography values are not being transformed properly into SCSS variables.
The issue could be with the way the "value" property is set in the typography token. Currently, it is an object and not a string, which is causing it to be displayed as [object object]. To fix this, you need to set the value as a string with a format that the typography transform can parse and use to create the desired SCSS variables.
e.g. Collapse the value object into a single string.
Here is an example of what the btn-dftypography token could look like after being fixed:
"btn-dftypography": {
"value": "font-size: 1.8rem; font-weight: 400; line-height: 120%",
"type": "typography"
}
Before, it's like this:
"btn-dftypography": {
"value": {
"fontWeight": "",
"fontSize": "1.8rem",
"lineHeight": ""
},
"type": "typography"
},
NOTE: You will need to make similar changes to the other typography tokens as well.

Highcharts networkgraph layout

I am using Highcharts library to draw a network graph. But I have a layout problem when the data makes two or more disconnected networks. Then the bigest one is centered and pushes to the edges the other networks to the point where they are barely readable.
Example:
Highcharts.chart('container', {
chart: {
type: 'networkgraph',
height: '60%'
},
title: {
text: ''
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
}
},
series: [{
dataLabels: {
enabled: true,
linkFormat: ''
},
id: 'demo-tree',
data: [["demo001", "demo002"], ["demo003", "demo004"], ["demo005", "demo002"], ["demo006", "demo007"], ["demo008", "demo009"], ["demo003", "demo010"], ["demo011", "demo009"], ["demo001", "demo008"], ["demo005", "demo001"], ["demo011", "demo008"], ["demo005", "demo006"], ["demo005", "demo007"], ["demo005", "demo011"], ["demo005", "demo009"], ["demo012", "demo004"], ["demo005", "demo008"], ["demo001", "demo006"], ["demo001", "demo007"]],
nodes: [{ "id": "demo001", "marker": { "radius": 119 }, "color": "#dc3545" }, { "id": "demo002", "marker": { "radius": 7 }, "color": "#ffc107" }, { "id": "demo003", "marker": { "radius": 9 }, "color": "#ffc107" }, { "id": "demo004", "marker": { "radius": 8 }, "color": "#ffc107" }, { "id": "demo005", "marker": { "radius": 100 }, "color": "#dc3545" }, { "id": "demo006", "marker": { "radius": 77 }, "color": "#dc3545" }, { "id": "demo007", "marker": { "radius": 76 }, "color": "#dc3545" }, { "id": "demo009", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo008", "marker": { "radius": 33 }, "color": "#dc3545" }, { "id": "demo010", "marker": { "radius": 5 }, "color": "#28a745" }, { "id": "demo011", "marker": { "radius": 40 }, "color": "#dc3545" }, { "id": "demo012", "marker": { "radius": 4 }, "color": "#28a745" }]
}],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
https://jsfiddle.net/jrb471kc/1/
What I want, is to make better use of the space. Rather then having this:
Have something like this:
I toyed around with the node.mass attribute to no avail.
Does somebody have a solution for this?
EDIT 1: To better explain my question, this is an example of what I got right now. What I want is the graph to not center the big network in the center. Align it left to have room for the 2 small ones.

LabelDisplay for fusion charts MScombi3d charts

I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.

The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "2006",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "2005",
"renderas": "Area",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.

How to use Highmaps and Highcharts with Meteor?

I am using the highcharts:highcharts-meteor package in my application. I added highmaps to my configuration. My config object for highcharts is as follows:
{
"version": "4.2.1", // Choose version of Highcharts/Highstock/Highmaps.
"base": "highcharts.js", // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
"adapter": "jquery", // Choose adapter, e.g. "jquery" or "standalone-framework.js".
"modules": [ // Choose modules to be installed altogether with main library.
"highcharts-3d.src.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/maps.js",
"modules/drilldown.js",
"themes/gray.js"
]
}
I added the maps.js to be able to use both highcharts and highmaps. I am trying to render the sample demo map "US Population Density" without any luck. I am unsure what the right configuration option is and where should I put the us-all.js file in my directory.
The error I get in the browser console is
Cannot set property 'countries/us/us-all' of undefined
The JSFiddle from highcharts demo site is below.
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/
So highcharts.Map is undefined. I have tried multiple things:
changed the config base option to highmaps.js
Removing the modules/maps.js
Putting us-all.js in the compatibility directory
Same issue. What am I doing wrong?

The error:
highcharts.Map is undefined
occurs, because you are including modules/maps.js but this file cannot be found. The module you want to include instead is named map.js. This file is located in the directory /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/.
If you want to implement the Highcharts Maps demo in Meteor, follow these seven steps:
Run the command meteor add highcharts:highcharts-meteor.
Run meteor in order to initialise the highcharts-container.
Open the file /client/config.highcharts.json and insert the following Highcharts configuration:
{
"version": "4.2.1",
"base": "highcharts.js",
"adapter": "default",
"modules": [
"highmaps.js",
"modules/exporting.js",
"modules/heatmap.js",
"modules/drilldown.js",
"modules/map.js",
"themes/gray.js"
]
}
Load the US map in your HTML head:
<head>
<title>meteor-highcharts-demo</title>
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
Implement a container which wraps your map:
<template name="map">
<div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
Instanciate the map:
if (Meteor.isClient) {
var data = [{
"value": 438,
"code": "nj"
}, {
"value": 387.35,
"code": "ri"
}, {
"value": 312.68,
"code": "ma"
}, {
"value": 271.4,
"code": "ct"
}, {
"value": 209.23,
"code": "md"
}, {
"value": 195.18,
"code": "ny"
}, {
"value": 154.87,
"code": "de"
}, {
"value": 114.43,
"code": "fl"
}, {
"value": 107.05,
"code": "oh"
}, {
"value": 105.8,
"code": "pa"
}, {
"value": 86.27,
"code": "il"
}, {
"value": 83.85,
"code": "ca"
}, {
"value": 72.83,
"code": "hi"
}, {
"value": 69.03,
"code": "va"
}, {
"value": 67.55,
"code": "mi"
}, {
"value": 65.46,
"code": "in"
}, {
"value": 63.8,
"code": "nc"
}, {
"value": 54.59,
"code": "ga"
}, {
"value": 53.29,
"code": "tn"
}, {
"value": 53.2,
"code": "nh"
}, {
"value": 51.45,
"code": "sc"
}, {
"value": 39.61,
"code": "la"
}, {
"value": 39.28,
"code": "ky"
}, {
"value": 38.13,
"code": "wi"
}, {
"value": 34.2,
"code": "wa"
}, {
"value": 33.84,
"code": "al"
}, {
"value": 31.36,
"code": "mo"
}, {
"value": 30.75,
"code": "tx"
}, {
"value": 29,
"code": "wv"
}, {
"value": 25.41,
"code": "vt"
}, {
"value": 23.86,
"code": "mn"
}, {
"value": 23.42,
"code": "ms"
}, {
"value": 20.22,
"code": "ia"
}, {
"value": 19.82,
"code": "ar"
}, {
"value": 19.4,
"code": "ok"
}, {
"value": 17.43,
"code": "az"
}, {
"value": 16.01,
"code": "co"
}, {
"value": 15.95,
"code": "me"
}, {
"value": 13.76,
"code": "or"
}, {
"value": 12.69,
"code": "ks"
}, {
"value": 10.5,
"code": "ut"
}, {
"value": 8.6,
"code": "ne"
}, {
"value": 7.03,
"code": "nv"
}, {
"value": 6.04,
"code": "id"
}, {
"value": 5.79,
"code": "nm"
}, {
"value": 3.84,
"code": "sd"
}, {
"value": 3.59,
"code": "nd"
}, {
"value": 2.39,
"code": "mt"
}, {
"value": 1.96,
"code": "wy"
}, {
"value": 0.42,
"code": "ak"
}];
Template.map.onRendered(function() {
// Make codes uppercase to match the map data
_.each(data, (el) => el.code = el.code.toUpperCase());
// Instanciate the map
$('#container').highcharts('Map', {
chart: {
borderWidth: 1
},
title: {
text: 'US population density (/km²)'
},
legend: {
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
},
mapNavigation: {
enabled: true
},
colorAxis: {
min: 1,
type: 'logarithmic',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
},
series: [{
animation: {
duration: 1000
},
data: data,
mapData: Highcharts.maps['countries/us/us-all'],
joinBy: ['postal-code', 'code'],
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}'
},
name: 'Population density',
tooltip: {
pointFormat: '{point.code}: {point.value}/km²'
}
}]
});
});
}
Run meteor to start your app.
I have prepared also a demo repository, which is hosted on GitHub.

Strange values with bar stack Open Flash Chart

I'm trying to use the bar stack graph with Open Flash Chart. The JSON object I generate is containing correct values and when the chart is loaded the first part of the bar stack is correct but the ones after have gotten way of values.
The JSON object:
{
"title": {
"text": "Aktiviteter",
"style": "{font-size: 15px; text-align: center;}"
},
"elements": [
{
"type": "bar_stack",
"colours": [
"#b727e3",
"#f55225",
"#16196e",
"#b3ac3",
"#f01673"
],
"keys": [
{
"colour": "#b727e3",
"text": "Utst\u00e4llningar",
"font-size": 13
},
{
"colour": "#f55225",
"text": "Kurser",
"font-size": 13
},
{
"colour": "#16196e",
"text": "Resor",
"font-size": 13
},
{
"colour": "#b3ac3",
"text": "Kulturarrangemang",
"font-size": 13
},
{
"colour": "#f01673",
"text": "F\u00f6rel\u00e4sningar",
"font-size": 13
}
],
"values": [
[
{
"val": "205",
"tip": "Utst\u00e4llningar 2013<br>Antal #val#"
},
{
"val": "52",
"tip": "Kurser 2013<br>Antal #val#"
},
{
"val": "161",
"tip": "Resor 2013<br>Antal #val#"
},
{
"val": "123",
"tip": "Kulturarrangemang 2013<br>Antal #val#"
},
{
"val": "123",
"tip": "F\u00f6rel\u00e4sningar 2013<br>Antal #val#"
}
]
],
"on-show": {
"type": "pop",
"cascade": 1,
"delay": 0.5
}
}
],
"x_axis": {
"labels": {
"rotate": 20,
"labels": [
"2013"
]
}
},
"y_axis": {
"min": 0,
"steps": 66,
"max": 830
},
"tooltip": {
"mouse": 2
},
"bg_colour": "#FFFFFF"
}
Item #2:
{
"val": "52",
"tip": "Kurser 2013<br>Antal #val#"
},
, when displayed, got a value of 20 347 instead of 52 and therefore doesnt fit into the y-axis. (image http://s8.postimg.org/jfeh9u2d1/Namnlo_st.png)
I load the Chart by
<script type="text/javascript" src="js/js/swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF(
"open-flash-chart.swf", "my_chart", "550", "200",
"9.0.0", "expressInstall.swf",
{"data-file":"get_stats2.php?action=activities%26type=total%26limit=1"}
);
Any suggestions?