An implementation of xmrit as a svelte component for Evidence.dev

readme.md

This is based on the code on xmrit which is the reference implementation.

In order to use this in your own evidence project, you will need to do 4 things

(1) Add the three files below to your \components folder in your evidence project.

• ShareLinkComponent.svelte
• types.ts
• shareLink.ts

(2) Add the lz77 library to your node project

npm install lz77

(3) prepare your data for the component as sql inside your evidence markdown. the two columns must be named "x" and "value"

  select start_date::date::text AS x, 
    value 
  from ${my_data}
  order by start_date

(4) add the component to your project

<ShareLinkComponent 
  xLabel={x_label}
  yLabel={y_label}
  xdata={prepared_data} />

shareLink.ts

import { XData, DividerLines, LockedLimits, ShareLinkParams } from './types';
import lz77 from "lz77";

export function generateShareLink(s: ShareLinkParams): string {
    const paramsObj = {
        v: "0" // version
    };
    let validXdata = s.xdata.filter(dv => dv.x || dv.value)
    const dateText = `${s.xLabel ? s.xLabel.replace(",", ";") : ''},${s.yLabel ? s.yLabel.replace(",", ";") : ''},` +
        validXdata.map((d) => {
            if (d.x) {
                return d.x.replace(",", ";")
            } else {
                return ''
            }
        }).join(",")
    const valueText = validXdata.map((d) => d.value)
    paramsObj['d'] = btoaUrlSafe(lz77.compress(dateText)) + '.' +
        encodeNumberArrayString(valueText)
    if (s.dividerLines) {
        const dividers = encodeNumberArrayString(s.dividerLines.map(dl => dl.x))
        if (dividers.length > 0) {
            paramsObj['s'] = dividers
        }
    }
    if (s.lockedLimits && (s.lockedLimitStatus ?? 0 & 1) == 1) {
        paramsObj['l'] = encodeNumberArrayString([
            s.lockedLimits.avgX,
            s.lockedLimits.avgMovement,
            s.lockedLimits.LNPL,
            s.lockedLimits.UNPL,
            s.lockedLimits.URL,
            s.lockedLimitStatus ?? 0
        ])
    }
    const searchParams = new URLSearchParams(paramsObj);
    const fullPath = `https://xmrit.com/t/?${searchParams.toString()}`
    return fullPath
}

export function encodeNumberArrayString(input: number[]): string {
    const buffer = new ArrayBuffer(input.length * 4);
    const view = new DataView(buffer);
    input.forEach((i, idx) => {
        view.setFloat32(idx * 4, i)
    })
    return btoaUrlSafe(
        new Uint8Array(buffer)
            .reduce((data, byte) => data + String.fromCharCode(byte), '')
    )
}

export function btoaUrlSafe(s: string): string {
    return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
}

ShareLinkComponent.svelte

<script context="module">
    export const evidenceInclude = true;
</script>

<script lang="ts">
    import { generateShareLink } from './shareLink';

    export let xLabel = "date";
    export let yLabel = "value";
    export let xdata = [];
    export let dividerLines = [];
    export let lockedLimits = null;
    export let lockedLimitStatus = null;

    let shareLink;

    // Whenever any of the props change, this code will run
    $: {
        if (xLabel && yLabel && xdata) {
            shareLink = generateShareLink({xLabel, yLabel, xdata, dividerLines, lockedLimits, lockedLimitStatus});
        }
    }
</script>

<!-- You can use {shareLink} anywhere in your HTML now -->
<div>
    See <a href={shareLink} style="color: blue; text-decoration: underline;">XmR chart</a>
</div>

types.ts

export interface XData {
    x: string, // date in yyyy-mm-dd
    value: number
}

export interface DividerLines {
    id: string,
    x: number // date in unix milliseconds
}

export interface LockedLimits {
    avgX: number,
    avgMovement: number,
    UNPL: number, // upper natural process limit
    LNPL: number, // lower natural process limit
    URL: number, // upper range limit
}

export interface ShareLinkParams {
    xLabel: string,
    yLabel: string,
    xdata: XData[],
    dividerLines?: DividerLines[],
    lockedLimits?: LockedLimits,
    lockedLimitStatus?: number,
}