return {

// Values

minValue: 0, // The gauge minimum value.

maxValue: 100, // The gauge maximum value.

// Styles

circleThickness: 0.05, // The outer circle thickness as a percentage of it's radius.

circleFillGap: 0.05, // The size of the gap between the outer circle and wave circle as a percentage of the outer circles radius.

circleColor: "#178BCA", // The color of the outer circle.

backgroundColor: null, // The color of the background

waveColor: "#178BCA", // The color of the fill wave.

width: 0, // You might want to set the width and height if it is not detected properly by the plugin

height: 0,

// Gradient

fillWithGradient: false, // Controls if the wave should be filled with gradient

gradientPoints: [0, 0, 0, 1], // [x1, y1, x2, y2], coordinates for gradient start point(x1,y1) and final point(x2,y2)

gradientFromColor: "#FFF",

gradientToColor: "#000",

// circle Gradient

fillCircleWithGradient: false, // Controls if the circle should be filled with gradient

circleGradientPoints: [0, 0, 0, 1], // [x1, y1, x2, y2], coordinates for gradient start point(x1,y1) and final point(x2,y2), 2 points define a vector to decide gradient's direction

circleGradientFromColor: "red",

circleGradientToColor: "blue",

// Waves

waveHeight: 0.05, // The wave height as a percentage of the radius of the wave circle.

waveCount: 1, // The number of full waves per width of the wave circle.

waveOffset: 0, // The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.

// Animations

waveRise: true, // Control if the wave should rise from 0 to it's full height, or start at it's full height.

waveRiseTime: 1000, // The amount of time in milliseconds for the wave to rise from 0 to it's final height.

waveRiseAtStart: true, // If set to false and waveRise at true, will disable only the initial animation

waveAnimate: true, // Controls if the wave scrolls or is static.

waveAnimateTime: 18000, // The amount of time in milliseconds for a full wave to enter the wave circle.

waveHeightScaling: true, // Controls wave size scaling at low and high fill percentages. When true, wave height reaches it's maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appear totally full or empty when near it's minimum or maximum fill.

valueCountUp: true, // If true, the displayed value counts up from 0 to it's final value upon loading and updating. If false, the final value is displayed.

valueCountUpAtStart: true, // If set to false and valueCountUp at true, will disable only the initial animation

// Text

textVertPosition: 0.5, // The height at which to display the percentage text withing the wave circle. 0 = bottom, 1 = top.

textSize: 0.8, // The relative height of the text to display in the wave circle. 1 = 50%

displayUnit: true, // If true, a % symbol is displayed after the value.

unit: "%",

textColor: "#045681", // The color of the value text when the wave does not overlap it.

waveTextColor: "#A4DBf8", // The color of the value text when the wave overlaps it.

}

}

mutable g = null;

const svg = htl.html`<svg />`;

mutable g = d3.select(svg)

.call(liquidfillgauge, 46.89, {height: 128, width: 128, maxValue: 200, unit: 'm³',fillCircleWithGradient: true,

circleGradientFromColor: '#0E86FF',

circleGradientToColor: '#01FFFF',

fillWithGradient: true,

gradientFromColor: '#0E8CFF',

gradientToColor: '#08B9FF',

textColor: '#0E86FF',

waveTextColor: '#FFFFFF',

waveColor: '#0E86FF', });

return svg;

setIntervalId = {

let gaugeValue = 0;

return setInterval(() => {

gaugeValue = _.random(80, 160, true)

g?.on("valueChanged")(gaugeValue)

}, 4000)

const svg = htl.html`<svg />`;

const g = d3.select(svg).attr('height', 128).attr('width', 128).append('g').attr('transform', `translate(64, 64)`);

const path = d3.arc().startAngle(0).endAngle(Math.PI/2).outerRadius(64).innerRadius(60);

g.append('path').attr('d', path).style('fill', 'blue').attr('transform', `translate(0,0 )`);

return svg;