added descriptions and synchronised code blocks with examples

Author: duncanbradley

src/wrappers/components/data-vis/position-chart/PositionChartWrapper.svelte

@@ -47,11 +47,11 @@
    *
    */
   let descriptionArray = [
-    "This component renders a horizontal bar chart with a highlighted marker to visually represent a single value within a defined range. The bar is segmented into ten color-coded bands, each representing a decile, but plots the marker on a continuous scale. The marker is positioned using a linear scale and can optionally be accompanied by an axis and label for added clarity.",
+    "This component renders a horizontal bar with a marker to visually represent a single value within a defined range. The bar has ten color-coded segments, each representing a decile, but the marker is plotted on a continuous scale using a linear function. The user can include an axis or label.",
   ];
 
   let contextArray = [
-    "Use this component when you want to visually communicate where a value sits within a distribution. Use the stacked version of the component when you want to compare values from similar distributions.",
+    "Use this component to show where a value sits within a range. Use the stacked version of the component when you want to compare values.",
   ];
 
   let detailsArray = [
@@ -158,41 +158,43 @@
    */
   let parametersSourceArray = $derived(
     addIndexAndInitalValue([
-      {
-        name: "componentNameProp",
-        category: "Input props",
-        propType: "fixed",
-        value: pageName,
-      },
       {
         name: "showAxis",
-        category: "Input props",
+        category: "Display",
         value: true,
+        description: "Whether to display an axis. Boolean.",
       },
       {
         name: "value",
-        category: "Input props",
+        category: "Data",
         value: 3,
+        description: "The numerical value to be plotted.",
       },
       {
         name: "min",
-        category: "Input props",
+        category: "Data",
         value: 0,
+        description: "The minimum value for the scale.",
       },
       {
         name: "max",
-        category: "Input props",
+        category: "Data",
         value: 10,
+        description: "The maximum value for the scale.",
       },
       {
         name: "label",
-        category: "Input props",
-        value: `Employment`,
+        category: "Display",
+        value: "Label",
+        description:
+          "Text label to display alongside the chart. If specified, the component uses a grid container, otherwise it uses a flex container.",
       },
       {
         name: "chartHeight",
-        category: "Input props",
+        category: "Display",
         value: 24,
+        description:
+          "The height of the chart (which is made up of the bar and the marker)",
       },
     ]),
   );

src/wrappers/components/data-vis/position-chart/position-chart/Examples.svelte

@@ -61,15 +61,14 @@
 
 {#snippet Example1()}
   <div class="p-5 bg-white">
-    <PositionChart value="7" min="1" max="10" label="Education" showAxis={true}
-    ></PositionChart>
+    <PositionChart value="7" min="0" max="10" label="Education"></PositionChart>
   </div>
   <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
 {/snippet}
 
 {#snippet Example2()}
   <div class="p-5 bg-white">
-    <PositionChart value="7" min="1" max="10" showAxis={true}></PositionChart>
+    <PositionChart value="7" min="0" max="10"></PositionChart>
   </div>
   <CodeBlock code={codeBlocks.codeBlock2} language="svelte"></CodeBlock>
 {/snippet}
@@ -93,11 +92,9 @@
           label={item[0]}
           stacked={true}
           numberOfPositionCharts={dummyData.length}
-          showAxis={false}
+          showAxis={dummyData.length == i + 1}
         ></PositionChart>
       {/each}
-      <div class="empty-div"></div>
-      <PositionChartAxis></PositionChartAxis>
     </div>
   </div>
   <CodeBlock code={codeBlocks.codeBlock3} language="svelte"></CodeBlock>

src/wrappers/components/data-vis/position-chart/position-chart/codeBlocks.js

@@ -3,23 +3,33 @@ export const codeBlock1 = `
       import { PositionChart } from '@communitiesuk/svelte-component-library';
     </script>
 
-    <PositionChart value="7" min="1" max="10" label="Education" showAxis={true}
-    ></PositionChart>`;
+    <PositionChart value="7" min="0" max="10" label="Education"></PositionChart>`;
 
 export const codeBlock2 = `
     <script>
       import { PositionChart } from '@communitiesuk/svelte-component-library';
     </script>
 
-    <PositionChart value="7" min="1" max="10" showAxis={true}></PositionChart>`;
+    <PositionChart value="7" min="0" max="10"></PositionChart>`;
 
 export const codeBlock3 = `
     <script>
       import { PositionChart } from '@communitiesuk/svelte-component-library';
-      import { PositionChartAxis } from '@communitiesuk/svelte-component-library';
+
+    let dummyData = $state([
+      ["Overall", 3],
+      ["Income", 2.5],
+      ["Living Environment", 5],
+      ["Barriers to Housing & Services", 1],
+      ["Employment", 3],
+      ["Education", 7],
+      ["Health", 6],
+      ["Crime", 6],
+    ])
     </script>
 
-        <div
+
+    <div
       class="grid"
       style="display: grid;
     grid-template-columns: minmax(100px, 30%) 1fr;
@@ -36,9 +46,8 @@ export const codeBlock3 = `
           label={item[0]}
           stacked={true}
           numberOfPositionCharts={dummyData.length}
-          showAxis={false}
+          showAxis={dummyData.length == i + 1}
         ></PositionChart>
       {/each}
-      <div class="empty-div"></div>
-      <PositionChartAxis></PositionChartAxis>
-    </div>`;
+    </div>
+  </div>`;