Hi,

I was using your library for one of my projects and have that following problem:

Even if no links are declared in the data parameters, it always falls back to "#" with no way to set it as null or straight up disable it

hill-chart depends on an older version of d3-color which can only be fixed by switching to a newer version

is there any plan to upgrade the hill-chart package to update all the dependencies to their latest versions (or at least the ones having critical security issues like d3-color)?

I get this error after updating to version 2.0.0.

After looking through the commit history, I think 5528281 might be the culprit.

Minimal reproduction:

yarn create vite

Select Svelte -> SvelteKit -> Skeleton Project
cd into the project directory

Add this code to src/routes/+page.svelte:

<script>
  import { onMount } from "svelte";
  import HillChart from "hill-chart";

  const createHillChart = () => {
    const hillChartData = [
      {
        description: "Item 1",
      },
    ];
    const hill = new HillChart(hillChartData);
    hill.render();
  };

  onMount(createHillChart);
</script>

<h1>Minimal Reproduction</h1>
<svg id="hill-chart" />

Run

yarn add hill-chart
yarn
yarn dev # runs `vite dev`

On navigating to http://localhost:5173, this error occurs.

It looks like 'moved' and 'move' events are fired at the same time, which means it cannot be used to set the state of the current datapoints.

I would think 'moved' would be triggered after you have released the mouse button again, so the new data points can be saved in a database.

I am using hill-chart with SvelteKit on minb.

Initially the Hill Chart works fine, but when I save the x and y coordinates to the database and then refresh the page, the y coordinate seems to be capped to about half of the height.

I tried:

• different width x height combos
• adding a width and height to the <svg /> element before running hill.render()
• having a separate id (css selector, not to be confused with data point id) and target for each Hill Chart as I'm rendering multiple of them per document

but none of them worked.

I understand this issue is not fully clear, I'll hopefully add a minimal reproduction once I'm done with exams.

In the meantime, I looked into the source code and found this:

normalizeData() {
    this.data = this.data.map((point) => {
      return {
        id: point.id ? point.id : uId(),
        color: point.color,
        description: point.description,
        link: point.link,
        x: point.x ? point.x : 0,
        y: point.y ? point.y : hillFn(point.x ? point.x : 0),
        size: point.size ? point.size : 10,
      };
    });
  }

Saving only the x coordinate to the database works as expected, because the y coordinate is derived from it.
I hope this workaround helps someone.

EDIT

Minimal reproduction

• Create a SvelteKit project using yarn create vite -> Svelte -> SvelteKit -> Skeleton Project
• cd into the project directory.
• Run yarn, yarn add hill-chart
• Add this code to src/routes/+page.svelte:

<script lang="ts">
  import { onMount } from "svelte";
  import HillChart from "hill-chart";

  const createHillChart = () => {
    const hillChartData = [
      {
        color: "cyan",
        title: "Title",
        size: 10,
        x: 50,
        y: 50,
      },
    ];
    const hill = new HillChart(hillChartData);
    hill.render();

    hill.on("moved", (data: any) => {
      console.log(data.x, data.y);
    });
  };

  onMount(createHillChart);
</script>

<h1>Minimal Reproduction</h1>
<svg id="hill-chart" />

<style>
  @import "hill-chart/dist/cjs/styles.css";
</style>

• Run yarn dev

Expected Outcome

The item should be at 50, 50 like so:

Observed Outcome

The item is at (what appears to be) 50, 25: