@communitiesuk/svelte-component-library 0.1.19-beta.14 → 0.1.19-beta.15

package/dist/components/data-vis/histogram/Histogram.svelte

@@ -46,6 +46,11 @@
   let yTickMin = $derived(yTicks.length ? Math.min(...yTicks) : 0);
   let yTickMax = $derived(yTicks.length ? Math.max(...yTicks) : 1);
 
+  import { median, quantile } from "d3-array";
+
+  let distSorted = $derived(dist.slice().sort((a, b) => a - b));
+  let rawMedian = $derived(median(distSorted));
+
   //  min and max at extremes
   //  let histogram = bin().domain([domainMin, domainMax]).thresholds(thresholds);
 
@@ -70,7 +75,11 @@
   // won't get xTick and xTickMax if showAxis is false
   // run it anyway inside an else block
   let bins = $derived(createEqualWidthBins(xTickMin, xTickMax, 10, dist));
-  $inspect({ xTickMin, xTickMax, bins });
+
+  let proportionInExtremeBins = $derived([
+    bins[0]["count"] / distSorted.length,
+    bins.at(-1)["count"] / distSorted.length,
+  ]);
 
   let nBins = $derived(bins.length);
 
@@ -101,17 +110,59 @@
     bins.length ? xScale(bins[0].x1) - xScale(bins[0].x0) : 0,
   );
 
+  import chroma from "chroma-js";
+
+  let midPosition = $derived((rawMedian - xTickMin) / (xTickMax - xTickMin));
+
+  let c1000 = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain([0, midPosition, 1])
+      .colors(1000),
+  );
+
   let colors1000 = $derived(
     polarity === "reverse"
-      ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
-      : interpolateColors(startColor, endColor, 1000, midColor),
+      ? c1000.reverse() // only done once
+      : c1000,
+  );
+
+  let thisDomain = $derived(
+    polarity === "reverse"
+      ? [0, midPosition, 1].reverse() // only done once
+      : [0, midPosition, 1],
+  );
+
+  // let colors1000 = $derived(
+  //   polarity === "reverse"
+  //     ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
+  //     : interpolateColors(startColor, endColor, 1000, midColor),
+  // );
+
+  let averagesForSegments = $derived(
+    splitGroupsAndAverages(dist, nSegments).averages,
+  );
+
+  let preBin = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain(thisDomain)
+      .padding([proportionInExtremeBins[0] / 2, proportionInExtremeBins[1] / 2])
+      .colors(10),
   );
 
   let binColors = $derived(
     polarity === "reverse"
-      ? assignBinColors(bins, colors1000) // only done once
-      : assignBinColors(bins, colors1000),
+      ? preBin.reverse() // only done once
+      : preBin,
   );
+
+  // let binColors = $derived(
+  //   polarity === "reverse"
+  //     ? assignBinColors(bins, colors1000).reverse() // only done once
+  //     : assignBinColors(bins, colors1000),
+  // );
+
   let interpolatedColors = $derived(binColors);
 
   function findBinIndex(binned, value) {

package/dist/components/data-vis/position-chart/PositionChart.svelte

@@ -205,28 +205,62 @@
     createEqualWidthBins(xTickMin, xTickMax, nSegments, dist),
   );
 
+  let proportionInExtremeBins = $derived([
+    bins[0]["count"] / distSorted.length,
+    bins.at(-1)["count"] / distSorted.length,
+  ]);
+
   const range = $derived(
     Array.from({ length: nSegments }, (_, i) => nSegments - 1 - i),
   );
 
+  import chroma from "chroma-js";
+
+  let midPosition = $derived((rawMedian - newMin) / (newMax - newMin));
+
+  let c1000 = $derived(
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain([0, midPosition, 1])
+      .colors(1000),
+  );
+
   let colors1000 = $derived(
     polarity === "reverse"
-      ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
-      : interpolateColors(startColor, endColor, 1000, midColor),
+      ? c1000.reverse() // only done once
+      : c1000,
+  );
+
+  let thisDomain = $derived(
+    polarity === "reverse"
+      ? [0, midPosition, 1].reverse() // only done once
+      : [0, midPosition, 1],
   );
 
+  // let colors1000 = $derived(
+  //   polarity === "reverse"
+  //     ? interpolateColors(startColor, endColor, 1000, midColor).reverse() // only done once
+  //     : interpolateColors(startColor, endColor, 1000, midColor),
+  // );
+
   let averagesForSegments = $derived(
     splitGroupsAndAverages(dist, nSegments).averages,
   );
 
-  // let binColors = $derived(assignBinColors(bins, colors1000));
-
   let binColors = $derived(
-    polarity === "reverse"
-      ? assignBinColors(bins, colors1000).reverse() // only done once
-      : assignBinColors(bins, colors1000),
+    chroma
+      .scale([startColor, midColor, endColor])
+      .domain(thisDomain)
+      .padding([proportionInExtremeBins[0] / 2, proportionInExtremeBins[1] / 2])
+      .colors(10),
   );
 
+  // let binColors = $derived(
+  //   polarity === "reverse"
+  //     ? assignBinColors(bins, colors1000).reverse() // only done once
+  //     : assignBinColors(bins, colors1000),
+  // );
+
   let interpolatedColors = $derived(
     skew
       ? binColors
@@ -675,7 +709,7 @@
                               )
                             : rowValue.color}
                           stroke="white"
-                          stroke-width="2"
+                          stroke-width="5"
                           opacity={rowValue.opacity}
                           pointer-events={rowValue.pointerEvents}
                         ></circle>
@@ -691,7 +725,8 @@
                                 activeColors,
                               )
                             : rowValue.color}
-                          stroke="black"
+                          stroke="#333333"
+                          stroke-width="2"
                           opacity={rowValue.opacity}
                           pointer-events={rowValue.pointerEvents}
                         ></circle>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.14",
+  "version": "0.1.19-beta.15",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"
@@ -101,6 +101,7 @@
     "@types/dompurify": "^3.0.5",
     "accessible-autocomplete": "^3.0.1",
     "choices.js": "^11.1.0",
+    "chroma-js": "^3.2.0",
     "csv-parser": "^3.0.0",
     "d3": "^7.9.0",
     "decimal.js": "^10.5.0",