@communitiesuk/svelte-component-library 0.1.19-beta.24 → 0.1.19-beta.27

package/dist/components/content/Tag.svelte

@@ -0,0 +1,32 @@
+<script>
+  let { text, color } = $props();
+</script>
+
+<strong class="govuk-tag trend-tag {color ? `govuk-tag--${color}` : ''}"
+  >{text}</strong
+>
+
+<style>
+  .govuk-tag.trend-tag {
+    padding: 0.25rem 0.625rem;
+    border-bottom: 2px solid #b1b4b6;
+    font-size: 1rem;
+  }
+
+  .govuk-tag.trend-tag.govuk-tag--red {
+    border-bottom-color: #ff5e5e;
+  }
+  .govuk-tag.trend-tag.govuk-tag--orange {
+    border-bottom-color: #ffaf4a;
+  }
+  .govuk-tag.trend-tag.govuk-tag--green {
+    border-bottom-color: #0fbd54;
+  }
+  .govuk-tag.trend-tag.govuk-tag--grey {
+    border-bottom-color: #b1b4b6;
+  }
+  .govuk-tag.trend-tag.govuk-tag--white {
+    background-color: #fbfbfb;
+    border-bottom-color: #cdcdcd;
+  }
+</style>

package/dist/components/content/Tag.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Tag;
+type Tag = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Tag: import("svelte").Component<{
+    text: any;
+    color: any;
+}, {}, "">;
+type $$ComponentProps = {
+    text: any;
+    color: any;
+};

package/dist/components/data-vis/axis/Axis.svelte

@@ -56,6 +56,7 @@
     showGridlines = false,
     showTickMarks = false,
     strokeWidth = 2,
+    niceTicks = true,
   }: {
     chartHeight?: number;
     chartWidth?: number;
@@ -83,6 +84,7 @@
     strokeWidth?: Number;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
+    niceTicks?: Boolean;
   } = $props();
 
   // --- Helpers to compute default domain/range when not supplied ---
@@ -156,6 +158,7 @@
         {showGridlines}
         {showTickMarks}
         {strokeWidth}
+        {niceTicks}
       />
     {/key}
   {/if}

package/dist/components/data-vis/axis/Axis.svelte.d.ts

@@ -31,6 +31,7 @@ type $$ComponentProps = {
     strokeWidth?: Number;
     showGridlines?: Boolean;
     showTickMarks?: Boolean;
+    niceTicks?: Boolean;
 };
 declare const Axis: import("svelte").Component<$$ComponentProps, {}, "ticksArray" | "chartWidth">;
 type Axis = ReturnType<typeof Axis>;

package/dist/components/data-vis/axis/Ticks.svelte

@@ -36,6 +36,7 @@
 
     strokeWidth = 2,
     labelFormatter = undefined as LabelFormatter | undefined,
+    niceTicks = true,
   }: {
     ticksArray?: number[]; // bindable
     chartWidth: number;
@@ -54,6 +55,7 @@
 
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
+    niceTicks?: Boolean;
   } = $props();
   function axisValue(fn: any, tick: number): number {
     // Try single-call first: axisFunction(tick)
@@ -142,7 +144,9 @@
   );
 
   let rawTicks = $derived(
-    generateTicks(min, max, computedTickCount, floor, ceiling),
+    niceTicks
+      ? generateTicks(min, max, computedTickCount, floor, ceiling)
+      : [min, max],
   );
 
   let ticksOrdered = $derived(

package/dist/components/data-vis/axis/Ticks.svelte.d.ts

@@ -23,6 +23,7 @@ type $$ComponentProps = {
     showTickMarks?: Boolean;
     strokeWidth?: number;
     labelFormatter?: LabelFormatter;
+    niceTicks?: Boolean;
 };
 declare const Ticks: import("svelte").Component<$$ComponentProps, {}, "ticksArray">;
 type Ticks = ReturnType<typeof Ticks>;

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -11,6 +11,7 @@
     markerRect = undefined,
     tooltipSnippet,
     labelText = undefined,
+    yOffset = 20,
   } = $props();
 
   let textDimensions = $state();
@@ -31,7 +32,7 @@ left: {markerRect?.x +
   style="position:absolute; left: {markerRect?.x - textDimensions?.width / 2}px;
       top: {markerRect?.y -
     textDimensions?.height -
-    20}px; pointer-events: none"
+    yOffset}px; pointer-events: none"
   bind:contentRect={textDimensions}
 >
   {#if tooltipSnippet === undefined}

package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts

@@ -15,6 +15,7 @@ declare const ValueLabel: import("svelte").Component<{
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 }, {}, "">;
 type $$ComponentProps = {
     activeMarkerId: any;
@@ -28,4 +29,5 @@ type $$ComponentProps = {
     markerRect?: any;
     tooltipSnippet: any;
     labelText?: any;
+    yOffset?: number;
 };

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

@@ -96,6 +96,7 @@
     labelFormatter = (tick, index, ticksArrayLength) => {
       return tick;
     },
+    niceTicks = true,
   } = $props();
 
   let xTicks = $state([]);
@@ -420,6 +421,18 @@
                   2})"
               >
                 {#if rowValue.shape === "line"}
+                  <line
+                    x1={0}
+                    x2={0}
+                    y1={chartHeight / 1.5}
+                    y2={-chartHeight / 1.5}
+                    stroke={rowValue.color === "inherit"
+                      ? colorScale[segmentIndex(rowValue.value)]
+                      : rowValue.color}
+                    stroke-width={rowValue.markerRadius * 5}
+                    opacity={0}
+                    pointer-events={rowValue.pointerEvents}
+                  ></line>
                   <line
                     x1={0}
                     x2={0}
@@ -430,7 +443,7 @@
                       : rowValue.color}
                     stroke-width={rowValue.markerRadius}
                     opacity={rowValue.opacity}
-                    pointer-events={rowValue.pointerEvents}
+                    pointer-events="none"
                   ></line>
                 {:else}
                   <circle
@@ -478,6 +491,7 @@
             {showTickMarks}
             {showGridlines}
             {labelFormatter}
+            {niceTicks}
           ></Axis>
         {/if}
         {#if showAverage}
@@ -576,6 +590,7 @@
       {showTickMarks}
       {showGridlines}
       {labelFormatter}
+      {niceTicks}
     ></Axis>
   {/if}
 </div>

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

@@ -54,6 +54,7 @@ declare const PositionChart: import("svelte").Component<{
     showTickMarks?: boolean;
     showGridlines?: boolean;
     labelFormatter?: Function;
+    niceTicks?: boolean;
 }, {}, "chartWidth">;
 type $$ComponentProps = {
     value?: any;
@@ -106,4 +107,5 @@ type $$ComponentProps = {
     showTickMarks?: boolean;
     showGridlines?: boolean;
     labelFormatter?: Function;
+    niceTicks?: boolean;
 };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
 export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';

package/dist/index.js

@@ -1,6 +1,7 @@
 // this file is auto-generated — do not edit by hand
 import "./main.css";
 export { default as InsetText } from './components/content/InsetText.svelte';
+export { default as Tag } from './components/content/Tag.svelte';
 export { default as WarningText } from './components/content/WarningText.svelte';
 export { default as Histogram } from './components/data-vis/Histogram.svelte';
 export { default as Axis } from './components/data-vis/axis/Axis.svelte';

package/package.json

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