\n\n\n\n\n\n","import axios, {AxiosResponse} from \"axios\";\n\nexport interface ApiComRequestDef {\n method: 'GET' | 'POST';\n url?: string;\n data?: any;\n file?: File;\n formData?: FormData;\n download?: boolean;\n filename?: string;\n infoText?: string;\n config?: any;\n app?: any;\n responseHandler?: (data: any) => void;\n errorHandler?: (error: any) => void;\n}\n\nclass ApiCommunication{\n url: string;\n private _requestCounts = new WeakMap();\n private _requestInfoTexts = new Map();\n private _nextReqId = 0;\n\n constructor(url: string) {\n this.url = url;\n axios.defaults.xsrfCookieName = 'csrftoken';\n axios.defaults.xsrfHeaderName = 'X-CSRFToken';\n }\n\n private _startRequest(app: any, infoText?: string): number {\n const count = (this._requestCounts.get(app) || 0) + 1;\n this._requestCounts.set(app, count);\n const reqId = ++this._nextReqId;\n if (infoText) {\n this._requestInfoTexts.set(reqId, {app, text: infoText});\n }\n app.working = true;\n this._updateInfoTexts(app);\n return reqId;\n }\n\n private _endRequest(app: any, reqId: number): void {\n const count = Math.max(0, (this._requestCounts.get(app) || 1) - 1);\n this._requestCounts.set(app, count);\n this._requestInfoTexts.delete(reqId);\n this._syncWorkingState(app);\n this._updateInfoTexts(app);\n }\n\n private _syncWorkingState(app: any): void {\n const count = this._requestCounts.get(app) || 0;\n if (count > 0) {\n app.working = true;\n } else if (!app.fatalError && !app.confirm) {\n app.working = false;\n }\n }\n\n private _updateInfoTexts(app: any): void {\n if (!app || !('loadingInfoTexts' in app)) return;\n const texts: string[] = [];\n this._requestInfoTexts.forEach((entry) => {\n if (entry.app === app) {\n texts.push(entry.text);\n }\n });\n app.loadingInfoTexts = texts;\n }\n\n getActiveRequestCount(app: any): number {\n return this._requestCounts.get(app) || 0;\n }\n\n private _handleFatalError(app: any, response: AxiosResponse): boolean {\n if (response.data.fatalError){\n app.working = true;\n app.raiseFatalError(\"Fatal Error\", response.data.fatalError.message, 500);\n return true;\n }\n return false;\n }\n\n private _handleResponse(app: any, response: AxiosResponse, responseHandler: any, errorHandler: any): void {\n const contentType = response.headers['content-type'];\n if (contentType === 'application/json'){\n if (this._handleFatalError(app, response)){\n return;\n }\n }\n else {\n console.warn(\"Non-JSON contentType: \" + contentType);\n }\n try {\n responseHandler(response.data);\n }\n catch (e){\n console.log(e);\n errorHandler(e);\n }\n }\n\n get(app: any, responseHandler: any, errorHandler: any){\n this.makeRequest({method: 'GET', app, responseHandler, errorHandler});\n }\n post(app: any, data: any, responseHandler: any, errorHandler: any, config?: any){\n this.makeRequest({method: 'POST', app, data, responseHandler, errorHandler, config});\n }\n postFile(app: any, file: any, responseHandler: any, errorHandler: any){\n this.makeRequest({method: 'POST', app, file, responseHandler, errorHandler});\n }\n postFormData(app: any, formData: FormData, responseHandler: any, errorHandler: any){\n this.makeRequest({method: 'POST', app, formData, responseHandler, errorHandler});\n }\n\n static postDownload(url: string, data: any, filename: string|undefined = undefined){\n axios.post(url, data, {responseType: 'blob'}).then((response: AxiosResponse) => {\n const blobUrl = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement('a');\n link.href = blobUrl;\n if (filename) {\n link.setAttribute('download', filename);\n }\n document.body.appendChild(link);\n link.click();\n });\n }\n\n makeRequest(def: ApiComRequestDef): void {\n const url = def.url || this.url;\n const app = def.app;\n\n if (def.download) {\n const reqId = app ? this._startRequest(app, def.infoText) : null;\n axios.post(url, def.data, {responseType: 'blob'}).then((response: AxiosResponse) => {\n const blobUrl = window.URL.createObjectURL(new Blob([response.data]));\n const link = document.createElement('a');\n link.href = blobUrl;\n if (def.filename) {\n link.setAttribute('download', def.filename);\n }\n document.body.appendChild(link);\n link.click();\n if (app && reqId !== null) this._endRequest(app, reqId);\n }).catch((error) => {\n if (def.errorHandler) def.errorHandler(error);\n if (app && reqId !== null) this._endRequest(app, reqId);\n });\n return;\n }\n\n const reqId = this._startRequest(app, def.infoText);\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n const responseHandler = def.responseHandler || (() => {});\n const errorHandler = def.errorHandler || ((e: any) => console.error(e));\n\n let requestData = def.data;\n let config = def.config;\n\n if (def.file) {\n const formData = new FormData();\n formData.append('file', def.file);\n requestData = formData;\n config = { ...config, headers: { 'Content-Type': 'multipart/form-data' } };\n } else if (def.formData) {\n requestData = def.formData;\n config = { ...config, headers: { 'Content-Type': 'multipart/form-data' } };\n }\n\n const promise = def.method === 'GET'\n ? axios.get(url)\n : axios.post(url, requestData, config);\n\n promise.then((response: AxiosResponse) => {\n this._handleResponse(app, response, responseHandler, errorHandler);\n this._endRequest(app, reqId);\n }).catch((error) => {\n console.log(error);\n errorHandler(error);\n this._endRequest(app, reqId);\n });\n }\n}\n\nclass ApiRequestBuilder{\n actions: any[];\n constructor(actionId: string, properties: any) {\n this.actions = [];\n if (actionId){\n this.addAction(actionId, properties);\n }\n }\n addAction(actionId: string, properties: any){\n if (! properties) properties = {};\n properties.action = actionId;\n this.actions.push(properties);\n return this;\n }\n build(){\n return {\n actions: this.actions\n };\n }\n}\n\nconst ApiUtil = {\n addKeyToMapItemsAsId: function (map: any){\n for (const id in map) {\n map[id].id = id;\n }\n return map;\n },\n listToMapWithIdAsKey: function(l: any){\n const map = {};\n let item;\n for (const idx in l){\n item = l[idx];\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n map[item.id] = item;\n }\n return map;\n },\n mapToList: function(map: any){\n const list = [];\n for (const id in map){\n list.push(map[id]);\n }\n return list;\n },\n listFromIds: function (ids: any, map: any){\n const l = [];\n for (const idx in ids){\n const id = ids[idx];\n const o = map[id];\n if (o) l.push(o);\n }\n return l;\n },\n};\n\nexport {ApiCommunication, ApiRequestBuilder, ApiUtil}\n","type AttributeRecord = Record;\n\n/**\n * Lightweight DOM helper used by the download toolbar.\n * Keeps all DOM mutation logic in a single place so we do not\n * clutter the visualization code with manual element handling.\n */\nclass DomElement {\n private readonly element: HTMLElement;\n\n constructor(element: HTMLElement) {\n this.element = element;\n }\n\n el(): HTMLElement {\n return this.element;\n }\n\n attr(key: string, value: unknown): DomElement {\n if (value === null || value === undefined) {\n return this;\n }\n\n if (key === \"class\" && typeof value === \"object\" && !Array.isArray(value)) {\n const classList = Object.keys(value)\n .filter(cls => Boolean((value as Record)[cls]))\n .join(\" \");\n if (classList) {\n this.element.setAttribute(\"class\", classList);\n }\n return this;\n }\n\n if (key === \"style\" && typeof value === \"object\" && !Array.isArray(value)) {\n const styleString = Object.entries(value as Record)\n .map(([prop, val]) => `${prop}:${val}`)\n .join(\";\");\n if (styleString) {\n this.element.setAttribute(\"style\", styleString);\n }\n return this;\n }\n\n this.element.setAttribute(key, String(value));\n return this;\n }\n\n attrs(attributes: AttributeRecord): DomElement {\n Object.entries(attributes).forEach(([key, val]) => this.attr(key, val));\n return this;\n }\n\n text(content: string): DomElement {\n this.element.textContent = content;\n return this;\n }\n}\n\nexport class ElementBuilder {\n static create(tag: string, attributes?: AttributeRecord): DomElement {\n const element = document.createElement(tag);\n const domElement = new DomElement(element);\n if (attributes) {\n domElement.attrs(attributes);\n }\n return domElement;\n }\n\n static append(parent: HTMLElement | DomElement, tag: string, attributes?: AttributeRecord): DomElement {\n const domElement = ElementBuilder.create(tag, attributes);\n if (parent instanceof DomElement) {\n parent.el().appendChild(domElement.el());\n } else {\n parent.appendChild(domElement.el());\n }\n return domElement;\n }\n}\n\nexport type { DomElement };\n\n","/**\n * Reusable tooltip class for displaying HTML content with automatic positioning.\n * Works with D3 selections by appending a foreignObject to the current SVG root.\n */\nclass Tooltip {\n private readonly container: any;\n private readonly width: number;\n private readonly height: number;\n\n constructor(svg: any, width: number, height: number) {\n this.width = width;\n this.height = height;\n // A div (not xhtml:body) as the foreignObject child: a nested is invalid\n // and, being tagged `body`, collides with page-wide body selectors in tooling.\n this.container = svg.append(\"foreignObject\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"pointer-events\", \"none\")\n .append(\"xhtml:div\")\n .style(\"opacity\", 0)\n .style(\"position\", \"absolute\")\n .style(\"pointer-events\", \"none\")\n .style(\"top\", \"0px\")\n .style(\"left\", \"0px\");\n }\n\n show(htmlContent: string, x: number, y: number) {\n this.container.html(htmlContent);\n this.container.style(\"opacity\", 0.85);\n this.position(x, y);\n }\n\n hide() {\n this.container.style(\"opacity\", 0);\n }\n\n private position(x: number, y: number) {\n const bounds = this.container.node().getBoundingClientRect();\n const margin = 10;\n const safeMargin = 5;\n\n let left = x - bounds.width / 2;\n let top = y - bounds.height - margin;\n\n const minLeft = safeMargin;\n const maxLeft = this.width - bounds.width - safeMargin;\n const minTop = safeMargin;\n const maxTop = this.height - bounds.height - safeMargin;\n\n if (left < minLeft) {\n left = minLeft;\n } else if (left > maxLeft) {\n left = maxLeft;\n }\n\n if (top < minTop) {\n top = y + margin;\n if (top > maxTop) {\n top = Math.max(minTop, Math.min(maxTop, y - bounds.height / 2));\n }\n } else if (top > maxTop) {\n top = y - bounds.height - margin;\n if (top < minTop) {\n top = Math.max(minTop, Math.min(maxTop, y - bounds.height / 2));\n }\n }\n\n left = Math.max(0, Math.min(this.width - bounds.width, left));\n top = Math.max(0, Math.min(this.height - bounds.height, top));\n\n this.container\n .style(\"left\", `${left}px`)\n .style(\"top\", `${top}px`);\n }\n}\n\nexport { Tooltip };\n\n","import type { TraceHandler } from \"../handlers/TraceHandler\";\nimport type { TraceRenderable } from \"../renderables\";\nimport type { MyD3 } from \"../MyD3\";\n\nclass MyPlotVisuals {\n showLine = true;\n showMarkers = false;\n showErrorArea = true;\n showErrorBars = false;\n showErrorLines = false;\n expertMode = false;\n}\n\nclass Plot {\n traces: Trace[] = [];\n renderables: TraceRenderable[] = [];\n xMin = 0;\n xMax = 0;\n yMin = 0;\n yMax = 0;\n axisXType: \"linear\" | \"categorical\" = \"linear\";\n axisYType: \"linear\" | \"categorical\" = \"linear\";\n categoricalXLabels: string[] = [];\n categoricalYLabels: string[] = [];\n\n prepare(plot: any, handlers: TraceHandler[]) {\n if (!plot?.traces || !Array.isArray(plot.traces)) {\n this.traces = [];\n return;\n }\n\n const prepared: Trace[] = [];\n for (const jsonTrace of plot.traces) {\n const handler = handlers.find(item => item.canHandle(jsonTrace));\n if (!handler) continue;\n const trace = handler.read(jsonTrace);\n trace.traceIndex = prepared.length;\n prepared.push(trace);\n }\n this.traces = prepared;\n }\n\n prepareBounds(myD3: MyD3) {\n if (this.traces.length === 0) return;\n\n const renderables: TraceRenderable[] = [];\n for (const trace of this.traces) {\n renderables.push(...trace.traceHandler.yieldRenderables(trace, myD3));\n }\n renderables.sort((a, b) => a.sort - b.sort);\n this.renderables = renderables;\n\n for (const renderable of this.renderables) {\n renderable.configureAxes(this);\n }\n\n for (const renderable of this.renderables) {\n renderable.updateBounds();\n }\n\n this.xMin = Math.min(...this.traces.map(trace => trace.xMin));\n this.xMax = Math.max(...this.traces.map(trace => trace.xMax));\n const { yMin, yMax } = myD3.resolveYBounds(\n Math.min(...this.traces.map(trace => trace.yMin)),\n Math.max(...this.traces.map(trace => trace.yMax))\n );\n this.yMin = yMin;\n this.yMax = yMax;\n }\n}\n\nclass Trace {\n items: TraceData[] = [];\n settings: Record;\n title = \"\";\n traceIndex = 0;\n xMin = 0;\n xMax = 0;\n yMin = 0;\n yMax = 0;\n hsva: number[] = [240, 1.0, 1.0, 1.0];\n colorFull = \"\";\n colorFullAlpha10 = \"\";\n colorFullAlpha25 = \"\";\n colorDesaturated = \"\";\n colorDark = \"\";\n colorLight = \"\";\n colorBarFill = \"\";\n colorBarStroke = \"\";\n colorText = \"\";\n colorTextMuted = \"\";\n focusMarker: any;\n traceHandler: TraceHandler;\n keyX = \"year\";\n keyY = \"trend\";\n /** Stroke dash array for dashed lines (e.g., \"5,5\" or \"10,5,2,5\"). Empty string means solid line. */\n dashArray = \"\";\n\n constructor(traceJson: any, traceHandler: TraceHandler) {\n this.traceHandler = traceHandler;\n this.settings = traceJson.settings || {};\n this.title = traceJson.title;\n this.keyX = this.settings.keyX || this.keyX;\n this.keyY = this.settings.keyY || this.keyY;\n this.applyStyle();\n }\n\n private applyStyle() {\n const style = this.settings.style;\n if (style) {\n this.hsva = style.hsva || this.hsva;\n this.dashArray = style.dashArray || this.dashArray;\n }\n this.applyHsva(this.hsva[0], this.hsva[1], this.hsva[2], this.hsva[3]);\n // An explicit hex colour (style.color) wins over the hue-derived palette,\n // so trend/scatter traces can share the cohesive account chart colours.\n if (style?.color) {\n this.applyColorHex(style.color);\n }\n }\n\n /**\n * Override the derived colour set from a single hex (e.g. \"#2563eb\").\n * Keeps every colour slot in the same family so lines, markers, fills and\n * tooltip accents stay consistent with the account palette.\n */\n applyColorHex(hex: string) {\n const m = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex.trim());\n if (!m) return;\n const r = parseInt(m[1], 16), g = parseInt(m[2], 16), b = parseInt(m[3], 16);\n const mix = (t: number) => `rgb(${Math.round(r + (255 - r) * t)}, ${Math.round(g + (255 - g) * t)}, ${Math.round(b + (255 - b) * t)})`;\n const shade = (t: number) => `rgb(${Math.round(r * (1 - t))}, ${Math.round(g * (1 - t))}, ${Math.round(b * (1 - t))})`;\n const rgba = (a: number) => `rgba(${r}, ${g}, ${b}, ${a})`;\n this.colorFull = `rgb(${r}, ${g}, ${b})`;\n this.colorFullAlpha10 = rgba(0.1);\n this.colorFullAlpha25 = rgba(0.25);\n this.colorDesaturated = mix(0.45);\n this.colorDark = shade(0.35);\n this.colorLight = mix(0.55);\n this.colorBarFill = rgba(0.5);\n this.colorBarStroke = shade(0.3);\n this.colorText = shade(0.1);\n this.colorTextMuted = mix(0.3);\n }\n\n applyHsva(hue: number, saturation = 0.0, brightness = 1.0, alpha = 1.0) {\n const fn = (h: number, s: number, b: number, a: number) => {\n return `hsla(${h}, ${Math.round(saturation * s)}%, ${Math.round(brightness * b)}%, ${alpha * a})`;\n };\n this.colorFull = fn(hue, 100, 50, 1.0);\n this.colorFullAlpha10 = fn(hue, 100, 50, 0.1);\n this.colorFullAlpha25 = fn(hue, 100, 50, 0.25);\n this.colorDesaturated = fn(hue, 30, 50, 1.0);\n this.colorDark = fn(hue, 100, 25, 1.0);\n this.colorLight = fn(hue, 100, 75, 1.0);\n this.colorBarFill = fn(hue, 70, 40, 0.5);\n this.colorBarStroke = fn(hue, 70, 20, 0.5);\n this.colorText = fn(hue, 100, 60, 1.0);\n this.colorTextMuted = fn(hue, 50, 60, 1.0);\n }\n}\n\nclass TraceData {\n data: any;\n\n constructor(data: any) {\n this.data = data;\n }\n}\n\nexport { MyPlotVisuals, Plot, Trace, TraceData };\n\n","import type { MyD3 } from \"../MyD3\";\nimport type { Plot, Trace, TraceData } from \"../core/PlotModel\";\n\n/**\n * Base class for every renderable element that can appear inside a plot.\n * Keeps references to the owning MyD3 instance and the trace it belongs to.\n */\nabstract class TraceRenderable {\n constructor(\n protected readonly myD3: MyD3,\n protected readonly trace: Trace,\n public readonly sort: number\n ) {}\n\n abstract updateBounds(): void;\n\n abstract render(): void;\n\n // Allow renderables to override axis configuration if needed (categorical charts, etc.)\n configureAxes(_plot: Plot): void {\n // Default implementation - override in subclasses if needed\n return;\n }\n\n static findMinMax(items: TraceData[], keys: string[], currentMin: number, currentMax: number): [number, number] {\n let min = Number.isFinite(currentMin) ? currentMin : Infinity;\n let max = Number.isFinite(currentMax) ? currentMax : -Infinity;\n\n for (const item of items) {\n for (const key of keys) {\n const value = item.data[key];\n if (value === value) { // filters NaN\n if (value < min) min = value;\n if (value > max) max = value;\n }\n }\n }\n\n return [min, max];\n }\n\n static findMinMax2(\n items: TraceData[],\n keysMin: string[],\n keysMax: string[],\n currentMin: number,\n currentMax: number\n ): [number, number] {\n let min = Number.isFinite(currentMin) ? currentMin : Infinity;\n let max = Number.isFinite(currentMax) ? currentMax : -Infinity;\n\n for (const item of items) {\n for (const key of keysMin) {\n const value = item.data[key];\n if (value === value && value < min) {\n min = value;\n }\n }\n for (const key of keysMax) {\n const value = item.data[key];\n if (value === value && value > max) {\n max = value;\n }\n }\n }\n\n return [min, max];\n }\n}\n\nexport { TraceRenderable };\n\n\n","import type { Trace } from \"../core/PlotModel\";\nimport type { SignificanceSegment } from \"../types\";\nimport type { MyD3 } from \"../MyD3\";\n\n// Modern increase/decrease hues, consistent with the site palette. Older cached\n// plots carry neon #00ff00 / #ff0000 baked into their trace settings, so we map\n// those legacy values across here rather than only fixing them at the source.\nconst MODERN_INCREASE = \"#16a34a\";\nconst MODERN_DECREASE = \"#dc2626\";\nconst LEGACY_INCREASE = new Set([\"#00ff00\", \"#0f0\", \"lime\"]);\nconst LEGACY_DECREASE = new Set([\"#ff0000\", \"#f00\", \"red\"]);\n\nfunction modernizeColor(color: string | undefined, modern: string, legacy: Set): string | undefined {\n if (!color) return color;\n return legacy.has(color.toLowerCase()) ? modern : color;\n}\n\nfunction getStrokeColor(trace: Trace, significance: number, myD3?: MyD3): string {\n const colors = trace.settings?.style?.colors;\n if (myD3?.data?.type === \"TG\") {\n return significance === 0 ? trace.colorDesaturated : trace.colorFull;\n }\n if (significance === 1) {\n return modernizeColor(colors?.increase, MODERN_INCREASE, LEGACY_INCREASE) || trace.colorDark;\n }\n if (significance === 2) {\n return modernizeColor(colors?.decrease, MODERN_DECREASE, LEGACY_DECREASE) || trace.colorDark;\n }\n return trace.colorFull;\n}\n\nfunction getStrokeWidth(myD3?: MyD3): number {\n if (!myD3) return 1;\n if (myD3.dlStrokeWidth && myD3.dlStrokeWidthMul) {\n return myD3.dlStrokeWidth * myD3.dlStrokeWidthMul;\n }\n return 1;\n}\n\nfunction createSegmentsBySignificance(trace: Trace, myD3?: MyD3): SignificanceSegment[] {\n const segments: SignificanceSegment[] = [];\n let segment: SignificanceSegment | undefined;\n\n for (let idx = 0; idx < trace.items.length; idx += 1) {\n const item = trace.items[idx];\n const significance = item.data.significance;\n const isNewSegment = !segment || segment.significance !== significance;\n\n if (isNewSegment) {\n segment = {\n significance,\n stroke: getStrokeColor(trace, significance, myD3),\n strokeWidth: getStrokeWidth(myD3),\n x0: idx > 0 ? idx - 1 : 0,\n x1: idx\n };\n segments.push(segment);\n }\n\n if (segment) {\n segment.x1 = idx + 1;\n }\n }\n\n return segments;\n}\n\nfunction stripShortSignificantSegments(segments: SignificanceSegment[], trace: Trace): SignificanceSegment[] {\n const result: SignificanceSegment[] = [];\n const threshold = 2 / 3; // 0.6666\n\n for (let idx = 0; idx < segments.length; idx += 1) {\n const seg = { ...segments[idx] };\n const year0 = trace.items[seg.x0]?.data.year;\n const year1 = trace.items[seg.x1 - 1]?.data.year;\n const span = year1 - year0;\n\n if (Number.isFinite(span) && span < threshold) {\n const prev = result[result.length - 1];\n const next = segments[idx + 1];\n\n if (prev) {\n prev.x1 = seg.x1;\n if (next && prev.significance === next.significance) {\n prev.x1 = next.x1;\n idx += 1;\n }\n continue;\n }\n\n if (next) {\n next.x0 = seg.x0;\n continue;\n }\n }\n\n const last = result[result.length - 1];\n if (last && last.significance === seg.significance && last.x1 === seg.x0) {\n last.x1 = seg.x1;\n } else {\n result.push(seg);\n }\n }\n\n return result;\n}\n\nexport { createSegmentsBySignificance, stripShortSignificantSegments };\n\n\n","import * as d3 from \"d3\";\n\nimport type { Trace } from \"../core/PlotModel\";\nimport type { MyD3 } from \"../MyD3\";\nimport { TraceRenderable } from \"./TraceRenderable\";\nimport { createSegmentsBySignificance } from \"../utils/significance\";\n\n/** Optional smoothing for trend lines/areas via trace.settings.curve. */\nfunction resolveCurve(trace: Trace): d3.CurveFactory | null {\n return trace.settings?.curve === \"monotoneX\" ? d3.curveMonotoneX : null;\n}\n\nclass LineRenderable extends TraceRenderable {\n private readonly keyX: string;\n private readonly keyY: string;\n\n constructor(myD3: MyD3, trace: Trace, sort: number) {\n super(myD3, trace, sort);\n this.keyX = trace.keyX;\n this.keyY = trace.keyY;\n }\n\n updateBounds(): void {\n const trace = this.trace;\n const [xMin, xMax] = TraceRenderable.findMinMax(trace.items, [trace.keyX], trace.xMin, trace.xMax);\n const [yMin, yMax] = TraceRenderable.findMinMax(trace.items, [this.keyY], trace.yMin, trace.yMax);\n trace.xMin = xMin;\n trace.xMax = xMax;\n trace.yMin = yMin;\n trace.yMax = yMax;\n }\n\n render(): void {\n const trace = this.trace;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n const segments = createSegmentsBySignificance(trace, this.myD3);\n\n const curve = resolveCurve(trace);\n for (const segment of segments) {\n const items = trace.items.slice(segment.x0, segment.x1);\n const lineGen = d3.line()\n .x((d: any) => x(d.data[this.keyX]))\n .y((d: any) => y(d.data[this.keyY]));\n if (curve) lineGen.curve(curve);\n const path = svg.append(\"path\")\n .datum(items)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", segment.stroke)\n .attr(\"stroke-width\", segment.strokeWidth || this.myD3.dlStrokeWidthMul * this.myD3.dlStrokeWidth)\n .attr(\"d\", lineGen);\n if (trace.dashArray) {\n path.attr(\"stroke-dasharray\", trace.dashArray);\n }\n }\n }\n}\n\nclass AreaRenderable extends TraceRenderable {\n private readonly keyY0 = \"ciLow\";\n private readonly keyY1 = \"ciHigh\";\n\n updateBounds(): void {\n const trace = this.trace;\n const [xMin, xMax] = TraceRenderable.findMinMax(trace.items, [trace.keyX], trace.xMin, trace.xMax);\n const [yMin, yMax] = TraceRenderable.findMinMax2(\n trace.items,\n [this.keyY0],\n [this.keyY1],\n trace.yMin,\n trace.yMax\n );\n trace.xMin = xMin;\n trace.xMax = xMax;\n trace.yMin = yMin;\n trace.yMax = yMax;\n }\n\n render(): void {\n const trace = this.trace;\n // Traces without CI columns (or with the error area toggled off after\n // construction) must not paint a NaN path.\n if (!this.myD3.visuals.showErrorArea) return;\n if (!trace.items.length || trace.items[0].data[this.keyY0] === undefined) return;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n\n svg.append(\"path\")\n .datum(trace.items)\n .attr(\"fill\", trace.colorFullAlpha10)\n .attr(\"stroke\", \"none\")\n .attr(\"d\", d3.area()\n .x((d: any) => x(d.data[trace.keyX]))\n .y0((d: any) => y(d.data[this.keyY0]))\n .y1((d: any) => y(d.data[this.keyY1]))\n );\n }\n}\n\n// Gradient ids are document-global, so several charts on one page must not collide.\nlet fillAreaGradientSeq = 0;\n\n/**\n * Soft gradient fill between the trend line and the x-axis (trace.settings.fillArea).\n * Unlike AreaRenderable this needs no CI columns — it shades the value itself.\n */\nclass FillAreaRenderable extends TraceRenderable {\n updateBounds(): void {\n // The line's own bounds already cover the filled region.\n }\n\n render(): void {\n const trace = this.trace;\n if (!trace.items.length) return;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n\n fillAreaGradientSeq += 1;\n const gradientId = `myd3-fill-area-${fillAreaGradientSeq}`;\n const gradient = svg.append(\"defs\").append(\"linearGradient\")\n .attr(\"id\", gradientId)\n .attr(\"x1\", 0).attr(\"y1\", 0).attr(\"x2\", 0).attr(\"y2\", 1);\n gradient.append(\"stop\").attr(\"offset\", \"0%\")\n .attr(\"stop-color\", trace.colorFull).attr(\"stop-opacity\", 0.35);\n gradient.append(\"stop\").attr(\"offset\", \"100%\")\n .attr(\"stop-color\", trace.colorFull).attr(\"stop-opacity\", 0.02);\n\n const baseline = y(Math.max(0, this.myD3.preparedPlot.yMin));\n const areaGen = d3.area()\n .x((d: any) => x(d.data[trace.keyX]))\n .y0(baseline)\n .y1((d: any) => y(d.data[trace.keyY]));\n const curve = resolveCurve(trace);\n if (curve) areaGen.curve(curve);\n\n svg.append(\"path\")\n .datum(trace.items)\n .attr(\"fill\", `url(#${gradientId})`)\n .attr(\"stroke\", \"none\")\n .attr(\"d\", areaGen);\n }\n}\n\nclass FocusMarkerRenderable extends TraceRenderable {\n updateBounds(): void {\n // nothing to do\n }\n\n render(): void {\n const trace = this.trace;\n const svg = this.myD3.svg;\n\n // the trace outlives the SVG, so a marker from an earlier draw is detached\n // by now (zoom/pan/resize rebuild the chart) — only keep a live one\n if (trace.focusMarker && trace.focusMarker.node()?.isConnected) {\n return;\n }\n\n const colorFill = trace.colorFull;\n const marker = svg.append(\"circle\")\n .style(\"fill\", \"#fff\")\n .attr(\"stroke\", colorFill)\n .attr(\"stroke-width\", 2)\n .attr(\"r\", 5)\n .style(\"opacity\", 0);\n trace.focusMarker = marker;\n }\n}\n\nclass ErrorBarsRenderable extends TraceRenderable {\n mode: \"bars\" | \"lines\" = \"bars\";\n keyLow = \"ciLow\";\n keyHigh = \"ciHigh\";\n keyValue = \"trend\";\n\n updateBounds(): void {\n const trace = this.trace;\n const [xMin, xMax] = TraceRenderable.findMinMax(trace.items, [trace.keyX], trace.xMin, trace.xMax);\n const [yMin, yMax] = TraceRenderable.findMinMax2(\n trace.items,\n [this.keyLow],\n [this.keyHigh],\n trace.yMin,\n trace.yMax\n );\n trace.xMin = xMin;\n trace.xMax = xMax;\n trace.yMin = yMin;\n trace.yMax = yMax;\n }\n\n render(): void {\n if (this.mode === \"lines\") {\n this.renderLines();\n } else {\n this.renderBars();\n }\n }\n\n private renderBars(): void {\n const trace = this.trace;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n const barWidth = x(this.myD3.preparedPlot.xMin + 1) * 0.5;\n const cls = `error-bars-${trace.traceIndex}`;\n\n svg.selectAll(`rect.${cls}`)\n .data(trace.items)\n .enter()\n .append(\"rect\")\n .attr(\"class\", cls)\n .attr(\"x\", (d: any) => x(d.data[trace.keyX]) - barWidth / 2)\n .attr(\"y\", (d: any) => y(d.data[this.keyHigh]))\n .attr(\"width\", barWidth)\n .attr(\"height\", (d: any) => y(d.data[this.keyLow]) - y(d.data[this.keyHigh]))\n .attr(\"fill\", trace.colorBarFill)\n .attr(\"stroke\", trace.colorBarStroke);\n }\n\n private renderLines(): void {\n const trace = this.trace;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n const stroke = trace.colorDark;\n const clsPoints = `error-points-${trace.traceIndex}`;\n const clsLines = `error-lines-${trace.traceIndex}`;\n\n svg.selectAll(`circle.${clsPoints}`)\n .data(trace.items)\n .enter()\n .append(\"circle\")\n // myd3-rte-item + data-x let the hover handler dim the RTE items of the\n // non-hovered years (deliberately NOT myd3-year-marker — no size jump)\n .attr(\"class\", `${clsPoints} myd3-rte-item`)\n .attr(\"data-x\", (d: any) => d.data[trace.keyX])\n .attr(\"cx\", (d: any) => x(d.data[trace.keyX]))\n .attr(\"cy\", (d: any) => y(d.data[this.keyValue]))\n .attr(\"r\", 3)\n .attr(\"fill\", trace.colorDark);\n\n svg.selectAll(`line.${clsLines}`)\n .data(trace.items)\n .enter()\n .append(\"line\")\n .attr(\"class\", `${clsLines} myd3-rte-item`)\n .attr(\"data-x\", (d: any) => d.data[trace.keyX])\n .attr(\"x1\", (d: any) => x(d.data[trace.keyX]))\n .attr(\"y1\", (d: any) => y(d.data[this.keyLow]))\n .attr(\"x2\", (d: any) => x(d.data[trace.keyX]))\n .attr(\"y2\", (d: any) => y(d.data[this.keyHigh]))\n .attr(\"stroke\", stroke)\n .style(\"stroke-width\", this.myD3.dlStrokeWidthMul);\n }\n}\n\nclass MarkersRenderable extends TraceRenderable {\n updateBounds(): void {\n // nothing to do\n }\n\n render(): void {\n const trace = this.trace;\n const svg = this.myD3.svg;\n const x = this.myD3.axisX;\n const y = this.myD3.axisY;\n const cls = `marker-points-${trace.traceIndex}`;\n\n svg.selectAll(`circle.${cls}`)\n .data(trace.items)\n .enter()\n .append(\"circle\")\n .attr(\"class\", `${cls} myd3-year-marker`)\n .attr(\"data-x\", (d: any) => d.data[trace.keyX])\n .attr(\"data-r\", 5)\n .attr(\"cx\", (d: any) => x(d.data[trace.keyX]))\n .attr(\"cy\", (d: any) => y(d.data[trace.keyY]))\n .attr(\"r\", 5)\n .attr(\"fill\", \"#fff\")\n .attr(\"stroke\", trace.colorFull);\n }\n}\n\nexport {\n LineRenderable,\n AreaRenderable,\n FillAreaRenderable,\n FocusMarkerRenderable,\n ErrorBarsRenderable,\n MarkersRenderable\n};\n\n\n","import { TraceRenderable } from \"./TraceRenderable\";\nimport type { Trace } from \"../core/PlotModel\";\nimport type { MyD3 } from \"../MyD3\";\n\nclass RectangleRenderable extends TraceRenderable {\n constructor(myD3: MyD3, trace: Trace, sort: number) {\n super(myD3, trace, sort);\n }\n\n updateBounds(): void {\n const trace = this.trace;\n trace.xMin = Math.min(\n ...trace.items.map(item => Math.min(item.data.x0, item.data.x1)),\n trace.xMin\n );\n trace.xMax = Math.max(\n ...trace.items.map(item => Math.max(item.data.x0, item.data.x1)),\n trace.xMax\n );\n }\n\n render(): void {\n const myD3 = this.myD3;\n const svg = myD3.svg;\n const x = myD3.axisX;\n const y = myD3.axisY;\n const baseY = y(myD3.preparedPlot.yMin);\n const topY = y((myD3.preparedPlot.yMax - myD3.preparedPlot.yMin) * 0.05 + myD3.preparedPlot.yMin);\n\n for (const item of this.trace.items) {\n const color = `hsla(${item.data.hue || 1}, 100%, 50%, 0.25)`;\n svg.append(\"rect\")\n .attr(\"x\", x(item.data.x0))\n .attr(\"y\", topY)\n .attr(\"width\", x(item.data.x1) - x(item.data.x0))\n .attr(\"height\", baseY - topY)\n .attr(\"fill\", color);\n }\n }\n}\n\nexport { RectangleRenderable };\n\n\n","import * as d3 from \"d3\";\n\nimport type { Trace } from \"../core/PlotModel\";\nimport type { MyD3 } from \"../MyD3\";\nimport { TraceRenderable } from \"./TraceRenderable\";\nimport { Tooltip } from \"../tooltip/Tooltip\";\n\nconst HIT_STROKE_WIDTH = 12; // invisible hover corridor around each line\nconst HIT_POINT_RADIUS = 10; // hover radius around markers (covers single-point traces)\nconst NEARBY_PIXELS = 24; // other lines within this pixel y-distance join the tooltip\nconst DIMMED_OPACITY = 0.25;\n\nconst ESCAPE_MAP: Record = {\n \"&\": \"&\",\n \"<\": \"<\",\n \">\": \">\",\n '\"': \""\",\n \"'\": \"'\"\n};\n\nfunction escapeHtml(value: string): string {\n return String(value).replace(/[&<>\"']/g, c => ESCAPE_MAP[c]);\n}\n\nfunction resolveCurve(name?: string): d3.CurveFactory {\n switch (name) {\n case \"monotoneX\": return d3.curveMonotoneX;\n case \"catmullRom\": return d3.curveCatmullRom;\n case \"natural\": return d3.curveNatural;\n default: return d3.curveLinear;\n }\n}\n\n/**\n * Shared per-plot hover state for all scatterLines traces of one MyD3 instance:\n * highlights the hovered trace, dims the rest and shows a proximity tooltip.\n * Only used by plots of type \"OTHER\" — the classic rendering path's overlay\n * rect would swallow the per-path mouse events.\n *\n * The svg and scales are snapshotted at render time via sync(): reading them\n * from myD3 at event time would break after an image export, because\n * MyD3.draw(options) re-renders into a detached svg and overwrites\n * myD3.svg/axisX/axisY.\n */\nclass ScatterLinesInteraction {\n private readonly renderables: ScatterLinesRenderable[] = [];\n private tooltip?: Tooltip;\n private svg: any;\n private x: any;\n private y: any;\n\n register(renderable: ScatterLinesRenderable): void {\n if (!this.renderables.includes(renderable)) this.renderables.push(renderable);\n }\n\n sync(svg: any, x: any, y: any): void {\n if (this.svg && this.svg.node() !== svg.node()) {\n // the previous svg (and the tooltip's foreignObject in it) is gone\n this.tooltip = undefined;\n }\n this.svg = svg;\n this.x = x;\n this.y = y;\n }\n\n private ensureTooltip(): void {\n if (this.tooltip) return;\n const xRange = this.x.range();\n const yRange = this.y.range();\n this.tooltip = new Tooltip(this.svg, xRange[1] - xRange[0], yRange[0] - yRange[1]);\n }\n\n onHover(active: ScatterLinesRenderable, event: MouseEvent): void {\n if (!this.svg) return;\n const x = this.x;\n const y = this.y;\n const mouse = d3.pointer(event, this.svg.node());\n const mx = mouse[0];\n const my = mouse[1];\n\n const activeTrace = active.getTrace();\n if (activeTrace.items.length === 0) return;\n\n // nearest data point of the hovered trace, by pixel x\n let nearest = activeTrace.items[0];\n let bestDx = Infinity;\n for (const item of activeTrace.items) {\n const dx = Math.abs(x(item.data[activeTrace.keyX]) - mx);\n if (dx < bestDx) {\n bestDx = dx;\n nearest = item;\n }\n }\n const year = nearest.data[activeTrace.keyX];\n const count = nearest.data[activeTrace.keyY];\n\n for (const renderable of this.renderables) {\n renderable.setDimmed(renderable !== active);\n renderable.setHighlighted(renderable === active);\n }\n\n // other traces with data at that year that pass close to the cursor\n const nearby: { title: string; color: string; count: number; dist: number }[] = [];\n for (const renderable of this.renderables) {\n if (renderable === active) continue;\n const trace = renderable.getTrace();\n const item = trace.items.find(i => i.data[trace.keyX] === year);\n if (!item) continue;\n const value = item.data[trace.keyY];\n if (!Number.isFinite(value)) continue;\n const dist = Math.abs(y(value) - my);\n if (dist <= NEARBY_PIXELS) {\n nearby.push({\n title: trace.title,\n color: trace.colorText,\n count: value,\n dist\n });\n }\n }\n nearby.sort((a, b) => a.dist - b.dist);\n\n let html = `
`;\n html += `
${year}
`;\n html += this.buildRow(activeTrace.title, activeTrace.colorText, count, true);\n for (const n of nearby) {\n html += this.buildRow(n.title, n.color, n.count, false);\n }\n html += `