Fix popup text colour bleed and add tooltip font to doughnut charts

930633bc by Isaac Bythewood · 2 months ago

Fix popup text colour bleed and add tooltip font to doughnut charts

Datamaps injects a global CSS rule that strokes all SVG paths white;
with the responsive layout the SVG and popup share a stacking context,
and <strong> had no -webkit-text-fill-color override, letting path
stroke colours bleed through the text. Replace <strong> with <span>
and pin -webkit-text-fill-color on the popup container so no external
rule can override it.

Add titleFont/bodyFont with fontStack to all four doughnut chart
tooltip configs so the tooltip uses the same monospace family as the
axis labels and legend, matching the already-fixed line chart.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

modified properties/static_src/scripts/property_graphs.js

@@ -135,6 +135,10 @@ document.addEventListener("DOMContentLoaded", function () {        animateRotate: false,      },      plugins: {        tooltip: {          titleFont: { family: fontStack },          bodyFont: { family: fontStack },        },        legend: {          position: "right",          labels: {

@@ -182,6 +186,10 @@ document.addEventListener("DOMContentLoaded", function () {        animateRotate: false,      },      plugins: {        tooltip: {          titleFont: { family: fontStack },          bodyFont: { family: fontStack },        },        legend: {          position: "right",          labels: {

@@ -229,6 +237,10 @@ document.addEventListener("DOMContentLoaded", function () {        animateRotate: false,      },      plugins: {        tooltip: {          titleFont: { family: fontStack },          bodyFont: { family: fontStack },        },        legend: {          position: "right",          labels: {

@@ -276,6 +288,10 @@ document.addEventListener("DOMContentLoaded", function () {        animateRotate: false,      },      plugins: {        tooltip: {          titleFont: { family: fontStack },          bodyFont: { family: fontStack },        },        legend: {          position: "right",          labels: {

modified properties/static_src/scripts/property_map.js

@@ -33,8 +33,8 @@ document.addEventListener("DOMContentLoaded", function () {      popupTemplate: function (geo, data) {        const count = data && data.numberOfThings != null ? data.numberOfThings : 0;        return (`          <div style="position:relative;padding:4px 10px;background:rgba(0,0,0,0.85);color:#fff;border-radius:4px;font-size:0.875rem;white-space:nowrap;pointer-events:none;">            <strong style="display:block;">${geo.properties.name}</strong>          <div style="position:relative;padding:4px 10px;background:rgba(0,0,0,0.85);color:#fff;-webkit-text-fill-color:#fff;border-radius:4px;font-size:0.875rem;white-space:nowrap;pointer-events:none;">            <span style="display:block;font-weight:bold;">${geo.properties.name}</span>            ${count} session start${count === 1 ? "" : "s"}          </div>        `);