31:[] 2f:{"title":"JOB example - Highcharts","cells":[{"id":0,"value":"md`# JOB example - Highcharts\n\nSee [@oscar6echo/jupyter-observablehq-bridge](https://observablehq.com/@oscar6echo/jupyter-observablehq-bridge)\n\nIf you open this notebook in the context of section **5-Examples** use these urlParams: \nhttps://observablehq.com/@oscar6echo/job-example-highcharts?host=localhost&port=4001&path=/graphql&channel=channel-1\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"fullscreen = {\n const button = html``)\n .join('')\n : `No subscription`;\n const form = html``;\n for (const e of handlers) {\n form[e].onclick = () => {\n console.log(e);\n handler.remove(e);\n };\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"// handler.remove('10_38_41_582')","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`---\n## Annex`","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"mutable latest = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"mutable handlers = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"channel = p.get('channel')","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"p = util.urlSearch()","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"client = buildClient()","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"buildSubscription = async function({\n client,\n channel,\n pattern = true,\n maxDuration = 60 * 1,\n filter = () => true\n}) {\n const synced = {};\n const observer = {\n next: data => {\n // util.logJson(data);\n if (filter(data.name)) {\n synced[data.name] = data.value;\n mutable latest = data;\n }\n }\n };\n const uuidSub = util.buildTimestamp();\n const variables = { client, channel };\n const subscription = await b.actions.subscribe({\n client,\n variables,\n raw: false,\n observer\n });\n if (maxDuration)\n window.setTimeout(() => subscription.unsubscribe(), maxDuration * 1000);\n handler.add(uuidSub, subscription);\n return synced;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"handler = new SubscriptionHandler()","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"class SubscriptionHandler {\n constructor() {\n this.sub = {};\n }\n remove(k) {\n this.sub[k].unsubscribe();\n delete this.sub[k];\n mutable handlers = Object.keys(this.sub);\n }\n add(k, v) {\n this.sub[k] = v;\n mutable handlers = Object.keys(this.sub);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"import { buildClient, b, util } from '@oscar6echo/job-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"Highcharts = {\n const Highcharts = await require(\"highcharts@8\");\n await require(\"highcharts@8/highcharts-more.js\");\n // pick needed modules from list https://code.highcharts.com/\n await require(\"highcharts@8/modules/exporting.js\");\n await require(\"highcharts@8/modules/dumbbell.js\");\n await require(\"highcharts@8/modules/drilldown.js\");\n await require(\"highcharts@8/modules/heatmap.js\");\n await require(\"highcharts@8/modules/treemap.js\");\n // etc\n return Highcharts;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}