add defaultLineParams within the line chart, so users can edit basicLineParams without interfering

Author: duncanbradley

src/lib/components/data-vis/line-chart/LineChart.svelte

@@ -30,10 +30,9 @@
       .x((d) => xFunction(d[x]))
       .y((d) => yFunction(d[y]))
       .curve(curveLinear),
-    labelText,
+    labelText = "labelText",
 
-    basicLineParams, // contains functions
-    tooltipContent, // snippet
+    tooltipContent = "tooltipContent",
 
     onClickSeries = (series, tier) => {
       if (clickedSeries === dataId) {
@@ -55,15 +54,23 @@
         hoveredTier = tier;
       }
     },
-    onClickMarker,
-    onMouseEnterMarker,
-    onMouseLeaveMarker,
+    onClickMarker = (event, marker, markerId) => {
+      activeMarkerId = marker;
+    },
+    onMouseEnterMarker = (event, marker, markerId) => {
+      activeMarkerId = marker;
+    },
+    onMouseLeaveMarker = (event, marker, dataId) => {
+      activeMarkerId = null;
+    },
 
     // Optional
     clickedSeries = $bindable(undefined),
     hoveredSeries = undefined,
     overrideLineParams = () => ({}),
-    getLine = () => true,
+    getLine = (key, el) => {
+      return true;
+    },
     nothingSelected = true,
     svgWidth = $bindable(500),
     svgHeight = 500,
@@ -88,8 +95,24 @@
     tieredLineParams = {
       all: {},
     },
+
+    basicLineParams = {},
   } = $props();
 
+  let defaultLineParams = $derived({
+    xFunction,
+    yFunction,
+    lineFunction,
+    onClickSeries,
+    onMouseEnterSeries,
+    onMouseLeaveSeries,
+    onClickMarker,
+    onMouseEnterMarker,
+    onMouseLeaveMarker,
+    haloColor: chartBackgroundColor,
+    invisibleStrokeWidth: 20,
+  });
+
   let chartWidth = $derived(svgWidth - paddingLeft - paddingRight);
   let chartHeight = $derived(svgHeight - paddingTop - paddingBottom);
   // let areaFunction = $derived(
@@ -100,12 +123,7 @@
   //     .curve(curveLinear),
   // );
 
-  let selectedLine = $derived([
-    hoveredSeries,
-    clickedSeries,
-    hoveredSeries,
-    clickedSeries,
-  ]);
+  let selectedLine = $derived([hoveredSeries, clickedSeries]);
 
   function handleClickOutside(event) {
     if (
@@ -123,10 +141,12 @@
     overrideLineParams,
     tieredLineParams,
     basicLineParams,
+    defaultLineParams,
   ) {
     const listOfProperties = [
       ...new Set([
-        ...Object.keys(basicLineParams),
+        ...Object.keys(defaultLineParams),
+        ...Object.keys(basicLineParams ?? {}),
         ...Object.keys(tieredLineParams[tier] ?? {}),
         ...Object.keys(overrideLineParams(tier, line)),
       ]),
@@ -137,7 +157,8 @@
         key,
         overrideLineParams(tier, line)[key] ??
           tieredLineParams[tier]?.[key] ??
-          basicLineParams[key],
+          basicLineParams[key] ??
+          defaultLineParams[key],
       ]),
     );
 
@@ -160,9 +181,9 @@
             overrideLineParams,
             tieredLineParams,
             basicLineParams,
+            defaultLineParams,
           ),
         );
-
       return acc;
     }, {}),
   );

src/wrappers/components/data-vis/line-chart/LineChartWrapper.svelte

@@ -899,5 +899,5 @@ DONOTTOUCH  *
     &&          Creates a list of examples where the component is used (if any examples exist).
 -->
 <div id="examples" data-role="examples-section">
-  <Examples></Examples>
+  <Examples {data}></Examples>
 </div>

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

@@ -1,17 +1,41 @@
 <script>
   import { AccordionItem, Accordion } from "flowbite-svelte";
+  import Template from "$lib/package-wrapping/templates/Template.svelte";
 
   import CodeBlock from "$lib/package-wrapping/CodeBlock.svelte";
   import * as codeBlocks from "./codeBlocks.js";
 
   import LineChart from "$lib/components/data-vis/line-chart/LineChart.svelte";
 
+  let { data } = $props();
+  const lineChartData = (() => {
+    const found = data.dataInFormatForLineChart.find(
+      (el) => el.metric === "Household waste recycling rate",
+    );
+    return found ? { ...found, lines: found.lines.slice(0, 5) } : null;
+  })();
+
   let accordionSnippetSections = [
     {
       id: "1",
-      heading: "1. Example 1 - describe the use case here",
+      heading: "1. Static line chart",
       content: Example1,
     },
+    {
+      id: "2",
+      heading: "2. Interactive line chart",
+      content: Example2,
+    },
+    {
+      id: "3",
+      heading: "3. Chart with different tiers",
+      content: Example3,
+    },
+    {
+      id: "4",
+      heading: "4. Chart with markers",
+      content: Example4,
+    },
   ];
 </script>
 
@@ -37,32 +61,34 @@
 
 {#snippet Example1()}
   <div class="p-5 bg-white">
-    <Template
-      componentNameProp="Example 1"
-      checkboxProp={true}
-      dropdownProp="Dragonfruit"
-      jsObjectProp={[
-        {
-          name: "Borussia Dortmund",
-          country: "Germany",
-          color: "#fdff7d",
-        },
-        { name: "Liverpool FC", country: "UK", color: "#f59fad" },
-        {
-          name: "SSC Napoli",
-          country: "Italy",
-          color: "#69bfff",
-        },
-        {
-          name: "S.L. Benfica",
-          country: "Portugal",
-          color: "#ff8c96",
-        },
-      ]}
-      functionProp={function () {
-        window.alert(`Example 1 functionProp has been triggered.`);
-      }}
-    ></Template>
+    <LineChart {lineChartData} x="x" y="y" series="areaCode"></LineChart>
+  </div>
+  <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
+{/snippet}
+
+{#snippet Example2()}
+  <div class="p-5 bg-white">
+    <LineChart {lineChartData} x="x" y="y" series="areaCode"></LineChart>
+  </div>
+  <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
+{/snippet}
+
+{#snippet Example3()}
+  <div class="p-5 bg-white">
+    <LineChart {lineChartData} x="x" y="y" series="areaCode"></LineChart>
+  </div>
+  <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
+{/snippet}
+
+{#snippet Example4()}
+  <div class="p-5 bg-white">
+    <LineChart
+      {lineChartData}
+      x="x"
+      y="y"
+      series="areaCode"
+      basicLineParams={{ markers: true, interactive: true }}
+    ></LineChart>
   </div>
   <CodeBlock code={codeBlocks.codeBlock1} language="svelte"></CodeBlock>
 {/snippet}