Marcus Olsson

TypeScript

obsidian-svelte

A Svelte component library for Obsidian development.
less than 1 min read  · 
Obsidian TypeScript Svelte

Build your first Obsidian plugin

A series of tutorials where I walk through different aspects of plugin development for Obsidian.
less than 1 min read  · 
Obsidian Plugins TypeScript

Obsidian Projects

An Obsidian plugins that lets you manage and visualize notes for project management.
less than 1 min read  · 
Obsidian TypeScript Svelte

Guiding panel users with a wizard

In Data frame design: Basics, I stressed the importance to document the data response that your panel plugin expects from the data source. While you can document it in your README, that would mean the user needs to switch to another tab to understand how to use your panel. In this post, I’ll share a different approach, that lets the user configure the query without leaving Grafana.
less than 1 min read  · 
Grafana Plugins TypeScript

How to use template variables in your data source

Template variables enable users to create dashboards that change dynamically based on user input. Since variables have been around in Grafana for a long time, many users expect them to be supported for any data sources they install. In this post, I’ll share some tips on how you can use template variables in your data source plugin.
less than 1 min read  · 
Grafana Plugins TypeScript

Grafana data source for YNAB

An unofficial Grafana data source for You Need A Budget.
0 min read  · 
TypeScript Go Grafana Plugins

How to make user-configurable HTTP requests from your data source plugin

If your data source retrieves data from an official, well-defined API, you can simplify your data source configuration by only asking for the relevant data, such as the API token. However, if the user should be able to access data from any given HTTP endpoint, you probably want to let them configure things like authentication headers and query parameters to fit their needs. In this post, I’ll explain how you can build a configurable HTTP-based backend data source.
less than 1 min read  · 
Grafana Plugins TypeScript Go

How to configure dimensions for your panel plugin

In this post, I want to share a pattern that I’m using for almost all my panel plugins. I call it panel dimensions.
less than 1 min read  · 
Grafana Plugins TypeScript

How to migrate from BackendSrv.datasourceRequest() to BackendSrv.fetch()

If you’re building a data source plugin, chances are you want to make HTTP requests from your TypeScript code to a HTTP API somewhere. In the past, the preferred way to make an HTTP request from your plugin was to use the BackendSrv.datasourceRequest(), which has been deprecated in favor of BackendSrv.fetch().
less than 1 min read  · 
Grafana Plugins TypeScript

How to subscribe to Grafana application events

If you’re building a panel plugin, Grafana already provides the data you need to configure and render your panel. If not, you can retrieve the information you need from any of the runtime services, like BackendSrv and TemplateSrv. In some cases though, you want your plugin to react to changes outside of your plugin. For example, when the user hovers their cursor over data in another panel. In this post, you’ll learn how to make your plugin react to events in Grafana.
less than 1 min read  · 
Grafana Plugins TypeScript

Pipe tricks for Obsidian

An Obsidian plugin that adds pipe tricks to the Wikilink format used by Obsidian
less than 1 min read  · 
TypeScript Obsidian Plugins

dts-docs

Generate Markdown from a .d.ts file.
0 min read  · 
TypeScript

Vale for Obsidian

A Vale client for Obsidian.
less than 1 min read  · 
TypeScript Obsidian Plugins React

Helpers for Grafana plugin development

This repository contains various helper functions that I’ve found myself reimplementing for my plugins.
0 min read  · 
TypeScript Grafana Plugins

Calendar for Grafana

Display your query results as calendar events.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Gantt for Grafana

A panel plugin for Grafana to visualize Gantt charts.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Hexmap for Grafana

A Grafana panel plugin for hexagonal tiling of data.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

CSV data source for Grafana

Load CSV files into Grafana.
0 min read  · 
TypeScript Go Grafana Plugins React

JSON API data source for Grafana

A data source plugin for loading JSON APIs into Grafana using JSONPath or JSONata.
0 min read  · 
TypeScript Go Grafana Plugins React

Dynamic text for Grafana

Define text templates using the data from your data source query.
0 min read  · 
TypeScript Grafana Plugins React

All about plugins: Building your first panel plugin

Plugins amplify what you can do with Grafana. By creating your own custom visualizations and data source integrations you can bring in your own data and present it in a way that makes sense for you. In this webinar, Solutions Engineer Christine Wang and Developer Advocate Marcus Olsson will show you how you can build a panel plugin to create custom visualizations for Grafana. During this webinar, you will learn about:
less than 1 min read  · 
Grafana TypeScript

Static data source for Grafana

Create static query results for prototyping dashboards and testing panels.
0 min read  · 
TypeScript Go Grafana Plugins React

Learn Grafana: How to build a scatter plot plugin in Grafana 7.0

There are a lot of great things about Grafana 7.0, but one of my favorite features is the new React-based plugin platform, which has a set of new APIs and design system to help you build your own plugin. The process is easier and faster than ever. In this blog post, I’ll show how you can create a panel plugin for visualizing scatter plots.
less than 1 min read  · 
Grafana Plugins TypeScript Data Visualization

Treemap for Grafana

Compare data by area and colors.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization

Hourly Heatmap for Grafana

Aggregate time series by hour to analyze activity or traffic during the day.
0 min read  · 
TypeScript Grafana Plugins React Data Visualization