Aditya Rana
04/19/2024, 9:50 AM<div>
<div class="sku-search_block">
<svg xmlns="<http://www.w3.org/2000/svg>" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="sku-search_icon"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
${(function(){
const button = Inputs.search({placeholder: "Search"})
button.classList.add("sku-input_search");
return button;
})()}
</div>
</div>
<div>
${createButton}
</div>
</div>
Where and what should i add ?Paulos Ab
04/19/2024, 7:34 PMBrent Sullivan
04/21/2024, 5:18 AMscripts
Additional scripts to add to the head, such as for analytics. Unlike the head option, this allows you to reference a local script in the source root.
export default {
scripts: [{type: "module", async: true, src: "analytics.js"}]
};
So, I added this: scripts: [{ type: "text/javascript", src: "clarity.js" }]
to observablehq.config.js
And added clarity.js
to my source root.
I can see this <script _type_="text/javascript" _src_="./clarity.js"></script>
in <head>
But I'm getting a 404 when trying to load clarity.js
Request URL:
<http://127.0.0.1:3000/_import/clarity.js?sha=e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855>
Request Method:
GET
Status Code:
404 Not Found
Remote Address:
127.0.0.1:3000
Referrer Policy:
strict-origin-when-cross-origin
When I run yarn build
I expect clarity.js
to be copied to ./dist
but it's not there (which explains the 404).
Even when I manually add clarity.js
to ./dist
I'm still getting the 404.
Can you help me add google analytics? Maybe I'm missing something simple. Thanks.Brent Sullivan
04/21/2024, 9:13 PMSaketh Kesari
04/22/2024, 5:34 AMSaketh Kesari
04/22/2024, 5:44 AMSaketh Kesari
04/22/2024, 6:00 AMSign Error
04/23/2024, 9:29 AMx-axis
shows the Days / Months / Years, depending on the overall range. And the y-axis
should show only the day time, so the hours/minutes/seconds parts of the Date.
How can I »split« a Date into those two components using d3, to setup the axis?Eli Goldberg
04/23/2024, 1:50 PMShubham Kumar
04/23/2024, 7:40 PMaaronkyle
04/23/2024, 8:33 PMJung Hoon Son
04/24/2024, 1:01 AMElliott Whitling
04/25/2024, 5:57 PMIs there a simple way to add “row level security” to Observable. For example, user A should only see data from France. User B could see all of EU.
Matin Amani
04/25/2024, 6:59 PMSSR-plot-figure
component for Observable Plot library with complete type definitions in a react + typescript project.
export function SSRPlotFigure({ options }: { options: Plot.PlotOptions }) {
return Plot.plot({
...options,
document: new PlotDocument(),
}).toHyperScript()
}
as you might already know, we need to pass a custom PlotDocument
object to document
property inside Plot.PlotOptions
. the PlotDocument
class is extended from built-in js Document
class and overrides some properties. some of the properties are also objects created from custom-built classes for Element
and Node
built-in classes.
can anyone please help me to extend and override these classes in a complete type-safe way?Elliott Whitling
04/26/2024, 7:07 PMBrent Sullivan
04/26/2024, 8:13 PMInputs.table
option format
, table sorting seems to sort based on the underlying data rather than the formatted data. This may be by design, but it defies the user's (and developer's) expectation of sorting what's on screen.Cora Sutton
04/26/2024, 8:45 PMElliott Whitling
04/27/2024, 5:16 AMpager
to the front matter overrides. Right now it can only be controlled by the config file. The use case is to the have a landing page (index) without the pager at the bottom while the rest of the pages have pager.Ritik Gupta
04/29/2024, 5:31 PMAditya Rana
04/30/2024, 9:34 AMTypeError: Failed to fetch dynamically imported module: <http://127.0.0.1:3000/_import/components/api/popcodes.js?sha=1a7c2787757d827058737d6b19776548f80315f5201cb8252f56cc566b09dc50>
RuntimeError: Failed to fetch dynamically imported module: <http://127.0.0.1:3000/_import/components/api/popcodes.js?sha=1a7c2787757d827058737d6b19776548f80315f5201cb8252f56cc566b09dc50>
Zhipeng Liu
05/01/2024, 2:13 AMZhipeng Liu
05/01/2024, 2:16 AM<template>
<div>
<svg xmlns="<http://www.w3.org/2000/svg>" ref="svgElement" class="center-plot-graph">
<g ref="lineElement" class="lineElements">
<path class="splineElement" />
<g class="symbolElement" />
</g>
</svg>
</div>
</template>
<script setup lang="ts">
import {
select,
Selection,
scaleLinear,
ScaleLinear,
symbol,
symbolCircle,
line,
Line,
curveLinear,
ValueFn,
BaseType,
} from "d3";
// import * as d3 from "d3"
import { ref, Ref, inject, onMounted } from "vue";
type Vector1d = Array<number>;
type Vector2d = Array<Vector1d>;
const svgElement: Ref<SVGSVGElement | null> = ref<SVGSVGElement | null>(null);
const lineElement: Ref<SVGGElement | null> = ref<SVGGElement | null>(null);
let lineData1: Vector2d = [
[10.5, 0, -26.5, 1],
[10.515418023668452, 0, -25.98615240945993, 0.9999999999999999],
[10.54673612522916, 0, -25.4242010779106, 0.9999999999999998],
[10.599262000092798, 0, -24.79828284532514, 0.9999999999999998],
[10.682246533999162, 0, -24.080779736377877, 0.9999999999999999],
[10.814880527142483, 0, -23.214463145842437, 0.9999999999999998],
[11.054647461420542, 0, -22.028119146822945, 0.9999999999999999],
[11.671811400028488, 0, -19.86283988201097, 0.9999999999999998],
[12.613086386434938, 0, -17.545566003251505, 0.9999999999999999],
[13.813926262485333, 0, -15.363942341711933, 1],
[15.263842352648265, 0, -13.35830776532418, 1.0000000000000004],
[16.93791350677736, 0, -11.540160490114632, 1.0000000000000007],
[18.800820600423645, 0, -9.900220288676735, 1.0000000000000004],
[20.817015127495804, 0, -8.428748556487237, 1.0000000000000004],
[22.9509485819025, 0, -7.116006689022895, 1.0000000000000002],
[25.16710035838422, 0, -5.9522535772986, 1],
[27.437849524060642, 0, -4.927039014178517, 0.9999999999999999],
[29.7542920863866, 0, -4.028232704145715, 0.9999999999999999],
[32.11023490194244, 0, -3.243461017781614, 0.9999999999999998],
[34.499484827308535, 0, -2.56035032566763, 0.9999999999999997],
[36.91584871906518, 0, -1.9665269983851892, 0.9999999999999996],
[39.35328336132695, 0, -1.4504051633262336, 0.9999999999999997],
[41.8071311282343, 0, -1.0076791848683684, 0.9999999999999999],
[44.273483525476955, 0, -0.6379795521514762, 1],
[46.499497521985354, 0, -0.3675404908536285, 0.9999999999999998],
[47.70003443876498, 0, -0.24619654497075863, 1],
[48.571814387462624, 0, -0.16874721429387524, 0.9999999999999999],
[49.292111379398605, 0, -0.11149361650523448, 1],
[49.91998747855483, 0, -0.06654412557289584, 1],
[50.483859148305946, 0, -0.03010369508701564, 1.0000000000000002],
[51, 0, 0, 1],
];
let lineData2: Vector2d = [
[10.5, 0, -26.5, 1],
[10.573820291076342, 0, -22.314239546778368, 0.9999999999999995],
[13.359019071367536, 0, -13.451591871333579, 1.0000000000000007],
[24.504724058628779, 0, -5.452588866468975, 1.0000000000000003],
[37.471579656269877, 0, -1.4571818281579628, 0.9999999999999992],
[46.497084577993259, 0, -0.24908378543712748, 1.0000000000000003],
[51, 0, 0, 1],
];
let xScale: ScaleLinear<number, number, never> = scaleLinear()
.domain([-26, 0])
.range([10, 920]);
let yScale: ScaleLinear<number, number, never> = scaleLinear()
.domain([10, 52])
.range([10, 950]);
// let rootNode: Selection<SVGSVGElement, Vector2d, null, undefined> = select<SVGSVGElement, Vector2d>(svgElement.value as SVGSVGElement)
let splineElement: Selection<SVGPathElement, Vector2d, null, undefined> =
select(lineElement.value as SVGGElement)
.select<SVGPathElement>(".splineElement")
.datum<Vector2d>(lineData1)
.attr(
"d",
(
d: Vector2d,
i: number,
a: Array<SVGPathElement> | ArrayLike<SVGPathElement>
) => {
return line<Vector1d>()
.x((di: Vector1d, ii: number, ao: Vector2d) => xScale(di[2]))
.y((di: Vector1d, ii: number, ao: Vector2d) => yScale(di[0]))
.curve(curveLinear)(d);
}
)
.style("stroke", "black")
.style("fill", "none");
let SymbolTransform: ValueFn<SVGPathElement | BaseType, Vector1d, string> =
function (
d: Vector1d,
i: number,
a: Array<BaseType | SVGPathElement> | ArrayLike<BaseType | SVGPathElement>
): string {
const x = xScale(d[2]);
const y = yScale(d[0]);
return `translate(${x},${y})`;
};
let symbolNode: Selection<SVGPathElement, Vector1d, SVGGElement, Vector2d> =
select(lineElement.value as SVGGElement)
.select<SVGPathElement>(".symbolElement")
.selectAll<SVGPathElement, Vector1d>("path")
.data<Vector1d>(lineData2)
.join("path")
.attr("d", symbol<Vector1d>(symbolCircle, 20))
.style("stroke", "red")
.style("fill", "none")
.attr("transform", SymbolTransform);
</script>
<style scoped lang="less">
.center-plot-graph {
position: absolute;
width: 936px;
height: 960px;
}
</style>
when I check the HTML, there is nothing in <path class="splineElement" /> or <g class="symbolElement" />Zhipeng Liu
05/01/2024, 2:17 AMAditya Rana
05/01/2024, 4:38 AMMiroslav Foltýn
05/03/2024, 6:42 PMjs
const typesOfInterest = view(
Inputs.checkbox(types, {
format: (x) => x.name,
}),
);
js
const sumCols = typesOfInterest.flatMap((x) => x.columns);
const totalStudyProgrammeCountByType = await query(`
SELECT
accreditedStudyProgramme.name as name,
${sumCols.length ? `sum(${sumCols.join(' + ’)})` : 0} as total
FROM accreditedStudyProgramme
GROUP BY name
`);
Issue for me is that for me to be able to read the values of “typesOfInterest” it has be passed down to “view”, which however renders it wherever the file first cell is defined. I would however like to have control over the structure of my code - I would like to be able to define the view in one place and actually render the view (the checkboxes) further down the line in the document. Is that possible and if so how?enjalot
05/05/2024, 1:54 PMMartien van Steenbergen
05/07/2024, 1:35 PMAkihiko Nagata
05/08/2024, 2:01 PMJack Ivers
05/08/2024, 3:56 PMMichael Cooper
05/08/2024, 4:01 PM