rum 2022-08-01 | Slack Archive

macrobartfast17:08:44

I’m probably not understanding concepts enough to be heading in the right direction… but I am completely server side rendering HTML sites that use Tailwind CSS and I want to add Tailwind styled dashboard widgets that use chart.js… as such I need to have HTML vegachart tags with JS objects in them for the chart.js library to act on as seen in the inline example at https://github.com/koaning/justcharts#inline …. is this possible with server side Rum (or maybe you can help me get a grip on the right direction)? Probably what I’m not understanding is how I’d generate the JS object chart.js is looking for inside of the vegachart tag shown.

Niki18:08:24

Try

[:vegachart
 {:style {:width "100%"}
  :dangerouslySetInnerHTML
  {:__html "{\"data\":{\"url\": \"\", ...}}"}}]

macrobartfast19:08:16

hmmm….

[:vegachart
    {:style {:width "100%"}
     :dangerouslySetInnerHTML
     {:__html "{
        \"data\":{
            \"url\": \"\",
            \"format\": {
                \"type\": \"csv\"
            }
        },
        \"mark\": \"line\",
        \"encoding\": {
            \"x\": {\"field\": \"date\", \"type\": \"temporal\"},
            \"y\": {\"field\": \"local_price\", \"type\": \"quantitative\"},
            \"color\": {\"field\": \"currency_code\", \"type\": \"nominal\"}
        },
        \"width\": \"container\",
        \"title\": \"hello there\"
    }
"}}]

causes new page with the text literal

{ "data":{ "url": "", "format": { "type": "csv" } }, "mark": "line", "encoding": { "x": {"field": "date", "type": "temporal"}, "y": {"field": "local_price", "type": "quantitative"}, "color": {"field": "currency_code", "type": "nominal"} }, "width": "container", "title": "hello there" }

macrobartfast19:08:35

on safari, btw, in case that’s a factor.

Niki01:08:41

Yeah, what do you want? It’s server-side rendered page, it has to be text?

macrobartfast20:08:29

forgive the hand holding request. I need to convert svg markup to rum for an experiment… getting lost in the (really great but a bit over my head) rum docs… and noticing that it seems to generate react tags and so on. Any tips? The svg is being generated by darkstar, btw… a vega and vega lite clojure library. I’m using Clojure rum btw, on a server. I guess I’m looking to go from html to rum syntax.

Niki01:08:08

what svg input looks like?

macrobartfast01:08:48

<svg class="marks" width="236" height="247" viewBox="0 0 236 247" version="1.1" xmlns="" xmlns:xlink=""><rect width="236" height="247" style="fill: white;"></rect><g transform="translate(51,10)"><g class="mark-group role-frame root"><g transform="translate(0,0)"><path class="background" d="M0.5,0.5h180v200h-180Z" style="fill: none; stroke: #ddd;"></path><g><g class="mark-group role-axis"><g transform="translate(0.5,0.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-grid" style="pointer-events: none;"><line transform="translate(0,200)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,160)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,120)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,80)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,40)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,0)" x2="180" y2="0" style="fill: none; stroke: #ddd; stroke-width: 1; opacity: 1;"></line></g></g><path class="foreground" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-group role-axis"><g transform="translate(0.5,200.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" style="pointer-events: none;"><line transform="translate(10,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(30,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(50,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(70,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(90,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(110,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(130,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(150,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(170,0)" x2="0" y2="5" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" style="pointer-events: none;"><text text-anchor="middle" transform="translate(9.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">A</text><text text-anchor="middle" transform="translate(29.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">B</text><text text-anchor="middle" transform="translate(49.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">C</text><text text-anchor="middle" transform="translate(69.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">D</text><text text-anchor="middle" transform="translate(89.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">E</text><text text-anchor="middle" transform="translate(109.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">F</text><text text-anchor="middle" transform="translate(129.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">G</text><text text-anchor="middle" transform="translate(149.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">H</text><text text-anchor="middle" transform="translate(169.5,15)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">I</text></g><g class="mark-rule role-axis-domain" style="pointer-events: none;"><line transform="translate(0,0)" x2="180" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" style="pointer-events: none;"><text text-anchor="middle" transform="translate(90,30)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">a</text></g></g><path class="foreground" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-group role-axis"><g transform="translate(0.5,0.5)"><path class="background" d="M0,0h0v0h0Z" style="pointer-events: none; fill: none;"></path><g><g class="mark-rule role-axis-tick" style="pointer-events: none;"><line transform="translate(0,200)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,160)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,120)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,80)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,40)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line><line transform="translate(0,0)" x2="-5" y2="0" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-label" style="pointer-events: none;"><text text-anchor="end" transform="translate(-7,203)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">0</text><text text-anchor="end" transform="translate(-7,163)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">20</text><text text-anchor="end" transform="translate(-7,123)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">40</text><text text-anchor="end" transform="translate(-7,83)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">60</text><text text-anchor="end" transform="translate(-7,42.99999999999999)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">80</text><text text-anchor="end" transform="translate(-7,3)" style="font-family: sans-serif; font-size: 10px; fill: #000; opacity: 1;">100</text></g><g class="mark-rule role-axis-domain" style="pointer-events: none;"><line transform="translate(0,200)" x2="0" y2="-200" style="fill: none; stroke: #888; stroke-width: 1; opacity: 1;"></line></g><g class="mark-text role-axis-title" style="pointer-events: none;"><text text-anchor="middle" transform="translate(-35,100) rotate(-90) translate(0,-2)" style="font-family: sans-serif; font-size: 11px; font-weight: bold; fill: #000; opacity: 1;">b</text></g></g><path class="foreground" d="" style="pointer-events: none; display: none; fill: none;"></path></g></g><g class="mark-rect role-mark marks"><path d="M1,144h18v56h-18Z" style="fill: #4c78a8;"></path><path d="M21,89.99999999999999h18v110.00000000000001h-18Z" style="fill: #4c78a8;"></path><path d="M41,114.00000000000001h18v85.99999999999999h-18Z" style="fill: #4c78a8;"></path><path d="M61,17.999999999999993h18v182h-18Z" style="fill: #4c78a8;"></path><path d="M81,37.999999999999986h18v162h-18Z" style="fill: #4c78a8;"></path><path d="M101,94h18v106h-18Z" style="fill: #4c78a8;"></path><path d="M121,162h18v38h-18Z" style="fill: #4c78a8;"></path><path d="M141,26h18v174h-18Z" style="fill: #4c78a8;"></path><path d="M161,96h18v104h-18Z" style="fill: #4c78a8;"></path></g></g><path class="foreground" d="" style="display: none; fill: none;"></path></g></g></g></svg>

macrobartfast01:08:12

Forgive the huge paste… that’s why I’m looking to use a tool for this. 🙂

macrobartfast01:08:25

The svg for dashboard widgets, for example, are huge, so I wouldn’t of course be able to do them by hand or anything.

Niki11:08:21

insert them as string?

macrobartfast17:08:34

Well, I think the browser then just interprets them as a string, right? I mean, displays a string as opposed to interpreting and displaying an svg. But I have weak understanding of all this, that’s for sure.

2022-08-01

Channels