Scriptable Gradient Bar Widget

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-green; icon-glyph: seedling;

const black = new Color("#1C1C1E");
const white = new Color("#F2F2F7");

const bgColor = Color.dynamic(white, black);

const widget = new ListWidget();
widget.backgroundColor = bgColor;

const data = await new Request("https://opendata.dwd.de/climate_environment/health/alerts/s31fg.json").loadJSON();

const last = new Date(data.last_update. match(/\d{4}-\d{2}-\d{2}/)[0]);
last.setHours(0);

var date;
if (new Date() < new Date(new Date(last).setDate(last.getDate() + 1))) date = "today";
else if (new Date() < new Date(new Date(last).setDate(last.getDate() + 2))) date = "tomorrow";
else if (new Date() < new Date(new Date(last).setDate(last.getDate() + 3))) date = "dayafter_to";

const severityLevels = Object.entries(data.legend)
.filter(([key, value]) => !key.includes("_desc"))
.map(([key, value]) => value)
.sort();

const scalePositions = severityLevels.map((_, i) => i / (severityLevels.length - 1));

const severity = severityLevels.indexOf(data.content.filter(item => item.region_id === 50)[0].Pollen.Graeser[date]);

const iconSize = 42;
const iconSymbol = SFSymbol.named("allergens.fill");

iconSymbol.applyFont(Font.systemFont(iconSize));

const icon = widget.addImage(iconSymbol.image);
icon.imageSize = new Size(iconSize, iconSize);

const textColor = Color.dynamic(black, white);
icon.tintColor = textColor;

widget.addSpacer(null);
const text = widget.addText("Gräser");

text.font = Font.title1();
text.minimumScaleFactor = 0.75;
text.lineLimit = 1;
text.textColor = textColor;

widget.addSpacer(6);

const widgetSize = importModule("widgetSize")(config.widgetFamily);

// widget padding: Figma/@apple — iOS UI Kit
const scaleWidth = widgetSize.width - 2 * 16;
const scaleHeight = 6;

const paddingSize = 4;

const scale = widget.addStack();
scale.size = new Size(scaleWidth, scaleHeight);
scale.setPadding(0, -paddingSize, 0, -paddingSize);
scale.cornerRadius = 9999;

const lg = new LinearGradient();
lg.startPoint = new Point(0, 0.5);
lg.endPoint = new Point(1, 0.5);
lg.colors = [
    Color.green(),
    Color.yellow(),
    Color.red()
];
lg.locations = lg.colors.map((_, i) => i / (lg.colors.length - 1));

scale.backgroundGradient = lg;

const ctx = new DrawContext();
ctx.size = new Size(scaleHeight + paddingSize * 2, scaleHeight);
ctx.respectScreenScale = true;
ctx.opaque = false;

const padding = new Rect(0, -paddingSize, ctx.size.width, ctx.size.width);
ctx.setFillColor(bgColor);
ctx.fillEllipse(padding);

const indicator = new Rect(paddingSize, 0, ctx.size.height, ctx.size.height);
ctx.setFillColor(textColor);
ctx.fillEllipse(indicator);

scale.addSpacer(scalePositions[severity] * scaleWidth - severity / (severityLevels.length - 1) * ctx.size.height);
scale.addImage(ctx.getImage());
severity === severityLevels.length - 1 ? scale.addSpacer(0) : scale.addSpacer(null);

// widget.presentSmall();
Script.setWidget(widget);
Script.complete();