Developer Blog

Tipps und Tricks für Entwickler und IT-Interessierte

F# – Working with Fable

Get started

Install Fable with

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dotnet new --install Fable.Template
dotnet new --install Fable.Template
dotnet new --install Fable.Template

Create an new App

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dotnet new fable
dotnet new fable
dotnet new fable

Prepare environment

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
dotnet tool restore
dotnet tool restore
dotnet tool restore

Fix NodeJS SSL Error

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$ENV:NODE_OPTIONS="--openssl-legacy-provider"
$ENV:NODE_OPTIONS="--openssl-legacy-provider"
$ENV:NODE_OPTIONS="--openssl-legacy-provider"

Install dependencies and run app

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install
npm install
npm install
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm start
npm start
npm start

Node JS – Troubleshooting

Error Message

ERR_OSSL_EVP_UNSUPPORTED

Solution

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$ENV:NODE_OPTIONS="--openssl-legacy-provider"
$ENV:NODE_OPTIONS="--openssl-legacy-provider"
$ENV:NODE_OPTIONS="--openssl-legacy-provider"

Storybook – Troubleshooting

Error: Resource busy or locked

When starting storybook with npm run storybook, you always get the error EBUSY: resource busy or locked

Solution: modify .storybook/main.js

You can fix this by adding the following to the file .storybook/main.js

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
module.exports = {
...
managerWebpack: (config, options) => {
options.cache.set = () => Promise.resolve();
return config;
}
}
module.exports = { ... managerWebpack: (config, options) => { options.cache.set = () => Promise.resolve(); return config; } }
module.exports = {
  ...
  managerWebpack: (config, options) => {
    options.cache.set = () => Promise.resolve();
    return config;
  }
}

Power BI Visuals | Cookbook

Installation

Install NodeJS

Install pbiviz

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm i -g powerbi-visuals-tools@latest
npm i -g powerbi-visuals-tools@latest
npm i -g powerbi-visuals-tools@latest

Calculating of Data

Working with Highlighted values (“supportsHighlight”: true)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
sumOfValues = Object.keys(node.values).map(key => +node.values[key].value).reduce((prev, curr) => prev + curr)
sumOfHighlights = Object.keys(node.values).map(key => node.values[key].highlight ? +node.values[key].highlight : null).reduce((prev, curr) => curr ? prev + curr : null)
sumOfValues = Object.keys(node.values).map(key => +node.values[key].value).reduce((prev, curr) => prev + curr) sumOfHighlights = Object.keys(node.values).map(key => node.values[key].highlight ? +node.values[key].highlight : null).reduce((prev, curr) => curr ? prev + curr : null)
sumOfValues     = Object.keys(node.values).map(key => +node.values[key].value).reduce((prev, curr) => prev + curr)
sumOfHighlights = Object.keys(node.values).map(key => node.values[key].highlight ? +node.values[key].highlight : null).reduce((prev, curr) => curr ? prev + curr : null)

Get all Level Names

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
matrix.rows.levels.map( l => l.sources[0].displayName).join('/')
matrix.rows.levels.map( l => l.sources[0].displayName).join('/')
matrix.rows.levels.map( l => l.sources[0].displayName).join('/')

Table Tooltips

Im Repository TableSorter

Useful functions

Calculate Average of Data Points

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
private calculateAverage(): number {
if (this.dataPoints.length === 0) {
return 0;
}
let total = 0;
this.dataPoints.forEach((value: ICustomDataPoint) => {
total += <number>value.value;
});
return total / this.dataPoints.length;
}
private calculateAverage(): number { if (this.dataPoints.length === 0) { return 0; } let total = 0; this.dataPoints.forEach((value: ICustomDataPoint) => { total += <number>value.value; }); return total / this.dataPoints.length; }
private calculateAverage(): number {
	if (this.dataPoints.length === 0) {
		return 0;
	}

	let total = 0;
	this.dataPoints.forEach((value: ICustomDataPoint) => {
		total += <number>value.value;
	});

	return total / this.dataPoints.length;
}

capabilities.json

Alignment

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"alignment": {
"type": {
"formatting": {
"alignment": true
}
},
"displayName": "Horizontal Alignment"
},
"alignment": { "type": { "formatting": { "alignment": true } }, "displayName": "Horizontal Alignment" },
        "alignment": {
          "type": {
            "formatting": {
              "alignment": true
            }
          },
          "displayName": "Horizontal Alignment"
        },