@communitiesuk/svelte-component-library 0.1.19-beta.34 → 0.1.19-beta.36

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

@@ -85,7 +85,7 @@
     onMouseLeaveMarker = (event, marker, dataId) => {
       activeMarkerId = null;
     },
-    activeMarkerId = undefined,
+    activeMarkerId = $bindable(undefined),
     distribution = [],
     floor = undefined,
     ceiling = undefined,
@@ -100,6 +100,7 @@
     niceTicks = true,
     ticksDomain = $bindable([[]]),
     axisDomain = $bindable([[]]),
+    getChartDomain = undefined,
   } = $props();
 
   let xTickFirst = $derived(ticksDomain.length ? ticksDomain[0] : 0);
@@ -111,6 +112,10 @@
     polarity === "standard" ? [domainMin, domainMax] : [domainMax, domainMin],
   );
 
+  $effect(() => {
+    getChartDomain?.(chartDomain);
+  });
+
   const segmentScale = $derived(
     scaleLinear().domain([0, nSegments]).range([domainMin, domainMax]),
   );
@@ -225,7 +230,7 @@
         .colors(2);
 
       const averageNormalised =
-        (averageValue - xTickFirst) / (xTickLast - xTickFirst);
+        (averageValue - chartDomain[0]) / (chartDomain[1] - chartDomain[0]);
 
       const binColors = chroma
         .scale([extremeColors[0], midColor, extremeColors[1]])
@@ -275,7 +280,8 @@
       Math.min(
         nSegments - 1,
         Math.floor(
-          (nSegments * (value - xTickFirst)) / (xTickLast - xTickFirst),
+          (nSegments * (value - chartDomain[0])) /
+            (chartDomain[1] - chartDomain[0]),
         ),
       ),
     );
@@ -446,6 +452,7 @@
                   markerRadius},{positionChart.chartHeight / 2})"
               >
                 {#if rowValue.shape === "line"}
+                  {console.log("seg", segmentIndex(rowValue.value))}
                   <line
                     x1={0}
                     x2={0}
@@ -512,7 +519,8 @@
             >
               <tspan x="1" dy="15">▲</tspan>
               <tspan x="1" dy="4">|</tspan>
-              <tspan font-family="GDS Transport" x="1" dy="13">Average</tspan>
+
+              <tspan font-family="GDS Transport" x="1" dy="15">Average</tspan>
             </text>
           </g>
         {/if}

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

@@ -58,7 +58,8 @@ declare const PositionChart: import("svelte").Component<{
     niceTicks?: boolean;
     ticksDomain?: any[];
     axisDomain?: any[];
-}, {}, "chartWidth" | "axisDomain" | "ticksDomain">;
+    getChartDomain?: any;
+}, {}, "chartWidth" | "axisDomain" | "activeMarkerId" | "ticksDomain">;
 type $$ComponentProps = {
     value?: any;
     min?: any;
@@ -114,4 +115,5 @@ type $$ComponentProps = {
     niceTicks?: boolean;
     ticksDomain?: any[];
     axisDomain?: any[];
+    getChartDomain?: any;
 };

package/dist/components/data-vis/table/Table.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Button from "./../../ui/Button.svelte";
+  import { Button } from "@communitiesuk/svelte-component-library";
 
   let {
     data = [],
@@ -43,7 +43,7 @@
         key: column,
         isUnique: keyIsUnique,
         dataType: columnDataType,
-        id: metadata[column].order,
+        id: metadata?.[column]?.order ?? 0,
       });
     }
 
@@ -184,8 +184,8 @@
             <th
               scope="col"
               class={`govuk-table__header ${column.dataType === "number" ? "govuk-table__header--numeric" : ""}`}
-              title={metadata[column.key]?.explainer}
-              style={metadata[column.key]?.width
+              title={metadata?.[column.key]?.explainer}
+              style={metadata?.[column.key]?.width
                 ? `min-width: ${metadata[column.key].width}`
                 : undefined}
               aria-sort={sortState.column !== column.key ||
@@ -197,7 +197,7 @@
             >
               <div class="header">
                 <Button
-                  textContent={metadata[column.key]?.shortLabel ?? column.key}
+                  textContent={metadata?.[column.key]?.shortLabel ?? column.key}
                   buttonType={"table header"}
                   direction={sortState.column === column.key
                     ? sortState.order
@@ -219,7 +219,7 @@
                   <td
                     class="govuk-table__cell govuk-table__cell--numeric"
                     style={`background-color: ${
-                      metadata[column.key]?.direction === "Higher is better"
+                      metadata?.[column.key]?.direction === "Higher is better"
                         ? normToColor(row[column.key + "__normalised"])
                         : normToColorReverse(row[column.key + "__normalised"])
                     }`}

package/dist/components/ui/Masthead.svelte

@@ -34,8 +34,6 @@
     paddingBottom?: string;
     contentSnippet?: Snippet;
   }>();
-
-  let arg = "hello";
 </script>
 
 <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@communitiesuk/svelte-component-library",
-  "version": "0.1.19-beta.34",
+  "version": "0.1.19-beta.36",
   "repository": {
     "type": "git",
     "url": "https://github.com/communitiesuk/mhclg_svelte_component_library.git"